8/12/2019 Designing the User Interface (New) (1)
1/62
8/12/2019 Designing the User Interface (New) (1)
2/62
Designing the User Interface
8/12/2019 Designing the User Interface (New) (1)
3/62
Designing the User Interface
What is User Interface?Guidelines for Designing User InterfaceTypes of User InterfaceGuidelines for Designing Dialog
Providing Feedback for UsersProviding HelpGuidelines for Designing Web SitesWeb Site Design Principles
8/12/2019 Designing the User Interface (New) (1)
4/62
What is User Interface? the aggregate of means by which
peoplethe usersinteract with thesystem -----a particular machine,device, or computer program.
provides means of input and output
everything the user comes intocontact with while using the system
8/12/2019 Designing the User Interface (New) (1)
5/62
What is User Interface?
aspects:
Physically
PerceptuallyConceptually
8/12/2019 Designing the User Interface (New) (1)
6/62
What is User Interface?
Aspects:
Physicalaspects comprise of the devices the user
really touches
consists of reference manuals,printed documents, data-entryforms
8/12/2019 Designing the User Interface (New) (1)
7/62
What is User Interface?
Aspects:
Perceptual aspects
Consist of everything the enduser sees, hears, or touches
8/12/2019 Designing the User Interface (New) (1)
8/62
What is User Interface?
Aspects:
Conceptual aspects
Everything the user knows aboutusing the system
includes all the problem domain
things in the system the usermanipulates, the operations thatcan be performed, and theprocedures followed to carry
out the operations.
8/12/2019 Designing the User Interface (New) (1)
9/62
What is User Interface?
Objectives in designing a betteruser interface: Match the user interface to the
task. Make the user interface efficient.
Provide appropriate feedback to
users. Generate usable queries.
Improve productivity ofknowledge workers.
8/12/2019 Designing the User Interface (New) (1)
10/62
What is User Interface?
Two main components:
Presentation language
Action language
8/12/2019 Designing the User Interface (New) (1)
11/62
Guidelines for DesigningUser Interface
1. Strive for consistency.
2. Enable frequent users to useshortcuts.
3. Offer informative feedback.4. Design dialogs to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.7. Support internal locus of control.
8. Reduce short-term memory load.
8/12/2019 Designing the User Interface (New) (1)
12/62
Guidelines for DesigningUser Interface
1. Strive for consistency.The following should be consistentthroughout the system:
The way information Is arranged on forms
The names and arrangement of menu items
The size and shape of icons
The sequence followed to carry out tasks
8/12/2019 Designing the User Interface (New) (1)
13/62
Guidelines for DesigningUser Interface
2. Enable frequent users to useshortcuts. Shortcut keys lessen the number of
interactions for a given task
8/12/2019 Designing the User Interface (New) (1)
14/62
Guidelines for DesigningUser Interface
3. Offer informative feedback.
Each action taken by the user result to
some type of feedback from thecomputer so that the users wouldknow the action was recognized
8/12/2019 Designing the User Interface (New) (1)
15/62
Guidelines for DesigningUser Interface
4. Design dialogs to yield closure.
Every dialog should be organized in aclear sequence with a beginning,
middle, and end.
8/12/2019 Designing the User Interface (New) (1)
16/62
Guidelines for DesigningUser Interface
5. Offer simple error handling.
Limit available options and allow the
user to select from valid options at anypoint in the dialog
Error message should be displayedstating specifically what is wrong and
with an explanation on how to correctit
Error messages should not bejudgmental
8/12/2019 Designing the User Interface (New) (1)
17/62
Guidelines for DesigningUser Interface
6. Permit easy reversal of actions.
USERS SHOULD FEEL THAT THEY CAN
EXPLORE OPTIONS AND TAKE ACTIONS THATCAN BE CANCELLED OR REVERSED WITHOUT
ANY DIFFICULTY
8/12/2019 Designing the User Interface (New) (1)
18/62
Guidelines for DesigningUser Interface
7. Support internal locus of control.
EXPERIENCED USERS NEED TO FEEL THAT
THEY ARE IN-CHARGE OF THE SYSTEM ANDTHAT THE SYSTEM RESPONDS TO THEIRCOMMANDS
USERS SHOULD NOT BE FORCED ON DOING
ANYTHING OR MADE TO FEEL AS IF THESYSTEM IS CONTROLLING THEM
8/12/2019 Designing the User Interface (New) (1)
19/62
Guidelines for DesigningUser Interface
8. Reduce short-term memory load.
SYSTEM DESIGNERS SHOULD NOT ASSUME
THAT USERS WILL REMEMBER ANYTHINGFROM FORM TO FORM, OR DIALOG BOX TODIALOG BOX, DURING AN INTERACTION WITHTHE SYSTEM
8/12/2019 Designing the User Interface (New) (1)
20/62
Types of User Interface
Natural-Language Interface
permits users to interact with
the computer in their everydayor natural language
no special skills required of theuser who interacts with thecomputer
used by some Web sites
8/12/2019 Designing the User Interface (New) (1)
21/62
Types of User Interface
Question-and-Answer Interface the computer displays a question to
the user on the display
the user enters an answer (viakeyboard stroke or mouse click), andthe computer acts on that inputinformation
dialog box is a type of this interface
examples include use of wizard andOffice Assistant in MS applications
8/12/2019 Designing the User Interface (New) (1)
22/62
Types of User Interface
Menu Interface provides the user with an onscreen
list of available selections
users are limited to the optionsdisplayed
users need to know what task should
be accomplished
8/12/2019 Designing the User Interface (New) (1)
23/62
Types of User Interface
users should know which task theydesire to perform when utilized
can be set up to use keyboard entry,light pen, or mouse
consistency in design
8/12/2019 Designing the User Interface (New) (1)
24/62
Types of User Interface
8/12/2019 Designing the User Interface (New) (1)
25/62
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 formenu items. Main menu options always
display secondary pull-down menus.3. The main menu should have secondary
options grouped into similar sets offeatures.
8/12/2019 Designing the User Interface (New) (1)
26/62
Types of User Interface
4. The drop-down menus that displaywhen a main menu item is clicked oftencomposed of more than one word.
5. These secondary options carry out
actions or display additional menuitems.
6. Menu items in grey (disabled) areunavailable for the current activity.
Clicking on a GUI object with theright mouse button, an object menu(or pop-up menu) is displayed.
8/12/2019 Designing the User Interface (New) (1)
27/62
Types of User Interface
Form-Fill Interface
input/output forms
consists of onscreen forms or Web-based forms displaying fieldscontaining data items or parametersthat need to be communicated to the
user
8/12/2019 Designing the User Interface (New) (1)
28/62
Types of User Interface
effectively designed form contains thefollowing:
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 fieldlengths
minimizes the need to scroll windows
8/12/2019 Designing the User Interface (New) (1)
29/62
8/12/2019 Designing the User Interface (New) (1)
30/62
8/12/2019 Designing the User Interface (New) (1)
31/62
Types of User Interface
Benefit:
the printed version of the filled-inform provides excellent
documentationDrawback:
experienced users may become
impatient and may want moreefficient ways to enter data
8/12/2019 Designing the User Interface (New) (1)
32/62
Types of User Interface
Command-Language Interface allows the user to enter explicit
statements to invoke operations within
a system requires users to remember command
syntax and semantics
can be a burden to users since they need
to memorize names, syntax, andoperations
experienced users prefer this typebecause of the faster completion time it
allows
8/12/2019 Designing the User Interface (New) (1)
33/62
8/12/2019 Designing the User Interface (New) (1)
34/62
Types of User Interface
continuous feedback on taskaccomplishment these provide
sets a challenge because an
appropriate model of reality or asatisfactory conceptual model ofthe representation should beinvented
when used in on intranets, extranets,or Web, it requires careful planning
8/12/2019 Designing the User Interface (New) (1)
35/62
Types of User Interface
Stylus pointed stick that looks like a pen
becoming popular because of new
handwriting recognition softwareand PDAs
examples include Palm and Pocket/PC
devices and tablet PC
8/12/2019 Designing the User Interface (New) (1)
36/62
Types of User Interface
Touch-sensitive screensallow users to use finger in
activating the display
can be useful in public informationdisplays
can be used also in explaining
dioramas in museums and in locatingcamping facilities in parks
need no special expertise from users,and the screen is self-contained
8/12/2019 Designing the User Interface (New) (1)
37/62
Types of User Interface
Voice recognition and synthesis
allows the users speak to thecomputer while the system is able torecognize the individuals vocalsignals, convert them, and store theinput
its benefit is that it can speed dataentry, and free the users hands forother tasks
8/12/2019 Designing the User Interface (New) (1)
38/62
Types of User Interface
speech input can be added to PC with theuse of equipment and software that allowsa PC user to speak commands
increased accuracy and greater speed two main developments:
continuous speech systems that allowfor the input of regular text in word
processors, and
speaker independence so that any numberof people can enter commands or wordsat a given workstation
8/12/2019 Designing the User Interface (New) (1)
39/62
Types of User Interface
Standards to consider in assessing theinterfaces chosen
1. The training period necessary for
users should be acceptably short.2. Users who are early in their trainingshould be able to enter commandswithout thinking about them or
without referring to a help menu ormanual. Keeping the interfacesconsistent throughout the
application can be helpful in this
regard.
8/12/2019 Designing the User Interface (New) (1)
40/62
Types of User Interface
3. The interface should be faultless sothat errors are few and those thatdo occur are not occurring because
of poor design.4. The time that users and the system
need to recover from errors shouldbe short.
5. Occasional users should be able tostudy again the system quickly.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
41/62
Guidelines for DesigningDialog
Meaningful communication so thatthe computer understands whatpeople are entering and people
understand what the computer ispresenting or requesting.
Minimal user action.
Standard operation andconsistency.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
42/62
Guidelines for DesigningDialog
Minimal User Action1. 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 notalready stored on files.
3. Supplying the editing characters(e.g., slashes as date fieldseparators).
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
43/62
Guidelines for DesigningDialog
4. Using default values for fields onentry screens.
5. Designing an inquiry (or change or
delete) program so that the userneeds to input only the first fewcharacters of a name or itemdescription.
6. Providing keystrokes for selectingpull-down menu options.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
44/62
Guidelines for DesigningDialog
Standard Operation andConsistency1. Locating titles, date, time, and
operator and feedback messages inthe same places on all displays.
2. Exiting each program by the same
key or menu option.3. Canceling a transaction in aconsistent manner, usually with theuse of a function key (F12) on a
mainframe and the ESC key on a PC.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
45/62
Guidelines for DesigningDialog
4. Getting help in a standardized manner.
5. Standardizing the colors used for alldisplays.
6. Standardizing the use of icons forsimilar operations when using a GUI.
7. Using consistent terminology in adisplay screen or Web site.
8. Providing a consistent way to navigatethrough the dialog.
9. Using consistent font alignment, size,and color on a Web page.
Providing Feedback for
8/12/2019 Designing the User Interface (New) (1)
46/62
Providing Feedback forUsers
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 users inputand that the input was in the correct
form assures users that nothing is wrong
with the system and it would make themfeel in command of the system
Providing Feedback for
8/12/2019 Designing the User Interface (New) (1)
47/62
Providing Feedback forUsers
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
8/12/2019 Designing the User Interface (New) (1)
48/62
Providing Feedback forUsers
Error or Warning Messages messages should be specific and free
of error codes and jargon
messages should never scold the userand should guide them toward aresolution
messages should be in user terms andnot in computer terms
use multiple messages so users can getmore detailed explanations when
needed or wanted
Providing Feedback for
8/12/2019 Designing the User Interface (New) (1)
49/62
Providing Feedback forUsers
error messages should appear in thesame format and placement each time
Poor Error Messages Improved Error Messages
ERROR 30 OPENING FILE The file name you typed was not found. PressF2 to list valid file names.
WRONG CHOICE Please enter an option from the menu.DATA ENTRY ERROR The prior entry contains a value outside the
range of acceptable values. Press F9 for list of
acceptable values.FILE CREATION ERROR The file name you entered already exists. Press
F10 if you want to overwrite it. Press F2 if you
want to save it to a new name.
8/12/2019 Designing the User Interface (New) (1)
50/62
Providing Help
Guidelines for designing usablehelp: Simplicity
Organize
Show
Types of help: F1 or pull-down help menu
Context-sensitive help
Pop-up balloon help
Help wizard
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
51/62
Guidelines for DesigningWeb Sites
1. Place the organizations name andlogo on every page and make the
logo a link to the home page.
2. Include a search function if thesite has more than 100 pages.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
52/62
Guidelines for DesigningWeb Sites
3. Write straightforward andsimple headlines and page titlesthat clearly explain what the
page is about and that will makesense when read out of context ina search engine listing.
4. Structure the page to facilitatereader scanning and help usersignore large chunks of the page
in a single glance.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
53/62
Guidelines for DesigningWeb Sites
5. Do not place everything about aproduct or topic into a single,huge page.
6. Use product photos, however,avoid cluttered and bloatedproduct family pages with lots
of photos.7. Use relevance-enhanced image
reduction when preparing small
photos and images.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
54/62
Guidelines for DesigningWeb Sites
8. Use link titles to give users apreview of where each link willtake them, before they have
clicked on it.9. Make sure that all necessary
pages are accessible for users
with disabilities, especiallyvisually impaired users.
Guidelines for Designing
8/12/2019 Designing the User Interface (New) (1)
55/62
Guidelines for DesigningWeb Sites
10.Do the same as everybody else,because if most big Web sites dosomething in a certain way, users
will expect other sites to worksimilarly.
8/12/2019 Designing the User Interface (New) (1)
56/62
Web Site Design Principles
Designing for the ComputerMedium1. 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 rangeof technology.
3. Design for low bandwidth sinceusers will not want to wait for apage to load.
8/12/2019 Designing the User Interface (New) (1)
57/62
Web Site Design Principles
4. Plan for clear presentation and easyaccess to information to aid theuser in navigating through the site.
5. Reformat information for onlinepresentation when it comes fromother sources.
8/12/2019 Designing the User Interface (New) (1)
58/62
Web Site Design Principles
Designing the Whole Site1. Craft the look and feel of the pages
to match the idea preferred by theorganization.
2. Create smooth transitions between
Web pages so that users are clearabout where they have been andwhere they are going.
8/12/2019 Designing the User Interface (New) (1)
59/62
8/12/2019 Designing the User Interface (New) (1)
60/62
Web Site Design Principles
Designing for the User1. Design for interaction since Web
users expect sites to be interactive
and dynamic.2. Guide the users eye to information
on the page that is the mostimportant.
3. Keep a flat hierarchy so that theuser does not have to drill downtoo deeply to find detailed
information.
8/12/2019 Designing the User Interface (New) (1)
61/62
Web Site Design Principles
4. Use the power of hypertext linkingto help users navigate through thesite.
5. Decide how much content per page isenough based on thecharacteristics of the typical user;
do not clutter the page.6. Design for accessibility for a
diverse group of users; includingthose with disabilities.
8/12/2019 Designing the User Interface (New) (1)
62/62
Thank you!
Top Related