USER INTERFACE DESIGN

UNIT-1
• Prescribed Books:
– Book -1: The essential guide to user interface design, Wilbert O Galitz, Wiley
DreamTech.
– Book-2: Designing the user interface. 3rd Edition Ben Shneidermann, Pearson
Education Asia

• Reference Books:
– Book1: Human – Computer Interaction. Alan Dix, Janet Fincay, Gre Goryd,
Abowd, Russell
Bealg, Pearson Education
– Book2: Interaction Design Prece, Rogers, Sharps. Wiley Dreamtech,
– Book3: User Interface Design, Soren Lauesen , Pearson Education.

UNIT-1
 UNIT-I

Introduction to User Interface:

Defining the user interface and its importance, The importance
of Good design, Benefits of Good design, History of Screen
design, Characteristics of graphical and web user interfaces,
Principles of user interface design

UNIT-1
Defining the User Interface
User interface (UI) design is the process designers
use to build interfaces in software or computerized
devices, focusing on looks or style. Designers aim
to create interfaces which users find easy to use
and pleasurable. UI design refers to graphical user
interfaces and other forms.

UNIT-1
DEFINING THE USER INTERFACE

• Human-Computer Interaction (HCI)

• User Interface (UI) Components.
• Input Components
• Output Components
• Effective Interface Design

UNIT-1
HUMAN-COMPUTER
INTERACTION (HCI)
• HCI involves the study, planning, and design of how people and computers work together to
meet user needs effectively.
• HCI designers consider user expectations, physical abilities, perceptual and information
processing systems, and user enjoyment and attractiveness.
• Technical characteristics and limitations of computer hardware and software are also
considered.

UNIT-1
USER INTERFACE (UI)
COMPONENTS
• The UI is the part of a computer and its software that users
interact with through sight, hearing, touch, speech, etc.
• The UI has two main components: input and output.

UNIT-1
INPUT COMPONENTS

• Input involves how users communicate their needs to the

computer.
• Common input components include keyboards, mice, trackballs,
touch-sensitive screens or pads, and voice commands.

UNIT-1
OUTPUT COMPONENTS

• Output is how the computer conveys results and requirements to

users.
• The most common output mechanism is the display screen,
followed by auditory outputs like voice and sound.
• The use of touch for output in interface design is still largely
unexplored.

UNIT-1
EFFECTIVE INTERFACE DESIGN
• Effective interface design combines well-designed input and output
mechanisms that meet user needs, capabilities, and limitations.
• The best interface is unobtrusive, allowing users to focus on the
information and tasks rather than the mechanisms used to present
and perform them.

UNIT-1
1.2 THE IMPORTANCE OF GOOD
DESIGN
• With today’s technology and tools, and motivation we need to
create really effective and usable interfaces and screens, why do we
continue to produce systems that are inefficient and confusing or, at
worst, just plain unusable? Is it because:
1. We don’t care?
2. We don’t possess common sense?
3. We don’t have the time?
4. We still don’t know what really makes good design?
IMPACT OF POOR DESIGN

• Confusing and inefficient designs can lead to job difficulties, mistakes, and user
frustration.
• Extreme user reactions to poor design include acts of physical violence against
computers.
• Poor design can have significant financial costs and, in critical systems, can
compromise user and public safety.
IMPORTANCE OF GOOD
DESIGN
• A well-designed interface and screen are crucial for users as they
are the primary interaction points with the system.
• The interface impacts the user's perception of the system and can
influence the organization's relationship with customers and
profitability.
1.3 THE BENEFITS OF GOOD DESIGN
• Increased Productivity
• Cost Savings
• Improved Usability and User Satisfaction
• Reduced Training and Support Costs
• Enhanced Customer Service
• Economic Benefits
• Increased Productivity
• Less crowded screens improve productivity by 20%.
• Reformatted screens lead to 25% faster transactions and 25% fewer errors.
• Good design principles reduce decision-making time by about 40%,
resulting in significant person-year savings.
• Cost Savings
• Properly designed screens can save substantial amounts of money by
reducing processing time.
• Example: One graphical window redesign saved a company about $20,000 in
its first year.
Improved Usability and User Satisfaction
• Users can locate desired information more efficiently, improving
their satisfaction and reducing frustration.
• Example: A redesigned homepage improved search success rate and
reduced search time.
• Reduced Training and Support Costs

