User interfaces meet us at every turn. Approach an unfamiliar building and questions arise such as “where is the entrance?” and “how can I make this door open so that I can enter the building?” Once inside you may ask “how do I turn on the lights?” or “how do I get to the meeting room where my presentation will take place?”Once you find the room, open the door, and turn on the lights to the meeting room, you start to ask the difficult questions such as “how do I turn on the A/V system and how do I get my computer up on that video screen?” Some of these questions use very little brain power to answer. The shorter amount of “brain processing time” it takes to come up with an answer, the better the interface.When a person successfully performs a task with very little effort, the interface is often referred to as “intuitive.” However, to quote Jef Raskin from his book, The Humane Interface: “One of the most laudatory terms used to describe an interface is to say that it is ‘intuitive.’ When examined closely, this concept turns out to vanish like a pea in a shell game and be replaced with the more ordinary but more accurate term ‘familiar.’”Or put more directly by programmer Bruce Ediger, “The only ‘intuitive’ interface is the nipple. After that it’s all learned.”As a designer, one can design an interface that is more familiar for the user and easier to use. Using a variety of tools, we can learn to create better interfaces for complex systems, whether they are audiovisual control interfaces from AMX or Crestron or building environment controls from Johnson Controls or Honeywell. The key goal in designing user interfaces should be to
avoid mistakes by the end-user. Errors by the end-user are almost always the result of poor design — not limited mental ability — and should be examined carefully. Have you ever watched someone push a door when he should have pulled? A simple change in the door handle configuration can usually avoid any confusion on what to do with a door: a bar parallel to the ground at waist height is for pushing, a vertical bar at chest level is for pulling. Most people are physically aligned to make these actions easy and familiar.Here are seven basic principles of user interface design.1. Guide users through the common sequence of use.A good exercise for an interface designer prior to designing an interface is to put oneself in the place of the person using the system. Of course, as a designer you are substantially better informed about the technology than the end-user. So it also may help to interview the user at the early stages of a project and ask them to “walk you through” what they know or would imagine to be a typical usage.Once you have this model of use you can develop a usage grammar such as “VIEW the DVD” and “PLAY”. This kind of simple scenario can help you design the sequence of control placement on the control panel, for example.2. Use what people already know.If there is a grammar of system use, then placing the control buttons for “VIEW” and “DVD” and “PLAY” from left to right would be a logical layout that is already familiar, “affording” the users’ learned knowledge. Left to right is the way people read (in many countries) and the way people expect to sequence information on a paper or computer screen. By placing controls from left to right you will give them what Donald Norman, author of The Design of Everyday Things, refers to as an affordance — indicating or prompting the user what to do first. A general example used to illustrate this idea of an affordance is a chair. A chair affords sitting because the flat platform of a chair is conveniently located at the height our knee bends. Since people know that a seat is approximately 24 inches from the floor, things that are flat and at that height afford sitting whether or not they are meant for this use. Watch a man in a shopping mall waiting for his wife — display racks or shelves at chair height will be used as a seat because they afford sitting.Using affordances is a great tool for designers because you can literally teach someone what to do. One way of using this principle for touchscreen design is by graphically making buttons look “pressable.” Everyone is familiar with the way physical buttons look. When a two-dimensional touchpanel displays something that looks like a button, it will afford pressing.We have seen many examples of 2-D objects that look “pressable” that were only meant to be labels. We also have seen elements that look like labels that were intended to be pressed — many web sites are guilty of this. These are examples of poor affordances and typically lead to some user error.3. Tell people what they did and show that that it worked.Feedback is a fairly straightforward idea. Good feedback:
(1) tells the user what the status of the system is and (2) tells the user that the action they performed was successfully understood by the system and has been executed (or is in the process of being executed).An example is the simple push-to-walk switch found on street corners inTokyo , Japan . Unlike most crosswalk switches in the U.S. , this one indicates when someone has already pressed the button, so that people who arrive at the corner after someone has already requested a crossing can avoid duplicating the command — again, avoiding user error.Another example is the volume control section of an audio interface which indicates the volume level of the system. This is useful when the system has been muted, as it shows any user what volume the system will return to when the system is un-muted.4. Keep users from doing harmful things.Harmful things may be actual physical dangers or only harmful in the sense that they confuse the user and lead to lost information or a bad presentation. User interfaces can prevent harmful things from happening by placing constraints on the possible actions a user may take. Turning on the power to a large video projector before lowering it out of its hidden chamber above the ceiling could lead to overheating. A good interface design would not only prevent such a condition from happening but would also facilitate lowering the projector and turning it on after confirming the user’s intent.Possibly destructive system actions should verify the user’s intent before taking action. Anyone who has used a conference phone to dial more than one person knows the consequences of accidentally hanging up a telephone call. Both audio and video teleconference systems should check with the user before disconnecting.5. Show everything that is necessary and no more.A piano has very high visibility of user options. Every note the instrument plays is directly represented by its own button on the “user interface,” a row of white and black keys. Elevator control panels have the same level of visibility, showing all the possible floors visited by the machine. Elevator panels could be designed with less visibility, however, and display only commonly accessed hotel floors, with the executive levels only revealed when a rider presents the proper ID card. A service ID could reveal more advanced controls such as the ability to bypass floors. (Wouldn’t it be nice if a television universal remote would display only those buttons necessary to control what you are watching at the moment?)While a pianist is highly trained and practiced in their instrument, people operating building and audiovisual systems may be first-time users. When the amount of information that someone has to process is organized in a way that is appropriate to their goals, their “think-load” is reduced. Keep the controls visible that the user needs to see, and provide an easy navigation for finding the controls that have been hidden.6. Locate controls in relation to the physical world.Contrary to popular belief, most people really do know which way is up. Putting buttons to raise and lower the window shades above each other on a control panel feels much more natural than placing them side by side. This is referred to as control mapping. Giving clues about the orientation of the world helps users to predict the outcome before they press the button, which is comforting. For many years video and audio tape has traveled from the tape reel on the left to the reel on the right as it plays. This is why the “PLAY” button arrow icon on remote controls points to the right. Even though in a digital world the mechanical dimension is no longer relevant, the designer who tries to locate a “FAST FORWARD” control to the left of the “PLAY” button will meet with angry and confused end-users!7. Don’t use the same control for more than one function.When a single button or control behaves differently depending on the condition of the system, it is said to be modal. This is confusing to users because they are often unable to keep track of the nebulous status of the system and may get an outcome they were not expecting.A three-way light switch is modal because sometimes the switch up position means the light is on and sometimes the switch down position means the light is on, depending on the condition of the switch at the opposite end of the room. A user will make the modal error of walking into a dark room and flip her hand upward expecting to turn on the light. When the switch is already in the up and off position, she will not get the result she was expecting.Sophisticated conference room control panels often allow the selection of multiple light levels. A user may complain that the control will only turn the lights up full on instead of allowing a choice. The control system designer justifies the unnecessary system constraint by saying, “Oh, that’s because you are in “video conference mode” when you should only need full lighting.”The design of user interfaces is a discipline much like industrial design. In his latest book, Emotional Design, Donald Norman discusses research indicating that users think an interface is easier to use when it is beautifully designed graphically — even when the graphics have nothing to do with usability. The designer must attend first to applying the principles of good usability in an interface, and only then should he focus his attention on the graphic design of the interface, with the aim of implementing this beautification without reducing usability.Graphic design principles are outside the scope of this article, but they are not inconsequential to the success of a user interface. The Apple iPod is an excellent example of usability and beauty in harmony, and its success is the outcome of a fanatical attention to both disciplines. An examination of this and other (nearly) effortless interfaces is something that can be done at every “interfacing” you do with the real and virtual world. Next time you approach a door, stop and think if it is making you work harder than it should for you to enter or exit.After a design is complete, it may not be finished. Usability testing is an important step in refining an interface. Observing people using the interface you have designed is the best way to improve it. If you find that those using the system are making errors, avoid the trap of “explaining” how to use it. Consider how you can redesign the interface so that the error is not possible.This last step is difficult for the technically minded designer, but you will soon realize that the best interface designer is one who is willing to admit his own mistakes instead of pointing out the mistakes of the end-user.BIBLIOGRAPHYPRIMARY REFERENCESTHE DESIGN OF EVERYDAY THINGS AND EMOTIONAL DESIGN, BOTH BY DONALD NORMANTHE 7 ESSENTIALS OF GRAPHIC DESIGN BY ALLISON GOODMAN
INTERFACE DESIGN REFERENCESTHE HUMANE INTERFACE: NEW DIRECTIONS FOR DESIGNING INTERACTIVE SYSTEMS BY JEF RASKINDESIGNING VISUAL INTERFACES: COMMUNICATION ORIENTED TECHNIQUES BY KEVIN MULLET AND DARRELL SANOMAKING USE: SCENARIO-BASED DESIGN OF HUMAN-COMPUTER INTERACTIONS BY JOHN M. CARROLLINTERACTIVITY BY DESIGN BY KRISTOF & SATRANTHE ART OF HUMAN-COMPUTER INTERFACE DESIGN BY BRENDA LAURELDON’T MAKE ME THINK BY STEVE KRUG
INFORMATION DESIGN REFERENCESENVISIONING INFORMATION BY EDWARD R. TUFTEINFORMATION DESIGN BY ROBERT JACOBSON, ED.INFORMATION GRAPHICS BY PETER WILDBUR AND MICHAEL BURKEINFORMATION ARCHITECTS BY RICHARD SAUL WURMANPAUL CHAVEZ IS DIRECTOR OF SYSTEMS APPLICATIONS WITH HARMAN PROFESSIONAL GROUP ([email protected]), AND DAVE THEIS IS PRINCIPAL WITH THEIS CONSULTING ([email protected]). THIS ARTICLE IS DERIVED FROM A PRESENTATION AT INFOCOMM 2004, SPONSORED BY ICIA (INTERNATIONAL COMMUNICATIONS INDUSTRIES ASSOCIATION).
avoid mistakes by the end-user. Errors by the end-user are almost always the result of poor design — not limited mental ability — and should be examined carefully. Have you ever watched someone push a door when he should have pulled? A simple change in the door handle configuration can usually avoid any confusion on what to do with a door: a bar parallel to the ground at waist height is for pushing, a vertical bar at chest level is for pulling. Most people are physically aligned to make these actions easy and familiar.Here are seven basic principles of user interface design.1. Guide users through the common sequence of use.A good exercise for an interface designer prior to designing an interface is to put oneself in the place of the person using the system. Of course, as a designer you are substantially better informed about the technology than the end-user. So it also may help to interview the user at the early stages of a project and ask them to “walk you through” what they know or would imagine to be a typical usage.Once you have this model of use you can develop a usage grammar such as “VIEW the DVD” and “PLAY”. This kind of simple scenario can help you design the sequence of control placement on the control panel, for example.2. Use what people already know.If there is a grammar of system use, then placing the control buttons for “VIEW” and “DVD” and “PLAY” from left to right would be a logical layout that is already familiar, “affording” the users’ learned knowledge. Left to right is the way people read (in many countries) and the way people expect to sequence information on a paper or computer screen. By placing controls from left to right you will give them what Donald Norman, author of The Design of Everyday Things, refers to as an affordance — indicating or prompting the user what to do first. A general example used to illustrate this idea of an affordance is a chair. A chair affords sitting because the flat platform of a chair is conveniently located at the height our knee bends. Since people know that a seat is approximately 24 inches from the floor, things that are flat and at that height afford sitting whether or not they are meant for this use. Watch a man in a shopping mall waiting for his wife — display racks or shelves at chair height will be used as a seat because they afford sitting.Using affordances is a great tool for designers because you can literally teach someone what to do. One way of using this principle for touchscreen design is by graphically making buttons look “pressable.” Everyone is familiar with the way physical buttons look. When a two-dimensional touchpanel displays something that looks like a button, it will afford pressing.We have seen many examples of 2-D objects that look “pressable” that were only meant to be labels. We also have seen elements that look like labels that were intended to be pressed — many web sites are guilty of this. These are examples of poor affordances and typically lead to some user error.3. Tell people what they did and show that that it worked.Feedback is a fairly straightforward idea. Good feedback:
(1) tells the user what the status of the system is and (2) tells the user that the action they performed was successfully understood by the system and has been executed (or is in the process of being executed).An example is the simple push-to-walk switch found on street corners in
INTERFACE DESIGN REFERENCESTHE HUMANE INTERFACE: NEW DIRECTIONS FOR DESIGNING INTERACTIVE SYSTEMS BY JEF RASKINDESIGNING VISUAL INTERFACES: COMMUNICATION ORIENTED TECHNIQUES BY KEVIN MULLET AND DARRELL SANOMAKING USE: SCENARIO-BASED DESIGN OF HUMAN-COMPUTER INTERACTIONS BY JOHN M. CARROLLINTERACTIVITY BY DESIGN BY KRISTOF & SATRANTHE ART OF HUMAN-COMPUTER INTERFACE DESIGN BY BRENDA LAURELDON’T MAKE ME THINK BY STEVE KRUG
INFORMATION DESIGN REFERENCESENVISIONING INFORMATION BY EDWARD R. TUFTEINFORMATION DESIGN BY ROBERT JACOBSON, ED.INFORMATION GRAPHICS BY PETER WILDBUR AND MICHAEL BURKEINFORMATION ARCHITECTS BY RICHARD SAUL WURMANPAUL CHAVEZ IS DIRECTOR OF SYSTEMS APPLICATIONS WITH HARMAN PROFESSIONAL GROUP ([email protected]), AND DAVE THEIS IS PRINCIPAL WITH THEIS CONSULTING ([email protected]). THIS ARTICLE IS DERIVED FROM A PRESENTATION AT INFOCOMM 2004, SPONSORED BY ICIA (INTERNATIONAL COMMUNICATIONS INDUSTRIES ASSOCIATION).
