Foundations: Understanding Users and Interactions

Preeti Mishra

Course Instructor

Types of Users: User Research

Social scientists have long realized that human behaviours are too complex and subject to too many variables to rely solely on quantitative data to understand them.

There are 2 approaches for User Research: Quantitative Qualitative

Qualitative Research

Qualitative research helps us understand the domain, context and constraints of a product

It also quickly helps us identify patterns of behaviour among users and potential users of a product much more quickly and easily than would be possible with quantitative approaches.

Qualitative Research

In particular, qualitative research helps us understand:  Existing products, and how they are used Potential users of new or existing products, and how they

currently approach Activities and problems the new product design hopes to

address Technical, business, and environmental contexts--the domain--of the product to be designed

Vocabulary and other social aspects of the domain in question

Types of Qualitative Research

Stakeholder interviews Subject matter expert (SME) interviews User and customer interviews User observation/ethnographic field studies Literature review Product/prototype and competitive audit

Persona

persona

description of an ‘example’ user not necessarily a real person

use as surrogate user what would Betty think

details matter makes her ‘real’

Persona personas are fictional characters created to represent the

different user types that might use a site, brand, or product in a similar way

Personas are useful in considering the goals, desires, and limitations of users in order to help to guide decisions about a service, product or interaction space

A user persona is a representation of the goals and behavior of a hypothesized group of users.

Persona

In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character

For each product, more than one persona is usually created, but one persona should always be the primary focus for the design.

Advantages

Help team members share a specific, consistent understanding of various audience groups. Data about the groups can be put in a proper context and can be understood and remembered in coherent stories.

Proposed solutions can be guided by how well they meet the needs of individual user personas. Features can be prioritized based on how well they address the needs of one or more personas.

Provide a human "face" so as to focus empathy on the persons represented by the demographics.

Steps to Persona

Finding the Users and Building a Hypothesis Verification and Finding Patterns Constructing Pesonas

- Body (a photo or a description of how the person looks creates a feeling of the person as a human being, posture and clothing tells a lot about the person)- Psyche (we all have an overall attitude towards life and our surroundings which also influence the way we meet technology e.g. is the persona introvert or extrovert) -

Steps to Persona

 Background (we all have a social background, education, upbringing which influence our abilities, attitudes and understanding of the world)- Emotions and attitudes towards technology and the domain designed for- Personal traits. This one is tricky, in fictional writing there is a distinction between flat characters and rounded characters. The flat character is characterized by having only one character trait which is reflected in all actions the character does and creates a highly predictable character close to the stereotype. The flat character is difficult to engage in. The rounded character has more than one character trait, is not predictable and easier to engage in.

Steps to Persona

Creating ScenariosAs mentioned earlier, personas are nothing in themselves, it is when a persona enter a scenario they prove to be valuable. A scenario is like a story, it has a main character (the persona) a setting (somewhere the action takes place), it has a goal (what the persona wants to achieve), it has actions that lead to the goal

Our Project Manager For the Rest of the Course!

Hopelessly incompetent at management. He does not understand technical isues but always tries to disguise this, usually by using buzzwords that he does not understand himself. Often lacks Ethics…

Work it out

Your company has taken up a project of designing display for a washing machine.

Assume front loading machine, low cost, specially for heavy wash, to be sold in developing and underdeveloped nations

example persona

Betty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident 3 years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).

cultural probes

direct observation sometimes hard

in the home psychiatric patients, …

probe packs items to prompt responses

e.g. glass to listen at wall, camera, postcard given to people to open in their own environment

they record what is meaningful to them

used to … inform interviews, prompt ideas, enculture designers

scenarios

stories for design

use and reuse

scenarios

stories for design communicate with others validate other models understand dynamics

linearity time is linear - our lives are linear but don’t show alternatives

scenarios …

what will users want to do?

step-by-step walkthrough what can they see (sketches, screen shots) what do they do (keyboard, mouse etc.) what are they thinking?

