Thursday, March 13, 2003

Nonergonomic! Windows of Opportunity

Nonergonomic! Windows of Opportunity
[人因工程 ]
(2003/03/13)




Gestural Interfaces and Fitt's Law

I was reading some stuff on asktog.com about Fitt's Law, and thinking about ways to make buttons easy to hit. Fitt's law says that the edges of the screen are easiest to hit (especially the corners), and this usually means you should put the most important things on the edges or corners of the screen. The idea is used in the Mac menubar, so when you push the mouse to the top of the screen, you don't have to slow down to hit a button. Tog claims that Mac users are 5x faster than Windows users at getting to a menu as a result. Windows doesn't use these concepts very much, or very well.

I was thinking about the Back and Forward buttons in my browser, and I decided that the left and right edges would make really nice big buttons for those things. I got this idea of "bumping" the mouse on each side as a kind of gestural interface for browsing, and made a program that does that when Internet Explorer is on top and you bump the edge. Some of my friends are now addicted. All you do is bash the mouse pointer against either side of the screen, and the topmost browser window navigates in the appropriate direction.

The Taskbar

Another example of Windows dumbness: the taskbar at the bottom of the screen is about 3 pixels from satisfying Fitt's Law. They just missed. I decided that you shouldn't be able to click below or left of the Start button, and the same for the taskbar buttons. When running the bumper app, the mouse movement is now constrained all the time to exclude these regions. Caveat: You can't use "Auto Hide" for the taskbar or things will break.

This program is invisible, which means that you should run it once, and if all goes well, nothing will visibly happen. Never fear, since in fact, immediately afterwards, your browser and taskbar will have new superpowers.

Full version:
bumper.exe [40k] [updated]
http://www.stereopsis.com/bumper/bumper.exe

Version with no taskbar support [for people who use auto-hide]:
bumper_notask.exe [28k]
http://www.stereopsis.com/bumper/bumper_notask.exe

Editor's Comments:

Opportunities for making highly useful ergonomic advances are all around us. One need not search far and wide for them -- they're right under our noses. This amazingly clever Windows utility ranks among them. If you're reading this article right now, chances are you use Microsoft Windows. And like me, you may be asking yourself "Why didn't I think of that?" An even better question would be "Why didn't Microsoft think of that?" The "Bump" utility is an intriguing ergonomic enhancement to a universally used Graphic User Interface. And while it leaves something to be desired (no vertical scrolling function) it nevertheless demonstrates what it means to "think outside the box", or in this case, "think outside the window". Industrial design neophytes who seem to equate "ergonomic design" with turning everything they see into ugly plastic amoebas need to get a clue.

-- Bevin Chu

Explanation: Gestural Interfaces and Fitt's Law
Illustration: Bumper
Author: Michael Herf
Affiliation: Stereopsis
Source: http://www.stereopsis.com
Publication Date: Not specified
Original Language: English
Editor: Bevin Chu, Registered Architect

Nonergonomic! Jakob Nielsen's Top Ten Mistakes in Web Design

Nonergonomic! Jakob Nielsen's Top Ten Mistakes in Web Design
[人因工程 ]
(2003/03/13)

Jakob Nielsen's Top Ten Mistakes in Web Design

1. Using Frames

Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link?

2. Gratuitous Use of Bleeding-Edge Technology

Don't try to attract users to your site by bragging about use of the latest web technology. You may attract a few nerds, but mainstream users will care more about useful content and your ability to offer good customer service. Using the latest and greatest before it is even out of beta is a sure way to discourage users: if their system crashes while visiting your site, you can bet that many of them will not be back. Unless you are in the business of selling Internet products or services, it is better to wait until some experience has been gained with respect to the appropriate ways of using new techniques. When desktop publishing was young, people put twenty fonts in their documents: let's avoid similar design bloat on the Web. As an example: Use VRML if you actually have information that maps naturally onto a three-dimensional space (e.g., architectural design, shoot-them-up games, surgery planning). Don't use VRML if your data is N-dimensional since it is usually better to produce 2-dimensional overviews that fit with the actual display and input hardware available to the user.

3. Scrolling Text, Marquees, and Constantly Running Animations

Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text! Of course, is simply evil. Enough said.

4. Complex URLs

