1 / 74

Today’s Topics

Today’s Topics. Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls. Prototyping. Prototyping. What is prototyping? Why do we prototype interface designs? What are some problems in prototyping?. ?. Prototyping in General. A modeling technique

rusty
Download Presentation

Today’s Topics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls

  2. Prototyping

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

  4. Prototyping in General • A modeling technique • Used in developing many products • An accurate presentation of all or selected aspects of the item being developed • Benefits • Testing the design • Time and cost savings

  5. Prototyping for HCI • HCI exists because of prototyping • Making the system visible • Users get a more accurate picture of the interface • Designers resolve many specific design issues • Making user thoughts and actions visible • Users can actually interact with the system • Designers can observe

  6. Possible Prototyping Pitfalls • Not detecting key problems • Model is incomplete • Testing is limited or not realistic • 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. Tools for Design • Representation Tools - Methods and software tools which allow user to represent the design • passive techniques • Prototyping Tools - Software tools which allow user to build a working version of the interface design • active techniques

  8. Passive Design Tools • Written descriptions • Tables • Storyboarding • Video envisionment • Demo programs • Wizard of OZ techniques

  9. Written Descriptions • Natural language descriptions of the design • Need for detail and structure • Great bedtime reading “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. Written Descriptions • 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. Tables • Represent design alternatives for particular aspects of a design • Provides an organizing tool when trying to represent all possible cases for a particular interaction

  12. Table Example • Table used to design mouse selections • Taken from early Xerox Star design work • 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. Table Example - Notation • Point - selects a point, i.e., a position between adjacent characters. Used for type in and as a destination for Move and Copy • Draw through - mouse button held down and selection drawn over, mouse button released.

  14. 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. Table Example

  16. Storyboarding • Sequence of screen displays • Represent results of a sequence of user actions • Can be videotaped or animated • Represent a running user interface.

  17. Example Storyboard Scenario for a Homebanking System

  18. Example Storyboard Scenario for a Homebanking System • Possible User Actions: • User selects telephone with double click on mouse • User selects checkbook with double click on mouse..

  19. Example Storyboard Scenario for a Homebanking System

  20. Storyboard Layout for Checkbook Selection Initial Display User Action Next Display SelectCheckbook

  21. Video Envisionments • Static representations of user interaction created • on computer screen • on paper • Sequence of these representations videotaped to simulate a working system

  22. Video Envisionments • technique shown to elicit more accurate user attitudes toward completely new designs • hard parts of prototyping task can be simulated

  23. Wizard of OZ techniques • Very rudimentary mockup of design created • 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. Wizard of OZ techniques • Example: the automatic secretary • fast typist generates words, corrections, etc., as user dictates memorandum • 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. Demo Programs • 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. Advantages:Passive Design Tools • Bring to light inconsistencies in the design of the interface • Bring to light large areas of the design that were under-specified • Quick inexpensive way to test out design early

  27. Advantages:Passive Design Tools • Illustrate complexity of an interface - if it is hard to represent, it will be hard for the user • Many designs can be quickly tested with the user

  28. Disadvantages:Passive Design Tools • Limit creativity - limits of the tools limit how the designer conceives the interface • May give us erroneous user information - interface presentation too limited

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

  30. Active Design Tools • Toolkits - tools for painting the screen and laying out sets of screen displays • User Interface Management Systems (UIMS) • Manages the complete design of the interface • Specifying user input and actions taken • Tying interface to application

  31. Toolkits • 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. Toolkits • 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. Menu Editor in Visual Basic

  34. Powerpoint is a Toolkit Calling up the Visual Basic Editor

  35. User Interface Management Systems • 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. Advantages: Active Design Tools • Real prototypes make it easier to study the user’s reactions to the design • Data collected from user studies is likely to be much more trustworthy • real details of user problems uncoverd

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

  38. Disadvantages:Active Design Tools • Take a large amount of startup time - more difficult to learn than a programming language • Can be expensive to purchase • Limit interface design to known conventions

  39. Disadvantages:Active Design Tools • Design compiles into very slow code • Give the designer featuritis - the disease of adding useless features to the interface

  40. Use of Prototyping Systems in Human-Computer Interaction • Prototypes used to test the design on users • Prototypes are quick ways to test out different design ideas • Prototypes serve as a precise interface design specification

  41. Screen-Based Controls(continued)

  42. PredefinedScreen-Based Controls • Command buttons • Text entry/read only • Selection controls We saw these last week

  43. Text Entry • Simple box • List box • Drop down list box

  44. Advanced Screen-Based Controls • Combination entry/selection • Presentation • Other Controls

  45. Combination Entry/Selection Controls • Spin box • Combination text boxes • Slider

  46. 0.5” Left Margin: Spin Box • One-line field • Up/down buttons • User can: • scroll through list • type into field

  47. Spin Box • Uses little room on screen • about the same as a regular text box • Good for single choices when: • infrequently selected or changed • only a few choices available • order of choices is predictable

  48. Combination Text Boxes • One-line text entry field • 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 • List box may drop down or pop up

  49. Combination Text Boxes • Takes some screen space • Always visible • Selection or typed entry • Unlimited number of choices • User may have to scroll to see them all • May allow choices not on the list • Good when frequent changes or large number of choices

More Related