designing the user interface (new) (1)

8/12/2019 Designing the User Interface (New) (1)

1/62


2/62

Designing the User Interface


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


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


5/62

What is User Interface?

aspects:

Physically

PerceptuallyConceptually


6/62


Aspects:

Physicalaspects comprise of the devices the user

really touches

consists of reference manuals,printed documents, data-entryforms


7/62


Aspects:

Perceptual aspects

Consist of everything the enduser sees, hears, or touches


8/62


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.


9/62


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.


10/62


Two main components:

Presentation language

Action language


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.


12/62


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


13/62


2. Enable frequent users to useshortcuts. Shortcut keys lessen the number of

interactions for a given task


14/62


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


15/62


4. Design dialogs to yield closure.

Every dialog should be organized in aclear sequence with a beginning,

middle, and end.


16/62


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


17/62


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


18/62


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


19/62


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


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


21/62


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


22/62


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


23/62


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


24/62



25/62


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.


26/62


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.


27/62


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


28/62


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


29/62


30/62


31/62


Benefit:

the printed version of the filled-inform provides excellent

documentationDrawback:

experienced users may become

impatient and may want moreefficient ways to enter data


32/62


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


33/62


34/62


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


35/62


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


36/62


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


37/62


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


38/62


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


39/62


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.


40/62


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


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.



42/62


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).



43/62


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.



44/62


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.



45/62


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


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



47/62


Prompting Cues be specific with request when

prompting the user for information

or action example:

READY FOR INPUT: _____

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



48/62


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



49/62


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.


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



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.



52/62


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.



53/62


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.



54/62


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.



55/62


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.


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.


57/62


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.


58/62


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.


59/62


60/62


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.


61/62


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.


62/62

Thank you!

designing the user interface (new) (1)

Documents