Designing the User Interface

Designing the User Interface

What is User Interface? Guidelines for Designing User Interface Types of User Interface Guidelines for Designing Dialog Providing Feedback for Users Providing Help Guidelines for Designing Web Sites Web Site Design Principles

What is User Interface?

the aggregate of means by which peoplethe usersinteract with the system -----a particular machine, device, or computer program. provides means of input and output everything the user comes into contact with while using the system

What is User Interface?

aspects:
Physically Perceptually Conceptually

What is User Interface?

Aspects:
Physical aspects
comprise of the devices the user really touches
consists of reference manuals, printed documents, data-entry forms

What is User Interface?

Aspects:
Perceptual aspects
Consist of everything the end user sees, hears, or touches

What is User Interface?

Aspects:
Conceptual aspects
Everything the user knows about using the system includes all the problem domain things in the system the user manipulates, the operations that can be performed, and the procedures followed to carry out the operations.

What is User Interface?

Objectives in designing a better 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.

What is User Interface?

Two main components:
Presentation language Action language

Guidelines for Designing User Interface

1. Strive for consistency. 2. Enable frequent users to use shortcuts. 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.

Guidelines for Designing User Interface

1. Strive for consistency.
The following should be consistent throughout 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

Guidelines for Designing User Interface

2. Enable frequent users to use shortcuts.
Shortcut keys lessen the number of interactions for a given task

Guidelines for Designing User Interface

3. Offer informative feedback.
Each action taken by the user result to some type of feedback from the computer so that the users would know the action was recognized

Guidelines for Designing User Interface

4. Design dialogs to yield closure.
Every dialog should be organized in a clear sequence with a beginning, middle, and end.

Guidelines for Designing User Interface

5. Offer simple error handling.
Limit available options and allow the user to select from valid options at any point in the dialog Error message should be displayed stating specifically what is wrong and with an explanation on how to correct it Error messages should not be judgmental

Guidelines for Designing User Interface

6. Permit easy reversal of actions.
USERS SHOULD FEEL THAT THEY CAN EXPLORE OPTIONS AND TAKE ACTIONS THAT CAN BE CANCELLED OR REVERSED WITHOUT ANY DIFFICULTY

Guidelines for Designing User Interface

7. Support internal locus of control.
EXPERIENCED USERS NEED TO FEEL THAT THEY ARE IN-CHARGE OF THE SYSTEM AND THAT THE SYSTEM RESPONDS TO THEIR COMMANDS USERS SHOULD NOT BE FORCED ON DOING ANYTHING OR MADE TO FEEL AS IF THE SYSTEM IS CONTROLLING THEM

Guidelines for Designing User Interface

8. Reduce short-term memory load.
SYSTEM DESIGNERS SHOULD NOT ASSUME THAT USERS WILL REMEMBER ANYTHING FROM FORM TO FORM, OR DIALOG BOX TO DIALOG BOX, DURING AN INTERACTION WITH THE SYSTEM

Types of User Interface

Natural-Language Interface
permits users 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

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

Menu Interface
provides the user with an onscreen list of available selections users are limited to the options displayed users need to know what task should be accomplished

Types of User Interface

users should know which task they desire to perform when utilized can be set up to use keyboard entry, light pen, or mouse consistency in design

Types of User 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
consists of onscreen forms or Webbased forms displaying fields containing data items or parameters that need to be communicated to the user

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

Types of User Interface

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

Benefit: the printed version of the filled-in form provides excellent documentation Drawback: 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 requires users 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

Types of User Interface

continuous feedback on task accomplishment these provide 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

Types of User Interface

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

Types of User Interface

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

Types of User Interface

Voice recognition and synthesis
allows the users speak to the computer while the system is able to recognize the individuals vocal signals, convert them, and store the input
its benefit is that it can speed data entry, and free the users hands for other tasks

Types of User Interface

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

Types of User Interface

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.

Types of User Interface

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 system quickly.

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 commandlanguage interface. 2. Only entering data that are not already stored on files. 3. Supplying the editing characters (e.g., slashes as date field separators).

Guidelines for Designing Dialog

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.

Guidelines for Designing Dialog

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 users 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

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
Poor Error Messages
ERROR 30 OPENING FILE WRONG CHOICE DATA ENTRY ERROR

Improved Error Messages

The file name you typed was not found. Press F2 to list valid file names. Please enter an option from the menu. 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.

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

Guidelines for Designing Web Sites

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.

Guidelines for Designing Web Sites

8. Use link titles to give users a preview of where each link will take them, before they have clicked on it. 9. Make sure that all necessary pages are accessible for users with disabilities, especially visually impaired users.

Guidelines for Designing Web Sites

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.

Web Site Design Principles

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.

Web Site Design Principles

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

Web Site Design Principles

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.

Thank you!