CIT811: USER INTERFACE DESIGN AND ERGONOMICS

UNIT 1 FUNDAMENTALS OF USER INTERFACE DESIGN

Here are the examinable points covered in the unit User Interface Design:
User Interface (UI):
 Definition: The aggregate of means by which people interact with a system. This includes the
way users provide input (e.g., typing, clicking) and receive output (e.g., text, images) from a
computer program, machine, device, or any other complex tool.
 Significance: A well-designed UI is crucial for user experience (UX). It allows users to interact
with a system easily and efficiently to achieve their goals. Imagine trying to drive a car without
a steering wheel, gas pedal, or brake! A user interface provides users with the tools they need
to control a system and see the results of their actions.
Types of User Interfaces:
 Graphical User Interfaces (GUI): GUIs use visual components like icons, menus, and
windows to allow users to interact with a system. This is the most common type of UI used
today in operating systems, mobile apps, and many software programs.
 Web-based User Interfaces (WUI): WUIs are accessed through a web browser and allow
users to interact with applications and data over the internet. Webmail and online banking are
examples of applications that use a WUI.
 Command Line Interfaces (CLI): CLIs require users to type commands to interact with a
system. While less common today, CLIs are still used for system administration tasks and by
programmers.
 Touch User Interfaces: Touch interfaces use touchscreens to allow users to interact with a
system through touch gestures. This is a common UI for smartphones and tablets.
 Other UI Types: There are many other specialized user interfaces designed for specific
purposes. For example, voice user interfaces (VUIs) allow users to interact with a system
using spoken commands, while virtual reality (VR) user interfaces immerse users in a
simulated environment.
History of User Interfaces:
 The history of user interfaces can be traced back to the early days of computing. Here are
some key milestones:
o Batch Interface (1945-1968): Users submitted jobs on punch cards or magnetic tape and
waited for batch processing to complete.
o Command-Line Interface (1969 to present): CLIs provided a more interactive way for users
to interact with computers by typing commands.
o Graphical User Interface (1981 to present): GUIs revolutionized user interaction with
computers by introducing visual elements and making computers more accessible to everyday
users.
User Interface Modalities and Modes:
 Modality: A modality is a way that a user interface transmits information or accepts input.
Common modalities include visual (seeing information on a screen), auditory (hearing
sounds), and tactile (feeling physical feedback). User interfaces can employ multiple
modalities to provide a richer user experience.
 Mode: A mode is a distinct state within a user interface where the same input can produce
different results. For example, a text editor might have different modes for entering text,

1
 formatting text, or searching for text. Having too many modes can make a UI difficult to learn
and use.
UNIT 2 DESIGNING GOOD USER INTERFACES
Essentials of Interface Design:
 Three pillars: Features (what the application does), Function (how well it works), and Face
(user-friendliness).
 Goal: Achieve a happy face (user-friendly interface) through Zero Training (minimal training
needed) and friendly, informative messages.
Designing a Good User Interface:
 Iterative process: Design, implement, evaluate, and refine until successful.
 Consider different user types and provide customizable options if necessary.
 Use a combination of new and experienced users for testing.
Tips for Designing Good User Interfaces:
1. Consistency: Ensure consistent behavior across the interface (button placement, wording,
color scheme).
2. Set Standards: Establish and follow design standards for a cohesive user experience.
3. Explain the Rules: Clear and consistent messages minimize the need for extensive
explanations.
4. Support Different Users: Cater to both novice and expert users with appropriate interfaces.
5. Navigation: Make it easy to navigate between and within screens (logical flow, left-to-
right/top-to-bottom organization).
6. Wording: Use clear, positive, and consistent language in messages and labels.
7. Understand Widgets: Use appropriate widgets for tasks and follow user interface standards.
8. Evaluate Other Applications Critically: Don't blindly imitate poorly designed interfaces.
9. Color Usage: Use color sparingly, consider color blindness, and maintain consistency across
platforms.
10. Contrast Rule: Ensure good readability with dark text on light backgrounds or vice versa.
11. Fonts: Use easy-to-read fonts like serif fonts (e.g., Times Roman) and maintain consistency.
12. Gray Out, Don't Remove: Disable features instead of removing them to maintain a clear
mental model for users.
13. Non-Destructive Defaults: Set default buttons to non-destructive actions to avoid accidental
data loss.
14. Field Alignment: Left-justify edit fields with corresponding right-justified labels for clarity.
15. Data Justification: Align data columns appropriately (right-justify integers, decimal align
decimals, left-justify text).
16. Avoid Busy Screens: Strive for clean and uncluttered interfaces (ideally below 40% overall
density).
17. Grouping: Group related items visually to improve organization.
18. Window Positioning: Open new windows centered on the relevant area for user focus.
19. Pop-up Menus: Don't rely solely on pop-up menus; provide primary functionality through
readily accessible options.
2
 Understanding Users:
 Focus on the user's job and how the software helps them achieve their goals.
 Users prioritize usability over intricate features.
 The interface should accurately reflect the software's capabilities.
 Design for flexibility to accommodate unforeseen uses.
 Users avoid instruction manuals; prioritize clear and helpful error messages.
Remember, these are the key points for designing good user interfaces according to the
provided unit.
UNIT 3: GUI
Graphical User Interface (GUI)
 Definition: A user interface that allows people to interact with electronic devices using visual
elements like icons, menus, and windows instead of text commands.
 Benefits: Easier to use for people with little computer experience.
