Design Concepts

Mixed Initiative Interaction

A situation with a mixed initiative interaction is one in which the machine can initiate an interaction, but the user can also choose to initiate the interaction. For example, Luminere had the ability to suggest help without being prompted but the user could still have the same interaction by accessing the Help tab. Another example is Google Calendar as it can automatically add events by scraping emails but the user can also add events manually in their calendar sites.

Prevalence Effect

In situations where people are expected to be aware and recognize an event that doesn’t occur very often, then often people will struggle to recognize the event. This is can be a problem in cases like TSA security checks; the TSA officer has to be vigilant in order to identify dangerous objects in people’s luggage, but as most luggage does not contain these objects it can be easy for the prevalence effect to occur and for the officer to miss dangerous objects when they do show up. The TSA combats this by regularly planting fake images of guns and then informing the officer that it was just a test when they identify them.

3/8: Personas

Personas refer to “archetypes” created by designers as a way to synthesize one’s observed data. There a numerous subconscious assumptions the different people on design teams may have. Focusing possible assumptions into a “proto-persona” (stereotype) or creating a “persona’ (from observation) can reveal to a team the choices a user might make based on the embodied characteristics in the persona. By revealing shortcomings and potential user choices, personas can serve as a way to focus and justify a design, as well as help keep a team on the same page throughout the design process.

Some important aspects to include in a persona: activities - what the user does and with what frequency, volume, etc.; goals, hopes, aspirations - what motivates the user with respect to the product domains; needs and frustrations - what gets in the user’s way with respect to their needs and aspirations; constraints - what restricts the user; skills and confidence - what the user is good at.

Contributed by Phillip Huang, Kemi Akenzua, and Nik Boström


Handicap is a general term for restrictions that cause difficulty for certain groups or communities of people. These restrictions hinder the user experience for these groups and causes a disparity between themselves and groups without the handicap. This is in contrast to a disability, which completely prohibits participation in an activity. The concept of a handicap gives rise to the design principle of having not only an accessible experience, but an equitable experience for all users.

There are many examples of handicaps we encounter each day. At MIT for example, people in wheelchairs must take a longer route and use an elevator to enter a building that people without this handicap do not need to do. In a Radcliffe building, there is a wheelchair ramp next to the stairs for people with and without wheelchairs to use. The latter is equitable.

Contributed by Phillip Huang, Kemi Akenzua, and Nik Boström

3/27 Lecture

An Example to kick off class:

In the lecture, we looked at a device that can be used to make songs. It creates music. There are two sliders on the screen. The user can change the metrics. He or she can change the jazz factor and the happy factor. The design choice reflected the complexity of the underlying model. This example shows that the gulf of evaluation and the gulf of execution must be met. → This system did a good job of managing gulf of execution.

Human Motor Performance on Basic Input Tasks:

Next, in class, we completed an experiment using our laptops. Macs and PCs have different screen sizes. We viewed a model for a Mac screen and a model for a PC screen. We had to move the mouse across the screen. We had to move it horizontally. The results for the class were that the people in the PC condition took longer than the people in the Mac condition. The people in the PC condition took 865 milliseconds while the people in the Mac condition took 777 milliseconds. → Takes longer on PC because of the tendency to overshoot.

Index of Difficulty:

Fitts’ law connects the index of difficulty and the movement time. It is a function of both distance to travel and target size.  log₂(D/W) represents the index of difficulty, in bits. D represents the width of the screen. W represents the width of a menu. There is a linear relationship between the index of difficulty and time. The movement time, in seconds, is equal to a+b*log₂(D/W).

The mouse was introduced 50 years ago and we are still using it. Interestingly, the mouse adds no extra noise to pointing, nor does it decrease efficiency, compared to the bare hand. This helps make the mouse the optimal input device for pointing. The ability of humans to transmit information through the neural motor system is 10.53 bits/second. Uniformly scaling everything does not make it more efficient.

Morphing Menus:

One way to adjust menus is to change the size of various items depending on the frequency with which they are clicked. Items clicked more frequently will appear larger than items clicked less frequently. This makes it different from a static menu.

