Interaction Styles

Interaction Styles Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

Outline • Frameworks for Understanding Interaction • Coping with Complexity • Interaction Styles Dewan Tanvir Ahmed

Frameworks for Understanding Interaction • Execution/Evaluation Action Cycle (EEAC) • Interaction Framework Dewan Tanvir Ahmed

Frameworks for Understanding Interaction • A framework is basically a structure that provides a context for conceptualizing something (Interaction with computers) • We can use these frameworks to: • Structure the design process • Help us to identify problematic areas within the design • Help us to conceptualize the problem space as a whole Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) • Donald Norman (1990) The Design of Everyday Things • A significant contribution to the field of HCI • He describes Execution/Evaluation Action Cycle (EEAC) • The structure of an action has four basic part: • Goals • We begin with some idea of what we want to happen; this is our goal. • Execution • We must then execute an action in the world. • World • To execute and action, we must manipulate objects in the world. • Evaluation • Finally, we must validate our action and compare the results with our goal. Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) • Goals do not specify particular actions • Goals and intentions do not have a one-to-one, relationship Example • A person sitting on an armchair while reading a book …. • “Delete text” goal • Intention that involves the Edit menu • Intention that involves the Delete key • Each intention involves a sequence of actions Goal > Intention > Actions > Execution Intention defines the tasks to be performed, which require specific actions that must then be executed Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) • Evaluate Results • Perceive new state • Evaluation starts with our perception of the world. • Interpret what we perceive • This perception must then be interpreted according to our expectations. • Evaluate new state with goal • Then it is compared (evaluated) with respect to both our intentions and our goals. Perceive > Interpret > Evaluate Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) • Seven Stages of Action form – approximation model Dewan Tanvir Ahmed

Execution/Evaluation Action Cycle (EEAC) • The seven stages form a cycle • The cycle can be initiated at any point • Some goals are data-driven - initiated when an environmental event is perceived • The system keeps track of the current state of problem solution and looks for rules which will move that state closer to a final solution. • Data driven reasoning or forward chaining - an inference technique which uses IF THEN rules to deduce a problem solution from initial data; • Others are goal-driven - initiated when the person conceives of a new goal • Goal driven reasoning or backward chaining - an inference technique which uses IF THEN rules to repetitively break a goal into smaller sub-goals which are easier to prove; • Aim: pick the best choice from many enumerated possibilities • Example: identification problem, Diagnostic system as the aim of the system is to pick the correct diagnosis. Dewan Tanvir Ahmed

Gulf of Execution • The gap between the user’s goal and its computerized implementation. • Does the interface allows us to carry out the actions required by the intention? Goal= save a file Intention = use the file menu Action = click the save option • Is there a save option in the file menu? • If not there will be an gulf of execution between what we want to accomplish and what the system allows. • Thus our intention will be frustrated Dewan Tanvir Ahmed

Gulf of Evaluation • The gap between the computerized implementation of the user’s goal and its evaluation by the user Human Intentions Evaluations Computer Dewan Tanvir Ahmed

Minimize Gulfs • Given a particular interface design, how easily can you: • Determine the function of the device? • Determine what actions are possible? • Determine mapping from intention to physical movement? • Perform the action? • Determine whether the system is in the desired state? • Determine the mapping from system state to interpretation? • Determine what state the system is in? (Norman, 1990) Dewan Tanvir Ahmed

Interaction Framework (IF) • EEAC does not consider the system beyond the Interface • Abowdand Beale expanded on the EECA to include the system • IF breaks up the interaction into four main components! • System (S)—Uses its core language (computational attributes related to system state) • User (U)—Uses its task language (psychological attributes related to user state) • Input (I)—Uses its input language • Output (O)—Uses its output language O Output I Input Observation Presentation S U Performance Articulation Dewan Tanvir Ahmed

Interaction Framework / EECA • Execution Phase • Articulation—The user formulates a goal, which is then articulated using the input language. • Performance—The input language is translated into the core language (operations that the system will carry out). • Presentation—The system manifests the result of the core-language operations using the output language. • Evaluation Phase • Observation—The user interprets the results on the screen and reconciles them with the original goal. O Output I Input Observation Presentation S U Performance Articulation Dewan Tanvir Ahmed

Interaction Framework / EECA • Example - Draw a circle • Articulation • The user has to translate the task into the input language represented by the Interface according to interaction style • Command-line or pointing an icon and clicking in a GUI • Performance • The system uses data from the input language • User is not involved in the translation • For Circle task the system must know • What shape to draw • Where to draw, how big it should be, its border and fill colors • The input language is translated into the core language (operations that the system will carry out). • Presentation • The system must express altered state in the output language • Also need a communication to the user when system is involved internal processing • Status bar, hourglass icon • Observation • User interpret the output and evaluate it against the original goal Dewan Tanvir Ahmed