use and reuse throughout design

scenario – movie player

Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon. … … …

also play act …

mock up device pretend you are doing it internet-connected swiss army knife …

use toothpick as stylus

but where is that thumb?

… explore the depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

use scenarios to ..

communicate with others designers, clients, users

validate other models ‘play’ it against other models

express dynamics screenshots – appearance scenario – behaviour

linearity

Scenarios – one linear path through system

Pros: life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons: no choice, no branches, no special conditions miss the unintended

So: use several scenarios use several methods

Cognitive Psychology

What is psychology

Psychology primarily concerned with human behavior and the mental processes that underlie it.

Cognition Process by which we became acquanted with

things or in other words gain knowledge Understanding Remembering Reasoning Attending Creating a new idea

How Humans and Computers interact with one another in terms of knowledge transmitted by them

Cognition Also described in terms of specific process

Attention Perception Memory Learning Reading, speaking and listening Problem solving, planning, reasoning, decision

making

Experiential and Reflective Experiential

We perceive, act and react to events around us effectively Driving a car, reading

Reflective Involves thinking , comparing and decision making

What is cognitive psychology

Cognitive psychology sees the individual as a processor of information

In much the same way that a computer takes in information and follows a program to produce an output.

Cognitive psychology compares the human mind to a computer, suggesting that we too are information processors and that it is possible and desirable to study the internal mental / mediational processes that lie between the stimuli (in our environment) and the response we make.

What Goes inside the head

PerceivingThinkingRememberingLearning

Planning a mealImaging a tripPaintingWritingComposing

Understanding othersTalking to othersManipulation others

Making decisionsSolving problemsdaydreaming

Information Processing … Lets look at how humans process

information

Identify the following:

So what was it ? Was it :

An elephant ?

A Tiger

An Apple

Ice cream

Ice cream Of course

How come we all Recognized them as Ice Cream

Behind the scenes of Information processing in Humans:

Input Channels Sight, hearing, touch, smell, taste Encoding information from environment in some kind

of internal representation Internal representation is compared with memorized

representations (Comparison) Concerned with deciding on a response to the

encoded stimulus (Response Selection) Organizing response and necessary action

(Response Execution)

Information Processing Analysis

Trace mental operations in the following??

Example Retrieving a friends phone number Identifying friends Name Retrieving meaning of words Understanding the meaning of set of words given in

the exercise Retrieve number from memory Generate plan and formulate the answer Recite digits or write them down

Human Information Processing Model

Information Processing Approach

There are four major theories of how we humans process information:

• Stage approach

• Levels-of-processing theory

• Parallel distributed processing theory

• Connectionistic models

The focus of this model is on how information is stored in memory.

The Stage Theory

The model is based on the work of Atkinson and Shriffin (1968) and proposes that information is processed and stored in three stages:

• Sensory memory• Short-term memory• Long-term memory

The Levels-of-Processing Theory

The Levels-of-Processing theory is based on the work of Craik and Lockhart (1972).

The major proposition is all stimuli that activate a sensory receptor cell are permanently stored in memory.

According to these researchers, the issue is not storage, but retrieval.

Rather than hypothesize that information is processed in stages, Craik and Lockhart believe that retrieval of information is based on the amount of elaboration used as information is processed.

The Levels-of-Processing Theory

The parallel-distributed processing model states that information is processed simultaneously by several different parts of the memory system, rather than sequentially as hypothesized by Atkinson-Shiffrin.

Parallel Distributed Processing Theory

The stage-theory model discussed in this course differs slightly from that first proposed by Atkinson and Shriffin in order to incorporate this principle.

Connectionistic Theory

The connectionistic model proposed by Rumelhart and McClelland (1986) extends the parallel-distributed processing model.

This model emphasizes the fact that information is stored in multiple locations throughout the brain in the form of networks of connections.

Connectionistic Theory

It is also consistent with the levels-of-processing approach in that the more connections to a single idea or concept (i.e., the more extensively elaboration is used), the more likely it is to be remembered.

It is one of the dominant forms of current research in cognitive psychology and is consistent with the most recent brain research.

The Information Processing Approach

While there is much disagreement among the various schools of thought related to how human beings process information, there are a few general principles about which almost all researchers agree:

The Information Processing Approach

Limited capacity assumption

The amount of information that can be actively processed by the system at a given point in time is constrained in some very important ways.

Bottlenecks, or restrictions in the flow and processing of information, occur at very specific points.

The Information Processing Approach

Control mechanism

Required to oversee the encoding, transformation, processing, storage, retrieval and utilization of information.

Not all of the processing capacity of the system is available; an executive function that oversees this process will use up some of this capability.

When one is learning a new task or is confronted with a new environment, the executive function requires more processing power than when one is doing a routine task or is in a familiar environment.

The Information Processing Approach

Two-way flow of information

As we try to make sense of the world around us, we constantly use information that we

• gather through the senses (often referred to as bottom-up processing)

As we try to make sense of the world around us, we constantly use information that we have stored in memory (often called top-down processing)

The Information Processing Approach

Genetic preparation

A human infant is more likely to look at a human face than any other stimulus.

Language development is similar in all human infants.

The human organism has been genetically prepared to process and organize information in specific ways.

Human perception, attention, memory

Visual perception

Humans capable of obtaining information from displays varying considerably in size and other features

but not uniformly across the spectrum nor at all speeds

Visual perception

How long did it take to recognize the Dalmation? Only after you knew what you were looking for? After recognizing the Dalmation, what else could you

see? Interpretation of the scene is possible because we know

what Dalmations, trees, etc. look like -- active construction of the image.

Example:

You are traveling down a road you never been on before, up ahead you see an octagonal red sign with white letters near an intersection.

The sign has a vine growing on it, and all you can read is "ST_P.“ These letters alone are meaningless, however taken in its context and using knowledge from past experiences you infer that it is a stop sign.

This is example of constructive perception because it required intelligence and thought to combine sensory information, a red octagonal sign with "ST_P" in white letters at an intersection, and knowledge from past experiences, stop signs are red octagonal signs with "STOP" in white letters placed at an intersection, to perceive it as a stop sign.

Effect of context on perception

When presented with ambiguous stimuli, our knowledge of the world helps us to make sense of it -- same with ambiguous info on computer screen

Constructive process also involves decomposing images into recognizable entities: figure and background

Figure and Ground

White horses Black horses?

Figure and Ground

Escher art often plays with figure/ground

Camouflage

Figure so similar to ground that it tends to disappear

Mental Models and User Models

What is a Mental Model

It was first mentioned by Craik in his 1943 book, The Nature of Explanation. (Craik, 1943)

a mental model is an internal scale-model representation of an external reality

a mental model is a set of beliefs about how a system works. Humans interact with systems based on these beliefs. (Norman, 1988)

A mental model contains minimal information. It is unstable and subject to change

Usability

Usability is a quality attribute that assesses how easy user interfaces are to use.

The word "usability" also refers to methods for improving ease-of-use during the design process

The standard further defines the components of the usability definition: Effectiveness: Efficiency: Satisfaction: Learnability Retainability efficiency of use user satisfaction of a product

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can they re-establish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Why are Mental Models Important to Usability?

Usability is strongly tied to the extent to which a user's mental model matches and predicts the action of a system.

However, sometimes the technical capabilities of a system have no resemblance to objects in the world.

HCI practitioners have produced a large body of guidelines and heuristics used to design systems that are easier for people to understand and use. (Nielsen,1993)

Through various design methods, we can build cues into a system that help users create new, accurate mental models.

 

Designing for usability

For usability follow these three design principles:

Early focus on users and tasks Empirical measurement Iterative design

Early focus on users and tasks

