MODULE - II

Module 2: THE USER INTERFACE DESIGN PROCESS: (06 Periods)

Obstacles and Pitfalls in the Development Path, Usability, The Design Team.

KNOW YOUR USER OR CLIENT: Understanding How People Interact with Computers,
Important Human Characteristics in Design, Perception, Memory, Sensory Storage, Visual
Acuity, Human Considerations in Design-The User’s Knowledge and Experience.
OBSTACLES AND PITFALLS IN THE DEVELOPMENT PATH

Insufficient User Research:

Lack of thorough understanding of user needs, behaviors, and preferences can lead to
designs that don't meet user expectations or solve their problems effectively.

Overcomplicating the Interface:

Trying to include too many features or options can overwhelm users and make the
interface difficult to navigate. It's important to prioritize simplicity and clarity.

Poor Information Architecture:

If the structure and organization of information within the interface are unclear or
illogical, users may struggle to find what they need quickly, leading to frustration.
OBSTACLES AND PITFALLS IN THE DEVELOPMENT
PATH
Ignoring Platform and Device Differences:
• Designing for different devices (desktops, tablets, smartphones) and platforms (iOS,
Android, web) requires considerations for screen sizes, input methods, and user
behaviors. Ignoring these differences can result in poor user experience on certain
platforms.

Inadequate Prototyping and Testing:

• Skipping or rushing through prototyping and testing phases can lead to missed usability
issues and design flaws that are costly to fix later in the development process

Lack of Consistency:
• Inconsistent visual elements, interaction patterns, or terminology across the interface
can confuse users and diminish the overall user experience.
OBSTACLES AND PITFALLS IN THE DEVELOPMENT
Accessibility Issues:
PATH
• Failing to design for accessibility (e.g., for users with disabilities) can exclude a
significant portion of potential users and may also result in legal implications.

Poor Collaboration and Communication:

• Work between designers, developers, and stakeholders can lead to misunderstandings,
delays, and a final product that doesn't meet everyone's expectations
USABILITY
• Learnability: Users should be able to quickly understand how to use the interface when
they first encounter it. This involves intuitive design, clear instructions, and easy-to-
understand visual cues.

• Efficiency: Once users have learned how to use the interface, they should be able to
perform tasks quickly and with minimal effort. Streamlined workflows, shortcuts, and
optimized interactions contribute to efficiency.

• Memorability: Users who have used the interface before should be able to easily
remember how to use it on subsequent visits.
USABILITY
• Error Handling: The interface should prevent errors or guide users in recovering from
errors gracefully. Clear error messages, undo functionalities, and validation checks can
help users avoid and correct mistakes.

• Satisfaction: Users should feel satisfied with the experience of using the interface. This
involves aesthetic appeal, enjoyable interactions, and meeting their expectations and
needs effectively.
USABILITY
Achieving good usability involves several strategies and practices during the UI design
process:
User-Centered Design: Focus on understanding the needs, behaviors, and preferences of
the target users through research, user personas, and user testing.
Iterative Design: Continuously prototype, test, and refine the interface based on user
feedback. This helps identify and address usability issues early in the design process.
Consistency: Maintain consistency in visual design, interaction patterns, terminology,
and navigation across the interface. Consistency reduces cognitive load and enhances
usability.
Accessibility: Design the interface to be accessible to users with disabilities, ensuring that
all users, regardless of abilities, can interact with and benefit from the product.
THE DESIGN TEAM
• UI/UX Designer: This role focuses on both User Interface (UI) and User Experience
(UX) design. Responsibilities include conducting user research, creating wireframes and
prototypes, designing visual elements such as icons and layouts, and ensuring the overall
usability and user satisfaction of the interface.

• Visual Designer: Specializes in creating the visual elements of the interface, such as
color schemes, typography, iconography, and overall visual style. They work closely
with UI/UX designers to ensure visual consistency and alignment with brand guidelines.

• Interaction Designer: Focuses on designing interactive elements and animations within

the interface. This role ensures that interactions are intuitive, responsive, and enhance
the user experience.
THE DESIGN TEAM
• User Researcher: Conducts research to understand user behaviors, needs, and
preferences. They gather insights through methods such as interviews, surveys, and
usability testing, which inform design decisions and help validate design choices.

• Prototype: Responsible for creating interactive prototypes that simulate the