History of GUI
 Precursor: Developed by researchers at Stanford Research Institute using a light pen for
manipulating objects in drawings.
 PARC user interface: Introduced by Xerox PARC, featuring elements like windows, menus,
icons, and pointing devices. This is considered the foundation for most modern GUIs.
 Evolution: Following PARC, the first GUI-centric computer operating systems were developed
like Xerox 8010 Star Information System, Apple Lisa, Atari ST, and Commodore Amiga.
 WIMP interfaces: The most common GUIs today use the WIMP paradigm (Windows, Icons,
Menus, and Pointing device).
 Post-WIMP interfaces: Newer interfaces for touchscreens and mobile devices use variations of
WIMP or entirely different approaches.
Elements of GUI
 Divided into two categories: structural and interactive elements.
Structural Elements
 Window: An area on the screen displaying information, podendo ser aberto e fechado (which
can be opened and closed), minimized, maximized, and moved around. Different types of
windows include container windows (show file systems), browser windows (navigate through
web pages), and dialog boxes (display information or prompt for user input).
 Menu: A list of options that the user can select using a pointing device or keyboard. There are
different menu types like menu bar, pull-down menus, and context menus.
 Icon: A small picture that represents an object, program, or command.
 Tabs: Rectangular boxes that allow switching between different views or functionalities.
Interactive Elements
 Cursor: An indicator showing the position where user input will be applied.
 Pointer: A graphical image that indicates the location of the pointing device and can be used
for selection.
 Selection: A list of items chosen by the user for operations.
 Adjustment handle: An indicator for initiating drag-and- drop operations.
3
 Three-Dimensional GUIs (3D GUIs)
 A concept where interfaces use 3D graphics for a more immersive experience.
 Mostly used in science fiction but being explored for practical applications like collaborative
work in virtual reality.
 Some existing implementations use 3D graphics for window management and user switching
but are still primarily 2D interfaces.
This summary covers the key concepts covered in the unit and would be essential for
answering exam questions.
UNIT 4: HUMAN COMPUTER INTERACTION (HCI):
Introduction
 HCI studies interaction between humans and computers.
Goals of HCI
 Improve interaction between users and computers.
 Make computers more usable and user-friendly.
Differences with other related fields
 HCI focuses on user interface design for computer systems.
 User Interface Design is for a broader range of devices.
 Human Factors is broader than HCI, encompassing user interaction with various machines.
 Ergonomics is similar to Human Factors but with less emphasis on repetitive tasks and
physical design.
Future Development of HCI
 Ubiquitous communication (high-speed network access)
 High functionality systems (complex systems with many features)
 Increased use of computer graphics
 Mixed media (systems handling various data types like image, sound, text)
 High-bandwidth interaction (faster interaction due to speed improvements)
 Large and thin displays (advancements in display technology)
 Embedded computation (computers integrated into everyday objects)
 Augmented reality (superimposed information on the real world)
 Group interfaces (interfaces for collaboration)
 User Tailorability (users customizing applications)
 Information Utilities (public information services)
Human-Computer Interface
 The point of communication between human and computer.
 Involves the task environment, machine environment, input flow, output flow, and feedback.
UNIT 5: Ergonomics Unit
This unit covers the following key aspects of ergonomics relevant to exams:
1. Introduction to Ergonomics:

4
 Definition: Ergonomics studies the interaction between humans and work, aiming to optimize
their fit.
 Derived from Greek words: ergon (work) and nomoi (natural laws).
2. Five Aspects of Ergonomics:
 Safety: Ensures equipment and workplaces are designed to prevent injuries.
 Comfort: Focuses on creating a pleasant and comfortable user experience.
 Ease of Use: Designs products and systems that are intuitive and straightforward to use.
 Productivity/Performance: Optimizes designs to improve efficiency and effectiveness.
 Aesthetics: Considers the visual appeal and user experience of a product or system.
3. History of Ergonomics:
 Early foundations in Ancient Greece.
 The term "ergonomics" was coined in the 19th century by Wojciech Jastrzebowski.
 Frederick Winslow Taylor's "Scientific Management" and Frank and Lillian Gilbreth's "Time
and Motion Studies" are historical examples of ergonomics principles being applied.
 World War II highlighted the importance of ergonomics in complex machinery and weaponry.
4. Ergonomics in the Workplace:
 Focuses on employee safety and well-being.
 Ergonomics can reduce costs by preventing injuries and improving efficiency.
 Two approaches:
o Reactive ergonomics: Addresses problems after they occur.
o Proactive ergonomics: Identifies and fixes potential issues before they become problems.
5. Efficiency and Ergonomics:
 Ergonomics aims to make tasks and tools easier to use, thereby increasing efficiency.
 Increased efficiency leads to time savings and improved productivity.
6. Benefits of Ergonomics:
 Improved health and safety for employees.
 Increased productivity and efficiency.
 Reduced costs associated with workplace injuries.
 Enhanced user experience and satisfaction.
7. Fields of Ergonomics (choose two to study for exams):
 Engineering Psychology: Applies psychology principles to design equipment and systems
that consider human capabilities and limitations.
 Macroergonomics: Takes a broad view of ergonomics, examining organizational structures,
work goals, and the overall system's efficiency.
 Seating Ergonomics: Focuses on designing chairs that provide proper support and minimize
pressure on the back.
Exam-oriented points:
 Remember the five aspects of ergonomics and how they influence design.
 Understand the history of ergonomics and its key figures.
5
 Know the benefits of ergonomics in the workplace and how it improves efficiency.
 Be familiar with at least two different fields of ergonomics (e.g., Engineering Psychology and
Macroergonomics).
By focusing on these key points, you can effectively prepare for ergonomics-related exam
questions.
MODULE 2
Unit 1: Human Capabilities in User Interface Design
3.1 Human Processor Model
 This is a cognitive modeling method used to calculate the time it takes to perform a task.
 It breaks down human information processing into stages: perception, cognition, motor
processing, and memory storage.
 The model includes processors (visual, auditory, cognitive, motor) and memories (visual
image, auditory image, working memory, long-term memory).
 By following the connections in the model and using established time values, you can estimate
how long a user will take to complete a task.
3.2 Perception
 This is the process of attaining awareness or understanding of sensory information.
 There are two main types of perception: passive and active.
 Passive perception is a linear model where sensory information is received, processed by the
brain, and then a response is produced.
 Active perception is a dynamic process where the brain uses prior experiences and
expectations to influence what we perceive.
3.3 Motor Skills
 These are learned movements that can be gross (large muscle movements) or fine (small
muscle movements).
 Ambidexterity is the ability to use both hands equally well.
 Motor skills can be affected by fatigue, injury, or neurological disorders.
 User interfaces should be designed to be usable by people with a variety of motor skills.
3.4 Colour
 Colour is a product of light interacting with the eye and brain.
 There are three main types of cone cells in the retina that perceive different wavelengths of
light (red, green, blue).
 Colour can be a powerful tool in user interface design, but it should be used appropriately to
avoid confusing users or excluding people with colour vision deficiencies.
3.5 Attention
 This is the cognitive process of selectively concentrating on one aspect of the environment
while ignoring others.
 Our ability to multitask depends on the similarity of the tasks and their demands on our
processing resources.
 A good user interface should be designed to attract and hold the user's attention.
3.6 Errors
6
 Errors are deviations from accuracy or correctness. Mistakes are a specific type of error
caused by human fault.
 User interfaces should be designed to minimize errors by being clear, predictable, and
forgiving.
Examiner Pointers
 Be able to explain the Human Processor Model and its components.
 Understand the difference between passive and active perception.
 Describe the different types of motor skills and how they can affect user interaction.
 Explain how colour can be used effectively in user interface design.
 Discuss the concept of attention and its importance in user interface design.
 Be able to identify ways to minimize errors in user interfaces.

Unit 2: Understanding Users and Task Analysis

This unit focuses on the importance of understanding users and their tasks in designing
effective user interfaces (UI). Here are the key takeaways:
Understanding Users:
 Why it's important: A good UI caters to the specific needs and goals of its target users.
Ignoring this can lead to interfaces that are difficult or frustrating to use.
 How to do it: Identify your target user group and conduct research to understand their tasks,
workflows, and expectations. This might involve interviews, user observation, or surveys.
Task Analysis:
 What it is: The process of breaking down user tasks into their component steps. This helps
designers understand the specific actions users need to perform and the information they
require at each stage.
 The stages:
o Identify Users: Define the target user group.
o Learn about Users' Tasks: Understand what tasks users want to accomplish with the system.
o Develop Representative Tasks: Choose a few key tasks that represent the core functionalities
of the system.
o Evaluate: Ensure the chosen tasks accurately reflect user needs and are well-defined.
Using Tasks in Design:
 Scenarios: These describe user interactions with the system step-by-step for each
representative task. This helps designers visualize the user experience and identify potential
problems.
 Storyboards: Sequential sketches depicting the screen interface and user actions at key
points in a task. They help communicate the design concept to users and stakeholders.
Creating the Initial Design:
 Intelligent Borrowing: Leverage existing design patterns and successful interfaces from
other applications. This saves time, improves usability, and ensures consistency with familiar
interfaces.

7
 Benefits of Frameworks: Utilize established UI frameworks like Windows or Macintosh to
benefit from pre-built components, style guides, and development tools. This promotes
consistency and reduces design effort.
 Copying Interaction Techniques: Learn from well-designed applications and adapt their
interaction techniques to your context. Understanding the rationale behind existing designs
helps make informed decisions.
 When to Invent: While borrowing is valuable, there might be situations where innovative
solutions are necessary. However, this should be a well-considered decision for critical
functionalities.
Exam Points:
 Explain the importance of understanding users in UI design.
 Describe the stages involved in task analysis.
 Discuss the role of scenarios and storyboards in UI design.
 Explain the concept of "intelligent borrowing" in UI design.
 Discuss the advantages of using existing UI frameworks.
 Explain when it might be necessary to invent new interaction techniques.
.
Unit 3: User Centered Design (UCD)
Exam Points:
 Introduction to User-Centered Design (UCD):
o Definition: UCD is a design philosophy and process that prioritizes the needs, wants, and
limitations of the end-user throughout the design process (interface or document).
o Key characteristic: iterative design process with user testing and feedback.
 Purpose of UCD:
o Understand user needs and goals.
o Improve usability and learnability.
o Increase user satisfaction and productivity.
 Major Considerations of UCD:
o Visibility: Users can easily understand the document structure and functionality.
o Accessibility: Information can be found quickly and easily through various methods
(navigation, search, etc.).
o Legibility: Text is easy to read using appropriate font size, style, and contrast.
o Language: Clear, concise language tailored to the audience (avoid jargon).
 UCD Models and Approaches:
o Focuses on user participation throughout the design process.
o Examples: Cooperative Design, Participatory Design (PD), Contextual Design.
o All follow the ISO standard for Human-centered design processes.
 Participatory Design (PD):
o Users actively involved in the design process alongside developers and researchers.
o Users contribute to problem definition, ideation, and evaluation.
8
o Increases user empowerment and creates solutions that better meet user needs.
Additional Notes:
 Rhetorical situation (audience, purpose, context) is important for UCD.
 Participatory design is a specific UCD approach.
I hope this summary is helpful!
Sure, the examinable points are:
Unit 3: Interaction Design
 3.1 Interaction Design: This section defines interaction design (IxD) and covers its core
principles. Key points include:
o IxD focuses on the user's interaction with products and systems.
o It applies to various products, including software, devices, and even services.
o Usability and user experience are central to IxD.
 3.2 User-Centered Interaction Design: This section explains how user-centered design
improves the user experience. Key points include:
o Understanding user needs through research is crucial.
o Design aims to meet and exceed user expectations.
o User involvement throughout the design process is essential.
 3.3 History of Interaction Design: This section provides a brief history of the field. Key points
include:
o The term IxD emerged in the late 1980s.
o Early figures include Bill Moggridge and Bill Verplank.
o Today, IxD is a recognized field with dedicated educational programs.
 3.4 Relationship with User Interface Design: This section clarifies the connection between
IxD and UI design. Key points include:
o IxD focuses on the interaction behavior, while UI design deals with the interface itself.
o IxD informs UI design to ensure a user-friendly experience.
o Interaction design goes beyond technology, applying to broader contexts.
 3.5 Interaction Design Methodologies: This section outlines the design process typically
followed by interaction designers. Key points include:
o The process involves research, analysis, prototyping, testing, and implementation.
o User research helps designers understand user needs and behaviors.
o Prototypes allow for testing and refining design ideas.
o Interaction designers collaborate with developers to ensure a well-implemented product.
 3.6 Aspects of Interaction Design: This section explores various considerations within IxD.
Key points include:
o Social interaction design considers user-to-user and user-to-device interactions.
o Affective interaction design focuses on the user's emotional responses to the product.
o Both positive and negative emotions should be considered during design.

9
 3.7 Interaction Design Domains: This section highlights the diverse areas where IxD is
applied. Key points include:
o Interaction designers work on software interfaces, physical products, services, and more.
o Each domain requires specific skills and approaches.
o Collaboration with experts from various disciplines is often necessary.
Examiner Instructions:
 Unit 6: Tutor Marked Assignment
o Questions test understanding of User-Centered Interaction Design and Interaction Design
Domains.
Unit 5: Usability
This unit covers the concept of usability in human-computer interaction (HCI).
Exam Points:
 Usability Definition: It's the ease of use for a product in achieving a specific goal. It applies to
user interfaces, websites, software, and even physical objects.
 Usability Concepts and Guidelines: These include:
o Efficiency: How quickly users can perform tasks after learning the design.
o Learnability: How easy it is for users to perform basic tasks for the first time.
o Memorability: How easily users can re-use the design after not using it for a while.
o Errors: How many errors users make, their severity, and ease of recovery.
o Satisfaction: How pleasant it is to use the design.
 Usability Considerations:
o User characteristics: knowledge, skills, and background.
o User tasks and goals.
o Training needs and available documentation.
o Error handling and recovery mechanisms.
o Accessibility for users with disabilities.
 ISO Standards for Usability:
o ISO/TR 16982: Provides information on usability methods for human-centered design.
o ISO 9241: A set of standards for ergonomics of human-system interaction, including usability
aspects of software.
 Usability Design Methodologies:
o Early Focus on Users and Tasks: Involve users in the design process to understand their
needs, tasks, and cognitive styles.
o Iterative Design: Create prototypes, test them with users, refine based on feedback, and
repeat.
o Testing: Evaluate the design for both learnability and usability using quantitative and
qualitative methods.
Conclusion:
Understanding and designing for usability leads to user-friendly products that are efficient,
effective, and satisfying to use.
10
 Unit 6: Interaction Styles and Graphic Design Principles
Learning Objectives:
 Explain different Interaction Styles.
 Identify their advantages and disadvantages.
 Explain Graphic Design Principles.
3.1 Interaction Styles
 Refers to how users interact with a computer system.
 Common types:
o Command language (text-based commands, difficult to learn)
 Advantages: Flexible, powerful for experts.
 Disadvantages: Steep learning curve, error-prone.
o Form filling (predefined fields for data entry)
 Advantages: Easy to learn, good for data entry.
 Disadvantages: Can be rigid, consumes screen space.
o Menu selection (choosing options from lists)
 Advantages: Easy to learn, good for beginners.
 Disadvantages: Can be slow for frequent use, overwhelming with too many menus.
o Direct manipulation (acting directly on objects on the screen)
 Advantages: Easy to learn, visually appealing, reduces errors.
 Disadvantages: Can be complex to program, not suitable for all tasks.
3.2 Graphic Design Principles
 Guide how to design user interfaces for usability and aesthetics.
o The Clustering Principle: Group related controls together for easier identification.
o The Visibility Reflects Usefulness Principle: Make frequently used controls prominent.
o The Intelligent Consistency Principle: Maintain consistency in screen layout and functionality.
o The Color As a Supplement Principle: Use color sparingly and meaningfully.
o The Reduced Clutter Principle: Avoid overwhelming users with excessive information on the
screen.
Examiner's Focus:
 Understanding of different interaction styles and their suitability for various tasks.
 Ability to explain the advantages and disadvantages of each style.
 Knowledge of core graphic design principles and their impact on usability.
Remember:
 There's no single "best" interaction style - the choice depends on the specific application and
target users.
 Effective graphic design enhances usability by making interfaces clear, intuitive, and visually
appealing.
Sure, here is a summary of the unit by unit breaking down the examinable points:

11
 MODULE 3
Unit 1: Prototyping
1.0 Introduction
 This unit covers the basics of prototyping with a focus on user interface (UI) prototyping.
2.0 Objectives
 By the end of this unit, you should be able to:
o Explain prototyping in detail.
o Describe the user interface prototyping process.
o Highlight various tips and techniques used in prototyping.
o Describe interface-flow diagrams.
3.0 Main Content
 3.1 Prototyping
o Definition: A prototype is a concrete but partial representation of a system design used to
demonstrate a concept, explore design ideas, and gather feedback from users.
o Importance: Prototyping helps ensure a well-designed user interface, which is critical for user
experience and software adoption.
 3.2 User Interface Prototyping Process
o This is an iterative process involving users in creating mockups of the final design.
o The four main stages are:
 Determine user needs: Identify the functionalities the system needs to support based on user
requirements.
 Build the prototype: Develop screens and reports using prototyping tools or high-level
languages. Focus on functionality over code quality at this stage.
 Evaluate the prototype: Assess how well the prototype meets user needs. Identify what works
well, what needs improvement, and what missing functionalities are crucial.
 Decide if finished: Stop iterating when the evaluation process yields few or no new
requirements.
 3.3 Prototyping Tips and Techniques
o Focus on real-world objects and how users interact with them.
o Involve the actual users of the application in the prototyping process.
o Set a schedule for user evaluation and stick to it.
o Utilize prototyping tools to expedite screen creation.
o Allow users to interact with the prototype to test its functionality.
o Gain a solid understanding of the underlying business to design a supportive prototype.
o Develop prototypes with increasing complexity: start with basic hand-drawn prototypes, then
progress to electronic prototypes with screens, and finally, data-populated screens.
o Avoid spending excessive time perfecting the code as it might be discarded later.
 3.4 Interface-Flow Diagrams
o These diagrams visually represent the user interface of a system.

12
o Boxes represent UI elements (screens, reports, forms), and arrows depict the flow between
them.
o Benefits:
 Provide a high-level overview of the application's interface.
 Help identify inconsistencies in the user interface design.
4.0 Conclusion
 This unit reviewed prototyping, including various tips and techniques, and explored the
concept of interface-flow diagrams.
5.0 Summary
 Key points from sections 3.2 and 3.3 are reiterated here.
6.0 Tutor Marked Assignment
 Questions for assessment:
o Explain different prototyping techniques.
o Describe interface-flow diagrams.
7.0 Further Reading and Other Resources
 References related to the Unified Process and object-oriented application development.
Unit 2 Summary: Prototyping Methods and Tools
This unit covers various methods and tools used for prototyping user interfaces (UIs). Here's a
breakdown of the key points:
1. Fidelity of Prototypes:
 Refers to how closely a prototype resembles the final design in terms of visuals, interaction,
and detail.
 Three main types:
o Low-Fidelity (Lo-Fi): Rough sketches or mockups focusing on core functionalities and layout,
often paper-based. Useful for early design exploration and gathering feedback.
o Medium-Fidelity: More refined versions of Lo-Fi prototypes, often created using digital tools.
Provide a better sense of visual design and basic interactions.
o High-Fidelity (Hi-Fi): Closely represent the final product in terms of visuals, interactivity, and
navigation. Useful for user testing and design sign-off.
2. Low-Fidelity Prototypes:
 Advantages:
o Quick and inexpensive to create.
o Easy to iterate and modify.
o Encourage user feedback on core functionalities.
 Techniques:
o Sketching: Quick and natural way to capture initial ideas.
o Storyboarding: Sequence of static screens depicting a user flow.
o PICTIVE: Uses real-world materials like sticky notes and paper cutouts to represent interface
elements.
3. Medium-Fidelity Prototypes:
13
 Created using digital tools like interface builders or design software.
 Offer a more polished look and feel compared to Lo-Fi prototypes.
 Used after initial design exploration to refine promising ideas.
4. High-Fidelity Prototypes:
 Highly interactive and visually represent the final product.
 Useful for user testing, design validation, and stakeholder buy-in.
 Time-consuming and expensive to create.
5. User Interface Prototyping Tools:
 Interface Builders: Allow dragging and dropping UI components to create layouts (e.g.,
Microsoft Visual Basic). Useful for medium and high-fidelity prototyping but limit design
flexibility.
 Multimedia Design Tools: Not ideal for UI prototyping but can be used for creating storyboards
and mockups (e.g., Macromedia Director, Flash). Limited interactivity support.
 Research Tools (SILK, DENIM, Freeform): Offer features for sketching and some interaction
simulation. Not widely adopted but address limitations of traditional tools.
6. Widgets:
 Reusable UI components like buttons, menus, text boxes.
 Advantages:
o Reduce development time and effort.
o Promote consistency across applications.
 Disadvantages:
o Can limit design creativity.
o May not always be suitable for all UI needs.
7. The Wizard of Oz Prototype:
 Simulates future technology not yet available.
 A human ("wizard") controls the backend functionality while the user interacts with the frontend
