Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 บทที่ 4 : Interaction Style. 2 Interaction style Command language Menus Form fill-in & spreadsheed Direct Manipulation.

Similar presentations


Presentation on theme: "1 บทที่ 4 : Interaction Style. 2 Interaction style Command language Menus Form fill-in & spreadsheed Direct Manipulation."— Presentation transcript:

1 1 บทที่ 4 : Interaction Style

2 2 Interaction style Command language Menus Form fill-in & spreadsheed Direct Manipulation

3 3 หลักการออกแบบ เลือกคำสั่งที่มีความหมาย คำย่อ คำสั่งต้องสั้น ให้ผู้ใช้ตอบ Y/N ให้ผู้ใช้ใช้ macro ได้

4 4 หลักการออกแบบเมนู ข้อความบนเมนูต้องสอดคล้องกับการทำงาน แบ่งกลุ่ม หลีกเลี่ยงออกแบบเมนูที่ยาวเกินไป การจัดลำดับของเมนู พิจารณาขนาดของหน้าจอ (window)

5 5 Task-related?

6 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 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 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 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 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 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 12 Menus & toolbars Be sure tooltips relate to menus’ wording Because without a little help, icons can be a challenge

13 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 14 Should menus disappear? Present vs Analyze –Search menu only visible in Present

15 15 Menus – Findability Most are right where you can see them –Sort of… Right-button menus require learning

16 16 Menus: Fast key access Use guideline keyboard shortcuts –Windows TM mandates a few Show keyboard shortcuts –How does Windows TM do this? Sometimes keyboard shortcuts are not faster

17 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 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 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 20 Menus for attributes

21 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 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 23 Menu controls for attributes How about a command to switch the attribute or state, rather than a checkbox? Turn OffOff On

24 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 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 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 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 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 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 30 Input fields: Editable? Microsoft Windows user interface guidelines – Then Microsoft Windows user interface guidelines – Vista

31 31 Input fields: Editable? Apple Macintosh user interface guidelines

32 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 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 34 Lotus Notes When does right button menu provide access to the person’s phone number? –Only sometimes

35 35 Direct Manipulation

36 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 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 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 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

40 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 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 42 สรุป ข้อดีข้อเสีย Interaction Design ข้อดีข้อเสีย Command line Menu Selection Form-Fill Direct Manipulation

43 43 ลักษณะของงานกับ interaction style ลักษณะงาน Interaction style ต้องการข้อมูลจำนวนมากเข้า มาในระบบ ข้อมูลมาจาก รายงาน ใบเสร็จ ที่มีรูปแบบเฉพาะ ให้แสดงข้อมูลเป็นแบบ ภาพเสมือน (visual) หรือเป็น object มีตัวเลือกหลากหลาย, ผู้ใช้ ต้องใช้ระบบเพื่อให้ช่วย ตัดสินใจได้อย่างหลากหลาย


Download ppt "1 บทที่ 4 : Interaction Style. 2 Interaction style Command language Menus Form fill-in & spreadsheed Direct Manipulation."

Similar presentations


Ads by Google