4 interaction style
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
4 interaction style l.jpg

บทที่ 4: Interaction Style

Interaction style l.jpg

Command language


Form fill-in & spreadsheed

Direct Manipulation

Interaction style

Slide3 l.jpg

  • เลือกคำสั่งที่มีความหมาย

  • คำย่อ

  • คำสั่งต้องสั้น

  • ให้ผู้ใช้ตอบ Y/N

  • ให้ผู้ใช้ใช้ macro ได้

Slide4 l.jpg

  • ข้อความบนเมนูต้องสอดคล้องกับการทำงาน

  • แบ่งกลุ่ม

  • หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป

  • การจัดลำดับของเมนู

  • พิจารณาขนาดของหน้าจอ(window)

Menus ubiquitous l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Menus & toolbars

  • Be sure tooltips relate to menus’ wording

Because without a little help, icons can be a challenge

Should menu items disappear l.jpg
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 l.jpg
Should menus disappear?

  • Present vs Analyze

    • Search menu only visible in Present

Menus findability l.jpg
Menus – Findability

  • Most are right where you can see them

    • Sort of…

  • Right-button menus require learning

Menus fast key access l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Menu controls for attributes

  • How about a command to switch the attribute or state, rather than a checkbox?

Turn Off





Questions l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Input fields: Editable?

Microsoft Windows user interface guidelines – Then

Microsoft Windows user interface guidelines – Vista

Input fields editable31 l.jpg
Input fields: Editable?

Apple Macintosh user interface guidelines

Form fillin components l.jpg
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 l.jpg
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 l.jpg
Lotus Notes Email

  • When does right button menu provide access to the person’s phone number?

    • Only sometimes

Direct manipulation paradigm l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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