Another type of menu is a frequency-based menu. This menu has ordering based on frequency. More frequently clicked items will appear higher in the menu than other items.

Size of the cursor:

There may always be exactly one target in the bounds of a cursor. If you grow all of the buttons in the visual space, everything stays the same but in the clickable space everything is much larger → changes clickable space, not visual space.

Motor Performance versus Age:

Fine motor control peaks in the late teens, then slowly decreases. Strength peaks in the 30s, then decreases. Errors decrease as age increases. As we age, we end up choosing strategies that favor accuracy over speed.

Contributed by Dhruv Suri, Mason Hale, and Nicki Adler 


Discoverability in design refers to the users’ ability to find key information, services, or applications. The quality allows users to locate something they need in order to complete a certain task. It is often referred to what is noticeable to users on a particular web page and can be a challenge in design because it can be difficult to prioritize, as not everything can be equally visible.
Discoverability can be achieved in a number of ways. These include changing the size, order, design elements (like color, font, shadow etc.), flow, and consistency of elements on a webpage.

Equiluminant Color Schemes


Each color has two components: hue and luminance. Equiluminant colors differ in hue, but not in brightness. However, when foreground and background colors are equiluminant, the content of the image is hard to perceive. Take for example:

Why does this happen? The two colors pink and green are obviously different. This is become the human brain has two separate pathways in the visual system. One system is colorblind and just processes the luminance information. The other system processes hue information. It is important to keep equiluminant color schemes in mind as it would be a bad idea to use equiluminant color schemes for road signs or presentation slides.

Contributed by Janet Ho and Maurice Wilson

... This has implications for memorable design: if we want to create visual designs that are easy and fast to process, equiluminant designs are not a good choice; but on the flip side, if people choose to go through the effort of processing perceptually difficult, equiluminant designs, they are more likely to remember it due to the increased amount of time interacting with it.

Contributed by Luke Xu, Elena Wu-Yan, and Manasi Maheshwari

Attention Capture

Attention capture is something that captures our attention even when we have no intention of it. For a long time, people thought pop out was what resulted in attention capture. People thought motion, color, and other features would work with attention capture. But, as we saw with the garish early-2000s ads, these are reliably ignorable. It turns out that only two methods really work: (1) an abrupt and extreme change in luminescence and (2) the sudden onset of a new perceptual element, like a tiger coming out of the forest.

Contributed by Luke Xu, Elena Wu-Yan, and Manasi Maheshwari

Visual Pop-Out

Visual pop-out is what it sounds like: visuals that pop out at you. Generally, effective pop out methods are hue, luminescence, shape/form, and contrast. This doesn’t work in every situation, though. The brain processes visual info in a set of stages, with separate pathways for high level learning. Movement, color differences, shape/form are thus all processed independently. In practical application, pop-out seems only to work if users know what they are looking for.

Contributed by Luke Xu, Elena Wu-Yan, and Manasi Maheshwari

Hick Hyman Law

The idea behind the Hick Hyman Law is that the time it takes to make a decision is logarithmic in the number of choices we have such that, given n equally probably choices, the average time T required to choose among them is approximately T = a + b log_2(n).

Contributed by Luke Xu, Elena Wu-Yan, and Manasi Maheshwari


Constraints make sure users not make mistakes by simply limiting the range of fields users are allowed to do. It helps users to manipulate the system efficiently. For example, for entering a date, an  interface can have set dates that users can choose from instead of inputting things themselves, which can have high user error. Another example is constraining how users fill out credit card information.

Image result for date picker

Image result for date pickerImage result for credit card validate


Contributed by Jason Thong, Xiao Zhang, and Deedee Jiang 


Metaphors make use of the existing knowledge from the way people did things prior to accomplish things in a new environment. The idea is to use metaphors to reuse prior knowledge. For example, the computer telephone. Knowing how to use phone will quickly understand how to use it. On the one hand, using smart phone helps people understand how to use the computer phone the first time, on the other hand, we are sacrifice a lot of efficiency. Another example is a trash can. Whether the trash can is permanently cleaned up is a metaphor.

Image result for mac trash an

It has been found that the aspects of a system that match the metaphor are learned quickly, but those that don’t take a lot longer. It can be a double edged sword (ex. typewriter vs word processor). All the situations where there's a mismatch between original task and new task are very difficult to pick up with many misconceptions.

Image result for mac cd eject


Contributed by Jason Thong, Xiao Zhang, and Deedee Jiang 

Immediate Feedback

Immediate feedback exposes the underlying cause-and-effect relationships so they are easy to learn. When feedback is delayed, the connection between action and result is diffused. The user can’t be sure if the result happened because of a button click or a menu item they selected. This uncertainty leads to confusion and misunderstandings. The user can’t build their understanding of the system because they can’t be sure of what caused the system to react.[1] Immediate feedback allows the behavior of the UI to become apparent and learning becomes easy. Longer breaks between your action and response makes discovery and learning become harder. If it becomes too long, task flow becomes interrupted and we are more likely to switch to different task and lose momentum. We become uncertain if something is completed successfully and we may view it as two different events. If a system is able to respond under 100ms, people will automatically associate causal relationship. Under half a second, users will identify it as slow. Over half a second, the user becomes annoyed. Rapid incremental reversible operations whose impact on the object of interest is immediately visible.




Contributed by Jason Thong, Xiao Zhang, and Deedee Jiang 

Recognition rather than Recall

Recognition rather than recall refers to the idea that users should not have to remember information from one part of the action to another. This is the reduce the user's memory load by making objects, actions, and options visible. Instructions for use of the system should be visible or easily retrievable whenever appropriate.[1] For example, when printing a photo, it is better to recognize the symbol to print a photo in an interface, rather than recall commands in the command line.

Image result for recognition and recall




Contributed by Jason Thong, Xiao Zhang, and Deedee Jiang 

Temptation Bundling

The practice of wrapping something undesirable with something desirable, e.g. reward of listening to audiobook is bundled with the task of going to the gym. In a study measuring the effect of temptation binding ("Holding the Hunger Games Hostage"), participants who were forcible locked out of their audiobooks except when at the gym showed the most responsible behavior and frequented the gym often over the next few weeks. This serves as evidence of pre-commitment. It is a form of motivation in which a user is motivated and there exists a balance between the amount they do not want to do something and the amount they do want to do something else.

Contributed by Kahului Foster and Waverley He


Affordance - a concept originally developed by psychologist James Gibson to make an argument about perception and how humans act on something independently from the perceived physical attributes of that thing. Don Norman adopted this concept into the design world. Describes the aesthetic properties of an object that communicate what you can do with that object. Affordance is relative based on one's ability and experience, e.g. a chair affords sitting on it by adults, but not by children. e.g. an Apple CD reader has a slot of certain width, thickness, and shape that affords our understanding of how to use it. e.g. in Word 1989, affordance is literal - that is, buttons are 3D in order to indicate which parts of the interface are clickable. The current Word interface is more subtle - buttons are no longer outlined because the program is no longer designed for first time users. It is important to make sure that manipulatable parts of one's design come across as such to the user and that their purpose is clear.

imageimage (1)

Contributed by Kahului Foster and Waverley He

Faceted Browsing

Faceted browsing is a method of accessing organized information. Users receive an initial set of results, with a number of different facets and they can choose which ones are relevant to them. Results update immediately without having to do new search. In other words, multiple filters can be applied to access and organize information. Sometimes referred to as guided navigation, faceted search and navigation uses certain product metadata as visible criteria visitors can use to refine their search queries and category listings.[1] The example below shows an interface that utilizes faceted browsing.

Image result for faceted browsing



Contributed by Jason Thong, Xiao Zhang, and Deedee Jiang

Visibility of System Status

Often, it is unclear whether something is done, working, or broken. These can result in a gulf of evaluation, a previous concept which indicates that the user does not know what the state of the interface is.

