1. 14 Chapter 11: Designing the User Interface

2. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and Outputs u Identified by analyst when defining system scope u Requirements model produced during analysis l Event table includes trigger to each external event l Triggers represent inputs l Outputs are shown as responses to events

3. 14 Systems Analysis and Design in a Changing World, 3rd Edition 3 Traditional and OO Approaches to Inputs and Outputs u Traditional approach to inputs and outputs l Shown as data flows on context diagram, data flow diagram (DFD) fragments, and detailed DFDs u OO approach to inputs and outputs l Defined by message entering or leaving system l Included in event table as triggers and responses l Actors provide inputs for many use cases l Use cases provide outputs to actors

4. 14 Systems Analysis and Design in a Changing World, 3rd Edition 4 User versus System Interface u System interfaces: I/O requiring minimal human interaction u User interfaces: l I/O requiring human interaction l User interface is everything end user comes into contact with while using the system l To the user, the interface is the system u Analyst designs system interfaces separate from user interfaces u Requires different expertise and technology

5. 14 Systems Analysis and Design in a Changing World, 3rd Edition 5 Understanding the User Interface u Physical Aspects of the User Interface l Devices touched by user- keyboard, mouse, touch screen, Physical parts- manuals, documentation, and forms u Perceptual Aspects of the User Interface l Everything else user sees, hears, or touches such as screen objects, menus, and buttons u Conceptual Aspects of the User Interface l What user knows about system and logical function of system

6. 14 Systems Analysis and Design in a Changing World, 3rd Edition 6 Aspects of the User Interface

7. 14 Systems Analysis and Design in a Changing World, 3rd Edition 7 User-Centered Design u User-centered design techniques emphasize THREE important principles: 1. Focus early on the users and their work 2. Evaluate designs to ensure usability 3. Use iterative development u Focus early on the users and their work u In O-O, focuses users by identifying actors, use cases, scenarios….

8. 14 Systems Analysis and Design in a Changing World, 3rd Edition 8 User-Centered Design u Evaluate designs to ensure usability l Usability - system is easy to learn and use l Ease of Learning u Example: Menu-based application with many forms, many dialog boxes, extensive prompts & instructions u Self-explanatory u Suitable for system that used infrequently.

9. 14 Systems Analysis and Design in a Changing World, 3rd Edition 9 User-Centered Design l Ease of Use u Example: Shortcuts u Difficult to learn, once you know, easy to use u Fast and flexible u Suitable for system that used frequently. u Iterative development keeps focus on user l Continual return to user requirements and evaluate system after each iteration

10. 14 Systems Analysis and Design in a Changing World, 3rd Edition 10 Metaphors for Human-Computer Interaction u Direct manipulation metaphor l User interacts with objects on display screen u Document metaphor l Computer is involved with browsing and entering data on electronic documents l WWW, hypertext, and hypermedia u Dialog metaphor (refer to page 452) l Much like carrying on a conversation

11. 14 Systems Analysis and Design in a Changing World, 3rd Edition 11 Dialog Metaphor Expresses the Messaging Concept

12. 14 Systems Analysis and Design in a Changing World, 3rd Edition 12 Guidelines for Designing User Interfaces u Visibility l All controls should be visible l Provide immediate feedback to indicate control is responding l Example: Button make sound / change look when it is clicked. u Affordance l Appearance of control should suggest its functionality – purpose for which it is used l Example: Steering button used to turn.

13. 14 Systems Analysis and Design in a Changing World, 3rd Edition 13 Eight Golden Rules for Interactive Interface Design

14. 14 Systems Analysis and Design in a Changing World, 3rd Edition 14 Documenting Dialog Designs u Done simultaneously with other system activities u Based on inputs and outputs requiring user interaction u Used to define menu hierarchy l Allows user to navigate to each dialog l Provides overall system structure u Storyboards, prototypes, and UML diagrams

15. 14 Systems Analysis and Design in a Changing World, 3rd Edition 15 Overall Menu Hierarchy Design

16. 14 Systems Analysis and Design in a Changing World, 3rd Edition 16 Dialogs and Storyboards u Many methods exist for documenting dialogs l Written descriptions following flow of events l Narratives l Sketches of screens l Storyboarding – showing sequence of sketches of display screen during a dialog

17. 14 Systems Analysis and Design in a Changing World, 3rd Edition 17 Storyboard for Downtown Videos

18. 14 Systems Analysis and Design in a Changing World, 3rd Edition 18 Dialog Documentation with UML Diagrams u OO approach provides UML diagrams u Use case descriptions l List of steps followed as system and user interact u Activity diagrams l Document dialog between user and computer for a use case u System sequence diagrams (SSD) l Actor (a user) sends messages to system l System returns information in form of messages

