Transcript GUI Design - Kasetsart University

บทที่ 4 : Interaction Style
1
Interaction style
•
•
•
•
Command language
Menus
Form fill-in & spreadsheed
Direct Manipulation
2
หลักการออกแบบ
•
•
•
•
•
เลือกคาสั่งที่มีความหมาย
คาย่อ
คาสั่งต้องสั้น
ให้ผใู้ ช้ตอบ Y/N
ให้ผใู้ ช้ใช้ macro ได้
3
หลักการออกแบบเมนู
•
•
•
•
•
ข้อความบนเมนูตอ้ งสอดคล้องกับการทางาน
แบ่งกลุ่ม
หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป
การจัดลาดับของเมนู
พิจารณาขนาดของหน้าจอ(window)
4
Task-related?
5
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
6
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
7
Breadth vs. Depth on the Web
• 512 items from Encarta encyclopedia in these structures:
– 8x8x8, 16x32, 32x16
Web Page Design: Implications of
– no download delays
Memory, Structure and Scent For
• Results
Information Retrieval. Larson and
Czerwinski, CHI 98
– 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
8
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
9
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.
10
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
11
Menus & toolbars
• Be sure tooltips relate to menus’ wording
Because without a little help,
icons can be a challenge
12
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?
13
Should menus disappear?
• Present vs Analyze
– Search menu only visible in Present
14
Menus – Findability
• Most are right where you can see them
– Sort of…
• Right-button menus require learning
15
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
16
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
17
Guidelines: Dropdown menu
• dropdown for
– many choices
– computed lists
• Advantages
– Work for well-ordered lists
– Minimize screen real estate
– Can provide quick keyboard access
18
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
19
Menus for attributes
20
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
21
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?
22
Menu controls for attributes
• How about a command to switch the attribute or
state, rather than a checkbox?
Turn Off
Off
On
Off
23
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?
24
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
25
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
26
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
27
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
28
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
29
Input fields: Editable?
Microsoft Windows user interface guidelines – Then
Microsoft Windows user interface guidelines – Vista
30
Input fields: Editable?
Apple Macintosh user interface guidelines
31
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
32
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
33
Lotus Notes Email
• When does right button menu provide access to
the person’s phone number?
– Only sometimes
34
Direct Manipulation
35
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
36
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
37
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
38
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/
39
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
40
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
41
สรุ ป ข้อดีขอ้ เสี ย
Interaction Design
ข้อดี
Command line
Menu Selection
Form-Fill
Direct Manipulation
42
ข้อเสี ย
ลักษณะของงานกับ interaction style
ลักษณะงาน
Interaction style
ต้องการข้อมูลจานวนมากเข้ามาในระบบ
ข้อมูลมาจาก รายงาน ใบเสร็จ ที่มีรูปแบบ
เฉพาะ
ให้แสดงข้อมูลเป็ นแบบภาพเสมือน
(visual) หรื อเป็ น object
มีตวั เลือกหลากหลาย , ผูใ้ ช้ตอ้ งใช้ระบบ
เพื่อให้ช่วยตัดสิ นใจได้อย่างหลากหลาย
43