UX Design Flashcards

1
Q

In UX, what does it mean when something is considered usable?

A

If something is usable it means a person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

When and how often should you conduct user research?

A

Early and often

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

When is subjective information useful?

A

As a general rule, more people makes more reliable information. Even it its objectively false, it’s still a good representation of the crowds beliefs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are four different ways to conduct subjective research?

A

Interviews
Observation
Surveys
Google

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

In UX, what is a persona?

A

A persona is a representation of a type of customer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What does a persona describe to us?

A

goals,
expectations,
motivations,
and behaviour of real people.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is a user story?

A

A sequence of user choices that helps list the features and functions the website/app should have.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why is mobile first design a solid strategy?

A

If you design for the smallest, least powerful device first, then you will focus on the content, and your core functionality. That leads to simple, beautiful apps.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are design patterns and why should you use them?

A

Design patterns are commonly-used interface controls.

Most people have seen the design pattern before and as a result will not have to relearn anything.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is visual weight?

A

Visual weight is essentially things that look “heavier” than others in a layout. They draw your attention more easily.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why is adding visual weight important?

A

By adding visual “weight” to certain parts of your design, you increase the chance that a user will see them and you change where their eyes will go next.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are three ways to add visual weight?

A

Contrast
Depth
Size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How does size and depth add visual weight to our designs?

A

We notice things that are close to us and in the digital word, bigger things are perceived to be closer.

If you use blur effects or shadows it just makes the perception of depth more realistic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

When should you add color to your UX designs? List some example cases.

A

When they convey functionality

You would use red on buttons to convey caution, such as cancel or delete.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

If a navigation menu has a horizontal pattern, which links would expect to receive the most clicks?

A

It would be expected that more people would click the options on the left than on the right.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

If a navigation menu has a horizontal pattern but an element breaks that pattern, what item will receive the most clicks? Why?

A

We can expect that the item that broke the pattern will receive the most clicks because it’s the first thing we notice.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is line tension and why is it important?

A

Line tension is the perception of a line or a “path” when there isn’t one

Our eyes will follow the path to see where it goes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What links/content should you place into the footer? What should you avoid?

A

You can place social icons, site navigation links/ site map, contact details, privacy policy/ terms of use, and copyright

Avoid inserting important links that the user needs to utilize the site without inserting them within the main navigation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How should menu items be ordered?

A

The order of the menu items, left to right or top to bottom, should be from most to least popular (measured by user interest, not by how much you like them).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the fold and why is it important?

A

The fold is the part of your design that is visible before the user scrolls

It is important because it will get maximum visibility.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Why is having the fold take up 100%vh a bad idea?

A

Because the user should intuitively know that there is more beneath the fold.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Complete the sentence: Images of ______ draw more attention than anything else you can use in your layout.

A

People

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

True or False: Placing images of people looking in the direction you want the user to look will cause users to look in that direction.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is the Axis of Interaction?

A

The Axis of Interaction is the imaginary “edge” your eye follows naturally. The closer something is to the Axis, the more visible it is to the user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What’s the significance of correctly implementing the Axis of Interaction?

A

If you want people to click something, put it on (or near) an axis of interaction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

In regards to form length, what design principals should you use.

A

Keep forms as short as possible

Break it into pages it if makes sense

Keep related question together and eliminate questions you don’t really need.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What design principals should you use when labeling your inputs?

A

When labeling your inputs be short, clear, legible, and put them close to the input they are labeling

If explanations are need - put short explanations near labels and inputs, put long explanations on the side of the form instead of within it, and place examples within the input placeholder.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

How should a form conduct error handling?

A

Perform inline error handling and make sure it is visually obvious which one is wrong.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Where should you place the submit button on a form?

A

For most forms, put the submit button on the left

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

When dealing with destructive buttons, such as account delete or cancel, where should you place the button?

A

Place them on the right so people pause to look.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What is a call to action?

A

A call to action is a headline or text on/near a button that tells people what to do.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

The instruction and labels for a CTA should contain what? What should they not contain?

A

Instructions and labels should be short, literal, and direct

Instructions and labels should not contain lingo, industry terms, or clever jokes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What is an example of a call to action?

A

An example of a CTA would be “Download the app now!” or “Upgrade your account for free!”.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

As a general guideline you will only need two button styles, what are they?

A

Primary and secondary

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What are primary buttons used for?

A

Primary buttons are actions that are helpful to our goals such as buying, submitting, or saving.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

How should primary buttons look like? Where should they be placed?

A

Primary buttons should be high contrast and near the Axis of Interaction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What are secondary buttons used for?

A

Secondary buttons are used for actions such as canceling, skipping, resetting.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

How should secondary buttons look like? Where should they be placed? When should you use an exception?

A

Secondary buttons should be less visible to prevent accidental or “reflexive” clicks and away from the Axis of Interaction.

The exception to this rule is when counter-productive actions are important, like deleting your account. Those actions should get a primary style (ideally red, orange, yellow, etc) but a secondary position in the layout to allow the user time to think before acting.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What will the user most likely do if they are presented with a lot of options.

A

If the user can’t decide, they will leave

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

True or False: most people will only consider the choices that they are offered, even if other possibilities exist.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What are a few ways to get the attention of users?

A

Motion (beats everything)
Surprise
Big text
Contrast and color

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What is Krug’s First Law of Usability?

A

Don’t make the user think, use simple words

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

How do users browse the web?

A

They scan

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

When presented with a list of options are we most likely to choose the best option?

A

No, we are more likely to choose the first reasonable option

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

Finish the statement: We don’t figure out how things work, …

A

We muddle through

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

How do you format your text so that users can easily scan it?

A

Use plenty of headings that have impossible to miss visual distinction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

How should you design the margins for your headings?

A

Ensure your headings don’t have a lot of margin, make sure they’re closer to the section they introduce than to the section they follow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

What’s the appropriate length for paragraphs?

A

Keep paragraphs short, single-sentence paragraphs are fine

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

When should you use bulleted lists?

A

Anything that can be a bulleted list probably should be

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

When utilizing your navigation menu - how can you reduce uncertainty?

A

By using simple and direct words

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

What principals should you follow when providing guidance to your users? Explain.

A

Be brief - the smallest amount of information that will help me

Be timely - placed so I encounter it exactly when I need it

Be unavoidable - formatted in a way the ensures that I’ll notice it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What are the benefits to removing needless words?

A

It reduces the noise level of the page

It makes the useful content more prominent

It makes the pages shorter, allowing users to see

more of each page at a glance without scrolling

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

As a rule, how many utilities can a persistent navigation accommodate?

A

Four or five

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

What are the four things that you need to know about page names?

A

Every page needs a name

The name needs to be in the right place - should appear to be framing the content that is unique to this page.

The name needs to be prominent

The name needs to match what I clicked

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

What six things should be on each page in order to provide users with a sense of “place”?

A
Site ID
Page name
Sections (primary navigation)
Local navigation
“You are here” indicator(s)
Search
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

What four questions does your website need to answer as quickly as possible?

A

What is this?
What can I do here?
What do they have here?
Why should I be here - and not somewhere else?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

There are three important places on the page where we can expect to find explicit statements of what the site is about, what are they? Explain where you would place them.

A

The tagline - a phrase (6 - 8 words) that’s visually connected to the ID

Welcome blurb - the welcome blurb is a terse description of the site, displayed in a prominent block on the home page, usually at the top left or center of the content space so it’s the first thing that catches your eye.

Learn more - a short explanatory video is a great way to provide further explanation about the site/ product.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

Is a tagline a moto?

A

No - it is a personable, lively, and sometimes clever explanation of what your site is.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

What methods can you utilize to structure your pages?

A
Categories
Tasks
Search
Time
People
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

What are categories and how can you structure your pages with it?

A

Similar items and content grouped together form a category

Examples: Mac, PC, Linux

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

What are tasks and how can you structure your pages with it?

A

This structure organizes the site site/ app by the goals the users need to achieve.

