CHAPTER 11 DESIGNING THE USER INTERFACE LAYER

2Object-Oriented Analysis and Design with the Unified Process

CHAPTER 11DESIGNING THE USER INTERFACE LAYER

Objectives Understand the difference between User Interfaces and System Interfaces Explain why the User Interface is the System to the Users Discuss the importance of the three principles of User-centered design Describe the historical development of the field of Human-Computer

Interaction (HCI) Describe the three metaphors of Human-Computer Interaction (HCI) Discuss how Visibility and Affordance affect usability Apply the eight golden rules of Dialog Design when designing the User

Interface Avoid common mistakes in Web design Define the overall System structure as a Menu hierarchy


USER INTERFACE DESIGN Information Systems capture Inputs and produces Outputs,

and Inputs and Outputs occur where there are ‘Interfaces” between the System and its environments.

User Interfaces handle Inputs and Outputs that involve a System User directly

System Interfaces handle Inputs and Outputs that require minimal human intervention.

In most System Development Projects, Analyst separate design of System Interfaces from the design of User Interfaces because the two types require different expertise and technology.

Developer must consider the interaction between the User and the Computer for every Use Case with an input or Output, and define the Interface to process the input or Output.

The Interaction is much like a dialog between the User and the Computer, Thus the User-Interface Design is often referred to as “Dialog Design”.


USER INTERFACE User Interface is everything the End-user comes into contact

with while using the System ; Physically, Perceptually, and Conceptually.

To the End-User of a System the User Interface is the System itself. Thus, Consideration of User Interface Design should come very early in the development process

The term “Human-Computer Interaction” (HCI) is generally used to refer to the study of end-Users and their Interaction with Computers.


USER INTERFACEPHYSICAL ASPECTS OF USER INTERFACE

Physical Aspect of User interface include the devices the User actually touches, including the keyboard, mouse, touch screen, or keypad etc.

Also the desk space, the documents , the available light, and the Computer terminal hardware all make up the Physical Interface for the end User

PERCEPTUAL ASPECTS OF USER INTERFACE

Perceptual aspect includes everything the End-User sees, hears, or touches (beyond the Physical devices). Such as All data and instructions displayed on the screen, including shapes, lines, numbers and words. Sounds made by the system, beeps or clicks as well as computer generated speech . Objects that the User touches such as Menus, Dialog boxes, and buttons,

documents, drawings or records of transactions with a mouse when completing tasks on the screens


USER INTERFACECONCEPTUAL ASPECTS OF USER INTERFACE Includes everything User knows about using the System such

as Problem Domain Things (Classes) in the System, The Operations that can be performed and the Procedures followed to carry out the operations.

The knowledge about using the System is referred to as “User’s Model” of the System. Much of the User’s Model is based on the Requirements Model of the system.

The User’s Knowledge becomes the determinant of what the System is, and if the User’s knowledge of the System is part of the Interface, then the User Interface must be much more than a component added near the end of the Project.


Aspects of the User Interface


User-Centered Design Many researches focus their attention on creating Analysis and

Design Techniques that place the User Interface at the centre of the Development process because they recognize the importance of the User Interface to System Developers and the System Users.

TheseTechniques are often referred to as “User-Centered Design”

The User-Centered Design Techniques emphasize three important principles:- Focus early on the users and their work

Evaluate Designs to ensure Usability

Use iterative development


User-Centered DesignFOCUS EARLY ON THE USER AND THEIR WORK

The Object-oriented approach focuses early on the Users and their Work by identifying Actors, Use Cases and Scenarios followed by Users when using the System.

User-Centered design goes much further in attempting to understand the Users by exploring, What Users know, How Users learn, How they prefer to work, and what motivates the Users.

EVALUATE DESIGN TO ENSURE USABILITY

Usability refers to the degree to which a System is easy to “Learn” and easy to “Use”.

Ensuring Usability is not easy since there are many different Users, with differing preferences and skills to accommodate.

USE ITERATIVE DEVELOPMENT

Iterative development keeps the focus on the User by continually returning to the User Requirements during each iteration and by evaluating the System after each iteration.


HUMAN COMPUTER INTERACTION (HCI)

User Interface Design techniques and HCI as a field of study evolved from studies of Human Interaction with machines in general, referred to as “Human Factors Engineering”

The field of Human Factors Engineering was first associated with engineering. Gradually, specialists emerged who begun to draw on many disciplines to understand people and their behavior.

