Choice will depend on choice of interaction devices

Size: px

Start display at page:

Download "Choice will depend on choice of interaction devices"

Morgan Mitchell
5 years ago
Views:

2 2

4 Choice will depend on choice of interaction devices

5 - Command line: - pros: powerful (can apply to many objects at once, pipes), flexible (many options/parameters), efficient (direct access to system functionality) - Cons: difficult to learn many commands, confusing parameters - Menu selection - Pros: offers cues for recognition, helps decompose a complex task into a series of steps, easier to learn, fewer keystrokes - Cons: slower to use in some cases, complicated hierarchies, consumes screen space - Form-fill - Pros: simplifies data entry, guides the user through it, can mirror paper forms so may not need too much training, can provide defaults to speed up entry - Cons: consumes screen space (tendency to copy paper may be limiting ) - Direct manipulation - Pros: presents the tasks visually, easy to learn/remember, can be reversible (recovery from errors is good), encourages exploration, WYSIWIG - Cons: requires graphic displays, screen space and continuous input devices, metaphors may be misleading - Anthropomorphic - Pros: relieves burden of learning syntax of the user interface - Cons: can be unpredictable, very difficult to implement

6 6

7 Let s have now a closer look at the elements of the wimp interface 7

8 Windows are areas of the screen that behave as if they were independent terminals on their own. A windows-based interface organization offers therefore modularity. It is not only about modularity, it is also about attention. Think about attention as a spotlight. The users can direct their attention to the different windows as they switch from one thread of work to another. The graphical organization of the windows depends upon the application (overlap, tiled) Windows have various things associated with them that increase their usefullness, such as title bars and scroll-bars. We need scroll-bars because of the real-estate problem: the information that we need to process for a certain task is too big for fitting on a single screen. 8

9 9

10 Every document, application, and utility window should have, at a minimum: A title bar. Even if the window does not have an actual title (a tools palette, for example), it should have a title bar so that users can move the window. A close button, so that the user has a consistent way to dismiss it. In addition, a standard document window has the following attributes that an application or utility window might not have: Horizontal or vertical scroll bars, or both (if not all the window s contents are visible) Minimize and zoom buttons A proxy icon (after a document has been saved) The title of the document A resize control A toolbar control Also, if you mouse over any of the three, then indicators appear within the circles to help you know what they are an X in the red circle, dash/minus in the yellow, plus in the green. 10

11 Windows can be closed and lost; if saved, they can be shrunk to some very reduced representation. This very reduced representation is usually a picture, known as an icon. Why do we use icons? Because this is a clever way to deal with the real-estate problem. Indeed, many windows can be available on the screen at the same time. They can either be highly stylized, or standardized, or have realistic representations (metaphors). Icons are used for documents, but also for programs and for other aspects of the system, such as the waste bin. They can be static or dynamic, so they can give us a feedback about the state of the system: Example: the waste bin (full or empty) They can be also transparent (see My pictures) Folder icons also convey basic information about the content of the actual folder, allowing a quick search. 11

12 Dragging and dropping are simple actions that do not require a lot of our attention If we think about attention as a resource, that means that we can easily perform those operations while having a phone conversation. In summary, icons provide the benefit of being "directly manipulated." They can be dragged, they can be dropped--all activities that are natural to our kinesthetic, non-verbal intellect. This augments the analytic, verbal intellect. We can do both kinds of thinking at once. It's called "dual task processing." What better satisfaction than dragging a document to a shredder (or trash can) while talking to someone on the phone? We can do neat things in a few motions that would otherwise require prohibitive amounts of attention-diverting verbal commands. 12

13 They are "verb forms." Reading clockwise from the top left, we have "make the text fit in the margins," "rotate to landscape," "make bold," "make italics," "remove all page breaks, "print in reverse order," "remove all control characters", and "hand feed the paper." To use a control character, simultaneously hold the CTRL key and press another key. The combination is usually written with the CTRL key being represented as a caret (^). What went wrong? Six of the eight icons were not easy. They were not cross cultural. They did not solve the problem of illiteracy. And they didn't save any time. Yet, these icons could appear in any average application. 13

14 They are all nouns! 14