An example of this would be a bank nav menu (save, loan, invest, get help, open an account)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

When would a search based architecture make sense?

A

If your site is very complex, or if it is mostly full of user generated content, a search-based architecture might make more sense, like YouTube.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

When a user is browsing the page what is their goal and how do you create a better experience to accommodate that goal?

A

Browsing is akin to window shopping. To create a better experience for users who are browsing - don’t overcrowd the page and focus on the content/products.

64
Q

When a user is searching the page what is their goal and how do you create a better experience to accommodate that goal?

A

Searching is akin to hunting. Focus on filters.

65
Q

What are the five planes of User Experience?

A

Strategy, Scope, Structure, Skeleton, Surface

66
Q

What is the strategy plane?

A

The “why” plane, as in “why does this site exist?” This goes for both the creator/owner and user. Details the goals of the user and owner.

67
Q

What is a Stakeholder?

A

A stakeholder is any person that has a vested interest both in the product and the outcome

68
Q

What is involved in the research phase within the strategy plane?

A

Stakeholder interviews,
Competitor reviews,
User interviews/ research,
Existing product audit

69
Q

What are are the three crucial questions we should be asking within the Strategy plane?

A

What’s worth doing, what are we creating, and what value does it provide

70
Q

The overall experience of the product you are creating should be driven by what?

A

The goals and needs of both the business and the user

getting users to the most valuable actions as quickly and easily as possible.

71
Q

What is the scope plane?

A

The “what” plane, as in “what are we doing?” Outlines all the features and functions that are going to help achieve the goals in strategy.

72
Q

Why should we define the scope of a project?

A

Allows you to know what you’re building

It addresses potential conflicts - before time is invested in designing or building

Provides a reference point for work to be done

Provides a common understanding of features, schedules, and milestones

73
Q

What are functional requirements?

A

Functional requirements describe what a software system should do. What does the user need to do in order to reach their objective?

74
Q

How do you generate functional requirements?

A

Be sure to focus on the needs, not the solutions.

Conduct contextual user scenarios - short, simple narratives that describe how someone might go about fulfilling a need

75
Q

What are non-functional requirements?

A

Non-functional requirements place constraints on how the software system will do a task. The user will conduct a task - how will the system handle that task?

76
Q

What are some of the considerations associated with content requirements?

A

Content format and purpose

Content size-word count, pixel dimensions, file size, bandwidth

Resources needed to produce each type of content

Who’s responsibility for producing content

77
Q

What are Business rules?

A

Dynamic constraints that we have to deal with (i.e. legal constraints, accessibility constraints, branding guidelines, etc.)

78
Q

What is the structure plane?

A

The “how” plane; How much content is there? How is it organized? How is it prioritized? Interaction Design and Architecture happen now.

79
Q

What are the five essential principles of Interaction Experience Design (IXD)?

A
Consistent
Predictable
Learnable
Visible
Feedback
80
Q

Why is providing feedback after every interactive action important?

A

Failing to acknowledge an interaction can lead to unnecessary repetition of actions and errors (or mistakes).

81
Q

Error messages should accomplish the following things:

A

Describe what happened
Explain why it happened
Suggest a fix
Never blame the user

82
Q

What is information architecture (IA)?

A

IA is about the organization, grouping, ordering, and presentation of content.

It is also the creation of organizational and navigation schemes.

83
Q

What are six different organizational and navigation schemes?

A
Hierarchical Tree
Nested list
Hub and spoke
Sequential structures
Bento box (dashboard)
Filters
84
Q

When providing filters, what important considerations must you undertake in regards to attributes?

A

It’s our job - not the users - to identify the specific attributes of the information that will be most useful, usable, and valuable to our users.

85
Q

What is the skeleton plane?

A

The optimized organization of all on-screen elements starts to take shape here through Interface Design and Navigation Design

86
Q

What three important things are we doing on the skeleton plane?

A

We’re giving users the ability to see the structure

We’re giving them a way to move through it

We’re giving them a way to act on what they see

87
Q

