12/11/24 1

Kingdom of Saudi Arabia

Ministry of Higher Education
Al-Imam Muhammad ibn Saud Islamic University
College of Computer and Information Sciences

Chapter 10:
Human–Computer Interaction Layer
Design
IS 1235
Systems Analysis and Design

IS Department
Introduction

• Interface Design defines how the system will interact

with external entities (e.g., customers, users, other
systems)
• System Interfaces are machine-machine and are dealt with as
part of systems integration
• User Interfaces are human-computer and are the focus of this
chapter
• Principles for UI design
• The UI design process
• Navigation, Input, Output Design
• International & Cultural Issues in UI Design
• Non-functional requirements and UI design
Principles of User Interface Design
• Layout of the screen, form or report
• Content Awareness—how well the user understands the
information contained
• Aesthetics—how well does it appeal to the user
• User Experience—is it easy to use?
• Consistency—refers to the similarity of presentation in
different areas of the application
• Minimal User Effort—can tasks be accomplished quickly?
General Layout

Navigation
Area

Reports &
Forms
Area

Status
Area
• Most software designed for personal computers follows the
standard Windows or Macintosh approach for screen design

IS Department 4
Content Awareness
• Applies to the interface in general, to each screen, to each
area on a screen and to sub-areas as well
• Include titles on all interfaces
• Menus should show where the user is and how the user
got there
• All areas should be well defined, logically grouped
together and easily discernible visually
• Form titles should be used to keep the user aware of
where they are
• Status bar on forms should be used to inform user of what
is happening.
• Form fields should have simple and meaningful labels.
Aesthetics
• Interfaces should be functional, inviting to use, and
pleasing to the eye
• Simple minimalist designs are generally better
• White space is important to provide separation
• Acceptable information density is proportional to the
user’s expertise
• Novice users prefer lower density (< 50%)
• Expert users prefer higher density (> 50%)
• Text design: size, serif vs. sans serif, use of capitals
• Color and patterns (e.g., don’t use red on blue)
High Density Example
User Experience
• Ease of learning (how quickly they can learn new
systems)
• Significant issue for inexperienced users
• Relevant to systems with a large user population
• Ease of use (how quickly they can use the system once
they have learned how to use it)
• Significant issue for expert users
• Most important in specialized systems
• Ease of learning and use of use are related
• Complementary: lead to similar design decisions
• Conflicting: designer must choose whether to satisfy novices or
experts
Consistency
• Extremely important concept in making the system simple
• It allows the users to predict what is going to happen
• All parts of the system work in the same way
• Users learn how one portion works and immediately apply it to
others
• Key areas of consistency are
• Navigation controls
• Terminology—use the same descriptors on forms & reports
• Example, don’t label a field “customer” in one place and then label
it “client” in another place. Be consistent!
Minimal User Effort
• Interfaces should be designed to minimize the effort
needed to accomplish tasks
• A common rule is the three-clicks rule
• Users should be able to go from main menu of a system to the
information they want in no more than three mouse clicks
User Interface Design Process

• User interface design is a use‐case driven, incremental,

and iterative process
• Analysts often move back and forth between the
different parts (navigation, input, and output) of the user
interface, rather than proceeding sequentially from one
part to another part.
• Use Scenario Development
• Navigation Structure Design
• Interface Standards Design
• Interface Design Prototyping
• Interface evaluation
Use Scenario Development
• Use scenarios outline the steps performed by users to
accomplish some part of their work
• A use scenario is one path through an essential use case
• Presented in a simple narrative description
• Document the most common cases so interface designs
will be easy to use for those situations
Use Scenario Example
Navigation Structure Design
• The Navigation structure defines
• The basic components of the interface
• How they work together to provide functionality to users

• A windows navigation diagram (WND) is used to show how all the

screens, forms, and reports used by the system are related and
how the user moves from one to another.

• Most systems have several WNDs, one for each major part of the
system.
• The stereotype represents the type of user interface component of
a box on the diagram.
Sample WND
Interface Standards Design
• Interface standards are basic design elements found
across the system user interface
• Standards are needed for:
– Interface metaphor: defines how an interface will work (e.g., the
shopping cart to store items selected for purchase)
– Interface objects
– Interface actions
– Interface icons
– Interface templates
Interface Design Prototyping
• Mock-ups or simulations of computer screens, forms, and
reports
• Common approaches:
• Wireframe Diagram: a picture that resembles the actual user
interface that the user will gradually receive. it is created using a
tool such as Microsoft's Visio.
• (provide more of a feel that the user will experience, while
remaining fairly inexpensive to develop)
• Storyboard: hand drawn pictures of what the screens will look like.
(fastest and least expensive but provides the least amount of detail)
• User Interface Prototypes: the slowest, most expensive, and most
detailed approach.
Sample Wireframe Diagram
Example of Storyboard
Sample Combined Windows Navigation and
Wireframe Diagrams
Sample User Interface Prototype
NAVIGATION DESIGN
• Enables the user to enter commands to navigate through
the system and perform actions to enter and review
information it contain.
INPUT DESIGN
• Inputs facilitate the entry of data into the computer
system, whether highly structured data, such as order
information (e.g., item numbers, quantities, costs) or
unstructured information (e.g., comments).
• Input design means designing the screens used to enter
the information as well as any forms on which users write
or type information.
OUTPUT DESIGN
• Outputs are what the system produces, whether on the
screen, on paper, or in other media, such as the Web.
• Outputs are perhaps the most visible part of any system
because a primary reason for using an information system
is to access the information that it produces.
International & Cultural Issues in UI
Design
• Websites have a global presence
• Considerations:
• Multilingual requirements (Keep the writing short , simple, Avoid
humor, slang, Use good grammar)
• The meaning of certain colors
• Cultural differences
• Power distance
• Uncertainty avoidance
• Individualism vs. collectivism
 Non-Functional Requirements
• The human–computer interaction layer is heavily influenced by
nonfunctional requirements.
• Operational Requirements—choice of hardware and software
platforms
• Technologies that can be used (e.g. GUI, 2 or 3 button mouse)
• Performance Requirements
• Mobile computing and web browsing inject additional performance
obstacles
• Security Requirements
• Appropriate log on controls and possibly encryption
• Wireless networks are especially vulnerable
• Political & Cultural Requirements
• Date formats, colors, and currencies
Interface Evaluation
• Goal is to understand how to improve the interface design
before the system is complete
• Have as many people as possible evaluate the interface
• Ideally, interface evaluation is done while the system is
being designed—before it is built
• Help identify and correct problems early
• Designs will likely go through several changes after the users see it
for the first time
VERIFYING AND VALIDATING THE HUMAN–
COMPUTER INTERACTION LAYER

Approaches to UI Evaluation:
•Heuristic—compare the design to known principles or rules
of thumb
•Walkthrough evaluation—design team presents prototype
to the users & explains how it works
•Interactive—the users work with the prototype with a
project team member
•Formal Usability Testing—performed in labs with users on
a language prototype
Summary
• Principles of User Interface Design
• User Interface Design Process
• International & Cultural Issues and UI Design
• Nonfunctional Requirements