Owning the Interaction in Dynamic Environments

OWNING THE INTERACTION IN DYNAMIC ENVIRONMENTS fergus roche | gomitech.co.uk | bristol usability group UPA Europe conference, Turin Dec 08

Version for publication All 3 rd party imagery highlighted IMAGE WITHHELD

As the internet gets more interactive with the widespread adoption of broadband and the convergence of multimedia, we must continue to own user interactions across this changing landscape. This presentation will highlight the challenges from a UK design agency perspective and demonstrate my commerical, practical method for describing dynamic user interactions. Presentation overview

As the internet gets more interactive with the widespread adoption of broadband, we must continue to own user interactions across this changing landscape. This presentation will highlight the challenges from a UK design agency perspective an…demonstrate my commerical, practical method for describing dynamic user interactions. Presentation overview

Academic validation?

Nil point

1. INTRODUCTIONS

Who am I? Fergus Roche Contract User Experience Consultant

I head up the User Experience at &

Agency-side Client-side My agency clients

Travel Manufacturing Digital Design Fashion Retail Broadcaster Automotive Telcomms Construction Insurance Health Care Arts Charity NGOs

What project methodologies do/have I worked in? Rapid Prototyping bespoke Made up & combos

What is this presentation about?

A practical method for describing dynamic user interactions like this ... IMAGE WITHHELD

And then at the end you all are going to do it. Together you will design a website in five minutes .

The end result, within 30 minutes you will all be doing this... IMAGE WITHHELD

2. THE PROBLEM

This time last year...

Large-scale, retail e-commerce website

Strong interactive functionality required

15-20 strong project team

Scrum [Agile] project methodology

Weekly meetings with the stakeholders

Including walk-throughs

What ’s the basis for this method? & And why is it credible and easy for you? IMAGE WITHHELD

What ’s the basis for this method? & And why is it credible and easy for you? WF WF WF WF WF WF WF WF WF WF WF WF User journey 1 User journey 2 What worked? what didn’t work? The walk through

“ ???”

IMAGE WITHHELD

“ oh...OK”

3. A CHANGING LANDSCAPE

What is the internet in three words? IMAGE WITHHELD

What is the internet in three words? COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD

The convergence has already started

BANDWIDTH INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION DEVICE on DEVICE DEVICE DEVICE MUSIC TV GAME FILM

INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION BANDWIDTH on DEVICE DEVICE DEVICE DEVICE MUSIC TV GAME FILM

INTERNET MUSIC TV GAME FILM Tesco Digital ENTERTAINMENT European Football brand BRC Buy/Download Live Buy/Download ARG BANDWIDTH on DEVICE DEVICE DEVICE DEVICE + 2007-2008 Tesco Digital

This is now. What about in 3 years? 5 years?

Many of us will have several avatars, which can act semi-autonomously

Mesh networking will have interconnected most computer-based devices

Less and less software will be device-based. Users will simply connect to the internet

Geographical live data “where I am” will become synonymous with online activity

These and many other future probabilities are within reach. We will need to design and manage the user experience.

History is repeating itself [as it often does...] Then Its got text and pictures “...lets lay it out like a newspaper or magazine” Now “ Well this is how we offer TV” ... ... “This is how games work”

Take ownership of the interaction. Lets apply our human-centred approach to all interactions. Our approach is tried and tested. Hard won too. Except this time it will be our fault. We were once copywriters, developers, designers, analysts, project managers. But now we are responsible for the user experience. Lets apply our human-centred approach to all interactions. Our approach is tried and test. Hard won too.

IMAGE WITHHELD

COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD

IMAGE WITHHELD

HOW SHOULD I USE IT? I DONT GET IT?! Bob the user

The more dynamic an interaction, the greater the probability it will impact the user experience – for good or ill. Therefore we must manage all the user interactions. It is our responsibility.

4. THE METHOD

STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING WIREFRAMES DOCUMENTATION CONTENT AUDIT UE process and outputs within the software development process

STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING DOCUMENTATION CONTENT AUDIT WIREFRAMES

PROCESS MAP WIREFRAME <show of hands please>

PROCESS MAP WIREFRAME STORYBOARD <show of hands please>

PROCESS MAP WIREFRAME STORYBOARD + =

KEY FRAME 1 KEY FRAME 2 KEY FRAME 3 KEY FRAME 4 STORYBOARD INTERACTION TO BE DESCRIBED

Some examples...

A process map from a workshop... IMAGE WITHHELD

Same process map made pretty afterwards in Visio IMAGE WITHHELD

A wireframe ...sketched IMAGE WITHHELD

A wireframe ...made pretty in Visio IMAGE WITHHELD

The live site

And a storyboard IMAGE WITHHELD

A storyboard Wallace & Grommit, Aardman Animation IMAGE WITHHELD

5. THE BIG STEAL

PROCESS MAP WIREFRAME STORYBOARD + = The animation industry Wall-E, Disney Pixar IMAGE WITHHELD

The animation industry Batman , http://dcanimated.toonzone.net/Storyboards/sbbatman.htm IMAGE WITHHELD

KEY FRAME 1A ANIMATION SEQUENCE Interaction being described FRAME 1B FRAME 1C FRAME 1D KEY FRAME 2 FRAME 2A KEY FRAME 1 KEY FRAME 1 Richard Williams, The Animator’s Survival Kit IMAGE WITHHELD

“ There are many ways to skin a cat” Itchy & Scratchy, The Simpsons IMAGE WITHHELD

What is important is that we offer a clear, instructional method for explaining how user interactions should work

All we need to do is describe the key frames IMAGE WITHHELD

IMAGE WITHHELD

Which brings me to my 2 nd key finding...

6. LO-FI CAN BE BETTER

Royal Albert Hall pitch Events & e-commerce IMAGE WITHHELD

Something odd happens when you present what is essentially a sketch. People lean forward, engage and comment...

7. MY FINDINGS

Our work is throwaway in nature. Accept it.

Make that fact an asset and let that make you work faster

Not become a bottleneck for software development

European football brand Live TV + community IMAGE WITHHELD

What is important is that we offer a clear, instructional method for explaining how user interactions should work

Wireframes aren’t special or always relevant. And static ones aren’t great for explaining interactions

We should be responsible for the user experience across all user interactions regardless of the technology involved

Once a software team and client is bought into the importance of a user-centered approach, reinforcing that you look after the user experience across all interactions will seem only natural information architect vs. user experience

Feel free to the change your outputs. Software teams don’t mind. Often they appreciate it

IMAGE WITHHELD

A central purpose of my role is to reduce risk I believe.

Start early in the development life-cycle

Assess and design quickly and simply

Provide a view of the final product the client can commit to before spending developer man-hours

7. THE SHOW-STOPPER

“ But, I can’t draw...”

Yes you can!

Just because we can’t run as fast as Usain Bolt , doesn’t mean we can’t walk. Drawing isn’t magic. Its just a learnt skill... Same with art. No, we are not all Michaelangelo. But we can all draw a story. IMAGE WITHHELD IMAGE WITHHELD

Artistic development in children - a U-shaped curve Proponents of the U-shaped theory: Howard Gardner and Ellen Winner (1982), Jessica Davis (1991) population

"May I tell you about something I have done a number of times with kindergartners and high school seniors ? I ask the kindergartners to raise their hands if they can read . I then ask if they can work with numbers . Then I ask if they can write . At best one or two of them will raise their hands ; usually none does . When I then ask them if they can draw or make pictures , every raises their hand . Now , when I have done the same thing with high school seniors , each of them raises his hand in regard to reading , writing , and numbers . In regard to drawing and making pictures , it has been rare that anyone raises his or her hand“ Sarason, 1990 Were your three ‘R’s your artistic downfall?

8. THE GROUP TASK

To design an interactive website in 5 minutes.

<5 minute countdown clock>