Presentation is loading. Please wait.

Presentation is loading. Please wait.

Copyright 1999 all rights reserved Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls.

Similar presentations


Presentation on theme: "Copyright 1999 all rights reserved Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls."— Presentation transcript:

1 Copyright 1999 all rights reserved Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls

2 Copyright 1999 all rights reserved Prototyping

3 Prototyping n What is prototyping? n Why do we prototype interface designs? n What are some problems in prototyping? ?

4 Copyright 1999 all rights reserved Prototyping in General n A modeling technique –Used in developing many products –An accurate presentation of all or selected aspects of the item being developed n Benefits –Testing the design –Time and cost savings

5 Copyright 1999 all rights reserved Prototyping for HCI n HCI exists because of prototyping n Making the system visible –Users get a more accurate picture of the interface –Designers resolve many specific design issues n Making user thoughts and actions visible –Users can actually interact with the system –Designers can observe

6 Copyright 1999 all rights reserved Possible Prototyping Pitfalls n Not detecting key problems –Model is incomplete –Testing is limited or not realistic n Adverse impact on users –Users don’t understand the interface –Prototype promises more than the system delivers –Users expect rapid delivery after seeing the prototype

7 Copyright 1999 all rights reserved Tools for Design n Representation Tools - Methods and software tools which allow user to represent the design – passive techniques n Prototyping Tools - Software tools which allow user to build a working version of the interface design – active techniques

8 Copyright 1999 all rights reserved Passive Design Tools n Written descriptions n Tables n Storyboarding n Video envisionment n Demo programs n Wizard of OZ techniques

9 Copyright 1999 all rights reserved Written Descriptions n Natural language descriptions of the design –Need for detail and structure –Great bedtime reading The first screen will have a five menu options which “The first screen will have a five menu options which will allow the user to select five different categories of restaurants. The categories will be: French, Italian, Indian, Chinese and Ethiopian.”

10 Copyright 1999 all rights reserved Written Descriptions n Descriptions can be interspersed with pictures showing the interface “The application will have one menu, called FILE. The FILE menu will have three menu items called OPEN, CLOSE and QUIT, as indicated in the following diagram.”

11 Copyright 1999 all rights reserved Tables n Represent design alternatives for particular aspects of a design n Provides an organizing tool when trying to represent all possible cases for a particular interaction

12 Copyright 1999 all rights reserved Table Example n Table used to design mouse selections –Taken from early Xerox Star design work n Some variables in mouse design –A mouse can point to something –A mouse can have one or more button –A mouse can have one or more click

13 Copyright 1999 all rights reserved Table Example - Notation n Point - selects a point, i.e., a position between adjacent characters. Used for type in and as a destination for Move and Copy n Draw through - mouse button held down and selection drawn over, mouse button released.

14 Copyright 1999 all rights reserved Table Example - Notation C - selects a character W - selects a word S - selects a sentence ¶ - selects a whole paragraph D - selects a whole document

15 Copyright 1999 all rights reserved Table Example

16 Copyright 1999 all rights reserved Storyboarding n Sequence of screen displays –Represent results of a sequence of user actions – n Can be videotaped or animated –Represent a running user interface.

17 Copyright 1999 all rights reserved Example Storyboard Scenario for a Homebanking System

18 Copyright 1999 all rights reserved Example Storyboard Scenario for a Homebanking System n Possible User Actions: –User selects telephone with double click on mouse –User selects checkbook with double click on mouse..

19 Copyright 1999 all rights reserved Example Storyboard Scenario for a Homebanking System

20 Copyright 1999 all rights reserved Storyboard Layout for Checkbook Selection Initial Display User Action Next Display Select Checkbook

21 Copyright 1999 all rights reserved Video Envisionments n Static representations of user interaction created –on computer screen –on paper n Sequence of these representations videotaped to simulate a working system

22 Copyright 1999 all rights reserved Video Envisionments n technique shown to elicit more accurate user attitudes toward completely new designs n hard parts of prototyping task can be simulated

23 Copyright 1999 all rights reserved Wizard of OZ techniques n Very rudimentary mockup of design created n Very fast human sits in next room observing user actions –brings up screen display that represents user’s request –or types envisioned computer response to request

24 Copyright 1999 all rights reserved Wizard of OZ techniques n Example: the automatic secretary –fast typist generates words, corrections, etc., as user dictates memorandum n Example: paper mockup done in HCI class –Student built display of CD covers for user to select on cardboard stand surrounding computer screen. As user selected CD cover, name of selection was typed on screen!!!

25 Copyright 1999 all rights reserved Demo Programs n Programs which allow the designer to create screen mockups –users are not allowed to type real input into the program –any key they type will typically bring on the next screen display

26 Copyright 1999 all rights reserved Advantages: Passive Design Tools n Bring to light inconsistencies in the design of the interface n Bring to light large areas of the design that were under-specified n Quick inexpensive way to test out design early

27 Copyright 1999 all rights reserved Advantages: Passive Design Tools n Illustrate complexity of an interface - if it is hard to represent, it will be hard for the user n Many designs can be quickly tested with the user

28 Copyright 1999 all rights reserved Disadvantages: Passive Design Tools n Limit creativity - limits of the tools limit how the designer conceives the interface n May give us erroneous user information - interface presentation too limited

29 Copyright 1999 all rights reserved Disadvantages: Passive Design Tools n Can be as difficult to use as programming n None of the tools help us recognize user problems - e.g., record user errors

30 Copyright 1999 all rights reserved Active Design Tools n Toolkits - tools for painting the screen and laying out sets of screen displays n User Interface Management Systems (UIMS) –Manages the complete design of the interface Specifying user input and actions takenSpecifying user input and actions taken Tying interface to applicationTying interface to application

31 Copyright 1999 all rights reserved Toolkits n Toolkits are collections of computer routines that help the programmer quickly define the user interface –windows with scroll bars –pull down menus –dialogue boxes –radio buttons

32 Copyright 1999 all rights reserved Toolkits n Visual Basic contains toolkits –The “Tools” menu contains the set of Visual Basic tool that can be used to quickly build a user interface –For example, the programmer can bring up the “Menu Editor” to design pull down and cascading menus for the user interface

33 Copyright 1999 all rights reserved Menu Editor in Visual Basic

34 Copyright 1999 all rights reserved Powerpoint is a Toolkit Calling up the Visual Basic Editor

35 Copyright 1999 all rights reserved User Interface Management Systems n User Interface Management Systems are complete software applications that allow a person to build a user interface –used for very complex interfaces, e.g., computer aided design –interface often designed simply by pasting objects on the screen and defining the relationships between the objects –prototype turned into final product

36 Copyright 1999 all rights reserved Advantages: Active Design Tools n Real prototypes make it easier to study the user’s reactions to the design n Data collected from user studies is likely to be much more trustworthy –real details of user problems uncoverd

37 Copyright 1999 all rights reserved Advantages: Active Design Tools n Some of the tools have intelligence that guides the interface design, e.g., points out a screen that is too complex n Tools often support the design of user help systems and tutorials

38 Copyright 1999 all rights reserved Disadvantages: Active Design Tools n Take a large amount of startup time - more difficult to learn than a programming language n Can be expensive to purchase n Limit interface design to known conventions

39 Copyright 1999 all rights reserved Disadvantages: Active Design Tools n Design compiles into very slow code n Give the designer featuritis - the disease of adding useless features to the interface

40 Copyright 1999 all rights reserved Use of Prototyping Systems in Human-Computer Interaction n Prototypes used to test the design on users n Prototypes are quick ways to test out different design ideas n Prototypes serve as a precise interface design specification

41

42 Copyright 1999 all rights reserved Screen-Based Controls (continued)

43 Copyright 1999 all rights reserved Predefined Screen-Based Controls n Command buttons n Text entry/read only n Selection controls We saw these last week

44 Copyright 1999 all rights reserved Text Entry n Simple box n List box n Drop down list box

45 Copyright 1999 all rights reserved Advanced Screen-Based Controls n Combination entry/selection n Presentation n Other Controls

46 Copyright 1999 all rights reserved Combination Entry/Selection Controls n Spin box n Combination text boxes n Slider

47 Copyright 1999 all rights reserved Spin Box n One-line field n Up/down buttons n User can: –scroll through list –type into field 0.5” Left Margin:

48 Copyright 1999 all rights reserved Spin Box n Uses little room on screen –about the same as a regular text box n Good for single choices when: –infrequently selected or changed –only a few choices available –order of choices is predictable

49 Copyright 1999 all rights reserved Combination Text Boxes n One-line text entry field n Scrolling list box shows options –Attached immediately below entry field –User may select from list box –Choices are mutually exclusive – May permit new values to be typed in to entry field n List box may drop down or pop up

50 Copyright 1999 all rights reserved Combination Text Boxes n Takes some screen space –Always visible n Selection or typed entry n Unlimited number of choices –User may have to scroll to see them all –May allow choices not on the list n Good when frequent changes or large number of choices

51 Copyright 1999 all rights reserved Slider n Values show on a scale n User drags slider arm to select n May have: –Increment/decrement buttons –Text box for input and/or display of value

52 Copyright 1999 all rights reserved Slider n Good visual representation for values in a limited range on a continuum n Not as precise as textual input –Best for discrete values –OK if high precision not needed n Usually more complex than other controls

53 Copyright 1999 all rights reserved Tabs n Select sections of related information n Fixed-width areas, text or graphic label n Should have only one row n Should appear to go deeper from L to R

54 Copyright 1999 all rights reserved Workbook/Notebook n A series of windows resembling a bound book n Contains tabbed divider pages

55 Copyright 1999 all rights reserved Scroll Bar n Long rectangular area –Scroll area with slider box (elevator) –Arrows (anchors) at ends n User can more view information than fits in display area n Can be hard to use

56 Copyright 1999 all rights reserved Presentation Controls n Provide additional information –output only n Tool tips n Static text fields--labels n Group boxes –Combined controls in one box n Progress indicators

57 Copyright 1999 all rights reserved Custom Controls n Toolkits permit building other controls n Can be confusing to users –More stuff to learn –May assume it’s a standard control n General rules: –Avoid whenever possible! –If you must use, test extensively first! –Make them look distinctive

58 Copyright 1999 all rights reserved Other Interaction Styles n Three-dimensional space –Navigate with visualization aids

59 Copyright 1999 all rights reserved Natural Language n Promising for: –Voice input/output –Users with moderate computer skills Users do not need to learn command syntaxUsers do not need to learn command syntax –Systems in special environments n Problems –Natural language understanding (by computers) –Ambiguity may require clarification dialog frequentlymay require clarification dialog frequently

60

61 Copyright 1999 all rights reserved Choosing the Appropriate Screen-Based Controls

62 Copyright 1999 all rights reserved Interaction Styles n General way a user communicates with a system n Style affects usability of the interface

63 Copyright 1999 all rights reserved Tullis & Kodimer Control Styles n Direct Manipulation –movement n Selection –picking n Entry –typing

64 Copyright 1999 all rights reserved Picking a Control n Decide which style is appropriate n Several controls exist for each style n Usually one is the “best” choice –Fastest to use –Most accurate results –Preferred by users

65 Copyright 1999 all rights reserved Choice Controls n Radio buttons are fastest, most accurate, and most preferred for mutually exclusive choices (any size set) n Check boxes are fastest and most preferred for nonexclusive choices (any size set)

66 Copyright 1999 all rights reserved Combination Selection/Entry n Radio buttons are generally faster & more accurate than drop-down combo boxes n Consider “other” choice with text entry field

67 Copyright 1999 all rights reserved Selecting a Value in a Range n Best when all options always visible n Revealing a whole list a once is better than scrolling n Of the controls tested: –Spin button is most accurate –Text entry field is fastest & most preferred –Slider is worst option

68 Copyright 1999 all rights reserved When to Permit Text Entry n If the data is of unlimited size n If the data is familiar n If the data is easy to type correctly n If typing is faster than choice selection n If the user is an experienced typist

69 Copyright 1999 all rights reserved Data Form n Resembles familiar paper forms n Structure simplifies data entry n Problems –Visual layout and organization –Screen space Last Name: __________ First Name: __________ SSN: ___-__-____ Declaration of Academic Major

70 Copyright 1999 all rights reserved Data Form Design n Meaningful and consistent title and labels n Logical grouping and sequencing of fields n Visually appealing layout of form n Error correction and prevention n Marking of optional and unavailable fields n Means for user to signal completion

71 Copyright 1999 all rights reserved Dialogs as an Alternative n Question-answer dialog –System poses a series of questions –User responds with yes/no or multiple choice n Query-based dialog –Controlled syntax and terminology –Frequently used in database systems

72 Copyright 1999 all rights reserved Summary of Control Choices

73 Copyright 1999 all rights reserved Buttons vs. Menus

74


Download ppt "Copyright 1999 all rights reserved Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls."

Similar presentations


Ads by Google