functionality and user flow of the interface. Prototypes range from low-fidelity to high-
fidelity , and are used for user testing and stakeholder presentations.

• Usability Tester: Conducts usability testing sessions with real users to identify usability
issues, gather feedback, and validate design solutions. They play a critical role in
ensuring the interface meets user needs and expectations.
UNDERSTANDING HOW PEOPLE INTERACT WITH COMPUTERS
• User Mental Models: Users develop mental models of how they expect the computer
and its interface to behave based on their past experiences and knowledge. Designers
should align interface behaviors with these mental models to reduce cognitive load and
improve usability.

• Input and Output: Consider how users input commands or information into the
computer and how the computer outputs information. Design interfaces that
accommodate various input methods effectively.

• Feedback and Response Time: Provide immediate and clear feedback to users when
they interact with the interface. This includes visual indicators, progress bars, and
response times that align with user expectations to convey system status and actions
taken.
UNDERSTANDING HOW PEOPLE INTERACT WITH COMPUTERS
• Navigation and Information Architecture: Design intuitive navigation systems and
information architecture that help users easily find and access the information or
features they need. Use hierarchical structures, menus, breadcrumbs, and search
functionalities appropriately.

• Error Handling: Anticipate user errors and provide helpful error messages that guide
users on how to correct mistakes. Design interfaces with error prevention mechanisms to
minimize user frustration and confusion.

• Accessibility: Ensure that the interface is accessible to users with disabilities,

accommodating different abilities and assistive technologies. Design with considerations
for visual impairments, motor disabilities, and cognitive limitations.
UNDERSTANDING HOW PEOPLE INTERACT WITH COMPUTERS
• Consistency and Standards: Follow established UI design principles, patterns, and
standards to create a consistent and familiar experience for users. Consistency in layout,
terminology, and interaction patterns enhances usability and reduces learning curve.

• User Testing and Iteration: Conduct usability testing with real users to observe how they
interact with the interface, identify pain points, and gather feedback for iterative
improvements. Iterate based on user insights to refine the interface and enhance
usability.

• Context of Use: Consider the context in which users will interact with the interface, such
as their environment, goals, and motivations. Design interfaces that are adaptable to
different contexts, ensuring usability across varied scenarios.
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN

• Cognitive Load: Humans have limited cognitive capacity to process information. Design
interfaces that minimize cognitive load by organizing information logically, using
consistent patterns, and avoiding unnecessary complexity.

• Attention Span: Users have limited attention spans, so interfaces should prioritize
important information and minimize distractions. Use visual hierarchy, concise
messaging, and clear calls to action to guide attention effectively.

• Memory: Human memory is fallible and prone to forgetting. Design interfaces that
support users' memory by using familiar patterns, providing clear cues and reminders,
and offering easy access to previously accessed information.
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
• Perception: Humans perceive and interpret visual information differently. Consider
principles of Gestalt psychology to design interfaces that are visually cohesive and easy
to comprehend at a glance.

• Motor Skills: Users interact with interfaces through various input methods . Design for
different levels of dexterity and precision by ensuring touch targets are large enough,
interactions are responsive, and input methods are intuitive.

• Emotions: Human emotions play a significant role in decision-making and user

experience. Design interfaces that evoke positive emotions by considering aesthetics,
tone of voice, and user feedback mechanisms that foster engagement and satisfaction.
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
• Learning and Adaptability: Users learn and adapt to interfaces over time. Design for
progressive disclosure of information, provide on boarding experiences that guide users
through features gradually, and offer help or tooltips where needed.

• Culture and Context: Cultural backgrounds and contextual factors influence how users
perceive and interact with interfaces. Design with cultural sensitivity in mind, using
inclusive imagery, language, and symbols that resonate with diverse user groups.

• Accessibility: Consider diverse abilities and disabilities when designing interfaces.

Ensure accessibility features are implemented to make the interface usable for all users.
PERCEPTION
Perception is the process by which organisms interpret and organize sensory information
from the environment. It involves several key components:
• Sensation: The initial detection of energy from the physical world by sensory receptors
(such as eyes, ears, skin, etc.).

• Transduction: The conversion of this sensory input into neural signals that can be
processed by the brain.

• Processing: The brain organizes and interprets these neural signals to create a coherent
representation of the world. This involves both bottom-up processing (based on the
sensory input) and top-down processing (influenced by prior knowledge, experiences,
and expectations).
PERCEPTION
• Perception: The final interpretation of these signals, resulting in the conscious
experience of the environment. Perception can be influenced by various factors,
including:
• Context: The surrounding environment and situational factors can affect how stimuli are
perceived.
• Expectations: Prior knowledge and expectations can shape perception by influencing
how incoming information is interpreted.
• Attention: What we focus on can determine what we perceive, often filtering out
irrelevant information.
• Emotions: Emotional states can impact perception, making certain stimuli more
noticeable or altering the interpretation of sensory information.
MEMORY
• Memory is the cognitive process that allows us to encode, store, and retrieve
information. It is fundamental to learning, decision-making, and personal identity.
Types of Memory are
1. Sensory Memory:
• Duration: Very brief (milliseconds to a few seconds).
• Function: Holds sensory information just long enough for it to be processed further.
• Examples: Iconic memory (visual) and echoic memory (auditory).

2. Short-Term Memory (STM):

• Duration: Several seconds to a minute.
• Capacity: Limited (about 7 ± 2 items).
• Function: Holds information temporarily for analysis and retrieves information from
long-term memory.
MEMORY
3. Working Memory:
• A subset of short-term memory that involves manipulation and processing of
information.
• Components:
• Phonological loop (verbal information),
• Visuospatial sketchpad (visual and spatial information),
• Central executive (manages and coordinates other components).

4. Long-Term Memory (LTM):

• Duration: Potentially unlimited.
• Capacity: Virtually limitless.
• Function: Stores information over long periods.
MEMORY
Processes of Memory
1. Encoding:
- The process of converting sensory input into a form that can be stored in memory.
- Strategies: Rehearsal, chunking, mnemonics, elaborative encoding.

2. Storage:
- The process of maintaining information in memory over time.
- Involves different brain structures (e.g., hippocampus for long-term memory
consolidation).

3. Retrieval:
- The process of accessing and bringing stored information into conscious awareness.
- Types: Recall (retrieving information without cues), recognition (identifying
information with the help of cues).
SENSORY STORAGE
• Sensory storage, also known as sensory memory, is the shortest-term element of
memory.
• It acts as a buffer for sensory information, allowing us to perceive the world as a
continuous experience rather than as discrete sensory inputs. Sensory storage involves
the initial, momentary recording of sensory information in the sensory system.Key
Characteristics of Sensory Storage

1. Duration:
- Very brief, typically lasting from a few milliseconds to a couple of seconds.
- Different sensory modalities have different durations (e.g., iconic memory for visual
information lasts about 250 milliseconds, while echoic memory for auditory information
can last up to 4 seconds).
SENSORY STORAGE
2. Capacity:
- Very high capacity, capable of holding a vast amount of sensory information.
- However, this information is fleeting and only a small portion is processed into short-
term memory.

3. Automatic:
- Sensory storage operates automatically without conscious effort.
- It captures sensory inputs as they occur, providing a snapshot of the sensory
environment.
SENSORY STORAGE
Types of Sensory Storage
1. Iconic Memory :
• Modality : Visual
• Duration : Approximately 250 milliseconds
• Function : Stores visual information for a brief period, allowing the visual system to
process and interpret scenes.

2. Echoic Memory:
• Modality : Auditory
• Duration : Up to 4 seconds
• Function : Stores auditory information, enabling the brain to process sounds and
speech.
SENSORY STORAGE

3. Haptic Memory :
• Modality: Tactile (touch)
• Duration: About 2 seconds
• Function: Stores information related to touch and texture, aiding in the perception of
physical sensations.
SENSORY STORAGE
Functions of Sensory Storage

1. Integration:
- Sensory storage allows for the integration of sensory information over short periods,
creating a seamless perceptual experience.
- For example, iconic memory helps in perceiving motion by storing successive visual
frames.

2. Attention and Selection:

- Sensory storage provides a temporary holding space for sensory information, allowing
selective attention mechanisms to focus on relevant stimuli.
- This selection process determines which sensory inputs are transferred to short-term
memory for further processing.
SENSORY STORAGE

