Visual Design Principles
Affordance refers to the visual or sensory cues in an object or interface that suggest or imply how the user can interact with it. In essence, it is a property that determines what actions are possible. A good affordance makes the function of an object immediately obvious, reducing the need for instructions.
- Example: A Button with a Drop Shadow and a Label
- Counter Example (False Affordance): Underlined Text That is Not a Link
| Visibility | Affordance - No | Affordance - Yes |
|---|---|---|
| Perceptible | False Affordance | Perceptible affordance |
| Hidden | Correct Rejection | Hidden Affordance |
| Principle | Formal Definition/Purpose | Key Takeaways for a Test |
|---|---|---|
| Unity | Creates a sense of cohesion where all elements feel connected and belong together4. Achieved through consistent patterns, terminology, prompts, and navigation5. | Focus: Consistency and Cohesion. |
| Proximity | Grouping related elements together to show relationships and improve readability7. | Focus: Grouping and Relationship. |
| White Space | Allowing elements to ‘breathe’ to prevent information overload9. | Focus: Preventing Overcrowding/Information Overload. |
| Repetition | Reinforces consistency by repeating design elements across the design11. Used to help improve findability and learnability12. | Focus: Consistency and Learnability. |
| Scale & Proportion | The size of elements in proportion to one another can signify importance in your design14. Larger elements are often read first15. | Focus: Importance and Visual Hierarchy. |
| Alignment | Ensuring elements have a visual connection, making the design organized and readable17. Often maintained using Grids18. | Focus: Organization and Readability. |
| Emphasis | Directing attention to the most important elements using size, colour, or placement20. Should have a defined focal point21. | Focus: Focal Point and Directing Attention. |
| Contrast | Using visually different elements to guide a user’s eye to specific elements on a screen23. | Focus: Guiding the Eye. |
Usability Testing
| Method | Formal Definition/Purpose | Key Focus/Context |
|---|---|---|
| Usability Testing | Real users perform tasks while being observed, helping to identify usability issues and friction points. | Observing real-world performance on tasks. |
| Cognitive Walkthroughs | Team members or experts walk through tasks as if they were new users16. | How new users learn to use the product/service. |
| Tree Testing | Tests for navigation structures without any UI elements (using sitemaps). | Validating menu hierarchies and taxonomy (labelling). |
| A/B Testing | Randomly assigns groups of users to interact with different designs to measure the effect on user behaviour. | Comparing two or more live designs (split testing) |
| Guerrilla Testing | Going to a physical space (like a hallway) and asking customers to quickly try out a prototype. | Quick, low-cost testing to get initial feedback |
| Click Testing | Analyzing records of screens or pages that users click on/see, including flow, scrolling, and heat maps. | Analyzing where users click (e.g., First-click testing) |
| Formal Concept | Definition/Purpose | Key Distinction |
|---|---|---|
| User Testing Goal | To validate ideas and solutions3. The mindset should be to pay attention to bugs, inefficiencies, and performance issues. | The motto is to "fail fast" because designs are expensive to change after development. |
| Attitudinal vs. Behavioural | Two major axis points for testing feedback. | Attitudinal: What people say (stated beliefs, heavily used in marketing)7. Behavioural: What people do (actions recorded/tracked/analyzed). |
| Qualitative vs. Quantitative | Another major axis point for viewing testing. | Qualitative: Focused on gathering descriptive data (e.g., body language, tones)10. Quantitative: Focused on gathering measurable numerical data (e.g., time on task). |
| Participatory Design | An overall approach to actively involve all stakeholders and users in the design process to ensure the result meets their needs and is usable. | Also known as Co-design, Co-creation, or Cooperative Design. |
More Design Stuff
| Formal Concept | Definition/Purpose | Key Takeaways for a Test |
|---|---|---|
| Responsive Design | The process of supporting multiple devices/resolutions and input types (mouse, touch screen). It is more than just scaling down elements. | Must utilize breakpoints and support both portrait and landscape orientations. |
| Fold (Above/Below) | The visible part of a webpage or app screen without scrolling. Content above the fold is immediately seen. | Important content should be above the fold. |
| Sticky Headers/Footers | Elements that remain fixed at the top or bottom of the screen as the user scrolls. | Prevents the user from having to scroll all the way up/down to access navigation/key actions. |
| Coach Marks | A mobile UI pattern that uses a transparent overlay of UI hints to guide unfamiliar users through an action or flow. | Solves the problem of users being unfamiliar with new flows. |
| Slideouts | A collapsible, hidden panel that can be accessed via a gesture (like swipe or tap). | Solves the problem of limited mobile space while offering quick access to navigation. |
| Term | Formal Definition | Key Takeaways for a Test |
|---|---|---|
| Typeface | The family of fonts (e.g., Times New Roman). | The overall design style. |
| Font | A specific typeface styling (e.g., Times New Roman Bold). | The specific variation (style, weight). |
| Leading | The space *between lines of text. | Controls vertical spacing. |
| Tracking | The overall space between characters on a line. | Controls horizontal spacing of an entire block of text. |
| Kerning | The individual space between two characters. | Fine-tunes specific character pairs. |
| Concept | Definition/Purpose | Key Application |
|---|---|---|
| Cognitive Flow | A state of total absorption arising from a perfect balance between skill and challenge. | Goal for game and engaging application design. |
| Diegetic UI | UI that exists within the game fiction AND game space (e.g., health meter on a character's suit). | Increases immersion. |
| Spatial UI | UI that exists within the game space but NOT the fiction (e.g., floating objective markers in the 3D world). | Provides context-sensitive information. |
| Non-Diegetic UI | UI that exists outside the game fiction AND game space (e.g., standard Heads Up Display/HUD, minimap in the corner). | Standard interface overlay. |
| Gamification | Using game elements (points, badges, leaderboards) to encourage engagement with a non-game product. | Improves UX, especially for lengthy tasks (e.g., profile completion). |
| Bartle's Player Taxonomy | Framework identifying player types: Killers (winning/competition), Achievers (status/goals), Socialites (socializing), Explorers (discovery). | Helps tailor motivation systems (gamification). |
1. Visibility of System Status
The system should always keep the user informed about what is going on , through appropriate feedback withing a reasonable time.
Example: A progress bar showing during a download. Counter Example: A page not displaying anything after a user clicks a download button, leaving them unsure whether their action was successful.
2. Match Between the System and the Real World
The system should use common real world language/phrases/images for concepts rather than system-oriented/developer terms.
Example: Using a shopping cart icon to represent the e-commerce checkout process.
Counter Example: A button that says commit-object rather than save.
3. User Control and Freedom
Give users an easy way/choice to back out from a system function.
Example: Having a prominent "Undo" button after deleting an email or a confirmation pop-up that allows canceling an irreversible action. Counter Example: A multi-step form that forces the user to restart from step one if they want to go back and change a choice made in an earlier step, with no "Back" or "Cancel" option.
4. Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions (external consistency) and maintain consistency within the product (internal consistency).
Example: Using the same color and placement for primary action buttons (like Save) across all screens in an application
Counter Example: A website where the navigation menu is vertical on the homepage but horizontal on all other pages, confusing the user about where to find links.
5. Error Prevention
Use careful design to prevent problems from even occurring in the first place.
Example: Greying out or disabling a Checkout button on an e-comm site until all required fields have been completed.
Counter Example: An phone number input field that accepts letters but doesnt warn the user until after they attempt to click submit and when it does warn the error is cryptic.
6. Recognition Rather Than Recall
The user should not have to remember information from one area to do something in another. Make objects, actions, and options visible.
Example: Recently viewed items displayed on a shopping website or a drop-down menu that shows suggested search terms as you type. Counter Example: Requiring a user to re-enter their previous mailing address during a complex checkout process instead of displaying it as a selectable option.
7. Flexibility and Efficiency of Use
Have accelerators (keyboard shortcuts, favourites, etc.) to allow the system to cater to both inexperienced and experienced users alike.
Example: Offering keyboard shortcuts (like Ctrl+S for save) for expert users, while still providing a visible "Save" button for novices.
Counter Example: A design tool that only allows file saving via a deep menu path, with no options for shortcuts or quick access for frequent users.
8. Aesthetic and Minimalist Design
Dialogues should not contain information that 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.
Example: A search results page that clearly highlights the relevant titles and snippets and minimizes distracting sidebars or overly large advertisements. Counter Examples: A web form that includes dozens of optional, rarely-used fields and excessive, technical explanatory text right on the main screen, causing clutter.
9. Help Users Recognize, Diagnose, and Recover from Errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Example: An error message that says, "Your password must be at least 8 characters long and contain one number," instead of just "Invalid password." Counter Example: An error pop-up that simply displays a technical error code (e.g., "Error 4047-X") with no explanation or suggested remedy.
10. Help and Documentation
Any help and documentation information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Example: A dedicated, easily accessible "Help" section with a search function. Counter Example: A help system that is a single, massive, unsearchable PDF file that users must download and read offline to find simple answers.