T+T Book v2 Flipbook PDF

T+T Book v2

---

1,680 Views
460 Downloads
FLIP PDF 1.44MB

DOWNLOAD FLIP

REPORT DMCA

UI Tenets & Traps

INTRODUCTION

INTRODUCTION

TABLE OF CONTENTS

Introduction………………………..……00 Overview………………....………….……00 Understandable………………….…….00 Comfortable…………….……………….00 Responsive……………………………….00 Efficient…………………………………….00 Forgiving………………………………….00 Discreet…………………………………….00 Protective…………………………………00 Habituating………………………………00 Beautiful…………………………………...00 Bibliography……………………………..00

INTRODUCTION

INTRODUCTION What are UI Tenets & Traps?

Why make this tool?

UI Tenets & Traps are a general purpose user interface evaluation tool. It is meant to be used to improve the quality of UI design early in the product life cycle.

There is a large body of accumulated research knowledge on UI design, but it is hard to remember it all. The knowledge base is large, diverse and scattered. Even after being exposed to it for many years, it’s not simple to remember the exact bit of knowledge that is useful in the moment it’s time to apply it. UI Tenets & Traps are a tool attempting to synthesize the accumulated knowledge and put it in a form upon which practitioners can take action on.

+ TENETS describe general attributes of good interface design. - TRAPS describe common design problems that degrade this goodness. Reduce Traps and the experience improves. Tenets & Traps are designed to make you a better detector, predictor and communicator of design issues. Tenets & Traps have several strengths as a UI evaluation tool:  They are distilled from a large body of existing UI heuristic tools and research.  They clearly separate the positive attributes of UI’s from the negative attributes of UI’s.  They explain why UI problems exist rather than simply identifying problems.  They facilitate communication through common language.  They predict user performance and satisfaction. There are two parts to this tool: this book and a deck of Trap cards. The book is the “theory” behind UI Tents & Traps. The deck of cards is the workhorse, the tool that you can use daily.

4

This book is short on purpose. The deck of cards, even shorter Steven Krug noted “if it’s short it’s more likely to get used.” We agree. This book is a short synthesis of a very big topic, and hopefully easier to remember and use as a result. In making things brief we have not gone into depth on some very deep subjects. Instead, we have a bibliography categorized by Tenet. The books and research in the bibliography go into great detail on the subjects covered in this book and in far more detail than we could ever hope to. We want to be clear on this point, this tool is not a substitute for deep knowledge. This tool is, instead, a synthesis, a primer and grounding for that deeper knowledge.

INTRODUCTION

UI Tenets & Traps are about “how”, not “what” UI Tenets & Traps are not a panacea. This tool is only about half of the design equation; making a great interface once the goals, scope, and scenarios are set. It is about “how” to design a product; about “getting the design right.” Tenets & Traps are not a tool to help you determine what your product should be focused on; they are not a tool to help determine your vision, goals or features Hitting upon the right vision, goals and features for a product is critical. The product will fail without nailing these critical aspect of product design. There are other great resources for how to go about doing this important aspect of design; they are not part of this book.

UI Tenets & Traps won’t design a UI for you We have attempted to consolidate thinking on how to detect good UI design. But this will not design a UI for you. Hardly. There are plenty of things we don’t know the answer to, and the context that things occur in is of paramount consideration. This tool can’t make decisions for you or lay out a visual design. It can, instead, make you a better predictor, detector and communicator of potential design issues.

“We must adopt an approach that inherently aspires to get the right design as well as get the design right.” -Bill Buxton

WHAT Useful, Interesting “the right design”

HOW Easy, Fast, Beautiful “designed right”

Emphasis of Tenets & Traps

5

Where do Tenets & Traps come from? We’ve borrowed heavily from existing taxonomies, heuristics and research used for checking or improving design. This visualization is of the overlap of our Tenets to some conceived by other noted authors. The color indicates overlap of our concepts with theirs, and the length of the bar indicates the depth to which this author has explored and defined the concepts behind the Tenet in their own published work.

The list of authors on this page is not exhaustive. There is much more research than these authors have done or has been consolidated. This visualization seeks to quickly paint a picture for readers familiar with the work of the authors listed in relation to the work in this book. There is a more extensive bibliography in the back

Pictures here

6

Pictures here

7

INTRODUCTION

Are the Traps always problematic? Do the Tenets always apply?

+

+

Not, it depends on the context.

Does the user have a specific goal?

Does the user want the goal to be challenging to achieve?

SPECIFIC GOAL, NO CHALLENGE

8

Pictures here

All UI Tenets & Traps apply to UIs that operate in these contexts. For example, operating system UIs. When using operating system UIs most users know exactly what they want to do, and do not expect any challenge in doing what they wish to do. UI Tenets & Traps are particularly good at finding issues when users have these specific goals. However, applications that run on operating systems often have different sorts of goals.

Pictures here

UNCLEAR GOAL, NO CHALLENGE Every Traps applies to UI’s in this context — except one, the Gratuitous Redundancy Trap. For example, shopping UI’s like Amazon. Users visiting shopping UIs are just as likely to know exactly what they want as they are to be open to suggestions. As a result, it is common to promote content in a redundant fashion in shopping UIs. This practice can enhance rather than detract from the experience. Providing multiple means to navigate to the same destination is not advisable when the users know exactly what they wish to do. But it may not be as problematic in contexts with unclear goals.

INTRODUCTION

CHALLENGE IS EXPECTED This is where things get very context dependent. The best example of this is games.

Pictures here

Games have game setup screens where the player might choose their game difficulty, or turn off the in-game music, or choose what kind of character or vehicle they might use. All UI Tenets & Traps apply to these game setup screens because the goals are specific and no challenge is expected. Some games have shopping and customization UI’s where redundant navigation is less problematic. For example, in role playing games the player can often visit a “store” to purchase the next greatest weapon, piece of armor or spell. Just like other shopping UIs it is OK to redundantly promote items for purchase in this context. Finally there is the game play itself. Games are challenging. Without challenge most games wouldn’t be fun. But the challenge in each game is different, so games have different Traps that will or will not apply. For example, soccer is a game that imposes a Physical Impediment Trap on a player on purpose: players can’t use their hands. The game wouldn’t be fun if players could use their hands. Conversely, imposing a Physical Impediment Trap in a game like chess could destroy the game play.

9

INTRODUCTION

How and When to Use Tenets & Traps Tenets & Traps are meant to be used after the vision has been set, the users identified, the major themes created, the scenarios developed, the success criteria for the UI clear and the designs for the features themselves have started to be created. The goal is to use the tool as early as is reasonable, and then to use it throughout the rest of the design life cycle to check the design as well as the veracity of the predictions made by the Tenets & Traps analysis. Some of the most likely usage of Tenets & Traps are :

HOW

Heuristic Evaluation Scorecarding/Benchmarking Competitor Analysis

WHEN

Pre coding Post coding Anytime