3. Continuous Perception:
- Sensory storage ensures that our perception of the world remains continuous and stable
despite the brief interruptions between sensory inputs.
- For instance, echoic memory allows us to understand spoken language by retaining
sounds long enough to piece together words and sentences.
VISUAL ACUITY
• Visual acuity is a measure of the eye's ability to resolve fine details and distinguish
shapes and contours. It is a key aspect of vision quality and is often assessed during eye
examinations to evaluate the clarity or sharpness of one's vision. Visual acuity is
typically measured using standardized tests, such as reading letters on an eye chart.
• Key Factors Affecting Visual Acuity are
1. Optical Clarity:
- The clarity of the eye's optical components, including the cornea, lens, and vitreous
humor, affects how light is focused onto the retina.
- Conditions like cataracts or corneal irregularities can impair visual acuity.

2. Retinal Function:
- The health and function of the retina, particularly the macula (responsible for central
vision), are crucial for high visual acuity.
- Retinal diseases such as macular degeneration can significantly reduce visual acuity.
VISUAL ACUITY
Measuring Visual Acuity are
1. Snellen Chart:
• The most common tool for measuring visual acuity, consisting of letters of decreasing
size.
• Visual acuity is expressed as a fraction (e.g., 20/20), where the numerator represents the
test distance (20 feet) and the denominator represents the distance at which a person
with normal vision can read the same line.

2. LogMAR Chart:
• A logarithm of the minimum angle of resolution chart, providing a more precise
measurement of visual acuity.
• Visual acuity is expressed in LogMAR units, where lower values indicate better
vision.
VISUAL ACUITY
3. Jaeger Chart:
• Used to measure near visual acuity, consisting of paragraphs of text in different font
sizes.
• Commonly used to assess reading ability and presbyopia (age-related near vision
decline).
HUMAN CONSIDERATIONS IN DESIGN-THE USER’S
KNOWLEDGE AND EXPERIENCE
1. User Profiles and Personas:
• User Profiles: Gather detailed information about the target user group, including
demographics, job roles, education levels, and technical skills.
• Personas: Create fictional characters representing different segments of the user population,
highlighting their goals, needs, and experience levels.

2. Cognitive Load:
• Minimize the amount of mental effort required to use the product.
• Simplify tasks and interfaces to prevent users from feeling overwhelmed.

3. Mental Models:
• Understand the user’s expectations and thought processes regarding how a system should
work based on their past experiences.
• - Design interfaces that align with these mental models to make the system more intuitive.
HUMAN CONSIDERATIONS IN DESIGN-THE USER’S
KNOWLEDGE AND EXPERIENCE
• Designing for Different Levels of Knowledge and Experience are
1. Novice Users:
• Guidance and Support: Provide clear instructions, tooltips, and tutorials to help new users
understand how to use the product.
• Simplicity: Keep the interface simple and uncluttered, focusing on the most essential
functions.
• Feedback: Offer immediate and informative feedback on actions to help users understand the
consequences of their interactions.
2. Intermediate Users:
• Learning Curve: Gradually introduce more advanced features as users become more
comfortable with the basic functions.
• Customization: Allow users to personalize their interface and workflows to suit their evolving
needs.
• Shortcuts: Provide shortcuts and efficiency tools that intermediate users can learn to improve
their productivity.
HUMAN CONSIDERATIONS IN DESIGN-THE USER’S
KNOWLEDGE AND EXPERIENCE
• Incorporating User Feedback
1. User Testing:
• Conduct usability testing with real users to identify pain points and areas for improvement.
• Use methods such as A/B testing, task analysis, and user interviews to gather insights.
2. Iterative Design:
• Adopt an iterative design process where user feedback is continuously incorporated into
successive versions of the product.
• Make incremental improvements based on user feedback and testing results.
3. Surveys and Analytics:
• Use surveys, questionnaires, and analytics to gather quantitative data on user satisfaction,
behavior, and performance.
• Analyze this data to identify trends and areas where users struggle.
HUMAN CONSIDERATIONS IN DESIGN-THE USER’S
KNOWLEDGE AND EXPERIENCE
• Principles of Human-Centered Design
1. Accessibility:
• Ensure that the product is accessible to users with disabilities by following accessibility
guidelines (e.g., WCAG).
• Consider diverse user needs, such as visual, auditory, cognitive, and motor impairments.
2. Usability:
• Focus on the usability of the product, ensuring it is easy to learn, efficient to use, and
satisfying for the user.
• Apply usability principles such as consistency, error prevention, and recovery.
3. Aesthetic and Minimalist Design:
• Design interfaces that are visually appealing and avoid unnecessary complexity.
• Use whitespace, clear typography, and intuitive icons to enhance readability and
comprehension.