Design

Front 1

What distinguishes a good UI?

Back 1

It communicates with the user in a non-interruptive way.

It gives good feedback, and utilizes pliancy.

Gives feedback immediately after an action has been performed.

Front 2

Antropomorphism

Back 2

The attributing of human characteristics and purposes to things, i.e. elements in a GUI.

Front 3

Pliancy

Back 3

Indicate that an on-screen element can be clicked or otherwise interacted with.

Every object that can be interacted with has pliancy.

Front 4

Static Object Hinting

Back 4

The pliancy of an object is communicated by the staticrendering of the object itself.

Front 5

Dynamic Visual Hinting

Back 5

When the cursor passes over a pliantobject, it changes its appearance.

Front 6

Modal Feedback

Back 6

Initiates a new state, i.e. popup. Avoid at all costs!

Front 7

Modeless feedback

Back 7

Indicates a change without interrupting the user. Always preferable over modal feedback.

Front 8

Flow

Back 8

Being able to focus wholeheartedly on an activity.

An extremely productive state where one easily loses track of time and other distractions fall away. One can remain engaged for hours.

Front 9

Mental Model vs. Implementation Model vs. Represented Model

Back 9

Mental Model: How the user thinks about the program, and how he/she expects it to function.

Implementation Model: The representation of how a machine or program actually works, i.e. the way data is stored.

Represented Model: The way thedesigner chooses to represent a program’s functioning to the user.

Strive to get as close as possible to the user's mental model!

Front 10

Name a few ways to strengthen flow?

Back 10

Utilize direct manipulation. On the same token, try to avoid exact configurations. For instance, letting someone drag to resize is preferable to having them type in exact dimensions every time.

Use as few steps as possible to achieve a task.

Avoid unnecessary choices; use reasonable defaults instead.

Avoid unnecessary dialog boxes.

Separate an actual functionality from its configuration.

Keep in mind: There is a big difference in what users can do and what they actually do.

Design for the most common actions/choices.

Front 11

What is excise?

Back 11

Interactions that have nothing to do with achieving one's goal, but still has to be carried out.

Visual Excise: Work that the user has to do to decode visual information. Could be finding a single item in a list, figuring out where to begin reading in a page, etc.

Necessary excise: Navigation between pages/views. Can be simplified by:

* Overviews.

*Signposts/breadcrumbs.

*Avoiding deep hierarchies.

Front 12

What are Design Patterns?

Back 12

Structural and behavioral features that improve the habitability of something.

In other words, a suggested solution to a problem. Not that they are not general in the sense that they should not always be applied. One has to discern whether or not using them is validated.

They are:

*Concrete, not general.

*Valid across different platforms and systems.

*Products, not processes. They are possible solutions.

*Suggestions, not requirements.

Customized to each design context.

Front 13

What's a signpost?

Back 13

A point of reference.

Front 14

What does inflecting an interface mean?

Back 14

Organizing it to minimize typical navigation.

Place the most frequently desired functions in the most immediate and convenient locations.

Rarely used functions should be removed from the everyday workspace.

Front 15

Name a few ways to gather information about users?

Back 15

Direct observation: Interviews and onsite user visits.

Surveys: Can collect information from many users.

Front 16

What is a persona?

Back 16

A way of thinking and communicating about how users behave, how they think, what they wish to accomplish, and why.

A persona models the target audience. For each major user group, create a fictional person that captures the most important aspects of the users in that group.

Front 17

What is Safe Exploration?

Back 17

When someone feels they can explore an interface without consequences, like annoying popups etc.

Front 18

What is Instant Gratification?

Back 18

"I want to accomplish something now, not later!". Don't hide introductory functionality that needs to be read or waited for such as registrations or long sets of instructions.

Front 19

What is Satisficing?

Back 19

Making it easier for new users to get accustomed to the UI.

Use calls to action in the interface. Give directions on what to do first: "Type here", "Drag an image here", etc.

Front 20

What is Deferred Choices?

Back 20

"I don't want to answer that now, just let me finish!"

Don't accost users with too many upfront choices.

Clearly mark required fields, let users move on without answering optional ones.

Separate important questions from less important ones.

Front 21

What isHabituation?

Back 21

Consistency within a UI. This is very important.

"That gesture works everywhere else, why doesn't it work here, too?"

Front 22

What is Spatial Memory?

Back 22

We remember where things are. Don't run around changing the position of things within your UI!

"I swear that button was here a minute ago! Where did it go?"

Front 23

What is Feature, search and Browse?

Back 23

Three elements on the main page of the site or app:

1. A featured article or product,

2. A search box,

3. A list of items or categories that can be traversed.

Why?

Searching and browsing goes hand in hand as two ways of finding desired items. Features items are useful to help hook the user.

Front 24

What is Canvas Plus Palette?

Back 24

Place an iconic palette next to a blank canvas. Palette buttons make things go wild on the canvas!

Front 25

What is a Wizard?

Back 25

A way to lead the user through the interface step by step to perform tasks in a prescribed order.

When? Designing a task that is novel (rarely done) for users.

Why? Divide and conquer. By splitting up a task, you effectively simplify it.

Front 26

What is Alternate Views?

Back 26

Let the user choose from alternative views that are substantially different from the default view.

Think arranging pictures: just list vs. seeing the actual images.

Front 27

What is Many Workspaces?

Back 27

Using multiple top-level tabs, tab groups, and/or windows, so that users can view more than one page, project, file or context simultaneously.

Front 28

What is Multi-Level Help?

Back 28

Using a mixture of light- and heavyweight help techniques to support users with varying needs.

Front 29

Describe Button Groups.

Back 29

Present related actions as a small clutter of buttons, aligned and with similar graphic treatment.

The primary action (if any) should receive a stronger graphical treatment.

Front 30

Describe Hover Tools.

Back 30

Place buttons and other items next to the items they act upon, but hide them until the user hovers the pointer over them.

Front 31

Describe Action Panel.

Back 31

Instead of using menus, present a group of related actions on a UI panel that's organized and always visible.

Front 32

What is Prominent Done Button?

Back 32

Place the button that finishes a transaction at the end of the visual flow. Make it big and well labeled!

Front 33

What is Progress Indicator?

Back 33

Show the user how much progress has been made so far on a time-consuming operation.

Front 34

What are Signposts?

Back 34

Features that help users figure out their immediate surroundings.

I.e. page and window titles, page logos, tabs, selection indicators.

Front 35

What are Clear Entry Points?

Back 35

Shows the user where to go first.

Front 36

What is an Escape Hatch?

Back 36

Well-labeled link to get back to a known place in the UI.

Front 37

What is The Design Framework?

Back 37

Defines overall structure of the user experience. This is not a point where you worry about precise matters. No pixel-pushing here, just the big picture!

Front 38

What is a Key Path Scenario?

Back 38

An ideal sequence of user behaviors used for testing.

Front 39

What are Validation Scenarios?

Back 39

Scenarios that are less likely to occur. "Less important interaction"-testing. Try to poke holes in the design and adjust as necessary.

Front 40

What is a Ribbon?

Back 40

An element that combines menus and toolbars into a single unified structure.

Front 41

What is a Butcon?

Back 41

An icon that serves as a button.

Front 42

Which are the four Gestalt Principles?

Back 42

Proximity: How close things are to each other.

Similarity: Elements might share the same size, shape or color.

Closure: Group things together into simple forms. We like seeing these simple closed forms, such as rectangles and blobs of whitespace.

Continuity: Our eyes want to see continuous lines and curves formed by the alignment of smallerelements.

Front 43

What is Visual Framework?

Back 43

Design each page to have the same basic layout, colors, and stylistic elements.

Front 44

What is Center Stage?

Back 44

Put the most important part of the UI into the largest subsection of the window.

Front 45

What is Grid of Equals?

Back 45

Arrange content items of similar style and importance into a grid.

Front 46

Describe Titled Sections.

Back 46

Define separate sections of content by giving each one a visually strong title & separating the sections visually.

Front 47

Describe Module Tabs.

Back 47

One module visible at a time.

When? When you have lots of heterogeneous content.

Front 48

Describe Collapsible Panels.

Back 48

Place optional material in panels that can be opened and closed by the user.

Front 49

What is Responsive Disclosure?

Back 49

Start with minimal UI, guide user through series of steps by showing more of the UI as he/she completes each step.

Front 50

What is Responsive Enabling?

Back 50

Start with mostly disabled UI, end with fully enabled, enabling more and more as user fills in data.

Front 51

What is Liquid Layout?

Back 51

Resizing the page content to constantly have a filled page.

Front 52

What is Forgiving Format?

Back 52

Permit users to enter text in a variety of formats and syntax, and make the application interpret it intelligently.

Front 53

What is Structured Format?

Back 53

Set of text fields that reflect the structure of the requested data.