prototype.
 Useful for testing user interactions with hypothetical features.
8. Conclusion:
 Understanding prototyping methods and tools is crucial for effective UI design.
 Choosing the right fidelity level and tools depends on the design stage and goals.
Examiner's Note:
 This summary effectively captures the key points from Unit 2.
 It highlights the different types of prototypes, their advantages and disadvantages, and
commonly used tools.
 You've included explanations of widgets and the Wizard of Oz prototyping technique.
 Remember that this is a summary, so avoid overly detailed explanations. Focus on the main
concepts.
I hope this breakdown is helpful!

14
 Unit 3 Summary: Input and Output Models
This unit covers the mechanics of implementing user interfaces by examining input and output
models in detail. Here's a breakdown of the key points:
Input Models:
 GUI programs handle input asynchronously, receiving it as events triggered by user actions.
 There are two main categories of input events:
o Raw events: Directly from the device driver (e.g., mouse movements, key presses)
o Translated events: Processed versions of raw events (e.g., mouse clicks, character typed)
Output Models:
 There are three main ways to represent the output of a GUI:
o Components: A hierarchical structure where view objects are arranged for automatic redraw.
o Strokes: Drawing output using high-level primitives like lines, rectangles, and text.
o Pixels: Direct manipulation of screen pixels.
Choosing an Output Model:
 The choice depends on factors like:
o Layout: Components provide automatic layout features, while strokes and pixels require
manual positioning.
o Input: Components participate in event handling, whereas strokes and pixels require custom
hit-testing for user interaction.
o Redraw: Components offer automatic redraw for damaged areas, while strokes and pixels
require manual management.
o Drawing order: Component hierarchy dictates drawing order, while strokes and pixels offer
less flexibility.
o Object weight: Components are heavier objects compared to strokes and pixels.
o Device dependence: Stroke models are more device-independent than pixel models.
Additional Concepts:
 Drawing process: Starts from the root of the component tree, with clipping regions to optimize
redraw.
 Double-buffering: Solves flickering issues by using a memory buffer for drawing before
updating the screen.
 Stroke model elements: Drawing surface, graphics context, coordinate system, clipping region,
and drawing primitives.
Examinable Points:
 Understand the difference between raw and translated input events.
 Recognize the three output models (components, strokes, pixels) and their characteristics.
 Identify the factors to consider when choosing an output model.
 Grasp the concepts of drawing process, double-buffering, and stroke model elements.
By understanding these concepts, you'll be well-prepared for any questions related to input
and output models in your exams.
Sure, here is a summary of the unit by unit breaking down the examinable points:

15
 Unit 4: Model View-Controller (MVC)
1.0 Introduction
 This unit introduces the Model-View-Controller (MVC) concept.
 It will discuss the history, pattern description, MVC implementation frameworks, and how to
implement MVC as GUI frameworks.
2.0 Objectives
By the end of this unit, you should be able to:
 Explain the term model-view-controller (MVC)
 Understand the history of MVC
 Explain pattern description and MVC implementation framework
 Describe how to implement MVC as GUI frameworks
3.0 Main Content
3.1 Model-View-Controller
 MVC is an architectural pattern used in software engineering to separate business logic from
input and presentation.
 This separation allows for independent development, testing, and maintenance of each part of
the application.
Examinable points:
 Understand the concept of MVC and its benefits
3.2 History
 MVC was first introduced in 1979 by Trygve Reenskaug.
 There have been several derivatives of MVC, such as Model-View-Presenter (MVP) and
XForms.
Examinable points:
 Know when MVC was first introduced
3.3 Pattern Description
 MVC can be seen as both an architectural pattern and a design pattern.
3.3.1 As an Architectural Pattern
 MVC separates an application into three parts: Model, View, and Controller.
 The Model represents the data of the application.
 The View represents the user interface.
 The Controller handles user interaction and updates the Model and View as needed.
Examinable points:
 Understand the roles of Model, View, and Controller in MVC
3.3.2 As a Design Pattern
 MVC is similar to the Observer pattern in that the Model notifies the View when its state
changes.
Examinable points:
 Be familiar with the Observer pattern relationship with MVC
16
 3.4 MVC Implementation Framework
 There are many frameworks that support MVC implementation, including Java Swing, Java
EE, and XForms.
3.4.1 GUI Frameworks
 Each framework has its own way of implementing MVC.
 You should research specific frameworks to understand their implementation details.
Examinable points:
 Be aware of different GUI frameworks that support MVC
3.5 Implementations of MVC as GUI frameworks
 Many GUI frameworks are inspired by Smalltalk's MVC implementation.
 Some examples include Cocoa, GTK+, JFace, and Qt.
Examinable points:
 Know that Smalltalk's MVC inspired many other GUI frameworks
4.0 Conclusion
 This unit has introduced you to the MVC design pattern.
5.0 Summary
 Key points about MVC including its definition, history, and usage in various frameworks.
Examinable points:
 Overall understanding of the MVC concept
Unit Summary by Unit:
1.0 Introduction
 This unit covers layouts and constraints, important for user interface design.
2.0 Objectives
 Understand User Interface (UI) and its various types.
 Gain knowledge of UI history and modes.
3.0 Main Content
3.1 Layout
 Layout defines positions and sizes of graphical objects (manual or automatic).
 Importance: UI changes (windows, fonts, etc.) require automatic layout adjustments.
