1 / 37

The Interaction

The Interaction. PASCA – PIO GUNADARMA UNIVERSITY DEC 2012. Overview. Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social Organizational. Task Analysis. Domain - area of expertise e.g. web site design

mickey
Download Presentation

The Interaction

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Interaction PASCA – PIO GUNADARMA UNIVERSITY DEC2012

  2. Overview • Interaction Models • understand human-computer communication • Ergonomics • Physical characteristics of interaction • Context • Social • Organizational

  3. Task Analysis • Domain - area of expertise • e.g. web site design • Concepts - important aspects • e.g. HTML, Java, JPEG, editor, browser • Task - operation within domain • e.g. design a web page • Intention - specific action toward goal • e.g. insert a picture here

  4. The human action cycle is a psychological model which describes the steps humans take when they interact with computer systems The three stages of the human action cycle (goal formation, execution and evaluation). The model is divided into three stages of seven steps in total, and is (approximately) as follows: Goal formation stage 1. Goal formation. Execution stage 2. Translation of goals into a set of (unordered) tasks required to achieve the goal. 3. Sequencing the tasks to create the action sequence. 4. Executing the action sequence. Evaluation stage 5. Perceiving the results after having executed the action sequence. 6. Interpreting the actual outcomes based on the expected outcomes. 7. Comparing what happened with what the user wished to happen.

  5. The Execution-Evaluation Cycle • Execution • Establish the goal • Form the intention • Specify the action sequence • Execute the action • Evaluation • Perceive the system state • Interpret the system state • Evaluate the system state

  6. Pressing a Button • Goal: See what’s underneath a window • Intention: Click the minimize button • Sequence: Find, move, click • Execute: Move hand, press finger down • Perceive: Open eyes, look • Interpret: Button pressed, window smaller • Evaluate: Mission accomplished

  7. Problems • Gulf of Execution • How do I do X? • Actions allowed by system should correspond to those intended by user • Gulf of Evaluation • What just happened? • Distance between physical presentation and the expectation of the user

  8. Interaction Framework Interface O Output observation presentation S Core U Task performance I Input articulation

  9. O Output observation presentation S Core U Task performance I Input articulation Turning on the Lights

  10. O Output observation presentation S Core U Task performance I Input articulation Turning on the Lights power photons lights circuit wiring flip switches

  11. O S U I The Framework and HCI Social Context Screen Design Ergonomics Dialog Design

  12. The Ergonomics of Arrangement • Functional • Related contols and displays grouped • Multiple device remote controls • Sequential • Controls and displays grouped by task order • Real menus • Frequency • Frequently used controls easier to access

  13. Physical Ergonomics • How comfortable is the user? • Position - fatigue • Temperature - concentration • Lighting - eyestrain or glare • Noise - hearing loss • Time - exposure • Color - eyestrain, color blindness

  14. Social Context • How does social context affect interaction? • Others - desire to impress, competition, fear of failure • Motivation - fear, allegiance, ambition, self-satisfaction • Inadequate systems cause frustration, lack of motivation

  15. Interaction Styles • What is the nature of the interface? • Command line • Menus • Natural language • Query dialog • Forms • WIMP (Window, Icon, Menu, Pointer)

  16. Command Line • First interactive dialog style • Direct - no parsing through choices • Flexible - options, iteration • Memory - commands must be memorized • Consistent, meaningful names • vocabulary of the user • Slow learning curve

  17. Menus • Shows available choices • Faster learning curve • Familiar from dining out • Indirect - parse through all options • Text or graphics • Keyboard or mouse • Press the Windows key

  18. Natural Language • Most attractive at first glance • Ambiguous sentences • The man hit the boy with the stick • Who is holding the stick • Ambiguous words • Cumbersome • Fast learning curve • Invoke the stupid paper clip

  19. Query Dialog • Questions and Answer • Multiple choice, true/false or codes • Fast learning curve • Restricted domains • E.g. setting up an O/S • Save the presentation to HTML

  20. Forms • Familiarity with paper forms • Slots to fill information in • Some slots blank • Easy movement (e.g. tab key, mouse) • Fast learning curve • Direct • Add student to rolodex

  21. WIMP • Windows • Icons • Menus • Pointers • Also… • Buttons • Pallettes • Dialog Boxes

  22. Windows • Multiple simultaneous tasks on screen • Layout policies • Tiling - adjacent windows • Cascading - overlapping windows • Scrollbars - displayed portion of contents • Decorations • title • minimize, maximize, close buttons

  23. Icons • Simple pictoral representations • Minimized windows • System elements • Garbage can • Floppy disk • Folder • Globe

  24. Pointers • Manifestation of the mouse on the screen • Basically a moving icon • shape indicates mode • arrow • hourglass • cross hairs • hot spot - pixel that pointer pointing at

  25. Menus • Ordered lists of operations • Selected item is highlighted • Cascading sub-menus • Menu bar • horizontal menu • cascading vertical sub-menus • Popup menus

  26. More menus • Pinned menus • Keep popular items on the screen • Indicated with a thumbtack icon • Keyboard accelerators • Function keys, alt-keys • Efficient expert operation • Pie menus

  27. Menu Organization • How are menu items organized • Importance • Frequency • Separate opposite functionality • Hick’s Law, describes the time it takes for a person to make a decision as a result of the possible choices he or she has. Time to decide = .15 lg(choices+1) seconds

  28. Buttons • One item menus • Individual buttons • Push button - invokes a command • Toggle button - changes state when clicked • Button groups • Radio buttons - only one selected • Check boxes - any combination

  29. Toolbars • Collections of small buttons • Functionally a menu of icons • Customizable • Trouble recognizing icons • place text next to/instead of icon • tool tips - text that appears when pointer still • Palettes - indicate mode

  30. Dialog Boxes • Interactive communication • Task oriented • Wizards • Alerts • Exclusive • On top

  31. Screen Design and Layout • What goes where • Presenting information • Aesthetics vs. utility • Knowing what to do • Culture

  32. Presenting Information • How is data best organized geometrically • Sorting • alphanumerically • size • first name/last name • Alignment • decimal point

  33. Aesthetics vs. Utility • How fancy can my interface be? • Foreground/Background • Background should not be distracting • High contrast • Counter • gap between foreground elements • User interest, novelty • Sales - the demo factor

  34. Knowing What to Do • How can we make the interface obvious to the user? • Style guides • Consistency • Familiarity • Affordances • handles lift • buttons push

  35. Culture • Not everyone is Western • Internationalization • Resources - allow customization • language • color • Icon meanings • meaning of check marks vs. x marks

More Related