! Only use when users have no reason to deviate from the format.

Front 54

Describe Fill-in-The-Blanks.

Back 54

Construct phrases using controls in the text.

Front 55

What are Input Hints?

Back 55

Small text below a control, specifying what can be done with it.

I.e. "Your full name will appear on your public profile", under a text field that asks for your name.

Front 56

Explain List Builder.

Back 56

Show both the source and the destination lists on the same page. Let the user move items between them, via buttons or drag-and-drop.

Front 57

What are Same-Page-Error-Messages?

Back 57

Place the error message on the same page, close to the control that prompted it. (Maybe also at the top of the page).

Front 58

Describe Two-Panel Selector.

Back 58

Two side-by-side panels on the interface. First one holds list of items, second one shows content of selected item.

Front 59

Describe One-Window Drilldown.

Back 59

Show a list of items in a single window. When the user selects an item from the list, show the details or contents of that items in the window, replacing the list.

Front 60

Describe List Inlay.

Back 60

Show item details in the actual list. Allow items to be opened/closed independently from each other.

Front 61

Describe Thumbnail Grid.

Back 61

Put list of visually interesting items into a small "multiples" grid of thumbnail images.

Front 62

What is Pagination?

Back 62

Break up a very long list into pages, and load them one at a time. Provide controls to navigate. Next, previous, first, and last pages.

Front 63

Describe Overview Plus Detail.

Back 63

Overview of the graphic next to a zoomed "detail view".

Why? Deals with complexity. Micro reading/Macro reading. Also, the overview can serve as a "you are here" sign.

Front 64

What is Affect?

Back 64

The user's emotional response.

Front 65

What is Deep Background?

Back 65

Image or gradient on the page's background that visually recedes behind the foreground content.

Front 66

Explain Few Hues, Many Values.

Back 66

Choose at most three major color hues for usage in the interface. Create color palette by using tints/shades of these major colors.

Front 67

Explain Corner Treatments.

Back 67

Use curves or diagonals for some of the interface's box corners.

Front 68

What are Borders that Echo Fonts?

Back 68

When drawing borders and other lines, use the same color, thickness, and curves used by one of the design's major fonts.

Front 69

What defines the "shape" (where things go, etc) of a GUI?

Back 69

The grouping of elements.

Balance (think the line of balance through the scene).

Grid & alignment.

Front 70

What are breadcrumbs?

Back 70

Displaying the whole hierarchical path back to the main page.

Front 71

What is Illustrated Choices?

Back 71

Using pictures instead of text to describe available choices.

Front 72

Describe Shneidermans Golden Rules (there are 8).

Back 72

http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

Front 73

Describe Jakob Nielsen's usability heuristics (there are 10).

Back 73

https://www.nngroup.com/articles/ten-usability-heuristics/

Front 74

What are preattentive variables, and which ones are there?

Back 74

Visual features which operate preattentively: they convey information before the viewerpays conscious attention.

Front 75

Describe a typical Interaction Design Process and exemplify activities that are included in this process.

Back 75

Determine needs and demands (Build personas).

Then, loop this until happy:

Develop different conceptual designs through storyboards & sketching (Based on varying personas)

Build interactive prototypes for communication and analysis.

Evaluate the design based on the prototypes.

Front 76

Name five things to think of when trying to minimize excise.

Back 76

Never force the user into a different window to change things in the current window.

Don't force the user to remember where in the file system something is saved.

Don't force the user to resize the window unnecessarily.

Don't let the actions of a user lead to errors.

Don't force a user to repeat his/her personal settings.

Front 77

Name as many General guidelines as you know (there are 15).

Back 77

1. Follow users’ mental models.

2. Less is more.

3. Enable users to direct, don’t force them to discuss.

4. Keep tools close at hand.

5. Provide modeless feedback.

6. Design for the probable; provide for the possible.

7. Provide comparisons.

8. Provide direct manipulation and graphical input.

9. Avoid unnecessary reporting.

10. Reflect object and application status.

11. Avoid blank slates.

12. Differentiate between command andconfiguration.

13. Provide choices.

14. Hide ejector seat levers.

15. Optimize for responsiveness; accomodateLatency

Front 78

Explain Cognitive walkthrough.

Back 78

The cognitive walkthrough is a usability evaluation method in which one or more evaluators work through a series of tasks and ask a set of questions from the perspective of the user.

The focus of the cognitive walkthrough is on understanding the system's learnability for new or infrequent users.