"Designing with the Mind in Mind: A Simple Guide to Understanding User Interface Design Rules" stands out as a unique book that distinguishes itself from conventional works on user experience. Penned by Jeff Johnson in 2010, the book delves into how our brains function in intricacies and elucidates how these behaviors contribute to formulating various UX rules. It's crucial to emphasize that this isn't merely a theoretical tome; it skillfully combines theories with actionable rules, offering guidance for successful implementation to achieve an optimal user experience.
The book illuminates familiar rules and unveils the rationale behind them, revealing a lesser-known aspect. Consequently, it serves as a practical guide for proper and reasonable conduct in user experience.
The book explores various topics, including:
Identification:
Structural
Text
Color
Understanding:
Perception
Memory
Learning
Reactivity
This summary does not encompass the entirety of the book's content. In essence, our approach was to retain practical advice, succinctly encapsulating cognitive psychological explanations and complementing them with examples and illustrations. These elements provide compelling reasons to delve into the complete book. Happy reading!
Identification:
Structural
Our brains are naturally wired to perceive entire structures and objects, influencing our decision-making processes. The following design recommendations further clarify this principle:
Grouping by Proximity, Similarity, or Joint Movement of Objects:
Proximity: Bring together objects, indicators, and texts related to the same subject. Introduce distance between lines with similar structures to underscore their connection within a line.
Similarity: Objects with similar shapes/colors are perceived as belonging to the same group. Opt for a consistent design line when creating interconnected information items.
Movement: Objects that move together on the screen are perceived as related by our brains.
Continuity/Closing:
Recognize that people tend to mentally complete lines and close shapes when designing objects and shapes (e.g., the IBM logo).
Symmetry:
Symmetrical elements in complex scenarios facilitate more straightforward perception.
Character and Background:
Our brain instinctively distinguishes between the character (center of attention) and the background (less critical). Strategically use the background to convey subconscious messages (branding, mood, etc.).
Structured Information:
Enhance readability by presenting information in structured formats such as headings and fields rather than lengthy sentences: separate long numbers and content with components like spaces, hyphens, or periods. Utilize headings and subparagraphs for improved structure.
Considering our spatial vision limitations, especially in message planning:
Location: Place error messages where users are likely to look.
Markup: Mark error messages.
Symbolization: Improve visibility by accompanying error messages with symbols (icons).
Color: Reserve the use of vibrant colors for error messages exclusively.
Message Highlighting: Emphasize messages through separate panels, auditory cues, or flashes.
Text
Johnson surprises us by asserting that reading is not a natural action for humans despite our long history of spoken language. Writing and reading are relatively recent developments and are not as innate as we might think. Though we may deny it, they present challenges for us. The literature engages in an ongoing debate about whether reading is a top-down process (comprehending entire sentences and their contexts) or bottom-up (building meaning from keywords). After a thorough discussion, Johnson argues that a bottom-up approach is more effective but requires a high proficiency in reading and language.
Based on this discussion, the following design recommendations are proposed:
Vocabulary: Utilize familiar and everyday vocabulary.
Character Writing: Use pleasant fonts, avoid double highlights, and refrain from employing all capital letters for entire texts. Avoid characters in fonts that are excessively small.
Background: Steer clear of visually noisy textual backgrounds.
Repetition: Minimize repetitions in the content, both within sentences and between them. Excessive repetition may compel the reader to backtrack and discern important information within the visually similar text.
Layout: Avoid centering texts, as it requires extra effort for the eyes to move from line to line. Avoiding centering is preferable in cases of substantial text, as the brain may struggle with automatic line breaks.
Conciseness: Prioritize concise writing. While it may pose a challenge for the writer, it significantly enhances clarity for the reader.
Color
Our perception of color as humans possesses strengths and limitations, which carry significance in user experience planning. The key features include:
Contrasts: Our vision is optimized for detecting contrasts rather than recognizing absolute colors.
Through Display:
The ability to separate colors depends on how they are displayed, with fainter colors being harder to distinguish.
Smaller or thinner painted objects pose challenges in identifying their color.
A greater distance between objects makes it harder to detect color differences, especially when involving eye movement.
Lighting Conditions: Lighting conditions significantly impact our color perception.
Color Blindness: Some individuals struggle to distinguish specific pairs of colors due to the way the brain analyzes color signals, which involves subtracting rather than adding color waves.
External factors further influence color perception:
Computer Screens / Projectors / Handhelds:
Vary in color display methods and levels.
Specific devices, especially cell phones, may face difficulty accurately displaying grayscale differences.
Angle of View: Some screens, particularly LCD screens, impact content display.
Intense Lighting on a Computer: Reduces the perceived colors.
Based on these considerations, the following design recommendations are proposed:
Color Separation in Several Dimensions: Separate colors not only by hue but also by saturation and brightness.
Use of Different Colors in Separate Channels: Prioritize using black, white, red, green, yellow, and purple, minimizing the use of other colors.
Color Pairs: Avoid color pairs that may be challenging for colorblind individuals to distinguish.
Multi sensory: Consider complementary indicators of other senses, such as shape or iconography, alongside color separation.
High-Contrast Color Separation: Keep colors with high contrast away from each other to enhance perceptibility.
Understanding:
Perception
What we perceive in our minds is influenced by three factors:
The Past: Shaped by what we have previously seen, experienced, or encountered.
The Present: Determined by the current context in which we are seeing or experiencing things.
The Future: Influenced by our goals and objectives.
Considering these factors:
Given the Past: We tend to associate what we are used to with specific indicators or actions. For example, if we are accustomed to a clear indicator in a particular place, we may assume it is there, especially if something similar is present.
Given the Present: Our brain analyzes letters, texts, and indicators based on their surroundings. It treats characters as defined letters depending on neighboring letters and attributes meanings to words based on the context of the sentence.
Considering the Future: We interpret events and experiences in alignment with our perception of attitudes and goals, striving to perform actions that align with specific objectives.
Resulting consonant recommendations:
Clarity: Avoid ambiguity to ensure consistent understanding among different users.
Consistency: Maintain consistency in fixed positions, use of colors, icons, and more.
Goals:
Understand user goals upon application arrival, ensuring explicit scenarios for every purpose in the process.
Display progress concerning goals, highlighting completed tasks and what remains.
Hide actions irrelevant to the user's goal and provide reminders for additional steps.
Moreover, our perception relies more on recognition than recall, leading to the following design recommendations:
Choice: Allow more choices between options and minimize reliance on users remembering and typing actions.
Images: Incorporate images where possible and appropriate, as they are easier to identify than text—design visually recognizable images as more users become accustomed to them.
Thumbnails: Utilize thumbnails to provide hints about full-screen content.
Symbols: Use visual symbols to remind users of their location in the system/site.
Identification Information: Simplify the process of remembering passwords or other identifying information through flexibility in choices and helpful hints where possible.
Memory
Our brains consist of both short-term memory and long-term memory. Contrary to the belief that they were distinct systems, recent understanding suggests they function as a single memory system with different roles closely tied to our perception.
Short Memory:
Short-term memory is the awareness-focused aspect of memory. Key features include low capacity and fickleness.
Design Recommendations (Derived):
Context-Dependent Behavior: Avoid relying on contextual behavior that demands users to remember their current context, as users are easily distracted.
Search: Display the search string and results since users may not always remember their input.
Instructions: Allow users to view instructions for various actions as they perform them, accommodating the limitations of short-term memory.
Long Memory:
In contrast to short-term memory, long-term memory is a storage system where information is retained in the retina through interconnected patterns, sometimes overlapping.
Key features include:
High Capacity
Reduction and shrinkage of stored information, which may lead to errors
Dependence on emotions: the intensity of emotions associated with a memory affects it
Proneness is misleading; exposure to movies or books can create an illusion of event participation.
Derived Design Recommendations:
Passwords: Simplify the process of choosing passwords and auxiliary questions for forgotten user authentication. Users should be allowed to personalize security questions for verification.
Consistency: Enhance the user experience by employing consistent actions, reducing the need to rely on long-term memory for users who struggle with recall.
Learning
There are various types of learning, one of which is learning from experience. While learning from experience is generally straightforward for the brain, it does have limitations and isn't as simple as we might wish. The significant advantage is that once we successfully learn from experience and integrate it into our "automaton," acting accordingly becomes effortless.
Alongside learning from experience, problem-solving is a brain-related action that is challenging for most of us. Being goal-focused is generally easier than focusing on a problem and its solution.
Recommendations for user interface design derived from these insights:
Maximum Simplicity: Keep operations simple; for example, use straightforward search operations without Boolean conditions and incorporate two prioritization levels instead of a complete prioritization. Consistency aids perceived simplicity.
Formulations: Utilize goal-oriented formulations from the user's perspective, incorporating simple and familiar language. Ensure consistent formulations. Simplify the system to be user-friendly, avoiding the necessity for technical understanding. Pay attention to error message wording, considering that users may not be technically trained.
Standards: Use existing industry standards whenever appropriate rather than developing independent standards for the system's use.
Status and Progress: Keep users informed about the current status and progress at each stage, reducing strain on their attention and immediate free memory.
Guiding Users to the Goal: Avoid requiring users to remember specific actions to reach a goal. Guide where to start and proceed.
Explicit and Accurate Updates for Users: Provide clear and accurate updates at every stage.
Evaluation Instead of Calculation: Allow users to perform actions through evaluation where possible, avoiding the need for complex calculations. For example, users can navigate to the middle of a document visually rather than specifying an exact page number.
Error Handling: Minimize situations leading to user errors. Assist users in efficiently rectifying mistakes, offering options for regret, rollback, and correction.
Additionally, it is recommended to design systems by analyzing typical user goals and required actions and planning the interface in the user's language to guide them through specific scenarios effectively.
Reactivity
Johnson discusses our perception of time, specifically how much we wait, as the parameter that most significantly influences our level of satisfaction. He refers to various researchers on the subject, emphasizing that the time parameter surpasses the importance of ease of use. What matters is the system's performance and responsiveness, highlighting a distinction between the two.
Following a detailed analysis of the time it takes the brain to execute different actions, specific response times are proposed for various actions and types of indications, revealing variations.
Derived recommendations for user experience planning beyond the time set for each action:
Actions: Keep the user informed with regular updates about their actions.
System in Use: Inform the user when the system is busy.
Work in the Background: Plan the implementation of software to execute actions in the background, minimizing disruption to the user and allowing uninterrupted use until completion.
Order Planning: Plan the order of actions based on priority rather than the serial order of received requests. For instance, respond immediately to a user's request to rewind a page rather than wait to complete the ongoing action.
Progress Score: Keep the user informed about the system's progress in executing a lengthy operation.
Freedom for Other Actions: Grant the user the freedom to perform other actions while the system is busy.
Cancel: Allow users to change their minds and stop a lengthy action in the middle.
Additionally, systems must be designed from the outset to be lightweight in performance. Restricting the amount and scope of images, allowing thumbnails and bright image gradation, and utilizing less time-consuming elements (e.g., built-in browser operations) are essential considerations. Implementing even some of these strategies can contribute to happier users.
Comments