HCI 2 REVIEWER

JOURNEY MAP
 A journey map is a visualization of the process that a person goes through in order to accomplish a
goal
 A process that provides a holistic view of the customer experience by uncovering moments of both
frustration and delight throughout a series of interactions.
 If done successfully, it reveals opportunities to address customers’ pain points, alleviate
fragmentation, and, ultimately, create a better experience for your users

 Journey mapping starts by compiling a series of user actions into a timeline

 The timeline is fleshed out with user thoughts and emotions in order to create a narrative
 Narrative is condensed and polished, ultimately leading to a visualization

KEY COMPONENTS OR ELEMENTS OF A JOURNEY MAP

 Actor
 Journey Phases
 Opportunities
 Scenario + Expectations
 Actions, Mindsets, Emotions

Journey Map
Experience Map
 specific actor
 specific scenario  understanding a general human
 specific and focused on a particular behavior
business or product

Service Blueprint
User Story Map
 visualize the relationships between
different service components (such as
 visual version of a user story
people of processes at various
 for planning and implementation
touchpoints in a specific customer
journey

WHY USE JOURNEY MAPS

 The process of creating a map forces conversation and an aligned mental model for the whole team
 The shared artifact resulting from the mapping can be used to communicate an understanding of
your user or service to all involved
DESIGN, PROTOTYPING AND CONSTRUCTION

PROTOTYPING
 What is a Prototype?
o For users to effectively evaluate the design of an interactive product, designers must produce an
interactive version of their ideas, this activity is called prototyping

o In other design fields a prototype can be:

 a small-scale model
 a miniature car
 a model of a building
o In interaction design it can be:
 a series of screen sketches
 a PowerPoint slide show
 a video simulating the use of a system
 a lump of wood, e.g. hand-held computer
 a cardboard mock-up
 a piece of software with limited functionality

 Why Prototype?
o Evaluation and feedback
 Allows stakeholders to interact with an envisioned product, to gain some experience
of using it in realistic settings and to explore imagined uses
o Communication among team members
 Clarifies vague requirements
o Validation of design ideas
 Test out the technical feasibility of an idea
o Choosing between alternatives
 Provides multiple designs for the application

 What to Prototype?
o Technical issues
o Work flow, task design
o Screen layouts and information display
o Difficult, controversial, critical areas
 Different Types of Prototyping
o Low-Fidelity Prototyping
 Does not look very much like the final product
 Uses materials that are very different from the intended final version
 Paper and cardboard rather than electronic screens and metals
 Ex. Palm pilot
 Used during early stages of development
 Cheap and easy to modify so they support the exploration of alternative designs and
ideas
 It is never intended to be integrated into the final system
 For exploration only
 Examples
 Storyboard
- Originally from film, used to get the idea of a scene
- Snapshots of the interface at particular points in the interaction
- Series of sketches
 Shows how a user can perform a task using the device
- Often used with scenarios
 Brings more detail to the written scenario
 Offers stakeholders a chance to role play with the prototype by
stepping through the scenario
 Sketching
- Drawing skills are not critical
 Symbols to indicate tasks, activities, objects
 Flowcharts for time-related issues
 Block diagrams for functional components
 Index cards
- Small cards (3 x 5 inches)
- Each card represents one screen
 Multiple screens can be shown easily on a table or the wall
- Thread or lines can indicate relationships between screens
 Sequence
 Hyperlinks
- Often used in website development
 ‘Wizard of Oz’
- Simulated interaction
 The user thinks they are interacting with a computer, but a
developer is providing output rather than the system
 o High-Fidelity Prototyping
 Choice of materials and methods
 Similar or identical to the ones in the final product
 Looks more like the final system
 Appearance, not functionality
 Common development environments
 Macromedia Director, Visual Basic, Smalltalk
 Web development tools
 Misled user expectations
 Users may think they have a full system

 Advantages/Disadvantages

Prototype Advantages Disadvantages

- low developmental cost - limited error checking
Low-fidelity prototype - evaluate multiple design - navigational and flow
concepts limitations
- more expensive to develop
- fully interactive
- time consuming to build
- look and feel of final product
High-fidelity prototype - developers are reluctant to
- clearly defines navigational
change something they have
scheme
crafted for hours

 Compromises in Prototyping
o All prototypes involve compromises
o Compromises in low-fidelity prototypes
 Device doesn’t actually work
o Compromises in high-fidelity prototypes
 Slow responses
 Sketchy icons
 Limited functionality available
o Two common types of compromise
 Horizontal
 Provide a wide range of functions, but with little detail
 Vertical
 Provide a lot of detail for only a few functions
CONSTRUCTION
 Creation, manufacturing of the final system
o Based on experience and feedback gathered from the prototypes
 Development philosophy
o Evolutionary prototyping
 Involves evolving a prototype into the final product
o Throw-away prototyping
 Used as a stepping stone towards final design
 Prototype is thrown away and the final system is built from scratch
 Quality
o Although prototypes have undergone extensive user evaluation, the final product still has to be
subjected to rigorous quality testing
 Reliability
 Robustness
 Maintainability
 Integrity
 Portability
 Efficiency

DESIGN OBJECTIVES
 Identify critical interaction aspects of the product (Conceptual Design)
 Select the appropriate tools and method to provide interactivity (Physical Design)
 Realize that design of products usually involves several intermediate stages
 Consider the importance of early feedback for interaction design (Prototypes and Scenarios)

CONCEPTUAL DESIGN
 A description of the proposed system in terms of a set of integrated ideas and concepts about what
it should do, behave and look like, that will be understandable by the users in the manner intended

 Transformation of user requirements/needs into a conceptual model

 Stepwise refinement
o Iterate, iterate and then iterate some more
 Consideration of alternatives
o Prototyping & scenarios

 Three Perspectives for a Conceptual Model

o Interaction mode
 How the user invokes actions
 Activities by the use and the system’s responses
 Activity-based
 Instructing, conversing, manipulating and navigating, exploring and browsing
 Object-based
 Structured around real-world objects
 Process-oriented
 Support work processes
 Ex. financial software
 Product-oriented
 Develop products that users create, modify and maintain
 Ex. Microsoft Excel, Word
 o Metaphors
 Interface Metaphors
 Partial mapping of the software to a real object
 Combine familiar knowledge with new knowledge
 Help the user understand the product

 Three-step process for choosing a good metaphor

 Understand system functionality
 Identify potential problem or complicated/critical areas
 Generate metaphors

 Evaluation of a Metaphor
 How much structure does it provide?
o Requires a sound and familiar structure
 How relevant is it to the problem?
o Reduce confusion and false expectations
 Is it easy to represent?
o Visual and audio elements combined with words
 Will the audience understand it?
 How extensible is it?
o Extra aspects that can be useful later on

o Interaction Paradigm
 Coherent collection of interaction methods
 Addresses environmental requirements
 Desktop paradigm
 WIMP interface (windows, icons, menus and pointers
 Ubiquitous computing
 Pervasive computing
 Wearable computing
 Mobile devices

o Running Example:
 Shared Calendar
 Used in a corporate environment for employees to maintain their schedule and
organize meeting based on that

 Expanding the Conceptual Model

o Functionality
 Task allocation
 What will the product do and what will the human do?
o Relationship of subtasks
 Categorizations
 All actions related to one particular aspect
 Temporal associations
 Sequential
 Parallel
 Ex. CASE tools
 o Information
 Data required to perform the task
 Transformation of data by the system
 Scenarios in Conceptual Design
o Express proposed or imagined situations
o Used throughout the design process in various ways
 Scripts for user evaluation of prototypes
 Concrete examples of prototypes
 As a means of co-operation across professional boundaries (shared understanding of the
system)
 Sell ideas to users and potential customers
o ‘Plus’ and ‘Minus’ scenarios
 Exploration of extreme cases

 Prototypes in Conceptual Design

o Evaluation of emerging ideas
 User feedback
 Feasibility
 Choice of methods and materials
o Continuous prototyping
 Low-fidelity prototypes early on
 High-fidelity prototypes later
o Evolutionary prototyping
 Early prototypes are gradually enhanced and augmented
 Appearance
 Functionality
PHYSICAL DESIGN
 Concrete, detailed issues of designing the interface
o Although inaccurate, the term is also used for software-based systems
 Pervasive physical/conceptual design

 Guidelines for physical design

o Nielsen’s heuristics
o Shneiderman’s eight golden rules
o Style guides: commercial/corporate purposes
 Collection of design rules and principles
 Decide ‘look and feel’

 Physical Design for Computer Interaction

o Different kinds of ‘widgets’
 Dialog boxes
 Toolbars
 Icons
 Menus, etc.

o Emphasis
 Menu Design
 Arrangement
- Number of menus
- Length
- Order of items
 Grouping
- Categorization
- Visual division
 Colours
 Diving lines
 Structure
- Sub-menus
- Dialog boxes
 Terminology
 Constraints
- Screen size
- Input method
 Context
- Applicability of entries

 Icon Design
 Good icon design is difficult
- Has to be widely acceptable
- Meaning must be readily perceivable
- Distinguishable from each other
 Meaning of icons
 - Cultural and context sensitive
 Practical tips
- Always draw on existing traditions or standards
- Concrete objects or things are easier to represents than actions

 Screen Design
 Splitting functions across screens
- Moving around within and between screens
- How much interaction per screen
- Serial or workbench style

- Task analysis as a starting point

 Each screen should contain a single simple step
 User frustration
 Too many simple screens
- Context
 All pertinent information must be made available at relevant times
 Multiple screens open at once
 Individual screen design
- White space
 Balance between information/interaction and clarity
- Grouping of items
 Separation with boxes, lines, colors

- User attention
 Directed to salient point
 E.g. via colour, motion, etc
 Animation is very powerful but can be distracting
- Organization
 Grouping
 Physical proximity, colour, shape
 Structure
 Connections between related items
- Trade-off
 Sparse population vs. overcrowding

 Information Display
 Context
- Relevant information is available at all times in the most efficient format
for the specific task
 Types of information
- Imply different kinds of display
- Alpha-numerical, chart, graphs
 Consistency
- Paper display and screen data entry
- Different screens with similar information (customizable)
- Information content vs. presentation

SUMMARY
 Different kinds of prototyping is used for different purposes and at different stages
 Construction: Make sure the final product is engineered appropriately
 Conceptual design (the first step of design)
 Physical design: menus, icons, screen design, information display
 Prototypes and scenarios are used throughout design as well