An inter­face is a bound­ary. It’s all the points of con­tact, phys­i­cal and cog­ni­tive, be­tween two sep­a­rate sys­tems. While some people take a nar­row view and see inter­face de­sign as con­cerned only with “look and feel,” we use an ex­pan­sive def­i­ni­tion—an inter­face is the user’s en­tire in­ter­ac­tion with any de­signed ex­pe­ri­ence.

In­clud­ed in our def­i­ni­tion of inter­face de­sign is “Con­cep­tual De­sign” which shapes what a product does, and “In­ter­ac­tion De­sign” which de­ter­mines how a product be­haves, often by ex­am­in­ing what users want to do with it. Both Con­cep­tual De­sign and In­ter­ac­tion De­sign are more fully dis­cussed on this web­site’s De­sign Process page.

The hard work in de­vel­op­ing an inter­face lies in un­der­stand­ing the cog­ni­tive needs of an au­di­ence and then meet­ing those needs, while shap­ing and ful­fill­ing au­di­ence ex­pec­ta­tions.

An inter­face should be both sim­ple and clear. The hard work in de­vel­op­ing an inter­face lies in un­der­stand­ing the cog­ni­tive needs of an au­di­ence and then meet­ing those needs, while shap­ing and ful­fill­ing au­di­ence ex­pec­ta­tions.

Soft­ware in­cludes web­pages. People use soft­ware to achieve a goal. The inter­face can ei­ther help or get in the way. De­sign­ers who con­sid­er user goals pro­duce far more ef­fec­tive inter­faces than those who base their de­signs on aes­thet­ics alone.

Inter­face de­sign is much more than a sub­set of the graph­ic arts.

The dif­fer­ence be­tween an inter­face that helps or hin­ders a user is rarely the dif­fer­ence be­tween pretty but­tons and ugly ones. While there’s an aes­thet­ic com­po­nent to a well-de­signed inter­face, inter­face de­sign is much more than a sub­set of the graph­ic arts.

To help us understand and improve inter­face design, we’ve developed our own model: the “Inter­face 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 com­puter, they are trying to solve problems. The problems can be viewed broadly (i.e. writ­ing a letter) or more narrowly (i.e. chang­ing the mar­gin). The Problem-Solving model is appropriate even when the goal is enter­tain­ment or infor­ma­tion gath­er­ing or shop­ping. When play­ing a game, the goal of the user might be to just have fun or re­lax, but the tasks in­volved can be thought of as problems re­quir­ing solu­tions. The problem-solving model focuses on the people who in­tend to use the inter­face—the end users—and it is par­tic­u­larly con­du­cive to help­ing de­sign­ers pro­duce a more sat­is­fy­ing, user-friendly inter­face.

The Problem-Solving model re­quires a keen un­der­stand­ing of how people re­ally set about to solve problems on a com­puter. But in­stead of flail­ing in the dark, the problem-solving model al­lows inter­face de­sign­ers to direct their at­ten­tion to the is­sues most rel­e­vant to users. Inter­face de­sign­ers can use their knowl­edge of cog­ni­tive science, psy­chol­ogy, learn­ing ac­qui­si­tion, and hu­man per­cep­tion to try to sup­port users as those users solve problems in a com­puter-based en­vi­ron­ment.

When people sit down in front of a com­puter, they are con­fronted with a large num­ber of problem-solving sit­u­a­tions: “Which ap­pli­ca­tion will do what I want? How do I launch it? Where is my file?” To un­der­stand how people solve com­puter-related problems, we need to un­der­stand the fac­tors that in­flu­ence problem-solving gen­er­ally. These fac­tors in­clude do­main knowl­edge, the de­vel­op­ment and ap­pli­ca­tion of problem-solving strat­e­gies, the cir­cum­stances un­der which the problem is tackled, and an in­di­vid­ual’s per­cep­tions.

The most im­por­tant thing to con­sid­er when de­sign­ing a piece of com­puter soft­ware or a web­site is the in­tend­ed au­di­ence of the product. Who is go­ing to use this pro­ject? Why are they us­ing it? How are they go­ing to use it? Where are they go­ing to use it? What do they want to do with it? The an­swers to these ques­tions al­ways di­rectly im­pact the design.

Over the years, we have given a great deal of thought to these ques­tions and have made some ob­ser­va­tions and crafted some guide­lines that keep us on track while de­vel­op­ing new pro­jects. A few of these are of­fered below.

Who is go­ing to use this product?

We are all dif­fer­ent. We come from dif­fer­ent back­grounds, dif­fer­ent cul­tures. We like and dis­like dif­fer­ent things. But we also have much in com­mon. In par­tic­u­lar, people tend to de­vel­op cog­ni­tive and emo­tion­al skills on a sim­i­lar time­table. Most of us can read by the age of eight, for ex­am­ple. We also tend to con­gre­gate in groups of spe­cial in­ter­ests—some of us are gar­den­ers and some are into an­tiques. A good de­sign takes into ac­count the dif­fer­ences as well as the com­mon in­ter­ests of the par­tic­u­lar group of people who will be us­ing the product. The more we un­der­stand the de­sires, ex­pec­ta­tions, and lim­i­ta­tions of our users, the bet­ter we can serve them. De­vel­op­ing real­is­tic user per­sonas can help a de­sign­er focus on the at­trib­utes of a real per­son rather than an ab­strac­tion.

For a child, the learn­ing curve should be as shal­low as pos­si­ble. A child should al­ways be able to do some­thing sat­is­fy­ing with a soft­ware product right away. The inter­face of an ap­pli­ca­tion geared to chil­dren should be based on their early ex­pe­ri­ences and use as many sup­port struc­tures as are nec­es­sary to help them suc­ceed. A child should never be made to feel stu­pid or in­ca­pa­ble by a pro­gram­mer’s poor error han­dling tech­nique. State­ments like: “You have com­mit­ted a fa­tal error” are ab­so­lute­ly un­ac­cept­a­ble. (Ac­tu­al­ly, we’d vote to com­plete­ly abol­ish that par­tic­u­lar error mes­sage, ex­cept per­haps if you’re de­sign­ing com­put­er­ized med­i­cal equip­ment for sur­geons.) And while sta­bil­i­ty is de­sir­a­ble in all soft­ware, a spe­cial ef­fort should be made to en­sure that ap­pli­ca­tions de­signed for chil­dren don’t crash. Over and over again, we see pro­grams for kids that freeze while a child is try­ing to save their work.

Sen­iors rep­re­sent a large group of In­ter­net users. This pop­u­la­tion has its own par­tic­u­lar chal­lenges and ex­pec­ta­tions re­gard­ing com­put­er use. Phys­i­cal prob­lems like poor eye­sight and mo­bil­i­ty dif­fi­cul­ties, and cog­ni­tive prob­lems such as short-term mem­o­ry loss, have to be con­sid­ered in the de­sign of web­sites geared to this pop­u­la­tion. A web­site for this au­di­ence should an­tic­i­pate when its users may ex­pe­ri­ence anx­i­ety, fear, or frus­tra­tion, and then de­sign around these is­sues.

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. Perhaps the features should get out of the way when the executive is drafting the letter, but 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 de­sign­ers have not prop­er­ly an­tic­i­pat­ed the ac­tu­al de­sires of the people who use it. The web is filled with ex­am­ples of this type of poor fore­sight. Some­times it amazes to see how lit­tle thought is given to why the ac­tu­al vis­i­tors to a site might go there. How many cor­po­rate web­sites have you seen which hap­pi­ly dis­play pho­to­graphs of a com­pany’s of­fice ex­te­ri­or but fail to pro­vide a cus­tomer ser­vice num­ber or an email ad­dress? How about the web­site for an in­ter­na­tion­al man­u­fac­tur­ing com­pany which pro­vides mis­sion state­ments for each of their di­vi­sions, but fails to have down­load­able man­u­als for the prod­ucts they sell? How about the uni­ver­si­ty web­site that de­tails their or­gan­i­za­tion­al struc­ture, but fails to pro­vide a nav­i­ga­ble cam­pus map?