Complete this statement: The number of functions available on screen has a direct effect on how useful the product is. The more functions shown, …

A

The less useful they are

88
Q

What are design conventions?

A

Conventions are a series of colors, shapes, patterns, layouts, and/or font styles that have over time come to universally represent a concept.

89
Q

Complete this statement: No matter how technically superior the code is or how deep it’s functionality, the bottom line is

A

An app or site whose interface is difficult to use won’t be used

90
Q

What things can you do to improve predictability within your site/app?

A

Provide labels, instructions, icons, and/or images that set expectations about what the user can do and what will happen.

91
Q

What things can you do to improve consistency within your site/app?

A

Ensure similar parts are expressed in similar ways by using the same interactions, behaviors, and visual styles throughout the entire site, app, or system.

92
Q

Items that are functionally or logically connected should be…

A

Grouped together visually

93
Q

In what order should information be presented?

A

Only the necessary or requested information should be displayed at any given time, in order of importance to the user.

94
Q

What does Hick’s law state?

A

Every additional choice increases the time required to make a decision

95
Q

Why is Hick’s law important?

A

Because the more choice you give people, the easier it is to choose nothing

96
Q

What is information scent?

A

Visual or textual cues provided on a website that suggest what information it or its links may contain.

97
Q

Why is it important to understand information scent?

A

Because people typically estimate - based on what they see - how much useful information they’re likely to find on a given path.

98
Q

What other methods besides navigation bars provide wayfinding?

A

Search, filters, tags, and contextual links can all be used to find information

99
Q

In order for navigation and links to be meaningful they must be…

A

Visible, findable, and informative

100
Q

What are some different organizational methods?

A
Alphabetical
Categorical
Magnitude (i.e lowest to highest, worst to best, etc)
Location
Time
101
Q

Articles on the web, with the exception of technical or academic articles, should follow which format?

A

The inverted pyramid format

102
Q

What are the three components, in order, to the inverted pyramid?

A

Most critical information first
Helpful (but not critical) information second
Nice to know (unnecessary) information last

103
Q

What does Occam’s razor state?

A

The simplest solution is usually best

104
Q

What is a wireframe?

A

A wireframe is a skeleton of a screen which displays the functional elements of a website or page.

105
Q

Wireframes should communicate what four things?

A

Placement of elements on the screen
Labeling of those elements
Navigation scheme
Functionality, behavior and feedback

106
Q

What should wireframes not show?

A

Colors
Typography
Images
Visual style of any kind

107
Q

What is the surface plane?

A

This is the user interface and all things visual to aid them in using the product/site/app: fonts, colors, styling, animation.

108
Q

Why is it important to have a clear visual hierarchy?

A

Clear visual hierarchy enables consistency, cleary signifies relationships, and improves navigation

109
Q

Why is it important to economize visual design?

A

Because by only including the elements that are critical to communication and are immediately relevant to the task at hand we can decrease cognitive load on the user.

110
Q

What type of fonts should we avoid? Why?

A

Decorative fonts

Decorative fonts interfere with pattern recognition in the brain

111
Q

What is the fundamental difference between visual design and decoration?

A

Visual design helps us understand things better

Decoration deals with aesthetics

112
Q

What are the four basic principles to visual design?

A

Alignment
Proximity
Repetition
Contrast

113
Q

Why is alignment important?

A

Alignment provides cognitive stability by creating visual relationships.

114
Q

Why is proximity important in regards to visual design?

A

Elements visually close to each other are perceived as a single group, related by context of use

115
Q

What design element allows us to create proximity?

A

Negative space

116
Q

When evaluating visual design, what is repetition concerned with and why is it important?

A

Repetition is used to create a hierarchy of visual styles - fonts, colors, textures, and graphical elements

Re-using elements of those visual styles in visual elements creates cohesiveness

117
Q

In visual design, what is contrast and why is it important?

A

Contrast draws attention towards specific elements

Whatever element has the most contrast will be the first thing users notice

118
Q

What do successful implementations of eye flow patterns achieve?

A