3.2 Layout Managers
 Software tools to design layouts.
 Types: abstract, local
3.3 Kinds of Layout Managers
 Packing: one-dimensional (e.g., BorderLayout, FlowLayout)
 Gridding: two-dimensional (e.g., GridLayout, GridBagLayout)
 General: more complex (e.g., SpringLayout)
3.4 Hints for Layouts
 Use packing layouts for one-dimensional alignments.
17
 Use borders for top-level containers and nested boxes internally.
 Use gridding layouts for two-dimensional alignments (TableLayout preferred over
GridBagLayout for simplicity).
3.5 Constraints
 Programmer-defined relationships maintained by the UI toolkit.
3.5.1 Uses of Constraints
 Layout: define relationships between UI items (e.g., field position relative to label).
 Value propagation: trigger actions based on value changes (e.g., enable button based on
selection).
 Synchronization: maintain consistency between models and views.
 Interaction: define interactive behavior (e.g., object corner follows mouse movement).
3.6 Types of Constraints
 One-way constraints (formulas): Y depends on X values.
o Algorithms: data-driven, demand-driven, lazy evaluation.
 Variants: multi-output formulas, cyclic dependencies, hierarchies, side effects.
4.0 Conclusion
 Layouts and constraints are essential for UI design.
 Layout managers and hints for effective layout creation are provided.
5.0 Summary
 Layouts define object positions and sizes.
 Layout managers assist in layout design.
 Different layout manager types exist for various needs.
 Hints guide effective layout creation.
 Constraints define relationships between UI elements.
 One-way constraints and their variants are common constraint types.
6.0 Tutor Marked Assignment (TMA)
 Explain layouts and constraints.
 Describe two layout managers (e.g., BorderLayout and GridLayout).
7.0 Further Reading and Other Resources
 References on the Unified Process are provided.
MODULE 4:
Unit 1: TECHNIQUES FOR EVALUATING AND MEASURING INTERFACE USABILITY
Sure, the unit covers various usability evaluation methods categorized into four main types:
1. Inspection Methods:
 Observe users through experiments or evaluate a program by experts.
 Provide more quantitative data through timed and recorded tasks.
o Card Sorting: Users group website information based on their understanding.
o Heuristic Evaluation: Experts analyze the interface using usability principles.
18
 Pluralistic Inspection: A combined team of users, developers, and human factors
professionals discuss usability issues.
 Consistency Inspection: Experts ensure consistency across multiple products.
 Activity Analysis: An investigator observes users performing tasks to understand their
workflow.
2. Inquiry Methods:
 Gather qualitative data on user needs and preferences.
o Task Analysis: Understands user goals, tasks, and how they achieve them.
o Focus Groups: A moderator leads a group discussion on a specific topic.
o Questionnaires/Surveys: Collect user feedback on usability through surveys.
3. Prototyping Methods:
 Use prototypes in early development stages to evaluate and refine usability.
o Rapid Prototyping: Quickly create low-fidelity models to test user interface designs.
4. Testing Methods:
 Involve testing users to gather quantitative data on usability.
o Remote Usability Testing: Usability testing conducted online with a large sample size.
o Thinking Aloud: Users verbalize their thoughts while performing tasks.
o Subjects-in- Tandem: Pairs of users think aloud while using a product to identify usability
issues.
 Additional Methods:
o Cognitive Walkthrough: Evaluates user interaction with a prototype or final product.
o Benchmarking: Creates standardized test materials to compare the usability of different
designs.
o Meta-Analysis: Combines results from multiple studies to determine usability.
o Persona: Fictional characters representing user types to guide design decisions.
Exam points:
 Be able to explain the different usability evaluation methods and their purposes.
 Understand the strengths and weaknesses of each method.
 Know how to choose the appropriate method for a particular situation.
 Be familiar with usability metrics and how they are used to evaluate usability.
Unit 2: Evaluating User Interface Without the Users
This unit focuses on evaluating user interfaces without involving actual users. It discusses
three main approaches: cognitive walkthroughs, action analysis, and heuristic analysis.
3.1 Evaluating User Interface Without the Users
While user testing is crucial, evaluating interfaces without users is also important for several
reasons:
 Limited User Time: Users have limited time to devote to your project, and their time is
valuable.
 Catching Unforeseen Issues: Evaluations can uncover problems that might not be revealed
with a small user testing group.
19
 Early Detection: Identifying problems early allows for earlier correction and improvement.
3.1.1 Cognitive Walkthroughs
A cognitive walkthrough simulates how users think and act when encountering an interface for
the first time. Here's the process:
1. Preparation: Have a prototype or detailed design description and a user persona.
2. Task Selection: Choose a representative task the interface supports.
3. User Actions: List the actions a user would take to complete the task.
4. Evaluation: Analyze each action, considering:
o Will users want to achieve the action's effect?
o Can users find the control for the action?
o Will users recognize the control as the right one?
o Will users understand the feedback after taking the action?

Benefits:
 Uncovers usability problems early in the design process.
 Identifies shortcomings in the interface or task specifications.
3.1.2 Action Analysis
Action analysis examines the sequence of actions a user performs to complete a task. There
are two approaches:
 Formal Action Analysis: Highly detailed, predicts task completion time with a 20% margin of
error. Involves breaking down tasks into minute physical and mental steps.
 Back-of-the-Envelope Analysis: Less detailed, focuses on identifying major problems.
Involves listing a natural series of user actions and evaluating them considering:
o Can simple tasks be done with simple actions?
o Can frequent tasks be done quickly?
o How much does the user need to learn?
Benefits:
 Identifies tasks with too many steps or require too much learning.
 Helps decide whether interface features are necessary or add complexity.
3.1.3 Heuristic Analysis
Heuristics are general principles for designing usable interfaces. Nielsen and Molich's
approach involves:
1. Nine Heuristics: Evaluators use a set of nine general heuristics (listed in the unit) to identify
interface problems.
2. Multiple Evaluators: Several evaluators analyze the interface independently (prototype or
paper description).
3. Combined Results: Identified problems are consolidated into a single list.
Benefits:
 Catches problems missed by task-oriented evaluations.

20
 Identifies major usability issues with relatively few evaluators.
Examiner's Points:
 Importance of evaluating user interfaces without user testing.
 Three main approaches: cognitive walkthroughs, action analysis (formal & back-of-the-
envelope), and heuristic analysis.
 Steps involved in each approach and their benefits.
 Importance of heuristics in interface design.
Unit 3: Evaluating the Design with the Users
This unit focuses on evaluating the usability of a design with real users. Here are the key
points:
Why evaluate with users?
 You cannot predict how well your design will work without real-world testing.
 User testing helps identify problems early in the development process, when fixing them is
cheaper.
Choosing users for testing:
 Ideally, choose users who represent your target audience.
 If perfect matches are unavailable, consider users with similar characteristics.
 Focus on getting a good understanding of the users' thought processes during testing.
Obtaining user input:
 Thinking-aloud method: Users verbalize their thoughts while performing tasks, revealing
their thought processes and potential issues.
 Tasks: Design tasks that reflect real-world usage scenarios.
 Mockups and prototypes: Use mockups (static representations) or prototypes (functional
approximations) for early testing.
 Data collection:
o Process data: Focus on user actions, decisions, and thought processes during tasks.
o Bottom-line data: Focus on quantitative measures like completion time and error rate (useful,
but secondary to process data).
Analyzing thinking-aloud data:
 Summarize user difficulties and potential causes.
 Use the data to improve the design by:
o Verifying assumptions about user behavior.
o Identifying and prioritizing usability problems.
Measuring bottom-line usability:
 Bottom-line data (completion time, error rate) is useful for comparing design alternatives.
 Statistical analysis helps interpret variability in test results.
 More test users are needed to reduce uncertainty in bottom-line data.
Comparing design alternatives:
 Between-groups experiments compare two designs using separate user groups.

21
 Within-groups experiments use the same user group for both designs (more complex to
manage).
Setting up a usability study:
 Order of test tasks: Choose a logical order (e.g., simple to complex).
 Training test users: Depends on real-world usage scenario (cold start vs. pre-training).
 Pilot study: Conduct a small-scale test to refine procedures and identify potential issues.
Additional notes:
 Focus on process data for design improvement.
 Bottom-line data is secondary but useful for comparisons.
 Statistical analysis helps interpret data variability.
By following these guidelines, you can effectively evaluate your design with users and ensure
a user-friendly final product.
Unit 4: Other Evaluation Issues
Examinable Points:
 Modeling Techniques:
o EPIC (Executive-Process/Interactive Control) system simulates human perceptual and motor
performance.
o ACT-R model is used to evaluate information seeking in web sites.
o ACT-IF model predicts optimal user behavior for web site designs.
 Advantages of Model-Based Evaluations:
o Less expensive than user-centered evaluations.
o Allows for many design iterations.
 Disadvantages of Model-Based Evaluations:
o Requires time-consuming cognitive task analysis.
o Models need to be validated through user testing.
 Current Issues in Evaluation Methodologies:
o Difficulty comparing different evaluation methods.
o Need for multiple evaluation methods for rich data.
o Challenges of evaluating mobile and ubiquitous computing.
o Inclusion of a wider range of users (teenagers, elderly, disabled).
o Balancing usability evaluation with fast web development cycles.
 Future of Usability Evaluation:
o Need for new methods to address evolving technologies.
o Collaboration between researchers and practitioners.
Summary:
This unit covers other evaluation issues in HCI, including modeling techniques, advantages
and disadvantages of model-based evaluations, and current challenges in evaluation
methodologies. The importance of using multiple evaluation methods and considering the

22
 wider user population is emphasized. The unit also acknowledges the need for new evaluation
methods to keep up with the pace of technological advancements.

Unit 4: Other Evaluation Issues

This unit focuses on other evaluation methods and current issues surrounding usability
evaluation methodologies.
Exam points:
 Model-based Evaluations:
o Advantages: Less expensive than user-centered evaluations, allows for more design
iterations.
o Disadvantages: Requires time-consuming task-level cognitive task analysis and model
validation.
 Current Issues:
o Difficulty agreeing on the "best" evaluation method.
o Need for methodologies for mobile and ubiquitous computing.
o Inclusion of a broader range of users (teenagers, disabled individuals).
o Balancing rapid development cycles with usability testing.
Tutor Marked Assignment:
The significance of the EPIC (Executive-Process/Interactive Control) system is that it
simulates human perceptual and motor performance. This allows for testing user interfaces
with a model that mimics human behavior.
Additional Notes:
 Unit 5 will cover usability testing procedures in detail.
 The reading materials list resources for further exploration of these topics.
I hope this summary helps you understand the key points of Unit 4 and prepare for your exam!

23