1 / 43

บทที่ 4 : Interaction Style

บทที่ 4 : Interaction Style. Command language Menus Form fill-in & spreadsheed Direct Manipulation. Interaction style. หลักการออกแบบ. เลือกคำสั่งที่มีความหมาย คำย่อ คำสั่งต้องสั้น ให้ผู้ใช้ตอบ Y/N ให้ผู้ใช้ใช้ macro ได้. หลักการออกแบบเมนู. ข้อความบนเมนูต้องสอดคล้องกับการทำงาน

baba
Download Presentation

บทที่ 4 : Interaction Style

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. บทที่ 4: Interaction Style

  2. Command language Menus Form fill-in & spreadsheed Direct Manipulation Interaction style

  3. หลักการออกแบบ • เลือกคำสั่งที่มีความหมาย • คำย่อ • คำสั่งต้องสั้น • ให้ผู้ใช้ตอบ Y/N • ให้ผู้ใช้ใช้ macro ได้

  4. หลักการออกแบบเมนู • ข้อความบนเมนูต้องสอดคล้องกับการทำงาน • แบ่งกลุ่ม • หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป • การจัดลำดับของเมนู • พิจารณาขนาดของหน้าจอ(window)

  5. Task-related?

  6. Menus – ubiquitous • Attribute on/off • Option Buttons, check boxes • Mnemonic letters • Multiple-item Menus • Multiple-selection menus or check boxes • Pull-down or pop-up menus • Scrolling and two-dimensional menus • Embedded links • Iconic Menus, toolbars, or palettes

  7. Multiple menus, nested • Tree-structured Menus • E.g. familiar examples • Animal, vegetable, mineral • Fonts, size, style, spacing • Prefer breadth to depth • Depth limit: 3 • MS PowerPoint uses 2 max • Limits to breadth • Only a screen-width for menu bar

  8. Breadth vs. Depth on the Web • 512 items from Encarta encyclopedia in these structures: • 8x8x8, 16x32, 32x16 • no download delays • Results • 16 x 32 - best performance • 8 x 8 x 8 - worst performance • 32 x 16 - slight user preference • Discussion / Implications • Short term memory is only one factor • Limiting depth is more important than increasing breadth • Chunking is a likely important factor Web Page Design: Implications of Memory, Structure and Scent For Information Retrieval. Larson and Czerwinski, CHI 98

  9. Tabbed dialogs • Tabs for navigation only • Not for setting attributes • Only a few tabs allowed • This limits the expansion of the application/site • Subsets of properties for 1 object or members of a family of objects • How may rows of tabs? …One, one, or one

  10. Tabs with menus • A tab menu should still work as a tab. If the user clicks on Genres, he should go to the Genres screen. • If the tab menu still works as a tab, the user may have two places to click • the label to activate the tab or • the menu control to open the menu • Be sure your menu cues work and users understand to click on them.

  11. Toolbars are a menu • Toolbar’s functions should be a subset of menus • Toolbars are quick way to get to functionality of menu item • Icons can be quickly recognized and used

  12. Menus & toolbars • Be sure tooltips relate to menus’ wording Because without a little help, icons can be a challenge

  13. Should menu items disappear? • Windows dynamic menus • Standard guideline is to disable, not hide • Is recency of use a good enough heuristic? • It’s a Windows setting… • How many users can find that?

  14. Should menus disappear? • Present vs Analyze • Search menu only visible in Present

  15. Menus – Findability • Most are right where you can see them • Sort of… • Right-button menus require learning

  16. Menus: Fast key access • Use guideline keyboard shortcuts • WindowsTM mandates a few • Show keyboard shortcuts • How does WindowsTM do this? • Sometimes keyboard shortcuts are not faster

  17. Keyboard shortcuts • The best of recognition and command language? • Important when • Menus are familiar • Response time/display rates are slow • Single-letter menus with type-ahead • Supports a ‘command-language’ for expert users

  18. Guidelines: Dropdown menu • dropdown for • many choices • computed lists • Advantages • Work for well-ordered lists • Minimize screen real estate • Can provide quick keyboard access

  19. Dropdown menus – disadvantages • No recognition until option is visible • Can be tedious – especially with nested menus • Cascading secondary menus often too difficult • They close too soon • Users don’t see their option, and move on • Limit depth, prefer breadth • Invisibility hinders recognition

  20. Menus for attributes

  21. Menu controls for attributes • Checkbox • For a setting with a clear alternative • Option buttons • to make users aware of alternatives • for small # of choices • Dropdown/combo • To conserve screen real estate • Long is bad • Without clear organizing principle

  22. Guidelines: Option vs Checkbox • Option button when you need to name both states • Checkboxes • None, one, or many • Option buttons • One and only one • What are the rules for each?

  23. Menu controls for attributes • How about a command to switch the attribute or state, rather than a checkbox? Turn Off Off On Off On

  24. Questions • For menu items which are sometimes applicable, other times not - What are rules? • Remove & restore or enable & disable? • Same item, different places/names • Is this OK?

  25. Form Fill-in • Appropriate when • Content is user-generated • Many fields of data must be entered • Most information can be visible • Few instructions are required for many types of entries

  26. Form Fill-in • Users must be familiar with: • Field-label meanings • Keyboards • Use of TAB key or mouse to move the cursor • Use of the ENTER and/or RETURN key. • Permissible field contents • Error correction methods

  27. Form Fill-in Guidelines: 1 • Meaningful title • Familiar field labels • Consistent terminology and abbreviations • Comprehensible instructions • Visually appealing layout of the form • Optional / Required fields clearly marked • Visible space and boundaries for data-entry fields

  28. Form-Fill-in Guidelines: 2 • Logical grouping and sequencing of fields • Convenient cursor movement • Data is accepted & retained when the control loses focus • No matter how that happens • Efficiency • Sensible defaults (e.g. Quantity = 1, not 0) • Start form with focus in the appropriate field

  29. Form-Fillin Guidelines: 3 • ‘Business Rules’ must be made clear • Error handling • Error prevention • Correction for individual characters and entire fields • Error messages for unacceptable values • Explanatory messages for fields • Completion signal

  30. Input fields: Editable? Microsoft Windows user interface guidelines – Then Microsoft Windows user interface guidelines – Vista

  31. Input fields: Editable? Apple Macintosh user interface guidelines

  32. Form-Fillin Components • Specialized controls prevent datatype errors • Text fields • Regular • Coded Fields (“Masked Edit”) • Telephone numbers, Social-security numbers, Money • Special Data • Times, Dates • List and combo boxes • Combo vs dropdown

  33. Tables & grids • Two-dimensional organization • Display (output) or input interface • Can be used for List of items with attributes • Possibly a form fill-in paradigm • In-cell editing can be difficult • Focus is tricky • Keystroke/navigation behavior can differ from users’ expectations • Example is MS DataGridView

  34. Lotus Notes Email • When does right button menu provide access to the person’s phone number? • Only sometimes

  35. Direct Manipulation

  36. Direct Manipulation paradigm • Object-Action paradigm • Visual representations of domain objects • and object attributes (location, shapes, etc.) • Provide rapid response and display • Display results of an action immediately

  37. Direct Manipulation: Attributes • Visual, labeled icons/cursors for actions • Rapid, incremental changes • Easily reversible actions • User does not need to remember syntax • Order of actions not strictly enforced • Or not necessary to remember • One row per ‘object’, with attributes • Incorrect syntax is impossible

  38. Direct Manipulation: Benefits • Novices learn quickly • Intermittent users can retain concepts • Experts work rapidly • Error messages are rarely needed • Users see if their actions are furthering their goals • Users experience less anxiety • Users gain confidence and mastery

  39. Direct-Manipulation: Example 1 • Drag & Drop • Windows & Mac desktop displays • Windows Explorer • Moving text / contents in MS Word, Excel, etc. • Problems with modes • Graphical editing tools http://www.cs.umd.edu/hcil/spotfire/

  40. Problems with Direct Manipulation: 1 • Can only work with visible objects • Must select each object ‘by hand’ • Typing commands with keyboard may be faster • Too much mousing can hurt (Carpal Tunnel) • Keyboard equivalents are much appreciated • There may be no good place to put a mouse

  41. Problems with DM - 3 • Users must learn the graphical representations • The graphical representation may be misleading • High-level flowcharts and database-schema can become confusing • Need proper perceptual-motor tuning • Try scrolling accurately in Excel

  42. สรุป ข้อดีข้อเสีย

  43. ลักษณะของงานกับ interaction style

More Related