Chapter 6

Design Rules And Implementation

Support
 Introduction
• One of the central problems that must be solved in
a user-centered design process is how to provide
designers with the ability to determine the usability
consequences of their design decisions.
• We require design rules, which are rules a designer
can follow in order to increase the usability of the
eventual software product.
• We can classify these rules along two dimensions,
based on the rule’s authority and generality.
• By authority, we mean an indication of whether or
not the rule must be followed in design or whether
it is only suggested.
• By generality, we mean whether the rule can be
applied to many design situations or whether it is
focussed on a more limited application situation.
 Cont..
• Rules also vary in their level of abstraction,
with some abstracting away from the detail of
the design solution and others being quite
specific.
• Principles are abstract design rules, with high
generality and low authority.
• Standards are specific design rules, high in
authority and limited in application, whereas
• Guidelines tend to be lower in authority and
more general in application.
• Design rules for interactive systems can be
supported by psychological, cognitive,
ergonomic, sociological, economic or
computational theory
Principles that supports Usability, Design
Standards & Design Guidelines
 What is Usability?
• Usability and HCI are becoming core aspects of the system
development process to improve and enhance system facilities
and to satisfy users’ needs and necessities
• HCI will assist designers, analysts and users to identify the system
needs from text style, fonts, layout, graphics and color
• While usability will confirm if the system is efficient, effective,
safe, utility, easy to learn, easy to remember, easy to use and
evaluate, practical visible and provide job satisfaction to users
 Principles that Supports Usability
The principles divided into three main categories:
1. Learnability:
The ease with which new users can begin effective
interaction and achieve maximal performance
2. Flexibility:
The multiplicity of ways in which the
user and system exchange information
3. Robustness:
The level of support provided to
the user in determining successful achievements and
assessment of goals
 Principles of Learnability
1. Predictability: Determines effects of future action
based on past interaction history
2. Synthesizability: Determines effects of past
operations on current state. E.g. Move File
3. Familiarity: New users can get familiar with
functionality & interaction styles of apps
4. Generalizability: Required specific knowledge of
same domain operations. E.g. Cut/Copy
5. Consistency: It measure through result & behavior of
system. Every time system gives same result of same
sets of input
 Principles of Flexibility
1. Dialog Initiative: All dialogues done by simple request &
response system
2. Multi-threading: Single set of code or input can be used
by several processors at different stages of execution
3. Task Migratabilty: Transfer execution of task from system
to users & decide who is better E.g. Spell Checker
4. Substitutivity: Allows equivalent values of input & output
to be substituted with each other. E.g. Percentage &
Grades
5. Customizability: Supports modifiability of the user
interface by user automatic modifications
 Principles of Robustness
1. Observability: Users should be able to evaluate
internal features of system & gives proper
feedback
2. Recoverability: To fixe & solves errors & get
correct actions
3. Responsiveness: Real system feedbacks on users
action
4. Task Conformance: System supports all the
requirements of the user & how the users
interact with them
 Standards for Interactive System Design
• Set by National or International Bodies to ensure
compliance with a set of design rules by a large
community
• Standards can apply specifically to either the hardware
or the software used to build the interactive system
• British Standards Institution(BSI) or The International
Organization for Standardization (ISO) or a National
Military Agency, has had standards for hardware in
place before any for software.
• ISO9241 defines usability as effectiveness, efficiency
and satisfaction with which users accomplish tasks
 Hardware & Software Standards
Hardware Standards Software Standards
• Hardware standards based • Software standards based
on understanding human on underlying theories,
factors & hardware science, languages, IDE’s
specifications frameworks & libraries of
• Changes in Hardware is software design
very difficult & expensive • Changes in software is
• Require changes in easy, flexible & less costly
Hardware is less • Required changes in
software is more
• Hardware standards are
stable • Software standards are
unstable
 Design Guidelines
• It provides detail design specifications & clear instructions to designers
& developers
• Design Guidelines follow all principles that supports Usability

Design Guidelines:
1. Maintain internal & external consistency
2. Guidelines should be more suggestive & general
3. Use of familiar terms & user friendly
representations
4. Use Guidelines that resolve conflicts in design
5. Use direct manipulation whenever possible
6. Design should be nice without compromising the usefulness & usability of
system
7. Abstract guidelines(principles) applicable during early life cycle activities
8. Detailed guidelines (Style Guides) applicable during later life cycle activities
 Golden Rules of Heuristics
• Provide a convenient & brief summary of the key
principles of interface design
• Any designer following even these simple rules will
produce a better system
• Different collections of design rules
includes such as
1. Shneiderman’s 8 Golden Rules
2. Norman’s 7 principles
3. Nielsen’s 10 Heuristics
 Why Shneiderman’s Golden Rules?
• Ben Shneiderman, an American Computer Scientist
consolidated some implicit facts about designing and came
up with eight general guidelines
• These guidelines are beneficial for normal designers as well
as interface designers
• These are beneficial in experimental assessment of
identifying better GUIs
• Apple, Google and Microsoft are among some of the
highly successful companies whose well-designed products
reflect Shniederman’s rules
• The characteristics derived from Shneiderman’s golden rules
can be recognized in various user interface guidelines
produced by corporate giants like the companies
mentioned above
 Shneiderman’s 8 Golden Rules
1. Strive for Consistency
2. Cater to Universal Usability
3. Offer Informative feedback
4. Design Dialogs to yield closure
5. Prevent Errors
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short term memory load
 Rule 1: Strive for Consistency
• Consistent sequence of actions should be required in similar situations
• Identical terminologies used such as familiar icons, colors, menu
hierarchy, call-to-actions and user flows when designing similar situations
and sequences of actions
For Example: Instagram
• Double-tap on the picture likes the picture
• Scrolling enables seeing the most recent posts
– Can view the Stories
• Tap and hold on the story pauses it
– Can edit the profile
 Rule 2: Cater to Universal Usability
• Universal design strives to cater as wide
range of human users of different
characteristics such as Age, Culture,
Educational Level & Disability etc. With
single design
• As the frequency of use increases, so do
the user’s desires to reduce the number of
interactions and to increase the pace of
interaction
• Keyboard shortcuts like Abbreviations,
function keys, hidden commands and
macro facilities are very helpful to an
expert user
 Rule 3: Offer Informative feedback
• The need to keep the users informed of what is
happening at every stage of the process
• This feedback needs to be meaningful, relevant, clear,
and fit the context
 Rule 4: Design Dialogs to Yield closure
• Sequences of actions need to have a beginning, middle and end
• Once a task is completed, give some peace of mind to your user by
providing them informative feedback and well-defined options for
the next step if that’s the case
 Rule 5: Prevent Errors
• A good interface should be designed to avoid errors as much as
possible
• But when errors do happen, your system needs to make it easy
for the user to understand the issue and know how to solve it
• Simple ways to handle errors include displaying clear error
notifications along with descriptive hints to solve the problem
 Rule 6: Permit Easy Reversal of Actions
• It’s an instant relief to find that “undo” option after a mistake is
made
• Your users will feel less anxious and more likely to explore options if
they know there’s an easy way to reverse any accidents
Rule 7: Support internal locus of control
• Experienced operators strongly desire the sense that they
are in charge of the system and that the system responds
to their actions
• Design the system to make users the initiators of actions
rather than the responders
Rule 8: Reduce short term memory load
• The limitation of human information processing in short term
memory requires that displays’ be kept simple, multiple page
displays be consolidated, sufficient training time be allotted for
codes, mnemonics(memory improvements), and sequences of
actions
• Our attention span is limited and anything we can do to make
our users’ job easier, the better
• It is simple for us to recognize information rather than recall it
 Group Discussion
1. Discuss the Scenario to describe the
Shinderman Design rule
2. What are the opportunity and challnge of the
rule?
Norman’s 7 Principles & Nielsen’s 10
Heuristic Principles
 Norma’s 7 Principles
• To assess the interaction between human and computers,
Donald Norman in 1988 proposed seven principles
• He proposed the seven stages that can be used to
transform difficult tasks
1. Use Both Knowledge In the world and knowledge in the
head
2. Simplify the structure of tasks
3. Make things visible: Bridge the gulf of execution and
Evaluation
4. Get the mappings Right
5. Exploit the power of constraints, both natural and artificial
6. Design for Error
7. When all else fails, standardize
 Norma’s 7 Principles…
1. Use Both Knowledge in the World and Knowledge in the Head:
People work better when the knowledge they need to do a
particular task is available externally, make a product to
increase there efficiency of system as per users knowledge
2. Simplify the structure of tasks:
Task needs to be simple in order to avoid complex problem
solving and excessive memory load. Example : Breakdown into
simple structure or automate
3. Make things Visible: Bridge the Gulfs of Execution and
Evaluation.
- The interface should make clear what the system
can do & how this is achieved.
- User should enable to see clear
affects of there actions on the system.
 Norma’s 7 Principles…
4. Get the Mappings Right:
• User intention should map clearly onto system controls & system
events:
• Controls, sliders and dials should reflect the task, so a small
movements has a small effect and a large movement a large
effect

5. Exploit the power of constraints, Both Natural and artificial

• Constraints are things in the world that make it impossible to do
anything but the correct action in the correct way
• Example: A jigsaw puzzle, where the pieces only fit together in
one way
• Physical constraints of the design guide will be provided to the
user to complete the task
 Norma’s 7 Principles…
6. Design for Error:
• To err is human, so anticipate the errors the user could
make and design recovery into the system
7. When all Else Fails, Standardize:
• If there are no natural mappings then arbitrary mappings
should be standardized so that users only have to learn
them once
• It is this standardization principle that enables drivers to
get into a new car and drive it with very little difficulty-
key controls are standardized
• Occasionally one might switch on the indicator lights
instead of the windscreen wipers, but the critical
controls(accelerator , brake, clutch, steering) are always
the same
 Heuristic Evaluation
• Heuristics evaluation is a methodical procedure to
check user interface for usability problems
• Once a usability problem is detected in design,
they are attended as an integral part of constant
design processes
• Heuristic evaluation method includes some
usability principles such as Nielsen’s ten Usability
Principles
 Nielsen’s Ten Heuristic Principles
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than Recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help, diagnosis and recovery from error
10. Documentation and Help
 1.Visibility of System Status
• The system should always keep users informed about
what is happening, providing feedback within a
reasonable time.
• Users should never feel uncertain about whether their
actions have been registered or the system is still
processing.
• Progress indicators, status messages, and visual cues
help build trust.

• Example: When uploading a file, a progress bar

accompanied by a message like 'Uploading your file...
75% complete' ensures the user knows the process is
ongoing.
2. Match Between System and the Real
World
• The system should use concepts, language, and
conventions familiar to users, reflecting real-
world logic rather than system-oriented terms.
• By aligning with the user's mental model, the
system becomes more intuitive and reduces the
learning curve.

• Example: Using a shopping cart metaphor in e-

commerce websites makes it easy for users to
understand that items can be 'added' and
'removed' before purchase.
 3. User Control and Freedom
• Users often make mistakes or change their minds.
The system should allow them to easily reverse
actions or exit processes without penalty.
• Providing clear exit routes and undo options
promotes a feeling of control and confidence.

• Example: Offering a 'Cancel Order' button within

a short grace period after purchase, or an 'Undo'
button in an email application to retract sent
messages.
 4. Consistency and Standards
• Design consistency means that elements should
behave and appear the same across the platform,
following established conventions.
• It helps users predict outcomes and navigate with
confidence.
• Breaking consistency increases the cognitive load.

Example: Maintaining the same location, style, and

icon for the 'Search' feature across all pages of a
website.
 5. Recognition Rather Than Recall
• Minimize the user's memory load by making
relevant options, instructions, and information
visible.
• Interfaces that require users to recall information
are prone to mistakes and inefficiency.

Example: Displaying a drop-down list of previously

entered addresses so the user doesn't need to
retype them from memory.
 6. Flexibility and Efficiency of Use
• Design should cater to both novice and
experienced users.
• Advanced users benefit from shortcuts, macros,
and customization, while novices can rely on
guided interactions.

Example: In graphic design software, keyboard

shortcuts allow professionals to work faster, while
tooltips and menus help beginners.
7. Aesthetic and Minimalist Design
• Keep interfaces simple by including only relevant
information.
• Excessive or irrelevant content distracts users and
makes the interface harder to navigate.

Example: A clean homepage layout that shows only

key categories and a search bar, avoiding
unnecessary advertisements and clutter.
8. Help Users Recognize, Diagnose, and
Recover from Errors
• Error messages should clearly explain the
problem and provide actionable solutions.
• Avoid technical jargon and focus on helping users
recover.

Example: Instead of 'Error 404,' display 'Page not

found. Please check the URL or return to the
homepage.'
 9. Help and Documentation
• While the best designs require minimal
instructions, accessible documentation can
support users when they need it. Documentation
should be easy to search, well-organized, and
task-focused.

Example: An online help center with a search bar,

categorized topics, and video tutorials for common
tasks.
 10. Error Prevention
• Even better than good error messages is a careful
design that prevents a problem from occurring in
the first place.

Example: Disabling the “Submit” button until all

required fields are filled
 User Interface Management System
