Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls Copyright 1999 all rights reserved Prototyping Copyright 1999 all rights reserved Prototyping What is prototyping? Why do we prototype interface designs? What.
Download ReportTranscript Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls Copyright 1999 all rights reserved Prototyping Copyright 1999 all rights reserved Prototyping What is prototyping? Why do we prototype interface designs? What.
Today’s Topics Prototyping Screen-Based Controls (cont.) Choosing Appropriate Controls Copyright 1999 all rights reserved Prototyping Copyright 1999 all rights reserved Prototyping What is prototyping? Why do we prototype interface designs? What are some problems in prototyping? ? Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved Passive Design Tools Written descriptions Tables Storyboarding Video envisionment Demo programs Wizard of OZ techniques Copyright 1999 all rights reserved 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.” Copyright 1999 all rights reserved 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.” Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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. 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 Copyright 1999 all rights reserved Table Example Button 1 Button 2 Button 3 Design 1 Point Design 2 Point C Draw through WS¶D Draw through CWS¶D Draw through Design 3 Point C Draw through WS¶D Draw through Design 4 Point CWS¶D Draw through Adjust Copyright 1999 all rights reserved Storyboarding Sequence of screen displays – Represent results of a sequence of user actions – Can be videotaped or animated – Represent a running user interface. Copyright 1999 all rights reserved Example Storyboard Scenario for a Homebanking System Copyright 1999 all rights reserved 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.. Copyright 1999 all rights reserved Example Storyboard Scenario for a Homebanking System Copyright 1999 all rights reserved Storyboard Layout for Checkbook Selection Initial Display User Action Next Display Select Checkbook Copyright 1999 all rights reserved Video Envisionments Static representations of user interaction created – on computer screen – on paper Sequence of these representations videotaped to simulate a working system Copyright 1999 all rights reserved Video Envisionments technique shown to elicit more accurate user attitudes toward completely new designs hard parts of prototyping task can be simulated Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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!!! Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved Menu Editor in Visual Basic Copyright 1999 all rights reserved Powerpoint is a Toolkit Calling up the Visual Basic Editor Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved Disadvantages: Active Design Tools Design compiles into very slow code Give the designer featuritis - the disease of adding useless features to the interface Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved Screen-Based Controls (continued) Copyright 1999 all rights reserved Predefined Screen-Based Controls Command buttons Text entry/read only Selection controls We saw these last week Copyright 1999 all rights reserved Text Entry Simple box List box Drop down list box Copyright 1999 all rights reserved Advanced Screen-Based Controls Combination entry/selection Presentation Other Controls Copyright 1999 all rights reserved Combination Entry/Selection Controls Spin box Combination text boxes Slider Copyright 1999 all rights reserved Spin Box One-line field Up/down buttons User can: Left Margin: 0.5” – scroll through list – type into field Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved 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 Copyright 1999 all rights reserved Slider Values show on a scale User drags slider arm to select May have: – Increment/decrement buttons – Text box for input and/or display of value Copyright 1999 all rights reserved Slider Good visual representation for values in a limited range on a continuum Not as precise as textual input – Best for discrete values – OK if high precision not needed Usually more complex than other controls Copyright 1999 all rights reserved Tabs Select sections of related information Fixed-width areas, text or graphic label Should have only one row Should appear to go deeper from L to R Copyright 1999 all rights reserved Workbook/Notebook A series of windows resembling a bound book Contains tabbed divider pages Copyright 1999 all rights reserved Scroll Bar Long rectangular area – Scroll area with slider box (elevator) – Arrows (anchors) at ends User can more view information than fits in display area Can be hard to use Copyright 1999 all rights reserved Presentation Controls Provide additional information – output only Tool tips Static text fields--labels Group boxes – Combined controls in one box Progress indicators Copyright 1999 all rights reserved Custom Controls Toolkits permit building other controls Can be confusing to users – More stuff to learn – May assume it’s a standard control General rules: – Avoid whenever possible! – If you must use, test extensively first! – Make them look distinctive Copyright 1999 all rights reserved Other Interaction Styles Three-dimensional space – Navigate with visualization aids Copyright 1999 all rights reserved Natural Language Promising for: – Voice input/output – Users with moderate computer skills • Users do not need to learn command syntax – Systems in special environments Problems – Natural language understanding (by computers) – Ambiguity • may require clarification dialog frequently Copyright 1999 all rights reserved Choosing the Appropriate Screen-Based Controls Copyright 1999 all rights reserved Interaction Styles General way a user communicates with a system Style affects usability of the interface Copyright 1999 all rights reserved Tullis & Kodimer Control Styles Direct Manipulation – movement Selection – picking Entry – typing Copyright 1999 all rights reserved Picking a Control Decide which style is appropriate Several controls exist for each style Usually one is the “best” choice – Fastest to use – Most accurate results – Preferred by users Copyright 1999 all rights reserved Choice Controls Radio buttons are fastest, most accurate, and most preferred for mutually exclusive choices (any size set) Check boxes are fastest and most preferred for nonexclusive choices (any size set) Copyright 1999 all rights reserved Combination Selection/Entry Radio buttons are generally faster & more accurate than drop-down combo boxes Consider “other” choice with text entry field Copyright 1999 all rights reserved Selecting a Value in a Range Best when all options always visible Revealing a whole list a once is better than scrolling Of the controls tested: – Spin button is most accurate – Text entry field is fastest & most preferred – Slider is worst option Copyright 1999 all rights reserved When to Permit Text Entry If the data is of unlimited size If the data is familiar If the data is easy to type correctly If typing is faster than choice selection If the user is an experienced typist Copyright 1999 all rights reserved Data Form Resembles familiar paper forms Structure simplifies data entry Problems – Visual layout and organization – Screen space Declaration of Academic Major Last Name: __________ First Name: __________ SSN: ___-__-____ Copyright 1999 all rights reserved Data Form Design Meaningful and consistent title and labels Logical grouping and sequencing of fields Visually appealing layout of form Error correction and prevention Marking of optional and unavailable fields Means for user to signal completion Copyright 1999 all rights reserved Dialogs as an Alternative Question-answer dialog – System poses a series of questions – User responds with yes/no or multiple choice Query-based dialog – Controlled syntax and terminology – Frequently used in database systems Copyright 1999 all rights reserved Summary of Control Choices Entry task Best Control Space Constraints Mutually exclusive Radio buttons Drop-down list box Non-exclusive Check boxes Multiple-selection list box Select or type a value Radio buttons with Drop-down “other” text entry field combination box Setting value within a range Spin button Text entry field Copyright 1999 all rights reserved Buttons vs. Menus Command Use Standard, provided by tool set 7+, can be grouped in hierarchy <7, used frequently, affect entire window 7+, used frequently, affect entire window Complex or used with other controls Sometimes used frequently; sometimes used infrequently Used frequently; have only two conditions Commands provided by tool set Menu bar & pull-downs Buttons in window Buttons in button bar Buttons in dialog box Buttons in dialog box Toggled menu item Copyright 1999 all rights reserved