A solution to that problem is the concept of Visibility of System Status: a design should make clear the progress being made towards the user’s goal. This concept was initially introduced in 1995 by Jakob Nielsen, who wrote “the system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”1

It is a simple idea to understand and empathize with, but many times designers fail to keep it in mind. Below, we see the progression of a dishwasher which initially did not follow this concept by forcing the user to open the dishwasher to see any information about the progress of a cycle; realizing its mistake, the manufacturer added a light on the outside which changes color depending on the machine’s state.

Contributed by Manav Khandelwal, Krystian Jurkowski, and Siqi Liu.

Attribute Listing

In class, we talked about a method that allows the generation of new and creative ideas through a unique method known as attribute listing. One first goes through a brainstorming process with a specific problem topic in mind, trying to come up with a variety of ideas in a short amount of time. Afterwards, you collect the most unique ideas that don’t overlap, combining with other similar ideas when necessary. With this list of unique ideas, the goal of attribute listing is to take this list and expand on it to further generate new ideas. One takes this list and looks at it from afar, thinking of categories that the list holds, such as tech, methods, and so on. After finding a few categories from the list, you categorize specific terms from the ideas in the list into the categories. Then one can go through and pick a number at random for each of the categories, and for each respective number, go down a category and choose that word in that numbered spot. With these chosen words, you go ahead and ideate again using the combination of the chosen words, and keep repeating the number at random process. This process is very useful for generating new ideas when one is stuck after brainstorming, and was mentioned in class as a magic trick for idea generation.

For example, in class we described our problem as Eating Healthy Food. Everyone in the class took 5 minutes to brainstorm solutions using technology to try to help individuals eat more healthy types of food. After 5 minutes, we gathered all combinations of unique ideas from the class and wrote them into our Food Ideas List. From there we thought of three categories (Tech, Mech, and When) and then took words from the list that fit under the specific categories, like below:

Tech: App, Chrome ext., AR, wearables, location services, smart cookware

Mech: Automate, discourage, rewards, aspiration, info encouragement, social media, instructions

When: Buying ingredients, after meal, during/just before meal

We then picked random numbers and ended up with the combination AR - Info - Buying Ingredients, and went into idea generation for this combination, and repeated the process.

Contributed by Krystian Jurkowski, Siqi Liu, and Manav Khandelwal.

Design Fixation

In layman’s terms, we might call design fixation experiencing tunnel vision or getting set in our ways [1]. This is especially critical during the initial ideation process or if we’re at an impasse—if the idea that we expose ourselves to is a mundane one, we run the risk of getting “stuck” and only generating mundane, mainstream concepts. In order to prevent design fixation, design teams may actively pursue divergent thinking.



Contributed by Tiff Yu, Michelle Chiang, and Joy Li

Divergent Thinking

Divergent thinking is a critical part of the creative design process during which we generate a large number of different ideas, such that we are able to get a better sense of the boundaries of the solution space we’re working with.

This differs from convergent thinking, which requires an understanding of the domain in which we’re working.

Contributed by Tiff Yu, Michelle Chiang, and Joy Li

Consistency and Standards

Consistency and Standards is the idea that products should be 1.) consistent with industry standards and 2.) with other versions of 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. 

Consistency and Standards helps to reduce learning and confusion in user design. Consistency helps to limit the number of actions or operations that are represented across designs; thus, users, do not have to learn new representations or are already familiar with them when performing a task. 

An example of inconsistent design includes two types of bathroom. The first has two levers which control hot and cold, while the second has two levers which control volume and temperature. Another example of inconsistent design can be seen in the Google Plus platform. As a social media platform, you expect it to be consistent with apps like Facebook or Twitter which feature an account settings toggle on the top left corner. However, for Google Plus, the button lies on the lower right circle. 

Contributed by Samuel Lam, Matthew Li, and Michael Bervell

Gulf of Evaluation


  • Motivation:  Does the system provide a physical representation that users can directly perceive and interpret?
  • Definition:  Whether the goal of the user has been achieved as a result of their interaction with the system.  According to Don Norman’s book The Design of Everyday Things, The Gulf of Evaluation reflects the amount of effort that the person must exert to interpret the physical state of the system and to determine how well the expectations and intentions have been met” (58).  Normal argues that this gulf is small when the system provides information about its state in an accessible and easily interpretable manner, which corresponds to the way in which users perceive the system.
  • Result:  Users cannot easily and efficiently accomplish their intended tasks, and they may become frustrated and blame themselves.
  • Example:  There is also a problem with the Gulf of Evaluation in our refrigerator example [1].  Even when the refrigerator was correctly set to its lowest temperature, users would have difficulty interpreting whether the setting was correct.

[1] Professor Gajos, COMPSCI 179 Lecture (02/08/2018)

Contributed by Michelle Vaccaro and Auriel Wright

Gulf of Execution


  • Motivation:  Does the system provide actions that correspond to the intentions of the person?
  • Definition:  According to Don Norman’s book The Design of Everyday Things, “The difference between the intentions and the allowable actions is the Gulf of Execution” (51).  Norman argues that we can measure this gulf by assessing how well a system allows users to perform their intended actions directly, without extra effort.  That is, do the actions provided by the system correspond to those intended by the users?
  • Result:  Users cannot easily and efficiently accomplish their intended tasks, and they may become frustrated and blame themselves.
  • Examples:  As discussed in lecture, consider a user who would like to adjust the temperature of the refrigerator pictured above [1].  Ideally, this task would be easy and intuitive.  But in this product, it is unclear what combinations of knobs must be adjusted to achieve the intention of lowering the temperature of the freezer.  Therefore, there is a problem with the Gulf of Execution in this refrigerator.

[1] Professor Gajos, COMPSCI 179 Lecture (02/08/2018)

Contributed by Michelle Vaccaro and Auriel Wright



  • Definition:  Basic mechanism through which we make artificial intelligence systems predictable and controllable [1].
  • Importance:  Increasingly prevalent given the increasing complexity and deployment of AI technologies in fields such as healthcare, education, and criminal justice.
  • Examples:  Google attachment reminder.

[1] Professor Gajos, COMPSCI 179 Lecture (02/08/2018)

Contributed by Michelle Vaccaro and Auriel Wright

Psychological Safety

According to Amy Edmondson, psychological safety is the "shared belief held by members of a team that the team is safe for interpersonal risk-taking". Edmondson makes the claim that team performance is affected by a team's psychological safety and efficacy rather than the specific team type. She proposes the following model [1]: 


If a team is committed to psychological safety, Edmondson suggests that this will be reflected in the team's actions. Teams should actively seek feedback and have open discussions with both their audience and within themselves.

What does this actually look like in practice? There are many ways, including but not limited to the following:

  1. As Professor Gajos suggested, team members should start small by constantly adding new ideas and challenging each other. [2]
  2. Teams should start committing to this philosophy early. [3]

Great things will happen when psychological safety is prioritized in a team. While it seems obvious, this concept can often get obscured by increasing conflict and progress on a project. Thus, it's important to keep at the forefront of our minds.


[1] Amy Edmondson, Psychological Safety and Learning Behavior in Work Teams

[2] Professor Gajos, COMPSCI 179 Lecture (02/01/2018)


Contributed by Allison Lee, Megan Ross, and Justin Hunter

Redundant Cues

While the difference between red and green is blaring to most of us, it is imperative in good design to think about users who aren't like us-- say, users with color vision deficiencies. This is where redundant cues come in, a specific method for adding accessibility to a product.

Redundant cues give a user multiple ways to take in information and therefore make a design intuitive and easy to use for a more inclusive audience. Especially because color blindness affects 1 in 12 men (8%) and 1 in 200 women (0.5%) in the world, reinforcing cues with something other than color is very important [1]. Examples of redundant cues include the old Apple chat interface (as shown in class) [2]:




[2] Dictionary of Design Concepts by Krzysztof Gajos

Contributed by Allison Lee, Megan Ross, and Justin Hunter


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."

Further reading

Error Prevention

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".

Further reading