Designing the User Interface

1. Designing the User Interface

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. 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. 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. 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. 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. Aspects of the User Interface

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. Fields Contributing to the Study of HCI

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

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. Desktop Metaphor Based on Direct Manipulation Shown on Display Screen

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. Document Metaphor Shown as Hypermedia in a Web Browser

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. Dialog Metaphor Expresses the Messaging Concept

17. Guidelines for DesigningUser 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. Eight Golden Rules for Interactive Interface Design

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Overall Menu Hierarchy Design

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. Virious Types Of Menu Configurations

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. Storyboard for Downtown Videos

36. Sections of a Dialog Diagram Box

37. Dialog Diagram Illustrating Sequence, Selection, And Iteration

38. Dialog diagram for the Customer Information System

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. 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. Proper Flow Between Data Entry Fields

42. Poor Flow Between Data Entry Fields

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

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. Standard Control • Drop down calendars • Slider edit controls • Masked edit controls • Ellipsis controls • Alternate numerical spinners • Check list boxes • Check tree boxes

46. Standard Control

47. Sample of Input Form

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