USER INTERFACE DESIGN

(UID)
 Introduction & Overview
The interface is the way to communicate with a
product
Everything we interact with an interface
Eg
Mobile phone
Web page
Entering into the home
Drinking Tea
Principles of a good Interface
Simplicity of interaction mode
Simplicity of basic functions
Speed
 Introduction & Overview
The user interface is the most important part of
any computer system.
because
It is the system to most users to interact with the
computer
It can be seen, can be heard, and can be
touched.
The goals of User interface design are simple,
easy, and enjoyable.
 Introduction & Overview

Interface design is the art of making the

interaction between the human and the
computer.
Everything on the computer is an
interface, to allow to access to the wanted
data.
 Introduction & Overview
Defining the User Interface (UI)

Person controls a software or hardware device.

The way a person interacts with a computer,
tablet, smart phone or other electronic device.
A good user interface provides a "user-friendly",
allowing the user to interact with the software
or hardware in a natural way.
 Introduction & Overview
User interface design is a subset of the field of
study called human-computer interaction (HCI).
Human-computer interaction is the study of
planning, and design of how people and computers
work together so that a persons needs are satisfied
in the most effective way.
HCI designers must consider a variety of factors:
what people want and expect,
what physical limitations and abilities of people.
what people find enjoyable and attractive.
What are the Technical characteristics and
limitations of the computer h/w & s/w
 Introduction & Overview
The user interface has two components:
input and output.
Input is how a person communicates his or her
needs to the computer.
Eg:- keyboard, mouse, etc.
Output is how the computer conveys the results to
the user.
Eg:- display screen, voice and sound.
Proper interface design will provide a mix of well-
designed input and output mechanisms
That satisfy the users needs, capabilities, and
limitations.
 The Importance of the User Interface
The Importance of Good Design
A good-designed interface and screen is
important to our users.
It is their window to view the capabilities of the
system.
One of the few visible components of the
product, the developers created.
 The Importance of the User Interface
The Importance of Good Design
A screens layout and appearance affect a person
in a variety of ways.
If they are confusing and inefficient, people will
have greater difficulty in doing their jobs and
will make more mistakes.
Poor design may leads some people away from a
system permanently.
 The Importance of the User Interface
The Benefits of Good Design
The goal of user interface design is to make the
users interaction as simple and efficient as
possible
User Interface Design is beneficial in both S/w &
H/w
Some of the benefits of having good User
Interface Design are
Correct User interface: prevent industrial
injuries and hence absence due to illness.
 The Importance of the User Interface
The Benefits of Good Design
Fewer errors: Good user interfaces reduce
the number of errors and their related costs.
Productivity / Save Development time: A
better user design allows reduction of the
development time spent due to reduced
iterations and rework and overall better
productivity.
Customer returning: If customers find a site
or product usable, then the possibility that
they use this site / product again.
 The Importance of the User Interface
The Benefits of Good Design
Increase user satisfaction: When systems
match user needs, satisfaction often
improves dramatically.
Increase market share : The importance of
having a competitive edge in usability
 Human-Computer Interface
History of the Human-Computer Interface
The lowest and most common level of
communication modes are movements and
gestures.
Movements and gestures are language-
independent, that is, they permit people who do
not speak the same language to deal with one
another.
 Human-Computer Interface
History of the Human-Computer Interface

The next higher level, is spoken language.

Most people can speak one language, some two
or more.
A spoken language is a very efficient mode of
communication if both parties to the
communication understand it.
 Human-Computer Interface
History of the Human-Computer Interface
At the third and highest level of complexity is
written language.

In modern times, we have the typewriter,

another step upward in communication
complexity.
Spoken language, however, is still more efficient
than typing, regardless of typing skill level.
 Human-Computer Interface
History of the Human-Computer Interface
The computer demanded, typed input through a
keyboard; people responded slowly using this
device
The human computer communication- using
keyboards
The designers have been developing, different
interfaces to interact with the computer.
 Graphical User Interface
Introduction of the Graphical User Interface
GUI was first developed at Xerox PARC by Alan Kay,
in 1970.
Later Apple introduced the Lisa computer, the first
commercially available computer on January
19, 1983.
A GUI uses windows, icons and menus carry out
commands such as opening files, deleting files,
moving files, etc. and
Although many GUI Operating Systems are
operated by using a mouse, the keyboard can also
be used by using keyboard shortcuts .
 Graphical User Interface
Introduction of the Graphical User Interface
GUI Operating Systems are much easier for end-
users to learn and use because commands do
not need to be known or memorized.
Because of their ease of use, GUI Operating
Systems have become the dominant operating
system used by end-users today.
 History of Screen Design
A cathode ray tube (CRT) display was first attached to a
computer, application of good design
IBM introduced its 3270 cathode ray tube text-based
terminal.
The 3270 was used in the office, and company for good
screen design
Most early screens were monochromatic, typically
presenting green text on black backgrounds.
Later (1980-1981) introduced clear and meaningful
captions and by listing commands on the screen, and
enabling them to be applied through function keys.
Messages also became clearer.
 History of Screen Design
Instructions and reminders to the user are
displayed on the screen in the form of prompts.
In 1990 - graphics yielded another milestone in the
evolution of screen design,
Groupings, Alignment, and Borders were made
available to visually enhance
Buttons and menus for implementing commands
replaced functions keys
Multiple properties of elements were also
provided, including many different font sizes and
styles, line thicknesses, and colors.
 History of Screen Design
Included list boxes, drop-down combination
boxes, etc.
These new controls were much more effective in
supporting a persons memory, now simply
allowing for selection from a list instead of
requiring a remembered key entry.
History of Screen Design