4 interaction style
Skip this Video
Download Presentation
บทที่ 4 : Interaction Style

Loading in 2 Seconds...

play fullscreen
1 / 43

บทที่ 4 : Interaction Style - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'บทที่ 4 : Interaction Style' - kostya

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
interaction style
Command language


Form fill-in & spreadsheed

Direct Manipulation

Interaction style
  • เลือกคำสั่งที่มีความหมาย
  • คำย่อ
  • คำสั่งต้องสั้น
  • ให้ผู้ใช้ตอบ Y/N
  • ให้ผู้ใช้ใช้ macro ได้
  • ข้อความบนเมนูต้องสอดคล้องกับการทำงาน
  • แบ่งกลุ่ม
  • หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป
  • การจัดลำดับของเมนู
  • พิจารณาขนาดของหน้าจอ(window)
menus ubiquitous
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
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
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
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
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
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
Menus & toolbars
  • Be sure tooltips relate to menus’ wording

Because without a little help, icons can be a challenge

should menu items disappear
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
Should menus disappear?
  • Present vs Analyze
    • Search menu only visible in Present
menus findability
Menus – Findability
  • Most are right where you can see them
    • Sort of…
  • Right-button menus require learning
menus fast key access
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
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
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
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
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
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 attributes23
Menu controls for attributes
  • How about a command to switch the attribute or state, rather than a checkbox?

Turn Off





  • 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
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 in26
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
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
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
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
Input fields: Editable?

Microsoft Windows user interface guidelines – Then

Microsoft Windows user interface guidelines – Vista

input fields editable31
Input fields: Editable?

Apple Macintosh user interface guidelines

form fillin components
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
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
Lotus Notes Email
  • When does right button menu provide access to the person’s phone number?
    • Only sometimes
direct manipulation paradigm
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
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
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
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


problems with direct manipulation 1
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
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