Pictures here

10

INTRODUCTION

1. Identify the tasks that are most important to your target user. Example: Take a picture quickly.

Pictures here

2. Walk through ALL the ways the user could complete each task. (example below). 3. Identify and log any Traps you observe using the definitions provided in this book. a. Many issue have more than one Trap, log all you see b. Having trouble with “which Trap”? Start by asking yourself which Tenet is being violated. 4. For issues with multiple Traps, ask yourself whether one Trap may be the root cause of the others. Understanding the root of an issue is often critical to finding the best solution. 5. If you have time, cross-validate by having another person run through the tasks. Compare your results and have a good discussion. 6. Report your results. Use the Tenets & Traps framework to facilitate a good discussion on improving the interface. 11

Missing

INTRODUCTION

TENETS

SUB TENETS

TRAPS

Perceptible Invisible Element Noticeable Effectively Invisible Element Distraction UNDERSTANDABLE

Comprehensible

“I know what I can do”

Uncomprehend Element Inviting Dead End Memory Challenge Poor Grouping Confirmatory Feedback Failure

Physical Challenge Accidental Activation

COMBFORTABLE “I can do things quickly and comfortably”

Slow or Non-Response

RESPONSIVE “I don’t wait“

Step Reduced Unnecessary Step Information Reduced EFFICIENT “I take fewer steps and process less information”

Information Overload

Retentive System Amnesia Predictive Bad Prediction

12

-

Force

-

Capti

-

Wan

g:

INTRODUCTION

ed Syntax TENETS

tive Wait

SUB TENETS

TRAPS

ndering Element FORGIVING

Irreversible Action

“I can undo my actions“

DISCRETE

Unwanted Disclosure

“I don’t overshare“

PROTECTIVE

Data Loss

“I don’t lose my data“

Non Redundant Gratuitous Redundancy

HABITUATING

Consistent with Expectations Inconsistent Element Variable Outcome

“I quickly achieve mastery”

Sense of Home Ambiguous Home

BEAUTIFUL

Unattractive Appearance

“I find it attractive“

13

INTRODUCTION

Picture here

14

UNDERSTANDABLE “I KNOW WHAT I CAN DO”

SUB TENETS

TRAPS

Perceptible

Invisible Element

Noticeable

Effectively Invisible Element Distraction

Comprehensible

Uncomprehend Element Inviting Dead End Memory Challenge Poor Grouping

Confirmatory

Feedback Failure

Every UI has either been previously learned or must be learned. It is an either/or situation. Users have to learn to use systems; the goal is that this happens quickly. When a UI has already been learned it is already understood. The user is aware of the actions they can take because they have already been exposed to the concepts. When a UI is understandable, the user is aware of the actions they can take because the UI contains concepts that are learned quickly. While the human capacity to learn is amazing—and seemingly unlimited—the rate of learning is crucial to good UI design. What follows are hallmarks of UIs that are quickly learned.

15

UNDERSTANDABLE

TENET

Perceptible A UI element is perceptible when a user can perceive it with one of their senses. There are limits to human senses and in order for a UI to be perceptible, it must exceed these thresholds. Not being perceptible does not mean a UI cannot be learned, but it does mean that the UI will either take a long time to learn or will need to be explicitly taught. Invisible elements are not always bad. Some of the most successful UIs in the world have elements that are completely invisible to the senses. But, it is equally true that some of the worst UIs ever built are utter failures due to invisibility. The side bar on the right details some attributes of successful versus unsuccessful invisible UI elements.

Invisible can be good when... + +

+ + + + +

Invisible is bad when... -

-

16

Knowledge or discovery is guaranteed. There is no penalty for lack of discovery. There are no physical constraints to using the invisible element. The UI element is learnable in a single trial. There is a clear feedback system with excellent responsiveness. The rules about the use of an invisible element are consistent. There are few invisible elements critical to the operation of the UI.

There are too many unfamiliar invisible elements for the user to learn that are critical to the operation of the UI. There is an ambiguous feedback system or one with poor responsiveness. The invisible UI element is not learnable in a single trial. The invisible UI element presents a physical impediment. The invisible element is measurably worse than a visible alternative.

TRAP

Invisible Element No cue (label, icon, affordance, prompt) is provided to indicate how to achieve a given goal, and the user has insufficient prior learning to overcome its absence.

Example 1 Windows 8 decided to do away with the visible affordance for the start button. This proved to be an ill fated move. The best selling applications for Windows 8 ended up being visible start buttons. Within a year Microsoft had brought back the visible start button in Windows 8.1

Example 2 The Palm Pre has a gesture area for its “back” command which is unlabeled. Novices find it difficult to discover this invisible control. Moreover, the gesture is hard to execute correctly even once learned (a Physical Impediment, another Trap). This invisible element is measurably worse than its competitors visible alternatives.

17

UNDERSTANDABLE

TENET

Noticeable A UI is noticeable when the stimulus is visible and rendered in such a way that the user attends to it. A UI element must be visible in order to be noticeable, but this does not guarantee it will be attended to. Human attention and its limitations are at the heart of understanding if something is noticeable. Our capacity for attention is limited; we can only consciously attend to one thing at a time. And while we can move our attention very quickly, our attention cannot be split. There are at least two factors that affect attention: The user’s goals and expectations + The visual display of information and choices +

pay attention to how many times a ball was passed between several people. Suddenly, in the middle of the people passing the ball, a person walked through the scene in a gorilla suit. Forty-six percent of the participants never saw the “gorilla” because their attention was so closely devoted to counting the passes of the ball. Our attention is drawn more towards some visual cues and less to others. Typically, we take note of differences very quickly. Psychophysicists have identified a limited set of things that can be detected very quickly by the human visual system without the need for search. However, when there is overlap among features of visual elements, observers have difficulty searching the scene.

While we do not have much control over the user’s goals and expectations it is still useful to understand how powerfully they can affect user attention. An example comes from a psychological study that asked participants to

A

B

C

Example In A, a dark circle “pops out” in a field of dark squares. Similarly, an orange square “pops out” in a field of dark squares in B. However, in C, the orange square does not pop out in a field of both orange circles and dark squares. There is a conjunction of features with the orange square — the square shape of the other squares and the orange color of the circles.

18

TRAP

Effectively Invisible Element A provided cue (label, icon, affordance, prompt) is not noticed, or is slow to be noticed, because it is outside the user’s foveal vision and/or the user does not expect to see it.

Pictures here

Example

NEED

Distraction Something in the UI appears suddenly or changes rapidly, distracting the user from their goal.

Pictures here Example

NEED

19

UNDERSTANDABLE

TENET

Comprehensible A UI is comprehensible when a user attends to and correctly interprets the meaning of groupings, symbols, or language in the UI.

ANSWERABLE QUESTIONS A UI has answerable questions when the user is able to recognize or recall information when making a decision. Often UIs require SPEAKS USER’S LANGUAGE some information from the user in order to A UI speaks the user’s language when the operate or execute an operation. The answers language and symbols are correctly understood to the questions that are posed within the by the user. To facilitate this understanding, the context of the UI should be readily available designer should use language or symbols that were previously learned or are already familiar to the user; they should be quickly recalled through prior knowledge. to the user. Additionally, the designer should consider the rest of the language or symbols that have been used in the view or in the system since the other words and symbols might interact inappropriately and mislead the user into dead ends. It is difficult to precisely predict exactly how users will react to language and symbols. Getting the right “language” is a primary focus when observing how users navigate a system.

Pictures here

20

Example

NEED

TRAP

Uncomprehended Element A cue (label, icon, affordance, prompt) critical to achieving a goal is noticed, but not understood, and is therefore disregarded. It looks wrong, but is right.

Example

Pictures here

NEED Inviting Dead End A cue (label, icon, affordance, prompt) is incorrectly judged as a means for achieving a goal. It looks right, but is wrong.

Pictures here

Example

NEED Memory Challenge The user is required to remember information that is easy to forget.

Pictures here

Example

NEED

21

UNDERSTANDABLE

TENET

APPROPRIATELY GROUPED A UI is appropriately grouped when the layout suggests the appropriate interpretation of the UI by the user. Grouping and layout are as important to comprehension as language and symbols. When items are appropriately

grouped, their meaning is made clear. When poorly grouped, the meanings are easily confused. The work of the Gestalt psychologists in the early part of the 19th century illustrates many of these concepts.

Proximity When objects are close together they are perceived as a group or pattern.

Similarity When objects look similar they are perceived as a group or pattern.

Continuation When objects have elements that compel the eye to move through one object and continue to another they are perceived as a group or pattern.

Closure When incomplete objects have enough of the shape they are perceived as complete.

22

TRAP

Poor Grouping A critical relationship between two or more cues (labels, icons, affordances, prompts) is not obvious.

Example 1 The butterfly ballot in the 2000 presidential election is the poster child for poor grouping. Not only does it appear that perhaps 4,000 people made the error of punching the second hole on the ballet in the mistaken belief that the second hole represented the second candidate, more than 19,000 people made the error of punching more than one hole, since both were directly alongside the candidate.

Display

1000

10000

100000

Frequency

100

1000

10000

Contrast

10

100

1000

Brightness

1

10

100

Example Radio buttons whose labels are closer to each other than the other radio button options make it difficult to tell which thing should be clicked. Are the radio buttons running vertically, or horizontally?

23

UNDERSTANDABLE

TENET

CONFIRMATORY A UI is confirmatory when it tells the user what they have done. Feedback has the same elements that other parts of the UI do; it has to be visible, noticeable, and comprehensible. Additionally, it has to be responsive. The importance of good feedback cannot be overly stressed. Although there are examples of successful products with invisible elements, it is hard to point to successful invisible elements that have ambiguous feedback mechanisms. In

fact, one of the best ways to teach users about invisible elements in UIs is to insure the product has excellent feedback systems that are very responsive.

Example

NEED

Pictures here

24

TRAP

Feedback Failure The user does not see, notice, or comprehend needed feedback.

Example 1 This is an error message that was encountered in Power Point while looking at the slide sorter view. It is unclear what the user can do and does not help the user avoid this issue in the future.

Pictures here

Example

NEED

25

INTRODUCTION

Picture here

26

COMBFORTABLE “I CAN DO THINGS QUICKLY AND COMBFORTABLY”

SUB TENETS

TRAPS

N/A

Physical Challenge Accidental Activation

A UI is combfortable when users can physically perform the actions quickly and comfortably. The most physically effortless UIs become seamless extensions of the user—like the user’s arms and legs.

27

PHYSICALLY EFFORTLESS

TENET

Human physical abilities and limitations are well researched and understood areas. In fact, the wealth of information is staggering. In this light overview, it is impossible to hit upon all the information and areas in this space. We will highlight just two important factors: accurate targeting and legibility.

The essence of Fitts’ Law is that the time required to move to a target area is a function of the distance to and the size of the target. This seems pretty straightforward, but when applied it can produce some very interesting, and not necessarily obvious, conclusions. For example, the most efficient target placements differ greatly between Windows on a PC and Halo on a PC. In a PC running Windows, the TARGETABLE fastest targets to acquire are the corners, due to A UI allows for accurate targeting when users their pinning action. Conversely, if you run Halo are able to acquire targets in a quick and error- on a PC, the fastest target to acquire is in the free manner. The reigning model for predicting middle of the screen since the reticule remains ease of target acquisition is Fitts’ Law, which in the middle at all times. has been around since it was first proposed in the 1950s. The formula is: LEGIBLE A UI is legible when users are able to read the text on the screen quickly and error free. There T = average time taken to complete the are a number of factors that affect if text is movement. legible on a screen. Some of the most common a = start/stop time of the device. factors that designers can influence are the b = the inherent speed of the device. font, the font’s size relative to the resolution of D = distance from the starting point to the the screen, the font color, and the color of the center of the target. background the font is against. Researchers in Microsoft Research have developed a calculator W = width of the target measured along that predicts the acceptable reading speeds the axis of motion. given the font, the font size, and the visual angle.

T = a + blog2 (1 +

28

D W

)

TRAP

Physical Challenge The user knows what action is required, but performing the action is physically effortful, difficult or impossible.

Example Many touch phones prior to the iPhone did not have large enough targets to hit with a finger. Examples of the iPhone’s minimum target sizes can be seen to the right.

Accidental Activation The user’s physical actions result in an unintended outcome.

Pictures here

Example

NEED

29

PHYSICALLY EFFORTLESS

TENET

NEED MORE HERE

30

TRAP

Physical Challenge The user knows what action is required, but performing the action is physically effortful, difficult or impossible.

Pictures here

Example 1

NEED

Accidental Activation The user’s physical actions result in an unintended outcome.

Pictures here

Example

NEED

31

INTRODUCTION

Picture here

32

RESONSIVE “I DON’T WAIT”

SUB TENETS

TRAPS

N/A

Slow or No Response

A UI is responsive when it responds quickly to what the user asks it to do. Having responsive UI is one of the few Tenets we can say with confidence is a necessity. Even slight delays can have dramatic impact on user behavior. Experiments at Amazon and Microsoft Live Search showed that when the search results page was slowed down by one second, queries per user declined by one percent and ad clicks per user declined by 1.5 percent. When the search results page was slowed down by two seconds, these numbers more than doubled to 2.5 percent and 4.4 percent. These seemingly small percentages end up being very large in terms of revenue when it comes to web traffic, translating into millions of dollars.

33

RESPONSIVE

TENET