They provide a guided tour of what’s available - without overwhelming detail. Those available choices support the person’s goals and tasks.

119
Q

How do you create a visual design that enables users to easily scan the page?

A

By creating visual hierarchy - make distinctions with typography, buttons, and sections.

120
Q

Why is consistency so important in visual design?

A

Consistency in visual design allows users to build an accurate mental model of the way the site, app, or system works

121
Q

Should you use Serif or Sans typography?

A

Research shows no difference in comprehension, reading speed, or preference between serif and sans-serif fonts.

122
Q

Why would you use different typefaces on a web page?

A

To indicate differences in the information you’re presenting

123
Q

If your going to use more than one typeface, what rule should you follow?

A

Each typeface should be visually distinct from the other

124
Q

What two design principals will ensure you create a great design?

A

Make sure it works

Reduce clutter

125
Q

Why is objective feedback important when it comes to your designs?

A

Because it will lead to the biggest improvements in your designs.

126
Q

Why should you use a grid when creating a web design?

A

It creates a cleaner, more consistent and organized design.

127
Q

What design element(s) can affect how your design is felt and perceived?

A

Color and vibrancy

128
Q

What colors are more energetic and exciting?

A

Warmer colors (reds, yellows)

129
Q

What colors are more stable and calming?

A

Cooler colors (blues, purples)

130
Q

How many colors should you use for your site? How many of those colors should be bright? Why?

A

Two to four

Using mostly greyer or more neutral colors with one “pop” color makes it easier to highlight important elements without creating a chaotic design.

131
Q

What is a typeface?

A

A typeface is a family or collection of fonts

132
Q

What are the two typeface categories?

A

Serifs and sans-serif

133
Q

What is the difference between Serifs and Sans-serifs?

A

Serifs are the little decorative bits at the end of letters.

Sans-serif means without serif

134
Q

In general, when are serif fonts easier to read? What about Sans-serif?

A

In general, serif fonts are easier to read in printed text and sans-serif fonts are easier to read on a screen.

135
Q

Whats a good staring ratio for adding line-height?

A

1.6

E.g. 12px font size with 19.2px line height, 14px font size with 22.4px line height

136
Q

What is Kerning?

A

Kerning is the process of changing the spacing in between individual letters

137
Q

How many typefaces should you use in your design?

A

No more than two

138
Q

When should you avoid justifying or centering text?

A

Always

139
Q

A paragraph becomes significantly harder to read if there are more than ____ or fewer than ____ characters per line.

A

75, 45

140
Q

What is considered the ultimate clutter reducer?

A

White space/ negative space

141
Q

What are the benefits to using white space?

A

It improves comprehension and legibility

142
Q

When trying to establish a visual hierarchy, it’s helpful to write a list down of all your elements and rank them in order of ___________ .

A

Importance

143
Q

Big chunks of text are more likely to be…

A

Skipped

144
Q

The more content we present, the less control you have about…

A

What the reader actually consumes

145
Q

If your headlines are introducing a page, a product, or trying to grab attention - how should they be written?

A

write them in a way that showcases the benefits of the product rather than just describing what the product does.

146
Q

True or False: You should Cut down and clarify your content as much as possible.

A

True

147
Q

Icons support information absorption by…

A

Creating a graphical representation of content

148
Q

What is the rule of thirds?

A

Dividing the image horizontally and vertically into thirds; the intersections of these lines are great guidelines for placing points of interest.

149
Q

What color doesn’t occur in nature and can make your design feel stark and unnatural?

A

Pure black

150
Q

Lighting should come from?

A

Above

151
Q

Our perception of color changes depending on the?

A

Environment

152
Q

What are three good ways to overlay text on images?

A

overlaying a transparent color on top of an image

adding a solid block of color behind the text

blurring the image

153
Q

When should you design for functionality over simplicity?

A

When dealing with users who will need to rely on those features (i.e. stock trading)

154
Q

What series of steps should you follow when creating a prototype?

A

Create a plan
create sketches
create a wireframe
Create a mockup

155
Q

Should you include real content in your wireframes?

A

Yes