These disciplines include Cognitive Psychology, Social Psychology, Linguistics, Sociology, Anthropology, and others. Information Systems specialists with an interest in Human-Computer

Interaction, study Computers plus all of these disciplines.

The field of HCI has grown to support many academic journals, conferences, etc and many undergraduate and graduate degree programs are also available to train HCI specialist.


Fields Contributing to the Study of HCI


Metaphors for Human-Computer Interaction There are many ways to think about Human Computer Interaction, including “Metaphors” or “Analogies”.

There are three Metaphors for HCI

Direct Manipulation Metaphor (including Desktop Metaphor) Document Metaphor Dialog Metaphor

DIRECT MANIPULATION METHAPHOR

A Metaphor of HCI in which the User Interacts directly with objects on the Display Screen instead of typing commands.

Objects are made visible on the screen so the User can point at them and manipulate them with the mouse or arrow keys.

Direct manipulation coupled with O-O Programming eventually evolved into the Desktop Metaphor.


Metaphors for Human-Computer Interaction DESKTOP METAPHOR

A Direct Manipulation Metaphor approach in which the Display Screen includes an arrangement of objects commonly found on a Desk.

Common Desktop objects include Notepad, Calendar, Calculator, Telephone, Answering machine, Fax, CD Player Video monitor, Folders etc…

DOCUMENT METHAPOR

A Metaphor in which interaction with computer involves browsing and entering data on Electronic documents.

These Document that allow the Users to click on a link and jump to a different part of the document or to other documents are referred to as “Hypertext Documents”

Hypermedia extends the Hypertext Document concept to include multimedia content such as graphics, video ,and audio in a document all of which can be linked for navigation by a User.


Metaphors for Human-Computer Interaction

DIALOG METHAPOR

A Metaphor of HCI in which interacting with the computer is much like carrying on a conversation or Dialog.

The Dialog Metaphor is another way of thinking about Human Computer Interaction because the Computer and the User “Listens to” and “responds to” each others questions or comments.

Advances in Computer technology are making it possible for User to communicate in more natural ways (i.e. Voice Communication) , but the typical User Interface today still rely on the mouse and keyboards.

◘ One reason is the need for silence and also privacy in the office. Thus, it is not clear whether Voice commands will become common in computer applications.


Desktop Metaphor Based on Direct Manipulation Shown on Display Screen


Guidelines for Designing User Interfaces There are many Interface Design Guidelines ranging from

general Principle to Very specific Guidelines to guide System Developers.

Some organizations adopt these Interface Design Guidelines as Design Standards in order to help them ensure that all User Interfaces function well and that all Systems developed by the Organization have a similar “Look and Feel”.

The two Key Principles to ensure good interaction between User and the System are:

◘ Visibility

◘ Affordance


Guidelines for Designing User Interfaces

VISIBILITY

Visibility is one of the Key Principle of HCI stating that all Controls should be visible and provide feedback to indicate the Control is responding to the User’s action.

e.g . A Button that can be clicked by a User is visible, and when it is clicked, it changes to look as though it has been pressed, to indicate it is responding.

Some buttons make a clicking sound to provide feed back.

AFFORDANCE

Affordance is another key Principle of HCI stating that the appearance of any Control should suggest its functionality- that is , the purpose for which the Control is used.

e.g. A button affords clicking, a Scroll Bar affords scrolling and an Item in a List affords selecting.


Guidelines for Designing User Interfaces

If User Interface Designers make sure that all Controls are Visible and that heir Appearance suggests what they do, the Interface will be usable.

Most Users are familiar with Window Interfaces and the common Windows Controls.

System Designers should be careful to apply Visibility and Affordance Principles when designing Web Pages.

Many new types of Controls are now possible at Web sites, but these Controls are not always Visible and their effects are not always obvious as they are in a “Standard Windows Interface”.

◘ e.g. Sometimes you click an image and a new pages opens in the Browser. Other times you click an image and nothing happens.


The Eight Golden Rules for Designing Interactive User Interfaces

1. Strive for Consistency2. Enable Frequent Users to Use Shortcuts3. Offer Informative Feedback4. Design Dialogs to Yield Closure5. Offer Simple Error Handling6. Permit Easy Reversal of Actions7. Support Internal Locus of Control8. Reduce Short-Term Memory Load

• Although these Rules are General Guidelines rather than Specific Rules yet they are the key to Usability.

