OWNING THE INTERACTION IN DYNAMIC ENVIRONMENTS fergus roche | gomitech.co.uk | bristol usability group UPA Europe conference, Turin Dec 08
Dec 16, 2014
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