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
