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 publicationAll 3rd 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 RocheContract User Experience Consultant

I head up the User Experience at

&

Agency-side

Client-side

My agency clients

Travel Manufacturing

Digital Design

Fashion

RetailBroadcaster

Automotive

Telcomms

Construction

Insurance Health Care

Arts

CharityNGOs

What project methodologies do/have I worked in?

Rapid Prototyping

bespoke

Made up & combos

What is this presentation about?

IMAGE WITHHELD

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

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

IMAGE WITHHELD

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

2. THE PROBLEM

This time last year...

Large-scale, retail e-commerce websiteStrong interactive functionality required15-20 strong project teamScrum [Agile] project methodologyWeekly meetings with the stakeholdersIncluding walk-throughs

IMAGE WITHHELD

The walk through

“???”

IMAGE WITHHELD

“oh...OK”

3. A CHANGING LANDSCAPE

IMAGE WITHHELD

What is the internet in three words?

IMAGE WITHHELD

What is the internet in three words?

COMMUNICATION

ENTERTAINMENT

INFORMATION

The convergence has already started

BANDWIDTH

INTERNET

MUSICTV GAMEFILM

+

COMMUNICATION

ENTERTAINMENT

INFORMATION

DEVICE

onDEVICE DEVICE DEVICE

INTERNET

MUSICTV GAMEFILM

+

COMMUNICATION

ENTERTAINMENT

INFORMATION

BANDWIDTH

onDEVICE DEVICE DEVICEDEVICE

INTERNET

MUSICTV GAMEFILM

Tesco Digital

ENTERTAINMENT

EuropeanFootball brand BRC

Buy/Download Live Buy/Download ARG

Tesco Digital

BANDWIDTH

onDEVICE DEVICE DEVICEDEVICE

+

2007-2008

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...]

ThenIts 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.

IMAGE WITHHELD

IMAGE WITHHELD

COMMUNICATION

ENTERTAINMENT

INFORMATION

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

PROCESSMAP

WIREFRAME

<show of hands please>

PROCESSMAP

WIREFRAME STORYBOARD

<show of hands please>

PROCESSMAP

WIREFRAME STORYBOARD+ =

KEYFRAME 1

KEYFRAME 2

KEYFRAME 3

KEYFRAME 4

STORYBOARD

INTERACTION TO BE DESCRIBED

Some examples...

IMAGE WITHHELD

A process mapfrom a workshop...

IMAGE WITHHELD

Same process mapmade pretty afterwards in Visio

IMAGE WITHHELD

A wireframe...sketched

IMAGE WITHHELD

A wireframe...made pretty in Visio

The live site

IMAGE WITHHELD

And a storyboard

A storyboard

IMAGE WITHHELD

Wallace & Grommit, Aardman Animation

5. THE BIG STEAL

PROCESSMAP

WIREFRAME STORYBOARD+ =

The animation industryWall-E, Disney Pixar

IMAGE WITHHELD

The animation industry

Batman, http://dcanimated.toonzone.net/Storyboards/sbbatman.htm

IMAGE WITHHELD

IMAGE WITHHELD

KEYFRAME

1A

ANIMATION SEQUENCE

Interaction being described

FRAME 1B

FRAME 1C

FRAME 1D

KEYFRAME

2

FRAME 2A

KEYFRAME

1

KEYFRAME

1

Richard Williams, The Animator’s Survival Kit

“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

IMAGE WITHHELD

All we need to do is describe

the key frames

IMAGE WITHHELD

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

6. LO-FI CAN BE BETTER

IMAGE WITHHELD

Royal Albert Hall pitchEvents & e-commerce

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

IMAGE WITHHELD

European football brand

Live TV + community

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

IMAGE WITHHELD

IMAGE WITHHELD

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

Start early in the development life-cycleAssess 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 youcan!

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.

<Group task instruction>

<5 minute countdown clock>

•Pop your storyboards back in the envelope*•Place on your seat when you leave*•Add your name

8. Conclusion

IMAGE WITHHELD

Feel empowered to design and lead more dynamic interactions

Believe you can bring your user-centered approach to Flash and 3D interactions

Let go of perfecting wireframes and start sketching interactions

Learnt a more engaging technique to sketch interactions to designers and clients

Tools of the trade

Flipchart paper Post-itsBlu tacBig fat marker pens

Put down the visio and pick up a pen Have a go, just start doodling and then simply use them to discuss an interaction Take up life drawing

Recommendations

Recommended reading

Questions

THANKS!

fergus roche | gomitech.co.uk | bristol usability group