Coping with Complexity • Mental Models • Mapping • Semantic and Articulatory Distance • Affordances Dewan Tanvir Ahmed

Mental Model Dewan Tanvir Ahmed

Mental Models • A mental model is a cognitive representation of something that defines a logical and believable estimation as to how a thing is constructed or how it functions • Transparent objects expose their functions • Bicycles • Opaque objects hide their functions • Computers Dewan Tanvir Ahmed

Mental Models • Mental models are: • Unscientific—They are often based on guesswork and approximations. • Partial—They do not necessarily describe whole systems, just the aspects that are relevant to the persons who formulate them. • Unstable—They are not concrete formulations, but evolve and adapt to the context. • Inconsistent—They do not necessarily form a cohesive whole; some parts may be incompatible with other parts of the same model. • Personal—They are specific to each individual and are not universal concepts that can be applied generically. Dewan Tanvir Ahmed

Mental Models MAXIM Designs that align with a user’s mental model will be easier for him or her to use • How can we ascertain information about a user’s mental model? Dewan Tanvir Ahmed

Mapping • The concept of mapping describes how we make connections between things Proper mapping can increase the usability of an interface Arbitrary mapping Arbitrary mapping improved Natural mapping Use natural mapping whenever possible Dewan Tanvir Ahmed

Mapping • Mapping is a integral part of the way people interact with surroundings • Correct mapping leads to easy task completion • Incorrect mapping can lead to frustration and failure Dewan Tanvir Ahmed

Semantic and Articulatory Distance • Semantic Distance • The distance between what people want to do and the meaning of an interface element. • Articulatory Distance • The distance between the physical appearance of an interface element and what it actually means. • The difference between a picture and its meaning • Easily applied to icons. A person discarding trash =>a small Articulatory distance High Articulatory distance of Power button and its meaning because the picture is somewhat abstract Dewan Tanvir Ahmed

Affordances • The affordances of some interfaces can be intuitively understood: a steering wheel affords turning, and a door bell affords pushing. • These connections allow us to make predictions about the results of our actions and help us to create usable mental models. Dewan Tanvir Ahmed

Affordances • Affordance Confusion - when certain aspects of an object do not work in a way in which we assume they should • Norman considers an affordance to be a relationship between an object and a user, not a property of an object Text boxes are used as labels Dewan Tanvir Ahmed

Affordances • What may be an affordance to one person may not be to another • The perception of affordance fosters usability • The affordances a user may need must be present • Affordances must not contradict the user’s expectations Dewan Tanvir Ahmed

Interaction Styles • Command Line • Menu-Based Interface • Form Fill-In • Question and Answer • Direct Manipulation • Metaphors • Web Navigation • Three-Dimensional Environments • Zoomable Interface • Natural Language Dewan Tanvir Ahmed

Interaction Styles - Command Line • Command-line interfaces are fast and powerful. • Many commands are abbreviated • quick and efficient • Commands can be applied to many objects simultaneously • fast input • Some commands have multiple parameters that can be set and altered • precise and flexible Dewan Tanvir Ahmed

Interaction Styles - Command Line • Command Line and the EECA • Intention formation, specification of the action, and the execution stages are complex • Requires a rather accurate mental model of the computer’s internal processing • Ex: • move a file from one folder to another! • Alternative approach- Drag-and-drop! • Command Line and the Interaction Framework • Translating the user’s task language into the input language requires knowledge of the core language • The output language can be confusing for inexperienced users - there is very little feedback C:\VisualVM11\bin\visualvm – openjmx remote.host.com:1234 System error 1523 has occurred. An internal error occurred. C:\ Dewan Tanvir Ahmed

Interaction Styles - Command Line • Command Line and Articulatory Distance • Articulatory distance is large – WHY? • we are presented with only the command prompt No indication of functionality C:\java\bin\ Dewan Tanvir Ahmed

Interaction Styles - Command Line • Advantages of command-line interfaces: • Suitable for repetitive tasks • Advantageous for expert users • Offer direct access to system functionality • Efficient and powerful • Not encumbered with graphic controls • Low visual load • Not taxing on system resources Dewan Tanvir Ahmed

Interaction Styles - Command Line • Disadvantages of command-line interfaces: • Low command retention • Steep learning curve • High error rates • Heavy reliance on memory • Frustrating for novice users Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface • Menu-driven interfaces present users with sequential hierarchal menus that offer lists of functions. • Menes can be • Textual • With options presented in numbered choices • chosen by keying in the desired number • Graphical • Options are selected by arrow keys or pointing device Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface Menus are based on recognition as opposed to recall • Improved usability over command-line interface • No need to remember commands • Users search from a list of possible choices • List provides constraints • Appropriate for small screens (iPod) Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface • Menu-based interfaces and the EEAC • Menu constraints can help the user to form the proper intentions and specify the proper action sequence • Provide a context to evaluate the output language Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface • Menu-based interfaces and : • Articulatory Distance • Menu options create small articulatory distance • Mental Models • Menu construction has a direct impact on user’s mental model • Affordances • Menu elements present affordances • Button • Checkbox • links Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface • Most menus are a variation on a few basic categories: Single SequentialHierarchal Star network Web network Dewan Tanvir Ahmed

Interaction Styles - Menu-Based Interface • Advantages of menu-based interfaces: • Low memory requirements • Self-explanatory • Easy to undo errors • Appropriate for beginners • Disadvantages of menu-based interfaces: • Rigid and inflexible navigation • Inefficient for large menu navigation • Inefficient use of screen real estate • Slow for expert users Dewan Tanvir Ahmed

Interaction Styles - Form Fill-In • Similar to menu interfaces – present screens of information • Different than menu interfaces - used to capture information and proceed linearly not to navigate a hierarchical structure Dewan Tanvir Ahmed

Interaction Styles - Form Fill-In Always inform the user about the length of paged forms and where they are within the structure • Forms can be presented using • Single scrolling screens • Multiple linked pages • Form elements must be grouped logically • Include “You Are Here” indications Dewan Tanvir Ahmed

Interaction Styles - Form Fill-In Form elements must be unambiguously labeled to increase data integrity • Users must understand what data is required and what format should be used • Date information formats • 1/29/2005 • 29/1/2005, or • January 29, 2005? Dewan Tanvir Ahmed

Interaction Styles - Form Fill-In • Advantages of form fill-in interfaces: • Low memory requirements • Self-explanatory • Can gather a great deal of information in little space • Present a context for input information • Disadvantages of form fill-in interfaces: • Require valid input in valid format • Require familiarity with interface controls • Can be tedious to correct mistakes Dewan Tanvir Ahmed

Interaction Styles - Question and Answer • Question and answer interfaces are also called wizards. • They are restricting for expert users • They are easy for novice users • However, they may not know the required information Users must be able to cancel a menu without affecting the state of the computer Dewan Tanvir Ahmed

Interaction Styles - Question and Answer • Microsoft Add Network Place Wizard (a) Add Network Place wizard. (b) Select a service provider. (c) Address of the network place. Dewan Tanvir Ahmed

Interaction Styles - Question and Answer • Advantages of question and answer interfaces: • Low memory requirements • Self-explanatory • Simple linear presentation • Easy for beginners • Disadvantages of question and answer interfaces: • Require valid input supplied by user • Require familiarity with interface controls • Can be tedious to correct mistakes Dewan Tanvir Ahmed

Interaction Styles - Direct Manipulation • Coined by Ben Shneiderman (1982) • Describes Emerging Graphical User Interfaces Microsoft Windows XP Apple OS X Dewan Tanvir Ahmed

Interaction Styles - Direct Manipulation • The term Direct Manipulation sometimes misleading • Interface objects in GUI are done with a mouse device • Touch screen afford much more direct interaction • Have a look - a revolution in the world of HCI • http://www.perceptivepixel.com/ • Virtual Reality Environment – touch, lift and move around • Three criteria defined by Ben Shneiderman (1982) • Continuous representations of the objects and actions of interest with meaningful visual metaphors. • Physical actions or presses of labeled buttons instead of complex syntax. • Rapid, incremental, reversible actions whose effects on the objects of interest are visible immediately. Dewan Tanvir Ahmed

Interaction Styles - Direct Manipulation • Three phases in Direct Manipulation - Cooper, Reimann (2003) • Free Phase—How the screen looks before any user actions • Captive Phase—How the screen looks during a user action (click, click-drag, etc.) • Termination Phase—How the screen looks after a user action Dewan Tanvir Ahmed

Interaction Styles - Direct Manipulation • Direct Manipulation and the EEAC • The range of possible intentions is consistently wide • Users usually have multiple options for specifying action sequences • Can be overwhelming of novice users • Provide multiple ways of executing action sequences • Open a file in a OS: • Several options Dewan Tanvir Ahmed

Interaction Styles