Mar­ket­ing cam­paigns on tele­vi­sion and print are fre­quent­ly not in­te­grat­ed with that com­pany’s web cam­paign. Over a decade ago, for ex­am­ple, BeBe, a com­pany which man­u­fac­tured wom­en’s jeans, spent hun­dreds of thou­sands of dol­lars cov­er­ing walls, bill­boards, and bus­es with ads for their new line—each ad had the web­site ad­dress writ­ten in bold let­ters. But on the web­site, they didn’t fea­ture the par­tic­u­lar style of jeans they had been ad­ver­tis­ing, nor did they pro­vide any in­for­ma­tion about where the jeans could be pur­chased lo­cal­ly, nor was there any way to even buy the new line of prod­ucts through their web­site. They cre­at­ed the site think­ing of it as a cor­po­rate bro­chure, but people went there hop­ing to get in­for­ma­tion about the prod­uct and to make a pur­chase. A cus­tomer re­spond­ing to their ad would fail to ac­com­plish their main goal and leave the site un­hap­py. This is not an e-commerce suc­cess sto­ry.

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, students often work on projects in groups. Learning on a computer as part of a group is different than doing so 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 into participants and encouraging them to use their particular expertise to be empowered in a special niche within the group.

Users get an emotional impression of their interaction with a website. 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 impact of your website? Is your user happy? Do people leave your site frustrated or satisfied? Is your home page overwhelming, confusing, or intimidating?

Emotion is a strong memory trigger—emotionally charged memories are easier to retrieve from long-term memory. So what are the principles of emotionally savvy web design?

• Frustration on the web builds negative perceptions. If anything goes wrong, even with the user’s own connection, the website is often blamed. Site designers can’t prevent some of this, but designers can try to reduce frustration where possible: performant pages that load quickly, links that work, good security practices, good information design practices, no memory leaks, no glitchy tech, no unexpected misdirection, forms that don’t clear unexpectedly, and tasks that can continue even if the user goes offline.

• Users are suspicious when asked for personal information. They scrutinize each request to evaluate if the site really needs the information and speculate on 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. Avoid overreaching when asking users’ for information, even at the risk of disappointing your marketing department. Only request that which is absolutely necessary to fulfill the users’ own goals on the site.

• Have you ever written an email and had it completely ignored? How did that make you feel? If your customer service department doesn’t answer your visitors’ email inquiries, your users will feel that way about you.

• Be polite. There was an interesting experiment where two groups of beta testers were asked to evaluate a program. In one version, the dialog boxes and error messages were particularly polite—with “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.

• You need to know your audience and set the tone of the site accordingly. It’s important to talk to users in a non condescending manner that uses language within their level of expertise. If the product is designed for a professional audience of physicians, don’t talk to them as if they are children. If the product is designed for patients, don’t talk to them as if they are physicians.

An emotionally savvy product may:

• have an interface that helps users overcome their frustrations and fears

• have an interface that sets the right mood

• have an interface that changes indifferent or casual interest into directed motivation

• uses humor to reduce an impression of condescension

• promote a feeling of personal choice while still guiding users towards action items

• create emotional “ah ha” moments to make users’ experiences more memorable

An airline tried to save money by reducing how often they washed their planes. Customers reacted negatively. Dirty planes were equated with poor maintenance. Customers couldn’t see the airline’s maintenance but they could see the dirt. Similarly, a website is a strong public reflection of the company. Users translate a negative experience on the site into a negative view of the company generally. What users take away from a troubled site may not be rational, fair, or true, but they’ll act upon that perception nonetheless.

We’ve come up with two underlying website properties which affect how users feel in relation to websites. The first is a website’s “transparency” and the second is its “thickness.” These properties can be adjusted to affect the users’ perception of their relationship to the site.

Transparency and opacity form two poles of one continuum. If a website is transparent, the user feels known. If a website is opaque, by contrast, the user feels anonymous. Transparency might be desirable in a community site while a pornographic site might prefer opacity. Most sites are somewhere in between. Amazon, for example, retains information about its users and tries to entice them with other products that have some relationship to previously browsed items. If Amazon is too transparent, users might avoid purchasing a steamy potboiler because it doesn’t match the image they wish to project. In an episode of The King of Queens, Spencer believes that his TiVo thinks he’s gay based upon its program recommendations. By recording macho programs he has no intention of watching, he hopes to impress TiVo with his masculinity.

Thickness and thinness, similarly define opposite poles of a spectrum. If a site is thin, users feel that humans from the company are accessible to them. If a site is thick, users feel far removed from any humans on the other side of the screen. Good customer service strives to feel thin, to give customers a sense that real people are readily available. While surfing a website with a thin interface, users don’t feel as if barriers have been erected to keep them at a distance. By contrast, many large corporate sites feel thick to outside visitors. Corporate officers often mask their contact information to keep users at arms length. Thick interfaces often feel more formal than thin ones.

Transparency and thickness are two qualities that affect the “emotional intelligence” of a site. We’ve found them to be useful concepts in our own work. We consider them carefully during the design and testing phases of site construction.

The most important steps to raise your site’s emotional intelligence is figuring out who’s the site’s audience, what is it they want, and how you can provide it.

The emotional intelligence of a website gets easily overlooked in a board meeting, but it doesn’t get overlooked by the site’s users. The most important steps to raise your site’s emotional intelligence is figuring out who’s the site’s audience, what is it they want, and how you can provide it.

Human task performance can degrade under adverse environmental and psychological conditions. Cognitive traits — working memory, long term memory retrieval, attentional controls, and perceptual capabilities — are situationally dependent. For example, anxiety impairs performance. Anxiety can be caused by time pressure, competition, inexperience, attaching significance to the outcome, external annoyances (e.g. flashing lights) and so on.

Working memory is limited. During a task, it needs to accommodate data, procedural information, goals, and planning. A user’s emotional state limits it further. Under stress, an individual’s performance slips as their cognitive space is overwhelmed by emotion. Too much information also overloads the users capacity to process and hold that information in working memory. If the task is unclear, users might founder, using working memory for off-task processing.

Some people find it easier to concentrate at home, while others prefer the hum of a workspace. But if a user is constantly interrupted, attentional capacity is compromised. Time pressure robs some users of their ability to concentrate on a task, while others find it motivating. Competitive environments where users need to constantly monitor not only their own progress but also that of others can drain the cognitive resources of some users while spurring others to new heights of concentration. Interaction and interface designs can help solve some of the problems which arise from environmental conditions. 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.

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.

Usefulness

Learnability

Satisfaction

Clearly, there‘s plenty of overlap between these categories. Data to assess usability is often gathered by guiding users through usability scripts, but other techniques such as eye tracking can be used to evaluate the visibility of certain design elements. One doesn’t need to wait for a finished project to do testing; it’s often done with screen or even paper mockups.

There are limits on what you can expect from a focus group. They are useful to identify major flaws in a product, but less useful at suggesting a fix for identified issues. A focus group can’t redesign a product. 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 shouldn‘t 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?

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.

Our book, “Interfaces.com: Cognitive Tools for Product Designers”, 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 explain what makes an individual good at something, or 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

  • meta knowledge

• Perception

  • perceptual style

  • perceptual processing

• Personality

  • anxious

  • collaborative

  • competitive

  • computer affinity

  • expressive vs. reserved

  • observant vs. introspective

  • schedulers vs. probers

• Memory

  • short-term memory

  • working memory

  • 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 product is to be used.

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 processing large amounts of information at one time. Dividing the information into smaller encapsulated chunks makes the material accessible to those users without hurting its value for others.

The Cognitive Wheel represents our synthesis of the literature in educational research and personality assessment with an eye towards its use in solving product design problems. 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 specific conditions. Once the strengths and limitations of users with this set of cognitive traits are understood, a design can be fashioned to support them during their interaction with the product. 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.