1. Designing the User Interface

2. 2 Overview User interfaces handle input and output that involve a system user directly Focus on interaction between user and computer, called human-computer interaction (HCI) Metaphors to describe the user interface Usability and Web-based development guidelines Approaches to documenting dialog designs, including UML diagrams from OO approach

3. 3 Identifying and Classifying Inputs and Outputs Identified by analyst when defining system scope Requirements model produced during analysis –Event table includes trigger to each external event –Triggers represent inputs –Outputs are shown as responses to events

4. 4 Traditional and OO Approaches to Inputs and Outputs Traditional approach to inputs and outputs –Shown as data flows on context diagram, data flow diagram (DFD) fragments, and detailed DFDs OO approach to inputs and outputs –Defined by message entering or leaving system –Included in event table as triggers and responses –Actors provide inputs for many use cases –Use cases provide outputs to actors

5. 5 User versus System Interface System interfaces: I/O requiring minimal human interaction User interfaces: –I/O requiring human interaction –User interface is everything end user comes into contact with while using the system –To the user, the interface is the system Analyst designs system interfaces separate from user interfaces Requires different expertise and technology

6. 6 Understanding the User Interface Physical Aspects of the User Interface –Devices touched by user, manuals, documentation, and forms Perceptual Aspects of the User Interface –Everything else user sees, hears, or touches such as screen objects, menus, and buttons Conceptual Aspects of the User Interface –What user knows about system and logical function of system

7. 7 Aspects of the User Interface

8. 8 User-Centered Design Focus early on the users and their work by focusing on requirements Usability - system is easy to learn and use Iterative development keeps focus on user –Continual return to user requirements and evaluate system after each iteration Human-computer interaction (HCI) –Study of end users and interaction with computers –A field of study evolved from the study of ergonomics Human factors engineering (ergonomics) –The study of human interaction with machines in general

9. 9 Fields Contributing to the Study of HCI

10. 10 Metaphors for Human-Computer Interaction Direct manipulation metaphor Document metaphor Dialog metaphor

11. 11 Direct Manipulation Metaphor User interacts with objects on display screen instead of typing commands on a command line. Desktop metaphor –A direct manipulation approach in which the display screen includes an arrangement of common objects found on a desk A notepad, a calendar, a calculator, and folders containing documents

12. 12 Desktop Metaphor Based on Direct Manipulation Shown on Display Screen

13. 13 Document Metaphor Interaction with the computer involves with browsing and entering data on electronic documents –WWW: based on the document metaphor; everything at a Web site is organized as pages that are linked as hypertext –Hypertext: document that allow the user to click on a link and jump to a different part of the document or to another document –Hypermedia: technology that extends the hypertext concepts to include multimedia content such as graphics, video, and audio

14. 14 Document Metaphor Shown as Hypermedia in a Web Browser

15. 15 Dialog Metaphor Much like carrying on a conversation or dialog A way of thinking about human-computer interaction –Computer listens to and response to user questions or comments –User listens to and response to the computer’s questions

16. 16 Dialog Metaphor Expresses the Messaging Concept

17. 17 Guidelines for Designing User Interfaces Visibility –All controls should be visible –Provide immediate feedback to indicate control is responding Affordance –Appearance of control should suggest its functionality – purpose for which it is used System developers should use published interface design standards and guidelines

18. 18 Eight Golden Rules for Interactive Interface Design

19. 19 Strive for Consistency Forms, names, menu, size and shape of icons, and sequence followed to carry out tasks should be consistency throughout the system. Easy to learn Increase productivity If the user is interacting with multiple applications in separate windows, a different visual appearance may help the user differentiate them When the user is learning several applications in on session, some difference in the interfaces may help the user remember which application is which.

20. 20 Strive for Consistency Standard operation is achieved by: –Keeping header and footer information in the same locations for all screens. –Using the same keystrokes to exit a program. –Using the same keystroke to cancel a transaction. –Using a standard key for obtaining help. –Standardized use of icons when using graphical user interface screens. –Consistent use of terminology within a screen or Web site. –Providing a consistent way to navigate through the dialog. –Consistent font alignment, size, and color on a Web page.

21. 21 Enable Frequent Users to Use Shortcuts As the frequency of use increases, so do the user’s desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, special keys, hidden commands, and macro facilities are appreciated by knowledgeable users Fast response times and fast display rates are other attractions for frequent users.

22. 22 Offer informative Feedback For every user action, there should be system feedback. For frequent and minor actions, the response can be modest where as for infrequent and major actions, the response should be more substantial.

23. 23 Offer informative Feedback Feedback to the user is necessary in seven distinct situations: –The computer has accepted the input. –The input is in the correct form. –The input is not in the correct form. –There will be a delay in processing. –The request has been completed. –The computer cannot complete the request. –More detailed feedback is available.

24. 24 Design Dialogs to Yield Closure Each dialog with the system should be organized with a clear sequence (beginning, middle, and end). A well-defined task has a beginning, middle, and end, so user’s tasks on the computer should also feel this way. The user often focuses on a task.

25. 25 Offer Simple Error Handling The systems designer must prevent the user from making errors whenever possible. The ways to do this is –to limit available options and allow the user to choose from valid options –to provide adequate feedback –to provide mechanism to handling errors If an error does occur, the system must help the user correct the error.

26. 26 Permit Easy Reversal of Actions Users need to feel that they can explore options and take actions that can be canceled or reversed without difficulty. The designers should be sure to –include cancel buttons on all dialog boxes –allow users to go back one step at any time –delete something substantial a file, a record, a transaction –ask the user to confirm the action

27. 27 Support Internal Locus of Control Experienced users want to feel that they are in charge of the system and the system responds to their commands. Designers can provide much of this comfort and control through the wording of prompts and messages. –Writing out a dialog like the manager and assistant message dialog will lead to a design that conveys the feeling of control.

28. 28 Reduce Short-Term Memory Load People have many limitations, and short-term memory. People can remember only about 7 chunks of information at a time. The interface designer cannot assume that the user will remember anything from form to form, or dialog box, during an interaction with the system.

29. 29 Documenting Dialog Designs Done simultaneously with other system activities Based on inputs and outputs requiring user interaction Used to define menu hierarchy –Allows user to navigate to each dialog –Provides overall system structure Storyboards, prototypes, and UML diagrams

30. 30 Documenting Dialog Designs The structure charts for subsystems (transaction analysis) include details about menu structure of the interactive parts of the system. The structure charts for each event (transform analysis) includes details about the dialog with the user. The menu reflect the overall system structure from the standpoint of the user. Each menu contains a hierarchy of options, and often arranged by subsystem or by actions on objects. Each menu might include duplicate functions.

31. 31 Overall Menu Hierarchy Design

32. 32 Documenting Dialog Designs Sometimes several versions of the menus are needed based on the type of user. Menus should include options that are not activities from the event list. –backup, recovery, user account maintenance, user preferences, help

33. 33 Virious Types Of Menu Configurations

34. 34 Dialogs and Storyboards Many methods exist for documenting dialogs –Written descriptions following flow of events –Narratives –Sketches of screens –Storyboarding – showing sequence of sketches of display screen during a dialog

35. 35 Storyboard for Downtown Videos

36. 36 Sections of a Dialog Diagram Box

37. 37 Dialog Diagram Illustrating Sequence, Selection, And Iteration

38. 38 Dialog diagram for the Customer Information System

39. 39 Guidelines for Designing Windows and Browser Forms Each dialog might require several window forms Standard forms are widely available –Windows forms: Visual Basic, C++, Java –Browser forms: HTML, VB-Script, JavaScript, ASP or Java servlets Implementation –Identify objectives of form and associated data fields –Construct form with prototyping tools

40. 40 Forms Design Issues Form layout and formatting consistency –Headings, labels, logos –Font sizes, highlighting, colors –Order of data-entry fields and buttons Data keying and data entry (use standard control) –Text boxes, list boxes, combo boxes, etc. Navigation and support controls Help support: tutorials, indexed, context-sensitive

41. 41 Proper Flow Between Data Entry Fields

42. 42 Poor Flow Between Data Entry Fields

43. 43 Standard Control Text boxes Radio buttons Check boxes List boxes Drop down lists Combination boxes Spin boxes Buttons

