UPA 2011 - Better Usability Through Visualization

43
UPA – Better Usability Through Visualization Chuck Konfrst, Senior Visualization Designer / Director of Branding & Communications

Transcript of UPA 2011 - Better Usability Through Visualization

Page 1: UPA 2011 - Better Usability Through Visualization

UPA – Better Usability Through Visualization

Chuck Konfrst, Senior Visualization Designer / Director of Branding &

Communications

Page 2: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Welcome!

Agenda• Introductions • What Is Visualization? • Visualization Demonstration• Group Breakout • Mock Project Requirement Sessions• Questions & Answers

Page 3: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Introductions

• Name• Company• Role• What you’d like to get out of the workshop• Favorite Cartoon Character & Why

Page 4: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

What Is Visualization?

Page 5: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

“68% of projects fail, run late, or are OVER

budget.”

- The Standish Group, 2009 Chaos Summary

Report“70% of REWORK is attributed to correcting requirements

errors.”

- Meta Group“30% of project costs are

REWORK .”

- Forrester Research

Page 6: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization for Software Definition

Today, the ability to pre-visualize a software application has become a reality.

Using scenarios as the initial “sketches” of a storyboard, visualization tools allow software definition teams to model entire applications before writing a single line of code.

Page 7: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization for Software Definition

AutoCAD/CAM technologies that revolutionized the automotive, aeronautical, and construction industries.

Now, software visualization tools can simulate applications and help stakeholders truly understand process flow, behaviors, look and feel, and other aspects of the application before it is built.

Page 8: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

• Reduction of Requirements Cycles by at least

30%

• Reduction of Requirements Defects by at least 80%

• Improved User Experience

• Increased Innovation

The key benefit to visualization is the ability to validate your requirements from the start with stakeholders

This, in turn, leads to the realization of the following benefits:

• Reduction of Project Delivery Times by at least 35%

© 2010 OneSpring, LLC. All Rights Reserved.

Page 9: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Page 10: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Most SDLC methods define requirements late in the lifecycle. These

requirements typically lack any experiential aspect. They represent

only functionality, not experience.

Tradition

al

Page 11: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization occurs at the beginning of the lifecycle and provides

stakeholders the ability to experience and validate requirements from

the start.

The New Approach

Page 12: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization is a framework for how to better innovate and

collaborate

The New Approach

Page 13: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Accelerating the time to understanding and

consensus provides a far greater return on

investment.

100%Visualization

Traditional

50%

0%

The Benefit

Page 14: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Visualization Tools

Page 15: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Caveats

- The Tools aren’t as important as

‣ The People

‣ The Process

‣ The Culture

Page 16: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Tools

• iRise

• Axure

• Balsamiq

• Blueprint

• Flairbuilder

• JustInMind

• IBM Rational Composer

• Visual Studio 2010 Ultimate

• Adobe Flash Catalyst

• Visio/Omnigraffle

• Microsoft PowerPoint

Page 17: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Demonstration

Page 18: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Previsualization

Page 19: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

The Paradox

While the software definition process and its artifacts have multiplied over the years, with the rise of methods such as Waterfall, Rational Unified Process, Agile, and more – the surprising fact is that projects are failing at a higher rate than ever before.

Page 20: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Increased Complexity and Costs

This failure occurred because software applications were rapidly increasing in both size and complexity, outstripping methodologies for development.

While traditional processes and artifacts were helping, more efficient, effective communication and elicitation was needed to ensure project success. The shortfall left by established methods was significant.

Page 21: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Consumer Demand

The motion picture industry was experiencing the same dilemma.

Audiences were more savvy and demanding more from entertainment. With the bar raised, filmmakers also needed to improve their process and tools to more effectively create their art.

Page 22: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Previsualization

• is a collaborative process that generates preliminary versions of

application features, functionality and process flows in a low-

resolution format

• enables the project stakeholders to more effectively communicate

a

shared vision and understanding of a project through visual

exploration

Page 23: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Previsualization

• Enables true cross-functional collaboration

• Provides a preliminary project experience, from concept to use

• Includes application features, functionality, and process flows in

a low-resolution format

• Provides stakeholders with a source for a single, shared vision

• Enables rapid visual exploration of project goals and alternate

solutions

Page 24: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Previsualization

• For the first time, a director, cast, and crew could envision every shot, sequence, and f/x in a movie before actual production was underway.

• Every aspect of a movie could be planned and analyzed before shooting began—and nuances, special effects, and point of view could be thoroughly explored.

• Director, cast, and crew could completemany takes on a sceneor sequence, all beforefilming started.

Page 25: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Page 26: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Previsualization Live Website

Header

Hotel NameProgress Bar

Reservation ProcessCheck-In DateCheck-Out DateRate PreferencesGroup/Corporate NumbersNumber of RoomsNumber of AdultsNumber of ChildrenSmoking PreferenceIATA Number

Hotel PhotoPersonalization Content Slots

Page 27: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Low Resolution Live Website

Page 28: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Medium Resolution Live Website

Page 29: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

High Resolution Live Website

Page 30: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Fidelity Level Visual Functional Requirements

Previsualized • Text description of key page areas

• Basic descriptions provided• Text or placeholders describing

behavior

• Initial concepts and ideas• Vision statements• High level business goals

Low • Basic elements present at level of detail sufficient for basic comprehension, but no more

• Not polished

• Static pages lacking dynamic behavior

• Text description or blocked in areas

• Simple, linear navigation

• High level requirements only• Documentation of what is not

necessarily shown in visualization

Medium • Blocked-in text and objects, lorem-ipsum

• Interactive wireframes and advanced onionskinning

• Usability/UX elements introduced and testable

• Selected branding elements may be applied

• Blocked in elements like active form fields

• 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 inputs operational and

accurate

• Continued field level definitions• Full traceability• Capture of functional

specification elements

Levels of Fidelity

Page 31: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Joint Application Modeling®

Page 32: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

The session is comprised of these essential “ingredients”…

Small Group Collaboration

Rapid IterativeDesign

Visualization

+ + +

Flow

JAM Session®

Page 33: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Small Group Collaboration

Collaboration in small groups provides an

effective means of problem solving within

a structured environment

Complex problems that go beyond the

routine require the communication of

shared knowledge to create viable

solutions/approaches

Page 34: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

The roles “match” the work environment and support the task flow…

Analyst “Left Brain”

Designer “Right Brain”

ProducerFacilitates

Flow

BusinessSME on “What?”

ITSME on “How?”

Documentation Screen Visualization Screen

Page 35: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Insight – observation to gain

valuable knowledge and context

on the business, customer and

technologies

Clarity - design activities that

crystallize the gathered insights to

form a model of the experience

Focus – socialization and

measurement of the experience

model to provide continuous

improvement and validation

Page 36: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Pairing documentation with visualization

means that the requirements written by the

Visualization Analyst:

• Reflects the wishes, wants, and needs of

the stakeholders

• Aligns (traces) directly to visualized pages of the future system

• Coincides with a rich, interactive vision of

the future system• Eliminates ambiguity of verbally elicited

requirements

Documentation

© 2010 OneSpring, LLC. All Rights Reserved.

Page 37: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

”Flow also happens when a person’s skills

are fully involved in overcoming a challenge

that is just about manageable, so it acts as a

magnet for learning new skills and increasing

challenges. If challenges are too low, one

gets back to flow by increasing them. If

challenges are too great, one can return to

the flow state by learning new skills.”

Flow

- Mihaly Csikszentmihalvi (July. 1997) Psychology Today

Page 38: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

A key aspect to generating the Flow includes

both the environment in which the JAM

Session takes place and the mental

investment by the stakeholders

Goals are clear

Feedback is immediate

Balance between opportunity & capacity

Concentration deepens

The present is what matters

Control is no problem

Sense of time is altered

Loss of ego

Flow

Page 39: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Mock Session

Page 40: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.© 2010 OneSpring, LLC. All Rights Reserved.

Page 41: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Session

• Description of the Project • Introduction of Stakeholders • Introduction of the Requirements Team

• Visualization of Project Requirements

Page 42: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

What Can You Do?

• Use visualization as a tool during requirements elicitation

• Partner with a Business Analyst

• Don’t worry about the tool, focus on the people & process

© 2010 OneSpring, LLC. All Rights Reserved.

Page 43: UPA 2011 - Better Usability Through Visualization

© 2011 OneSpring® All Rights Reserved.

Visualization

Now It’s Your Turn!