บทที่ 4 : Interaction Style
description
Transcript of บทที่ 4 : Interaction Style
1
บทท�� 4 : Interaction Style
2
Interaction style
• Command language• Menus• Form fill-in & spreadsheed• Direct Manipulation
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’ wordingBecause 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 Off OnOn
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
สั่ร#ป ข้�อด้�ข้�อเสั่�ยInteraction Design ข้�อด้� ข้�อเสั่�ย
Command line
Menu Selection
Form-Fill
Direct Manipulation
43
ลั�กษณะข้องงานก�บ interaction style
ลั�กษณะงาน Interaction style
ต้�องการข้�อมี�ลัจั�านวนมีากเข้�ามีาในระบบข้�อมี�ลัมีาจัาก รายงาน ใบเสั่ร+จั ท��มี�ร�ปแบบเฉพิาะให�แสั่ด้งข้�อมี�ลัเป-นแบบภาพิเสั่มี�อน(visual) หร�อเป-น object
มี�ต้�วเลั�อกหลัากหลัาย , ผู้��ใช้�ต้�องใช้�ระบบเพิ��อให�ช้�วยต้�ด้สั่$นใจัได้�อย�างหลัากหลัาย