15 Make the action concrete by associating it with the object to which it applies. Many actions benefit from using arrows. 15

16 The user sees a cursor on the screen that is controlled by the input device. So, the motion of the input device (let s say the mouse) is mapped onto the motion of the cursor. A good mapping is essential for a correct visual feedback for the user. Current shapes of the cursor are used to distinguish modes (see paint). 16

17 This arrow shape is marginally acceptable because of questionable "tip" position. Suggestion: make it look more like a pointer than a equilateral triangle. As a general pointer, this cross shape is poor, and the metaphor is questionable (for a pointer to menu item), although it is great for special operation, such as to define a rectangle corner in a drawing application. This arrow shape is okay, but the direction of the pointer is not natural. This pencil shape is a poor metaphor, this kind of cursor is great for special purpose operation, such as drawing, but questionable as a general purpose pointer. 17

18 A menu presents a list of possible operations that can be performed by a system at any given time. We know that our ability to recall information is inferior than our ability to recognize info given a visual cue. Menus provide information cues in the form of an ordered list of operations that can be scanned. This means that the names used for the commands in the menu have to be meaningful and informative. 18

19 19

20 20

21 21

22 These regions are called buttons because the conceptual model is evident: - They have to be pushed in order in invoke a command - We will discuss just two special kinds of buttons: radio buttons (which indicated mutually exclusive choices) - Or check boxes (which are for non-exclusive choices) - Toggle buttons (font characteristics, bold, italics, underlined) are similar to check boxes. Their on-off status has to be signaled through visual feedback. 22

23 The function of the toolbar is similar to the menu bar, but the icons are smaller than the equivalent text, so more functions can be simultaneously displayed. Icons on the toolbars act similar to key accelerators. Toolbars are often underused because users simply do not know what the icons represent. Designing for multiple classes of users: make toolbars customizable. 23

24 24

25 Information windows used by the system to focus the user s attention to some important information, possibly an error or a warning to prevent a possible error. 25

26 26

27 Widget reuse is beneficial in two ways, actually. First are the conventional software engineering benefits of reusing code, like shorter development time and greater reliability. A widget encapsulates a lot of effort that somebody else has already put in. Second are usability benefits. Widget reuse increases consistency among the applications on a platform. It also (potentially) represents usability effort that its designers have put into it. A scrollbar s affordances and behavior have been carefully designed, and hopefully evaluated. By reusing the scrollbar widget, you don t have to do that work yourself. One problem with widgets is that they constrain your thinking. If you try to design an interface using a GUI builder with a palette limited to standard widgets you may produce a clunkier, more complex interface than you would if you sat down with paper and pencil and allowed yourself to think freely. A related problem is that most widget sets consist mostly of form-style widgets: text fields, labels, checkboxes which leads a designer to think in terms of menu/form style interfaces. There are few widgets that support direct visual representations of application objects, because those representations are so application-dependent. So if you think too much in terms of widgets, you may miss the possibilities of direct manipulation. Finally, widgets can be abused, applied to UI problems for which they aren t suited. 27

28 28

29 Consistency is the key to conviction, no matter how important an inconsistent part may be, the damage it does to the routine as a whole, more than offsets the advantages it may have in itself. Unity. No first-class success in any type of entertainment, needs some form of a connecting thread. Keep it simple Use of real-world metaphors: If these things are common things, objects with which the spectator is familiar, this spectator will accept them in terms as he knows them. User testing: When you work out a routine for laymen, try it out on a friend who knows nothing about conjuring. Ask for his detailed criticism. Then try it on another friend. If several laymen find fault with the same spot in your routine, it must be bad.

30 30

31 What is wrong with the following? 31

32 Visually complex Does not effectively exploit prior knowledge (looks like buttons) Simplicity Consistency 32

33 No structure - can t tell labels from edit boxes - No alignment - Can t tell what is important 33

34 Visually complicated No structure No indication of importance 34

35 Redesign of the previous screen 35

- (Grouping) inputs are not visually connected to their label because of so much space between them - -The input controls are all squished together making it difficult to tell what goes with what -

