1 / 102

CS305: HCI in SW Development

CS305: HCI in SW Development. Readings: ID-Book Textbook Ch. 6, through page 240 for Exam 2 Website on “Duck Book” http://designinginterfaces.com/ . Where Are We?. We know about… Learning about users and tasks Conceptual models, mental models, metaphors, interaction styles/modes

mele
Download Presentation

CS305: HCI in SW Development

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. CS305: HCI in SW Development Readings: ID-Book Textbook Ch. 6, through page 240 for Exam 2 Website on “Duck Book” http://designinginterfaces.com/

  2. Where Are We? • We know about… • Learning about users and tasks • Conceptual models, mental models, metaphors, interaction styles/modes • Lo-fidelity prototyping • You can now use this to: • Part 2 of project • Next we want to get more detailed… • Plan, prototype and evaluate more of the high-level features of a new system • Closer to finished product • Part 3 of project

  3. Outline • Outline: • Designing overall UI flow • Windows • Widgets / Controls

  4. Overall UI Flow • Major UI elements are probably windows or screens (on handhelds) • What are they? How are they organized? • Do they “match” users’ mental models of how they want to achieve tasks? • Compare to SW architecture design • Major components and their roles • How they’re related • Save detailed design (inside modules) for later

  5. Goal of Modeling UI Flow • Identify major UI components (windows) • High-level description of their role • Interactions between these • Conditions? • Two levels possible • At conceptual design (more abstract) • At physical design (what will be windows)

  6. UIDE book’s Content Diagrams • Content diagram is: • lo-fi prototype that shows organization and structure of the UI • from the designer’s perspective (?) • In physical design, can be transformed into GUI or website or… • May not be a one-to-one match between this level of abstraction and final physical design

  7. Creating a Content Diagram • Need to know: • Primary tasks, objects, etc. for this UI • Probably want to have use-cases, scenarios, etc. • Then, • Identify containers and “task objects” • Decide which tasks go into each container • Define links that show navigation flow

  8. Content Diagrams: Containers • Container • an abstract representation of some part of a user’s work activity • includes functions required to do that activity • Various levels within the diagram • Main container should record • Vital tasks and Frequent tasks • “Lower-level” containers

  9. Content Diagrams: Links • Links • how the user will navigate in the UI between these functional areas • Single link: next container becomes primary focus • Double link: second container requires context of first container • Example: spell checking window in a word-processor • Links may have labels to indicate conditions on them

  10. Representing Containers UIDE book’s template Note: Objects are Task Objects

  11. Example Container

  12. Example Content Diagram

  13. Another Approach: UI Flow Diagrams • We can do less than this and still benefit • Prototype often called a UI Flow Diagram or Navigation Diagram in the Unified Process methodology • Post-its or boxes represent major UI elements (e.g. Windows) • Each has a title (or short description) and often an ID • ID used to refer to a more detailed diagram (perhaps done later) • Goals: • Get high-level overview • Trace through use-cases or scenarios

  14. Example: UI Flow Diagram • From: http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm

  15. At the End: Menu Trees • Menu trees often used as a form of user documentation • You can see how the earlier design representations lead to these • Forms of menu trees may indicate problems (see next slide)

  16. Forms of Menu Trees

  17. Menu Tree for an MP3 Player

  18. Summary on UI Flow • Plan overall structure of your major UI elements • Windows or screens • Menus (problably later) • Some lo-fi methods are quick and potentially useful • If you base these or evaluate these using your scenarios or use-cases

  19. UI Patterns

  20. Book: Patterns for Effective Interface Design • Interesting recent book! • Publisher’s site: http://www.oreilly.com/catalog/designinterfaces/index.html • Author’s page: http://designinginterfaces.com/ • Samples! • Book’s goal: document a collection of interface patterns • from large-scale idioms to small-scale controls

  21. Sample Chapter Titles • Information Architecture and Application Structure • Navigation, Signposts and Wayfinding • Layout of Page Elements • Actions and Commands • Showing Complex Data • etc.

  22. Example: Organizing Content • What might the following be? • Two-panel selector • Center-Stage • Extras on demand • One-window drill-down • Examples?

  23. Interaction Styles • Earlier we talked about interaction models (high-level, abstract) • These lead to specific interaction styles or modes • Command-line • Menu selection • Form fill-in • Direct Manipulation • Right now, can you discuss…? • When appropriate, when not • Pros and cons

  24. Direct Manipulation • Advantages • Disadvantages

  25. Direct Manipulation • Adv./Pros: • Great where program objects have a natural viz. • Easy to learn/remember • May follow a metaphor • Small memory load: Commands/objects/possibilities are visible • Good feedback • Safety: recover, prevent • Disadv./Cons • Lots of resources, screen space • Maybe bad for repetition, experts (see Menu) • Breaks down (eventually) • Can be mixed with others

  26. Direct Manipulation • Advantages • Users see task concepts visually • Easy to learn, remember • Avoids errors and provides recovery • Encourages exploration • Disadvantages • Requires graphic displays and continuous input devices • Icons and metaphors may have different meanings

  27. Command Line • Advantages • Disadvantages

  28. Command Line • Advantages/pros • Efficient, small commands, one task • Easy to extend • Maps well to command-oriented tasks • Small window, fewer GUI resources • Disadvantages/cons • High memory load (lot to learn, bad for novices, hard to learn) • Commands aren’t visible • Harder to have good/obvious feedback • hard to show status • Safety: errors due to mistyping

  29. Command Line • Advantages • versatile, flexible • appeals to experts • supports power users (macros, short cuts) • Disadvantages • requires training, memorization

  30. Menu Selection • Advantages • Disadvantages

  31. Menu Selection • Advantages/Pros • See options, organization, structured • Structured interaction to do a task • Object/action structure • Reduced memory load • Easy to learn/remember • Disadvantages/Cons • May be hard to do repetitive tasks • May need to repeat navigation through tree • Deep trees, complex • Misleading structure (mismatch) • Feedback • Hard to extend

  32. Menu Selection • Advantages • Easy to learn • Fewer keystrokes than command line • Structures commands, decision making • Good for infrequent users • Disadvantages • Perhaps too many menus, too complex • May slow frequent users • Consumes screen space

  33. Form Fill-In • Advantages • Disadvantages

  34. Form Fill-In • Advantages/Pros • Safety! can’t leave out, wrong format • Good for standardized input, so good feedback, good for repetition/efficiency • Easy to learn if closest to real-world • Disadvantages/Cons • Very inflexible • If chaging an object, maybe less feedback (limited input of data, not manipulation) • Maybe hard to generalize for different nationalities, situations • Takes up a lot of screen

  35. Form Fill-In • Advantages • Simplifies data entry • May require some training • Assist users and prevents errors • Disadvantages • Consumes screen space

  36. Can these be blended? • Of course (duh)! • Examples and rationale?

  37. Windows • We know a lot about these already, eh? • Primary Windows • Secondary Windows • modal vs. modeless • dialog boxes • configuration, tabs • Mouse focus

  38. Organizing a Windowing Interface A window is a container that designers use to organize the information that users see in an application • Window interface actions include • Open action • Close action • Resize action • Move action • Bring forward or activation

  39. Multiple Windows Design • Advantages • Windows optimize the use of limited display space: • More information can be accessible • Users can use multiple sources on screen simultaneously to complete a task: • They give the user freedom to multitask • Windowing Systems allow standardization of interfaces across many applications • The user moves easily between applications and quickly learns to use new applications. • Automatic facilities for organizing window working sets: • save time and make large collections of windows easier to manage • They lend themselves to direct manipulation

  40. Multiple Windows Design • Disadvantages: • Users perform some tasks slower • Due to the need to switch windows • Due to getting lost • Display screen size and resolution are limitations • Time can be lost in rearranging windows • User can be confused by user switches context

  41. Window/Screen design • Two aspects: • How to split things across screens • moving around within and between screens • how much interaction per screen? • serial or workbench style? • Individual screen design • white space: balance between enough information/interaction and clarity • grouping items together: separation with boxes? lines? colors?

  42. Screen design: splitting functions across screens • Task analysis as a starting point • Each screen contains a single simple step? • Frustration if too many simple screens • Keep information available: multiple screens open at once

  43. Screen design: individual screen design • Draw user attention to salient point, e.g. colour, motion, boxing • Animation is very powerful but can be distracting • Good organization helps: grouping, physical proximity • Trade off between sparse population and overcrowding

  44. Information display • Relevant information available at all times • Different types of information imply different kinds of display • Consistency between paper display and screen data entry

  45. Types of Windows • Primary window: • is a window in which the user's main interaction with the data or document takes place • An application can use any number of primary windows, which can be opened, closed, minimized, or resized independently

  46. Types of Windows • Secondary window: • is a supportive window that is dependent on • a primary window or • another secondary window

  47. Types of Secondary Windows • Message boxes • Often modal: must exit or OK before continuing • Dialog boxes • Enter additional information • Sometimes modal, sometimes modeless • Comments?

  48. Types of Windows • Utility window: • is a window whose contents affect an active primary window • Unlike secondary windows, utility windows remain open when primary windows are closed or minimized. • e.g. tool palette that is used to select a graphic tool.

  49. Types of Windows • Plain window: • is a window with no title bar or window controls • typically used for splash screens

More Related