Interface Design Philosophy
Our book on this Subject
“Interfaces.com: Cognitive Tools for Product Designers” examines interface design in much greater detail.
Our blog on this Subject
As computers proliferate, it’s becoming increasingly important to design simple and clear interfaces for software and websites. Users of computer software products are far different now than they were in the early eighties. Then, programmers assumed that users would train to become experts in order to use a particular piece of software. Most computer users only needed a handful of computer software products to perform their work, so they were able to invest the time necessary to master the operation of each. Programmers could also assume that the users of their products shared certain cognitive abilities generally shared by people in an office workplace.
There is no such thing as an average computer user anymore.
Now, all those assumptions have been shot to hell. Users range in age from 1 to 100 and their abilities are all over the place. There is no such thing as an average computer user anymore. Users are exposed to hundreds of software products and, while surfing the Web daily, they often come across dozens of different interfaces in a single session.
“Ease of Use” has to be more than just a sales point—it must become a primary consideration of anyone designing a software product.
In this environment, “Ease of Use” has to be more than just a sales point—it must become a primary consideration of anyone designing a software product. With the exception of highly specialized products, if a product isn’t easy to use, it will fail: most computer users won’t invest the time necessary to master its function—they’ll just move on. There are plenty of other sites or products vying for their attention.
An interface is much more than a set of buttons. Navigation, while important, is just a small part of interface design. The interface is always a major part of a user’s experience with a website or a piece of software—in some tool applications, it is the user’s only experience with the product.
A software product can be thought of as the combination of an engine, with its assortment of algorithms; the underlying content; and an interface. Traditionally, the producer was concerned primarily with the content, and the programmer was concerned primarily with the engine. The interface was often an afterthought.
For tool applications—word processors, spreadsheets, image manipulation applications and the like—the content is what the user creates herself. For those products, the user’s only experience with the product is through its interface. The engine is in the background—and appropriately so. For products with content, such as destination websites, the interface provides a major part of the experience that a user will have with those products.
Interface design is much more than a subset of the graphic arts.
A person uses a piece of software to achieve a goal. The interface can either help or it can set up obstacles. The product is easier to use when its interface is designed to meet the needs of its intended audience. Designers who consider those needs produce far more effective interfaces than those who base their designs on aesthetics alone. The difference between an interface that helps or hinders a user is rarely the difference between pretty buttons and ugly ones. While there’s an aesthetic component to a well designed interface, interface design is much more than a subset of the graphic arts.
What is an Interface?
An interface is a boundary. It’s all the points of contact, physical and cognitive, between two separate systems. While some people take a narrow view and see interface design as concerned only with “look and feel,” we use an expansive definition—an interface is the user’s entire interaction with any designed experience. Included in our definition of interface design is “Conceptual Design” which shapes what a product does, and “Interaction Design” which determines how a product behaves (often by examining what users will want to do with it.) Both Conceptual Design and Interaction Design are discussed more fully in our Design Process page.
The hard work in developing an interface lies in understanding the cognitive needs of an audience and then meeting those needs, while shaping and fulfilling audience expectations.
An interface should be both simple and clear. The hard work in developing an interface lies in understanding the cognitive needs of an audience and then meeting those needs, while shaping and fulfilling audience expectations.
Knowing the Intended Audience
To help us understand and improve interface design, we have developed our own model we call the “Interface as a Problem Solving Medium.” This model focuses on the end user. It assumes that when people sit down to do a task on a computer, they are trying to solve problems. The problems can be viewed broadly (i.e. trying to write a letter) or more narrowly (i.e. trying to change the margin). This model is appropriate even when the task is an entertainment (as in game software); it’s just the nature of the problems that have changed. The problem-solving model focuses on the people who intend to use the interface—the end users—and we feel it is particularly conducive to helping designers produce a more satisfying, user-friendly interface.
This model requires a keen understanding of how people really set about to solve problems on a computer. But instead of flailing in the dark, the problem-solving model allows interface designers to direct their attention to the issues most relevant to users. Interface designers can use their knowledge of cognitive science, psychology, learning acquisition, and human perception to try to support users as those users solve problems in a computer-based environment.
We see a computer application as a medium in which people solve problems. When computer users sit down in front of a computer, they are confronted with a large number of problem solving situations: “Which application will do what I want? How do I launch it? Where is my file?” To understand how people solve computer-related problems, we need to understand the factors that influence problem solving generally. These factors include domain knowledge, the development and application of problem solving strategies, the circumstances under which the problem is tackled, and an individual’s perceptions.
The most important thing to consider when designing a piece of computer software or a website is the intended audience of the product. Who is going to use this project? Why are they using it? How are they going to use it? Where are they going to use it? What do they want to do with it? The answers to these questions always directly impact the design.
Over the years, we have given a great deal of thought to these questions and have made some observations and crafted some guidelines that keep us on track while developing new projects. A few of these are offered below.
Who is going to use this product?
We are all different. We come from different backgrounds, different cultures. We like and dislike different things. But we also have much in common. In particular, people tend to develop cognitive and emotional skills on a similar timetable. Most of us can read by the age of eight, for example. We also tend to congregate in groups of special interests—some of us are gardeners and some are into antiques. A good design takes into account the differences as well as the common interests of the particular group of people who will be using the product. The more we understand the desires, expectations, and limitations of our users, the better we can serve them.
For a child, the learning curve should be as shallow as possible. A kid should always be able to do something satisfying with a software product right away. The interface of an application geared to children should be based on their early experiences and use as many support structures as are necessary to help them succeed. A child should never be made to feel stupid or incapable by a programmer’s poor error handling technique. Statements like: “You have committed a fatal error” are absolutely unacceptable. (Actually, that particular error message should be completely abolished, except perhaps if you’re designing computerized medical equipment for emergency room surgeons.) And while stability should be a goal of all software, a special effort should be made to ensure that children’s applications don’t crash. And yet, over and over again, we see programs for kids that freeze while a child is trying to save their work.
Seniors are becoming a large section of Internet users. This population has its own particular problems and expectations regarding computer use. Physical problems like poor eyesight and mobility difficulties have to be considered in the design of websites geared specifically to this population. A website for this audience should anticipate when its users may experience anxiety, fear, or frustration, and then design around these issues.
Why are they using this product?
Take a word processing application as an example. An executive may want to be able to use the software with little or no training. She may want to use the application as a typewriter with a backspace key. Her secretary may need to use the application for more demanding tasks—creating columns, doing a mass mailing, creating style sheets. It is important that the word processing application open like an onion to permit these different types of users to access these features painlessly. The features should get out of the way when the executive is drafting the letter, but they should be accessible when the secretary needs to lay it out on the page.
The purpose of a product—whether it’s to be used for learning, as an entertainment, or as a tool—dictates the function of the interface.
How is this product used?
Most often a product fails because the designers have not properly anticipated the actual desires of the people who use it. The Web is filled with examples of this type of poor foresight. It’s amazing how little thought is being given to how the actual visitors to a site might need to use the information contained within. How many corporate websites have you seen which happily display photographs of a company’s office exterior but fail to give important information such as a customer service number or email address? We’ve seen corporate websites for larger companies which go into great detail about their organizational structure and the mission statements for each of their divisions, but fail to have electronic versions of manuals for the products they sell.
Marketing campaigns on television and print are frequently not integrated with that company’s Web campaign. In 1999, for example, BeBe, a company which manufactured women’s jeans, spent hundreds of thousands of dollars covering walls, billboards, and buses with ads for their new line—each ad had the website address written in big bold letters. But on their website, they failed to provide any information about where the jeans could be purchased locally, nor did they feature the particular style of jeans they had been advertising, nor was there any way to even buy the products through their website. They created the site thinking of it as a corporate brochure, but people went there hoping to get information about the product and to make a purchase. A customer responding to their ad would fail to accomplish their main goal and would leave the site feeling unhappy. This is not an e-commerce success story.
Where is this product used?
The actual location and circumstances of use must be carefully considered in product design, and accommodations must accordingly be made in interface and content design.
People approach computer tasks differently depending on their physical location. There is a difference between using computers at home, at work, at school, and at places like a museum or a shopping mall. Human perception changes from circumstance to circumstance, as do the limits of working memory allocated to a task. So, for example, a navigational system that might be obvious to a user sitting quietly at home in front of a computer may confound that same person looking for a gate assignment at an airport kiosk. An extreme example is looking at an informational kiosk in a museum to find a bathroom while your kid hops up and down shouting, “I have to pee!”
In a classroom setting, students are often asked to work on projects in groups. Learning a computer as part of a group is substantially different than doing it alone. A teacher needs to pay attention to the distribution of expertise within a group, to the effect that a student’s social status has on his or her ability to function in that group, to the way information is propagated throughout the group, and to the development and spread of computer-related mythology within the group. By recognizing the existence of these factors, teachers and software developers can design activities that compensate for them, making all students participants and encouraging each to use their expertise to be empowered in a special niche within the group.
The Emotional Feel of a Website
We’ve all met people who are trying to be nice, but aren’t. Something about them comes off as unpleasant—and it has nothing to do with the content of their conversation or the way they look or dress. Psychologists sometimes refer to such people as socially challenged, or lacking emotional intelligence, or emotional quotient (“EQ”).
Just like content, an interface has an emotional intelligence. A website has an emotional impact on its audience. When they leave, most people’s primary impression won’t be a memory of the informational content. Rather, they’ll retain a vague feeling of ‘good’ or ‘bad’ evoked by their experience.
So what is the emotional intelligence of your website? Is your user a happy user? Do people leave your site frustrated or satisfied? Is your home page overwhelming, confusing, or even worse, is it scary? Do you intimidate your users?
Emotion is a strong memory trigger—emotionally charged memories are easier to retrieve from long-term memory. So what can website designers do to make a site memorable? How can we capitalize on emotional intelligence? And what should we avoid? Some things are obvious:
- Frustration on the Web builds negative perceptions. If anything goes wrong, even with the user’s own connection, it’s often perceived as the website’s fault. There’s nothing site designers can do about some of this, but designers can work to reduce frustration where possible: efficient low bandwidth pages that load quickly, links that work, avoiding technology that delivers zing but can crash the user’s computer—these are a few basic principles of emotionally savvy Web design.
- Users are suspicious any time they are asked to give out personal information. They will scrutinize each request to evaluate if the site needs the information and to see how they can be hurt by divulging it. Any suspicion that they are being conned and the users’ trust in a site will be gone.
- Have you ever written a letter and had it completely ignored? How do you feel about a person who doesn’t answer your correspondence? Now hold onto that feeling. If you or your customer service department doesn’t answer your visitors’ e-mail inquiries, they will feel about you the same way.
- Be polite. There was an interesting experiment where two groups of beta testers were asked to evaluate a program. The program each group saw was identical except that the dialog boxes and error messages for one were particularly polite—saying “please” and “thank you.” The beta testers of the polite program not only liked it more but also reported it as both more functional and stable than the other version. So be polite. A page on the Web is seen as more personal than a printed page of a brochure.
- And finally, you need to know your audience—if the product is designed for a professional audience of physicians, don’t talk to them as if they are children. Similarly, it’s important to talk to patients in a non condescending manner that uses language within their level of expertise. Finding the right tone is one of the important jobs of both writers and designers of websites.
An emotionally intelligent product may:
- have an interface that is well equipped to deal with its audiences’ frustrations and fears
- have an interface that can set the right mood
- have an interface that can change indifference or casual interest in a product into directed motivation
- have a manual or online help that uses humor, and keeps the audience on the same social level as the product’s producers, reducing the feeling of condescension
- keep control over its users but create a feeling of personal choice
- create an emotional high and “ah ha” moments to make its users’ experiences more memorable
A Web page is viewed as a strong reflection of the company it represents. Customers don’t view a poorly designed or nonfunctional page simply as evidence that the company doesn’t know how to create a website. Rather, they directly translate their negative experience with a website into a negative view of how the company conducts business generally. What a customer takes away from a technologically troubled site may not be rational, fair, or true, but it’s a perception they’ll act upon nonetheless.
In thinking about how websites are perceived by their users, we came up with two underlying properties which, once understood, can be adjusted to strongly affect the way a site feels to its users. The first of these properties we’ve labelled as a website’s “transparency” and the second we’ve labelled as its “thickness.” Both refer to the users’ perception of their own relation to the site.
Transparency, and its antonym opacity, form two poles of one continuum. If a website is opaque, then the user feels that her identity is shielded from both the site’s creators and other users. She is anonymous. If a website is transparent, by contrast, the user feels known to both the site’s creators and the other users. A feeling of transparency can be desirable in a community site, for example, while a pornographic site is usually better served by wrapping the user in a feeling of opacity. Most sites are somewhere in between. Amazon.com, for example, stores information about its users and tries to entice them with other books selected because they have some relationship to the ones previously purchased. Although a user is tracked through the books that she browses, the tracking is done in the background and the surfer is unaware of it. If Amazon is too transparent, users may avoid purchasing or browsing certain books due to embarrassment. Obviously this is true with racy books, but other titles might be affected by Amazon’s choice of where to sit on the transparency/opacity continuum. For example, Amazon’s “recommend a book based on previous purchases” feature sometimes backfires. A customer might wish Amazon to see her as an intellectual, for example, and doesn’t want some steamy potboiler to be factored into those recommendations. Perhaps a gift purchased on Amazon should not impact the user’s profile.
Similarly thickness, and its antonym thinness, also define opposite poles of a spectrum. We say that a site is thin if the user feels that the creators of the site are very accessible to him. A site is thick if the user feels far removed from any humans on the other side of the modem connection. A good customer service site often strives to feel thin, to give the customer the sense that real people are readily available. While surfing a website with a thin interface, the user doesn’t feel as if barriers have been erected to keep him at a distance. By contrast, a lot of large corporate sites feel thick to outside visitors. Corporate officers often keep their email addresses secret because they don’t want to receive personal email from strangers or, perhaps, their customers. Thick interfaces often feel more formal than thin ones.
Transparency and thickness are just some of the qualities that go into defining what we call the “emotional intelligence” of a product, but we’ve found them to be useful concepts and we consider them carefully during the design and testing phases of site construction.
The most important step in raising your site’s emotional intelligence is figuring out who the site’s audience is, what they want, and how you can give it to them.
The emotional intelligence of a website gets easily overlooked in a board meeting, but it doesn’t get overlooked by the site’s audience. The most important step in raising your site’s emotional intelligence is figuring out who the site’s audience is, what they want, and how you can give it to them.
User Performance Limitations
Human performance is strongly influenced by surrounding circumstances, both environmental and psychological. Working memory, long term memory retrieval, attentional controls, and perceptual capabilities depend on the situation under which tasks are performed. High levels of anxiety limit performance. Anxiety can be caused by time pressure, competition, high personal stakes in a successful outcome, a low level of background knowledge about the subject area of the task, and external annoyances (e.g.: flashing lights).
Working memory has a very limited capacity and needs to accommodate data (both observational and from long term memory), procedural information, goals, planning, and the user’s emotional state. If there is too much stress, an individual’s performance slips—too much cognitive space is occupied by emotion. If there is too much information coming in all at once, the capacity to process and hold that information in working memory gets overloaded. If there are no clear goals, people might find themselves foundering, using working memory for extraneous processing.
Retrieval of information from long term memory is heavily dependent on external clues. The graphical user interface (“GUI”) was particularly developed to ease long term memory retrieval: instead of remembering, a user is asked to choose from a list; all action options are visible at all times; there is feedback on all user actions (clicks and changes of state); and the interaction and interface are consistent from application to application, building on skills previously learned by users.
The skill level and background knowledge of the subject matter is a critical component of user performance. A novice will not outperform an expert even under ideal environmental circumstances. And a novice is more likely to exceed his or her working memory capacity, since each task requires many more steps for a novice than an expert. Consider a cooking assignment. A chef will be satisfied with directions that specify braising as the main cooking method, while a novice cook will need explicit directions on how to braise. The more personal expertise an individual can bring to a task, the more comfortable and less anxious he or she will be, increasing the overall performance level. And finally, expertise in medicine, for example, doesn’t extend to expertise in computer use. A user can be an expert computer user and still find medical information confusing. And the reverse is true.
If a user is constantly interrupted, attentional capacity might get compromised. But while some people find it easier to concentrate at home, others are just the opposite. Time pressure in particular robs users of their ability to concentrate on task, as do competitive environments where users need to constantly monitor not only their own progress but also that of others. Thus identifying different user groups by environmental conditions under which a product is likely to be used is important.
Different user groups access websites or use products under different situations. Some conditions won’t be ideal. Bad light or excessive noise can cause perceptional errors. Interaction and interface designs can help solve some of the problems which arise from the environmental conditions of the user. For example, a website designer might create a one click system for critical functions or limit the number of hierarchical levels to help prevent navigational errors.
A Bit About Usability
There are three factors that can be measured by product usability studies: usefulness, learnability, and satisfaction. Each of these can be broken down into the conceptual design, interaction design, and interface design components. A good usability script—a set of questions that guide usability studies—would unearth problems with any of these components.
- Are the goals of the company, designers, and users aligned?
- Does the product meet the expectations of its users?
- How useful is the product for the purposes for which it was developed?
- Can the users use the product? Is it too difficult to use?
- Is the user’s performance on a task enhanced by the product? Does the product assist the user in doing something faster, better, etc.?
- Are all of the functions of the product clearly visible to the user?
- What is the minimum level of desired performance?
- How much training do the users need to achieve the minimum level of desired performance?
- Does the learnability curve match the expected usage of the product?
- How forgiving is the product to a user’s error? Are there enough “undo’s” built into the system?
- Is there built-in help?
- Has the right metaphor been adopted for the product? Do the users get it?
- Are rewards built into the product for novice users?
- Are expert users burdened by design features intended for novices?
- Is the built-in help helpful? Does it address real problems that users have?
- Do the features of the product rely on recall or recognition?
- Are there default settings (i.e. filling in the current date in a date field) built into the product?
- How closely does the adopted metaphor conform to the use of the product? Do the users understand areas where the metaphor no longer applies?
- Has the users’ expertise with similar products been used to best effect? Have industry standards been followed? Do the product’s windows and menus work like windows and menus of other products in the same field, for example?
- How sensitive is the user feedback during an error announcement? Error messages have to be useful and polite.
- How easy is it to get help? Is it contextually embedded into the product?
- How clear are the navigation items? Are the buttons labeled with users’ expertise in mind?
- How well is the adapted metaphor executed? Do the gears look like gears to the users, for example?
- Have the users’ expertise with similar products been used to best effect? Do the product’s icons and buttons look and feel like icons and buttons of other products in the same field, for example? If they vary, is there a good reason for them to stray from the norm?
- Would users invest the necessary time to learn the product?
- Do the users believe that the product has value to them?
- Does the product value to the users match its price?
- Was the right metaphor adopted? Does it have the right emotional tone?
- How do the users feel about using this product?
- Would the users recommend this product to others?
- Is the product in “good taste?” Is it culturally appropriate for its intended audience?
- How do the users feel about themselves while they use the product? Do they feel stupid for not “getting” it?
- Are the users offended by the colors or images used in the product?
- Does the look and feel alienate a potential group of users? (“Oh, this product is for boys!” “I wouldn’t use it—it’s for old people.”)
Clearly, there is a lot of crossover between these categories. Most of the data to assess usability can be gathered through usability scripts, but other techniques such as eye tracking can be used to evaluate issues such as the visibility of certain design elements. And product comparison studies can reveal issues with usefulness, learnability, and satisfaction levels of a product.
You must be clear about what you can expect from a focus group or what user testing will reveal. Focus groups are useful for identifying major flaws in the design of a product. But you can’t expect a focus group to redesign your product for you. Asking a focus group how they would fix a particular identified issue is a mistake. Allow the focus group to point out issues that are within their expertise as users and then allow designers to come up with solutions.
Notice that while you never ask users to design the product, you do want to elicit information about users’ opinions: Do they like it? Are they comfortable with it? Would they buy it?
Remember that you only get out of a focus group what you put into it—the more leading the questions you ask, the more inaccuracies you introduce into this process. And the results of a one day focus group session is not of any statistical value—the sample is too small. The next time someone boasts that four out of five users feel a certain way, ask how many users they asked—was it five?
Finally, a usability study shouldn’t be wasted on uncovering technical glitches in your product. If a beta version is being analyzed, set up a system that is known to work and is stable. After the product is adjusted to increase usability, technical glitches can be addressed by quality assurance personnel for the final release.
We just finished a book, “Interfaces.com: Cognitive Tools for Product Designers”, which details our cognitive science approach to interface design. Building on the academic literature characterizing different attributes in individuals’ personalities, perceptual preferences, cognitive abilities, and learning styles, we’ve developed a multivariate approach to understanding the cognitive differences between people—particularly the way that people perceive information and solve problems. Understanding these differences allows us to craft solutions which support a wide variety of learning styles. It also allows us to accurately predict how different interface design strategies will work for individuals with particular traits.
Human cognition is a famously complex process. It is hard to summarize or even to explain what makes an individual good at something, what makes her a good learner or a good thinker. Different scientists studying cognition have developed different taxonomies of cognition depending on their goals and the aspect of cognition that they were interested in researching. In our work, we focus on using cognitive science to engineer educational solutions and to design better human/computer interactions. Thus, we developed what we call the Cognitive Wheel as a way of trying to think about cognitive attributes in the context of product design. This taxonomy is oriented to technology problems. But it tries to incorporate as many ideas as possible from other cognition theories.
We’ve summarized research in education and cognitive science into a set of variables we find most useful to consider when creating computer-based materials. We broadly divide cognitive attributes into background knowledge (formal and informal background knowledge of a particular domain, cultural and social norms, and meta knowledge), perception (perceptual style and perceptual processing), personality (anxious, collaborative, competitive, computer affinity, expressive vs. reserved, observant vs. introspective, and schedulers vs. probers), and memory (short-term memory, working memory, and long term memory management). Most of these cognitive attributes are situationally dependent. So it’s important to consider the setting and circumstances under which the computer-based product is to be used.
The wheel represents our synthesis of the literature in educational research and personality assessment with an eye towards its use in solving product design problems. Many of the underlying classification taxonomies are discussed in the following chapters within this section together with our rationale for the manner in which they have been adapted within the Cognitive Wheel. What’s most important for a product designer is to be able to identify a particular set of cognitive traits that are relevant to an individual working with a product under a specific conditions. Once the strengths and limitations of users with this set of cognitive traits are understood, a design can be fashioned to support the them during their interaction with the product. Thus interaction design isn’t about making websites navigable. It’s about creating online experiences that are well-suited to the needs and predispositions of its audience.
Awareness of the variety of individual characteristics assists effective online design. For example, a chat room might not work well for an individual with expressive linguistic difficulties. But an opinion poll could provide an entry point to a discussion for people who would otherwise not participate at all. As another simple example, some individuals with attention control problems have difficulty with processing long pieces of information at one time. Dividing the information into smaller encapsulated chunks makes the material accessible to these users without hurting its value for others.
Case Study: Third Age
Third Age, a large community-based site targeting users over 50 years old, had an interface which had gone through extensive focus group testing and multiple revisions before we saw it. However, it was still deeply flawed. It’s an interesting example of how focus groups can be misused. Focus groups can be very effective at identifying problems, but not at solving them. The purpose of focus groups is to figure out user preferences and what doesn’t work. Designers are better at coming up with effective solutions once the problems have been identified. But the Third Age focus groups had told the interface designers to box all the content so that it would be clearly separated. And that’s just what they did, as can be seen in the “Before” side.
The Third Age site also lacked focus as a whole: what was the purpose of the site for the users? Is it a news site? CNN is better at providing news. Is it a medical site? WebMD is better at that. Is it a community site for the over 50 crowd? But how do you get people with only their age in common to talk to each other?
Our redesign made Third Age substantially more effective for its older users. The new interface design focused on creating a supportive environment that fostered interaction among the members of the Third Age community. We tightly integrated content together with the community features to spur participation in the community and to give users the ability to connect with other users using the content as a springboard. Although this screen mock-up of our design wasn’t primarily concerned with aesthetics, we think it’s more visually pleasing as well. The use of text and color was chosen to assist users with poor eyesight. The navigational system was improved to minimize confusion and reduce complexity. Advertising was more clearly separated from editorial content. The need for scrolling was minimized. And each page was carefully branded to orient users who came directly to an inside page by way of an external link. Our redesign focused both the content and the interface and made for a better experience. Better graphics wouldn’t have solved the problem.