USER INTERFACE

DESIGN
BY,
MRS.CHANDANA N,
ASSISTANT PROFESSOR,
CS&E,
VVCE MYSORE.
COURSE LEARNING OBJECTIVES

• To study the concept of menus, windows , interfaces , business

function.
• To study the characteristics and components of windows and the
various controls for the windows , problems in windows design with
text graphics
• To study testing method.
 USER INTERFACE DESIGN

Basics
• UI is the front-end view.
• User can manipulate and control software and hardware.
In the real-world environment, we find user interfaces every where
Eg :-computer, mobile apps , aeroplanes , music players etc.,
• Provides platform for Human Computer Interactions.
The software becomes more popular when the user interface is:
• Attractive
• Simple to use
• Responsive in short time
• Clear to understand
User interface is broadly classified into 2 categories
• Command line interface
• Graphical user interface
Module 1:Introduction and overview

• CHAPTER 1:The importance of the user interface.

• CHAPTER 2:Characteristics of graphical and web user interfaces.
The importance of the user interface
What is user interface?
Is the place where interactions between humans and machines
occur.
User interface design definition
• Subset of Human-computer interactions(HCI).
• Human-computer interaction is the study, planning, and design of how people and
computers work together so that a person's needs are satisfied in the most effective
way.
• UID is the part of computer that people can see, hear, touch, talk to, or otherwise
understand or direct.
• The best interface is one which has proper design with combination of
effective input and output mechanisms.
• Input:Input is how people communicate his needs to the system.
• Output :Output is how the computer conveys results of its
computation and requirements to the user.
Importance of good design
• In spite of today's rich technologies and tools we are unable to
provide effective and usable screen because lack of time and care.
• A well-designed interface and screen is terribly important to our users.
• A screen's layout and appearance affect a person in a variety of ways
and Poor design may even chase some people away from a system
permanently.
Benefits of good design
If the design is good the outcome is also good .The below table depicts
the impact of an inefficient screen design on processing time of 4.8
million screen per year.
ADDITIONAL SECONDS REQUIRED ADDITIONAL PERSON-YEARS REQUIRED
PER SCREEN IN SECONDS TO 4.8 MILLION SCREENS PER YEAR
1 0.7
5 3.6
10 7.1
20 14.2

Table 1.1:impact of inefficient screen design on processing time

• The benefits of a well-designed screen have also been under experimental scrutiny
for many years.
• One researcher, for example, attempted to improve screen clarity and readability
by making screens less crowded. The result: screen users of the modified screens
completed transactions in 25 percent less time and with 25 percent fewer errors
than those who used the original screens.
• Training costs are lowered because training time is reduced,support line costs are
lowered because fewer assist calls are necessary and employee satisfaction is
increased because aggravation and frustration are reduced.
• ultimately, that an organization's customers benefit because of the improved
service they receive. Identifying and resolving problems during the design and
development process also has significant economic benefits.
CHAPTER 2: Characteristics of graphical and web user interfaces

The Graphical user interface

• Graphical interface, the primary interaction mechanism is a pointing device of
some kind . It is a computer program that enables a person to communicate with a
computer through the use of symbols , visual metaphors and pointing devices.

• The user interacts with a collection of elements referred to as objects. They can be
seen, heard, touched, or otherwise perceived.
POPULARITY OF GRAPHICS

• Graphics revolutionized design and the user interface.

• Information can appear or disappear through floating windows
• Increased computer power and the vast improvement in the display enable the user's actions to be
reacted to quickly, dynamically, and meaningfully.
• If properly used graphics can reduce mental and perceptional load and increases information
transfer between men and machine because of visual comparisons and simplification of the
perception of structure.
The concept of direct manipulation

• The term used to describe this style of interaction for graphical systems was first
used by Schneiderman (1982). He called them “direct manipulation” systems,
suggesting that they possess the following characteristics :
• The system is portrayed as an extension of the real world
• Continuous visibility of objects and actions :”virtual reality and WYSIWYG and
Transparency”.
• Actions are rapid and incremental with visible display of results.
• Incremental actions are easily reversible.
Indirect manipulation

• Direct manipulation of all screen objects and actions may not be feasible because
of the following:
• The operation may be difficult to conceptualize in the graphical system.
• The graphics capability of the system may be limited.
• The amount of space available for placing manipulation controls in the window border may be
limited.
• It may be difficult for people to learn and remember all the necessary operations and actions.
When these things occur indirect manipulation is provided
• Indirect manipulation substitutes words and text, such as pull-down or
pop-up menus for symbols, and substitutes typing for pointing.
• Windows system are combination of both direct and indirect
manipulation. For example menu may be accessed by pointing to
menu icon and then selecting it.
 Graphical system advantages

• Symbols recognized faster than text

• Faster learning and Faster use and problem solving
• Easier remembering and more natural.
• Exploits visual cues
• Fosters more concrete thinking
• Provides context , fewer errors , increased feeling of control, immediate feedback
• Predictable system learning , easily reversible actions, less anxiety concerning use
• More attractive , may consume less space , replaces national languages , easily augmented with
text displays , low typing requirements
 Graphical system disadvantages

• Greater design complexity

• Learning still necessary
• Lack of experimentally-derived design guidelines
• Inconsistencies in technique and terminology
• Not always familiar
• Window manipulation requirements
• Production limitations
• Few tested icons exist
• Inefficient for touch typists
• Not always the preferred style of interaction
• Not always fastest style of interaction
• May consume more screen space
• Hardware limitations
Characteristics of the Graphical User Interface

• Sophisticated Visual Presentation :Visual presentation is the visual aspect of the

interface.
• Pick-and-Click Interaction
• Restricted Set of Interface Options
• Visualization
• Object Orientation :Properties or Attributes of Objects ,Actions,Application
versus Object or Data Orientation ,Views
• Use of Recognition Memory
• Concurrent Performance of Functions
 The Web User Interface

• Web interface design is essentially the design of navigation and the presentation
of information.
• The Web is a navigation environment where people move between pages of
information, not an application environment. It is also a graphically rich
environment.
• Web interface design is difficult for a number of reasons. First, its underlying
design language, HTML. Next, browser navigation retreated to the pre-GUI era.
 The popularity of Web

• While the introduction of the graphical user interface revolutionized

the user interface, the Web has revolutionized computing.
• It allows millions of people scattered across the globe to communicate,
access information, publish, and be heard.
• Web usage has reflected this popularity. The number of Internet hosts
has risen dramatically.
 Characteristics of Web Design

• A Web interface possesses a number of characteristics, some similar to

a GUI interface, and, as has already been shown, some different.
• Devices
• User Focus
• Data
• Information
• User Tasks
• Presentation
Cont..,
• Navigation
• Interaction
• Response Time
• System Capability
• Task Efficiency
• Consistency
• User Assistance
• Security
• reliabilty
Printed Pages versus Web Pages

• Page size
• Page rendering
• Page layout
• Page resolution
• Page navigation
• Interactivity
• Page independence
Merging Graphical business system and Web

Strength of the Web lies in its ability to link databases and processing occurring on a variety of machines within
a company or organization.
• Intranet
• Internet
• Extranets
Intranet versus the Internet

• They differ, however, in some important ways as :

 Users
 Tasks
 Type of information
 Amount of information
 Hardware and software
 Design philosophy:
Principles of User Interface Design

• It should be useful, accomplishing some business objectives faster and more efficiently than the previously
used method or tool did
• The interface itself should serve as both a connector and a separator: a connector in that it ties the user to the
power of the computer, and a separator in that it minimizes the possibility of the participants damaging one
another. We will begin with the first set of published principles, those for the Xerox STAR.
Principles for the Xerox STAR

• The illusion of manipulable objects

• Visual order and viewer focus
• Revealed structure
• Consistency
• Appropriate effect or emotional impact
• A match with the medium:
 General Principles

The design goals in creating a user interface are described below. They are fundamental to the design and

implementation of all effective interfaces, including GUI and Web ones. These principles are general characteristics

of the interface, and they apply to all aspects.

• Aesthetically Pleasing

• Clarity

• Compatibility

• Comprehensibility

• Configurability

•
Cont.,
• Consistency
• Control
• Directness
• Efficiency
• Flexibility
• Forgiveness
• Predictability
• Recovery
• Responsiveness
• Simplicity
• Transparency