• With these rules in mind the Interface Designer can help ensure that User Interactions are efficient and effective.



1. Strive For Consistency

Designing a consistent looking Interface that functions consistently is one of the most important Design goal. The way that information is arranged on Forms, The Names and arrangements of Menu Items The Size and shape of Icons The Sequence followed to carry out tasks should be consistent throughout the System.

If a new application comes along that has different way of functioning, the Users will be unhappy and this will have a negative effect on their productivity.

However researches has shown that Inconsistent Interfaces sometimes are beneficial. If User is interacting with multiple Applications in separate Windows, a different visual appearances may help the User to differentiate them When the User is learning several Applications in one session some differences in the Interfaces may help the User remember which Application is which.



2. ENABLE FREQUENT USERS TO USE SHORTCUTS Users who work with one Application all day long are willing to invest tome to learn Shortcuts. Users rapidly lose patience with long Menu sequences and multiple Dialog boxes when they know exactly what they want to do. Therefore, Designers proved Shortcut Keys that reduce the number of interactions for a given task. Also Designers should consider providing “Macro Facilities” for user to create their own Shortcuts.

3. OFFER INFORMATIVE FEEDBACK Every Function User takes should result in some type of feedback from the Computer so that the User knows the action has been recognized. Even Keyboard clicks can help the User. Thus Clicking a button should visually change and perhaps make a sound. Feedback of information is also important .Feedback can sometimes provided to help the User in other ways



4. DESIGN DIALOG TO YIELD CLOSURE

Each Dialog with the System should be organized with a clear sequence. i.e. A Beginning, Middle, and End.

The User’s tasks on the Computer should also follow the same way.

The User can get lost if it is not clear when a task starts and ends. Additionally, the User often focuses intently on a task. So when it is confirmed that the task is complete, the User can clear his/her mind and get ready to focus on the next task.

If the System Requirements are defined initially as Events to which the System responds, each Event leads to processing of one specific, well defined Use Case. Event Decomposition sets the stage for Dialogs with Closer.



5. OFFER SIMPLE ERROR HANDLING

User errors are costly in terms of time and money to correct them . So the Designer must prevent the User from making errors whenever possible

A chief way prevent errors is to limit available options and allow the User to choose only from a valid options at any point in the dialog. - Nevertheless, if an error occur the System should have mechanism for handling it such as “Validation Techniques”.

When the System finds an error, the error message should state specifically what is wrong and explain how to correct it.

- Error Messages should not be judgmental ! - The System should also make it easy to correct the error.

- To make error correction easy the System should be redisplayed with all fields still filled in, and the cursor should be placed at the field with invalid data, ready for User to edit the field.



6. PERMIT EASY REHARSAL OF ACTION Users need to feel that they can explore options within the System and take actions that can be cancelled or reversed without difficulties.

- This is one way that Users learn about the System (by experimenting!) as well canceling the action when they realize that they make a mistake. Designers should be sure to include:-

- “CANCEL” Buttons on all Dialog Boxes and and allow User to go back one step at a time. - Confirmation Message when “DELETE” button is used .

7. SUPPORT INTERNAL LOCUS OF CONTROL

Experienced Users want to feel that they are in charge of the System and that the System responds to their commands. Users should not be forced to do anything or made to feel as if the System is controlling them. System should make the User feel that s/he is deciding what to do. Designers can provide much of this comfort and control through the wording or prompts and messages.



8. REDUCE SHORT-TERM MEMORY LOAD

People have many limitations, and short-term memory is one of the biggest. People can remember only about seven chunks of information at a time.

The Interface Designer should not place too much of a burden on the User’s memory by assuming that the User will remember anything from a form to another form or dialog box to dialog box during the interaction with the System.

For example: If the User has to stop and ask “Now what was the file name, What was the Customer number etc… is an indication of placing

too much of a burden on the User’s memory.


DOCUMENTING DIALOG DESIGN

Many Techniques are available to help the Designer to document Dialog Design

Techniques for the Dialog Designs:- Storyboarding, Prototypes UML Diagrams can be used Written descriptions following flow of events



The Dialogs that must be designed are based on Use Case Inputs and Outputs requiring User Interaction.

Generally each Use Case with an:- Input obtained interactively from a User requires a

Dialog Design Output produced at the request of a User requires a Dialog

Design These techniques are also used to define a Menu Hierarchy