(The Seeheim Model, The PAC Model)
 User Interface Management System
• It provide conceptual architecture for interactive system design
• It separates application business logic & GUI or presentation layer
• It provide different implementation techniques for business logic &
GUI
• It supports designing, implementing & evaluating an interactive
system

A UIMS(User Interface Management System) should be thought

of as a software architecture “in which the implementation of an
application’s user interface is clearly separated from that of the
application's underlying functionality”
 cont’d...
• A User Interface Management System (UIMS) in Human–
Computer Interaction (HCI) is a framework or software
architecture designed to help in the creation, control, and
management of user interfaces in a systematic, consistent, and
efficient way.
• A UIMS is a software layer between the application logic and
the user interface, allowing developers to focus separately on:

– What the system does (application logic)

– How it interacts with users (interface design & control)

• It manages all aspects of the interaction, such as input

handling, output presentation, and maintaining interaction
states.
Objectives

• Provide consistency across the user interface.

• Reduce development time by reusing components.
• Support multiple interface styles (GUI, voice, touch).
• Allow separation of concerns between UI designers and
application programmers.
• Enable easy modification or adaptation of the interface
without changing core application logic.
Key Components
A typical UIMS has these parts:
– Presentation Component
Handles visual layout and appearance (buttons, menus, icons, forms).
Responsible for how data and messages are displayed to the user.
– Dialog Control Component
Manages the sequence of interactions between the user and system.
Controls workflow, screen transitions, and input validation.
– Application Interface Component
Acts as a bridge between the UI and the application logic.
Ensures that user commands are translated into application actions.
 UIMS Conceptual Architecture
1. Model View Controller
2. The linguistic Model(Foley 1990)
3. The Seeheim Model (Green 1985)
4. Smalltalk Based Model
5. PAC Model
Improves:
• Portability - runs on different systems
• Reusability - components reused
cutting costs for development
• Multiple interfaces – accessing same
functionality
• Customizability - by designer and user
 The Seeheim Model
• The First conceptual architecture of UIMS, Formulated in 1985 at
Seeheim, Germany
• Portability & Modifiability are two architectural driver of Seeheim Model

1. Presentation: It’s called GUI. Responsible for what input & output available to
the user. Define behavior of system as perceived & manipulated by user
2. Dialog Control: Maintain communication between presentation & application
layer
3. Application Interface: Manage communication with the application &
provide view of interface
4. Little Box: Improve performance between them by providing direct link.
 Example of Seeheim Model
• Presentation Component
• External presentation of the user interface
• Generate the images
• Receives physical input events
• Lexical Parsing
• Dialog Control
• Parsing of tokens into syntax
• Must maintain state to deal with parsing; modes
• Application interface Model
• Defines interface between UIMS and the rest of the software
• “Semantic feedback” for checking validity of inputs
• Not explicit in UIMSs; fuzzy concepts
• Roughly like today’s call-backs
 The PAC Model
• PAC stands for Presentation- Abstraction- Control
• In PAC, the system is arranged into a hierarchy of many cooperating agents
(triads)
• It was developed from MVC to support the application requirement of multiple
agents in addition to interactive requirements
Each agent has three components:
1. The presentation component: Formats the visual and audio presentation of
data
2. The abstraction component: Retrieves and processed the data
3. The Control component: Handles the task such as the flow of control and
communication between the other two components
 Example of PAC Model
• The agent’s presentation component provides the visible behavior of the
PAC agent
• Its abstraction component maintains the data model that underlies the
agent, and provides functionality that operates on this data
• Its control component connects the presentation and abstraction
components, and provides functionality that allows the agent to
communicate with other PAC agents
 Advantages & Disadvantages of PAC Model
Advantages
• There are many MVC vendor framework toolkits available
• Multiple views synchronized with same data model
• Easy to plug-in new or replace interface views
• Used for application development where graphics expertise
professionals, programming professionals, and data base
development professionals are working in a designed project
team
Disadvantages
• Not suitable for agent-oriented applications such as interactive
mobile and robotics applications
• Multiple pairs of controls and views based on the same data
model make any data model change expensive
• The division between the view and the controller is not clear in
some cases
 Group Discussion
• Based on Nielsen’s Ten Heuristic Principles
assume a system/ Project that you proposed
to impliment and how each principle will be
realized
• When and how UIMS models will be used.
1. Model View Controller
2. The linguistic Model(Foley 1990)
3. The Seeheim Model (Green 1985)
4. Smalltalk Based Model
5. PAC Model