Human-Computer Interaction

1

Human-Computer InteractionHuman-Computer Interaction

Interaction StylesInteraction Styles

2

Lecture OverviewLecture Overview

• LinguisticLinguistic

• Command-line interactionCommand-line interaction

• Text-based natural languageText-based natural language

• Key-modalKey-modal

• Question-and-answerQuestion-and-answer

• Function-key interactionFunction-key interaction

• Menu-based interactionMenu-based interaction• HypermediaHypermedia

• Direct manipulationDirect manipulation

• Forms Forms

• Graphical direct manipulationGraphical direct manipulation

3

Linguistic:Linguistic:

Command LanguagesCommand Languages

• GrammarGrammar• Verb first, then nouns and adjectives i.e. action - objectVerb first, then nouns and adjectives i.e. action - object

• Can be fastest entry / retrieval of infoCan be fastest entry / retrieval of info

• Usually offers high level of functionalityUsually offers high level of functionality

• Main drawbacks: learnability and retainabilityMain drawbacks: learnability and retainability

• StrategiesStrategies• Simple Command List e.g. VISimple Command List e.g. VI

• Command Plus Arguments e.g copy filea filebCommand Plus Arguments e.g copy filea fileb

• Commands plus options and argumentsCommands plus options and arguments e.g e.g Print/queue=localprinter/copies=3 my.datPrint/queue=localprinter/copies=3 my.dat

4

Linguistic:Linguistic: Natural LanguageNatural Language

• ConvenientConvenient• Great expressive powerGreat expressive power• BUT problem of AMBIGUITY in unconstrained BUT problem of AMBIGUITY in unconstrained

natural languagenatural language• ‘‘The house was built by the riverThe house was built by the river’’• Scope: Scope: ‘‘Grave financial and other hardshipGrave financial and other hardship’’

• Knowledge of context often essentialKnowledge of context often essential• Wartime report: Wartime report: ““German push bottles up alliesGerman push bottles up allies’’• Cleaning lady earns £70, MD earns £80,000Cleaning lady earns £70, MD earns £80,000

• Current implementations of NL interfaces operate Current implementations of NL interfaces operate in restricted domainsin restricted domains

• e.g. Database accesse.g. Database access

5

Key-modal:Key-modal:

Question and AnswerQuestion and Answer

• Questions, one at a time, in Questions, one at a time, in text formtext form

• Suited to short data entries Suited to short data entries e.g. wizardse.g. wizards

• Limited variation in sequenceLimited variation in sequence

• User needs little trainingUser needs little training

• Limited support for correcting Limited support for correcting errors in previous entrieserrors in previous entries

• Generally slow to useGenerally slow to use

6

Key-modal:Key-modal: Function-Key InteractionFunction-Key Interaction

• Suit use in public places e.g. ATMSuit use in public places e.g. ATM

• Usually strict sequences of operation - can model Usually strict sequences of operation - can model with state transition diagramswith state transition diagrams

• Special-purpose input technologySpecial-purpose input technology• KeypadsKeypads

• Physical buttons e.g. VCRsPhysical buttons e.g. VCRs

• TouchscreensTouchscreens

7

Key-modal:Key-modal: Dedicated-Key InteractionDedicated-Key Interaction

8

Key-modal:Key-modal: Button InteractionButton Interaction

9

Key-modal:Key-modal: Menus (inc. Toolbars)Menus (inc. Toolbars)

• Available actions / objectsAvailable actions / objects

• RecognitionRecognition

• Poor for complex actions or Poor for complex actions or inputinput

• Cumbersome access to infoCumbersome access to info

• Selection techniques:Selection techniques:• Pointer Pointer

• Typed characters - support response Typed characters - support response chaining chaining

• VoiceVoice

F E V H

10

Key-modal:Key-modal: User Activity with MenuUser Activity with Menu

Form an intention or goalForm an intention or goal

REPEATREPEAT

Search for a targetSearch for a target

Consider an optionConsider an option

Evaluate ref goalEvaluate ref goal

UNTIL option selected ORUNTIL option selected OR

menu cancelledmenu cancelled

11

Key-modal:Key-modal: Menu Search and Comparison Menu Search and Comparison OperationsOperations

• Identity MatchingIdentity Matching• Specific targetSpecific target

• Fast matchingFast matching