• Better design lowers training costs as less training time is needed.

• Support line costs decrease due to fewer assist calls.
• Enhanced Customer Service
• Better-designed interfaces lead to improved service quality for customers.
• Users' tasks are more manageable, and errors are minimized.

• Economic Benefits
• Early identification and resolution of design problems during development save
significant costs.
• Every dollar invested in usability can return $10 to $100.
The table shows how small inefficiencies in screen design can significantly
increase the total processing time and resource requirements.
Additional Seconds Required Per Screen in Seconds:
•This column indicates the extra time a user needs to spend on each screen
due to inefficient design. For example, if poor design forces users to spend 1
additional second per screen, it means that each interaction with the screen
is slightly slower than it could be with better design.
• Additional Person-Years Required to Process 4.8 Million Screens
Per Year:
• This column shows how much additional human labor is required
to process a set number of screens annually due to the extra
seconds spent per screen. A person-year is a unit of
measurement that represents the amount of work one person
can do in a year.
• This demonstrates how even small inefficiencies in screen design can
accumulate to significant additional time and resource costs, highlighting
the critical need for good design practices to enhance productivity and
reduce unnecessary labor.
1.4 A BRIEF HISTORY OF THE HUMAN-
COMPUTER INTERFACE

• Initially humans have communicated through gestures, spoken

language, and written language for centuries.
• Spoken language is usually faster and more efficient than written
language, and writing is generally faster than typing.
• Earlier computers required users to type commands on keyboards, which was
slow and difficult for many people.
• Popular voice assistants like Siri (Apple), Google Assistant (Google), Alexa
(Amazon), and Cortana (Microsoft).
• Popular apps like Google Keep, Microsoft OneNote, Apple Notes, and
Evernote.
INTRODUCTION OF THE GRAPHICAL USER
INTERFACE
• Earlier computers didn't have pictures or icons. Instead,
they used text commands, which made them hard to use
because people had to remember exact commands to do
anything.
• Xerox PARC developed the GUI concept, using a mouse
for pointing and selecting objects on a graphical interface.
Graphical user interface (GUI) allows users to interact
with computers using pictures, icons, and a mouse, making
it much easier than typing text commands.
TEXT-BASED COMPUTER SCREENS
GUI BASED SCREEN
INTRODUCTION OF THE GRAPHICAL USER
INTERFACE
• Xerox PARC and the Mouse: In 1970s, researchers at Xerox
PARC developed the concept of a GUI and invented the mouse, a
device to point and click on icons. The mouse made interacting with
the computer more intuitive.
• 1984 - Apple Macintosh: In1984, Apple released the Macintosh,
the first commercially successful computer with a GUI. This was a
big step because it showed that people preferred using GUIs over
text commands.
• 1985 - Microsoft Windows 1.0: In 1985 Microsoft entered the
market with Windows 1.0, bringing the GUI to a broader audience.
INTRODUCTION OF THE GRAPHICAL USER
INTERFACE
• Other companies like Commodore and IBM, as well as
UNIX-based systems, started developing their own GUIs.
Some even included advanced features like 3D interfaces.
• In the 1990s and 2000s, Microsoft and Apple became the
leading forces in GUIs. They kept improving their interfaces,
which helped establish GUIs as the standard way to
interact with personal computers.
THE BLOSSOMING OF THE WORLD WIDE WEB

• Early Development (1960s-1980s):

• 1962: A scientist, J.C.R. Licklider, dreamed of connecting computers
worldwide.
• 1969: The first version of the Internet, called ARPANET, connected
four universities.
• 1974: The first commercial Internet, Telenet, was launched.
• 1982: The Internet was officially named, and more places started
using it.
THE BLOSSOMING OF THE WORLD WIDE WEB

• Formation of the World Wide Web:

• 1989: Tim Berners-Lee at CERN had an idea for a way to
link information using hypertext.
• 1991: He created HTML and launched the World Wide
Web, making it easier to share information.
THE BLOSSOMING OF THE WORLD WIDE WEB

• Key Milestones:
• 1991: The Gopher system was created to make Internet
navigation easier.
• 1992: Delphi started offering Internet access to the public.
• 1993: The Mosaic browser was developed, making the
Web more visual and user-friendly.
• 1994: Netscape Navigator became the most popular
browser until Microsoft released Internet Explorer in
1995.
THE BLOSSOMING OF THE WORLD WIDE WEB

• Commercialization and Competition:

• 1995: Companies like AOL,Yahoo, and Lycos made
the Internet more commercial.
• 1998: Netscape made its browser free, leading to
the development of Mozilla.
• 2003: Apple launched Safari, and Mozilla Firefox was
released in 2004, challenging Internet Explorer.
THE BLOSSOMING OF THE WORLD WIDE WEB

• Ongoing Development:
• 1994: The World Wide Web Consortium (W3C)
was formed to develop Web standards.
• Today: The Web is a vast information space where
people can read and write using connected
computers.
 A BRIEF HISTORY OF SCREEN DESIGN
EARLY SCREEN DESIGN (1970S):

• Introduction of IBM 3270: IBM introduced its 3270 cathode ray

tube text-based terminal, sparking interest in screen design. Early
screens were very basic and hard to use. They looked like a list of
confusing codes and words.
• Challenges: Users had to remember a lot of commands and the screens
were hard to read.
 A BRIEF HISTORY OF SCREEN DESIGN
EARLY SCREEN DESIGN (1980S):

• Screens got a bit better. Designers started to organize

information in a clearer way.
• Screens were less cluttered, with better labels and some
instructions on the screen.
 A BRIEF HISTORY OF SCREEN DESIGN
EARLY SCREEN DESIGN (1990S):

• The big change came with graphics. Screens started to look

more like what we see today, with buttons, menus, and
different colors.
• Easier to use because you could click on things instead of
typing commands. More visually appealing.
 A BRIEF HISTORY OF SCREEN DESIGN
SCREEN DESIGN (NOW):

• Today, screens are very advanced, user-friendly, and visually engaging.

• Technology allows for smooth and interactive designs that are easy
to use and understand.
 CHARACTERISTICS OF GRAPHICAL AND
WEB USER INTERFACES
• The following are the characteristics of GUI interfaces are
• Interaction styles.
• The concept of direct manipulation.
• The characteristics of graphical interfaces.
• The characteristics of Web interfaces.
• Web page versus Web application design.
• The general principles of user interface design.
 1.INTERACTION STYLE

• An interaction style is the way users communicate with a computer

system. When designing graphical systems, web pages, or
applications, designers can choose from several interaction styles.
• When designing a computer system, the choice of interaction styles
can be influenced by the type of system and the devices used to
interact with it (like keyboards, mice, touchscreens, etc.).
 1.INTERACTION STYLE
1.1 Command Line:
• Description: The Command Line Interface (CLI) is the oldest
way of interacting with a computer. Imagine it as a blank screen
where you have to type specific commands to tell the computer
what to do.
• We press a function key or type a command into a special area on the screen.
Commands can be simple letters, short words, or even multiple words.
1.Examples:
1. Typing "copy file.txt D:" to copy a file.
2. Typing "delete file.txt" to delete a file.
 1.INTERACTION STYLE
• Advantages:
• Powerful: It gives us direct access to almost all functions of the computer.
• Flexible: We can add options to commands to make them do different things.
For example, "copy file.txt D:\backup" tells the computer to copy the file to a
specific folder.
• Disadvantages:
• Memory-Dependent: We have to remember the exact commands, as there
are no hints or lists on the screen to help you.
• Complexity: Commands can be hard to understand and use, with
complicated rules for typing them correctly.
• Error-Prone: It's easy to make typing mistakes, and the computer will not
understand what you want if there's even one small error.
 1.INTERACTION STYLE
1.2 Menu Selection
Description: Menu Selection is an interaction style where users choose
from a list of options or choices presented on the screen. These choices can be
selected using a mouse, keyboard, or even by voice commands.
 1.INTERACTION STYLE
1.2 Menu Selection :
1.On Screens:
1.Users see a list of options.
2.They use a mouse, keyboard, or touchscreen to select an
option.
3.For example, clicking "File" and then "Save" in a software
application.
2.By Voice:
1.Users can select options by speaking.
2.For example, when you call a business and hear "Press 1 for
customer service," you are using a menu selection by voice.
 1.INTERACTION STYLE
1.2 Menu Selection :
Advantages
• Menus help users recognize options rather than recall commands from
memory.
• Menus guide users through complex tasks by breaking them into smaller,
manageable steps.
• Disadvantages
• Experienced users might find menus slower because they have to go through
several steps to complete a task.
• If labels are confusing, users may make errors or take longer to make a
selection.
 1.INTERACTION STYLE
1.2 Menu Selection :
 1.INTERACTION STYLE
1.3 Form Fill-in :
• Form Fill-In Style is a method used to collect information from
users by having them fill out fields on a screen. These fields can be
text boxes, drop-down lists, checkboxes, and other controls where
users enter or select information.
 1.INTERACTION STYLE
1.3Form Fill-in:
Advantages
• Forms are easy to understand because they look like paper forms
most people use it.
• Well-designed forms help users to quickly enter information.
• Disadvantages
• A poorly designed form can be frustrating and slow to complete.
 1.INTERACTION STYLE
1.4 Direct Manipulation :
• Direct Manipulation is an interaction style where users directly interact
with the objects on the screen.
• For example, icons, buttons, and sliders.
• Instead of typing commands or selecting from menus, users use pointing
devices like a mouse or joystick.
• Users navigate the interface using visual elements like menu bars and pull-
down menus.
 1.INTERACTION STYLE
1.4 Direct Manipulation :
Advantages
• Users can see the effects of their actions immediately, making it easier to
understand.
• Users receive immediate visual feedback from the system, helping them
understand what actions they are performing.
• Disadvantages
• Limited screen space can make it difficult to display all necessary objects and
options.
• Direct manipulation interfaces can require more computing power and
resources to support graphics and interactivity.
 1.INTERACTION STYLE
1.5 Anthropomorphic Interface :
Anthropomorphic Interface: This type of interface aims to
interact with people the same way humans interact with each other.
It includes natural language dialogues, hand gestures, facial
expressions, and eye movements.
 1.INTERACTION STYLE
1.5 Anthropomorphic Interface :
Advantages
• These interfaces mimic human behaviour, making them feel more
intuitive and natural.
• Disadvantages
• Developing these interfaces requires a deep understanding of human behavior and advanced
technology.
 2. THE CONCEPT OF DIRECT MANIPULATION

• A type of graphical system where users interact directly

with on-screen elements.The characteristics include
• The system is portrayed as an extension of the real world.
• Objects and actions are continuously visible.
• Actions are rapid and incremental with visible display of
results.
• Incremental actions are easily reversible.
 2. THE CONCEPT OF DIRECT MANIPULATION

2.1The system is portrayed as an extension of the real

world.
• The system replicates real-world objects and actions on the screen.
• Users interact with these objects as they would in the real world,
making the interface intuitive.
• A computer desktop mimics a real desk, with files and folders.
 2. THE CONCEPT OF DIRECT MANIPULATION

2.2 Objects and actions are continuously visible.

• Just like how objects on a physical desk are always visible and
accessible, in a direct manipulation interface, screen objects are
continuously visible.
• Eg: how icons on a computer desktop are always visible, and users
can interact with them by clicking or dragging.
Advantages
• Actions are rapid and incremental with immediate display of results, making the
system responsive and user-friendly.
• Easy to understand
 2. THE CONCEPT OF DIRECT MANIPULATION

2.3 Actions are rapid and incremental with visible display of

results.
• Actions are designed to be quick and happen in small steps. This
means users can see the effects of their actions right away, without
waiting (They can’t touch).
• In addition to visual feedback, some systems also provide sounds to
indicate that an action has been performed. This is called auditory
feedback.(eg: Trash Button)
 2. THE CONCEPT OF DIRECT MANIPULATION

2.4 Incremental actions are easily reversible.

• Finally, actions, if discovered to be incorrect or not desired, can be
easily undone.
 3. THE CHARACTERISTICS OF GUI

• A Graphical User Interface (GUI) is a type of user interface that

allows users to interact with electronic devices using graphical
icons, visual indicators, and elements such as windows, menus, and
buttons, instead of relying solely on text-based commands.
 3. THE CHARACTERISTICS OF GUI

