First Principles of Interaction Design

Posted by mcfrazer April 10th, 2007

Jump to: Anticipation Autonomy Color Blindness Consistency Defaults Efficiency of the User Explorable Interfaces Fitts’ Law Human-Interface Objects Latency Reduction Learnability Limit Tradeoffs Metaphors Protect the User’s Work Readability Track State Visible Interfaces				Thefollowing principles are fundamental to the design and implementationof effective interfaces, whether for traditional GUI environments orthe web. Of late, many web applications have reflected a lack ofunderstanding of many of these principles of interaction design, totheir great detriment. Because an application or service appears on theweb, the principles do not change. If anything, applying theseprinciples become even more important. • Deutsche (German) Version: http://meiert.com/de/publications/translations/asktog.com/firstprinciples/ • Nederlands (Dutch) Version: http://aifia.org/nl/translations/000187.html • Spanish Version: http://galinus.com/es/articulos/principios-diseno-de-interaccion.html Effective interfaces are visually apparent and forgiving, instilling intheir users a sense of control. Users quickly see the breadth of theiroptions, grasp how to achieve their goals, and do their work. Effectiveinterfaces do not concern the user with the inner workings of thesystem. Work is carefully and continuously saved, with full option forthe user to undo any activity at any time. Effective applications and services perform a maximum of work, while requiring a minimum of information from users. This work is copyright 2003 by Bruce Tognazzini. Permission to makecopies for personal use is granted without reservation, provided thiscopyright notice remains on the copy. Please contact the author forpermission to republish on a web site, to publish in bound form, or tomake multiple copies, except that educators and in-house corporatetrainers may make sufficient copies for their own students. Nocommerical use may be made of the work beyond this in-house exception.This notice must be retained together with any version of the work.
		Anticipation		Applicationsshould attempt to anticipate the user’s wants and needs. Do not expectusers to search for or gather information or evoke necessary tools.Bring to the user all the information and tools needed for each step ofthe process.
		Autonomy		The computer, the interface, and the task environment all “belong” to the user, but user-autonomy doesn’t mean we abandon rules. Giveusers some breathing room. Users learn quickly and gain a fast sense ofmastery when they are placed “in charge.” Paradoxically, however,people do not feel free in the absence of all boundaries (Yallum,1980). A little child will cry equally when held too tight or left towander in a large and empty warehouse. Adults, too, feel mostcomfortable in an environment that is neither confining nor infinite,an environment explorable, but not hazardous. Use status mechanisms to keep users aware and informed. Noautonomy can exist in the absence of control, and control cannot beexerted in the absence of sufficient information. Status mechanisms arevital to supplying the information necessary for workers to respondappropriately to changing conditions. As a simple example, workers,failing status information, will tend to maintain heightened pressureon themselves during slow periods, until the moment the work actuallyruns out. This will stress and fatigue them unnecessarily, so that whenthe next rush occurs, they may be lacking the physical and mentalreserves to handle it. Keep status information up to date and within easy view Usersshould not have to seek out status information. Rather, they should beable to glance at their work environment and be able to gather at leasta first approximation of state and workload. Status information can bequite subtle: the inbox icon could be switched to show an empty,somewhat full, or stuffed state. This, however, should not be overdone.The Macintosh, for years, showed an icon of a trashcan of imminentdanger of explosion if a single document was placed therein. Usersquickly formed the habit of emptying the trashcan as soon as the firstdocument hit. This not only turned a single-step operation into atwo-step operation (drag to the trash, then empty the trash), itnegated the entire power of the trashcan, namely, undo. Asanother positive example, a search field icon can change color andappearance to indicate that the search is in progress or has beencompleted with too many matches, too few matches, or just enough. (Likeany element of the interface, just color is not enough; 10% of malesshow some indication of color blindness. Even a higher percentage mayhave temporary alterations in perception of blue under varyingconditions.)
		Color Blindness		Anytime you use color to convey information in the interface, you shouldalso use clear, secondary cues to convey the information to those whowon’t be experiencing any color coding today. Most people havecolor displays nowadays, but they are not universal. In addition,approximately 10% of human males, along with a rare sprinkling offemales, have some form of color blindness. The cones inthe eye are the source of color vision. We have cones separatelysensitive to red, green, and blue. If the red ones are not functioningthat is called protanopia. If the green are not functioning, that iscalled deuteranopia. Absence of blue, extremely rare, is calledtritanopia. Protanopia and deuteranopia are the mostpopular forms of color blindness, collectively called red/greenblindness. (There are, in fact, significant differences in theireffects, but those differences have no real effect on interactiondesign.) While tritanopia is far more rare, it nonetheless rules outdependence on yellow-blue differentiation without secondary cues. Secondarycues can consist of anything from the subtlety of gray scaledifferentiation to having a different graphic or different text labelassociated with each color presented.
		Consistency		Thefollowing principles, taken together, offer the interaction designertremendous latitude in the evolution of a product without seriouslydisrupting those areas of consistency most important to the user. Levelsof consistency: The importance of maintaining strict consistencyvaries. The following list is ordered from those interface elementsdemanding the most faithful consistency effort to those demanding theleast. Paradoxically, many people assume that the order of items onethrough five should be exactly the reverse, leading to applicationsthat look alike, but act completely different in unpredictable ways: Interpretation of user behavior, e. g., shortcut keys maintain their meanings. Invisible structures. Small visible structures. The overall “look” of a single application or service–splash screens, design elements. A suite of products. In-house consistency. Platform-consistency. “Invisiblestructures” refers to such invisible objects as Microsoft Word’s cleverlittle right border that has all kinds of magical properties, if youever discover it is there. It may or may not appear in your version ofWord. And if it doesn’t, you’ll never know for sure that it isn’treally there, on account of it’s invisible. Which is exactly what iswrong with invisible objects and why consistency is so important. Otherobjects are, strictly speaking, visible, but do not appear to becontrols, so users, left to their own devices, might never discovertheir manipulability. The secret, if you absolutely insist on one,should be crisp and clean, for example, “you can click and drag theedges of current Macintosh windows to size them,” not, “You can clickand drag various things sometimes, but not other things other times.” “Small visible structures” refers to icons, size boxes, scroll arrows,etc. The appearance of such objects needs to be strictly controlled ifpeople are not to spend half their time trying to figure out how toscroll or how to print. Location is only just slightly less importantthan appearance. Where it makes sense to standardize location, do so. Inconsistency:It is just important to be visually inconsistent when things must actdifferently as it is to be visually consistent when things act thesame. Avoid uniformity. Make objects consistent with their behavior. Make objects that act differently look different. The most important consistency is consistency with user expectations. The only way to ascertain user expectations is to do user testing. No amount of study and debate will substitute.
		Defaults		Defaultsshould be easy to “blow away:” Fields containing defaults should comeup selected, so users can replace the default contents with newmaterial quickly and easily. Defaults should be “intelligent” and responsive. Donot use the word “default” in an application or service. Replace with”Standard,” “Use Customary Settings,” “Restore Initial Settings,” orsome other more specific terms describing what will actually happen.
		Efficiency of the User		Look at the user’s productivity, not the computer’s. Peoplecost a lot more money than machines, and while it might appear thatincreasing machine productivity must result in increasing humanproductivity, the opposite is often true. In judging the efficiency ofa system, look beyond just the efficiency of the machine. Forexample, which of the following takes less time? Heating water in amicrowave for one minute and ten seconds or heating it for one minuteand eleven seconds? From the standpoint of themicrowave, one minute and ten seconds is the obviously correct answer.From the standpoint of the user of the microwave, one minute and elevenseconds is faster. Why? Because in the first case, the user must pressthe one key twice, then visually locate the zero key, move the fingerinto place over it, and press it once. In the second case, the userjust presses the same key–the one key–three times. It typically takesmore than one second to acquire the zero key. Hence, the water isheated faster when it is “cooked” longer. Other factorsbeyond speed make the 111 solution more efficient. Seeking out adifferent key not only takes time, it requires a fairly high level ofcognitive processing. While the processing is underway, the main taskthe user was involved with–cooking their meal–must be set aside. Thelonger it is set aside, the longer it will take to reacquire it. Additionally,the user who adopts the expedient of using repeating digits formicrowave cooking faces fewer decisions. They soon abandon figuringout, for example, whether bacon should be cooked for two minutes andten seconds or two minutes and twenty-three seconds. They do a fastestimate and, given the variability of water content and baconthickness, end up with as likely a successful result with a lot lessdickering up front, again increasing human efficiency. Keep the user occupied. Since,typically, the highest expense in a business is labor cost. Any timethe user must wait for the system to respond before they can proceed,money is being lost. Tomaximize the efficiency of a business or other organization you mustmaximize everyone’s efficiency, not just the efficiency of a singlegroup. Large organizations tend tobe compartmentalized, with each group looking out for its owninterests, sometimes to the detriment of the organization as a whole.Information resource departments often fall into the trap of creatingor adopting systems that result in increased efficiency and loweredcosts for the information resources department, but only at the cost oflowered productivity for the company as a whole. Forexample, one large California corporation used floppy disks as themedium for collecting benefit enrollment information. At the beginningof open enrollment, each employee would receive a disk with theenrollment applications on which he or she would insert into theircomputer and run. After asking for the employee’s name, address, phonenumber, department name, etc., the employee would be permitted to stepthrough all the various benefits, ultimately returning the disk whichnow contained all their answers and decisions. The IR department thensucked the data off each disk and entered it into their system, allautomatically. The IR department saved a great deal of money over theold system, where they had to key in the employee’s decisions from apaper form. What was the problem? Instead of the IRdepartment bearing the burden of keying in the employees’ decisions,each and every employee now bore the burden of typing in his or hername, address, phone number, department name, etc. The system was justas inefficient as before, but now the cost was borne by alldepartments, rather than having it concentrated in the IR department’sbudget. The great efficiencybreakthroughs in software are to be found in the fundamentalarchitecture of the system, not in the surface design of the interface. This simple truth is why itis so important for everyone involved in a software project toappreciate the importance of making user productivity goal one and tounderstand the vital difference between building an efficient systemand empowering an efficient user. This truth is also key to the needfor close and constant cooperation, communication, and conspiracybetween engineers and human interface designers if this goal is to beachieved. Write help messages tightly and make them responsive to the problem: good writing pays off big in comprehension and efficiency. Menu and button labels should have the key word(s) first. Example from a fictitious word processor: Wrong: Insert page break Add Footnote Update Table of Contents Right: Insert: Page break Footnote Table of contents Here,the first example, with its leading words, is actually more informativeand more accurate: one does not “insert” a footnote if it is to beplaced after all the other footnotes. And one does not insert a tableof contents if there is already a table of contents there. Instead, oneupdates it. Still, the second example will prove much more efficient intime-trials. Why? Because the extra information the first exampleoffers does not outweigh the advantage of being able to scan only thefirst word in each menu item to find the specific menu item you areafter.
		Explorable Interfaces		Give users well-marked roads and landmarks, then let them shift into four-wheel drive. Mimicthe safety, smoothness, and consistency of the natural landscape. Don’ttrap users into a single path through a service, but do offer them aline of least resistance. This lets the new user and the user who justwants to get the job done in the quickest way possible and “no-brainer”way through, while still enabling those who want to explore and playwhat-if a means to wander farther afield. Sometimes, however, you have to provide deep ruts. Thecloser you get to the naive end of the experience curve, the more youhave to rein in your users. A single-use application for accomplishingan unknown task requires a far more directive interface than ahabitual-use interface for experts. Offer users stable perceptual cues for a sense of “home.” Stablevisual elements not only enable people to navigate fast, they act asdependable landmarks, giving people a sense of “home.” Make Actions reversible Peopleexplore in ways beyond navigation. Sometimes they want to find out whatwould happen if they carried out some potentially dangerous action.Sometimes they don’t want to find out, but they do anyway by accident. By making actions reversible, users can both explore and can “get sloppy” with their work. Always allow “Undo.” Theunavoidable result of not supporting undo is that you must then supporta bunch of dialogs that say the equivalent of, “Are you really, reallysure?” Needless to say, this slows people down. In theabsence of such dialogs, people slow down even further. A study a fewyears back showed that people in a hazardous environment make no moremistakes than people in a supportive and more visually obviousenvironment, but they worked a lot slower and a lot more carefully toavoid making errors. Always allow a way out. Users should never feel trapped. They should have a clear path out. However, make it easier to stay in. Earlysoftware tended to make it difficult to leave. With the advent of theweb, we’ve seen the advent of software that makes it difficult to stay.Web browsers still festoon their windows with objects and options thathave nothing to do with our applications and services running within.Our task can become akin to designing a word process which, oh, by theway, will be using Photoshop’s menu bar. Having 49 options on thescreen that lead directly to destruction of the user’s work, along withone or two that just might help is not an explorable interface, it isthe interface from hell. If you are working with complex transactionsusing a standard web browser, turn off the menu bar and all of theother irrelevant options, then supply our own landmarks and options.
		Fitts’ Law		The time to acquire a target is a function of the distance to and size of the target. Whileat first glance, this law might seem patently obvious, it is one of themost ignored principles in design. Fitts’ law (properly, but rarely,spelled “Fitts’ Law”) dictates the Macintosh pull-down menu acquisitionshould be approximately five times faster than Windows menuacquisition, and this is proven out. Fitts’ law dictatesthat the windows task bar will constantly and unnecessarily get inpeople’s way, and this is proven out. Fitts’ law indicates that themost quickly accessed targets on any computer display are the fourcorners of the screen, because of their pinning action, and yet, foryears, they seemed to be avoided at all costs by designers. Use large objects for important functions (Big buttons are faster). Usethe pinning actions of the sides, bottom, top, and corners of yourdisplay: A single-row toolbar with tool icons that “bleed” into theedges of the display will be many times faster than a double row oficons with a carefully-applied one-pixel non-clickable edge between thetools and the side of the display.
		Human Interface Objects		Human-interfaceobjects are not necessarily the same as objects found inobject-oriented systems. Our objects include folders, documents, andthe trashcan. They appear within the user’s environment and may or maynot map directly to an object-oriented object. In fact, many earlygui’s were built entirely in non-object-oriented environments. Human-interface objects can be seen, heard, touched, or otherwise perceived. Humaninterface objects that can be seen are quite familiar in graphic userinterfaces. Objects that play to another sense such as hearing or touchare less familiar. Good work has been done in developing auditory icons(Gaver). Human-interface objects have a standard way of interacting. Human-interface objects have standard resulting behaviors. Human-interface objects should be understandable, self-consistent, and stable.
		Latency Reduction		Wherever possible, use multi-threading to push latency into the background. Latencycan often be hidden from users through multi-tasking techniques,letting them continue with their work while transmission andcomputation take place in the background. Reduce the user’s experience of latency. Acknowledge all button clicks by visual or aural feedback within 50 milliseconds. Display an hourglass for any action that will take from 1/2 to 2 seconds. Animate the hourglass so they know the system hasn’t died. Display a message indicating the potential length of the wait for any action that will take longer than 2 seconds. Communicate the actual length through an animated progress indicator. Offerengaging text messages to users informed and entertained while they arewaiting for long processes, such as server saves, to be completed. Make the client system beep and give a large visualindication upon return from lengthy (>10 seconds) processes, so thatusers know when to return to using the system. Trap multiple clicks of the same button or object.Because the Internet is slow, people tend to press the same buttonrepeatedly, causing things to be even slower. Make it faster Eliminate any element of the application that is not helping. Be ruthless.
		Learnability		Ideally,products would have no learning curve: users would walk up to them forthe very first time and achieve instant mastery. In practice, allapplications and services, no matter how simple, will display alearning curve. Limit the Trade-Offs. Usabilityand learnability are not mutually exclusive. First, decide which is themost important; then attack both with vigor. Ease of learningautomatically coming at the expense of ease of use is a myth.
		Metaphors, Use of		Choose metaphors well, metaphors that will enable users to instantly grasp the finest details of the conceptual model. Good metaphors are stories, creating visible pictures in the mind. Bringmetaphors alive by appealing to people’s perceptions–sight, sound,touch, and kinesthesia–as well as triggering their memories. Metaphors usually evoke thefamiliar, but often add a new twist. For example, Windows 95 has anobject called a briefcase. Like a real-world briefcase, its purpose isto help make electronic documents more portable. It does so, however,not by acting as a transport mechanism, but as a synchronizer:Documents in the desktop briefcase and the briefcase held on portablemedia are updated automatically when the portable media is inserted inthe machine.
		Protect Users’ Work		Ensurethat users never lose their work as a result of error on their part,the vagaries of Internet transmission, or any other reason other thanthe completely unavoidable, such as sudden loss of power to the clientcomputer. (Even here, it has becomecompletely inexcusable that today’s computers and operating systems donot support and encourage continuous-save. That, coupled with a smallamount of power-protected memory could eliminate the embarrassment of$5000 machines offering the reliability of 10-cent toys.)
		Readability		Text that must be read should have high contrast. Favor black text on white or pale yellow backgrounds. Avoid gray backgrounds. Usefont sizes that are large enough to be readable on standard monitors.Favor particularly large characters for the actual data you intend todisplay, as opposed to labels and instructions. For example, the label,”Last Name,” can afford to be somewhat small. Habitual users will learnthat that two-word gray blob says “Last Name.” Even new users, based onthe context of the form on which it appears, will have a pretty goodguess that it says “Last Name.” The actual last name entered/displayed,however, must be clearly readable. This becomes even more important fornumbers. Human languages are highly redundant, enabling people to”heal” garbled messages. Numbers, however, unless they follow a verystrict protocol, have no redundancy, so people need the ability toexamine and comprehend every single character. Pay particular attention to the needs of olderpeople. Presbyopia, the condition of hardened, less flexible lenses,coupled with reduced light transmission into the eye, affects mostpeople over age 45. Do not trust your young eyes to make size andcontrast decisions.
		Track State		Becausemany of our browser-based products exist in a stateless environment, wehave the responsibility to track state as needed. We may need to know: Whether this is the first time the user has been in the system Where the user is Where the user is going Where the user has been during this session Where the user was when they left off in the last session and myriad other details. In addition to simply knowing where they’ve been, we can also make good use of what they’ve done. Stateinformation should be held in a cookie on the client machine during asession with a transaction service, then stored on the server when theylog off. Users should be able to log off at work, go home, and take up exactly where they left off. Aprivate service for doctors, Physicians On Line, does an excellent jobwith this. Doctors can be 95% of the way through a complex transaction,log off, log in again six weeks later from another part of the world,and the service will ask them if they want to be taken right back towhere they were.
		Visible Navigation		Avoid invisible navigation. Most users cannot and will not build elaborate mental maps and will become lost or tired if expected to do so. TheWorld Wide Web, for all its pretty screens and fancy buttons, is, ineffect, an invisible navigation space. True, you can always see thespecific page you are on, but you cannot see anything of the vast spacebetween pages. Once users reach our applications, we must take care toreduce navigation to a minimum and make that navigation that is leftclear and natural. Present the illusion that users are always in thesame place, with the work brought to them. This not only eliminates theneed for maps and other navigational aids, it offers users a greatersense of mastery and autonomy. As with the inherentstatelessness of the web (see Track State, above), our job is not toaccept blindly what the architects have given us, but to add the layersof capability and protection that users want and need. That the web’snavigation is inherently invisible is a challenge, not an inevitability.
				Have a comment about this article? Send a message to Tog.

Posted in Uncategorized

Item

Categories

Topics

Categories

Some Ads

Emerson Quote

There is a time in every man’s education when he arrives at the conviction that envy is ignorance; that imitation is suicide; that he must take himself for better, for worse, as his portion; that though the wide universe is full of good, no kernel of nourishing corn can come to him but through his toil bestowed on that plot of ground which is given to him to till.

About

My Business

Clients

Recent Comments

mcfrazer.com is proudly powered by WordPress and developed by Frazer Web Solutions.