Even though machine-level addressing like the URL should never have been exposed in the user interface, it is there and we have found that users actually try to decode the URLs of pages to infer the structure of web sites. Users do this because of the horrifying lack of support for navigation and sense of location in current web browsers. Thus, a URL should contain human-readable directory and file names that reflect the nature of the information space.
Also, users sometimes need to type in a URL, so try to minimize the risk of typos by using short names with all lower-case characters and no special characters (many people don't know how to type a ~).

5. Orphan Pages

Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space.

6. Long Scrolling Pages

Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. All critical content and navigation options should be on the top part of the page. Note added December 1997: More recent studies show that users are more willing to scroll now than they were in the early years of the Web. I still recommend minimizing scrolling on navigation pages, but it is no longer an absolute ban.

7. Lack of Navigation Support

Don't assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. Provide a site map and let users know where they are and where they can go. Also, you will need a good search feature since even the best navigation support will never be enough.

8. Non-Standard Link Colors

Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean.

9. Outdated Information

Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date.

10. Overly Long Download Times

I am placing this issue last because most people already know about it; not because it is the least important. Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages. Even websites with high-end users need to consider download times: many B2B customers access websites from home computers in the evening because they are too busy to surf the Web during working hours.

Editor's Comments:

If something as young as the Internet, which is only about a decade old, can rightly claim to have "classics", then Jakob Nielsen's article is just such a "web classic". Althought it was written back in May of 1996, seven years ago, Neilsen's article is still surprisingly relevant years later. In a way that's unfortunate, because it means far too many web authors are still committing the same ten mistakes!

-- Bevin Chu

Explanation: Jakob Nielsen's Top Ten Mistakes in Web Design
Illustration: None
Author: Jakob Nielsen
Affiliation: useit.com: usable information technology
Source: http://www.useit.com/alertbox/9605.html
Publication Date: May 1996
Original Language: English
Editor: Bevin Chu, Registered Architect

Wednesday, March 12, 2003

Bad Ergonomics: Stand-by

Bad Ergonomics: Stand-by
[人因工程 ]
(2003/03/12)



Bad Ergonomics: Stand-by "Off"

This portable Event Data Collector monitors heart rates for workers on-the-job. Technically it's a perfect device. In terms of human factors however, it's not. A design error confuses users. To save on batteries, the device may be set to Stand-by mode. One normally expects such a button to switch between "On" and "Stand-by". Here however, the button (in the yellow circle) switches between Stand-by "On" and Stand-by "Off". One really has to think about it: Stand-by "Off" means the device is registering data, so it equals "On". Stand-by "On" meanwhile, means "Stand-by". Logical, but not ergonomically correct.

submitted by Rob van Ouwerkerk

Editor's Comments:

Too often one is confronted with nonergonomic design that would not have cost a penny more to do right -- if only the designer had "cleared the decks" before embarking on the design process. Blunders such as these are the most galling of all.

What went wrong? We can't know of course, but we can make a pretty good guess. Insofar as it reveals the thought process of its creator, the panel layout is almost an archeological artifact, like the famous cave paintings at Lascaux. It is obvious the designer was sorting out his thoughts as he went along. First he asked himself, "What are its functions?" He then ran down his mental list: Standby, Event, Beep, Reset. Then he said to himself, "Okay, I've got the functions labeled. Now for the settings. For Standby, On and Off... for Beep, On and Off... " and so on.

The problem of course is that end users don't relate to the controls this way. End users have their hands full with just two questions: One, "What does this thing do?" and two, "How do I make it work?" End users want the bottom line. They want ON and STANDBY. They want ON to mean it's working, and STANDBY to mean it's ready to work. Actually, to be perfectly honest, they might not even want that. They might be perfectly happy with plain old ON and OFF. They don't have to know that OFF is actually STANDBY. That can be explained in the instruction booklet if necessary. They sure as hell don't want to have to sort through the product designer's bewildering double negatives, in which ON means OFF and OFF means ON.

One of the biggest challenges for designers of all kinds, is to avoid such blunders by figuratively "pushing the reset button" in ones' mind. This applies to everyone -- from the urban designer who planned the neighborhood, to the architect who designed the individual building, to the furniture designer who designed the table, to the product designer who designed the "Event Data Collector" sitting on the table before us. All designers must learn to start with a clean slate before embarking on new design projects. Unexamined assumptions must go straight out the window, because "when you assume," as the old joke goes, "you make an ass out of you and me."

-- Bevin Chu

Explanation: Bad Ergonomics: Standby Off
Illustration: Standby Off
Author: Rob van Ouwerkerk
Affiliation: Human Factors and Ergonomics Society Europe Chapter
Source: http://utopia.ision.nl/users/hfesec/index.htm
Publication Date: 1998-1999
Original Language: English
Editor: Bevin Chu, Registered Architect

Bad Ergonomics: Ergonomics at Work

Bad Ergonomics: Ergonomics at Work
[人因工程 ]
(2003/03/12)



Bad Ergonomics: Ergonomics at Work

A clear example of applied ergonomics at work. And no, this image was not faked.

Submitted by Dick de Waard, thanks to Matthijs Dicke

Editor's Comments:

No comment necessary!

-- Bevin Chu

Explanation: Bad Ergonomics: Ergonomics at Work
Illustration: Ergonomics at Work
Author: Dick de Waard
Affiliation: Human Factors and Ergonomics Society Europe Chapter
Source: http://utopia.ision.nl/users/hfesec/index.htm
Publication Date: 1998-1999
Original Language: English
Editor: Bevin Chu, Registered Architect

Tuesday, March 11, 2003

Bad Ergonomics: Search. Not Clear Search!

Bad Ergonomics: Search. Not Clear Search!
[人因工程 ]
(2003/03/11)



Bad Ergonomics: Search. Not Clear Search!

After entering "conference" you expect an "Enter" or "Search!" button to the right (orange arrow). But that is not what you are going to find.

Submitted by Dick de Waard

Editor's Comments:

The above is an example of ergonomic design -- I should say NONergonomic design -- that categorically does not involve touch, for the simple reason that the MMI (Man Machine Interface) is a 2-D virtual menu with no physical mass. The onscreen menu has no physical buttons, only virtual buttons. It is literally impossible to touch them, no matter how hard one might try.

Please note that even if the screen were an interactive touch screen, one would not actually be touching a button, merely the screen onto which the image of a button had been projected. What's the point of all this? Merely to underscore the fact that with so much of our work and play being conducted in cyberspace, what might be termed "virtual ergonomics" or perhaps "cybernomics" is becoming more and more relevant.

Isn't it bad enough that inadequate attention has been paid to ergonomics in physical space? The last thing we need is to replicate the same mistakes in cyberspace. Ergonomic interfaces in cyberspace involve zero manufacturing costs. We are talking about GUIs here folks. Graphic User Interfaces. No physical mass involved. What possible excuse can we make for lousy ergonomics in an onscreen Windows menu? That a more ergonomic interface "would have cost more to manufacture?"

-- Bevin Chu

Explanation: Bad Ergonomics: Search. Not Clear Search!
Illustration: Search. Not Clear Search!
Author: Dick de Waard
Affiliation: Human Factors and Ergonomics Society Europe Chapter
Source: http://utopia.ision.nl/users/hfesec/index.htm
Publication Date: 1998-1999
Original Language: English
Editor: Bevin Chu, Registered Architect

Wednesday, March 5, 2003

Bad Designs: Who Left the Coffee Maker On?

Bad Designs: Who Left the Coffee Maker On?
[人因工程 ]
(2003/03/05)



Bad Designs: Who Left the Coffee Maker On?

This picture shows my coffee maker. It works pretty well except for one problem. The on/off switch in front of the coffee maker located about 1/2 inch above the bottom can be easily activated by accidently pushing a sponge or dinner plate against it. I noticed this problem when the cleaning lady accidently turned it on, twice, while cleaning the kitchen. Good thing it didn't burn the house down.

Design Recommendations:

When you decide where to place a control, you need to consider the environment it is used in.

Editor's Comments:

This example provides a clue as to why good design is so rare. Good design is no easy matter. Good design does not "just happen". If a design "just happens" chances are it's bad design. Even Germany's Braun, one of the finest appliance manufacturers in the world, with some of the best industrial designers in their employ can screw up on occasion. [Full Disclosure: I myself am the proud owner of many well-designed Braun and Krups appliances.]

-- Bevin Chu

Explanation: Bad Designs: Who Left the Coffee Maker On?
Illustration: Bad Designs: Who Left the Coffee Maker On?
Author: Michael Darnell
Affiliation: Bad Designs
Source: www.baddesigns.com
Publication Date: 1996-1999
Original Language: English
Editor: Bevin Chu, Registered Architect

Bad Designs: Pointer on Audio Tape

Bad Designs: Pointer on Audio Tape
[人因工程 ]
(2003/03/05)



Bad Designs: Pointer on Audio Tape

Guess where you must start to peel off the plastic packing material?

Opening a video or audio cassette tape is always frustrating. The plastic packing material fits tightly around the box, and it is difficult to find out where to open it. The manufacturer of this audio tape understands the problem and promises "easy opening". Try it for yourself, and either click on the blue or white area, depending upon where you expect you have to start peeling off the plastic.

Editor's Comments:

Give the manufacturer credit for good intentions at least. Unfortunately they failed to test the product with a focus group before putting it into production. They would have quickly discovered that most people do not interpret the instructions the way they imagined. Again we are reminded of the critical importance of "iterative design", which is basically a fancy term for "reality check".

-- Bevin Chu

Explanation: Bad Designs: Pointer on Audio Tape
Illustration: Bad Designs: Pointer on Audio Tape
Author: Dick de Waard
Affiliation: Bad Designs
Source: www.baddesigns.com
Publication Date: 1996-1999
Original Language: English
Editor: Bevin Chu, Registered Architect