foundations understanding users and interactions
TRANSCRIPT
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