Ui Test Flashcards

1
Q

They are responsible for the more user-centered, behavioral and logical side of design.

A

UX Designers

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

They may be responsible for the copy and tone of voice of the product.

A

UX writers

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

These are the people you will be handing your designs over to build and to test

A

Developers
QA testers

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

Are the areas to the left and the right og the grid that act as a sort of frame for the content on the screen

A

Margins

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

Are vertical strips between columns

A

Gutters

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

Spacing slinside columns

A

Padding

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

A website or app that adjusts it’s appearance depending on the device by altering content hierarchy and layout, size, etc

A

Responsive website

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

Key Ranges in screen sizes that require particular changes to the layout

A

Breakpoints

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

Size of columb grids on each device

A

12 columns desktop
8 tablet
4 mobile

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

Are a set of laws arising from 1920s psychology, describing how humans typically see objects by grouping similar elements, recognizing patterns and simplify complex images. Designers use these via powerful - yet natural tricks of perspective and best practice design standards

A

Gestalt principles

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

Elements arranged close to each other are perceived as more rated than those placed further apart

A

Proximity

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

Elements placed within the same region are perceived as being groups of related information

A

Chunking

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

Visual clues that tell us how a product should be used

A

Affordances

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

Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly

A

Continuation

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

Our brain can perceive a group of elements as a single recognizable form or figure, so icons for example don’t need all the realistic detail to communicate what they are

A

Closure

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

Are visual clues that tell us how a product should be used

A

Affordances

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

The ability to present information with different levels of emphasis according to the importance of information

A

Visual hierarchy

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

Are go to solutions that solve common design problems

A

Design patterns

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

Are go to solutions that solve common design problems

A

Design patterns

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

For desktop apps and websites the most common types of navigation are

A

Horizontal (top) navigation

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

If you face problem with space which navigation you will use for websites?

A

Left hand navigation

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

If there are different categories and subcategories and sub-sun categories to your navigation, which navigation to use?

A

Global and secondary navigation

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

Apps that are built specifically for an operating system like ios or android

A

Native apps

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

Commonly used across many well-known apps like Facebook and Twitter. It allows us to buuble up key sections so users can quickly navigate

A

App bar navigation

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

This approach hides more detailed navigation in an off-canvas menu when users tap on hamburger or menu icon

A

Menu drawers

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

Bubbles up key actions that users may frequently take, like creating a calendar or event

A

Floating button

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

Mixture of navigation

A

Blended navigation

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

Are commonly used for contextual navigation, especially on website or app that go several layers deep.

A

Breadcrumbs

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

Are a well-established patterns on the web, especially with e-commerce sites. They’re commonly used in the hero area of sites that want to maximize the screen real estate, and give their content a dynamic feel.

A

Sliders/carousels

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

Are one of the most well-established patterns in UI design. Uses google

A

Search fields

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

A common navigational pattern used to display vast amounts of data in a manageable quantity

A

Pagination

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

Commonly used as a related content label, that can encourage browsing and serve as useful or interesting content for users to interact with

A

Tags

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

Some sort of movement in and movement out in animations

A

Easing

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

This is the default state of a form field before any slider interacts with it

A

Pristine

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

This is the state at which a cursor hovers over a text field

A

On hover

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

The state that appears on all screen types as it communicates to the user that they have interacted with the form and it’s ready for them to input their data

A

Selected/focused

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

Is a visual indicator that a UI element is not currently available for interaction

A

Disabled state

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

Is a useful visual indicator to confirm that users have interacted with a field and that a action has been successful on unsuccessful

A

Inline validation

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

A common method of selection in Ui. Are an effective control to select or deselect one or more elements

A

Checkboxes

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

Often used alongside checkboxes, serve as a single selection function

A

Radio buttons

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

Serve to contain multiple options in a space-efficient way.

A

Dropdown lists

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

Commonly known as call to actions

A

Buttons

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

Are a bit like a light switchers. Good pattern to use if something needs to turned on or off

A

Toggles

44
Q

Are a useful device for adding detail or context to a UI element, commonly used to explain things in a UI tat might not be obvious to a user

A

Tooltips

45
Q

Are an effective way to let users know that something is happening in the background.

A

Progress indicators

46
Q

2 fundamental styles of fonts

A

Serif and Sans Serif

47
Q

This font have decorative lines that stick out from the main form of the letter

A

Serif

48
Q

This font have decorative lines that stick out from the main form of the letter

A

Serif

49
Q

This font has clean more geometric lines and lack the extra decoration

A

Sans serif

50
Q

4 most popular fonts

A

Opens Sans
Roboto
Lato
Montserrat

51
Q

Refers to the distinguishing features of the different characters in a font

A

Legibility

52
Q

Refers to the ease at which your eye can scan words and sentences and make sense of them quickly

A

Readability

53
Q

Refers to the ease at which your eye can scan words and sentences and make sense of them quickly

A

Readability

54
Q

Fonts that don’t snatd out

A

Modest

55
Q

Refers to the distance between horizontal lines of text

A

Line height

56
Q

How many characters per line is comfortable to read?

A

Around 60

57
Q

60-30-10 rule?

A

One color - generally smt fairly neutral-makes up 60% of the pallette. Another complementary color makes up 30% of the pallette. And then a third color is used as an accent for the remaining 10% of the design

58
Q

What is the min size for text in UI design?

A

14 px

59
Q

They can help otganize info into consistently sized blocks of content, that can make both designing and developing products much easier

A

Grids

60
Q

Is the height of that particular font’s lower case latter x

A

X-height

61
Q

It determines how big or small a font might look at a particular size

A

X-height

62
Q

How many characters per line is comfortable to read and scan blocks of text?

A

60 characters per line

63
Q

To which colors refers rgb system?

A

Red green blue

64
Q

To what refers hsb system?

A

Hue saturation and brifhtness

65
Q

The more simplified functional icons, commonly used to call out actions, or as navigation to settings or the like

A

Product icons

66
Q

They are simplified graphics with little extra decoration than what’s required to communicate the concept

A

Animated icons

67
Q

Presentational icans, used to add meaning clarity, and visual interest to a page

A

Accent icons

68
Q

These are the sequence for numbers and letters usually 6 digits that references a particular color accurately, dna of the color

A

Hex colors

69
Q

It refers to richness of the color

A

Saturation

70
Q

It refers to the color range

A

Hue

71
Q

It refers to lightness

A

Luminosity

72
Q

It might be used if you wanted a specific color to sit on top of a photo

A

Rgb

73
Q

What include gestalt principles?

A

Similarity, proximity, closure

74
Q

What include gestalt principles?

A

Similarity, proximity, closure

75
Q

It states that items which share a visual characteristic are perceived as more related than items that are dissimilar

A

Principle of similarity

76
Q

Describes how we tend to perceive elements that are placed close to each other

A

Proximity

77
Q

It states that people will fill in blanks to perceive a complete object

A

Principle of closure

78
Q

It states that the eyes tend to follow visual paths and sequences in order to identify relationships between designed elements

A

Principle of continuation

79
Q

The opposite to similarity, which means things standing out from their surrounding elements because they are different

A

Anomoly

80
Q

Objects that are aligned feel like they have sense of order and orderly interfaces are easier to comprehend

A

Alignment

81
Q

By using it is one of the easiest way to bring order to a layout.

A

Underlying grid and effective spacing

82
Q

How to remove room for error in designing in a systematic way?

A

Using grids

83
Q

Objects that look similar are perceived to be more related than other objects, have similar shape, scale, orientation, color they feel related

A

Similarity

84
Q

The opposite to similarity

A

Anomoly

85
Q

The content that is cropped off encourages user to scroll to see more

A

Continuation

86
Q

Useful tool because it saves space and encourages discovery

A

Continuation( crop off the content )

87
Q

It should tell me where I am, where I am going and how do I get there

A

Navigation

88
Q

Name desktop navigation types

A

Horizontal(top) navigation
Left hand navigation
Global, secondary, tertiary navigation

89
Q

Name mobile navigation types

A

App bar navigation
Menu drawers(presented as hamburger menu)
Floating action
Blended navigation

90
Q

This website takes the same code and presents it to the user in different ways depending on a screen size they view it on

A

Responsive website

91
Q

Are apps that are built specifically for an operating system like iOS and android

A

Native apps

92
Q

On what depends mobile navigation

A

If the design is responsive or native
If native then which operating system
Complexity of navigation

93
Q

Is a good speed to aim for most micro-animations

A

300 millisecond

94
Q

Name mobile layouts

A

full screen, 50/50, thirds, list views, card views, on boarding screen, mixed layout, profile view

95
Q
  • Intentional and prepared:
A

rational-evidence-effectiveness

96
Q

Types of critiques

A

Silent critique
Regular critique

97
Q

print out designs on the wall, gather a group of people and give them enough context of what you doing and why. Arm people with post it’s a d give 10 min to silently look at the designs and jot down observations they have about designs.

A

Silent critique

98
Q

Type of critique with more conversational approach to printouts.

A

Regular critique

99
Q

Who invented color-coded visualization for thumb reachability

A

Luke Wroblewski

100
Q

Name input controls

A

Check boxes
Radio buttons
Drop down lists
Buttons
Toggles
Date fields

101
Q

Name navigational patters

A

Breadcrumbs
Sliders/carousels
Search fields
Pagination
Tags

102
Q

Name form field states

A

Pristine
Oh hover
Selected/focused
Disabled
In-line validation

103
Q

Name informational components

A

Tooltips
Icons
Progress indicators
Notifications

104
Q

Name text scanning patterns

A

F pattern
Z pattern

105
Q

What should you think of when choosing the font

A

Legibility
Readability
Modesty
Flexibility
Open source

106
Q

How many men and women have some level of color blindness

A

One of 12 men and one of 200 women

107
Q

What colors you should use for donut chart

A

Single color but different shades