A UI is responsive when it responds quickly to what the user asks it to do. There are two types of thresholds that are important to consider for response time: absolute and relative. The most critical absolute threshold is the human threshold for detecting that time has passed; which is within one hundred milliseconds of user activation. This is the gold standard for responsiveness. Responding faster than this isn’t helpful to humans because they can not perceive it. One hundred milliseconds is often impossible to achieve, which is why relative thresholds become important. Relative thresholds relate to where the competition is. In order for a human to be able to perceive a difference in performance the difference needs to be twenty percent or greater between the two products.

34

Characteristics of feedback as it relates to responsiveness:

Provide a confirmation within 100 ms of activation. 2. Provide a response within 500 ms of user activation for any process that users perceive to be “easy” to perform. For example, page down, zooming in and out, maximizing and minimizing windows. 3. Provide some form of continuous feedback for any process that cannot be executed within one second after activation. a. Provide simple animations or indications without details and progress for waits two seconds and under. b. Provide progress with feedback for waits longer than two seconds. 4. If there is a form of progress indication then make it clear that continual progress is being made by assuring that that progress changes every two to five seconds. 1.

TRAP

Slow or No Response The user is prevented from achieving a goal in a timely manner because actual or perceived poor system performance or because the design intentionally prevents the user from advancing or backing out.

Example Windows Vista was, unfortunately, not very responsive. This was one of the major drivers of dissatisfaction with Windows Vista.

35

INTRODUCTION

Picture here

36

EFFICIENT “I TAKE FEWER STEPS AND PROCESS LESS INFORMATION”

SUB TENETS

TRAPS

Step Reduced

Unnecessary Step

Information Reduced

Information Overload

Retentive

System Amnesia

Predictive

Bad Prediction

A UI is efficient when users perceive that they are doing things in a minimal number of steps. A critical part of this definition is the perception of fewer steps rather than the actual number of steps. While it is true that a reliable way to reduce the number of perceived steps is to reduce the number of actual steps, it is not the only way. Absolute efficiency is a practically unreachable goal, which also makes it fertile territory for continuous improvement in UIs. Many major innovations in UI have been made on this Tenet alone. The clearest modern example is search. Search, when done well, is a classic example of how many of the best attributes of this Tenet come together for massive efficiency. Steps are reduced, the hierarchy is flattened, and the best search engines have begun to accurately predict user intent.

37

EFFICIENT

TENET

Step Reduced A UI has been reduced to its essential steps when users have a minimal number of actual behavioral steps to achieve a goal. As stated at the outset of this section, the most critical thing is the user’s perception that there are fewer steps. However, there is no denying that one of the best ways to change user’s perception is to actually remove behavioral steps, provided that this does not cause a conflict with other Tenets, such as Understanding. Wizards have been criticized for being inefficient for this very reason; however, their efficiency completely depends on the context they are used in. When used in the appropriate context—such as for one-time set up—they

often end up being the most efficient design despite “adding steps.” However, independent of this example, the basic notion of removing steps still holds. Given equal understanding, a wizard with fewer steps is superior. There is also a large body of research dating back to the 1890s that reducing choices will reduces decision time. A portion of this research is summarized by Hick’s Law, an equation that predicts that the time taken to make a choice will increase as the number of choices increase in certain contexts.

Example Amazon removed the need to go through all the steps involved with a shopping cart. They gave the user the option to purchase items with one click.

38

TRAP

Unnecessary Step When the UI is being used as intended, the amount of actual or perceived UI navigation needed to achieve a goal is too high.

Example Having a “confirmation” dialog for actions the user has already indicated they would like to perform.

39

EFFICIENT

TENET

MAINTAINS SPATIAL CONTEXT A UI maintains spatial context when it makes comparisons in space rather than time. Put another way, it leverages flatness over hierarchy where possible. As an example, consider a book. If two dots are on the same spread, they are adjacent in space. All it takes to switch between them is movement of your eye. Compare that to a dot on one page stacked above a dot on another page. You can’t see them both at once. You have to flip back and forth between pages to see one dot versus the other. When screen size allows for it, it is better to choose breadth over depth. It should be noted that at some point, physical constraints take over and limit the amount of flatness allowed in a display. However, there are still ways to construct navigation that leverages space rather than time.

40

Information Reduced

TRAP

Information Overload Information presented to the user is comprehensible but there's too much of it.

Example Back in 2002 Jeep had an extremely lengthy, wordy spot on their web site to have users indicate where to find their nearest dealer. There was a huge paragraph of unnecessary information cluttering the page and distracting the user from their task.

By 2007 this issue was fixed.

41

EFFICIENT

TENET

Retentive A UI remembers when it retains information for use either on demand or automatically so the user does not have to remember it or reproduce it themselves. This has a wide range of applications, from remembering where in the interface the user left off to duplicating previously used data in a way analogous to the copy and paste commands.

Predictive

A UI is predictive if it automatically performs an action on the user’s behalf in a manner consistent with user expectations. It has long been a dream of the design community to produce a UI that predicts what the user wants to do. There has been progress on this front, though it has been very slow. The primary challenge is forming an accurate PREVIEWS prediction given the huge number of variables A UI previews changes when it shows the user that might be at play. This is a time consuming the outcome of their choices before the user task. For example, as recently as two versions commits to the choices. This kind of UI prevents ago, the automatic spelling correction tool in forcing Microsoft Word was lampooned. This changed due to huge improvements to the accuracy of the users to go back and forth from the place the predictions made by the spelling correction they make their UI choices to the place where tool. Microsoft Word took nearly three versions the to get this magical feature to work with enough outcome of those choices becomes apparent. accuracy that it was finally acceptable.

42

TRAP

System Amnesia The system re-prompts the user for information it previously gathered, or otherwise fails to leverage the user's prior work.

Pictures here

Example

NEED

Bad Prediction The user must correct or work around the system's incorrect prediction or inaccurate interpretation of their intent. Example The first version of the iPhone auto-spelling correction made mistakes. When wrong it was extremely irritating or embarrassing and ended up taking more work to fix than if the interface had not attempted to predict the user’s actions in the first place

43

INTRODUCTION

Picture here

44

FORGIVING “I CAN UNDO MY ACTIONS”

SUB TENETS

TRAPS

N/A

Irreversible Action

A UI is forgiving when the user can undo what they have previously done. Humans make mistakes. It simply happens, and it happens so often that it’s not worth quoting any research on it.

45

FORGIVING

TENET

One of the most amazing and magical things about technology is that it allows users to rewind their actions. The ability to forgive errors allows users to explore the UI without fear of repercussions. The challenge with this magical ability is that it isn’t always there, and sometimes it doesn’t always work the way users expect it to. The power to undo actions is an incredibly important concept, and one that

Microsoft frequently does good work on. However, we do not tout our efforts here nearly enough. This ability may seem mundane to the members of the software development community—but it is magical to the larger user community.

Example Microsoft Word is one of the best implementations of a forgiving UI. The user can not only undo one action, but a series of actions in a nearly infinite string. Also, if they have done too many “undo” actions by accident, they can redo what they just did.

46

TRAP

