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

มี�ต้�วเลั�อกหลัากหลัาย , ผู้��ใช้�ต้�องใช้�ระบบเพิ��อให�ช้�วยต้�ด้สั่$นใจัได้�อย�างหลัากหลัาย