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.