Irreversible Action The user is unable to “undo” an incorrect step they have taken.

Example In Internet Explorer 7.0, if the user accidentally closed a tab (a common occurrence) there was no way to recover the lost tab. This was solved in Internet Explorer 8.0 with a way to recover lost/ closed tabs on any new tab.

47

INTRODUCTION

Picture here

48

DISCREET “I DON’T OVERSHARE”

SUB TENETS

TRAPS

N/A

Unwanted Disclosure

A UI is discreet when it allows the user to go about their business in social contexts with minimal embarrassment or disruption to others.

49

DISCREET

TENET

Our devices and UIs are social by nature. They are used by humans in social contexts. In fact, with computing trending to more miniaturized form factors, our UIs venture into social situations more often because of their portability. In relation to this shift, devices need to be increasingly discreet. A Pew survey conducted in 2006 showed that “82 percent of all Americans and 86 percent of cell users report being irritated at least occasionally by loud and annoying cell users

who conduct their calls in public places.” The same study goes on to state, “Indeed, nearly one in ten cell phone owners admit they themselves have drawn criticism or irritated stares from others when they are using their cell phones in public.” Design that prevents social disruption and embarrassment like this will become more and more important as technology weaves it’s way into more social contexts in our lives.

Example The iPhone has a single switch for turning off all sounds.

50

TRAP

Unwanted Disclosure The user's behavior or data is made public in a way they did not intend, leading to potential harm, irritation or embarrassment.

Example Facebook Beacon was a feature that shared users’ partner-site purchase activities on their news feeds on an opt-out basis. Beacon became the target of a class action lawsuit. Facebook eventually shut it down and Mark Zuckerberg acknowledged it was a “mistake”.

51

INTRODUCTION

Picture here

52

PROTECTIVE “I DON’T LOSE MY DATA”

SUB TENETS

TRAPS

N/A

Data Loss

A UI is protective when data and work are never lost unintentionally. This Tenet needs little data to support it. User data is precious. Software developers and testers have long recognized this. Bugs with the highest priority ranking often relate to protecting users’ data and assuring that it does not get lost unintentionally.

53

PROTECTIVE

TENET

A UI is protective when data and work are never lost unintentionally. User data is precious. Software developers and testers have long recognized this. Bugs with the highest priority ranking often relate to protecting users’ data and assuring that it does not get lost unintentionally. There are some things about UI design that can lead to unintentional data loss. One such thing is the convention of having to commit to a change rather than saving in real time. Many authors have weighed in on this, noting that it

is a throwback to when computer memory was not plentiful and a concession to the way computers work rather than the way humans expect things to work. As these authors point out, the problem with asking the user if they wish to save or not is that the two options are presented as equally likely alternatives when, in fact, the most likely outcome is that the user will opt to save. With storage capacity being as cheap as it is there is increasingly little reason the interface should not save at every change.

Example One Note has done away with the traditional notion of having to save work. Instead when changes have been made of any kind the work is automatically saved.

54

TRAP

Data Loss The user can lose their work through some action or inaction on their part.

Pictures here

Example

NEED

55

INTRODUCTION

Picture here

56

HABITUATING “I QUICKLY ACHIEVE MASTERY”

SUB TENETS

TRAPS

Non-Redundant

Gratuitous Redundancy

Consistent with Expectations

Inconsistent Element Variable Outcome

Sense of Home

Ambiguous Home

A UI is habituating when, over time, the user does things automatically. The importance of habituation is often overlooked in interface design. Interfaces that allow users to quickly form good habits also lead to greater understanding and efficiency. Another thing that is often overlooked is that humans cannot help but learn habits; it is a hard-wired ability. This propensity to form habits extends to user interaction; from the moment people start using an interface, they begin to form habits.

57

HABITUATING

TENET

Non-Redundant A UI is non-redundant when there is only one way in the interface to achieve a given goal. This is synonymous with Jef Raskin’s notion of “monotony.” Raskin’s stand was that there should only be one way to accomplish an action. This is a controversial stand to take — especially since it can be demonstrated that some kinds of redundancy can be helpful. There

are at least four sorts of redundancy, two of which should be eliminated and one of which should be used with care, and one that is fine. The appropriateness of redundancy is a function of two considerations: 1. The type of the redundancy 2. The user’s goal

User Goal Type of Redundancy Multiple instances of the same visible UI element presented at the same time

User knows what they want to do

User unclear what they want to do

(e.g. I want to buy a pair of size 30 Jeans)

(e.g. I want to buy something)

AVOID

APPLY JUDICIOUSLY

E.g.: On Blackberry devices: two instanc- E.g.: On Amazon.com: a product can be es of a “New message” notification icon found directly via a home screen promoare presented on the home screen at tion or at the top level of the hierarchy.

A visible instance and a nested instance AVOID of the same UI element presented at E.g.: On Blackberry devices: menu items the same time can be selected directly or by going through the options menu and choosing the select option, from the same view. Paths through multiple applications for completing the same goal presented at the same time

Invisible shortcut to visible UI element

APPLY JUDICIOUSLY

E.g.: On Amazon.com: a product can be found directly via a home screen promotion or through the site’s taxonomical navigation hierarchy. A good example is the book of the month.

N/A

E.g.: On mobile devices: sending a text message by 1) going to contacts and selecting “send message” or 2) going to the composer, entering a message, and selecting the recipient.

OK E.g.: In Windows, there are many consistent shortcuts for commonly used functions like Ctl + C for “copy”

58

APPLY JUDICIOUSLY

N/A

TRAP

Gratuitous Redundancy The user is presented with multiple cues (labels, icons, affordances, prompts) for the same action at a single level, or a directly nested level, of the UI.

Example

Pictures here

NEED

Example

Pictures here

NEED

59

HABITUATING

TENET

Consistent with Expectations A UI is consistent with expectations when aspects of the user’s way to perform actions do not change depending on the context. Consistency is difficult to get right because it is not always clear what aspects of the UI should remain consistent. There is great benefit to well -applied rules of consistency, and unfortunate horror stories of poorly applied ones as well. Some parts of a UI benefit more than others from reliably having elements behave in exactly the same way. Below are the top four rules that Bruce Tognazzini has provided on levels of a UI that benefit most from consistency. 1. 2. 3. 4.

MODELESSNESS A UI is modeless when the same action yields the same system response at a time when attention is not on the system state. It is very difficult to design a system with no modes. The key to proper use of modes depends on whether the user attends to the mode. Modes are acceptable when they are so clear and salient that the user cannot forget they are in a mode or cease to attend to the mode. Raskin referred to these situations as “quasimodes,” and used the example of holding down the shift key on a keyborad as a quasi-mode. Despite the ability to layer in quasi-modes, Interpretation of similar user behavior in the there is plenty of evidence that user’s errors same “view.” E. g., a “click” or “gesture” increase when more modes are added, particularly when the user is unaware of these Invisible UIs, like shortcuts additional modes.” Small visible structures. E.g., common controls, icons, size boxes, scroll arrows, etc. Interpretation of similar user behavior across ”views”

Control + X

Control + Y

Example In Windows, users can rely on the cut, copy, and paste commands to operate exactly the same way with exactly the same shortcuts no matter where they are.

60

TRAP

Inconsistent Element A cue (label, icon, affordance, prompt) differs from its visual appearance or placement elsewhere in the UI.

Pictures here

Example

NEED

Variable Outcome The consequence of an action a user takes on the same control changes depending on the state of the system.

Pictures here

Example

NEED

61

HABITUATING

TENET

Sense of Home A UI has a single home when there is one conceptual place that users perceive as the “starting point.” There is a growing body of evidence that users perform best when there is a single place to begin their tasks. If they do not have a clear single starting point they are more confused and demonstrably slower at using a system than if they do.

Pictures here Example

NEED

62

TRAP

Ambiguous Home There is no single place the user can return to at any time to begin a new task or get re-oriented. There are multiple and competing “homes.”

Pictures here

Pictures here

Example

NEED

Example

NEED

63

INTRODUCTION

Picture here

64

BEAUTIFUL “I FIND IT ATTRACTIVE”

SUB TENETS

TRAPS

N/A

Unattractive Appearance

A UI is beautiful when the user finds the design attractive. A growing number of researchers have been able to demonstrate that beautiful objects are perceived as easier to use and that users are more forgiving of interfaces they perceive as attractive. While it is hoped that these findings will be met with a resounding, “well…duh!” it is still striking how often time or resources for aesthetics are cut from a product schedule.

65

PROTECTIVE

TENET

A UI is beautiful when the user finds the design attractive. A growing number of researchers have been able to demonstrate that beautiful objects are perceived as easier to use and that users are more foregiving of interfaces they perceive as attractive. While it is hoped that these findings will be met with a resounding, “well…duh!,” it is still striking how often time or resources for aesthetics are cut from a product schedule. A lot of ink has been spilled on why something is beautiful. We are not going to try to decode what makes something beautiful in this book. Attempts to predict beauty have not been very successful. Beauty is subjective and depends on cultural contexts and a number of other

Most Liked

United States

Netherlands

66

variables. Beauty has also defied being analyzed into factors that allow for successful recombination. An excellent, humorous example comes from two artists, Komar & Melamid who commissioned a large set of marketing surveys to identify components of paintings that were most and least “liked.” The results did not produce paintings that were “liked” or “disliked”, and did not succeed at establishing any standard elements of beauty. Additionally, the contrasting results from the United States and the Netherlands show how very differently the two cultures talk and think about what they find aesthetically pleasing.

Least Liked

Example Two artists (Komar & Melamid) commissioned a large set of marketing surveys to identify components of paintings that were most and least “liked.” The results did not produce paintings that were “liked” or “disliked,” and did not succeed at establishing any standard elements of beauty.

TRAP

Unattractive Appearance The system is aesthetically unpleasing or does not follow its own design language.

Pictures here

Example

NEED

67

Bibliography

68

General 1. 2.

3. 4. 5. 6. 7. 8. 9.

10. 11. 12. 13.

14. 15. 16. 17.

19.

Baecker, R. M., & Buxton, W. (Eds). (1987). Readings in Human-Computer Interaction: A Multidisciplinary Approach. Los Altos, CA: Morgan-Kaufmann Publishers. Baecker, R. M., Grudin, J., Buxton, W. & Greenberg, S. (Eds). (1995). Readings in Human-Computer Interaction: Toward the Year 2000 (Second Edition). Los Altos, CA: MorganKaufmann Publishers. Box, G. E. P., Draper, N. R. (1987). Empirical Model-Building and Response Surfaces, p. 424, Wiley. Buxton, W. (2007). Sketching User Experiences. Amsterdam, The Netherlands: Elsevier. Card, S., Moran, T. P., & Newell, A. (1983). The Psychology of Human-Computer Interaction. Hillsdale, NJ: Lawrence Erlbaum Associates, 1983. Cooper, A., & Reimann, R. (2003). About Face 3.0. Indianapolis: Wiley. Erickson, T., & McDonald, D. W. (Eds). (2008). HCI Remixed: Reflections on Works that have Influenced the HCI Community. Cambridge, MA: MIT Press. Garrett, J. J. (2003). The Elements of User Experience. New York: New Riders. Gerhardt-Powals, J. (1996). Cognitive Engineering Principles for Enhancing Human-Computer Performance. International Journal of Human-Computer Interaction, 189211. Helander, M. (Eds). (1988). Handbook of Human-Computer Interaction. Amsterdam: North-Holland. Helander, M., Landauer, T., & Prasad Prabhu, P. (Eds). (1997). Handbook of Human-Computer Interaction. Amsterdam: North-Holland. Hix, D. & Hartson, H. (1993). Developing User Interfaces. New York: Wiley and Sons. ISO. (2000). 9421-9 Ergonomic requirements for office work with visual display terminals (VDTs) - Part 9: Requirements for non-keyboard input devices. International Organization for Standardization. Jacko, J., & Sears, A. (Eds). (2003). The Human-Computer Interaction Handbook. Lawrence Erlbaum Associates. Johnson, J. (2010) Desinging with the Mind in Mind. New York: Morgan Kaufmann. Klien, G. (1999). The Sources of Power. Boston: The MIT Press. Kohavi, R. (2007, October 16). Emetrics 2007 Practical Guide to Controlled Experiments on the Web. Retrieved from http://exp-platform.com/Documents/200710EmetricsExperimenation.pdf Krug, S. (1996). Don’t Make Me Think. Berkley, California: New Riders.

19. Laurel, B. (Eds). (1990). The Art of Human-Computer Interface Design. Reading, MA: Addison-Wesley Publishing Co. 20. Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design: Revised and Updated. Bervery, Massachusetts: Rockport Publishing. 21. May, M. (2009). In Pursuit of Elegance: Why the Best Ideas Have Something Missing. Broadway Business. 22. Mayhew, D. (1992). Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice Hall. 23. Mayhew, D. (1999). The Usability Engineering Lifecycle: A Practitioner’s Handbook for User Interface Design. San Francisco: Morgan Kaufmann Publshers. 24. Moggridge, B. (2007). Designing Interactions. MIT Press. 25. Mullet, K., & Sano, D. (1995) Designing Visual Interfaces: Communication Oriented Techniques. Sunsoft Press. 26. Neilsen, J. (1994). 10 Heuristics for User Interface Design. Retrieved January 20, 2010, from Useit.com: http:// www.useit.com/papers/heuristic/heuristic_list.html 27. Nielsen, J. (1993). Usability Engineering. San Diego: Academic Press, 1993. 28. Norman, D. (1988). The Design of Everyday Things. New York: Doubleday. 29. Bias, R., & Mayhew, D., Eds. (2005) Cost-Justifying Usability: an update for an Internet age. Morgan Kaufmann. 30. Raskin, J. (2000). The Humane Interface: New Directions for Designing Interactive Systems. Reading, Massachusetts: Addison-Wesley Publishing. 31. Scott, B., & Neil, T. (2009). Designing Web Interactions. Sebastopol: O’Reilly. 32. Sears, A., & Jacko, J. (Eds). (2007). The Human Computer Interaction Handbook. (2nd edition) CRC Press. 33. Sharp, H., Rogers, Y. & Preece, J. (2007). Interaction Design: Beyond Human Computer Interaction. Chichester: Wiley and Sons 34. Shneiderman, B. (1998). Designing the User Interface: Strategies for Effective Human-Computer Interaction Third Edition. Addison-Wesley. 35. Tognazzini, B. (2009). First Principles of Interaction Design. Retrieved January 20, 2010, from AskTog.com: http:// www.asktog.com/basics/firstPrinciples.html 36. Tognazzini, B. (1992). Tog on Interface. Addison-Wesley Professional 37. von Hippel, E. (1994). The Sources of Innovation. London: Oxford University Press.

69

Understandable 38. 39. 40. 41.

42. 43. 44. 45. 46.

47. 48. 49.

56. 57. MacKenzie, S. I. (1992). Fitts’ law as a research and design Eriksen, C., & Yeh, Y. (1985). Allocation of attention in the tool in human-computer interaction. Human-Computer visual field. Journal of Experimental Psychology: Human Interaction, 91-139. Perception and Performance, 583-597. 58. Mizobuchi, S., Mori, K., Ren, X., & Michiaki, Y. (2002). An Gaver, W. W. (1991). Technology Affordances. ACM CHI Empirical Study of the Minimum Required Size and the Human Factors in Computing Systems Conference, 79-84. Minimum Number of Targets for Pen Input on the Small New Orleans, Louisiana. Display. Mobile HCI, 184-194. Gibson, J. J. (1979). The Ecological Approach to Visual 59. Resiel, J. F., & Shneiderman, B. (1987). Is bigger better? The Perception. New Jersey: Lawrence Erlbaum Associates. Effects of Display Size on Program Reading. In G. Salvendy, Horvitz, E., Kadie, C., Paek, T., & and Hovel, D. (2003). S. L. Sauter, & J. J. Hurrell, Social, ergonomic and stress Models of attention in computing and communication: aspects of work with computers 113-122. Amsterdam, The from principles to applications. Communications of the Netherlands: Elsevier. ACM, 52-59. 60. Tinker, M. A., & Paterson, D. G. (1928). Influence of type LaBerge, D. (1995). Attentional Processing. Cambridge, form on speed of reading. Journal of Applied Pschology, Massachusetts: Harvard University Press. 359-368. McGrenere, J., & Ho, W. (2000). Affordances: Clarifying and 61. Tinker, M. A., & Paterson, D. G. (1931a). Studies of Evolving a Concept. Graphics Interface, 15-17. Montreal, typographical factors influencing speed of reading: IX. Quebec, Canada. Reductions in size of newspaper print. Journal of Applied Mullet, K., & Sano, D. (1995). Designing Visual Interfaces: Pschology, 525-531. Communication Oriented Techniques. Sunsoft Press. 62. Tinker, M. A., & Paterson, D. G. (1931c). Studies of Norman, D. (1999). Affordances, Conventions, and Design. typographical factors influencing speed of reading: V. Interactions, 38-41. Simultaneous variation of type size and line length. Journal of Applied Pschology, 72-78. Norman, D. (1999). Invisible Computer: Why Good Products Can Fail, the Personal Computer Is So Complex and 63. Tinker, M. A., & Paterson, D. G. (1935). Studies of Information Appliances Are the Solution. London: MIT typographical factors influencing speed of reading: XI. Role Press. of set in typographical studies. Journal of Applied Pschology, 647-651. Neisser, U. (1979). The control of information pickup in selective looking. Hillsdale, New Jersey: Lawrence Erlbaum. 64. Tinker, M. A., & Paterson, D. G. (1936). Studies of typographical factors influencing speed of reading: XIII. Simons, D. J. (1999). Gorillas in our midst: sustained Methodological Considerations. Journal of Applied inattentional blindness for dynamic events. Perception, Pschology, 132-145. 1059-1074. Soegaard, M. (2009). Affordances. Retrieved November 13, 65. Seow, S. (2005). Information Theoretic Models of HCI: A Comparison of the Hick-Hyman Law and Fitts’ Law. Human2009, from Interaction-Design.org: http://www.interactionComputer Interaction, 315-352. design.org/encyclopedia/affordances.html

Combfortable

Responsive

66. Kohavi, R. (2007, October 16). Emetrics 2007 Practical Guide 50. Duchnicky, R., & Kolers, P. (1983). Readability of Text to Controlled Experiments on the Web. Retrieved from Scrolled on Visual Display Terminals as a Function of http://exp-platform.com/Documents/2007Window Size. Human Factors, 683-692. 10EmetricsExperimenation.pdf 51. Fitts, P. M. (1954). The information capacity of the human 67. Linden, G. (2006, Dec). Make Data Useful. Retrieved from motor system in controlling the amplitude of movement. http://home.blarg.net/~glinden/StanfordDataMining.2006Journal of Experimental Psychology, 381-391. 11-29.ppt 52. Fitts, P. M., & and Peterson, J. R. (1964). Information 68. Seow, S. (2008). Designing and Engineering Time: The capacity of discrete motor responses. Journal of Psychology of Time Perception in Software. AddisonExperimental Psychology, 103-112. Wesley Professional. 53. Gould, J., Alfaro, L., Finn, R., Haupt, B., Minuto, A., & and Salaun, J. (1987). Why reading was slower from CRT displays than from paper. SIGCHI Bulletin, 7-11. 54. Matskewich, T., Larson, K., & Hitchcock, G. (2008). Modeling the Reading System. Microsoft Think Week Paper. 55.

70