The characteristics of the Graphical User Interface (GUI) include

Sophisticated Visual Presentation
Pick-and-Click Interaction
Restricted Set of Interface Options
Visualization
Object Orientation
Extensive Use of Recognition Memory
Concurrent Performance of Functions
 3. THE CHARACTERISTICS OF GUI
3.1 Sophisticated Visual Presentation
Visual presentation refers to everything we see on a computer screen.
• Visual Elements and Capabilities: Modern graphical systems display lines,
drawings, icons, various fonts, up to 16 million colors, animations, photos, and
videos.
• Interface Components: These include windows (primary, secondary, or
dialog boxes), menus (menu bar, pull-down, pop-up, cascading), icons, and
screen-based controls (text boxes, list boxes, combo boxes, settings, scroll bars,
and buttons).
• Interaction Tools: Users interact with the interface using a mouse or
pointing device and a cursor.
• Objective of Visual Presentation: The aim is to create an interface that is
realistic, meaningful, simple, and clear, making it user-friendly and reflective of
the real world.
 3. THE CHARACTERISTICS OF GUI

3.2 Pick-and-Click Interaction

Pick: Identifying the element on the screen we want to interact
with.
Click: Signaling the action we want to perform on that element.
Primary Mechanism - The Mouse: Move the mouse pointer over
the element (pick), then press a button on the mouse (click) to
perform the action.
• Secondary Mechanism - The Keyboard: Many systems allow us
to use keys to navigate and select items instead of the mouse.
 3. THE CHARACTERISTICS OF GUI

3.3 Restricted Set of Interface Options

• Users can only choose from the options shown on the screen or those that
can be accessed through these options. There are no hidden choices.
• WYSIWYG (What You See Is What You Get)
 3. THE CHARACTERISTICS OF GUI

3.4 Visualization
• Visualization is a way to help people understand complex or large amounts of
information by changing how it is represented.
• Example: If you want to compare sales over time, a line graph might be best. If
you want to see the proportion of different items sold, a bar chart might be
better.
• Effective visualizations help people gain insights, increase productivity, and use
data more quickly and accurately.
 3. THE CHARACTERISTICS OF GUI

3.5 Object Orientation

• Imagine your computer screen is your workspace:
• Objects: Think of the items on your desk—documents, folders, and your printer. Each of
these is an object.
• Actions: What you do with these items—open a document, move a folder, print a file.
• Types of Objects:
• Data Objects: The text and images in a document.
• Container Objects: Folders on your desk that hold multiple documents.
• Device Objects: Your printer or trash can.
 3. THE CHARACTERISTICS OF GUI

3.5 Object Orientation

• Relationships:
• Collections: Selecting multiple documents to move them
together.
• Constraints: Changing the size of a picture in a document
affects the layout of the text.
• Composites: A paragraph in a document is a composite of
sentences and words.
• Containers: A folder on your desk that holds various
documents.
 3. THE CHARACTERISTICS OF GUI
3.6 Extensive Use of Recognition Memory
• Keeping objects and actions visible on the screen helps people remember and
use them more easily.
• When objects and actions are always on the screen, people can quickly see and
use them without having to remember where they are or how to find them.
 3. THE CHARACTERISTICS OF GUI

3.7 Concurrent Performance of Functions(Graphic systems

can perform multiple tasks at the same time.)
• Types of Multitasking:
• Cooperative Multitasking: The system handles background tasks
when it's not busy with the main task.
• Preemptive Multitasking: The system divides processing power
into time slices and allocates portions to each running application.
 ADVANTAGES OF GUI

• Symbols recognized faster than text

• Faster learning
• Faster use and problem solving
• Easier remembering
• More natural
• Exploits visual/spatial cues
• Fosters more critical thinking
• Provides context
 ADVANTAGES OF GUI

•Fewer errors
•Increased feeling of control
•Immediate feedback
•Predictable system responses
•Easily reversible actions
•Less anxiety concerning use
•More attractive
•May consume less space
 ADVANTAGES OF GUI

• Replaces national languages

• Easily augmented with text displays
• Low typing requirements
• Smooth transition from command language
system
 DISADVANTAGES OF GUI

• Greater design complexity

