Unit II

USER INTERFACE DESIGN PROCESS

 Know Your User or Client
A crucial step in the user interface design process is understanding the end user or client. This understanding
forms the foundation for creating interfaces that are not only functional but also user-friendly and satisfying.

To create a truly usable system, the designer must always do the following:

• Understand how people interact with computers.

• Understand the human characteristics important in design.

• Identify the user’s level of knowledge and experience.

• Identify the characteristics of the user’s needs, tasks, and jobs.

• Identify the user’s psychological characteristics.

• Identify the user’s physical characteristics.

• Employ recommended methods for gaining understanding of users.

 Understanding the User or Client

• User Research and Analysis

Example - Financial management application

• Creating User Personas

Example - Retail management system

• Understanding Context of Use

Example - Mobile banking app

 Engaging with the Client

• Stakeholder Interviews – Example - Enterprise Resource Planning (ERP)

System

• Requirements Gathering – Example - Healthcare Management System

• Iterative Feedback and Validation – Example - Project Management tool

 Understand the Business Function
Analyzing Business Goals and Objectives
• Stakeholder Interviews – Eg: E-commerce project

• Business Process Mapping – Eg: Supply Chain mangement

Aligning Design with Business Objectives

• Identifying Key Performance Indicators (KPIs) – Eg: Customer Relationship Management

• Prioritizing Features and Functionality(MoSCoW method,Impact-Effort matrix)

Integrating Business Insights into Design

• Iterative Design and Feedback

• Continuous Evaluation and Optimization

 Understand the Principles of Good Interface
and Screen Design

Principles of Good Interface Design

• Clarity and Simplicity

• Visibility and Feedback

• Accessibility and Inclusivity

Graphic design experts have, through perceptual research, derived a number of

principles for what constitutes a visually pleasing appearance.

These include balance, symmetry, regularity, predictability, economy, unity,

sequentiality, proportion, simplicity, and groupings
Balance Vs Instability
Symmetry Vs Asymmetry
Regularity Vs Irregularity
Predictability Vs Spontaneity
Sequentiality Vs Randomness
Economy Vs intricacy
Unity Vs Fragmentation
Pleasing proportions
Simplicity Vs Complexity
 Principles of Good Screen Design

Layout and Composition

• Guideline: Design screens with a clear and logical layout that guides users' attention and
facilitates task completion.
• Grid Systems: Use grid-based layouts to align elements and create visual harmony.

• Whitespace: Incorporate ample whitespace between elements to improve readability and

focus attention on key content.
• Example: The layout of news websites typically follows a grid structure, with headlines,
images, and article summaries arranged in a visually appealing and easy-to-navigate
format.
 Typography and Readability

• Guideline: Select fonts and typography styles that enhance readability and legibility
across different devices and screen sizes.

• Font Choice: Choose fonts that are easy to read and complement the overall design
aesthetic.

• Hierarchy: Use font size, weight, and color to establish a clear hierarchy of information
and guide users' attention.

• Example: Websites like Medium prioritize readability by using a clean and legible serif
font for body text, with larger headings and subheadings to structure content and
improve navigation.
 Visual Consistency and Branding

• Guideline: Maintain visual consistency across screens and ensure that the
interface reflects the brand identity and design language.
• Color Palette: Use a consistent color palette that aligns with the brand's visual
identity and reinforces brand recognition.
• Visual Elements: Incorporate brand elements such as logos, icons, and imagery
consistently throughout the interface
• Example: Social media platforms like Twitter maintain visual consistency by
using the same color scheme, logo placement, and iconography across their web
and mobile applications, reinforcing brand recognition and user familiarity.
 Develop System Menus and Navigation Schemes
• System menus and navigation schemes play a pivotal role in guiding users
through an interface, enabling them to access features and content efficiently

Principles of Menu Design

• Hierarchy and Organization

• Consistency and Predictability

• Visual Clarity and Feedback

 Strategies for Navigation Scheme Design

• Top-Level Navigation

• Breadcrumb Navigation

• Sidebar Navigation
 Implementation and Testing

• Prototyping and Iterative Design

• Usability Testing
 Select the Proper Kinds of Windows