The design team should be user driven and in direct contact with potential users. Several evaluation methods: personas, cognitive modeling, inspection, inquiry, Prototyping testing methods

may contribute to understanding potential users.

Empirical measurement

The emphasis of empirical measurement is on measurement, both informal and formal, which can be carried out through a variety of evaluation methods: Test the system early on, and test the system on real users using

behavioural measurements. This includes testing the system for both learnability and usability. It is important in this stage to use quantitative usability specifications

such as time and errors to complete tasks and number of users to test, as well as examine performance and attitudes of the users testing the system.

Finally, "reviewing or demonstrating" a system before the user tests it can result in misleading results.

Iterative design

Iterative design is a design methodology based on a cyclic process of:

prototyping, testing, analyzing, and refining a product or process.

Based on the results of testing the most recent iteration of a design, changes and refinements are made.

This process is intended to ultimately improve the quality and functionality of a design.

Iterative design

The key requirements for Iterative Design are: identification of required changes, an ability to make changes, and a willingness to make changes.

When a problem is encountered, there is no set method to determine the correct solution. Rather, there are empirical methods that can be used during system development or after the system is delivered

Interaction

Introduction

As stated in the last lecture, HCI is neither just the study of humans nor just the study of technology it is the bridge between the two.

Over here we will consider `the bridge', the interaction between the human and the computer.

Interaction basics

Communication between user and computer is called INTERACTION

Translation between user and computer may fail so the use of models of interaction came into picture

Model of interaction can help us to understand exactly what is going on in the interaction and identify difficulties

Terms of Interaction

Goals Domain Task Task Analysis Computation Aspects Task Language

Terms of Interaction

domain – the area of work under studye.g. graphic design

goal – what you want to achievee.g. create a solid red triangle

task – how you go about doing it– ultimately in terms of operations or

actionse.g. … select fill tool, click over

triangle

Terms of Interaction

Users want to achieve goals in some domain. Operations in the domain are tasks. Task analysis investigates the problem in terms of domain,

goals, intentions, tasks The system and the user have different languages The core language describes computation aspects of the

domain The task language describes psychological aspects of domain

Models of Interaction

Why develop a model for interaction?

Why develop a model for interaction? To help us to understand an interactive dialogue. To identify likely difficulties. To provide a framework to compare different interaction

styles.

Stages of Action

What makes something difficult to do? – What are you trying to do? – What ways can you achieve it? – How do you execute one of those ways? – What happened as a result?

Interactive Cycle

Interactive cycle is divided in two major phases: Execution Evaluation

These are further divided into seven stages:

Interaction Model 1:Norman’s Model

(Already visited in Unit 1)

Stages of execution cycle(Already visited in Unit 1)

Norman's execution-evaluation cycle most closely matches our intuitive view. establishing the goal { task language; imprecise forming the intention { specfic specifying the action sequence executing the action perceiving the system state interpreting the system state evaluating the system state with respect to the goals and

intentions

Interface Problems

Since the human and computer do not recognise the same concepts (speak the same language) interfaces cause problems. These problems can be described in terms of:

gulf of execution { difference between user determined action formulation and the actions allowed by system

gulf of evaluation { difference between physical presentation of system state and user expectation

What are Gulfs?

The distance between the mental representations of the person and the physical components and states of the environment

Illustrates difficulty in deriving relationships between mental intentions and interpretations and the physical

actions and states

Bridging the Gulf

These gulfs can be `bridged': users can change to suit the interface designers can design \knowing the user users can change their interpretation of system

responses designers can change output characteristics

Human error

Difference between : Slips(better GUI) and mistakes(understanding of

system)

Human error - slips and mistakes

slip understand system and goal correct formulation of action incorrect action

mistake may not even have right goal!

Fixing things?slip – better interface designmistake – better understanding of system

Interaction Model 2:Abowd & Beale model

Abowd & Beale model

Norman's model concentrates on the user's view of interaction.

Abowd & Beale model User and System communication through the interface.

Using Abowd & Beale’s model

user intentions translated into actions at the interface

translated into alterations of system state reflected in the output display interpreted by the user

general framework for understanding interaction not restricted to electronic computer systems identifies all major components involved in interaction allows comparative assessment of systems an abstraction

Interaction problems:Language Translation Difficulties

User - Input: (articulating a goal) How easy is it to translate a goal requirement into the input language? e.g. {Difficult: bank of light switches, stovetop element controls { Easy: virtual reality system

Input – System Can all system stimuli be articulated by user language? { Consider remote control (or front panel) with limited functions.

Interaction problems:Language Translation Difficulties

System - Output (execution & evaluation) Can system output device provide a complete view of system state? e.g.{ Consider document editing with limited view of data

Output - User (interpretation by user) Is information presented to user in a way that is easy to interpret. e.g.{ Difficult to read unmarked analog clock.

{ Difficult to observe result of hierarchical system eg: copying using command line interface

Interactivity & Interaction Context

Interactivity is the defining feature of an interactive system In older systems, order of interaction is pre-emptive. Newer

systems still have some of these features. Of course all interaction occurs in some wider social and

organisational context People are usually involved and there are issues of desire to impress,competition and fear of failure.

Motivation will reduce if systems do not match requirements but new technology may increase motivation if systems are well designed and integrated with the user's work.

Anthropometrics Ergonomics

Anthropometrics v/s Ergonomics

What is ANTHROPOMETRICS ?

The study of the human body and its movement.

The study of the human body and its movement, often involving research into measurements relating to people. It also involves collecting statistics or measurements relevant to the

human body, called Anthropometric Data.

Anthropometrics v/s Ergonomics

What is ERGONOMICS ?

The study of people and their relationship with the environment around them.

When anthropometric data (measurements / statistics) is applied to a product, e.g. measurements of the hand are used to design the shape and size of a handle, this is ergonomics.

Thus..

Anthropometrics is the comparative study of human body measurements and properties.

Ergonomics is the science of making the work environment safer and more comfortable for workers using design and anthropometric data.

Question??

How is anthropometric data used to produce an ergonomically designed hair dryer? 

Solution

Anthropometric data (measurements) are used to determine the shape of handle and distance to be held from head.

Designed for average size hand. The length of lead is determined from anthropometric data

(length of average arms and average height of users). The hair dryer is now ergonomically designed.

Ergonomics: the arrangement of controls

Controls can be and laid out in various ways: functional : task related controls grouped together sequential :layout in order of use Frequency : common controls easy to access

Other factors Controls should be easy to reach Controls should not be so close to each other that they

hamper usage { `Dangerous' controls should be hard to reach -prevents

accidents

Ergonomics: the arrangement of controls

Control layout is important: { Safety critical systems: poor layout ) disaster! { Routine applications: poor layout ) inefficiency, user

dissatisfaction, poor mental model building etc..

Ergonomics: the physical environment & health issues

Unsatisfactory working conditions can at best lead to stress and dissatisfaction and at worst harm workers' health. Some factors to consider: physical position : should be comfortable temperature : should not be extreme lighting : should be low-glare & sufficient noise : should not be excessive; high levels hamper

perception time : don't expect extended use of an interactive system

Ergonomics: Colour

Colour is a powerful cue, but it is easy to misuse. It should not be applied just because it is available. Topics

(consider these topics for further study on colors): Colour Vision & Perception Principles & Guidelines

Few Examples..

Avoid the simultaneous display of highly saturated, spectrally extreme colors. Explanation: Frequent refocusing causes visual fatigue. Don't

use reds with blues, or yellows with purples, unless one or more are desaturated.

Example: Reds/oranges/yellows/greens can be viewed without refocusing, but the combination of cyans/blues with reds is fatiguing.

Few Examples..

Use redundant cues to augment color coding. Explanation: To compensate for variation among users, color

memory, and other perceptual problems, vary shape, font, etc. in addition to color.

Example: To represent different types of objects in diagrams, show one as dark green circles, another as yellow squares, etc.

Refer to the support document on color usage is provided on BBLMS for further study

Interaction Styles

Computers are used to proceed information and the information is needed by people

people and computers have to interact. Different computer applications (programs) follow different

styles of the interaction,

Example…

If we want to replace a word by other word how would this action be performed in two different environments:

In Unix based NIX standard stream text editor "sed"

MS Word for Windows:

We will proceed as..

Recognise six main interaction styles. Determine the interaction style(s) used by a computer

application. Describe pro's and con's of any interaction style for a

specific application and for a specified user group. Evaluate the interface of a given application regarding its

usability. Suggest improvements of application's interaction style,

based on a set of guidelines.

Major Interaction Styles

1. Command line. The user types in commands for the program, usually one at a time. The program executes the commands and returns feedback, if necessary. MS-DOS and UNIX use this style.

2. Question and answer. The application asks questions and when the user provide by answers all necessary data, the application gives the results. Sometimes these are called "walktrough and use" applications.

3. Menus. Possible user actions are listed on the screen and the user can select one of them. Gopher is an example and most MS Windows applications also include menus.

Major Interaction Styles

4. Form filing. The user type the data in specific fields, similar to the fields on a paper fill-in form. Many office and database applications use this style.

5. Graphical direct manipulation. The objects used in application are graphically represented on the screen and the user can manipulate them directly by pointing, clicking, dragging, typing, etc. Most windowing systems, or GUI's (Graphical User Interface) are based on graphical direct manipulation.

Command Line Interface

Introduction

When a command line interaction is used, the user types in commands for the application

usually one at a time, the application executes them, if possible, and gives some feedback to the user.

In this case, the interaction becomes just a dialogue, in which the human is the active side.

Example

"sed" editor is a typical program with a command-line interface. MS-DOS and UNIX operating systems use this style

Advantages:

Cheap. Easy to develop and suitable for slow machines and communication lines.

Flexible. Suitable for experienced users

Disadvantages

Low visibility. Difficult for novice and casual users

Difficult error corrections. Text-only data representation.

Guidelines for good Command Line Interface

1. Offer maximum flexibility Conduct task analysis to determine the necessary commands Provide a way to combine and execute sets of commands.

2. Facilitate command remembering Use meaningful, descriptive names. Follow "de facto" standards. Use options for small modifications in command's behaviour. If abbreviation are necessary, make them consistent when possible. Use consistent format of the command line. Provide on-line help

3. Facilitate error correction. Provide a way to edit and replay last command. Give feedback on both successful and unsuccessful commands

Graphical Direct Manipulation

Introduction

The direct manipulations applications represent the data as graphical object on the screen.

These objects can be manipulated directly by a mouse or another pointing devices, thus performing operations on the application's data.

Usually these applications are implemented as window systems.

Example

The system responds immediatelly to the user actions by changing appearance of the objects - for example recycle bin becomes full, when a document is put into it.

Guidelines 1. Regarding the screen design

Use relatively less arbitrary metaphors to respresent objects Display only objects which can be manipulated at the given time Represent the state of the object too, possibly by color coding. Keep consistency by putting common objects at the same place on all

screens. 2. Regarding the interaction design

Make interactions as direct as possible by using selecting, dragging, etc. Make operations reversible when possible. Issue a "warning" message before any destructive operation. Always display clearly marked object for exiting program Provide keyboard shortcuts for most often used commands.

3. Regarding the user support Provide both context-sensitive and object-sensitive help.

Advantages:

Easy to understand and execute Flexible. Suitable for experienced users Meaningful icons and graphics for non

computer user High visibility

Disadvantages

Costly Heavy Interface

Menus and Navigation

Introduction Set of options on screen for choosing the action. Use for

selecting actions or among options for data entry. Pull-down menus Pop-up menus Hierarchical menus

Design issues : Use standard menus for standard actions (Help, open, close, save,

save as .. , print, Undo, Copy, Cut, Paste, Clear) Organize menu items in logical order (alphabetic , size, grouping) Changing (adaptive menus) can be difficult (the content of the invisible

menu list can change according to actions) - for example files that you have used recently (e.g. word).

Menu items can be activated or inactivated according to possible options in the current situation.

Example

Advantages

shortens learning-reduces keystrokes-structures decision making-use of dialog-management tools-easy support of error handling-can guide through task

Disadvantages

-presents danger of many menus-may slow frequent/expert users-consumes screen space-requires rapid display rate

Form Fill

Introduction Form on screen with a set of fields - check-boxes - buttons -

menus, for data entry of action selections.  Typically select a set of actions or enter a set of selections and press GO (or SUBMIT or ENTER ...)  Two basic approaches Form is filled and then the data is sent to the application for actions

Every field entry is sent to the application - checking possible before every item is entered

Introduction

Design issues Layout Sizes of fields Types of fields Help text (for the form - for each field) automatic advancement (from field to field) Cancel (what does it mean in the situation) Corrections (one field - all fields) Corresponding paper-form (for example order

entry) Pre-filled fields - initial values

Example

Advantages

simplifies data entry-requires modest training-gives convenient assistance -permits form-management tools

Disadvantages

-consumes screen space-may require more computer skills-

Natural Language

Introduction Speech is seen as the ultimate interface Problems

– “Time flies like an arrow” – “Life is a nice beach” – World knowledge not always appropriate

Current solution – Unambiguous sub-set • Cellphones

Example

Advantages

relieves burden of learning syntax-spoken NL allows busy hands

Disadvantages

requires clarification dialog-may require more keystrokes-may not show context-is unpredictable due to ambiguity-spoken harmed by noise

Few more…

Three dimensional interfaces

virtual reality ‘ordinary’ window systems

highlighting visual affordance indiscriminate use

just confusing!

3D workspaces use for extra virtual space light and occlusion give depth distance effects

flat buttons …

… or sculptured

click me!

Spreadsheets

first spreadsheet VISICALC, followed by Lotus 1-2-3MS Excel most common today

sophisticated variation of form-filling. grid of cells contain a value or a formula formula can involve values of other cells

e.g. sum of all cells in this column

user can enter and alter data spreadsheet maintains consistency

WIMP Interface

The most common interaction style in PCs

WIMP in PCs

Most common interaction style on PCs Windows Icons Menus Pointers / Mouse

Elements of WIMP: windows, icons, menus, pointers buttons, toolbars, palettes, dialog boxes

default style for majority of interactive computer systems, especially PCs and desktop machines

Windows

Areas of the screen that behave as if they were independent can contain text or graphics can be moved or resized can overlap and obscure each other, or can be laid

out next to one another (tiled)

scrollbars allow the user to move the contents of the window up

and down or from side to side title bars

describe the name of the window

Icons

small picture or image represents some object in the interface

often a window or action windows can be closed down (iconised)

small representation fi many accessible windows

icons can be many and various highly stylized realistic representations.

Pointers

important component WIMP style relies on pointing and selecting things

uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts

wide variety of graphical images

Menus

Choice of operations or services offered on the screen Required option selected with pointer

problem – take a lot of screen space

solution – pop-up: menu appears when needed

File Edit Options

Typewriter Screen Times

Font

Kinds of Menus

Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar!

Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle

easier to select item (larger target area) quicker (same distance to any option)

… but not widely used!

Menus extras

Cascading menus hierarchical menu structure menu selection opens new menu and so in ad infinitum

Keyboard accelerators key combinations - same effect as menu item two kinds

active when menu open – usually first letter active when menu closed – usually Ctrl + letter

usually different !!!

Menus design issues

which kind to use

what to include in menus at all

words to use (action or description)

how to group items

choice of keyboard accelerators

Buttons

individual and isolated regions within a display that can be selected to invoke an action

Special kinds radio buttons

– set of mutually exclusive choices

check boxes– set of non-exclusive choices

Toolbars

long lines of icons …… but what do they do?

fast access to common actions

often customizable: choose which toolbars to see choose what options are on it

Palettes and tear-off menus

Problemmenu not there when you want it

Solutionpalettes – little windows of actions shown/hidden via menu option

e.g. available shapes in drawing package

tear-off and pin-up menus menu ‘tears off’ to become palette

Dialogue boxes

information windows that pop up to inform of an important event or request information.

e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.

Limitations of WIMP GUI

Imposes sequential “ping-pong” dialog model: mouse and keyboard input, 2D graphics (sound?) output deterministic and discrete difficult to handle simultaneous input, even two mice pure WIMP doesn’t use other senses: hearing, touch, ... >50% of our neurons in visual cortex, but as humans it is

very difficult for us to communicate without speech, sound...

Not usable for immersive VR (e.g., headmounted display) where you are “in” the scene: no keyboard, mouse…

Impedance-matchingLimitations of WIMP GUI

Limited Vision(Flat, 2D)

No Speech

No Gestures

One HandTied BehindBack

Limited Audio

Limited Tactile

1st Really successful WIMP implementation Specifications Apple Macintosh 128K (1984-85) CPU:MC68000CPU speed:8 Mhz FPU:None RAM:128k Dram not expandable ROM:64k Serial Ports:2 Floppy:1 3.5" 400k Monitor:9" 512x384 square pixels built-in B/W Power:60 Watts Weight: 16.5 lbs.Dimensions: 13.6" H x 9.6" W x 10.9" D System Software:Mac OS 1.0 Production:January 1984 to October 1985 Cost:$2,495

Elements of Dialog Design

think about dialogue

what does it mean in UI design?

Minister: do you name take this woman …Man: I doMinister: do you name take this man …Woman: I doMinister: I now pronounce you man and wife

Overview

Dialog is the syntactic level of human-computer interaction (like a script, except users and computer have more choices).

Notations for dialog description diagrammatic textual

Dialog is linked semantics presentation

Benefits of formal descriptions

Hi

What is dialog? Much human dialog unstructured - grammar rules

stop at sentence level (and sometimes before).

Examples of structured form of human conversation: script for play and marriage service.

Dialog with a computer is relatively structured and constrained (unlike in Star Trek).

What is dialog? w.r.to HCI Structure of the conversation between the user

and computer system.

Languages have 3 levels lexical syntactic <-- most user interfaces semantic

Describe language at syntactic level, but…must be linked to semantics for implementation.

Dialog Design Notations Notations for human-computer dialogs have roots

in other branches of computing.

We do NOT use a programming language Separation of dialog makes analysis easier

If separate from convoluted logic and calculations Can change interface style Design dialog prior to programming

Diagrammatic Notations Heavily used At a glance we can see structure of dialog Problems with extensive or complex dialog

structures

Textual Dialog Notations Grammars Production rules

Dialog Semantics Purpose of dialog description

communicate with other designers tool for thought early in design

For semantics we leave reader to infer annotate dialog notations with intended meaning

of actions formalize

for a contract or prototype

Dialog Analysis and Design : State Properties

Reachability Can we get to desired state easily from current

state Basic check More - “infinite loops”

Reversibility (undo) Go back to a previous state

Dangerous states Example: reformatting hard drive Make them difficult, ask for confirmation,

required user action to be inconsistent

Summary Dialog can be difficult to analyze if we do not

have separate description Two categories: diagrammatic and textual Properties of dialogs

action properties, state properties, presentation

Types of Systems/Interactions

End of Unit 2Foundation: Understanding Users and Interface

Course Outcome Mapping

This unit of the syllabus helped in partially achievement of : Course Outcome 1 Corse Outcome 2