• Learning still necessary
• Lack of experimentally-derived design guidelines
• Inconsistencies in technique and terminology
• Working domain is the present
• Not always familiar
 DISADVANTAGES OF GUI

• Window manipulation requirements

• Production limitations
• Few tested icons exist
• Inefficient for touch typists
• Inefficient for expert users
• Not always the preferred style of interaction
• Not always the fastest style of interaction
 THE WEB USER INTERFACE
• Revolutionary Impact: The Web transformed computing by enabling global
communication, information access, and content publishing, giving users
unprecedented control over how web pages are displayed and function.
• Rapid Growth: The number of internet hosts and users grew exponentially,
from over 1,000 hosts in 1984 to over 350 million hosts and one billion users
by 2005, with the highest user base in the Asia/Pacific region.
• User Control: Users have significant control over web page elements like
typography, colors, graphics, data transmission, and cookies, which has led to
more discerning preferences regarding web design.
• Design Expectations: Poor web design, such as slow downloads, confusing
navigation, and disturbing animations, leads to user abandonment, emphasizing
the need for fast, intuitive, and well-organized websites.
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
CHARACTERISTICS OF A WEB INTERFACE
DIFFERENCES BETWEEN PRINTED
PAGES AND WEB PAGES
• Page Layout
Printed Pages: Precise and consistent layout.
Web Pages: Approximate layout, influenced by user’s device and
browser.
• Page Resolution
Printed Pages: High resolution, easy to read.
Web Pages: Lower resolution, screen reading is slower.
DIFFERENCES BETWEEN PRINTED
PAGES AND WEB PAGES
• Page Size
Printed Pages: Fixed size, larger, designed as one complete entity.
Web Pages: Variable size, displayed in pieces, visual impact often
fragmented.
• Page Rendering
Printed Pages: Instant, complete view.
Web Pages: May load slowly, content appears piece by piece.
DIFFERENCES BETWEEN PRINTED
PAGES AND WEB PAGES
• User Focus
Printed Pages: Complete information set, easy to gauge effort required.
Web Pages: Individual snapshots, often skimmed, less sense of overall
structure.
• Page Navigation
Printed Pages: Simple page turning.
Web Pages: Requires deciding on links to follow, can be complex.
DIFFERENCES BETWEEN PRINTED
PAGES AND WEB PAGES
• Sense of Place
Printed Pages: Physical cues and organization provide a sense of location.
Web Pages: Lack physical cues, can cause disorientation.
• Interactivity
Printed Pages: Static information, visually focused.
Web Pages: Dynamic interaction (scrolling, clicking), more engaging.
• Page Independence
Printed Pages: Sequential, contextually dependent.
Web Pages: Independent, each page must be self-explanatory.
COMPARISON BETWEEN INTRANETS
AND THE INTERNET
• Users
Intranet: Used by organization employees who are familiar with the
organization’s structure, products, jargon, and culture.
Internet: Used by a broad audience, including customers who know
much less about the organization.
• Tasks
Intranet: Used for everyday organizational activities like complex
transactions, queries, and communications.
Internet: Mainly used for finding information and performing simple
transactions.
COMPARISON BETWEEN INTRANETS
AND THE INTERNET
• Type of Information
• Intranet: Contains detailed, frequently updated information necessary for
organizational functioning.
• Internet: Presents more stable information such as marketing materials,
customer information, and reports.
• Amount of Information
• Intranet: Typically much larger, possibly ten to one hundred times the size of
the organization’s Internet site.
• Internet: Generally smaller in comparison, focusing on broader information
for the public.
COMPARISON BETWEEN INTRANETS
AND THE INTERNET
• Hardware and Software
• Intranet: Operates in a controlled environment, allowing standardization of
computers, monitors, browsers, and other software. Faster communication
speeds enable the use of rich graphics and multimedia.
• Internet: Requires cross-platform compatibility, often resulting in slower
download times due to diverse user hardware and slower communication
speeds.
COMPARISON BETWEEN INTRANETS
AND THE INTERNET
• Design Philosophy
• Intranet: Leans towards traditional GUI designs that are familiar
to users, incorporating effective and visually appealing elements
while avoiding unnecessary and distracting features.
• Internet: Often includes promotional and diverse design elements
to attract and engage a wide audience.
 PRINCIPLES OF USER INTERFACE DESIGN
• The history of the human-computer interface, various researchers
and writers have attempted to define a set of general principles of
interface design.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
1.Illusion of Manipulable Objects
Create objects on the screen that look and act like real objects you
can interact with.
Key Points:
1.Objects should be easy to understand and use.
2.It should be obvious how to select and interact with these objects.
3.Selected objects should clearly show they are selected.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
2.Visual Order and Viewer Focus
Highlight important elements on the screen at the right time.
• Key Points:
• Use visual contrast to make key parts stand out.
• Use animation and sound to draw attention.
• Provide feedback through the pointer, which often changes shape.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
3 . Revealed Structure
• Concept: Make the relationship between user actions and system
responses clear and direct.
• Key Points:
• Minimize the steps between what the user wants to do and the effect.
• Reveal the underlying structure during the selection process to help users
understand their actions.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
4. Consistency

Keep the interface consistent to make it easier to learn and use.

• Key Points:
• Maintain consistency in element locations, commands, fonts, and selection
indicators.
• Use consistent techniques for contrast and emphasis.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
5.Appropriate Effect or Emotional Impact
Match the interface’s look and feel to the product’s purpose
and market.
• Key Points:
• Ensure the interface reflects the product’s intended emotional
effect, whether professional, secure, playful, or imaginative.
 PRINCIPLES OF USER INTERFACE DESIGN
• Principles for the Xerox STAR
6. Match with the Medium
• Design the interface according to the capabilities of the display
device.
• Key Points:
• Consider the device’s resolution and color capabilities.
• Ensure the screen images are of high quality based on what the device can
display.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 1. Accessibility in Design
• Systems should be designed so that everyone can use them without needing
any special modifications.
• Perceptibility: The design should be understandable to everyone, regardless
of their sensory abilities (like sight or hearing).
• Operability: The design should be usable by everyone, regardless of their
physical abilities.
• Simplicity : The design should be easy to understand and use, no matter the
user’s experience, literacy, or focus level.
• Forgiveness :The design should minimize errors and make it easy to fix them
when they occur.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 2. Aesthetically Pleasing
• Provide visual appeal by following these presentation and graphic design
principles:
–– Provide meaningful contrast between screen elements.(Use differences in color,
size, and style to make important )
–– Create groupings.(Group related items together to show they are connected)
–– Align screen elements and groups. (Arrange items in a neat and orderly way)
–– Provide three-dimensional representation.(Use shading and shadows to give a sense
of depth to objects.)
–– Use color and graphics effectively and simply. (Choose colors and images that are
easy to understand and not overwhelming.)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 3. Availability
• Make all objects available at all times. (Users should be able to access
any feature or function whenever they need it.)
• Avoid the use of modes. (Avoid creating different modes where
some actions are restricted or unavailable.)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 4. Clarity
• Ensure that the interface is easy to understand in terms of
looks, functions, and wording.
• Visual Elements(Make sure that icons, buttons, and other visual elements
are easy to recognize and understand.)
• Functions( Ensure that the functions (what the software does) are
clear and easy to understand.)
• Metaphors(Use familiar analogies that relate to real-world concepts to
explain functions).
• Words and Text( Use simple and clear language, avoiding
technical jargon.)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 4. Compatibility
• Provide compatibility with the following:
–– The user (Design should meet the needs and perspectives of the user.)
–– The task and job(The system should align with the tasks users need to perform.)
–– The product (Make sure the new system works well with other systems the user already
knows.)
• Adopt the user’s perspective.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 5. Configurability :Allow users to easily personalize and adjust settings to fit their needs and
preferences.

• Permit easy personalization, configuration, and reconfiguration of

