envisioning experience
Post on 27-Jan-2015
113 Views
Preview:
DESCRIPTION
TRANSCRIPT
|
Envisioning Experience:
Using Simulations to Define and Create
Improved Customer/User Experience
Presented by:
Maggie Reilly, User Experience Practice Lead (OneSpring)
Stephanie Sansoucie, Senior User Experience Specialist (Ascendant)
|
Agenda
• What is visualization?
• What are the key ingredients to visualization?
• How can we select the right level of fidelity?
|
Visualization Defined
What is Visualization?
Simply put, visualization helps you see what you’re going to get before you
start implementing the solution.
Why Visualization?
•Relies on collaboration and iteration
•Enhances capture and communication of ideas and information
•Provides best return on investment when used early & repeated
•Is supported by many different tools
|
Visualization Brings People Together
Visualization…
•Facilitates agreement among stakeholders on both requirements and solutions
•Enables stakeholders to see requirements for specific goals
•Promotes exploration while reducing rework
•Enhances communication throughout the project
|
•Visualization reduces risk.
• Visualization reduces development time.
•Visualization supports effective cross-functional collaboration.
•Visualization helps tells a story.
Business Benefits for Visualization
|
Visualization Clarifies Information & Business Processes…
…for users, project team members and stakeholders.
|
Visualization Transforms Requirements…
…into an immediate and shareable experience.
|
An effective visualization incorporates four key ingredients.
Small Group
Collaboration
Rapid
Iterative
Design
Appropriate
Fidelity in
Simulation
+ + +
“Flow” State
|
Small Group
Collaboration
Key #1: Small Group Collaboration
• Collaboration in small groups supports problem
solving within a structured environment.
• Cross-functional teams break down knowledge silos
and provide real-world solutions to problems that
require shared understanding.
|
A well-managed visualization closely matches roles with skill sets.
Analyst―Left Brain‖
Designer―Right Brain‖
ProducerFacilitates Flow
BusinessSME on ―What?‖
ITSME on ―How?‖
Documentation Screen Visualization Screen
Collaboration Requires Role & Skill Set Alignment
|
Key #2: Rapid Iterative Design
Iterative approach to modeling a solution…
• Allows team members to rapidly see the ―big picture‖
• Gains stakeholder consensus
• Starts high-level drills down to define specific interactions and design
patterns
|
How detailed does the simulation need to be to achieve our goal in this stage?
Key #3: Appropriate Fidelity in Simulation
concept
|
Indicators of Effective Team Flow
• Goals are clear.
• Feedback is immediate and open.
• Opportunity and ability/capacity balance.
• Concentration deepens.
• Focus remains on the here and now.
• Control issues vanish.
• Awareness of passage of time recedes.
• Ego (self-consciousness and self-importance) disappears.
• Judgment is suspended.
Flow
During flow, team members share an understanding of the solution & its value.
Key #4: Flow
|
Effective Team Flow
• Models are socialized to encourage acceptance, build understanding, and measure fidelity to expectations and requirements.
• Use of models is measured and analyzed to validate functions and assess achievement of objectives.
• Insights drive models of experience; models, in turn, elicit deeper understanding of requirements and help create a new context that resolves issues and provides solutions.
• Observation and discussion lead to a grasp of context for the business need, the customer/user experience, and the required technologies.
InsightIterative
Solutions
SharingEvaluation
|
How can we select the appropriate level of fidelity?
|
Levels of Fidelity for Visualization
Fidelity
Level
Visual Elements Functional Elements Requirements Identified
Sketch(also called
Pre-
visualization)
• Text description of key page
areas; possible graphic
placeholders; comments and
questions. Can be used to
depict information
architecture.
• Basic flow/action captured
• Text or placeholders
describing behavior
• Interaction limited to
movement from screen to
screen
• Initial concepts and ideas
• Vision statements
• High level business goals
Low • Key elements depicted at level
of detail sufficient for basic
comprehension, but no more
• Not polished
• May include IA diagrams
• Static pages, no dynamic
behavior
• Text description or blocked in
areas
• Simple, linear navigation
• High-level requirements only
• Documentation of known or
desired elements not shown
in visualization
Medium • Page layouts (blocked-in text
and objects, lorem-ipsum text)
• Interactive wireframes and
advanced onion skinning
• Usability/UX elements
introduced and testable
• Selected branding elements
may be applied
• Blocked-in elements like
active form fields, key action
buttons, and primary and
secondary navigation
• Deeper linking between
page-level elements, allowing
user to interact with
visualization
• Special conditions included
• Business process scenarios
and basic traceability
• Initial business rules
• Initial functional
requirements, particularly
those not visualized
• Initial field level definitions
High • Full visual skinning
• Realistic/highly evolved design
• Behaves like ―the real thing‖
• System and some user inputs
operational and accurate
• Continued field level
definitions
• Full traceability
• Capture of functional
specification elements
|
Example: Low Fidelity
|
Example: Medium-High Fidelity
|
Fidelity Level Pros and Cons
Fidelity Level Pros Cons UX Design Activity
Sketch Quick and easy to generate
and adjust; useful for
capturing additional ideas
and concepts
Of limited use for
viewers in any role who
are ―literalists‖
Paper prototypes for early
exploration of concepts;
validate business and user
goals in group reviews.
Low Fast and simple to make
and refine; especially useful
for workflows
Can’t be used to
measure impact of
visual/graphic design or
content-heaving sites
Define information architecture
(navigation, site structure) and
identify interaction flows.
Medium Provides flavor of
experience for
conceptualists and
literalists; shows up gaps
More labor intensive to
create, less flexible;
adjustments have
waterfall impact.
Identify page types and
templates, explore styles and
color palettes, identify
interaction design patterns and
content types. Confirm
information architecture and
navigation.
High Simulates user experience
accurately and in depth;
supports comparison of
visual designs
More attributes make
comparisons less viable;
changes are labor
intensive or restricted to
A/B comparisons
Make final selections for flows,
skins; Adjust highly specific
design elements; use to
baseline and validate designs
and interactions
|
Visualization Fidelity Audiences and Uses
Fidelity Audience Use Goal
Sketch Project Team, Product
Manager and other Primary
Stakeholders
Brainstorm designs and
objectives. Blue-sky
experience and dream the
ideal user experience /
business results.
Confirm goals and objectives
for business and consumers;
define concepts.
Low User Advocates, User
Representatives, Cross-
functional Project Team
Inspire design sessions and
guide requirements gathering.
Produce storyboards and
document use cases.
Explore/expand or refine
goals; quantify objectives;
select and ―sell‖ concepts.
Medium SMEs, User (Consumer)
Advisory Boards, Product
Managers, Decision Makers,
Designers, Architects, and
Lead Developers
Embody designs and
establish refined system and
functional requirements;
capture and define business
rules. Blend with user
requirements.
Stabilize and refine
requirements; build library of
styles, templates, icons, and
design patterns.
High Developers, Representative
Users, C-Suite Decision
Makers, Marketing Team,
Product Managers
Early test of user acceptance
and measurement of
achievement of user
requirements. Present
chosen designs and map out
detailed strategy for delivery
and maintenance. Confirm
rules and requirements.
Confirm and validate
functional and system
requirements and business
rules. Measure achievement
of business and user goals.
Set standards for delivery
experience and for future
enhancements/releases.
|
Fidelity Creators and Consumers
Fidelity Level Project Phase Creator / Contributors Usability Activity
Sketch Planning, Inception Interaction Designer, Business Analyst,
Usability Analyst, Product Manager,
SME
User research – explore user
wish lists and preferences,
float initial concepts
Low Inception, Design Interaction Designer, Business Analyst,
Usability Analyst, Product Manager,
SME
Validate concepts in
walkthroughs with SMES,
stakeholders, and User
Advisory Board members
Medium Inception, Design Interaction Designer, Business Analyst,
Key Stakeholders, Visual Designers,
Marketing Specialists
Validate interaction and visual
designs in presentations,
walkthroughs, and review
sessions with stakeholders,
SMEs, product and project
managers, and team
members
High Design, Development Interaction Designer, Business Analyst,
Key Stakeholders, Visual Designers,
Marketing Specialists, System
Architects, Lead Developers
Measure acceptance,
usability, and validity of design
concepts and visual
treatments during formal user
testing.
|
Visualization Tools
Tool Fidelity Level Pros Cons
White Board / Flip
Chart
Sketch Anyone can use; excellent for on-
the-fly and exploration
Not easy to preserve, distribute, or
update
Visio / Omnigraffle Low to Medium Viewer available; commonly used;
low learning curve; stencils =
templates
Not as effective for high resolution
or more complex interaction
Axure Medium to High Supports interactive prototyping;
moderate learning curve; don’t
need programming skills
Still relies on Object-Oriented
thinking; difficult for non-
programmers
iRise Low to Medium to High Supports interactive prototyping;
moderate learning curve; don’t
need programming skills; can
easily be used to document
requirements
Still relies on Object-Oriented
thinking; difficult for non-
programmers; very expensive
Flash Medium to High Supports interactive prototyping;
moderate learning curve; most
browsers support Flash; may be
able to use as part of final product
Action scripting required for
complex interactions
Flex Medium to High For programmers, this is a
powerful design tool. Also
supported by most browsers (.swf)
For non-programmers, this may
have a steep learning curve.
Dreamweaver Medium to High Programming skills recommended
but not required; produces real
prototype for those who know how
to code; commonly use;
Can produce sloppy code if not
used with care
|
Visualization Decision
Ask yourself… Common Responses Considerations
What project phase will the
visualization serve?
Inception, Planning, Design, Development The earlier in the project the visualization is
introduced, the more uses it supports.
Visualization can grow and adapt as the
project progresses.
What is the purpose for the
visualization?
Refine concept, identify requirements, plan
strategy or use of resources, select workflow,
interaction, or visual design
Visualizations can both help and hinder—too
much detail too early can squelch creativity.
Visualization is most effective as a means for
quick, clear communication of ideas.
Who will consume (use) the
visualization?
Project team, end users, stakeholders,
middle or upper management, decision
makers, customers, Marketing, architects,
developers
Visual literacy and ability to think abstractly
enable most effective consumption of a
visualization.
Who will create the
visualization?
Designers, analysts, developers Creator skill set, including communication
skills, determines efficacy of visualization.
Who will contribute to / critique
the visualization?
Designers, analysts, product managers,
SMEs, stakeholders, user
representatives/advocates
Critiques are a form of creativity. Invite key
reviewers and be prepared to iterate the
visualization.
What deliverables will result
from the visualization?
Simulation, prototype, beta release,
requirements documents, use cases
Visualization can be the raw material for a
variety of evaluations and for communicating
not only concepts but design details and
functional, system, and application
requirements.
What tool will be used for the
visualization?
See previous slide. Tool selection should be determined not only
by skill set and availability, but also
restrictions for sharing deliverables.
|
From initial sketches to detailed information design, visualization uses
dynamic imagery to communicate both concepts and requirements.
Visualization provides a more universal understanding and helps both
stakeholders and project team members to identify gaps, work through
problems, and build a solution that satisfies both business and
customer/user needs.
|
Examples
|
Exercises in Visualization: Scenarios
|
1. Rental Car Company
• TASK: Move an existing mainframe application to a web-based portal. Tie the
application to existing website support and communications. B2B application.
Application enables customers (franchised car rental locations) to reserve and lease
appropriate vehicles for customers. Sites are not associated with airports or car
dealers or resellers but are stand-alone shops. Franchise owners are interested in
accurately sizing number and type of most-requested/best-earning vehicles.
• GOAL: Provide a web front end to an existing application, with improved user access
and speedier transactions. Improvements to interactions are expected but additional
service offerings not to be supplied during this phase.
• QUESTIONS: How can visualization help? How does user research/testing enter
in? What methods might be used? What level of fidelity would work best?
27
|
1. Rental Car Company - Solution
1. Mid-fidelity simulation is used to propose and explore alternate
designs, rapidly iterated.
2. Frequent review by SMEs and product manager enable interaction
designer to quickly refine designs and adjust navigation.
3. Regularly scheduled usability tests with three to five customers to
validate key design decisions.
4. High-fidelity simulation emerges from iteration of mid-fidelity solutions.
5. Project team derives requirements and specifications from high
fidelity simulation to which client’s visual design package and
branding has been applied.
28
|
2. Pharmaceutical Company’s Website
for Physicians
• SITUATION: Existing website provides basic product information plus the
ability to order samples and patient (consumer) information materials.
Detailed product information and samples are available from the brand
websites (which are not to be phased out) and from pharmaceutical reps.
• GOALS: Business goals include reducing physician dependence on
pharmaceutical refs, increasing online orders for products, and increased
physician traffic overall. Goals for intended audience are to make the site a
destination for physicians.
• QUESTIONS: How can visualization help? What would it be used to
accomplish? What level of fidelity would work best? What tool might be
best?
29
|
2. Pharmaceutical Company’s Website
for Physicians – Solution
1. Initial concepts shown in high fidelity, to evoke possibilities of customer
experience.
2. Design efforts carried out in first in low fidelity and then gradually increasing
in to mid-fidelity as additional features and functional requirements are
uncovered and simulated.
3. Some design concepts are abandoned and business goals are
reformulated.
4. Validated designs are developed in high-fidelity simulations and used as
basis for formal usability testing.
5. Revised high-fidelity designs based on results of user tests provide basis for
requirements and detailed specifications.
30
|
3. Retail Sales & Distribution – Tobacco Products
• CURRENT: Existing application enables retailers to order product plus promotional
materials and to qualify, by means of sales and revenues, for additional promotional
support and special rates for certain products.
• TASK: Company wants to move the application from client-server base to web base
and provide improved interaction and services for retailers.
• GOAL: Reduce interaction times and compress product turn-around (speed up
orders and distribution), more accurately track distribution and sales, identify growth
areas and declines more rapidly and accurately, and target just-in-time distribution
and selected promotions to stimulate sales and revenue growth.
• RESTRICTION: At this time, while interface can be enhanced as needed, backend
systems are not to be changed.
• QUESTIONS: How can visualization help? What would it be used to accomplish?
What level of fidelity would work? What tool might be best?
31
|
3. Retail Sales & Distribution – Tobacco Products -
Solution1. User experience designer captures basic flow for existing application in mid-fidelity
simulation. This simulation is validated and critiqued by project team to document
opportunities for process improvement.
2. Information Technology SMEs, Product Managers, and Marketing personnel join with
user experience personnel to recommend process improvements based on mid-fidelity
simulation.
3. Target audiences review this simulation at customer conference and provide formal and
informal feedback.
4. Revised mid-fidelity simulation is used to explore and adjust updated process flows and
overall navigation for a web-based front end and to validate interaction with existing
backend.
5. Mid-fidelity simulation is ―acquired‖ and adapted by Marketing to accommodate
branding.
32
|
4: Bank Website and Application Redesign
• CURRENT: While this large national bank already has a much-trafficked website, the
company wants to move as many transactions as possible online, including all payments, all
inquiries and transfers, distribution of statements, application for loans, and many signature
transactions—everything except physical deposits. Bank intends to go paperless, provide
services 24/7, and complete transactions in real time.
• CONSIDERATIONS: This functionality is already available, but customers resist automatic
payments and some customers do not want to be paperless. Also, customers are known to be
somewhat suspicious of or reluctant to embrace real-time transactions as they lose traditional
―float‖ to the bank.
• GOALS: Business goals include reducing cost and float and improving customer satisfaction
and trust without providing additional service offerings. Goals include a site that induces/invites
and supports more online transaction.
• QUESTIONS: How can visualization help? What would it be used to accomplish? What level
of fidelity would work? What tool might be best?
33
|
4: Bank Website and Application Redesign - Solution
1. Internal team iterates analyzes customer data, including survey responses,
to propose new process flows in low-fidelity simulation.
2. Teams iterate simulation with Information Technology team and Product
Managers to develop mid-fidelity simulation for process flows.
3. New business requirements are identified and additional functional
requirements are captured.
4. Mid-fidelity solutions are reviewed by a Customer Advisory Board and are
also compared to competitor solutions by an independent research firm.
5. Research results are used to revise mid-fidelity solutions, which are used as
model for revising applications at the site.
34
|
Q & A
|
Thank You!
We’re pleased to be part of UPA 2011 and we very much appreciate your
participation and your comments.
Questions? Feel free to connect with us!
Maggie Reilly
Email: sondancer1@rocketmail.com
Stephanie Sansoucie
Twitter: @jolisouci
Email: stephanie.sansoucie@atech.com
Linked In: www.linkedin.com/in/stephaniesansoucie
Company Website: www.atech.com
|
References
Buxton, Bill. Sketching User Experiences. Morgan Kauffmann, 2007.
Csíkszentmihályi, Mihály. Creativity: Flow and the Psychology of Discovery and Invention, Harper
Perennial, 1996; Finding Flow: The Psychology of Engagement with Everyday Life, Basic
Books, 1996; Good Business: Leadership Flow, and the Making of Meaning, Penguin Books,
2003.
Garrett, Jesse James. The Elements of User Experience: User-Centered Design for the Web and
Beyond. New Riders Press, 2010.
Jarrett, Caroline, Gaffney, Gerry, and Krug, Steve. Forms That Work. Morgan Kauffmann, 2008.
Johnson, Jeff. Simple Guide to Understanding User Interface Design Rules. Morgan Kauffmann,
2010.
Quesenbery, Whitney, and Brooks, Kevin. Storytelling for User Experience. Rosenfeld Media, 2010.
Synder, Carolyn. Paper Prototyping, Morgan Kauffmann, 2003.
Tidwell, Jenifer. Designing Interfaces. O’Reilly Media, 2011.
Tufte, Edward. The Visual Display of Quantitative Information; Envisioning Information; Visual
Explanations, Images, and Quantities, Evidence and Narrative; Beautiful Evidence. Graphics
Press.
Wroblewski, Luke, Web Form Design: Filling in the Blanks. Rosenfeld Media. 2008. 37
top related