36 - (Grouping) inputs are not visually connected to their label because of so much space between them - -The input controls are all squished together making it difficult to tell what goes with what - (Importance) some text is bolded which makes it pop but it doesn't seem necessary ("ascending" & "descending" for instance) -"When sending messages..." message's control should be layed out so they read across ("Place copy in" should be on same line and in front of the radio buttons. -There is a "YesNo" in the top left hand side of content area. I have no idea what it is. -"Display full message headers" control should be radio buttons since it's only 2 choices. -Why does " signature?" have a question mark? It is not a question. 36

37 (Simplicity) It's not clear that the 3 different "ask me" portlets would make sense to users. Is it really necessary to have 3 different ones or could there just be one "ask me" that works like google? (Tolerance) - Reduce errors by giving just one interface (users can t ask wrong person) 37

38 Consistency - Non-standard Menu (Exit is first item) - Weird location for toolbar, toolbar icons in non-standard order Simplicity - visually complex design Structure - Bottom items not structured in any way 38

39 39

40 Guidelines are derived from psychology, human factors studies and common sense But they can be misinterpreted or misapplied especially when guidelines contradict each other leading to trade-offs

41 Some other examples.. Engineer for errors Provide adequate feedback See for an example (actually not quite all principles, a bit of a mix )

42 42

43 Simplicity keep UI as simple as possible Structure organize UI in a meaningful and useful way Consistency uniform appearance, placement and behavior Tolerance prevent users from making errors and help them recover when they do 43

44 Others: Provide a screen refresh command for display oriented applications Display the help button in the top right-hand corner of the screen

45 Concrete example: ISO international organization of standardization, e.g. see stds.htm e.g. in every day life: - colors for electric wiring - Standard position of pedals in cars - Clothing sizes

46 For example see library/documentation/ UserExperience/Conceptual/ AppleHIGuidelines/XHIGIntro/ XHIGIntro.html Style guides can lead to product loyalty and enhance usability

47 47

48 Default control styles rendered by Safari on iphone 48

49 49

50 50

51 51

52 52

or example, the World Clock function of the built-in Clock application (shown in Figure 3-6) uses the same style of button and the same fonts and font attributes used in many other built-in

53 or example, the World Clock function of the built-in Clock application (shown in Figure 3-6) uses the same style of button and the same fonts and font attributes used in many other built-in applications. In addition, World Clock displays the user-selected locations in a scrollable list, which works like the lists in other built-in applications. Consistency of appearance and function helps users know what to expect when they tap a button or see a list. 53

54 Roles of Guidelines: It is not possible to learn how to design user interfaces just by reading a book of guidelines But guidelines are useful in many ways: raising awareness, assisting in choices and offering strategies supporting evaluation (we can use guidelines as usability checklists) Assisting in choices: e.g. locate the command line at the bottom of the screen unless it is clear that the user s gaze will be elsewhere Offering strategies: suggest new ways of doing things, e.g.

55 Assisting in choices: e.g. locate the command line at the bottom of the screen unless it is clear that the user s gaze will be elsewhere Offering strategies: suggest new ways of doing things, e.g. page oriented scrollbars, shows number of pages in the scrollbar as it scrolls through the document When your application organizes data logically into pages, provide page oriented scroll bars. 55

56 We need examples to know how to apply them (not always supplied or relevant) e.g. reduce search times by minimizing the # of groups of items while designing each group to subtend a visual angle as close as possible to 5 degrees Conflict example: - use a logical order (if one exists) to help guide users through the process - Put the most important or frequently used functions at the top of the menu 56

57 57

58 58

59 Improve this error message? 59

60 60

61 61

62 62

63 63

64 From WCAG 2.0 Guidelines: The W3C is the world wide web consortium Guidelines themselves are more accessible in version 2.0 Let s dive in. 64

65 65

66 66

67 67

68 68

69 69

Human-Computer Interaction. Chapter 2. What is HCI?

Human-Computer Interaction. Chapter 2. What is HCI? Human-Computer Interaction Chapter 2 What is HCI? Overview 2.1 The Human 2.2 The Computer 2.3 The Interaction Models of Interaction Interaction Styles Elements of the WIMP Interface HCI 2.3.1 Models of