UX Exam (modules 7-10) Flashcards
What is visual design?
“The practice of…
* devising grids,
* laying out pages,
* choosing colour palettes and
* developing icons”
Fundamental principles of visual design?
Proximity, Alignment, Repetition, Contrast (PARC)
What are the Gestalt principles?
Principles of how humans perceive objects - they group similar elements, recognise patterns and simplify complex images
Explain Gestalt principle of proximity?
Objects are perceived as being related if they are close together
Explain Gestalt principle of similarity?
Objects are perceived as being related if they are similar in colour, shape, size or orientation
Explain Gestalt principle of figure ground?
Objects are perceived as either the foreground or background - the main figure is what we focus on, and the rest is background
Explain Gestalt principle of closure?
Our brains will fill in a missing part to create a complete picture (e.g. a circle with a small gap is still perceived as a circle)
Explain Gestalt principle of continuation?
Objects placed on a line or curve are perceived as more related than those that are not aligned
Explain Gestalt principle of enclosure?
Objects with a border around them are perceived as more related to each other
How can you create a clear hierarchy in a UI?
Arrange elements according to importance, group similar elements in proximity to each other to suggest a relationship, direct viewer’s attention by using size, visual weight, colour and position (e.g. indenting)
Two main types of balance?
Symmetrical and asymmetrical
How can contrast be useful?
It can be used to guide the user to important content and tasks, it helps make a design accessible to all users, it can help draw attention to call to action buttons
Considerations to take with colours?
Can use colour to imply relationships and associations, important for brand recognition, beware of cultural differences
What are primary, secondary and tertiary colours?
Primary - yellow, red, blue
Secondary - mixing primaries together (green, orange, purple)
Tertiary - mixing secondary colours together
Types of colour schemes?
Monochromatic - different variations of one colour
Sympathetic - colours close to each other on colour wheel
Complementary - colours that are direct opposites on the colour wheel
Accessibility considerations with colours?
Always put dark foregrounds against light backgrounds or vice versa, don’t put red with green/blue, ensure good contrast, never use colour alone to differentiate between items
What is skeuomorphism?
When a digital object mimics its real world counterpart
What are advantages of using visual metaphors? (skeuomorphism)
Can put abstract concepts in concrete terms, they create familiarity, they can trigger emotions, can draw the attention of users, can motivate users into action
What are disadvantages of using visual metaphors?
May only be helpful for inexperienced users, can create functional limitations dictated by real world object, adds clutter to designs, may not cross cultures/languages/generations
How can one reduce cognitive load on the user?
User should not have to remember information from one part of the system to another - present info in meaningful & distinct chunks, make supporting tools & information readily available, every element should have a definitive purpose
What are some elements of information flow?
Perceptions, predispositions, person, goals, actions, social environment, physical environment, technical environment, system, interaction
How do users tend to view content?
F-shaped reading pattern
What are the W3C web content accessibility standards?
Important standard: legal requirement, inclusive design, business reasons, improves experience for all
What are the first 5 usability heuristics?
1 - Consistency & standards (follow conventions, present similar functions consistently)
2 - Match between system & real world (use words, phrases, concepts familiar to the user, don’t use jargon, think about users expectations around the system
3 - Visibility of system status (keep users informed about what is going on with feedback, progress indicators, active menu items, breadcrumbs)
4 - User control and freedom (don’t trap users in a process or transaction in case they got there by mistake)
5 - Flexibility and efficiency of use (responsive and easy to use by novices & experts alike)
What are the next 5 usability heuristics?
6 - Aesthetic & minimalist design (visually appealing designs are perceived as more credible & easier to use)
7 - Help users recognise, diagnose & recover from errors (precisely explain the problem, show fields with an error)
8 - Error prevention (e.g. calendar pickers)
9 - Help & documentation (include contextual help, don’t rely on human memory)
10 - Recognition rather than recall (icons/symbols should be meaningful & recognisable, don’t rely on users’ memory)