UX Design Flashcards
In UX, what does it mean when something is considered usable?
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.
When and how often should you conduct user research?
Early and often
When is subjective information useful?
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.
What are four different ways to conduct subjective research?
Interviews
Observation
Surveys
Google
In UX, what is a persona?
A persona is a representation of a type of customer.
What does a persona describe to us?
goals,
expectations,
motivations,
and behaviour of real people.
What is a user story?
A sequence of user choices that helps list the features and functions the website/app should have.
Why is mobile first design a solid strategy?
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.
What are design patterns and why should you use them?
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.
What is visual weight?
Visual weight is essentially things that look “heavier” than others in a layout. They draw your attention more easily.
Why is adding visual weight important?
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.
What are three ways to add visual weight?
Contrast
Depth
Size
How does size and depth add visual weight to our designs?
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.
When should you add color to your UX designs? List some example cases.
When they convey functionality
You would use red on buttons to convey caution, such as cancel or delete.
If a navigation menu has a horizontal pattern, which links would expect to receive the most clicks?
It would be expected that more people would click the options on the left than on the right.
If a navigation menu has a horizontal pattern but an element breaks that pattern, what item will receive the most clicks? Why?
We can expect that the item that broke the pattern will receive the most clicks because it’s the first thing we notice.
What is line tension and why is it important?
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
What links/content should you place into the footer? What should you avoid?
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 should menu items be ordered?
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).
What is the fold and why is it important?
The fold is the part of your design that is visible before the user scrolls
It is important because it will get maximum visibility.
Why is having the fold take up 100%vh a bad idea?
Because the user should intuitively know that there is more beneath the fold.
Complete the sentence: Images of ______ draw more attention than anything else you can use in your layout.
People
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.
True
What is the Axis of Interaction?
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.
What’s the significance of correctly implementing the Axis of Interaction?
If you want people to click something, put it on (or near) an axis of interaction.
In regards to form length, what design principals should you use.
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.
What design principals should you use when labeling your inputs?
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 should a form conduct error handling?
Perform inline error handling and make sure it is visually obvious which one is wrong.
Where should you place the submit button on a form?
For most forms, put the submit button on the left
When dealing with destructive buttons, such as account delete or cancel, where should you place the button?
Place them on the right so people pause to look.
What is a call to action?
A call to action is a headline or text on/near a button that tells people what to do.
The instruction and labels for a CTA should contain what? What should they not contain?
Instructions and labels should be short, literal, and direct
Instructions and labels should not contain lingo, industry terms, or clever jokes.
What is an example of a call to action?
An example of a CTA would be “Download the app now!” or “Upgrade your account for free!”.
As a general guideline you will only need two button styles, what are they?
Primary and secondary
What are primary buttons used for?
Primary buttons are actions that are helpful to our goals such as buying, submitting, or saving.
How should primary buttons look like? Where should they be placed?
Primary buttons should be high contrast and near the Axis of Interaction.
What are secondary buttons used for?
Secondary buttons are used for actions such as canceling, skipping, resetting.
How should secondary buttons look like? Where should they be placed? When should you use an exception?
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.
What will the user most likely do if they are presented with a lot of options.
If the user can’t decide, they will leave
True or False: most people will only consider the choices that they are offered, even if other possibilities exist.
True
What are a few ways to get the attention of users?
Motion (beats everything)
Surprise
Big text
Contrast and color
What is Krug’s First Law of Usability?
Don’t make the user think, use simple words
How do users browse the web?
They scan
When presented with a list of options are we most likely to choose the best option?
No, we are more likely to choose the first reasonable option
Finish the statement: We don’t figure out how things work, …
We muddle through
How do you format your text so that users can easily scan it?
Use plenty of headings that have impossible to miss visual distinction.
How should you design the margins for your headings?
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
What’s the appropriate length for paragraphs?
Keep paragraphs short, single-sentence paragraphs are fine
When should you use bulleted lists?
Anything that can be a bulleted list probably should be
When utilizing your navigation menu - how can you reduce uncertainty?
By using simple and direct words
What principals should you follow when providing guidance to your users? Explain.
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
What are the benefits to removing needless words?
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
As a rule, how many utilities can a persistent navigation accommodate?
Four or five
What are the four things that you need to know about page names?
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
What six things should be on each page in order to provide users with a sense of “place”?
Site ID Page name Sections (primary navigation) Local navigation “You are here” indicator(s) Search
What four questions does your website need to answer as quickly as possible?
What is this?
What can I do here?
What do they have here?
Why should I be here - and not somewhere else?
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.
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.
Is a tagline a moto?
No - it is a personable, lively, and sometimes clever explanation of what your site is.
What methods can you utilize to structure your pages?
Categories Tasks Search Time People
What are categories and how can you structure your pages with it?
Similar items and content grouped together form a category
Examples: Mac, PC, Linux
What are tasks and how can you structure your pages with it?
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)
When would a search based architecture make sense?
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.
When a user is browsing the page what is their goal and how do you create a better experience to accommodate that goal?
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.
When a user is searching the page what is their goal and how do you create a better experience to accommodate that goal?
Searching is akin to hunting. Focus on filters.
What are the five planes of User Experience?
Strategy, Scope, Structure, Skeleton, Surface
What is the strategy plane?
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.
What is a Stakeholder?
A stakeholder is any person that has a vested interest both in the product and the outcome
What is involved in the research phase within the strategy plane?
Stakeholder interviews,
Competitor reviews,
User interviews/ research,
Existing product audit
What are are the three crucial questions we should be asking within the Strategy plane?
What’s worth doing, what are we creating, and what value does it provide
The overall experience of the product you are creating should be driven by what?
The goals and needs of both the business and the user
getting users to the most valuable actions as quickly and easily as possible.
What is the scope plane?
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.
Why should we define the scope of a project?
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
What are functional requirements?
Functional requirements describe what a software system should do. What does the user need to do in order to reach their objective?
How do you generate functional requirements?
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
What are non-functional requirements?
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?
What are some of the considerations associated with content requirements?
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
What are Business rules?
Dynamic constraints that we have to deal with (i.e. legal constraints, accessibility constraints, branding guidelines, etc.)
What is the structure plane?
The “how” plane; How much content is there? How is it organized? How is it prioritized? Interaction Design and Architecture happen now.
What are the five essential principles of Interaction Experience Design (IXD)?
Consistent Predictable Learnable Visible Feedback
Why is providing feedback after every interactive action important?
Failing to acknowledge an interaction can lead to unnecessary repetition of actions and errors (or mistakes).
Error messages should accomplish the following things:
Describe what happened
Explain why it happened
Suggest a fix
Never blame the user
What is information architecture (IA)?
IA is about the organization, grouping, ordering, and presentation of content.
It is also the creation of organizational and navigation schemes.
What are six different organizational and navigation schemes?
Hierarchical Tree Nested list Hub and spoke Sequential structures Bento box (dashboard) Filters
When providing filters, what important considerations must you undertake in regards to attributes?
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.
What is the skeleton plane?
The optimized organization of all on-screen elements starts to take shape here through Interface Design and Navigation Design
What three important things are we doing on the skeleton plane?
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
Complete this statement: The number of functions available on screen has a direct effect on how useful the product is. The more functions shown, …
The less useful they are
What are design conventions?
Conventions are a series of colors, shapes, patterns, layouts, and/or font styles that have over time come to universally represent a concept.
Complete this statement: No matter how technically superior the code is or how deep it’s functionality, the bottom line is
An app or site whose interface is difficult to use won’t be used
What things can you do to improve predictability within your site/app?
Provide labels, instructions, icons, and/or images that set expectations about what the user can do and what will happen.
What things can you do to improve consistency within your site/app?
Ensure similar parts are expressed in similar ways by using the same interactions, behaviors, and visual styles throughout the entire site, app, or system.
Items that are functionally or logically connected should be…
Grouped together visually
In what order should information be presented?
Only the necessary or requested information should be displayed at any given time, in order of importance to the user.
What does Hick’s law state?
Every additional choice increases the time required to make a decision
Why is Hick’s law important?
Because the more choice you give people, the easier it is to choose nothing
What is information scent?
Visual or textual cues provided on a website that suggest what information it or its links may contain.
Why is it important to understand information scent?
Because people typically estimate - based on what they see - how much useful information they’re likely to find on a given path.
What other methods besides navigation bars provide wayfinding?
Search, filters, tags, and contextual links can all be used to find information
In order for navigation and links to be meaningful they must be…
Visible, findable, and informative
What are some different organizational methods?
Alphabetical Categorical Magnitude (i.e lowest to highest, worst to best, etc) Location Time
Articles on the web, with the exception of technical or academic articles, should follow which format?
The inverted pyramid format
What are the three components, in order, to the inverted pyramid?
Most critical information first
Helpful (but not critical) information second
Nice to know (unnecessary) information last
What does Occam’s razor state?
The simplest solution is usually best
What is a wireframe?
A wireframe is a skeleton of a screen which displays the functional elements of a website or page.
Wireframes should communicate what four things?
Placement of elements on the screen
Labeling of those elements
Navigation scheme
Functionality, behavior and feedback
What should wireframes not show?
Colors
Typography
Images
Visual style of any kind
What is the surface plane?
This is the user interface and all things visual to aid them in using the product/site/app: fonts, colors, styling, animation.
Why is it important to have a clear visual hierarchy?
Clear visual hierarchy enables consistency, cleary signifies relationships, and improves navigation
Why is it important to economize visual design?
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.
What type of fonts should we avoid? Why?
Decorative fonts
Decorative fonts interfere with pattern recognition in the brain
What is the fundamental difference between visual design and decoration?
Visual design helps us understand things better
Decoration deals with aesthetics
What are the four basic principles to visual design?
Alignment
Proximity
Repetition
Contrast
Why is alignment important?
Alignment provides cognitive stability by creating visual relationships.
Why is proximity important in regards to visual design?
Elements visually close to each other are perceived as a single group, related by context of use
What design element allows us to create proximity?
Negative space
When evaluating visual design, what is repetition concerned with and why is it important?
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
In visual design, what is contrast and why is it important?
Contrast draws attention towards specific elements
Whatever element has the most contrast will be the first thing users notice
What do successful implementations of eye flow patterns achieve?
They provide a guided tour of what’s available - without overwhelming detail. Those available choices support the person’s goals and tasks.
How do you create a visual design that enables users to easily scan the page?
By creating visual hierarchy - make distinctions with typography, buttons, and sections.
Why is consistency so important in visual design?
Consistency in visual design allows users to build an accurate mental model of the way the site, app, or system works
Should you use Serif or Sans typography?
Research shows no difference in comprehension, reading speed, or preference between serif and sans-serif fonts.
Why would you use different typefaces on a web page?
To indicate differences in the information you’re presenting
If your going to use more than one typeface, what rule should you follow?
Each typeface should be visually distinct from the other
What two design principals will ensure you create a great design?
Make sure it works
Reduce clutter
Why is objective feedback important when it comes to your designs?
Because it will lead to the biggest improvements in your designs.
Why should you use a grid when creating a web design?
It creates a cleaner, more consistent and organized design.
What design element(s) can affect how your design is felt and perceived?
Color and vibrancy
What colors are more energetic and exciting?
Warmer colors (reds, yellows)
What colors are more stable and calming?
Cooler colors (blues, purples)
How many colors should you use for your site? How many of those colors should be bright? Why?
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.
What is a typeface?
A typeface is a family or collection of fonts
What are the two typeface categories?
Serifs and sans-serif
What is the difference between Serifs and Sans-serifs?
Serifs are the little decorative bits at the end of letters.
Sans-serif means without serif
In general, when are serif fonts easier to read? What about Sans-serif?
In general, serif fonts are easier to read in printed text and sans-serif fonts are easier to read on a screen.
Whats a good staring ratio for adding line-height?
1.6
E.g. 12px font size with 19.2px line height, 14px font size with 22.4px line height
What is Kerning?
Kerning is the process of changing the spacing in between individual letters
How many typefaces should you use in your design?
No more than two
When should you avoid justifying or centering text?
Always
A paragraph becomes significantly harder to read if there are more than ____ or fewer than ____ characters per line.
75, 45
What is considered the ultimate clutter reducer?
White space/ negative space
What are the benefits to using white space?
It improves comprehension and legibility
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 ___________ .
Importance
Big chunks of text are more likely to be…
Skipped
The more content we present, the less control you have about…
What the reader actually consumes
If your headlines are introducing a page, a product, or trying to grab attention - how should they be written?
write them in a way that showcases the benefits of the product rather than just describing what the product does.
True or False: You should Cut down and clarify your content as much as possible.
True
Icons support information absorption by…
Creating a graphical representation of content
What is the rule of thirds?
Dividing the image horizontally and vertically into thirds; the intersections of these lines are great guidelines for placing points of interest.
What color doesn’t occur in nature and can make your design feel stark and unnatural?
Pure black
Lighting should come from?
Above
Our perception of color changes depending on the?
Environment
What are three good ways to overlay text on images?
overlaying a transparent color on top of an image
adding a solid block of color behind the text
blurring the image
When should you design for functionality over simplicity?
When dealing with users who will need to rely on those features (i.e. stock trading)
What series of steps should you follow when creating a prototype?
Create a plan
create sketches
create a wireframe
Create a mockup
Should you include real content in your wireframes?
Yes
