Ui Test Flashcards
They are responsible for the more user-centered, behavioral and logical side of design.
UX Designers
They may be responsible for the copy and tone of voice of the product.
UX writers
These are the people you will be handing your designs over to build and to test
Developers
QA testers
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
Are vertical strips between columns
Gutters
Spacing slinside columns
Padding
A website or app that adjusts it’s appearance depending on the device by altering content hierarchy and layout, size, etc
Responsive website
Key Ranges in screen sizes that require particular changes to the layout
Breakpoints
Size of columb grids on each device
12 columns desktop
8 tablet
4 mobile
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
Elements arranged close to each other are perceived as more rated than those placed further apart
Proximity
Elements placed within the same region are perceived as being groups of related information
Chunking
Visual clues that tell us how a product should be used
Affordances
Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly
Continuation
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
Are visual clues that tell us how a product should be used
Affordances
The ability to present information with different levels of emphasis according to the importance of information
Visual hierarchy
Are go to solutions that solve common design problems
Design patterns
Are go to solutions that solve common design problems
Design patterns
For desktop apps and websites the most common types of navigation are
Horizontal (top) navigation
If you face problem with space which navigation you will use for websites?
Left hand navigation
If there are different categories and subcategories and sub-sun categories to your navigation, which navigation to use?
Global and secondary navigation
Apps that are built specifically for an operating system like ios or android
Native apps
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
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
