Ui Test Flashcards by Olga Kutsai

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

UX Designers

How well did you know this?

Not at all

Perfectly

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

UX writers

How well did you know this?

Not at all

Perfectly

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

Developers
QA testers

How well did you know this?

Not at all

Perfectly

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

Margins

How well did you know this?

Not at all

Perfectly

Are vertical strips between columns

Gutters

How well did you know this?

Not at all

Perfectly

Spacing slinside columns

Padding

How well did you know this?

Not at all

Perfectly

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

Responsive website

How well did you know this?

Not at all

Perfectly

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

Breakpoints

How well did you know this?

Not at all

Perfectly

Size of columb grids on each device

12 columns desktop
8 tablet
4 mobile

How well did you know this?

Not at all

Perfectly

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

Gestalt principles

How well did you know this?

Not at all

Perfectly

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

Proximity

How well did you know this?

Not at all

Perfectly

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

Chunking

How well did you know this?

Not at all

Perfectly

Visual clues that tell us how a product should be used

Affordances

How well did you know this?

Not at all

Perfectly

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

Continuation

How well did you know this?

Not at all

Perfectly

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

Closure

How well did you know this?

Not at all

Perfectly

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

Affordances

How well did you know this?

Not at all

Perfectly

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

Visual hierarchy

How well did you know this?

Not at all

Perfectly

Are go to solutions that solve common design problems

Design patterns

How well did you know this?

Not at all

Perfectly

Are go to solutions that solve common design problems

Design patterns

How well did you know this?

Not at all

Perfectly

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

Horizontal (top) navigation

How well did you know this?

Not at all

Perfectly

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

Left hand navigation

How well did you know this?

Not at all

Perfectly

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

Global and secondary navigation

How well did you know this?

Not at all

Perfectly

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

Native apps

How well did you know this?

Not at all

Perfectly

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

App bar navigation

How well did you know this?

Not at all

Perfectly

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

Menu drawers

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

Floating button

Mixture of navigation

Blended navigation

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

Breadcrumbs

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.

Sliders/carousels

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

Search fields

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

Pagination

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

Tags

Some sort of movement in and movement out in animations

Easing

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

Pristine

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

On hover

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

Selected/focused

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

Disabled state

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

Inline validation

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

Checkboxes

Often used alongside checkboxes, serve as a single selection function

Radio buttons

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

Dropdown lists

Commonly known as call to actions

Buttons

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

Toggles

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

Tooltips

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

Progress indicators

2 fundamental styles of fonts

Serif and Sans Serif

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

Serif

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

Serif

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

Sans serif

4 most popular fonts

Opens Sans Roboto Lato Montserrat

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

Legibility

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

Readability

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

Readability

Fonts that don't snatd out

Modest

Refers to the distance between horizontal lines of text

Line height

How many characters per line is comfortable to read?

Around 60

60-30-10 rule?

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

What is the min size for text in UI design?

14 px

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

Grids

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

X-height

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

X-height

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

60 characters per line

To which colors refers rgb system?

Red green blue

To what refers hsb system?

Hue saturation and brifhtness

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

Product icons

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

Animated icons

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

Accent icons

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

Hex colors

It refers to richness of the color

Saturation

It refers to the color range

Hue

It refers to lightness

Luminosity

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

Rgb

What include gestalt principles?

Similarity, proximity, closure

What include gestalt principles?

Similarity, proximity, closure

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

Principle of similarity

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

Proximity

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

Principle of closure

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

Principle of continuation

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

Anomoly

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

Alignment

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

Underlying grid and effective spacing

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

Using grids

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

Similarity

The opposite to similarity

Anomoly

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

Continuation

Useful tool because it saves space and encourages discovery

Continuation( crop off the content )

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

Navigation

Name desktop navigation types

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

Name mobile navigation types

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

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

Responsive website

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

Native apps

On what depends mobile navigation

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

Is a good speed to aim for most micro-animations

300 millisecond

Name mobile layouts

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

- Intentional and prepared:

rational-evidence-effectiveness

Types of critiques

Silent critique Regular critique

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.

Silent critique

Type of critique with more conversational approach to printouts.

Regular critique

Who invented color-coded visualization for thumb reachability

Luke Wroblewski

Name input controls

Check boxes Radio buttons Drop down lists Buttons Toggles Date fields

Name navigational patters

Breadcrumbs Sliders/carousels Search fields Pagination Tags

Name form field states

Pristine Oh hover Selected/focused Disabled In-line validation

Name informational components

Tooltips Icons Progress indicators Notifications

Name text scanning patterns

F pattern Z pattern

What should you think of when choosing the font

Legibility Readability Modesty Flexibility Open source

How many men and women have some level of color blindness

One of 12 men and one of 200 women

What colors you should use for donut chart

Single color but different shades