1 / 53

Human-Computer Interaction

Human-Computer Interaction. Interaction Styles. Lecture Overview. Linguistic Command-line interaction Text-based natural language Key-modal Question-and-answer Function-key interaction Menu-based interaction Hypermedia Direct manipulation Forms Graphical direct manipulation.

ranae
Download Presentation

Human-Computer 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. Human-Computer Interaction Interaction Styles

  2. Lecture Overview • Linguistic • Command-line interaction • Text-based natural language • Key-modal • Question-and-answer • Function-key interaction • Menu-based interaction • Hypermedia • Direct manipulation • Forms • Graphical direct manipulation

  3. Linguistic:Command Languages • Grammar • Verb first, then nouns and adjectives i.e. action - object • Can be fastest entry / retrieval of info • Usually offers high level of functionality • Main drawbacks: learnability and retainability • Strategies • Simple Command List e.g. VI • Command Plus Arguments e.g copy filea fileb • Commands plus options and arguments e.g Print/queue=localprinter/copies=3 my.dat

  4. Linguistic:Natural Language • Convenient • Great expressive power • BUT problem of AMBIGUITY in unconstrained natural language • ‘The house was built by the river’ • Scope: ‘Grave financial and other hardship’ • Knowledge of context often essential • Wartime report: “German push bottles up allies’ • Cleaning lady earns £70, MD earns £80,000 • Current implementations of NL interfaces operate in restricted domains • e.g. Database access

  5. Key-modal:Question and Answer • Questions, one at a time, in text form • Suited to short data entries e.g. wizards • Limited variation in sequence • User needs little training • Limited support for correcting errors in previous entries • Generally slow to use

  6. Key-modal:Function-Key Interaction • Suit use in public places e.g. ATM • Usually strict sequences of operation - can model with state transition diagrams • Special-purpose input technology • Keypads • Physical buttons e.g. VCRs • Touchscreens

  7. Key-modal:Dedicated-Key Interaction

  8. Key-modal:Button Interaction

  9. Key-modal:Menus (inc. Toolbars) F E V H • Available actions / objects • Recognition • Poor for complex actions or input • Cumbersome access to info • Selection techniques: • Pointer • Typed characters - support response chaining • Voice

  10. Key-modal:User Activity with Menu Form an intention or goal REPEAT Search for a target Consider an option Evaluate ref goal UNTIL option selected OR menu cancelled

  11. Key-modal:Menu Search and Comparison Operations • Identity Matching • Specific target • Fast matching • Class-Inclusion Matching • Top-level panels • Abstract categories • User must judge appropriateness • Equivalence Matching • Low-level panels • User has goal but not precise wording • User thinks up candidate names and synonyms

  12. Key-modal:Menu Feedback to User • Selectable options • If unavailable - fade • Do not omit options: • Inconsistent screen location • Does not facilitate browsing • Visual information • Option under pointer (highlighted) • Accelerator keys highlighted (underlined) • Shortcut keys - displayed • Options selected so far (tick mark) • Walking menu (arrow) • Dialogue box ( ... ) • Separator line • End of selection process - menu disappears

  13. Key-modal:Considerations within a Single Menu Panel • Overall aim - reduce search time • Choice of names or icons - main cause of errors is unclear meaning e.g. miscellaneous • Essential to test with users • Top level panels are most error prone • More general and abstract • Lower levels are more specific and concrete • Easy return to previous screen / menu

  14. Key-modal:Descriptor Line • Explanatory / descriptive text or list of options at next level of hierarchy • Significant help in understanding meaning • Increases search time • Takes up screen space

  15. Key-modal:Organisation on a Single Panel • Number of options • No ‘right’ number, but 10 is the maximum BT recommend • Grouping Strategies - reduce search time and depth of hierarchy • Categorical • Conventional e.g. days of week • Frequency of use • Importance • Sequence of use • Alphabetical • Rule of thumb guideline: • Number of groups per panel = SQRT (options) • As hierarchy grows, transparency reduces

  16. Menus: General Points • Accelerator keys - not for quit or logoff • Irreversible options should not come first or next to (esp. not below) frequently used options

  17. Organisation between Panels • Navigation problem • Getting lost • Using inefficient pathway to goal • Tradeoff between breadth and depth • Depth increases navigation problem • Testing by users essential

  18. Menus: Non-Standard Styles

  19. Hypermedia: MemexVanevar Bush (1945) "As we may think" article in Atlantic Monthly Identified the information storage and retrieval problem: new knowledge does not reach the people who could benefit from it • A device where individuals stores all his/her books/records/communications etc • Items can be retrieved rapidly through indexing, keywords, cross references,... • Can annotate text with margin notes, comments... • Can construct a trail (a chain of links) through the material and save it • An external memory! • Based on microfilm records - not implemented

  20. Key-modal:Hypermedia • Hypertext / hypergraphics include embedded menus • Structure - directed graph, organized hierarchically • Web browser - the ‘killer app’ appeared in the mid to late ’90s

  21. Forms (Inc. Spreadsheets) • Structured means for gathering information • Suitable where number of options / data values is small • Should be ‘modal’ if user must compete interaction with it before proceeding • Allow unconstrained order of field entry • If data is being transcribed from a paper form, on-screen form should have similar layout

  22. Forms: Main Field Types • User-typed strings • Validated • Indicate required syntax e.g. mm/dd/yy • Unvalidated • User choices from a list • Default values (easy to provide) • Required and optional values • Distinguish by appearance and/or location • Dependent values • System can enforce interdependencies e.g. If person is pregnant, then sex must be female

  23. Direct Manipulation(As used in GUIs) 3 Principles • Continuous representation of object of interest • Physical action instead of complex syntax • Rapid incremental and (usually) reversible operations • Impact on object of interest is immediately visible • Grammar • Noun(s) first, then verb i.e. object - action

  24. Benefits of Direct Manipulation • Novices can learn basic functions quickly (usually by demonstration, not formal instruction or reading a manual) • Experts can work very rapidly • Knowledgeable intermittent users can retain operational concepts • Error messages are rarely needed • Users can immediately see if their actions are furthering their goals • Users have reduced anxiety because the system is comprehensible and actions are (often) reversible

  25. Forms: Selective Reveal

  26. Forms: Selective Reveal

  27. Widget + Gesture

  28. Dynamic Queries • Apply the principles of direct manipulation to the database environment • visual presentation of the query's components • visual presentation of results • rapid, incremental and reversible control of the query • selection by pointing, not typing • immediate and continuous feedback • Queries entered intuitively - sliders or buttons • Continuously update results within 100 ms

  29. Next 6 Dynamic Query Slides from Ben Shneiderman,University of Maryland

  30. Dynamic Query Screen

  31. From Ahlberg & Truve, 1996

  32. Designing for The Web Web Navigation Structures: LINEAR Use this structure if you want to lead the user through a predetermined series of steps, or tasks. Many 'teaching' packages would have this structure, where the author will have broken down a learning objective into a series of, perhaps small, tasks which must be completed in a particular order. Typically, in learning packages of this kind, the learner would be tested for understanding or completion of each task before being allowed to proceed to the next step (this won't necessarily apply to Web sites with this structure).

  33. Web Navigation Structures: LINEAR variation • Here, suppose page A gives some information, then asks a test question. If the user gives the correct answer, they are passed straight on to page B. If, however, they give the wrong answer then they are pass to a 'remedial loop' represented by pages W and X. These pages might try to explain the concept more clearly, or point out where the user went wrong in their answer. They might then be passed back to page A to try again. • The other variation here is similar, but in this case it could be that the same, or a different, test question is included in page Z. Getting the right answer passes the user on to page D - the above just shows the simple cases and the structure could become much more complex. For example, if the user gave a wrong answer to the test question in page Z, what then? Should they be allowed to pass on to page D anyway, or go through yet another remedial loop, or passed back to an earlier page in the package?

  34. Web Navigation Structures: STAR This represents a structure which is used quite often in Web sites. Page A represent a 'Home' page containing, say, a menu from which the user can select a topic. Their selection will take them to one of the pages B, C, D, or E so the links spread out in a 'star' shape, with the Home page at its centre. These second level pages B, C etc. might have further links to other pages, perhaps using some structure other than the star. For example, in the above diagram, C, W, X and D, Y, Z represent linear structures.

  35. Web Navigation Structures: HIERARCHY • This is obviously very similar to the star structure but there are some slight differences. The above diagram might suggest that pages B, C , D can be accessed directly for page A, but it also suggests that, for example, C can be accessed from B, D from C, and so on : this kind of link is missing in the star structure. • Again a diagram such as this should prompt the designer to ask questions about the design. How do users ever return to the Home page? Where can they go after W or X? And so on.

  36. Web Navigation Structures: NETWORK • This is a very common structure on Web sites, and it can be the most confusing if not handled properly. Here, almost all of the pages can be accessed from a large number of other pages (maybe even from all of them). If the designer is not careful, a user will soon get 'lost' in such a site, not knowing how they got to a particular page or, worse still, not knowing how to get back to some familiar reference point. • Typical good design strategies that can help with these problems are : • Have a title, or heading, on each page showing its relationship to the topic of the package. • Use breadcrumbs to highlight navigation hierarchy trail and current path navigation depth • Use a 'navigation bar' on each page, with links to other main pages within the site.

  37. Intelligent Agents Direct Manipulation ê Indirect Management (Alan Kay) Human Computer Interaction Metaphor Change

  38. Intelligent Agents -Agent Types(Intelligent Agents Strategy, IBM) Administrative Agents • automating routine tasks such as email handling Librarian Agents • conducting intelligent searches of both public and private data Conversational Agents • allowing users to converse in natural language with the system and its applications Intermediary Agents • providing common services needed by other agents Consulting Agents • learn and use the system and its applications • execute complex tasks step by step

  39. ACTION(Assisting Carers using Telematics Interventions to meet Older persons Needs)

More Related