settings to do the following:
–– Enhance a sense of control. (Users should be able to customize
the interface to suit their personal preferences.)
–– Encourage an active role in understanding. (Personalizing settings helps
users engage more deeply with the system, leading to better
understanding and efficiency.)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 5. Consistency
• A system should look, act, and operate the same throughout.
• Similar components should:
–– Have a similar look. –– Have similar uses. –– Operate similarly.
• The same action should always yield the same result.
• The function of elements should not change.
• The position of standard elements should not change.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 6. Control
• The user must control the interaction.
–– Actions should result from explicit user requests.
–– Actions should be performed quickly.
–– Actions should be capable of interruption or termination.
• –– The user should never be interrupted for errors.
• The context maintained must be from the perspective of the user. (The system should keep
context from the user’s point of view.)
• Users should have different ways to achieve their goals.
• Avoid states where some actions aren’t available.
• Users should be able to personalize the interface.
• Provide good default settings for beginners.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 6. Directness (Directness means that when you perform an action, you immediately see its
effect.)
• Provide direct ways to accomplish tasks.
–– Available alternatives should be visible.(All available options or choices should be
clearly visible to the user)
–– The effect of actions on objects should be visible. (In direct manipulation systems,
tasks are performed by directly interacting with objects.)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 7. Efficiency
• Minimize eye and hand movements, and other control actions.
–– Transitions between various system controls should flow easily and freely.
–– Navigation paths should be as short as possible.
–– Eye movement through a screen should be obvious and sequential. (When
users look at a screen, their eye movement should be natural and sequential. )
• Anticipate the user’s wants and needs whenever possible. (Good interface design
anticipates what users might want)
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 8. Familiarity
• Employ familiar concepts and use a language that is familiar to the user.
• Keep the interface natural, mimicking the user’s behavior patterns.
• Use real-world metaphors.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
•9. Flexibility
• A system must be sensitive to the differing needs of its users, enabling a level
and type of performance based upon:
–– Each user’s knowledge and skills.
–– Each user’s experience.
–– Each user’s personal preference.
–– Each user’s habits.
–– The conditions at that moment.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 10. Forgiveness
• Tolerate and forgive common and unavoidable human errors.
• Prevent errors from occurring whenever possible.
• Protect against possible catastrophic errors.
• Provide constructive messages when an error does occur.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 10. Immersion
• Immersion means creating a seamless, engaging experience that keeps users focused and
involved in their tasks without getting distracted or frustrated.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 10. Obviousness
• A system should be easily learned and understood. A user should
know the following: –– What to look at
–– What it is
–– What to do
• –– When to do it –– Where to do it –– Why to do it –– How to do
it
• The flow of actions, responses, visual presentations, and information
should be in a sensible order that is easy to recollect and place in
context.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
11. Operability
■ Ensure that a system’s design can be used by everyone,
regardless of physical abilities.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
12. Perceptibility
■ Assure that a system’s design can be perceived,
regardless of a person’s sensory abilities.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 13. Predictability
• The user should be able to anticipate the natural progression of
each task. –– Provide distinct and recognizable screen elements.
–– Provide cues to the result of an action to be performed.
• Do not bundle or combine actions.
• All expectations should be fulfilled uniformly and completely.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 13. Recovery
• A system should permit:
–– Commands or actions to be abolished or reversed.
–– Immediate return to a certain point if difficulties arise.
• Ensure that users never lose their work as a result of: –– An error on their
part.
–– Hardware, software, or communication problems.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
14. Responsiveness
• The system must rapidly respond to the user’s
requests.
• Provide immediate acknowledgment for all user
actions:
• –– Visual. –– Textual. –– Auditory.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 15. Safety
■ Protect the user from making mistakes.
–– Provide visual cues, reminders, lists of choices, and other
aids either automatically or upon request.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles

.
16 Simplicity
• Provide as simple an interface as possible.
• Ways to provide simplicity:
• –– Use progressive disclosure, hiding things until they are needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated and less frequently used functions.
• –– Provide an obvious visual hierarchy.
• –– Provide defaults.
• –– Minimize screen alignment points.
• –– Make common actions simple at the expense of uncommon actions being made
• harder.
• –– Provide uniformity and consistency.
• –– Eliminate unnecessary elements.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 17. Transparency
• ■ Permit the user to focus on the task or job, without concern for the
mechanics of the interface.
• –– Workings and reminders of workings inside the computer should be
invisible to the user.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
• 18 Trade-Offs
• ■ Final design will be based on a series of trade-offs
balancing often-conflicting design principles.
• ■ People’s requirements always take precedence over
technical requirements.
 PRINCIPLES OF USER INTERFACE DESIGN
• General Principles
19.Visibility
■ A system’s status and methods of use must be clearly visible.
■ Improve visibility through:
–– Hierarchical organization.
–– Context sensitivity.