that allows the User to navigate to each Dialog. - The available Menus reflect the overall System Structure

from the User point of view. - Each Menu contains a hierarch of options and often

arranged by Sub-systems or by action on objects.


A Use Case Diagram of the Customer Support System (by Subsystem)



USE CASE, SUB SYSTEMS AND MENU HIERARCHY

The available Menus reflect the overall System Structure from the User point of view.

Each Menu contains a hierarch of options and often arranged by Sub-systems or by action on objects. Each Sub System might be represented as a Menu with each Menu

option representing a Use Case.

Menus might also be arranged according to objects (Customer, Orders, Inventory etc) with each Menu option representing an operation on an object.

Menus should also include portions that are not Use Case based on the Event List (most important are options related to the System Controls)


DOCUMENTING DIALOG DESIGNA Menu Hierarchy grouped by Subsystems and based on Use Cases

Order Entry System UtilitiesCheck Availability Printers and devicesCreate new Order Backup and RecoveryUpdate Order User Accounts - Maintain Accounts - Change Password

* Added Menus During Design for Controls Preferences and Help

ORDER FULFILLMENT

Check Order StatusRecord FulfillmentRecord Back OrderCreate Return

A Dialog Design is created for each of these Menu Options. After completion the Dialog Designs for all options the Designer can redefine the structure of the Menus for different types of Users.


DOCUMENTING DIALOG DESIGN Designers can also document Dialog Designs by writing a Human / Computer

“Dialog The Designer thinks through the sequence of screens that the User would need

to carry on this Dialog with Computer.

One Technique used to show the Screens is called “Storyboarding”.

STORYBOARDING Is a technique used to document Dialog designs by showing a sequence of Sketches of the Display Screen.

Sketches do not have to be very detailed to show the basic design concept.

Designers can implement a Storyboard with a Visual Programming tool such as Visual Basic etc….

This Storyboarding approach to Dialog Design provide only a framework to work from and the resulting design remains fairly general. As working Prototypes are produced many details still have to be worked out.


DIALOG DOCUMENTATION WITH UMLMany UML Diagrams are useful for modeling User-Computer Dialogs

Use Case Descriptions include a list of Steps followed as the User and System interacts

Activity Diagrams also document the Dialog between User and System

System Sequence Diagrams also shows a dialog between the User and the System.

SSD is based on sequence of steps included in the Use Case Description therefore it implies that Dialog Design for the Use Case begins very early and is refined continually.

Sequence Diagrams also contain User-Interface Classes <<boundary>> to show details about the Dialog between the User and Computer. (e.g. Input form)


DIALOG DOCUMENTATION with UML

A Class Diagram with the Interface Classes can be used to show the structure of the Form.

A Sequence Diagram can be used to model the Messages between the User and the Specific Objects making up the Form, including the message that the interface Objects send to each other.


Class Diagram Showing Interface Classes Making up the Item Search Form


Sequence Diagram for the RMO Look Up Item Availability with Item Search Form Added


Sequence Diagram Showing Specific Interface Objects for the Look Up Item Availability Dialog


GUIDELINES FOR DESIGNING WINDOWS AND BROWSER FORMS

Analyst must take care in designing the Forms that Users see on the screen

Each Dialog might require several Windows Forms and each Form must be designed for “Usability”.

The underlying principles of designing Window Forms regardless of its environment (i.e. Microsoft Windows, X-Windows (Unix) or Macintosh Windows) are same.

Standard Tools are widely available to create Input forms and Browser Forms.

Windows Tools: Visual Basic, C++, Java etc… Browser Tools: HTML, ASP, Java Servlets etc..



WINDOW FORMS vs BROWSERS

WINDOW FORMS are programmed in a full-featured Programming languages such as Visual Basic, C++ or Java etc….

Window forms have the advantage of being extremely flexible and capable of accessing data directly on a Workstation.

BROWSER FORMS are programmed using HTM, and script languages such as VBscript or JavaScript.



WINDOW FORMS vs BROWSERS Browser Forms have the advantage of being displayed by any Internet Browser, which makes them accessible on a variety of platforms.

Browser Forms have the additional advantage since the same forms can be used by both internal staff on Company Intranets and Customers on the Internet. (As a result many firms are designing User Interfaces for their new Systems as Browser Forms.)

- Browser Forms produced by Visual Studio.NET (called Web forms) provide the same design flexibility as Window Forms.- Server-side Processing using ASP or Java Servlets can add some of the Window form functionality to Browser forms

A Major Difference between a standard Window Input Forms and Browser Input Forms is that the Window form can easily perform edits field by field as the data are entered.

- However in a Basic Browser Input Form the edits are not performed until Form is transmitted to the Server Computer.



CATAGORIES OF FORMS Input Forms Output Forms Input / Output Forms

Input Forms are used to record a transaction or enter Data. Output forms are displaying information Input /Output Forms are closely related and are designed using similar principles. Before designing a Form the Designer should carefully analyze the “Integrity

Controls” required for Data Input.

There are four major issues to consider in the Design of a Form Form Layout and Formatting Data Keying and Data Entry Navigation and Support Controls Help Support


GUIDELINES FOR DESIGNING WINDOWS AND BROWSER FORMS FORM DESIGN ISSUES

Form Layout and Consistency

Headings, Labels, Logos Font sizes, Highlighting, Colors Order of fields

Data keying and Data entry

Text Boxes, List Boxes, Combo Boxes, etc.

Navigation and support controls

Help support

Tutorials, Indexed help , Context-sensitive help


FORM LAYOUT AND FORMATTING

Form Layout and Formatting are concerned with the General Look and Feel of the Form

The Forms that are well laid out are the form that are easy to use.

One of the best method to ensure good laid out forms is to Prototype various alternatives and let users test them.

As you Design the Forms you should think about:-

1. Consistency

2. Headings, Labels, and Logos

3. Distribution and Order of Data-entry Fields and Buttons

4. Font Sizes, highlighting and Colors.



1. CONSISTENCY is the most important especially when multiple Inputs Forms are required by large Systems and several people involve in the design.

Consistent use of Function Keys, Shortcuts, Control Buttons, color and Layout makes the system much more useful and professional.

◘ Design Templates help the Designer to control the consistency of Window Forms

◘ Cascading Style sheets help designers to control consistency of Web Forms.

2. HEADINGS, LABELS, AND LOGOS help to convey the purpose of the form. A clear, descriptive Title at the top of the Form helps to

minimize confusion about a form’s use. Labels should also be easy to identify and read



3. Carefully position of the Data-entry fields around the Form Place related fields next to each other and even isolate them

with a fine- lined box. Carefully consider TAB order. Use blank space to distinguish and enable easy reading of the Fields. Navigation Buttons are normally at the bottom of the Window. Be

sensitive to follow the traditions of Navigations!

4. FONT SIZES, HIGHLIGHTING AND COLORS.

The purpose is to make the form easy to read.◘ A Careful mix of large fonts, with small fonts, bold and

normal types and fonts with different colors or backgrounds can help a user to find important critical information.


DATA KEYING AND DATA ENTRY The heart of any Input Form is the entry of the new data. However a primary

objective is to require as little data entry as possible. Any information that is already in the computer or that could be generated

by computer should not be re-entered. Use Selection Lists, Check boxes, Automatic retrieval of Descriptive fields etc

will speed up data entry and also reduce errors.

TYPES OF DATA-ENTRY CONTROLS USED IN WINDOWS Text Box – An input control that accepts keyboard data entry. List Box – An input control that contains a list of acceptable entries that the

user can select Spin Box – A variation of the list Box that presents multiple entries in a text

box from which the User can select Combo Box – a variation of List Box that permits the User to enter a new

value or select from the entries. Radio Buttons – Also called Option Buttons enables the User to select One

option from a group. Check Boxes – Enables User to select more than one option from a group.


NAVIGATION AND SUPPORT CONTROLS Standard Windows interface provide several controls for

Navigation and Window manipulation. (Minimize, Maximize and Close buttons in right Top right corner)

Horizontal and Vertical Scroll Bar, Record selection bar on the left panel

Record navigation arrows at the bottom of window etc.

To maintain Consistency across Systems, utilize these Navigation Controls when possible.

Also you should include other Control Buttons.(Move from screen to screen etc)

Browser Forms also provide Navigation and support Controls. Each Form might include its own Navigation buttons.


HELP SUPPORT A Primary objective in the design of Input Forms is for it to

be intuitive so that Users will not need help. Online Help is recommended since there is a possibility of

even well designed systems to be misunderstood.

THREE TYPES OF HELP Tutorial Indexed List of help topics Context-sensitive Help

◘ Tutorial s can assist in training new Users. Can be organized by Tasks.

