Designing the

User Interface
What is User Interface?

 the aggregate of means by which people—the

users—interact with the system
 provides means of input and output—the
system itself
Objectives in designing user
interface:
 Match the user interface to the task.

 Make the user interface efficient.

 Provide appropriate feedback to users.

 Generate usable queries.

 Improve productivity of knowledge workers.

Two main components:

 Presentation language
Computer to Human

 Action language
Human to Computer
Guidelines for Designing
User Interface
 Strive for consistency.
 Enable frequent users to use shortcuts.
 Offer informative feedback.
 Design dialogs to yield closure.
 Offer simple error handling.
 Permit easy reversal of actions.
 Support internal locus of control.
 Reduce short-term memory load.
Types of User Interface
Question-and-Answer Interface
 the computer displays a question to the
user on the display
 the user enters an answer (via keyboard
stroke or mouse click), and the
computer acts on that input information
 dialog box is a type of this interface
 examples include use of wizard and
Office Assistant in MS applications
Types of User Interface
Natural-Language Interface
 permitsusers to interact with the
computer in their everyday or natural
language
 no special skills required of the user who
interacts with the computer
 used by some Web sites
Types of User Interface
Menu Interface
 provides the user with an onscreen list
of available selections
 users are limited to the options
displayed
 usersneed to know what task should be
accomplished
 users should know which task they desire
to perform when utilized
 can be set up to use keyboard entry,
lightpen, or mouse
 consistency in design
Types of User Interface
Menu Interface
Types of User Interface
Menu Interface
 GUI menus are used to control PC software and
have the following guidelines:
1. The main menu bar is always
displayed.
2. The main menu uses single words for
menu items. Main menu options
always display secondary pull-down
menus.
3. The main menu should have secondary
options grouped into similar sets of
features.
Types of User Interface
4. The drop-down menus that display
when a main menu item is clicked
often composed of more than one
word.
5. These secondary options carry out
actions or display additional menu
items.
6. Menu items in grey (disabled) are
unavailable for the current activity.

 Clicking on a GUI object with the right mouse

button, an object menu (or pop-up menu) is
displayed.
Types of User Interface
Form-Fill Interface
 input/output forms
 consistsof onscreen forms or Web-based
forms displaying fields containing data
items or parameters that need to be
communicated to users
Types of User Interface
Effectively designed form contains the
following:
a self explanatory title and field headings
 has fields organized into logical groupings
with distinctive boundaries
 provides default values when practical
 displays data in appropriate field lengths
 minimizes the need to scroll windows
 input forms for display can be simplified
when supplied with default values for fields
and allow users modify default information
Types of User Interface

Form-fill interface from the Google

Advanced Search Engine
Types of User Interface

 its benefit is that the printed version of the

filled-in form provides excellent documentation

 the main drawback is that experienced users

may become impatient and may want more
efficient ways to enter data
Types of User Interface
Command-Language Interface
 allows the user to enter explicit
statements to invoke operations within a
system
 requiresusers to remember command
syntax and semantics
 can be a burden to users since they need
to memorize names, syntax, and
operations
 experienced users prefer this type
because of the faster completion time it
allows
Types of User Interface
Graphical User Interface (GUI)
 allows users to directly manipulate the graphical
representation on the screen via keyboard input,
joystick, or mouse
 presents graphical icons, visual indicators, or
special graphical elements called “widgets”
 continuous feedback on task accomplishment
 sets a challenge because an appropriate model
of reality or a satisfactory conceptual model of
the representation should be invented
 when used in on intranets, extranets, or Web, it
requires careful planning
Stylus
 pointed stick that looks like a pen
 becoming popular because of new handwriting
recognition software and PDAs
 examples include Palm and Pocket/PC devices
and tablet PC
Touch-sensitive screens

 allow users to use finger in activating the display

 can be useful in public information displays

 can be used also in explaining dioramas in

museums and in locating camping facilities in
parks

 need no special expertise from users, and the

screen is self-contained
Voice recognition and synthesis
 allows the users speak to the computer while the
system is able to recognize the individual’s vocal
signals, convert them, and store the input
 its benefit is that it can speed data entry, and
free the user’s hands for other tasks
 speech input can be added to PC with the use of
equipment and software that allows a PC user to
speak commands
 increased accuracy and greater speed
Two main developments:
 continuous speech systems that allow for the
input of regular text in word processors, and
 speaker independence so that any number of
people can enter commands or words at a given
workstation
Standards to consider in assessing the
interfaces chosen
1. The training period necessary for users should be
acceptably short.
2. Users who are early in their training should be
able to enter commands without thinking about
them or without referring to a help menu or
manual. Keeping the interfaces consistent
throughout the application can be helpful in this
regard.
3. The interface should be faultless so that errors are
few and those that do occur are not occurring
because of poor design.
4. The time that users and the system need to
recover from errors should be short.
5. Occasional users should be able to study again the
Guidelines for Designing Dialog
 Meaningful communication so that the
computer understands what people are
entering and people understand what
the computer is presenting or
requesting.
 Minimal user action.
 Standard operation and consistency.
Guidelines for Designing Dialog
Minimal User Action
1. Entering codes rather than whole words on
entry screens. Codes are also entered when
using a command-language interface.
2. Only entering data that are not already
stored on files.
3. Supplying the editing characters (e.g.,
slashes as date field separators).
4. Using default values for fields on entry
screens.
5. Designing an inquiry (or change or delete)
program so that the user needs to input only
the first few characters of a name or item
description.
6. Providing keystrokes for selecting pull-down
menu options.
Guidelines for Designing Dialog
Standard Operation and Consistency
1. Locating titles, date, time, and operator and
feedback messages in the same places on all displays.
2. Exiting each program by the same key or menu
option.
3. Canceling a transaction in a consistent manner,
usually with the use of a function key (F12) on a
mainframe and the ESC key on a PC.
4. Getting help in a standardized manner.
5. Standardizing the colors used for all displays.
6. Standardizing the use of icons for similar operations
when using a GUI.
7. Using consistent terminology in a display screen or
Web site.
8. Providing a consistent way to navigate through the
dialog.
9. Using consistent font alignment, size, and color on a
Web page.
Providing Feedback for Users
Status Information
 keeps users informed of what is going on
within the system
 important during processing operations
 inform the user that besides working, the
system has accepted the user’s input and that
the input was in the correct form
 assures users that nothing is wrong with the
system and it would make them feel in
command of the system
 User interface (UI) feedback refers to how
your product UI is designed to respond, and
the type of output it generates based on how
users interact with it.
Providing Feedback for Users
Prompting Cues
 be specific with request when prompting the user for
information or action
 example:
READY FOR INPUT: _____

Enter account number (123-456-7): ___-___-__

Providing Feedback for Users
Error or Warning Messages
 messages should be specific and free of error
codes and jargon
 messages should never scold the user and should
guide them toward a resolution
 messages should be in user terms and not in
computer terms
 use multiple messages so users can get more
detailed explanations when needed or wanted
Providing Feedback for Users
Error messages should appear in the same format
and placement each time
Providing Help
Guidelines for designing usable help:
 Simplicity

 Organize

 Show

Types of help:
 F1 or pull-down help menu
 Context-sensitive help
 Pop-up balloon help
 Help wizard
Guidelines for Designing
Web Sites

1. Place the organization’s name and logo on

every page and make the logo a link to the
home page.
2. Include a search function if the site has
more than 100 pages.
3. Write straightforward and simple
headlines and page titles that clearly
explain what the page is about and that
will make sense when read out of context
in a search engine listing.
4. Structure the page to facilitate reader
scanning and help users ignore large
chunks of the page in a single glance.
Guidelines for Designing
Web Sites

5. Do not place everything about a

product or topic into a single, huge
page.
6. Use product photos, however, avoid
cluttered and bloated product family
pages with lots of photos.
7. Use relevance-enhanced image
reduction when preparing small photos
and images.
8. Use link titles to give users a preview
of where each link will take them,
before they have clicked on it.
Guidelines for Designing
Web Sites

9. Make sure that all necessary pages are

accessible for users with disabilities,
especially visually impaired users.
10. Do the same as everybody else, because if
most big Web sites do something in a
certain way, users will expect other
sites to work similarly.
Web Site Design Principles
Designing for the Computer Medium
1. Craft the look and feel of the pages to take
advantage of the medium.
2. Make the design portable since it will be
accessed with a wide range of technology.
3. Design for low bandwidth since users will not
want to wait for a page to load.
4. Plan for clear presentation and easy
access to information to aid the user in
navigating through the site.
5. Reformat information for online
presentation when it comes from other
sources.
Web Site Design Principles
Designing the Whole Site
1. Craft the look and feel of the pages to match
the idea preferred by the organization.
2. Create smooth transitions between Web pages
so that users are clear about where they have
been and where they are going.
3. Design each page using a grid pattern to
provide visual structure for related groups of
information.
4. Place a reasonable amount of white space on
each page between groups of information.
Web Site Design Principles
Designing for the User
1. Design for interaction since Web users expect
sites to be interactive and dynamic.
2. Guide the user’s eye to information on the
page that is the most important.
3. Keep a flat hierarchy so that the user does not
have to drill down too deeply to find detailed
information.
4. Use the power of hypertext linking to help
users navigate through the site.
5. Decide how much content per page is enough
based on the characteristics of the typical
user; do not clutter the page.
6. Design for accessibility for a diverse group of
users; including those with disabilities.