Confidential and Proprietary © 2007 Blast Radius Inc. IA for Rich Interaction: Tools and Techniques from the Trenches Anthony Hempell | Manager, Usability & Interaction Adrian Chong | Interaction Architect

Introductions Anthony Hempell, Manager of Usability and Interaction Architecture, Blast Radius Adrian Chong, Interaction Architect, Blast Radius

San Francisco Vancouver New York Amsterdam Toronto Founded in 1996 Customer Experience Innovation: Consumer-Focused 350 Employees Blast Radius

Blast Radius: Clients

What we’re going to talk about Anthony: documenting user types and complex interactions in wireframes. Adrian: hyperlinking user flows; using drawing tools to demonstrate interactive content; using prototyping.

User types and complex interactions Anthony Hempell

Client: DIRECTV Largest satellite TV service in the US 15+ million subscribers DIRECTV.com: full redesign; 18 months Branding, IA, usability, functional redesign, new features

Documenting user types: issues Communicate different user types (anonymous, non- member, member) Show the material differences between states for front-end and back-end teams One user can transition between multiple types over months, weeks or even during a session. Complex business rules

User Personas Customers Sports Fans Movie Watchers Variety Seekers Loyal, but risk of moving to better offers Prospects DISH Subscribers Cable Subscribers Looking to switch or to upgrade TV experience

Anonymous ProspectsMembers Return prospect Registered prospect Authenticated Registered prospect Registered Member Authenticated Registered Member Generic Member Anonymous Registered prospect Anonymous Registered Member

User type definition

Mapping user type & system actions

Mapping user type transitions

Adding user types to site maps / flows

Adding user types to wireframes

Documenting user types: solutions Create coded system representing user types for use on all documentation Spend the time necessary to come up with the correct number of user types How users think of themselves vs. how the system identifies users Careful of the names you choose for your user types (controlled vocabulary)

DIRECTV: State transitions / storyboard Challenges: Diagramming transitions between different interface elements based on user actions Use of AJAX/Flash as presentation layer Complex workflows A lot of reviews were done over the phone

Solution? Cram as much stuff onto one page as humanly possible!

Storyboard transitions: Add element

Storyboard transitions: “filmstrip”

Storyboard transitions: Selection bar

Storyboard transitions: too much detail

Mapping Flows: too many on one page

State transitions / storyboards: solutions Purpose is to communicate flow Try to keep one flow per page Use diagrams to draw attention to similarities and differences between states Include only relevant detail

Hyperlinking, Tracing, and Prototyping Adrian Chong

Hyperlinking with Visio 2007 Visio 2007 has an export to PDF function This allows for PDFs to hyperlink from one page to another. No more saving as a web page Agnes Misiurny has put together a tutorial that talks about hyperlinking and a few other tips with Visio which we will make available.

Canadian Tourism Commission

Lessons Learned Hyperlinking can be useful for orientation It would be nice to highlight parts of the flow diagram

Need for Speed Carbon Autosculpt

Anchor Point Pen Tool

Hold the Alt key

Lessons Learned Illustrating aspects of the interaction saves a lot writing Useful when interaction cannot be described with boxes and arrows Doesn’t take that long Clients react very positively and get a better sense of what you’re trying to build

EA Madden 07 EA’s largest sports franchise Coaches Corner Stats Gamecast

Ideas in here

Lessons Learned A working prototyping requires a client who has a lot of time to devote to the project Takes time, money, energy Results in a happy client who will get what they envisioned

Documentation Landscape

Contacts Anthony Hempell Mgr of Usability and Interaction Adrian Chong Interaction Architect

Discussion / Questions