◘ Indexed list Of Help can be invoked either through a keyword search or with Help Wizard.

◘ Context-sensitive Help ban be based on Indexed list of Help topics but it is invoked differently.

◘ Context-sensitive Help displays the appropriate help tomatically based on the location of the Cursor.


GUIDELINES FOR DESIGNING WEB SITES Web-site design draws from guidelines and rules for designing

Windows forms and browser forms. Many Business Systems make use of both technologies.

Web- site are also used for :- Corporate communication Customer information Service Online Sales, distribution, and marketing

Because Web-sites are available 24 hours a day 7 days a week they need to interact seamlessly with customers.


GUIDELINES FOR DESIGNING WEB SITESTEN GOOD DEEDS IN WEB DESIGN

1. Place the organization Name and Logo on every page and make the Logo a link to the Home Page

2. Provide a Search function if the site has more than 100 pages.

3. Write simple and straightforward Headlines and Page Tittles that clearly explain what the page is about and make sense in a Search Engine when read out.

4. Structure the Page to facilitate reader scanning and help users to get the gist of the information at a glance while ignoring large chunks of the page.

5. Use Hypertext to structure the Content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic instead of cramming everything about a product or topics into a single large page.


GUIDELINES FOR DESIGNING WEB SITES

TEN GOOD DEEDS IN WEB DESIGN (Continued)

6. Use product photos but avoid cluttered and located product family page with lots of photos. The primary product page must load quickly and function fast so it should be limited to a thumbnail product shot.

7. Use “relevance-enhanced image reduction: when preparing small photos and images, instead of simply reducing the original image to a tiny unreadable thumbnail zoom on its most relevant detail by cropping and resizing the image.

8. Use LINK Titles to provide users with a preview of where each link will take them before they have clicked on it.

9. Ensure that all important 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 Because Web sites include so many facet, many large System designers take a

broader view of Web site Design Principles.

A Web Designers should focus on three aspects of Web design:-

1. Designing For The Computer Medium2. Designing The Whole Site3. Designing For The User

1. DESIGNING FOR THE COMPUTER MEDIUM

Five Guidelines to be considered are: Craft the look and feel of the pages to take advantages of the medium Make the design portable since it will be accessed with a wide range of

technology Design for low bandwidth since users will not want to wait for a page to

load. Plan for clear presentation and easy access to information to ease users

navigation through the site. Reformat information for online presentation when it comes from other

sources


WEB SITE DESIGN PRINCIPLES

2. DESIGNING THE WHOLE SITE

The entire site have “unifying Themes and an overall Structure” and the theme should reflect the impression that the organization wants to convey.

E.g. Business-oriented users should use subdued colour, familiar business fonts and structured linear columns.

A Children site should combine bright colours, an open and friendly dynamic structure and simple appealing graphics.

Four Guidelines to be considered are:

Craft the Look and Feel of the pages to match the impression desired by the organization

Create smooth transactions between Web pages so that users are clear about where they have been and where they are going

Lay out each page using a grid pattern to provide visual structure for related groups of information

Leave a reasonable amount of white space on each page between groups of information


WEB SITE DESIGN PRINCIPLES3. DESIGNING FOR THE USERS

Web design efforts should be focused on User-Cantered Design ( i.e. focus on users and their needs).

Do not include any features that might annoy or distract Users Define the purpose and objectives of whole site carefully.

Some Guidelines to be considered are: Design for interaction because Web users expect sites to be interactive

and dynamic Guide user’s eye to information on the page that is the most important Keep a flat hierarchy so that the user does not have to drill down too

deeply to find detailed information Use the power of hypertext linking to help users move around and

through the site Decide how much content per page is enough based on the

characteristics of the typical user but do not clutter the page Design for accessibility for a diverse group of Users, including those

with disabilities.


Partial Sequence Diagram for RMO Create New Order Dialog


Design Concept for Sequential Approach to Create New Order Dialog


Design Concept for Ordered-Centered Approach to Create New Order Dialog


RMO Main Menu Form for an Order-Centered Approach to the Dialog


RMO Order Summary Form for an Order-Centered Approach to the Dialog Beginning a New Order


RMO Product Detail FormAfter the User Selects the Add Product Button


RMO Order Summary Form After the User Adds Several Products


RMO Shipping Option FormFor a Completed Order


RMO’s Home Page


RMO Product Detail Page from Web Site


RMO Shopping Cart Page from Web Site