19. 14 Systems Analysis and Design in a Changing World, 3rd Edition 19 Sequence Diagram for the RMO Look Up Item Availability dialog

20. 14 Systems Analysis and Design in a Changing World, 3rd Edition 20 Class Diagram Showing Interface Classes Making up ProductQueryForm

21. 14 Systems Analysis and Design in a Changing World, 3rd Edition 21 Sequence Diagram Showing Specific Interface Objects

22. 14 Systems Analysis and Design in a Changing World, 3rd Edition 22 Guidelines for Designing Windows and Browser Forms u Each dialog might require several window forms u Standard forms are widely available l Windows: Visual Basic, C++, Java l Browser: HTML, VB-Script, JavaScript, ASP or Java servlets u Implementation l Identify objectives of form and associated data fields l Construct form with prototyping tools

23. 14 Systems Analysis and Design in a Changing World, 3rd Edition 23 Forms Design Issues u Form layout and formatting consistency l Headings, labels, logos l Font sizes, highlighting, colors l Order of data-entry fields and buttons u Data keying and data entry (use standard control) l Text boxes, list boxes, combo boxes, etc. u Navigation and support controls u Help support: tutorials, indexed, context-sensitive

24. 14 Systems Analysis and Design in a Changing World, 3rd Edition 24 Guidelines for Designing Web Sites u Draw from guidelines and rules for designing Windows forms and browser forms u Website uses: l Corporate communication l Customer information and service l Sales, distribution, and marketing u Must work seamlessly with customers 24/7

25. 14 Systems Analysis and Design in a Changing World, 3rd Edition 25 Guidelines for Designing Web Sites u Ten Good Deeds in Web Design 1. Placement of organization’s name and logo. 2. Search function. 3. Headlines and page titles. 4. Facilitate reader scanning. 5. Hypertext to structure the content space. 6. Product photos. 7. Use relevance-enhanced image reduction. 8. Use link titles- to provide a preview of where each link goes, 9. Accessible for users with disabilities- visually impaired users. 10. Do the same as everybody else.

26. 14 Systems Analysis and Design in a Changing World, 3rd Edition 26 Dialog Design for RMO Phone-Order u Steps in dialog models 1. Record customer information 2. Create new order 3. Record transaction details 4. Produce order confirmation u Traditional approach – produce structure chart u OO approach – expand SSD to include forms

27. 14 Systems Analysis and Design in a Changing World, 3rd Edition 27 Required Forms for RMO u Main menu u Customer u Item search u Product detail u Order summary u Shipping and payment options u Order confirmation

28. 14 Systems Analysis and Design in a Changing World, 3rd Edition 28 Design Concept for Sequential Approach to Create New Order Dialog

29. 14 Systems Analysis and Design in a Changing World, 3rd Edition 29 Design Concept for Order-Centered Approach to Create New Order Dialog

30. 14 Systems Analysis and Design in a Changing World, 3rd Edition 30 Prototype Forms for an Order-Centered Approach to the Dialog

31. 14 Systems Analysis and Design in a Changing World, 3rd Edition 31 Prototype Forms for an Order-Centered Approach to the Dialog ( continued )

32. 14 Systems Analysis and Design in a Changing World, 3rd Edition 32 Dialog Design for RMO Web Site u Basic dialog between user and customer similar to phone-order representative u Web site will provide more information for user, be more flexible, and be easier to use u More product pictures are needed u Information needs are different for customer than for phone-order employees u Guidelines for visibility and affordance are used to convey positive company image

33. 14 Systems Analysis and Design in a Changing World, 3rd Edition 33 RMO’s Home Page

34. 14 Systems Analysis and Design in a Changing World, 3rd Edition 34 Product Detail Page from RMO Web Site

35. 14 Systems Analysis and Design in a Changing World, 3rd Edition 35 Shopping Cart Page from RMO Web Site

36. 14 Systems Analysis and Design in a Changing World, 3rd Edition 36 Summary u User interface is everything user comes into contact with while using the system l Physically, perceptually, and conceptually u To some users, user interface is the system u User-centered design means: l Focusing early on users and their work l Evaluating designs to ensure usability l Applying iterative development

37. 14 Systems Analysis and Design in a Changing World, 3rd Edition 37 Summary ( continued ) u User interface is described with metaphors (desktop, document, dialog) u Interface design guidelines and standards are available from many sources u Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus u OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams