430 likes | 588 Views
บทที่ 4 : Interaction Style. Command language Menus Form fill-in & spreadsheed Direct Manipulation. Interaction style. หลักการออกแบบ. เลือกคำสั่งที่มีความหมาย คำย่อ คำสั่งต้องสั้น ให้ผู้ใช้ตอบ Y/N ให้ผู้ใช้ใช้ macro ได้. หลักการออกแบบเมนู. ข้อความบนเมนูต้องสอดคล้องกับการทำงาน
E N D
Command language Menus Form fill-in & spreadsheed Direct Manipulation Interaction style
หลักการออกแบบ • เลือกคำสั่งที่มีความหมาย • คำย่อ • คำสั่งต้องสั้น • ให้ผู้ใช้ตอบ Y/N • ให้ผู้ใช้ใช้ macro ได้
หลักการออกแบบเมนู • ข้อความบนเมนูต้องสอดคล้องกับการทำงาน • แบ่งกลุ่ม • หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป • การจัดลำดับของเมนู • พิจารณาขนาดของหน้าจอ(window)
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
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
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
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
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.
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
Menus & toolbars • Be sure tooltips relate to menus’ wording Because without a little help, icons can be a challenge
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?
Should menus disappear? • Present vs Analyze • Search menu only visible in Present
Menus – Findability • Most are right where you can see them • Sort of… • Right-button menus require learning
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
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
Guidelines: Dropdown menu • dropdown for • many choices • computed lists • Advantages • Work for well-ordered lists • Minimize screen real estate • Can provide quick keyboard access
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
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
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?
Menu controls for attributes • How about a command to switch the attribute or state, rather than a checkbox? Turn Off Off On Off On
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?
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
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
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
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
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
Input fields: Editable? Microsoft Windows user interface guidelines – Then Microsoft Windows user interface guidelines – Vista
Input fields: Editable? Apple Macintosh user interface guidelines
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
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
Lotus Notes Email • When does right button menu provide access to the person’s phone number? • Only sometimes
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
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
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
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/
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
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