1. Slide 17.1 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. An Introduction to Object-Oriented Systems Analysis and Design with UML and the Unified Process McGraw-Hill, 2004 Stephen R. Schach srs@vuse.vanderbilt.edu

2. Slide 17.2 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. CHAPTER 17 USER-INTERFACE DESIGN

3. Slide 17.3 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Chapter Overview l Input and Output Devices l Consistency l Correcting Mistakes l Metaphors l Layout and Aesthetics l Dynamic Interfaces l The Unified Process and the User Interface

4. Slide 17.4 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Input and Output Devices l Major input devices include –Keyboard –Mouse –Telephone l Major output devices include –Printer –Screen –Telephone

5. Slide 17.5 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Input and Output Devices (contd) l A user makes a telephone call to a bank computer

6. Slide 17.6 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Input and Output Devices (contd) l The user wants checking account information –The user presses 1 l Now the user is asked for account number and “PIN number” –The user enters these numbers correctly

7. Slide 17.7 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Input and Output Devices (contd) l The user now hears the following choices:

8. Slide 17.8 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Input and Output Devices (contd) l The user want to know the account balance, but –The user accidentally presses the 2 button l The user now hears the following menu: l The user has no choice but to hang up the phone

9. Slide 17.9 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Consistency l Compare the three telephone menus –To have the current menu repeated, the user is told to press 5, 9, or 3 l This extremely poor design practice –Leads to errors, frustration, and a strong negative attitude toward the bank

10. Slide 17.10 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Consistency (contd) l In every printed report –The date should always appear in the same place and in the same format l Buttons on screens need to have –The same size in all screens –Letters in the identical font –Consistent coloring l Toolbars always need to be in the same place

11. Slide 17.11 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Consistency (contd) l Icons denoting the same functionality –Must be identical on all screens l The user interfaces of Macintosh applications are consistent l They can be used without studying the user manual, –Because the same commands have the same meaning

12. Slide 17.12 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Consistency (contd) l Consistency within an information system is insufficient l What is needed is consistency within all screens of all information systems used by that company

13. Slide 17.13 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Correcting Mistakes l There are two types of incorrect input –Giving an incorrect command »Example: Bank user presses 2 instead of 1 –Supplying incorrect data »Example: Bank user enters wrong PIN

14. Slide 17.14 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Correcting Mistakes (contd) l In a well-designed user interface, a user must be given –A few tries to submit data correctly »An unlimited number of tries is not allowed for security reasons –The opportunity to recover from issuing an incorrect command –The opportunity to reconsider before an irreversible command is executed

15. Slide 17.15 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors l The word menu was repeatedly used in the context of the bank user interface –Until about 25 years ago, a menu meant a list of choices open to a diner l Now this metaphor has become widely accepted

16. Slide 17.16 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l A metaphor is a figure of speech in which a word used literally in one context is used to imply the same concept in a different context

17. Slide 17.17 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l Example: A “menu” in the context of a restaurant is a printed card with a list of dishes from which the diner can choose l The word “menu” is used in the user-interface context to imply a list of choices l That is, the word is used –Literally in the restaurant context, but –Metaphorically in the user-interface context

18. Slide 17.18 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l The desktop metaphor for user interfaces of operating systems includes folders, trash can, and files

19. Slide 17.19 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l Other metaphors used in user interfaces of operating systems include –Menus, and –Direct manipulation »(Or point-and-click, or drag-and-drop) l Operating systems make use of more than one metaphor at a time –Users have no problems with mixed metaphors

20. Slide 17.20 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l Word processors also make use of more than one metaphor –Sheet of paper »Menu choices like Cut, Paste, Page Layout –Typesetting metaphor »Terminology like Font, Tab, Footnote, Header, and Print

21. Slide 17.21 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l The window metaphor –Consistent with the metaphor are the »Term: active window, and »Commands: Open, Close a window –Inconsistent with the metaphor are the »Feature: scroll bars, and »Commands: Resize, Minimize a window

22. Slide 17.22 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l The window metaphor with scroll bars

23. Slide 17.23 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l The icon metaphor –A symbol that stands for a folder, a document, a spreadsheet, a program, a window, and so on l Double-clicking on an icon causes it to open –Point-and-click metaphor

24. Slide 17.24 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l The icon metaphor

25. Slide 17.25 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Metaphors (contd) l A graphical user interface (or GUI) –Utilizes a combination of the metaphors already mentioned, including »Windows »Menus »Point-and-click, and »Icons –It often also utilizes other metaphors, such as »Radio buttons, and »Check boxes

26. Slide 17.26 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. l Radio buttons and check boxes Metaphors (contd)

27. Slide 17.27 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Layout and Aesthetics l Use whitespace freely l Figure with poor use of whitespace

28. Slide 17.28 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Layout and Aesthetics (contd) l The same figure but with better use of whitespace

29. Slide 17.29 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Layout and Aesthetics (contd) l Color –Use as few colors as possible, and –Use them consistently

30. Slide 17.30 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Layout and Aesthetics (contd) l Fonts –Use as few fonts as possible, and –Use them consistently l If variation is needed –Use the same font in different sizes –Use the same size font but in boldface –Use the same size font but in italics

31. Slide 17.31 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Interfaces l One common user interface is sometimes inappropriate –A user interface must be tailored to the skill level of its intended users –Also, different interfaces are needed to cater for users with more or less experience with the information system l Switching to a more appropriate set of screen can be performed dynamically by the information system

32. Slide 17.32 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. The Unified Process and the User Interface l The design of the user interface is an integral part of the Unified Process –The use cases are the foundation for user-interface design

33. Slide 17.33 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Requirements Workflow l Generalized use case –The point at which the line from the Actor to the Activity intersects the rectangle models the user interface

34. Slide 17.34 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Prototyping the User Interface l While performing the requirements workflow, the user interface is prototyped –This is not a rapid prototype »Rapid prototyping is not part of the Unified Process l Purpose –To be sure that, after delivery, the user will be able to perform each use case effectively l The prototype user interface may be a rough sketch that depicts just the user interface (screen or report)

35. Slide 17.35 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design l Design of a user interface using the Unified Process consists of five steps: l Step 1: Decide on the elements of the user interface –Many of these elements will be attributes of the relevant boundary class –The designer starts with one actor and finds all the use cases in which that actor participates –For each use case, the elements are listed

36. Slide 17.36 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Example: –Buy a Painting use case of the Osbert Oglesby case study –The first paragraph of the description:

37. Slide 17.37 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Nine elements of the user interface are clear from this paragraph l The remaining elements of the user interface can be deduced from the rest of the use case

38. Slide 17.38 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Step 2: Put together a preliminary design that incorporates just the bare elements themselves –One way: Put the name of each element on a Post-it note and arrange the notes on a board

39. Slide 17.39 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Step 3: Check that this preliminary version of the elements of the user interface is adequate –The set of elements must provide all the information necessary for the user to perform the required actions –An outline of the help information for that screen is added –The user’s responses must result in all the necessary data being supplied to the information system

40. Slide 17.40 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Step 4: The designer determines how to express those elements in terms of –Metaphors –Aesthetic issues »Such as font, color, and layout

41. Slide 17.41 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. User-Interface Design (contd) l Step 5: Produce the prototype user interface –First, sketch the various interfaces »A pencil sketch encourages the client and users to suggest improvements –Second, use a screen generator or report generator to generate the prototype user interface

42. Slide 17.42 Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Iteration l As the Unified Process proceeds –The use cases are analyzed, designed, implemented, tested, and installed l The user interface for each use case similarly undergoes iteration and incrementation