UPA 2011 - Better Usability Through Visualization

UPA – Be(er Usability Through Visualiza8on

Chuck Konfrst, Senior Visualiza8on Designer / Director of Branding & Communica8ons

Welcome!

Agenda • Introduc8ons • What Is Visualiza8on? • Visualiza8on Demonstra8on • Group Breakout • Mock Project Requirement Sessions • Ques8ons & Answers

© 2011 OneSpring® All Rights Reserved.

Introduc8ons

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


Visualiza8on

What Is Visualiza8on?


“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


Visualiza8on for So]ware Defini8on

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.


Visualiza8on for So]ware Defini8on

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.


• 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. © 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.

Traditional


Visualization occurs at the beginning of the lifecycle and provides stakeholders the

ability to experience and validate requirements from the start.

The New Approach


Visualization is a framework for how to better innovate and collaborate

The New Approach


Accelerating the time to understanding and consensus

provides a far greater return on investment.

100% Visualization

Traditional

50%

0%

The Benefit


Visualiza8on

Visualiza8on Tools


Caveats

-  The Tools aren’t as important as

‣  The People

‣  The Process

‣  The Culture


Tools

•  iRise

•  Axure

•  Balsamiq

•  Blueprint

•  Flairbuilder

•  JustInMind

•  IBM Rational Composer

•  Visual Studio 2010 Ultimate

•  Adobe Flash Catalyst

•  Visio/Omnigraffle

•  Microsoft PowerPoint


Visualiza8on

Demonstra8on


Visualiza8on

Previsualiza8on


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.


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.


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.


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


Previsualiza8on

•  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!


Previsualiza8on

•  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 complete!many takes on a scene!or sequence, all before!filming started.


Previsualiza8on Live Website

Header

Hotel Name Progress Bar

Reserva8on Process Check-‐In Date Check-‐Out Date Rate Preferences Group/Corporate Numbers Number of Rooms Number of Adults Number of Children Smoking Preference IATA Number

Hotel Photo Personaliza8on Content Slots


Low Resolu8on Live Website


Medium Resolu8on Live Website


High Resolu8on Live Website


Fidelity Level Visual Func1onal Requirements

Previsualized •  Text descrip8on of key page areas

•  Basic descrip8ons provided •  Text or placeholders describing

behavior

•  Ini8al 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

•  Sta8c pages lacking dynamic behavior

•  Text descrip8on or blocked in areas

•  Simple, linear naviga8on

•  High level requirements only •  Documenta8on of what is not

necessarily shown in visualiza8on

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

•  Interac8ve wireframes and advanced onionskinning

•  Usability/UX elements introduced and testable

•  Selected branding elements may be applied

•  Blocked in elements like ac8ve form fields

•  Deeper linking between page-‐level elements, allowing user to interact with visualiza8on

•  Special condi8ons included •  Business process scenarios and

basic traceability •  Ini8al business rules •  Ini8al func8onal requirements,

par8cularly those not visualized •  Ini8al field level defini8ons

High •  Full visual skinning •  Realis8c/highly evolved design

•  Behaves like “the real thing” •  System inputs opera8onal and

accurate

•  Con8nued field level defini8ons •  Full traceability •  Capture of func8onal

specifica8on elements

Levels of Fidelity


Visualiza8on

Joint Applica8on Modeling®


The session is comprised of these essential “ingredients”…

Small Group Collabora8on

Rapid Itera8ve Design

Visualiza8on

+ + +

Flow

JAM Session®


Small Group Collabora8on

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


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

Analyst “Left Brain” Designer “Right Brain” Producer Facilitates Flow

Business SME on “What?”

IT SME on “How?”

Documentation Screen Visualization Screen


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


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"


”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


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


Visualiza8on

Mock Session


Session

•  Descrip8on of the Project

•  Introduc8on of Stakeholders

•  Introduc8on of the Requirements Team

•  Visualiza8on of Project Requirements


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


Visualiza8on

Now It’s Your Turn!


UPA 2011 - Better Usability Through Visualization

Business

Transcript of UPA 2011 - Better Usability Through Visualization