Oct 11 – 13

Scheme-
Lesson 1: Introduction to basic principles and methodology for good user interface design
Lesson 2: Drawing on a background of human information processing and human factors.
Lesson 3: Techniques for user-centred analysis and design;
Lesson 4: Use of prototyping tools,
Lesson 5: introduction to Usability Engineering and other evaluation methods;
Lesson 6: Methods for enhancing system usability and systems ergonomics.
Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Lesson 1
Introduction to User Interface (UI) Design and Principles

Learning Objectives:
Explain the role of human factors in UI design for computer science applications.
Identify core principles for creating effective user interfaces in software development.
Apply basic UI design methodology for a user-centered approach to building user-friendly
computer programs.

Lesson Outline:

I. Introduction (15 minutes)

[1] UI Design (5 minutes)

UI design, which stands for user interface design, is a crucial part of creating a positive user
experience (UX). A well-designed interface will be both beautiful and functional, making it a
pleasure for users to interact with. It involves creating the look and feel of the interface that users
interact with on digital products. This could be the screens and buttons on a website, the layout of a
mobile app, or even the controls on a physical device. Some key aspects of UI design:
a) Visual design: This is the aesthetic side of things. UI designers use color palettes, fonts,
icons, images, and white space to create an interface that's both pleasing to the eye and easy
to understand.
This includes things like the use of color, typography, imagery, and white space. A UI
designer will want to create an interface that is both aesthetically pleasing and easy to
understand.
b) Usability: This is the core principle. A well-designed UI prioritizes ease of use. Users should
be able to find information, complete tasks, and navigate the interface intuitively and
efficiently.
The main focus of UI design is to make sure that interfaces are easy and intuitive to use.
Users should be able to find what they're looking for and complete tasks quickly.
c) Interactivity: UI design also considers how users will interact with the interface. This
includes designing buttons, menus, forms, and other elements that users click, tap, or
manipulate to achieve their goals. The focus is on making these interactions smooth and free
of friction.

UI DESIGN PRINCIPLES
1. Consistency: Maintaining consistency in visual elements (colors, fonts, button styles) across the
interface builds user trust and familiarity. Imagine using an app where buttons look
completely different on each screen – that would be confusing!

Example: Throughout Microsoft Word, the ribbon interface maintains consistent visual
elements:
Colors: A core blue color scheme is used for buttons and menus, with specific accent
colors highlighting active sections or selected options. This creates a sense of familiarity and
reduces confusion for users navigating different parts of the application.
Fonts: A consistent font style (e.g., Calibri) is used across the interface for menus, text
boxes, and dialog windows. This creates a clean and unified visual experience.
Button Styles: Buttons within the ribbon share a similar style (rounded corners,
consistent size), with variations in color or icons to differentiate functions. This allows users
to quickly identify buttons and understand their purpose based on visual cues.

2. Efficiency: The UI should be designed to allow users to complete tasks with minimal steps and
effort. This involves streamlining workflows, offering quick access to frequently used
features, and minimizing the need for complex navigation or repetitive actions.

Example: Microsoft Word offers features to streamline workflows:

Quick Access Toolbar: Users can customize this toolbar with frequently used commands
(e.g., Bold, Italics, Save), allowing quick access to essential tools without navigating through
menus.
Keyboard Shortcuts: Many functionalities can be accessed through keyboard shortcuts
(Ctrl+B for Bold, Ctrl+S for Save). This allows experienced users to work efficiently without
relying on the mouse extensively.
Styles and Templates: Pre-defined styles (headings, body text) and document templates
help users format documents quickly and consistently, saving them time and effort.

3. Affordance: UI elements should visually communicate their functionality. Buttons, menus, and
icons should be instantly recognizable in terms of their purpose within the context of the
application. This allows users to understand how to interact with the interface intuitively,
without needing extensive instructions.
 Example: Word's interface uses clear visual cues to communicate functionality:
Icons: Icons on the ribbon toolbar are easily recognizable symbols representing their
actions (e.g., floppy disk icon for Save, scissors icon for Cut). This allows users to understand
button functions intuitively, even without reading text labels.
Menu Titles: Menu titles clearly describe their content (e.g., "Insert" tab for adding images
or tables). This helps users identify the appropriate section for specific tasks.
Formatting Options: Formatting options like bold or italic text styles are visually
represented in the formatting toolbar (bold font for bold text, italic font for italic text). This
allows users to see the visual outcome of their formatting choices before applying them.

4. Clarity and Simplicity: A clean and uncluttered interface is easier to grasp. Users shouldn't be
overwhelmed by excessive information or complex layouts.

Example: Word's interface avoids clutter and prioritizes essential information:

Default Layout: The default layout focuses on the document editing area, with menus and
toolbars tucked away neatly in the ribbon. This minimizes distractions and allows users to
focus on their content.
Contextual Menus: Right-clicking on text or objects within the document brings up a
context-sensitive menu with relevant options for formatting or manipulation. This avoids
overwhelming users with an extensive list of options at all times.
Task Panes: Information overload is avoided by using task panes for specific functions
(e.g., reference pane for citations). These appear only when needed, keeping the main
interface clean and focused.

5. Feedback: The UI should provide clear and timely feedback to users about their actions and the
system's state. This includes informing users about the progress of tasks, the outcome of
their actions (success/failure), and offering clear error messages with potential solutions.
Feedback helps users understand what's happening and troubleshoot any issues efficiently.

Example: Word provides clear feedback on user actions and system status:
Progress Indicators: While saving a document, a progress bar indicates the upload
process. This informs users about the status of the operation and prevents confusion.
Confirmation Dialogs: Actions like deleting text or closing a document without saving
might trigger confirmation prompts. This provides feedback and allows users to confirm or
undo their actions if necessary.
Error Messages: If a user attempts an invalid action (e.g., entering incorrect formatting
values), Word displays clear error messages explaining the issue and suggesting solutions.
This helps users rectify mistakes and understand the limitations of the system.
6. Accessibility: The UI should be usable by a diverse range of users, including those with
disabilities. This might involve features that accommodate different visual needs (color schemes,
font sizes) or provide alternative ways to interact with the application (keyboard navigation
alongside mouse interaction).
Example: Word offers features to cater to diverse users:
High Contrast Mode: Users with visual impairments can enable high contrast mode for
improved readability. This adjusts color schemes to enhance text and interface elements.
Font Size and Zoom: Users can adjust font size and zoom levels to personalize the viewing
experience and accommodate different visual needs.
Dictation: Word integrates with dictation tools, allowing users to create documents by
speaking their content. This is helpful for users with mobility limitations or who prefer voice
commands.

By incorporating these UI design principles, Microsoft Word offers a user-friendly and

accessible experience for a wide range of users.

7. Mental Models: Understanding how programmers think and approach tasks can guide UI
design decisions. For example, a code editor might group functionalities based on common
programming workflows (e.g., code editing, debugging, testing).

Example: Microsoft Word organizes functionalities based on common writing and editing
tasks. The "Home" tab groups tools for basic formatting (font styles, font size, alignment),
while the "Insert" tab offers options for adding images, tables, and other elements. This
aligns with a user's mental model of document creation, where formatting and content
insertion are separate steps.

8. Learnability: The interface should be intuitive and easy to learn for new users, while still
offering advanced features for experienced users. Consider offering interactive tutorials or context-
sensitive help within the application.

Example: Microsoft Word offers a built-in "Getting Started" guide that walks new users
through basic functionalities like creating documents, formatting text, and inserting images.
This allows users to learn the interface quickly. Context-sensitive help, also known as
"ScreenTips," appear when hovering over an icon or menu option. These provide brief
explanations of the feature's purpose, aiding users in understanding the interface without
needing extensive manuals.

9. Error Prevention: Design UIs that prevent users from making errors or mitigate the
consequences of mistakes. This could involve features like auto-correction for typos in code or
confirmation prompts before irreversible actions.
 Example: AutoCorrect automatically fixes common typos (e.g., "teh" to "the") as you type,
preventing spelling errors. Spell check highlights misspelled words throughout the
document, allowing users to correct them before finalizing the document. This helps
maintain professionalism and clarity within the written content. Microsoft Word also offers
grammar check, which suggests improvements for sentence structure and clarity,
preventing potential errors in writing style.

10. User-Centered Design: This principle emphasizes putting the user at the forefront of the
design process. Understanding user needs and goals through research (personas) guides UI
decisions that cater to their specific requirements.

Example: Microsoft Word demonstrates user-centered design in several ways:

Focus on Common User Needs: The core functionalities of Word (formatting text, inserting
elements, editing documents) cater to the general needs of users who create and edit text-
based documents.
Intuitive Interface: The ribbon interface is designed to be intuitive, with easily recognizable icons
and clear menu options. This allows users, even those unfamiliar with word processing
software, to get started quickly.
Customization Options: Word offers customization options like the Quick Access Toolbar,
allowing users to personalize the interface and prioritize frequently used features. This
caters to individual workflows and preferences.

11. User Control: Users should feel in command. This means providing clear feedback when
actions are taken, allowing users to undo mistakes, and offering multiple ways to achieve
tasks (like keyboard shortcuts for power users).

Example: Word empowers users with features that promote a sense of control:
Undo/Redo Functionality: Users can easily undo or redo mistakes by using the dedicated
buttons or keyboard shortcuts (Ctrl+Z for undo, Ctrl+Y for redo). This allows for seamless
correction and experimentation without fear of permanent changes.
Multiple Ways to Achieve Tasks: Many tasks can be accomplished through different methods.
For example, text formatting can be done using the ribbon buttons, keyboard shortcuts
(Ctrl+B for bold), or right-clicking and selecting from the context menu. This caters to user
preferences and working styles.
Status Bar: The status bar at the bottom of the window displays information like page number,
word count, and editing mode (overwrite or insert). This provides users with real-time
feedback on their document and allows them to adjust their workflow accordingly.

UI Core Team Members Discipline:

1) User Experience (UX) Designer: Focuses on understanding user needs, behaviors, and pain
points through research methods (user interviews, surveys). They translate this research
into user flows, wireframes, and prototypes that define the overall user journey within the
software.
2) User Interface (UI) Designer: Works closely with UX designers to translate user needs and
functionalities into visually appealing and user-friendly interfaces. They determine the
visual style (colors, fonts, icons), layout, and interaction patterns of the software.
3) Software Developer (Front-End): Responsible for translating UI designs and prototypes
into functional code that implements the visual elements and interactive behaviors of the
software. They ensure the UI functions smoothly and integrates seamlessly with the back-
end systems.
4) Product Manager: Defines the product vision, roadmap, and prioritizes features based on
user needs and business goals. They manage the overall product development process and
ensure alignment between different teams.
5) Visual Designer: Creates visual assets like illustrations, icons, and brand elements that
enhance the overall visual identity and user experience of the software.
6) Interaction Designer: Focuses on the interactive aspects of the software, ensuring smooth
transitions, animations, and user interactions that feel intuitive and engaging.
7) Usability Tester: Conducts usability testing sessions with real users to identify any usability
issues or areas for improvement in the UI design. Their feedback helps refine the design
before final implementation.
8) Content Writer/Editor: Creates clear, concise, and user-friendly text content for the
software, including labels, error messages, and user guides. They ensure the language is
appropriate for the target audience and supports a positive user experience.
9) Psychology: Understanding human behavior and cognitive processes helps designers
create interfaces that are intuitive and meet user needs.
10) Information Architecture (IA): Organizing and structuring information within the
software in a logical and user-friendly way is crucial for efficient navigation and content
discovery.
11) Accessibility: Ensuring the UI is usable by people with disabilities requires knowledge of
accessibility standards and best practices.
12) Data Analysis: Analyzing user data and research findings informs design decisions and
helps the team measure the success of the UI in terms of user engagement and task
completion.

Lesson 2: Drawing on a background of human information processing

and human factors
Introduction

When designing interactive systems and user interfaces, it is crucial to have a strong understanding of
how humans process information and interact with technology. Drawing on the fields of human
information processing and human factors can provide valuable insights to guide effective interface
design, such as in the example of the Microsoft Word application.

Human Information Processing

Human information processing refers to the cognitive mechanisms by which people perceive, attend to,
store, retrieve, and use information. Key concepts include:

 Perception: How people make sense of sensory input from the environment. For example, in
Microsoft Word, the use of clear visual hierarchies, intuitive icons, and color-coding helps users
quickly perceive and make sense of the various tools and functions available.
 Attention: The selective focus on certain information while ignoring other stimuli. In Word, the
use of contextual ribbons, task-specific toolbars, and minimalist design helps users focus on the
relevant information and tools for their current task, reducing cognitive load.
 Memory: The encoding, storage, and retrieval of information over time. Word's use of familiar
keyboard shortcuts, customizable Quick Access Toolbar, and auto-save features support users'
cognitive memory and reduce the need to recall complex sequences.
 Decision making and problem solving: The cognitive processes involved in making choices and
solving problems. Word's error-checking, suggested actions, and contextual help features assist
users in making informed decisions and troubleshooting issues more effectively.

Understanding these fundamental information processing capabilities can inform design choices to
support natural, intuitive interaction in Microsoft Word.

Human Factors

Human factors is the study of how humans interact with products, systems, and environments. It
examines factors such as:
  Anthropometrics: The physical dimensions and capabilities of the human body. Word's adjustable
user interface, support for accessibility features, and optimized keyboard/mouse interactions
accommodate a wide range of user physical abilities.
 Ergonomics: The design of equipment and environments to optimize human performance and
well-being. Word's customizable layout, flexible document view modes, and integrated break
reminders help users maintain comfort and productivity while working.
 Cognitive Ergonomics: The mental workload, decision making, and information processing of
users. Word's intuitive command structure, contextual menus, and intelligent assistance features
reduce cognitive effort and support users' natural thought processes.
 Sensory and Perceptual Factors: How humans perceive and make sense of stimuli. Word's clear
typography, high-contrast design, and responsive visual feedback cues help users perceive and
interpret information more effectively.

Considering these human factors in the design of Microsoft Word can help ensure that the application is
tailored to users' needs, limitations, and expectations.

Applying Insights

By drawing on knowledge of human information processing and human factors, the designers of
Microsoft Word have been able to:

 Structure information and tasks to align with how people naturally perceive and process data,
such as through the use of logical document organization, hierarchical menus, and intuitive
formatting tools.
 Optimize interface layouts, controls, and feedback to support efficient, error-free interaction, like
the placement of commonly used functions, clear visual indicators, and helpful tooltips.
 Anticipate and mitigate potential sources of user confusion or frustration, such as providing
context-sensitive help, undo/redo functionality, and built-in templates.
 Create more intuitive, accessible, and satisfying user experiences that cater to a wide range of user
preferences and abilities.

Integrating these principles throughout the design and development of Microsoft Word has led to a more
user-centered, effective, and productive word processing application.
Conclusion

Understanding human information processing and human factors is a crucial foundation for designing
effective user interfaces and interactive systems, as demonstrated by the example of Microsoft Word. By
applying these insights, designers can create experiences that are better aligned with people's cognitive
capabilities and expectations, leading to more usable, efficient, and satisfying software applications.

Lesson 3: Techniques for User-Centred Analysis and Design

Introduction

Designing effective user interfaces requires a deep understanding of the people who will be interacting
with the system. User-centred analysis and design techniques are essential for ensuring that the final
product meets the needs, goals, and expectations of the target users. Microsoft Word provides a
compelling example of how these techniques can be applied to create a more user-friendly and productive
word processing application.

User Research

The first step in user-centred design is to gather insights about the users through various research
methods, such as:

 Interviews: Conducting one-on-one interviews with a diverse set of Word users to understand
their pain points, workflows, and feature preferences.
 Observations: Observing how users interact with Word in their natural work environments to
identify usability issues and opportunities for improvement.
 Surveys: Gathering feedback and usage data from a larger sample of Word users through online
or in-app surveys.

This user research helps the design team develop a deep understanding of the target audience and their
specific needs.

Persona Development
Based on the user research findings, the design team can create detailed user personas that represent the
key user segments. For example, Word's personas might include:

 "Busy Professional": A corporate employee who needs to quickly create and format professional-
looking documents.
 "Student Writer": A student who uses Word for academic writing and research tasks.
 "Creative Freelancer": A self-employed worker who leverages Word's advanced formatting and
collaboration features.

These personas help the team make design decisions that cater to the specific goals, pain points, and
behaviors of the target users.

Usability Testing

Throughout the design process, it's crucial to validate the interface with real users through usability
testing. In the case of Word, this might involve:

 Prototype Evaluation: Asking users to complete common tasks using interactive prototypes of
new features or interface designs.
 Contextual Enquiry: Observing users as they perform real-world tasks in their own work
environments using the actual Word application.
 A/B Testing: Comparing user reactions and performance between different design variations to
identify the most effective solutions.

Usability testing helps the design team identify pain points, gather user feedback, and iterate on the
interface to ensure it aligns with user needs.

Design Principles

Grounded in the user research and testing insights, the design team can establish a set of user-centred
design principles to guide the development of Word. These principles might include:

 Consistency: Ensuring that interface elements and interactions are unified across the entire Word
application.
  Learnability: Designing features and workflows that are intuitive and easy for new users to
understand.
 Efficiency: Optimizing common tasks and power-user functionality to improve productivity.
 Accessibility: Incorporating inclusive design elements to support users with diverse abilities.

Adhering to these principles throughout the design and development process helps ensure that Word
remains highly usable and centred on the needs of its target audience.

Conclusion

By employing user-centred analysis and design techniques, the team behind Microsoft Word has been
able to create a word processing application that is highly effective, efficient, and tailored to the needs of
its diverse user base. Through ongoing user research, persona development, usability testing, and the
application of user-centred design principles, Word continues to evolve and improve, setting a
benchmark for user-centric software design.