Class 7 - UI Design Flashcards
User Experience (UX)
The entire interaction you have with a product (in particular how you feel about the interaction). Includes:
- Interaction Design
- Information Architecture
- Prototypes
- User Research
- Scenarios
User Interface (UI)
The screens, buttons, icons, and other visual elements you interact with when using an app. Includes:
- Visual Design
- Colours
- Graphic Design
- Layouts
- Typography
What are Nielsen’s 10 usability heuristics for interface design?
- Visibility of system status
- Match between system and the real world
- User control and freedom
- Consistency and standards
- Error prevention
- Recognition rather than recall
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from errors
- Help and documentation
Visibility of system status (Usability Heuristic)
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time
Match between system and the real world (Usability Heuristic)
- The system should speak the users’ language (use terms users are familiar with)
- Make analogies to real world objects (e.g. use a magnifying glass to signify zoom)
- Follow real-world conventions, making information appear in a natural and logical order.
User control and freedom (Usability Heuristic)
- Let users remain in control
- Users need a clearly marked “emergency exit” (a way to get out of a dialog)
- Support undo and redo
Consistency and standards (Usability Heuristic)
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Error prevention (Usability Heuristic)
Design your system to prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action
Recognition rather than recall (Usability Heuristic)
- Make your app easy to use (there should not be a massive learning curve). Make objects, actions, and options visible
- Users should not have to remember information from one part of the dialogue to another
- Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Flexibility and efficiency of use (Usability Heuristic)
Include accelerators (unseen by the novice user) but useful for expert users to speed up interactions. Cater to both inexperienced or experienced users. Allow users to tailor frequent actions
Aesthetic and minimalist design (Usability Heuristic)
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility
Help users recognize, diagnose, and recover from errors (Usability Heuristic)
Express error messages in plain language (no code). They should precisely and concisely indicate the problem, and constructively suggest a solution
Help and documentation (Usability Heuristic)
It may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large
What characteristics must all design elements have?
- Readable
- Easy to understand
- Guide the user to what they need
- Attractive without becoming confusing
What are the 4 key design principles discussed in this course?
Recall CRAP:
- Contrast
- Repetition
- Alignment
- Proximity
Proximity (Design Principle)
Items relating to each other should be grouped close together. Grouped items become one visual unit rather than several separate units.
Alignment (Design Principle)
Every element on a page should have some visual connection with another element on the page (place elements with intent)
Repetition (Design Principle)
Repeat visual elements of the design throughout the application (e.g. colors, shapes, textures, fonts, sizes, etc.)
Contrast (Design Principle)
Avoid having elements on a page that are almost the same (a couple minor differences). If two elements are not the same, make them very different. Contrast is often the most important visual attraction on a page.
What are some examples of impolite design discussed in class?
- Frequent compulsory updates
- Annoying reminders
- Attention freaks
- Silent downloads
What are some examples of polite design discussed in class?
- Ask for the user’s permission to perform an action
- Offer alternatives
- Explain all of the options and settings
- Anticipate the user’s needs when possible
- Respect (and remember) the user’s decision
- Be mindful of words and tone
Why is accessible design important?
- It affects a lot of people
- It is good for business
- It benefits everyone
- It is required by law
- It is the right thing to do
Persona Spectrum
Used to understand related limitations across a spectrum of permanent, temporary, and situational disabilities
True or False: It is fair to assume very few of your users are illiterate
False. Using Canada as an example, 12 million Canadian adults can’t read well enough to do everyday tasks. You need to make your app as accessible as possible for disabled/illiterate people
What are some accessible design patterns discussed in class?
- Don’t rely on colour to convey information
- Pick high-contrast text colours
- Use alt text
- Avoid text embedded in images
- Provide context for hyperlinks
- Simplify your textual content
- Avoid automatic image sliders
- Design accessible forms
UI Patterns
Recurring solutions to problems that have a structure and can be easily used to help you solve a problem faster than building from scratch. They suggest function, interaction, and intent.
What are the elements of a UI pattern (specifically the elements of UI pattern documentation)?
- A named solution describing what the pattern does
- The problem the user is facing or why the pattern is needed
- The context for when to use the pattern
How can UI patterns help you as a programmer?
- Efficiently solve design problems across evolving interfaces as technology changes
- Produce intuitive products through consistency and familiarity
- Save time instead of repeating yourself
- Communicate design decisions
- Use smart defaults without extensive product design experience
- Learn how to improve a user’s experience
Design Systems
A collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies, and other digital assets for a product design company (e.g. Google Material Design).
Dark Patterns (Evil Design)
Deceptive patterns that benefit the creator more than the user. They often persuade users into doing something they did not mean to (e.g. buying or signing up for something).
Confirmshaming (Manipulinks)
A deceptive pattern that emotionally manipulates the user into doing something that they would not otherwise have done.
Fake scarcity
A deceptive pattern that pressures the user to perform an action (e.g. purchase a product) because they are presented with a fake indication of limited supply or popularity
Fake social proof
A deceptive pattern that misleads the user into believing a product is more popular or credible than it really is (e.g. fake reviews, fake testimonials, fake activity messages)
Forced action
A deceptive pattern that forces the user to do something undesirable in order to perform an action they want to do
Hard to cancel (“Roach Motel”)
A deceptive pattern where a service is very easy to sign up/subscribe to, but very hard to cancel
Sneak into basket
A deceptive pattern where relevant information is intentionally withheld or obscured in order to manipulate users into taking an action they would not otherwise choose. Example: Additional cost for an unwanted item added to cart
Bait and Switch
A deceptive pattern where the user interacts with an application expecting a specific outcome to happen when in reality another undesirable outcome occurs
