User interface design

Transcription

1 Modeling and Systems Development Lecture 10 User interface design Principles of human computer interaction

2 Human computer interaction Defines the way in which the users will interact with the system the nature of inputs and outputs Consists of three parts: navigation mechanism input mechanism output mechanism 2

3 Principles for user interface design Layout Content awareness Aesthetics User experience Consistency Minimal user effort 3

4 Layout Often divides the screen into 3 boxes Navigation/command area (top) Status area (bottom) Info area (middle) Can present info in multiple areas; but group similar areas together Minimize user movements: give areas an intuitive flow, L-R T-B Keep areas consistent in: size shape placement (e.g. floating toolbars); Also for forms (input) and for reports (output) 4

5 Layout: example (a) 5

6 Layout: example (b) 6

7 Layout: vertical flow label field Labels and fields are important for content awareness 7

8 Layout: horizontal flow 8

9 Different UIs 9

10 How about the principles on slide 3? 10

11 Menu: where are you and where did you come from? Also important: titles time stamps version no s colors font spacing Content awareness 11

12 Aesthetics Temptation: squeeze as much information as possible into a screen High density makes appearance unpleasant Temptation: draw attention to items by capitals, color or movement Use font changes only to indicate changes in information type, e.g. headings 12

13 User experience Ease of learning for novice users versus ease of use for expert users Menus versus buttons versus keyboard shortcuts Interactive help Microsoft Office Assistant Show me functions Wizards 13

14 Consistency Consistency All parts of the system work the same way Enables users to predict effects of actions Can be achieved by standard interface objects (radio buttons, combo boxes, ) standard icons (new file, save, print, ) consistent terminology consistent, but not identical design of forms apply within and across applications 14

15 UI design process develop use scenarios evaluate the interface start design interface structure (WND) prototype interface design design interface standards 15

16 Use scenario Represents one path through an essential use case Outlines the steps Only document the most common use scenarios! Example use scenario (for a hurry-up shopper): 1.User searches for a specific artist or CD 2.User looks at the price and other info 3.User places order or does another search or surfs other web sites 16

17 Window Navigation Diagram double-headed transition arrow: requires return <<window>> Menu A <<window>> Main Menu Note: a WND is similar to a state machine diagram stereotype <<form>> Form A <<report>> Report F 17

18 Interface Structure Design Usually defines several WNDs, showing how all screens, forms and reports are related Basic structure of WNDs follows from the use cases Examining the use scenarios may result in reworking the WNDs 18

19 Interface Standards Design Develop or reuse metaphors: desktop scroll bar ear icon to symbolize an audio file Icons brush; for what? house symbol for home page Interface templates Defining appearance of screens, forms, reports, e.g. menu ordering: new blank document new slide the ribbon => relearn the menus! 19

20 Interface Design Prototyping A mock-up or simulation of screen, form, or report Common methods include Storyboard (simple, cheap) HTML prototype Language prototype: exact representation of screens 20

21 Storyboard Example 21

22 Interface evaluation methods Heuristic evaluation Compare design to checklist of principles Walkthrough evaluation Team simulates movement through components Interactive evaluation Users try out the system Formal usability testing Expensive Detailed use of special lab testing 22

23 The three fundamental parts of the user interface Navigation mechanism for users to tell the system what to do Input mechanism for the system to capture information Output mechanism the way in which the system provides information to users or other systems 23

24 Navigation Prevent mistakes not too many choices: nesting, gray-out, invisible toolbars, only most recent choices precaution Recover from mistakes undo (multilevel!) Object-action (is objectoriented) or Actionobject (is functional) save (current object) open? new? Object-action principle originated from Smalltalk 24

25 Types of navigation control Languages Command language, e.g. SQL Natural language Menus Generally aim at broad (max. 8) and shallow menu Use hot keys for experienced users Direct Manipulation icons to start programs drag and drop shape and size objects not intuitive for all commands (e.g. copy file) 25

26 Traditional menu 26

27 Pie Menu 27

28 Types of menus Menu bar Drop-down menu Pop-up menu Tab menu Toolbar Image map 28

29 Example navigation 29

30 Types of system messages Error message Explain the reason Confirmation message When user selects dangerous choice Delay message When activity takes more than 7 seconds Help message 30

31 Example: crafting an error message Enter correct phone number. Phone number is invalid. Phone number is invalid. Enter correct phone number. Correct way: 1. Explain the problem. 2. Describe how to correct it. 31

32 Message content Should be clear, concise, and complete Should be grammatically correct and free of jargon and abbreviations Avoid negatives Avoid humor 32

33 Input Capture data at the source (no duplication) Reduces processing time Decreases cost Less errors Source data automation OCR readers (bar code, magnetic stripe) smart cards 33

34 Online versus Batch Processing Online processing data immediately recorded in database Batch processing collects inputs enters them in a batch simplifies data communications not accurate in real time (e.g. inventory) 34

35 Sample Input Form Text box Radio buttons Check boxes On-screen list box Drop-down list box Slider 35

36 Choice and combo boxes Dropdown list box (uneditable) versus combo box (editable) Write here or choose from the list 36

37 Types of input validation Completeness check Have all required fields been filled? Format check Range check Check digit check Consistency check Database check 37

38 Type of reports Detail report Full information in response to a query Summary report Brief information on many items Turnaround report Needs to be completed and returned Graphs To help users compare numeric values 38

39 Graphs and bias 39