• Attention capture is involuntary. If a stimulus appears in your visual field, it will capture your attention regardless of whether you want it to or not.
• Two ways to capture attention
  • Rapid luminescence captures attention - something turns abruptly bright
  • Rapid appearance of a novel perceptual object captures attention - an object suddenly becomes visually distinct from its previous scene
• Example: like a tiger moving behind the reeds. Tiger becomes a novel perceptual object when it emerges from the background

Banner ads didn’t work (see lecture reading) because people can completely tune these ads out; if we know we’re not interested in these things, they no longer work.

• Visual “pop-out” occurs when a unique visual target (e.g. a feature singleton) is present among a set of homogeneous distractors (source: Hsieh et al., 2011)
• Example: Adaptive tool-bar highlights things that they used before
  • Assuming the system is pretty good at predicting what you need next, this is a very effective feature
• The problem is that when things are highlighted to help people find things they had used before, the next time people looked for a tool they wanted to use they skipped over highlighted tools because before the tool they were looking for was not highlighted

Summary: Visual Pop-Outs only work if you know what to look for! If you are primed to look for it, you will find it, if not you will ignore it

• The Hick-Hyman law demonstrates that the time it takes to make a decision is proportional to the logarithm of the number of options
• Given n equally probable choices, the average time T required to choose among them is approximately T = a + b log2(n)
• Applies only to cognitively simple decisions
• Carries important implications for novel vs. familiar interfaces.

• Fitt’s Law declares that performance is logarithmic. It utilizes an UI element's ratio of distance (to it) to (its) width.
• A + B * log2(D/W)
• log2(D/W) is the index of difficulty in bits.
• 1/B is the index of performance in bits per second.
• Fitt’s Law can be used to calculate the difference in index of difficulty between Mac and PC menu designs. When using indirect pointing (a mouse), the barrier behind the Mac’s menu button turns its target size from 20 to infinity -- the W used in the equation is the button’s width, 60. The Mac’s index of difficulty is log(600/60) = log(10), compared to PC’s log(20). The Mac menu button has a lower index of difficulty.

A paper published in Nature in 1998 (http://bit.ly/1q8L83D) showed that neural control signals are corrupted by noise whose variance increases with the size of the control signal. Although that may seem like gibberish, our conversation in class boiled it down in a simple example: the greater the acceleration of your movement, the less accurate it will be. For example, pretend you have to extend your arm as if to throw a punch. If you do it slowly, you have exceptional control over this action. If done quickly, the accuracy lowers as the noise increases. This has to do with user mechanics because it helps the designer understand the nature of a user’s movements and thus shape the screen layout accordingly. We then spoke to the idea of planning for the optimal movement for the user and learned that the observed results come pretty near to what was predicted.

Going back to the ball example that we looked at in class, there was an instance where one ball “hit” another, and the second ball moved a couple of seconds after impact, while in another it moved right away. This touched on the point that in order for someone to conclude a causal relationship between the two, there has to be at most a 1/10 of a second difference between the first ball hitting the second ball and the second ball moving. In terms of designing, there has to be immediate feedback in order for the user to determine causality. We related this to the KAYAK website, and how when we changed the constraints on the sidebar, there was an automatic change on the website. As a result, the user understands that there is causality between changing those options and the results on the page. This is the association between immediate feedback and causality in an online example.

A technique that allows the user to explore information by applying multiple filters.  Each facet corresponds to a property of the information, and you can specify a specific value or range of a facet to filter on.  In class, we learned the flight search site Kayak had faceted browsing, in which you could refine the view of possible flights by take-off times, airline, number of stops, etc.  Typically interacting with faceted browsing has immediate feedback in which the filtered information is shown with minimal delay.

This website contains a list of other websites or products that incorporate a faceted browsing design: http://www.smileycat.com/design_elements/faceted_navigation/.  One example showcased is Airbnb, which allows you to filter listings by cost, amenities, etc.

Interfaces that speak in the languages of what you are interacting with (i.e. files, photos).  They do not require much prior knowledge, expecting the user to recognize rather than recall the interface.  They also support rapid and risk-free exploration.  Actions within a direct manipulation interface usually has immediate feedback.  In lecture, Finder (file browser) and iPhoto (photo app) were good examples of direct manipulation interfaces, while the Terminal was not considered one.

Drag-and-drop website builders such as Weebly are good examples of direct manipulation interfaces, as you interact with layout, pictures, and text rather than HTML and CSS code.

This term originally comes from psychology and a psychologist named Gibson, but it is now primarily used in design. Essentially, this is that "we perceive in order to act." What we see shows us how to act based on its communication with us.

In early designs, affordances were very in-your-face, like the physical-looking 'buttons' in a Microsoft Word toolbar. Lately, though, they have been getting much subtler. This is a tradeoff between gaining aesthetics but losing usability and learnability of the design.

It might not be a huge deal for someone familiar with the context, but anyone picking up today's mobile technology for the first time might have difficulty due to the subtle and inconsistently applied affordances popular in designs today.

You collect insights, but combining them doesn't always work. As a result, we can turn to personas to try and generalize some key traits. A good persona is an abstraction or generalization of people or an archetype.

To create your personas, you can map your users' attributes. Attributes include:

• Activities: what the users do
• Attitudes: how the users think about the domain space and problem
• Aptitudes: what the users' education and trainings are
• Motivations: why the user is acting
• Skills: what the user may already be able to do and his/her capabilities

After you map out attributes of your users, look for patterns and clusters to help you create abstract personas not based on any specific person you already met with. Use generic, befitting photos found online for your personas to help you visualize them.

The difference between personas and proto-personas is that personas are based on your observed data while proto-personas are based on your hallucinated assumptions of users.

Personas are useful for:

• helping you synthesize observed data
• focusing your design
• getting your team on the same page

Contrastingly, proto-personas are good for:

• laying out your assumptions
• establishing a baseline to amend later
• giving you hypotheses that you can then try to validate

When trust has been broken, an effective apology will admit fault for the mistake and acknowledge the effects that the mistake will have on team members. An effective apology also offers a way to make up for the mistake (you should never say “Please tell me what I should do” -- this places the burden on the people who were affected by your mistake.)

You can build trust on a team by initially making small commitments, and sticking to them. Additionally, team members should give their teammates space to follow through on their commitments.

When design controls things in the physical universe, it is good practice for the designer to make design choices that reflect how the physical universe is arranged (that is, “map” to a property of the physical universe). For example, at a museum, placards that describe paintings are often arranged in the same formation as the paintings themselves (spatial mapping).

Another example would be the spatial orientation of elevator buttons (to indicate ascent or descent) or the size of toilet buttons (to indicate #1 or #2).

Redundant cues are necessary because some individuals can’t connect certain cues to the signals connected to them.

An example of a redundant cue is the use of color and shape to represent the same meaning to the user. Since colorblind people cannot see colors and there are around 10% of males who have some form of colorblindness, the additional use of different shapes can be a helpful cue to indicate the same meaning as the use of different colors (for example, AIM)

Gamification is the concept of applying game techniques to engage and motivate people.

Some gamification techniques include

1. levels
2. badges
3. points
4. goal-tracking
5. competing with friends (social aspect)
6. streaks
7. goal-setting

(example: duolingo)

Badges: reflect real learning and accomplishments. Some users value badges because they can feel more skilled or show off to their friends. They can also unlock new choices (“superpowers”) for the user.

Oversupply might lead to inflation

Points: used for progress tracking, both immediate (i.e. XP for duolingo) and long-term (i.e. goal-tracking graphs).

Coins: virtual money used for “prizes”; allows the users to access something that’s limited. One example is lingots in duolingo, which are traded for meaningful superpowers on the website.

Streaks: used for sustaining user behavior so they do not quit after a few days.

Goals: have to be at ideal levels or else they can actually decrease productivity if the expectation is too high. If you ask the user to do her best, she won’t do much, but if you ask her for too much, that does not work either.

Behavior/ Goal Tracking: Showing users real behavior vs perceived goals can cause cognitive dissonance and can cause change in user attitudes.

More info available on the Gamification Wiki:

https://badgeville.com/wiki/

Examples of gamified apps:

http://yukaichou.com/lifestyle-gamification/the-top-ten-gamified-productivity-apps/#.Vs_RDGQrKu4

The Transtheoretical Model (TTM) of Behavior Change describes how people can develop a more positive behavior through five main steps:

• Precontemplation: no intention to change anything
• Contemplation: seriously considering change but not committed
• Preparation: intending to take action in the next month but have failed for the past year
• Action: perform the behavior for at least a few months
• Maintenance: sustain the behavior long-term

One thing that can get in the way of behavior change is cognitive dissonance, which refers to a disconnect between actual behavior and desired behavior.

The downfall of low fidelity prototypes is that they are not meant to allow the user to explore very much. There is usually one process to be tested or experienced. Therefore the user should be guided towards these specific tasks without detailed instructions. Instructions can often guide the user so much that they do not fail. As said in lecture, “You want to see how they fail, and how they got out of it.” The ideal instructions do not reveal the task design, vocabulary, or structure.

Here are some guidelines for developing a usability test: http://www.usability.gov/how-to-and-tools/methods/planning-usability-testing.html

Other times, users should feel as though they are in control and have the freedom to choose between multiple functions, so that they can recommend improvements. This way, users will be able to recognize errors that the designer did not consider. For this reason, there should also be undo buttons and error pages at the ready during a usability test.

An example of a usability test with a paper prototype: https://www.youtube.com/watch?v=9wQkLthhHKA

Contributed by Amelia Miller, Maria McLaughlin, and Maia Suazo-Maler.

Prototyping is trying out your idea in a real way but cheaply and quickly. People do not give real feedback on hypotheticals, so it’s better to present them with a concrete idea. Often a sketch suffices because all the components of your idea have to be present together for someone to give real feedback.
a. Function Prototype:
i. Demonstrates how the product would function so the user can interact with it.
b. Form Prototype:
i. Demonstrates the overall “form” of the product so the user can feel and see the feasibility.
ii. Example: The original step for the Palm Pilot was toting around a block of wood to see if people would interact with the shape of the product.
c. Experience Prototype:
i. Anything that causes people to suspend disbelief.
ii. Example: Intel Health Care video crafted a believable world so people could understand how the product idea works.
d. Landing Page method:
i. See if people interact with the site and include ways for people to express their interest.
e. The 404 Test
i. Of your true customers, who would be interested enough to click on a link even if it doesn’t go anywhere? This is a way to monitor customer curiosity and interest.
f. The Concierge Method
i. “How disappointed would you be if you could no longer use this product?”
g. The “Wizard of Oz” Method
i. Fake the backend but allow people to still have the experience
Here is a useful link about prototyping in design: http://www.innovate-design.com/prototyping-process-2/
And this link goes into further depth about form, fit, and function prototypes:
http://leardon.com/form-fit-function-prototype

Low Fidelity / Interactive UI Prototypes
Designers who start with a pretty prototype often overcommit to a design before testing its individual components. Low fidelity, interactive prototyping avoids this by allowing the user to test the experience without wasted time and effort on the designer’s part. Furthermore, the lack of color and detail directs users to the components themselves and the functionality of the app. With pretty prototypes, users might be tempted to judge the product based on its aesthetic qualities.

After the designer hands the user a prototype without instructions, she can observe what they choose to do, listen to their their feedback, and quickly change components to test alternative options in real time.

An example of low fidelity prototyping: https://www.youtube.com/watch?v=yafaGNFu8Eg

Contributed by Amelia Miller, Maria McLaughlin, and Maia Suazo-Maler.

Match between System and Real World refers to the idea that a product should speak the user’s language and behave in the way a user would expect it to.
a. Gulf of Execution occurs when customers have a goal but do not know how to translate that goal into executable actions with the product.
b. Gulf of Evaluation occurs when a product gives a user information that can’t be translated into something meaningful to the user.

Here are some links:
https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gulf-of-evaluation-and-gulf-of-execution
http://openclassroom.stanford.edu/MainFolder/VideoPage.php?course=HCI&video=GulfOfExecution&speed=100

Contributed by Amelia Miller, Maria McLaughlin, and Maia Suazo-Maler.

Consistency and Standards refers to the idea that products our to be consistent with industry standards and with other versions of the the product (on different platforms, for example). Sometimes these two different types of consistency can come in conflict and designers will have to choose whether to prioritize consistency with the industry or consistency with other version of the product.

Contributed by Amelia Miller, Maria McLaughlin, and Maia Suazo-Maler.

Attribute listing is a flexible tool used to brainstorm solutions / innovations for a problem or product. The idea is to break down the subject or subjects into their component features, list the attributes of each of those features, and brainstorm by looking at individual or combinations of attributes. Thinking can happen either by examining individual features and ways to improve them or by mixing and matching different features to create innovative new designs.

In class we listed the attributes of various products designed to change the way we eat, which were brainstormed by the class, and used combinations of these attributes to come up with totally new designs. For example, one combination of attributes we had was giving a personal experience, using a crowdsourcing mechanism, and using a goggle device. One design we came up with was a goggle device that could record you cooking a particular dish and put it online so that people could share recipes.

Here is a helpful link on the subject: http://business-survival-toolkit.co.uk/stage-three/creative-problem-solving/attribute-listing

The use of affinity diagrams in your interpretation sessions aims to help you to develop insights. By organizing and categorizing the evidence you collected, you can uncover the needs, frustrations and values of your informants, guided by actual observations rather than by your prior assumptions. Here are a few tips for using this methodology effectively:

1. Before the affinity diagram -- the raw data: Your insights will always be limited by the data you collected, so there is really no substitution to having good raw data. Gather as many observations and you can, and clearly describe each observation on a note. Observations should be concise (e.g., “tried to get into a lecture but got kicked out”, but not too concise (e.g., “lecture”). For each observation, also record basic information about the informant who generated it (e.g.  “tried to get into a lecture but got kicked out” [20 y/o student from Brazil]). If you have certain demographic groups you can also consider using different colors of post-its/sharpies to indicate different groups.
2. Categorization -- what is a good category? Reflect on your observations, and try to group them by the underlying needs, frustrations and values that they uncover, rather than by activity or general topic. For example, “want to engage in Harvard student life” is a good category because it describes a desire of your informants; “photos” is not a useful category because it doesn’t tell us much about the what our informants care about. Different observations related to tourists taking photos might reveal very different underlying values/needs/frustrations: the observation “tourist took a picture of a lecture” might suggest that the tourist was curious about student life at Harvard and/or that it’s important for them to document their experiences, while the observation “took a picture of the sign by the John Harvard sculpture and read the information on his phone” might suggest that the person was interested in learning about the history of Harvard, and perhaps also that the location of the sign was uncomfortable for reading or was crowded. (Remember, you’ll know what’s the right interpretation only by asking “why?” a lot...). If you come up with good categories, you essentially have your insights.
3. Categorization -- how to find categories: Coming up with good categories is non-trivial and typically requires an iterative process. When reading an observation you might want to recall more about the context (which was maybe not entirely documented on the post-it), you can try to look back in your notes and expand the observation. Generally, a single observation might relate to more than one value/need/frustration. Therefore, it is a good idea to try out multiple categorizations (for example, observations #1, #3 and #5 might reveal one need, but observation #1 together with #8 and #10 might reveal another frustration). Of course, every time you think you have a good category, document it before you take it apart… If you get stuck, you can try to pick an observation at random and see if anything else relates to it in some way (or pick a group at random and see if a subset fits in some interesting way). Also take breaks, incubation can be helpful and starting fresh can help you get “unstuck”.

Divergent Thinking is a key part of the creative design process by which we think about all possible ideas. This step requires and builds upon "creativity-relevant skills." where we ask, "What are the possible dimensions?" The purpose of divergent thinking is to search the solution space for possibilities and includes 2 models (Model 1: Exploratory Creativity and Model 2: Transformational Creativity)

For more on divergent thinking: http://www.cleverism.com/idea-generation-divergent-vs-convergent-thinking/

Contributed by Joan Zhang

Visibility of System Status is a basic principle of design centered on the question "Can people tell what the system is doing?" In class, we looked at the example of a washing machine and ways for the user to tell if the cycle was complete. Ultimately, the product added a simple LED light that visually shows users whether the cycle is complete or not.

"The system should always keep users informed about what is going on, through appropriate feedback within reasonable time."

In the context of creative idea generation, design fixation is a phenomenon wherein an idea becomes implanted in the mind of the designer, such that he/she struggles to ideate other designs. Often, one tends to become fixated on ideas associated with his/her relevant long-term memories, or ideas informed by recent experiences. During lecture, we saw how design fixation can be caused by giving the designer a set of very similar example solutions for a certain problem. We also saw design fixation pop up as a result of subliminal messaging (watch the video again here).

To learn more about design fixation, check out the following:
“What Is ‘Design Fixation’ and How Can You Stop It?”
“A Three-Pronged Approach to Overcoming Design Fixation”

In the context of needfinding, hacks refer to situations where an informant repurposes something designed for one purpose to satisfy a very different need.  For example, using a screen of a phone as a source of light or using a phone book as a foot rest.

We saw in class how hard it is to expect the unexpected. Watching out for hacks and workarounds is an effective way to focus your attention during needfinding.  In the words of Don Norman (a leading design theorist):

"I am not a fan of undirected, explorative ethnography. This is an excellent procedure for developing our scientific understanding of human behavior, but it is too diffuse for practical application. I prefer directed observation: search out the workarounds, hacks, and clever improvisations of everyday life. That's where the answers lie: someone else has already encountered the need, someone else has already hinted at a solution."

Read more: "Workarounds - Leading Edge of Innovation" by Don Norman, Communications of the ACM, volume 15, issue 4, 2008.

You can prevent errors by constraining what a person can do with a user interface such that only valid actions are possible.  For example, if you need someone to enter a valid credit card expiration date, you can use a pull down menu that only lists a small number of valid years.  If, instead, you used a text field, who knows what the user might enter?

One of the original 10 Usability Heuristics for User Interface Design by Jakob Nielsen, error prevention is probably the most important design principle for everyday interactive systems.  Better than tutorials or awesome error messages, your system should make it very unlikely that the user will ever commit an "error".

Here's a recent article on Preventing User Errors from the Nielsen Norman Group.