USER INTERFACE DESIGN�21IS773

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Module-2 �User Interface Design Process

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Obstacles and Pitfalls in the Development Path

Gould(1988) has made these general observations about design

• Nobody ever gets it right the first time.
• Development is surprises.
• Good design requires living in a sea of changes.
• Change will never eliminate the need for change.
• Even if you have made the best system humanly possible,

people will still make mistakes when using it.

• Designers need good tools.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Pitfalls

Common pitfalls are:

• No early analysis and understanding of the user’s needs and expectations.
• A focus on using design features or components that are “neat” or “glitzy.”
• Little or no creation of design element prototypes.
• No usability testing.
• No common design team vision of user interface design goals.
• Poor communication between members of the development team.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Designing for People: The Five Commandments

​

• Gain a complete understanding of users and their tasks.
• Solicit early and ongoing user involvement.
• Perform rapid prototyping and testing.
• Modify and iterate the design as much as necessary.
• Integrate the design of all the system components

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Usability

​

• The term usability used to describe the effectiveness of human performance.
• The term usability is defined as ―the capability to be used by humans easily and effectively,
• where,

easily = to a specified level of subjective assessment,

effectively = to a specified level of human performance.

​

Usability in the Design Process

Mandel (1994) lists the 10 most common usability problems in graphical systems as reported by IBM usability specialists

Common Usability Problems

1. Ambiguous menus and icons.

2. Languages that permit only single-direction movement through a system.

3. Input and direct manipulation limits.

4. Highlighting and selection limitations.

5. Unclear step sequences.

6. More steps to manage the interface than to perform tasks.

7. Complex linkage between and within applications.

8. Inadequate feedback and confirmation.

9. Lack of system anticipation and intelligence.

10. Inadequate error messages, help, tutorials and documentation.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

“Usability is nothing but common sense”

• Inefficient navigation.
• Inefficient operations
• Excessive or inefficient page scrolling.
• Information overload.
• Design inconsistency.
• Outdated information.
• Stale design caused by emulation of printed documents and past systems.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Some Practical Measures of Usability

• Are people asking a lot of questions for a manual?
• Are frequent exasperation responses heard?
• Are there many irrelevant actions being performed?
• Are there many things to ignore?
• Do a number of people want to use the product?

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Some Objective Measures of Usability

Shackel (1991) presents the following more objective criteria for measuring usability.

• How effective is the interface? Can the required range of tasks be accomplished:
• At better than some required level of performance

(for example, in terms of speed and errors)?

• By some specified target range of users?
• range of usage environments?

​

​

​

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Some Objective Measures of Usability

​

• How learnable is the interface? Can the interface be learned:
• specified time from commissioning and start of user training?
• specified amount of training and user support?
• specified relearning time each time for intermittent users?

​

​

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Some Objective Measures of Usability

​

• How flexible is the interface? Is it flexible enough to:
• specified percentage variation in tasks ?

​

• What are the attitudes of the users? Are they:
• Within acceptable levels of human cost in terms of
• tiredness,
• discomfort,
• frustration,
• and personal effort?

​

The Design Team

Provide a balanced design team, including specialists in:

• Development
• Human factors
• Visual design
• Usability assessment
• Documentation
• Training

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

.

.

Important Human Characteristics in Design

Perception

• Proximity.
• Similarity.
• Matching patterns.
• Succinctness.
• Closure.
• Unity.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Perception

• Continuity.
• Balance.
• Expectancies.
• Context.
• Signals versus noise.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Memory

• Today, memory is viewed as consisting of two components long-term and short-term.
• Short- term, or working, memory receives information from either the senses or long term memory, but usually cannot receive both at once, the senses being processed separately.
• Long- term memory contains the knowledge we possess. Information received in short- term memory is transferred to it and encoded within it, a process we call learning.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Memory

• General ways to reduce user memory loads, reduce the need for mental integration, and expand working memory, thus enhancing system usability include:
• Presenting information in an organized, structured, familiar and meaningful way.
• Placing all required information for task performance in close physical proximity.
• Giving the user control over the pace of information presentation.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Sensory Storage

• Sensory storage is the buffer where the automatic processing of information collected from our senses takes place.
• It is an unconscious process, large, attentive to the environment, quick to detect changes, and constantly being replaced by newly gathered stimuli.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Visual Acuity

• The capacity of the eye to resolve details is called visual acuity.
• It is the phenomenon that results in an object becoming

more distinct as we turn our eyes toward it and rapidly losing

distinctness as we turn our eyes away—that is, as the visual

angle from the point of fixation increases.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Foveal and Peripheral Vision

• Foveal vision is used to focus directly on something.
• Peripheral vision senses anything in the area surrounding the location we are looking at, but what is there cannot be clearly resolved because of the limitations in visual acuity.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

• Information Processing

The two levels of information processing.

Highest level

Lower level

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Mental Models

• A mental model is simply an internal representation

of a person’s current understanding of something.

• Mental models are gradually developed in order to

understand something, explain things, make

decisions, do some thing, or interact with

another person.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Movement Control

• Once data has been perceived and an appropriate action decided

, a response must be made, In many cases the

response is a movement.

• In computer systems, movements include

pressing key board keys,

moving the screen pointer by

pushing a mouse or rotating a trackball,

or clicking a mouse button.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

Learning

• Learning can be enhanced if it:

Allows skills acquired in one situation to be used

in another.

Design consistency accomplishes this.

•Provides complete and prompt feedback.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Important Human Characteristics in Design

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Skill

• Skills are hierarchical in nature, and many basic skills may be integrated to form increasingly complex ones.
• Lower- order skills tend to become routine and may drop out of consciousness.
• System and screen design must permit development of increasingly skilful performance.

​

Important Human Characteristics in Design

Individual Differences

Individual differences complicate design

because the design must permit people

with widely varying characteristics to

satisfactorily and comfortably learn the

task or job, or use the Website.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Human Interaction Speeds

• Reading.

• Listening.

• Speaking.

• Keying.

• Hand Printing.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Human Interaction Speeds

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

Some Techniques for Determining Requirements

Direct Method

• Individual Face-to-Face Interview

A one-on-one visit with the user to obtain information. It may be structured or somewhat open-ended.

• Telephone Interview or Survey

A structured interview conducted via telephone.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

• Traditional Focus Group

A small group of users and a moderator brought together to verbally discuss the requirements.

• Facilitated Team Workshop

A facilitated, structured workshop held with users to obtain requirements information. Similar to the Traditional Focus Group.

• Observational Field Study

To see and learn what users actually do, they are watched and followed in their own environment, office, or home, in a range of contexts for a period of time.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

• Requirements Prototyping

A demonstration model, or very early prototype, is presented to users for their comments concerning functionality.

• User-Interface Prototyping

A demonstration model, or early prototype, is presented to users to uncover user interface issues and problems.

• Usability Laboratory Testing

A special laboratory is constructed and users brought in to perform actual newly designed tasks. They are observed and results measured, and evaluated to establish the usability of the product at that point in time.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

Some Techniques for Determining Requirements

Indirect Method

• MIS Intermediary

A company representative defines the user’s goals and needs to designers and developers.

• Paper Survey or Questionnaire

A survey or questionnaire is administered to a sample of users using traditional mail methods to obtain their needs.

• Electronic Survey or Questionnaire

A survey or questionnaire is administered to a sample of users using e-mail or the Web to obtain their needs.

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

• Electronic Focus Group

A small group of users and a moderator discuss the requirements online using workstations.

• Marketing and Sales

Company representatives who regularly meet customers obtain suggestions or needs, current and potential.

• Support Line

Information collected by the unit that helps customers with day-to-day problems is analyzed (Customer Support, Technical Support, Help Desk, etc.).

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

• E-Mail or Bulletin Board

Problems, questions, and suggestions from users posted to a bulletin board or through e-mail are analysed.

• User Group

Improvements are suggested by customer groups who convene periodically to discuss software usage.

• Competitor Analyses

A review of competitor’s products or Web sites is used to gather ideas, uncover design requirements and identify tasks.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Business Definition and Requirements Analysis

• Trade Show

Customers at a trade show are presented a mock-up or prototype and asked for comments.

• Other Media Analysis

An analysis of how other media, print or broadcast, present the process, information, or subject matter of interest.

• System Testing

New requirements and feedback are obtained from ongoing product testing.

​

​

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Determining Basic Business Functions

• Understanding the User’s Mental Model

Gain complete understanding of user’s mental model based upon the user’s needs and the user’s profile.

• Performing a Task Analysis

User activities are precisely described in a task analysis.

Task analysis involves breaking down the user’s activities to the individual task level.

Work activities are studied and/or described by users using the techniques such as direct observation, interviews, questionnaires, or obtaining measurements of actual current system usage.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Determining Basic Business Functions

• Developing Conceptual Models

Guidelines for Designing Conceptual Models

Reflect the user’s mental model, not the designer’s.

Draw physical analogies or present metaphors.

Comply with expectancies, habits, routines, and stereotypes.

Provide action-response compatibility.

Make invisible parts and process of a system visible.

Provide proper and correct feedback.

Avoid anything unnecessary or irrelevant.

Provide design consistency.

Provide documentation and a help system that will reinforce the conceptual model.

Promote the development of both novice and expert mental models.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Determining Basic Business Functions

• Developing Conceptual Models

Defining Objects

Determine all objects that have to be manipulated to get work done.

Describe:

— The objects used in tasks.

— Object behavior and characteristics that differentiate each kind of object.

— The relationship of objects to each other and the people using them.

— The actions performed.

— The objects to which actions apply.

— State information or attributes that each object in the task must preserve,display, or allow to be edited.

Identify the objects and actions that appear most often in the workflow.

Make the several most important objects very obvious and easy to manipulate.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Determining Basic Business Functions

• Developing Conceptual Models

Developing Metaphors

Choose the analogy that works best for each object and its actions.

Use real-world metaphors.

Use simple metaphors.

Use common metaphors.

Multiple metaphors may coexist.

Use major metaphors, even if you can’t exactly replicate them visually.

Test the selected metaphors.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Determining Basic Business Functions

The User’s new Mental model

• A mental model is an explanation of someone's thought process about how something works in the real world.
• It is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences.
• Mental models can help shape behavior and set an approach to solving problems and doing tasks.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Understand the Business Function

Design Standards or Style Guides

Value of Standards and Guidelines

• Developing and applying design standards or guidelines achieves design consistency.
• This is valuable to users because the standards and guidelines:

Allow faster performance.

Reduce errors.

Reduce training time.

Foster better system utilization.

Improve satisfaction.

Improve system acceptance.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Allow faster performance.

Reduce errors.

Reduce training time.�

Foster better system utilization

Improve satisfaction.�

Improve system acceptance

Design Standards or Style Guides

Value of Standards and Guidelines:

Developing and applying design standards or guidelines achieves design consistency. This is valuable to users because the standards and guidelines:

Allow faster performance.

Reduce errors

Reduce training time

Foster better system utilization

Improve satisfaction

Improve system acceptance

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Standards or Style Guides

They are valuable to system developers because they:

• Increase visibility of the human-computer interface.
• Simplify design.
• Provide more programming and design aids, reducing programming time.
• Reduce redundant effort.
• Reduce training time.
• Provide a benchmark for quality control testing.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Standards or Style Guides

Business System Interface Standards and Guidelines

• Government and trade organizations began working on developing interface guidelines and standards.
• Organizations addressing these issues have included the International Standards Organization (ISO),
• the American National Standards Institute (ANSI), and the Human Factors and Ergonomics Society.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Standards or Style Guides

• Thovtrup and Nielsen, in analyzing why the rules in the screen design standard were broken,
• Rules were not adhered to, for the following reasons:

An alternative design solution was better than that mandated by the standard.

Available development tools did not allow compliance with the standard.

Compliance with the standard was planned, but time was not yet available to implement it.

The rule that was broken was not known or was overlooked.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Standards or Style Guides

Web Guidelines and Style Guides

• Guidelines can be seen on the sites of the various
• computer companies
• and interface consulting firms,
• in newsletters,
• and even on personal Web sites.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Standards or Style Guides

Document Design

Include checklists to present principles and guidelines.

Provide a rationale for why the particular guidelines should be used.

Provide a rationale describing the conditions under which various design alternatives are appropriate.

Include concrete examples of correct design.

Design the guideline document following recognized principles for good document design.

Provide good access mechanisms

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Design Support and Implementation

• Use all available reference sources in creating the guidelines.
• Use development and implementation tools that support the guidelines.
• Begin applying the guidelines immediately.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU