Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CMPUT 401 > Class 7 - UI Design > Flashcards

Class 7 - UI Design Flashcards

1
Q

User Experience (UX)

A

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

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

User Interface (UI)

A

The screens, buttons, icons, and other visual elements you interact with when using an app. Includes:
- Visual Design
- Colours
- Graphic Design
- Layouts
- Typography

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

What are Nielsen’s 10 usability heuristics for interface design?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Visibility of system status (Usability Heuristic)

A

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time

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

Match between system and the real world (Usability Heuristic)

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

User control and freedom (Usability Heuristic)

A
  • Let users remain in control
  • Users need a clearly marked “emergency exit” (a way to get out of a dialog)
  • Support undo and redo
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Consistency and standards (Usability Heuristic)

A

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

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

Error prevention (Usability Heuristic)

A

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

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

Recognition rather than recall (Usability Heuristic)

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Flexibility and efficiency of use (Usability Heuristic)

A

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

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

Aesthetic and minimalist design (Usability Heuristic)

A

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

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

Help users recognize, diagnose, and recover from errors (Usability Heuristic)

A

Express error messages in plain language (no code). They should precisely and concisely indicate the problem, and constructively suggest a solution

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

Help and documentation (Usability Heuristic)

A

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

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

What characteristics must all design elements have?

A
  • Readable
  • Easy to understand
  • Guide the user to what they need
  • Attractive without becoming confusing
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the 4 key design principles discussed in this course?

A

Recall CRAP:
- Contrast
- Repetition
- Alignment
- Proximity

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

Proximity (Design Principle)

A

Items relating to each other should be grouped close together. Grouped items become one visual unit rather than several separate units.

17
Q

Alignment (Design Principle)

A

Every element on a page should have some visual connection with another element on the page (place elements with intent)

18
Q

Repetition (Design Principle)

A

Repeat visual elements of the design throughout the application (e.g. colors, shapes, textures, fonts, sizes, etc.)

19
Q

Contrast (Design Principle)

A

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.

20
Q

What are some examples of impolite design discussed in class?

A
  • Frequent compulsory updates
  • Annoying reminders
  • Attention freaks
  • Silent downloads
21
Q

What are some examples of polite design discussed in class?

A
  • 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
22
Q

Why is accessible design important?

A
  • 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
23
Q

Persona Spectrum

A

Used to understand related limitations across a spectrum of permanent, temporary, and situational disabilities

24
Q

True or False: It is fair to assume very few of your users are illiterate

A

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

25
Q

What are some accessible design patterns discussed in class?

A
  • 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
26
Q

UI Patterns

A

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.

27
Q

What are the elements of a UI pattern (specifically the elements of UI pattern documentation)?

A
  • 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
28
Q

How can UI patterns help you as a programmer?

A
  • 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
29
Q

Design Systems

A

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).

30
Q

Dark Patterns (Evil Design)

A

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).

31
Q

Confirmshaming (Manipulinks)

A

A deceptive pattern that emotionally manipulates the user into doing something that they would not otherwise have done.

32
Q

Fake scarcity

A

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

33
Q

Fake social proof

A

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)

34
Q

Forced action

A

A deceptive pattern that forces the user to do something undesirable in order to perform an action they want to do

35
Q

Hard to cancel (“Roach Motel”)

A

A deceptive pattern where a service is very easy to sign up/subscribe to, but very hard to cancel

36
Q

Sneak into basket

A

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

37
Q

Bait and Switch

A

A deceptive pattern where the user interacts with an application expecting a specific outcome to happen when in reality another undesirable outcome occurs

CMPUT 401 (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions