ubicompUI Albrecht Schmidt

User Interfaces, Human Computer Interaction & Usability
Part 1: Short Overview Basic Concepts Part 2: UIs in Ubiquitous Computing Albrecht Schmidt Embedded Interaction Research Group http://www.hcilab.org University of Munich
Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005
Defining HCI
Human Computer Interaction (HCI)

Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them
(working definition in the ACM SIGCHI Curricula for HCI)
Computer science view point: Interaction between one or more humans and one or more computational machines
HCI - An Interdisciplinary Area

Computer Science application design and engineering of human computer interfaces Psychology the application of theories of cognitive processes and the empirical analysis of user behavior Sociology and Anthropology interactions between technology, work, and organization Design and Industrial Design creating interactive products
Utility, Usability, Likeability

Utility a product can be used to reach a certain goal or to perform a certain task. This is essential! Usability relates to the question of quality and efficiency. E.g. how well does a product support the user to reach a certain goal or to perform a certain task. Likeability this may be related to utility and usability but not necessarily. People may like a product for any other reason
What is Usability
Usability 101 by Jakob Nielson
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. Usability has five quality components:
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 reestablish 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 is Usability Important?

Improving usability can
increase productivity of users reduce costs (support, efficiency) increase sales/revenue (web-shop) enhance customer loyalty win new customers
Several case studies that show the benefit of usability Usability is often considered as sign of quality Working with users can create ideas for new products, e.g. "similarities" feature at amazon.com
How to Achieve Usability

(high level overview more details later)
Identify what utility and usability for the product means
main purpose of the product anticipated users, target audience compare with similar/competitive products (if applicable)
Common effort in the design and development process

trade-offs between design, engineering, and usability
Iterative evaluation
usability testing with different methods at various stages of the development process
Improvement after product release

monitoring user behavior evaluation of changes to the product (e.g. adding a new feature to a web shop)
Usability Testing
(high level overview)
Usability testing of software/web-applications assesses several factors, e.g.
Does application functionality match the user's needs? Is the application easy to learn? How easy is it for the user to accomplish tasks with the application? Is it easy to remember how to use the application? Does the user enjoy using the application, or does he/she become easily frustrated by it? Does the application do what the user expects?
Ways to quantify usability include measuring

How many mistakes get made in a given time period? How long do users take to complete a specific task successfully? How long it takes for users to learn the application's distinct functions/features How repeatable users' experiences are What paths do they take in trying? The users' satisfaction levels How long does it take to correct an error?
Building Successful Digital Products

tension
different objectives different design goals
1. What do people desire? Objective: a product that is desirable and viable and buildable 3. What can we build?
step by step - 2 3 1 solution

Products in the overlapping space
2. What will sustain a business?

From A. Cooper, About Face 2.0
Development Process
What the User Sees

Users see only what is visible!
What the Developer Knows

Users see only what is visible! users have little idea about:
architecture, state transitions, dependencies application context system restrictions
It is not Simple to Make Good User Interfaces

Basic misconceptions
If I (the developer) can use it everyone can use it If our non-technical staff can use it everyone can Good user interfaces are applied common sense A system is usable if all style guideline are met
Examples of bad software are easy to find in the WWW or in various Usability Hall of Shame In Ubiquious Computing it is even easier to make bad user Interfaces (little understanding, no guidelines) Creating usable systems is a structured process and can be achieved by use of different methods
HCI is Central to the Design and Development Process

even if done unconsciously. Decisions made in the development process are likely to influence how a product can be used. thinking about the user interface when a first version of a product is finished is to late! good user interfaces and often good products are a joined effort of all participants in the design and development process similar to building a house the interior designer cant solve problems caused by bad engineering.
Evolution of the Software Development Process

Programmers
Originally Managers
Managers
Code/Test
Programmers
Ship
Initiate
Managers
Code/Test
Programmers QA Designers
Ship
Separating testing and design Design before programming
Initiate
Managers Designers
Code
Programmers
Test
QA
Usability Practitioners
Look & Feel
Ship
Initiate
Design
Code
Bug Test User Test

Usability Practitioners
Ship
From A. Cooper, About Face 2.0

Interaction Models Modeling Interaction of System
Understandability and Usability

Principles of Design (Norman, 2002)
1. Provide a good conceptual model 2. Make things visible
A conceptual model is used to predict the effect of actions performed. The conceptual model is based on:
Affordances basic properties of the device/system Constraints possible actions that can be performed Mapping relationship between controls and outcome Experience knowledge acquired that is related to the domain
Visibility relates also to mappings and feedback

Provide a control for each function (direct mapping) Make actions and reactions visible (feedback)
Background: The Psychology of Everyday Action (Norman 2002, Chapter 2)

People are blaming themselves for problems caused by design
If the system crashes and the user did everything as he is supposed to do the developer/system is blamed If the system crashes and the user operated the system wrongly the user is blamed
People have misconceptions about their actions

The model must not be fully correct it must explain the phenomenon
People try to explain actions and results

Random coincidence may lead to assumptions about causality
Seven Stages of Action

1. Forming a goal 2. Forming an intention 3. Specifying an action 4. Executing the action 5. Perceiving the system state 6. Interpreting the system state 7. Evaluating the outcome
Intention to act
Goals
Evaluation of interpretations
Sequence of actions
Interpreting the perception
Execution of the sequence of actions
Perceiving the state of the world
The World
Gulf of Execution
The difference between the intentions and the allowable actions is the Gulf of Execution
How directly can the actions be accomplished? Do the actions that can be taken in the system match the actions indented by the person?
Example in GUI
The user wants a document written on the system in paper (the goal) What actions are permitted by the system to achieve this goal?
Good design minimizes the Gulf of Execution
Gulf of Evaluation
The Gulf of Evaluation reflects the amount of effort needed to interpret the state of the system how well this can be compared to the intensions
Is the information about state of the system easily accessible? Is it represented to ease matching with intensions?
Example in GUI
The user wants a document written on the system in paper (the goal) Is process observable? Are intermediate steps visible?
Good design minimizes the Gulf of Evaluation
Implications on Design
Principles of good design (Norman)
Stage and action alternatives should be always visible Good conceptual model with a consistent system image Interface should include good mappings that show the relationship between stages Continuous feedback to the user
Critical points/failures
Inadequate goal formed by the user User does not find the correct interface / interaction object User many not be able to specify/execute the desired action Inappropriate / mismatching feedback
Selected Methods Prototyping & Wizard of Oz
Design Cycles & Prototyping

Creating prototypes is important to get early feedback
from the project team (prototypes help to communicate) from potential users
Different types of prototypes

Low-fidelity prototypes (e.g. paper prototypes, sketches) Hi-fidelity prototypes (e.g. implemented and semi-functional UI, could look like the real product ) Fidelity is referring to detail
Tools & Methods

Sketches & Storyboards Paper prototyping Using GUI-builders to prototype Limited functionality simulations Wizard of Oz
Sketches & Storyboards
Storyboards as in movies
A picture for each key scene
Sketch out the application

Key screens Main interaction Important transitions
Helps to communicate and validate ideas

Easy to try out different option, e.g. document base vs. application based
Ignore details, e.g.

what font to use, how icons will look like
Paper Prototypes
Specify the set of tasks that should be supported Create a paper prototype using office stationery
Screens, dialogs, menus, forms, Specify the interactive behavior
Use the prototype

Give users a specific task and observe how they use the prototype Ask users to think aloud comment what they are doing At least two people
One is simulating the computer (e.g. changing screens) One is observing and recording
Evaluate and document the findings

What did work what did not work Where did the user get stuck or chose alternative ways Analyze comments from the user
Iterate over the process (make a new version)

Low-Fidelity Prototyping
Advantages of paper prototypes
Cheap and quick results within hours! Helps to find general problems and difficult issues Make the mistakes on paper and make them before you do your architecture and the coding Can save money by helping to get a better design (UI and system architecture) and a more structured code Enables non-technical people to interact easily with the design team (no technology barrier for suggestions)
Get users involved!

To get the full potential of paper-prototypes these designs have to be tested with users Specify usage scenarios Prepare tasks that can be done with the prototype
Minimize the time for design Iterations Make errors quickly!

Idea of rapid prototyping Enables the design team to evaluate more design options in detail If you go all the way before evaluating your design you risk a lot! Sketches and paper prototypes can be seen as a simulation of the real prototype
Idea sketch implementation evaluation Slow Iteration
Without paper prototyping:
With paper prototyping:

Idea sketch/paper prototype evaluation implementation - evaluation Quick Iteration
Slow Iteration
High-fidelity Prototype
Looks & feels like the final product to the user
Colors, screen layout, fonts, Text used Response time and interactive behavior
The functionality however is restricted

Only certain functions work (vertical prototype) Functionality is targeted towards the tasks (e.g. a search query is predetermined) Non-visible issues (e.g. security) are not regarded
Can be used to predict task efficiency of the product Feedback often centered around the look & feel Standard technologies for implementation
HTML, JavaScript Flash, Director, Presentation programs GUI Builder (e.g. Visual Basic, Delphi, NetBeans)
Addition about Prototypes
http://www.useit.com/papers/guerrilla_hci.html
Horizontal Prototyping
Demonstrate the feature spectrum of a product Allows the user to navigate the system The actual functions are not implemented Helps to evaluate/test
Navigation (e.g. finding a specific function or feature) Overall user interface concept Feature placement Accessibility User preferences
Applicable in low fidelity prototyping and high fidelity prototyping Used in early design stages
To determine the set of features to include To decide on the user interface concept
Example: overall usage of a mobile phone

Vertical Prototyping
Demonstrate a selected feature of a product Allows the user only to use this specific function The details of the function/feature are shown/implemented Helps to evaluate/test
The optimal design for a particular function Optimize the usability of this function User performance for this particular function
Mainly use in high fidelity prototyping but can be applicable to low fidelity prototyping Used in early design stages
To compare different designs for a specific function
Used in later design stages

To optimize usage of a function
Example: a new input methods for writing SMS on a mobile phone

Wizard-of-Oz
The man behind the curtain Basically dont not implement the hard parts in the prototype just let a human do Typical areas
Speech recognition Speech synthesis Annotation Reasoning Visual Perception
Provides the user with the experience without extensive implementation effort for the prototype
Some Books
Jennifer Preece, Yvonne Rogers, Helen Sharp (2002). Interaction Design. ISBN 0471492787 Alan Dix, Janet Finlay, Gregory Abowd and Russell Beale. (2003) Human Computer, Interaction (third edition), Prentice Hall, ISBN 0130461091 Ben Shneiderman. (1998) Designing the User Interface, 3rd Ed., Addison Wesley; ISBN: 0201694972 Donald A. Norman. (1990) The Design of Everyday Things; ISBN: 0465067107 Alan Cooper, Robert M. Reimann. (2003) About Face 2.0: The Essentials of Interaction Design; ISBN: 0764526413 Andreas Holzinger. (2001) Basiswissen Multimedia. Band 3: Design; ISBN: 3802318587 Sven Heinsen, Petra Vogt (Herausgeber). (2003) Usability praktisch umsetzen. Ein Handbuch fr Software, Web, Mobile Devices und andere interaktive Produkte; ISBN: 3-446-22272-3.
Part 2
Ubiquitous Computing User Interfaces
Plans and Situated Actions Distributed Cognition

complex interaction between people interaction with different devices interaction with information in different forms complex interaction with the physical environment Interruptions as standard phenomenon of live Computer usage can not be seen isolated from that
human plans are often not orderly executed plans are often adapted or changed users actions are situated in time and place users actions are responsive to the environment distributed cognition knowledge is not just in the users head it is in the environment
Suchman, 1990
Tangible Bits: Towards Seamless Interfaces between People, Bits and Atoms
Hiroshi Ishii and Brygg Ullmer
Interactive Surfaces Transformation of each surface within architectural space (e.g., walls, desktops,ceilings, doors, windows) into an active interface between the physical and virtual worlds Coupling of Bits and Atoms Seamless coupling of everyday graspable objects (e.g., cards, books, models) with the digital information that pertains to them; Ambient Media Use of ambient media such as sound, light, airflow, and water movement for background interfaces with cyberspace at the periphery of human perception. http://tangible.media.mit.edu/papers/Tangible_Bits_CHI97.php
Future Interactive computing environments
Future Interactive computing environments
Example 1: Everywhere Display
Everywhere Displays Project (IBM)

http://www.research.ibm.com/ed/
The Everywhere Displays project aims to develop systems that allow the transformation of every surface in a space into a projected "touch screen". Basic technology
LCD projector pan/tilt mirror Camera
The projected image is processed to compensate for the perspective distortion pan/tilt video camera to detect hand/body activity on the projected area, people can interact with the projected image by simply touching the surface.

Correct image distortion

Correct image distortion

Detect user interaction

Applications
Example 2: Load Sensing Environment
Load-Sensing as Input
Weight Lab Lab environment with load-sensing floor, tables, and shelves Common furniture, unobtrusively augmented (wireless) Context Acquistion Tracking of people, objects, activities In presence of noise (cluttered surfaces)
Implicit and explicit interaction Interaction Events
Example 3: Communication UIs
Context Call
(European Project 1999)
Sharing of context before the call is established

In real life we have social protocols for initiating conversation
social skill knowledge from both sites required! trained from early childhood on
context matters - manly implicitly

how important is it for me? how convenient seams it for the other person? relation between the communication partners? what type of conversation will it be? is it socially acceptable (topic/situation)?
To avoid situations like:

if I would have known that you are in a meeting I would not have called you. if I would have known that you are still at work I would not have called you. if I would have known that the phone is off and I can only leave a message I would not have called.
Context Call cont.

Implementation example extended phone book User experience vs. technology phone users can selectively share context
information about the situation information about availability ...
caller can decided

knows her own constraints has some information about the other side can judge if the call will be appropriate context matters - manly implicitly
The Hug: An Exploration of Robotic Form For Intimate Communication

Carl DiSalvo et al.
More in the Seminar Novel User Interfaces and in the reading

http://www.peopleandrobots.org/admin/uploads/disalvoROMAN.pdf
Example 4: Ambient Media
Ambient Displays
Linking web resources with ambient media Providing peripheral information
Information is unobtrusive in the environment Information is coded
Ambient Displays
beyond notification Comparison of web access
Effects: increased motivation and awareness

Design Space for Interactive Systems
Interacting with disappearing computers

Disappearing is NOT only
Very small systems Computers and devices invisibly embedded in the environment Computers disguised as everyday objects
Perceiving computers as invisible

Dependent on previous knowledge of the user Related to the users expectations Is subjective and varies
Interaction with information means that the user focuses on the primary task. The user is not aware that she or he is operating a distributed set of connected computers.
Interaction motivation sensor controlled automated door

Implicit use: go through the door No thought on sensors, actuators, and control. Explicit use: open the door for deliveries Manipulating the sensor to get the desired effect
Explicit use requires an understanding of the conceptual model of the user interface!
A extended design space for interactive systems

mode of interaction explicit command line GUI & direct manipulation gestures tangible and physical UIs
implicit
modality
Implicit interaction
Implicit Human-Computer Interaction (iHCI) iHCI is the interaction of a human with the environment and with artefacts which is aimed to accomplish a goal. Within this process the system acquires implicit inputs from the user and may present implicit output to the user. Implicit Input Implicit input are actions and behaviour of humans, which are done to achieve a goal and are not primarily regarded as interaction with a computer, but captured, recognized and interpret by a computer system as input. Implicit Output Output of a computer that is not directly related to an explicit input and which is seamlessly integrated with the environment and the task of the user.
Interaction is interaction in context

The computer is a part of our world. Living in a modern world is interaction with an I/O subsystem of a distributed embedded computer. The real power of the concept comes not from any one of these devices; it emerges from the interaction of all of them. The hundreds of processors and displays are not a "user interface" like a mouse and windows, just a pleasant and effective "place" to get things done. (Mark Weiser, 1991)
How are new interfaces related to pervasive computing?

Powerful and small processors Nearly limitless memory Ubiquitous networks Novel display technologies Sensors
Acquiring different parameters in the real world E.g. activity, context
Actuators
Computer controlled devices Components in buildings and engineering
Production technologies
individualization E.g. 3D printing
New Production Technologies can change the use of technology

Similar to a laser printer
Paper is still one of the most important user interfaces print read dump
3D-print
Interaction devices with a specific form factor Custom made even if you only need for one task
Vision: embed technology components into custom-made short-lived cases

What is HCI in Ubiquitous Computing?
Write on paper capture on photo send as MMS
References
Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier. http://www.useit.com/papers/guerrilla_hci.html Ubiquitous Computing. http://www.ubiq.com/hypertext/weiser/UbiHome.html Alan Cooper, Robert M. Reimann. (2003) About Face 2.0: The Essentials of Interaction Design; ISBN: 0764526413 Alan Dix, Janet Finlay, Gregory Abowd and Russell Beale. (1998) Human Computer, Interaction (second edition), Prentice Hall, ISBN 0132398648 (new Edition announced for October 2003) Suchman, L.A. (1990). Plans and situated actions: the problem of human-machine communication. Cambridge, NY: Cambridge University Press. Donald A. Norman. (1990) The Design of Everyday Things; ISBN: 0465067107

ubicompUI Albrecht Schmidt

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ubicompUI Albrecht Schmidt

Uploaded by

Copyright:

Available Formats

User Interfaces, Human Computer Interaction & Usability

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Human Computer Interaction (HCI)

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

HCI - An Interdisciplinary Area

Utility, Usability, Likeability

Why is Usability Important?

How to Achieve Usability

Common effort in the design and development process

Improvement after product release

Ways to quantify usability include measuring

Building Successful Digital Products

step by step - 2 3 1 solution

2. What will sustain a business?

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

What the User Sees

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

What the Developer Knows

It is not Simple to Make Good User Interfaces

HCI is Central to the Design and Development Process

Evolution of the Software Development Process

Separating testing and design Design before programming

Look & Feel

Bug Test User Test

From A. Cooper, About Face 2.0

Interaction Models Modeling Interaction of System

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Understandability and Usability

Visibility relates also to mappings and feedback

Background: The Psychology of Everyday Action (Norman 2002, Chapter 2)

People have misconceptions about their actions

People try to explain actions and results

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Seven Stages of Action

Interpreting the perception

Execution of the sequence of actions

Perceiving the state of the world

Good design minimizes the Gulf of Execution

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Good design minimizes the Gulf of Evaluation

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Selected Methods Prototyping & Wizard of Oz

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Design Cycles & Prototyping

Different types of prototypes

Tools & Methods

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Sketches & Storyboards

Sketch out the application

Helps to communicate and validate ideas

Ignore details, e.g.

Vorlesung Innsbruck, Albrecht Schmidt, LMU Mnchen, 10. Juni 2005

Use the prototype

Evaluate and document the findings

Iterate over the process (make a new version)

Get users involved!

Minimize the time for design Iterations Make errors quickly!

Without paper prototyping:

With paper prototyping: