CHAPTER 11 DESIGNING THE USER INTERFACE LAYER

CHAPTER 11 DESIGNING 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 Object-Oriented Analysis and Design with the Unified Process

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”. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

USER INTERFACE PHYSICAL 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 Object-Oriented Analysis and Design with the Unified Process

USER INTERFACE CONCEPTUAL 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. Object-Oriented Analysis and Design with the Unified Process

Aspects of the User Interface
Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

User-Centered Design FOCUS 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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

1. Strive for Consistency
The Eight Golden Rules for Designing Interactive User Interfaces 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 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. Object-Oriented Analysis and Design with the Unified Process

The Eight Golden Rules for Designing Interactive User Interfaces
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. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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) Object-Oriented Analysis and Design with the Unified Process

A Menu Hierarchy grouped by Subsystems and based on Use Cases Order Entry System Utilities Check Availability Printers and devices Create new Order Backup and Recovery Update Order User Accounts Maintain Accounts - Change Password * Added Menus During Design for Controls Preferences and Help ORDER FULFILLMENT Check Order Status Record Fulfillment Record Back Order Create 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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

DIALOG DOCUMENTATION WITH UML
Many 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) Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

Sequence Diagram Showing Specific Interface
Objects for the Look Up Item Availability Dialog Object-Oriented Analysis and Design with the Unified Process

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.. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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:- Consistency Headings, Labels, and Logos Distribution and Order of Data-entry Fields and Buttons Font Sizes, highlighting and Colors. Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

TEN 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. Object-Oriented Analysis and Design with the Unified Process

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. Object-Oriented Analysis and Design with the Unified Process

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:- Designing For The Computer Medium Designing The Whole Site 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 Object-Oriented Analysis and Design with the Unified Process

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 Object-Oriented Analysis and Design with the Unified Process

3. 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. Object-Oriented Analysis and Design with the Unified Process

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 Form After the User Selects the Add Product Button

RMO Order Summary Form After the User Adds Several Products

RMO Shipping Option Form For a Completed Order

RMO’s Home Page Object-Oriented Analysis and Design with the Unified Process

RMO Product Detail Page from Web Site

RMO Shopping Cart Page from Web Site

CHAPTER 11 DESIGNING THE USER INTERFACE LAYER

Similar presentations

Presentation on theme: "CHAPTER 11 DESIGNING THE USER INTERFACE LAYER"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

CHAPTER 11 DESIGNING THE USER INTERFACE LAYER

Similar presentations

Presentation on theme: "CHAPTER 11 DESIGNING THE USER INTERFACE LAYER"— Presentation transcript:

Similar presentations

About project

Feedback