Efficient 69. Aaltonen, A. H. (1998). 101 Spots, or How Do Users Read Menus? SIGCHI conference on Human factors in computing systems, 132-139. Las Angeles. 70. Card, S. (1982). User Perceptual Mechanisms in the Search of Computer Command Menus. Human Factors in Computing Systems, 190-196. 71. Chi, E., Pirolli, P., & Pitkow, J. (2000). The Scent of a site: A System for Analyzing and Predicting Information Scent, Usage, and Usability of a Web Site. SIGCHI conference on Human factors in computing systems, 161-168. The Hague, Netherlands. 72. Geven, A., Sefelin, R., & Tscheligi, M. (2006). Depth and breadth away from the desktop: the optimal information hierarchy for mobile use. 8th conference on Humancomputer interaction with mobile devices and services. Helsinki, Finland: 201-219. 73. Hick, W. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 11-26. 74. Healey, C. (2009). Perception in Visualization. Retrieved November 12, 2009, from North Carolina State University: http://www.csc.ncsu.edu/faculty/healey/PP/index.html 75. Hollands, J., & Merikle, P. (1987). Menu Organization and User Expertise in Information Search Tasks. Human Factors, 577-586. 76. Hyman, R. (1953). Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 188-196. 77. Jacko, J., & Salvendy, G. (1996). Hierarchical Menu Design: Breadth, Depth, and Task Complexity. Perceptual and Motor Skills, 1187-1201. 78. Jacko, J., Salvendy, G., & Koubek, R. (1995). Modeling of Menu Design in Computerized Work. Interacting With Computers, 304-330. 79. Kiger, J. I. (1984). The Depth/Breadth Trade-Off in the Design of Menu-Driven User Interfaces. International Journal of Man-Machine Studies, 201-213. 80. Landauer, T. K., & Nachbar, D. W. (1985). Selection from Alphabetic and Numeric Menu Trees Using a Touch Screen: Breadth, Depth, and Width. SIGCHI, 73-78. 81. Larson, K., & Czerwinski, M. (1998). Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval. SIGCHI, 25-32. 82. Lee, E., MacGregor, J., Lam, N., & Chao, F. (1986). KeywordMenu Retrieval: An Effective Alternative to Menu Indexes. Ergonomics, 115-130. 83. Miller, C. S., & Remington, R. W. (2004). Modeling Information Navigation: Implications for Information Architecture. Human-Computer Interaction, 225-271.

69. Miller, D. P. (1981). The Depth/Breadth Tradeoff in Hierarchical Computer Menus. Human Factors and Ergonomics, 296-300. 70. Norman, K. L. (1991). The Psychology of Menu Selection: Designing Cognitive Control of the Human/Computer Interface. Norwood, New Jersey: Ablex Publishing Corporation. 71. Paap, K. R., & Cooke, N. J. (1997). Design of menus. In H. M, T. K. Landauer, & P. Prabhu, Handbook of Human Computer Interaction, 533-572. Amsterdam, The Netherlands: North-Holland. 72. Paap, K. R., & Roske-Hofstrand, R. J. (1986). The Optimal Number of Menu Options per Panel. Human Factors, 377385. 73. Snowberry, K., Parkinson, S. R., & Sisson, N. (1983). Computer Display Menus. Ergonomics, 699-712. 74. Scott, B., & Neil, T. (2009). Designing Web Interactions. Sebastopol: O’Reilly. 75. Tufte, E. (2001). The Visual Display of Quantitative Information, 2nd Edition. Graphics Press. 76. Tullis, T. S. (1985). Designing a Menu-Based Interface to an Operating System. SIGCHI, 73-78. 77. Wallace, D. F., Anderson, N. S., & Schneiderman, B. (1987). Time Stress Effects on Two Menu Selection Systems. Human Facotors and Ergonomics, 727-731. 78. Zaphiris, P. G. (2000). Depth vs. Breath in the Arrangement of Web Links. Human Factors Ergonomic Society, 453-456.

71

Forgiving

Beautiful

79. Cooper, A. & Reimann, R. (2003). About Face 3.0. Indianapolis: Wiley. 80. Raskin, J. (2000). The Humane Interface: New Directions for Designing Interactive Systems. Reading, Massachusetts: Addison-Wesley Publishing. 81. Tognazzini, B. (1992). Tog on Interface. Addison-Wesley Professional.

91. Giller, V., Melcher, R., Schrammel, J., Sefelin, R., & Tscheligi, M. (2003). Usability Evaluations for Multi-device Application Development Three Example Studies. Mobile HCI, 302-316. Udine, Italy. 92. Green, C. D. (1995). All That Glitters: A Review of Psychological Research on the Aesthetics of the Golden Section. Perception, 937-968. 93. Hassenzahl, M. (2004). The interplay of beauty, goodness, and usability in interactive products. Human–Computer Interaction, 319-349. 94. Komar, V., & and Melamid, A. (1997, March). Komar & Melamid: The Most Wanted Paintings on the Web. Retrieved February 2, 2010, from Komar & Melamid: The Most Wanted Paintings on the Web: http://awp.diaart.org/ km/index.html 95. Norman, D. (2004). Emotional Design. New York: Basic Books. 96. Quinn, J., & Tran, T. (2010). Attractive phones don’t have to work better. CHI Conference, Atlanta GA. 97. Schneider, W. & Shiffrin, R. M. (1977). Controlled and automatic human information processing: 1. Detection, search, and attention. Psychological Review, 84, 1 - 66. 98. Tractinsky, N., Shoval-Katz, A., & and Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 127-145

Discreet 82. Rainie, L., & Keeter, S. (2006). Americans and their cell phones. Pew Research Center.

Protective 82. Cooper, A. & Reimann, R. (2003). About Face 3.0. Indianapolis: Wiley. 83. Raskin, J. (2000). The Humane Interface: New Directions for Designing Interactive Systems. Reading, Massachusetts: Addison-Wesley Publishing. 84. Shneiderman, B. (1998). Designing the User Interface: Strategies for Effective Human-Computer Interaction. Third Edition. Addison-Wesley. 85. Tognazzini, B. (1992). Tog on Interface. Addison-Wesley Professional.

Habituating 86. Buxton, W. (1986). Chunking and Phrasing and the Design of Human-Computer Dialogues. Proceedings of the IFIP World Computer Congress, 475-480. Dublin, Ireland. 87. Grudin, J. (2002). The Case Against User Interface Consistency. Communications of the ACM, 1164-1173. 88. Kellogg, W. A. (1987). Conceptual consistency in the user interface: Effects on user performance. INTERACT Conference on Human-Computer Interaction. Stuttgart, Germany. 89. Neilsen, J. (1989). Coordinating User Interface for Consistency. San Fransisco: Morgan Kauffmann. 90. Sellen, A., Kurtenbach, G., & Buxton, W. (1992). The prevention of mode errors through sensory feedback. Human Computer Interaction, 141-164.

72

Traps 99. Brown, W., Malveau, R., McCormick III, H. W., & Mowbray, T. (1998). Anti-Patterns: Refactoring Software, Architectures, and Projects in Crisis. New York: Wiley Computer Publishing. 100. Johnson, J. (2000). GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers. New York: Morgan Kauffmann. 101. Neilsen, J. (2008, February 19). Top-10 Application-Design Mistakes. Retrieved February 24, 2010, from Useit.com: http://www.useit.com/alertbox/application-mistakes.html 102. Wikipedia. (2010, February 7). AntiPatterns. Retrieved February 8, 2010, from Wikipedia: http://en.wikipedia.org/ wiki/Anti-pattern 103. Scott, B. W. (2009). Antipatterns. Retrieved February 8, 2010, from billscottportfolio.com: http://billwscott.com/ share/presentations/2007/rwe/Antipatterns.pdf

73