• Class-Inclusion MatchingClass-Inclusion Matching• Top-level panelsTop-level panels

• Abstract categories Abstract categories

• User must judge appropriateness User must judge appropriateness

• Equivalence MatchingEquivalence Matching• Low-level panelsLow-level panels

• User has goal but not precise wordingUser has goal but not precise wording

• User thinks up candidate names and synonyms User thinks up candidate names and synonyms

12

Key-modal:Key-modal: Menu Feedback to UserMenu Feedback to User

• Selectable optionsSelectable options• If unavailable - fadeIf unavailable - fade• Do not omit options:Do not omit options:

• Inconsistent screen locationInconsistent screen location• Does not facilitate browsingDoes not facilitate browsing

• Visual informationVisual information• Option under pointer (highlighted)Option under pointer (highlighted)• Accelerator keys highlighted (underlined)Accelerator keys highlighted (underlined)• Shortcut keys - displayedShortcut keys - displayed• Options selected so far (tick mark) Options selected so far (tick mark) • Walking menu (arrow) Walking menu (arrow) • Dialogue box ( ... ) Dialogue box ( ... ) • Separator lineSeparator line

• End of selection process - menu disappearsEnd of selection process - menu disappears

13

Key-modal:Key-modal: Considerations within a Single Considerations within a Single Menu PanelMenu Panel

• Overall aim - reduce search timeOverall aim - reduce search time

• Choice of names or icons - main cause of errors Choice of names or icons - main cause of errors is unclear meaning e.g. miscellaneousis unclear meaning e.g. miscellaneous

• Essential to test with usersEssential to test with users

• Top level panels are most error proneTop level panels are most error prone• More general and abstractMore general and abstract

• Lower levels are more specific and concreteLower levels are more specific and concrete

• Easy return to previous screen / menuEasy return to previous screen / menu

14

Key-modal:Key-modal: Descriptor LineDescriptor Line

• Explanatory / descriptive text or list of options at Explanatory / descriptive text or list of options at next level of hierarchynext level of hierarchy

• Significant help in understanding meaningSignificant help in understanding meaning

• Increases search timeIncreases search time

• Takes up screen spaceTakes up screen space

15

Key-modal:Key-modal: Organisation on a Single PanelOrganisation on a Single Panel

• Number of optionsNumber of options• No No ‘‘rightright’’ number, but 10 is the maximum BT recommend number, but 10 is the maximum BT recommend

• Grouping Strategies - reduce search time and Grouping Strategies - reduce search time and depth of hierarchydepth of hierarchy

• CategoricalCategorical

• Conventional e.g. days of weekConventional e.g. days of week

• Frequency of useFrequency of use

• ImportanceImportance

• Sequence of useSequence of use

• AlphabeticalAlphabetical

• Rule of thumb guideline:Rule of thumb guideline:• Number of groups per panel = SQRT (options)Number of groups per panel = SQRT (options)

• As hierarchy grows, transparency reducesAs hierarchy grows, transparency reduces

16

Menus: General PointsMenus: General Points

• Accelerator keys - not for quit or logoffAccelerator keys - not for quit or logoff

• Irreversible options should not come first or next Irreversible options should not come first or next to (esp. not below) frequently used optionsto (esp. not below) frequently used options

17

Organisation between PanelsOrganisation between Panels

• Navigation problemNavigation problem• Getting lostGetting lost

• Using inefficient pathway to goalUsing inefficient pathway to goal

• Tradeoff between breadth and depthTradeoff between breadth and depth

• Depth increases navigation problemDepth increases navigation problem

• Testing by users essentialTesting by users essential

18

Menus: Non-Standard StylesMenus: Non-Standard Styles

19

Hypermedia: MemexHypermedia: MemexVanevar Bush (1945)Vanevar Bush (1945)

• A device where individuals stores all his/her A device where individuals stores all his/her books/records/communications etc books/records/communications etc

• Items can be retrieved rapidly through indexing, Items can be retrieved rapidly through indexing, keywords, cross references,... keywords, cross references,...

• Can annotate text with margin notes, Can annotate text with margin notes, comments... comments...

• Can construct a trail (a chain of links) through the Can construct a trail (a chain of links) through the material and save it material and save it

• An external memory! An external memory!

• Based on microfilm records - not implementedBased on microfilm records - not implemented

"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

20

Key-modal:Key-modal: HypermediaHypermedia

• Hypertext / Hypertext / hypergraphics include hypergraphics include embedded menusembedded menus

• Structure - directed Structure - directed graph, organized graph, organized hierarchicallyhierarchically

• Web browser - the Web browser - the ‘‘killer appkiller app’’ appeared in appeared in the mid to late the mid to late ’’90s90s

21

Forms (Inc. Forms (Inc. Spreadsheets) Spreadsheets)

• Structured means for gathering informationStructured means for gathering information

• Suitable where number of options / data values is smallSuitable where number of options / data values is small

• Should be Should be ‘‘modalmodal’’ if user must compete interaction with it if user must compete interaction with it before proceedingbefore proceeding

• Allow unconstrained order of field entryAllow unconstrained order of field entry

• If data is being transcribed from a paper form, on-screen If data is being transcribed from a paper form, on-screen form should have similar layoutform should have similar layout

22

Forms: Main Field Forms: Main Field TypesTypes

• User-typed stringsUser-typed strings• Validated Validated

• Indicate required syntax e.g. mm/dd/yyIndicate required syntax e.g. mm/dd/yy

• UnvalidatedUnvalidated

• User choices from a listUser choices from a list

• Default values (easy to provide)Default values (easy to provide)

• Required and optional valuesRequired and optional values• Distinguish by appearance and/or locationDistinguish by appearance and/or location

• Dependent valuesDependent values• System can enforce interdependencies e.g. If person is System can enforce interdependencies e.g. If person is

pregnant, then sex must be femalepregnant, then sex must be female

23

Direct ManipulationDirect Manipulation(As used in GUIs)(As used in GUIs)

• Continuous representation of object of interestContinuous representation of object of interest

• Physical action instead of complex syntaxPhysical action instead of complex syntax

• Rapid incremental and (usually) reversible Rapid incremental and (usually) reversible operationsoperations

• Impact on object of interest is immediately visibleImpact on object of interest is immediately visible

3 Principles

GrammarGrammarNoun(s) first, then verb i.e. object - actionNoun(s) first, then verb i.e. object - action

24

Benefits of Direct ManipulationBenefits of Direct Manipulation

• Novices can learn basic functions quickly (usually Novices can learn basic functions quickly (usually by demonstration, not formal instruction or reading by demonstration, not formal instruction or reading a manual)a manual)

• Experts can work very rapidly Experts can work very rapidly

• Knowledgeable intermittent users can retain Knowledgeable intermittent users can retain operational conceptsoperational concepts

• Error messages are rarely neededError messages are rarely needed

• Users can immediately see if their actions are Users can immediately see if their actions are furthering their goalsfurthering their goals

• Users have reduced anxiety because the system is Users have reduced anxiety because the system is comprehensible and actions are (often) reversiblecomprehensible and actions are (often) reversible

25

Forms: Selective RevealForms: Selective Reveal

26

Forms: Selective RevealForms: Selective Reveal

27

Widget + GestureWidget + Gesture

28

Dynamic QueriesDynamic Queries

• Apply the principles of direct manipulation to the Apply the principles of direct manipulation to the database environmentdatabase environment

• visual presentation of the query's componentsvisual presentation of the query's components

• visual presentation of resultsvisual presentation of results

• rapid, incremental and reversible control of the queryrapid, incremental and reversible control of the query

• selection by pointing, not typingselection by pointing, not typing

• immediate and continuous feedback immediate and continuous feedback

• Queries entered intuitively - sliders or buttonsQueries entered intuitively - sliders or buttons

• Continuously update results within 100 msContinuously update results within 100 ms

29

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

30

Dynamic Dynamic Query Query ScreenScreen

31

32

33

34

35

36

From Ahlberg & Truve, 1996

37

38

39

40

Designing for The WebDesigning for The Web

Web Navigation Structures:Web Navigation Structures:

LINEARLINEAR

Use this structure if you want to lead the user through a predetermined series of steps, 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 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 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, 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 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 being allowed to proceed to the next step (this won't necessarily apply to Web sites with this structure).with this structure).


LINEAR variationLINEAR variation

• Here, suppose page A gives some information, then asks a test question. If the user gives the correct 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 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 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 clearly, or point out where the user went wrong in their answer. They might then be passed back to page A to try again. 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 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 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 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 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?go through yet another remedial loop, or passed back to an earlier page in the package?


STARSTAR

This represents a structure which is used quite often in Web sites. Page A represent a 'Home' page 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 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. 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 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 structure other than the star. For example, in the above diagram, C, W, X and D, Y, Z represent linear structures. structures.


HIERARCHYHIERARCHY

• This is obviously very similar to the star structure but there are some slight differences. The above diagram might 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 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.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 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. the Home page? Where can they go after W or X? And so on.


NETWORKNETWORK

• This is a very common structure on Web sites, and it can be the most confusing if not handled properly. Here, 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 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, 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.worse still, not knowing how to get back to some familiar reference point.

• Typical good design strategies that can help with these problems are :Typical good design strategies that can help with these problems are :

a)a) Have a title, or heading, on each page showing its relationship to the topic of the package.Have a title, or heading, on each page showing its relationship to the topic of the package.

b)b) Use breadcrumbs to highlight navigation hierarchy trail and current path navigation depthUse breadcrumbs to highlight navigation hierarchy trail and current path navigation depth

c)c) Use a 'navigation bar' on each page, with links to other main pages within the site.Use a 'navigation bar' on each page, with links to other main pages within the site.

46

Intelligent AgentsIntelligent Agents

Direct ManipulationDirect Manipulation

Indirect ManagementIndirect Management

(Alan Kay)(Alan Kay)

Human Computer Interaction

Metaphor Change

Intelligent Agents -Intelligent Agents -Agent TypesAgent Types(Intelligent Agents Strategy, IBM)(Intelligent Agents Strategy, IBM)

Administrative AgentsAdministrative Agents

• automating routine tasks such as email handlingautomating routine tasks such as email handlingLibrarian AgentsLibrarian Agents

• conducting intelligent searches of both public and private dataconducting intelligent searches of both public and private dataConversational AgentsConversational Agents

• allowing users to converse in natural language with the system allowing users to converse in natural language with the system and its applicationsand its applications

Intermediary AgentsIntermediary Agents

• providing common services needed by other agentsproviding common services needed by other agentsConsulting AgentsConsulting Agents

• learn and use the system and its applicationslearn and use the system and its applications

• execute complex tasks step by stepexecute complex tasks step by step

ACTIONACTION(Assisting Carers using (Assisting Carers using

Telematics Interventions to Telematics Interventions to meet Older persons Needs)meet Older persons Needs)

Pervasive ComputingPervasive Computing

• Ulster working with Apple, Google Android, MS, IBM, Ulster working with Apple, Google Android, MS, IBM, Xybernaut, I+Xybernaut, I+

• One exemplar radically improves upon current One exemplar radically improves upon current paramedic on-site diagnostic information provisionparamedic on-site diagnostic information provision

• Others related to helping people with Dementia Others related to helping people with Dementia ‘‘navigate navigate their daytheir day’’

• Wireless telecoms - total unconstrained freedom of Wireless telecoms - total unconstrained freedom of movementmovement

• Other application areas include decision support in: Other application areas include decision support in: • Hospital wardsHospital wards

• G.P. house callsG.P. house calls

52

Choice of Interaction Style Choice of Interaction Style

• Starting point: range of activities to support e.g.Starting point: range of activities to support e.g.• Walk up and use - key modalWalk up and use - key modal

• Data entry - forms and command languageData entry - forms and command language

• Editing - direct manipulationEditing - direct manipulation

• Constrained by cost / hardware / software toolsConstrained by cost / hardware / software tools

• UserUser’’s abilities (e.g. typing) and knowledges abilities (e.g. typing) and knowledge

• There is no single There is no single ‘‘bestbest’’ style style

• Most interfaces are hybridsMost interfaces are hybrids

53

Lecture ReviewLecture Review

• LinguisticLinguistic

• Command-line interactionCommand-line interaction

• Text-based natural languageText-based natural language

• Key-modalKey-modal

• Question-and-answerQuestion-and-answer

• Function-key interactiionFunction-key interactiion

• Menu-based interactionMenu-based interaction• HypermediaHypermedia

• Direct manipulationDirect manipulation

• Forms Forms

• Graphical direct manipulationGraphical direct manipulation

Documents

Human-Computer Interaction