Importance

• Windows serve as the primary containers for displaying information and enabling
user interaction in graphical user interfaces (GUIs).

• Properly designed windows can enhance usability, provide context, and

streamline user workflows.

Guidelines

• Consistency: Use consistent window layouts and styles throughout the interface
for a cohesive user experience.
Continuation…
• Clarity: Ensure windows are clear and organized, with easily identifiable
elements and clear hierarchy.

• Context Sensitivity: Tailor window types to the specific task or context, such
as dialog boxes for user input or error messages.

• Example

• In a word processing application, the main document editing window would

be the primary focus, with additional windows like toolbars and formatting
options available as separate, secondary windows.
 Select the Proper Interaction Devices

Importance

• Interaction devices, such as mice, keyboards, touchscreens, and styluses, play a crucial role in how
users interact with interfaces.

• Choosing the right interaction devices can improve efficiency, comfort, and accessibility for users.

Guidelines

• User Preference: Allow users to choose their preferred interaction devices whenever possible.

• Accessibility: Ensure compatibility with a variety of interaction devices to accommodate users

with different needs.

• Feedback: Provide visual or auditory feedback to confirm user actions, especially for touch-based
devices.
Continuation…

Example

• A mobile application should support both touchscreen interactions for

direct manipulation and keyboard inputs for users who prefer tactile
feedback or have accessibility needs.
 Choose the Proper Screen-Based Controls
Importance
• Screen-based controls, such as buttons, sliders, checkboxes, and dropdown menus,
provide users with ways to interact with the interface and perform actions.
• Proper selection and placement of controls can enhance usability and user
satisfaction.

Guidelines

• Functionality: Choose controls that match the functionality they represent (e.g., use a
checkbox for binary choices).

• Consistency: Maintain consistency in the appearance and behavior of controls throughout

the interface.
Continuation…

• Accessibility: Ensure controls are large enough and spaced adequately for
easy interaction, especially on touchscreens.

• Example: In a music streaming application, a play/pause button should be

easily accessible and visually distinct from other controls to allow users to
control playback efficiently.
 Create Meaningful Graphics, Icons, and Images
Importance

• Graphics, icons, and images can enhance the visual appeal of an interface and convey information quickly
and effectively.

• Well-designed visuals can improve user comprehension and navigation.

Guidelines

• Clarity: Use clear and recognizable graphics that convey their meaning at a glance.

• Consistency: Maintain a consistent style and color scheme for graphics and icons throughout the interface.

• Relevance: Use visuals that are relevant to the context and assist users in understanding the interface or
performing tasks.

• Example: In a weather application, using icons to represent different weather conditions (e.g., sun for sunny
weather, cloud for cloudy weather) helps users quickly understand the forecast.
 Choose the Proper Colors
• Importance

• Colors can evoke emotions, convey information, and enhance visual hierarchy in an interface.

• Proper color choices can improve readability, usability, and aesthetics.

• Guidelines

• Contrast: Ensure there is sufficient contrast between text and background colors for
readability.
• Color Meaning: Use colors that convey the intended meaning (e.g., red for error messages,
green for success).
• Accessibility: Consider color-blindness and other visual impairments when choosing colors,
and provide alternative cues for information conveyed through color alone.
Continuation…

Example: In a traffic light interface for a smart home application, using red to
indicate "off," yellow for "standby," and green for "on" aligns with the
traditional meaning of these colors and helps users understand the status of
connected devices.
 Organize and Layout Windows and Pages
Importance

• The organization and layout of windows and pages can significantly impact user navigation, comprehension,
and efficiency.

• Well-organized layouts can reduce cognitive load, improve task completion times, and enhance overall user
experience.

Guidelines

• Logical Flow: Organize content and controls in a logical sequence that aligns with user tasks and
expectations.

• Whitespace: Use whitespace effectively to separate content and prevent visual clutter.

• Hierarchy: Establish a clear visual hierarchy that guides users' attention to the most important elements on the
screen.
Continuation…

• Example: In a productivity application, organizing toolbars and menus

based on the frequency of use and grouping related functions together
can streamline user workflows and improve productivity