44. 44 Standard Control Text boxes –When the input data values are unlimited in scope Radio buttons –When data has limited predefined set of mutually exclusive values Check boxes –When value set consists of a simple yes or no value List boxes –When data has a large number of possible values Drop down lists –When data has large number of possible values and screen space is too limited for a list box Combination boxes –When need to provide the user with option of selecting a value from a list or typing a value that may or may not appear in the list Spin boxes –When need to navigate through a small set of choices or directly typing a data value

45. 45 Standard Control Drop down calendars Slider edit controls Masked edit controls Ellipsis controls Alternate numerical spinners Check list boxes Check tree boxes

46. 46 Standard Control

47. 47 Sample of Input Form

48. 48 Navigation and Support Controls Minimize, maximize and close buttons in the top- right corner. Horizontal and vertical scroll bars, the record selection bar on the left panel. Record navigation arrows at the bottom of the window

49. 49 Help Support Tutorial –Assist in training new users –Can be organized by task Indexed list of help topics –Can be invoked either through a keyword search or with a help wizard Help wizard is simply a program that does an automatic keyword search based on words found in a question or sentence Context-sensitive help –Can be based on indexed list of help, but it is invoked differently –Automatically displays the appropriate help topic based on the location of the cursor.

50. 50 Guidelines for Designing Web Sites Draw from guidelines and rules for designing Windows forms and browser forms Website uses: –Corporate communication –Customer information and service –Sales, distribution, and marketing Must work seamlessly with customers 24/7

51. 51 10 Good Deeds in Web Design Place the organization’s name and logo on every page. Provide a search function if the site has more than 100 pages. Write simple headlines and page titles that clearly explain what the page is about. Structure the page to facilitate reader scanning and help users ignore large chunk of the page Use hypertext to structure the content. Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Use relevance-enhanced image reduction when preparing small photos and images. Use link titles to provide users with a preview of where each link will take them before they have clicked on it. Ensure that all important pages are accessible for users with disabilities. Do the same as everybody else.

52. 52 Web Site Design Principles 3 broad aspect of Web design –Designing for the computer medium –Designing the whole site –Designing for the user

53. 53 Designing for the Computer Medium Designers can select from a wide array of video display fonts, colors, and layouts, but the look of the site should flow from its function and organization’s goals –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 user’s navigation through the site. –Reformat information for on-line presentation when it comes from other sources.

54. 54 Designing the Whole Site The entire site must have unifying themes and a structure. –Craft the look and feel of the pages to match the impression desired by the organization. –Create smooth transitions b/w Web pages so 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 b/w groups of information.

55. 55 Designing for the User It is important to focus Web design efforts on the users and their needs. –Design for interaction b/c Web users expect sites to be interactive and dynamic. –Guide the user’s eye to information on the page that is the most important. –Keep a flat hierarchy so that 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. –Design for accessibility for a diverse group of users, including those with disabilities.

56. 56 Dialog Design for RMO Phone-Order Steps in dialog models 1.Record customer information 2.Create new order 3.Record transaction details 4.Produce order confirmation Traditional approach – produce structure chart OO approach – expand SSD to include forms

57. 57 Required Forms for RMO Main menu Customer Item search Product detail Order summary Shipping and payment options Order confirmation

58. 58 Design Concept for Sequential Approach to Create New Order Dialog

59. 59 Design Concept for Order-Centered Approach to Create New Order Dialog

60. 60 Prototype Forms for an Order- Centered Approach to the Dialog

61. 61 Prototype Forms for an Order-Centered Approach to the Dialog (continued)

62. 62 Dialog Design for RMO Web Site Basic dialog between user and customer similar to phone-order representative Web site will provide more information for user, be more flexible, and be easier to use More product pictures are needed Information needs are different for customer than for phone-order employees Guidelines for visibility and affordance are used to convey positive company image

63. 63 RMO’s Home Page

64. 64 Product Detail Page from RMO Web Site

65. 65 Shopping Cart Page from RMO Web Site

66. 66 Summary User interface is everything user comes into contact with while using the system –Physically, perceptually, and conceptually To some users, user interface is the system User-centered design means: –Focusing early on users and their work –Evaluating designs to ensure usability –Applying iterative development

67. 67 Summary ( continued ) User interface is described with metaphors (desktop, document, dialog) Interface design guidelines and standards are available from many sources Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams