Post on 07-Jan-2017
REMUXRemixing Mobile User eXperience Mobile UX London 2015
@jasonmesut
A meeting of monthly meet ups
The worst synopsis ever
The worst keynote synopsis ever
Potential Opportunities and Associated Challenges for Designing Valuable Futures based around Mobile Experiences
A lot of focus around mobile UX seems to be around designing responsively, adapting to different platform paradigms, or designing for gestures, with little focus on the powers we now wield by having a super computer in our pockets. With the apparent advent of the Internet of Things and never-ending hype, what are the potential future trajectories of solutions for people on the move? What are the form factors, new service approaches and challenges associated with these?
The worst keynote synopsis ever
Potential Opportunities and Associated Challenges for Designing Valuable Futures based around Mobile Experiences
A lot of focus around mobile UX seems to be around designing responsively, adapting to different platform paradigms, or designing for gestures, with little focus on the powers we now wield by having a super computer in our pockets. With the apparent advent of the Internet of Things and never-ending hype, what are the potential future trajectories of solutions for people on the move? What are the form factors, new service approaches and challenges associated with these?
Naveed
We want it to be case study led
I’m no expert in mobile. Who is? Really?
What do I know about mobile UX?
Which is highly relevant
I can’t show my recent work
Zipdisks, CDs, and my hard drive
So I raided my old media
Looking back 20+ years mobile design
GCSE Craft, Design and Technology
Portable music studio
1995~
Portable music studio — 1995
A future mobile music studio concept designed at school
– Nintendo SNES inspired
peripheral inputs
– Minidisc inspired central brain I couldn’t find the original sketches, but it was sort of like this but minidisc sized
Early web design
Yell.com
1999–2000
Early web design — 1998–2000
Extended placement creating websites for SME businesses
– 1 Website a day
– Scanning, copywriting, visual design, HTML, browser testing(2-3h design, 6-7h testing and tweaking)
– IE, Netscape, Mac, PC
– 640x480 – 1280x1024
– <30k for a web page
– <13k for a gif/flash banner
Key learnings
– You have to test with different platforms and screen sizes
– File size really matters
The Don makes some prescient predictions
The invisible computer
The Don
Don Norman
Device convergence
App divergence
Divergent, single serving apps
Key learnings
– Divergent appliances restrict modal errors
– We will still desire objects
– Key technologies will be distributed: screens, internet access, sensors
– Predictions rarely turn out as you expect them
A future of reading
Amazon Via
2001
University
Brunel Design Directory 2001
Amazon Via — 2001
Come up with a new product concept for Amazon for 2005
Reading context and behaviours
I explored different form factors* *I was an Industrial Design after all
Clamshell
Ergonomic controller
Necklace projector
Thumb controllers
eInk and LCD (with a stylus)
AccountMessages
Message
SearchCommunityCommunityBookshelf CommunityCommunity
Profile NetworkMembers
MarkFriend
Currently reading favourites
Land rover legend 4.5 engineering weekly 5
the rise and fall of 4
Mcdonalds
WarrenFriend colleague
Currently reading favourites
Angella’s ashes 4 cre@te online 4
design of everyday 4.5 chi journal 4
things
JuliePartner
Currently reading favourites
Harry potter 4 silence of the lambs 5
hannibal 4 wallpaper 4
wallpaper 3.5
Tony Colleague
Currently reading favourites
The art of innovation 5 design week 4
hannibal 4 sony design 4
vision of the future 3.5
Leisure Business Interest
Amazon Via — 2001
A future concept for digital books, making Amazon a provider of e-books for niche material within communities
– E-Ink display
– Digital Books
– Basic page turning
– Annotations
– Thumb controls
– Necklace projector
AccountMessages
Message
SearchCommunityCommunityBookshelf CommunityCommunity
Profile NetworkMembers
MarkFriend
Currently reading favourites
Land rover legend 4.5 engineering weekly 5
the rise and fall of 4
Mcdonalds
WarrenFriend colleague
Currently reading favourites
Angella’s ashes 4 cre@te online 4
design of everyday 4.5 chi journal 4
things
JuliePartner
Currently reading favourites
Harry potter 4 silence of the lambs 5
hannibal 4 wallpaper 4
wallpaper 3.5
Tony Colleague
Currently reading favourites
The art of innovation 5 design week 4
hannibal 4 sony design 4
vision of the future 3.5
Leisure Business Interest
Amazon Kindle — 2007
– E-Ink display
– Digital Books
– Basic page turning
– Annotations
X No thumb controls
X No necklace projector
Mycestro — 2014
– Thumb controller
– Finger buttons
X No necklace projector
Airplay and chromecasting — 2010–15
– Other ways to transmit
information to different displays
– Finger buttons
X No necklace projector
Key learnings
– Understanding context inspires radical ideas that could work
– Ideas are easy — delivery is hard
– Prototyping with wire and blue tack makes you look like an idiot
– One day we’ll have necklace projectors (or maybe not)
Clinical application for Kenya and NHS
Mobile Map of Medicine
2006
Map of Medicine — 2006
A need in Kijabe, Kenya
Small medical centres with generalists serving large communities
Limited shared computers
– 2 installs of Map of Medicine
– 2 big folders of printouts
Limited network access
Large geography, terrible transport
– Take over a day to get to some patients
– Longer for patients to get to clinics
– Cheap PDAs
– Cisco wanted to hep developing world
– Opportunity to install WIMAX networks
Opportunity for a mobile device + Cisco
Rapid prototyping (paper and Java)
Menu UI
Mobile form factors
Designed a blended research approach
Interview
Surveys
Week 3 Week 5Week 2 Week 4
Introduce plans to end users
Week 1
Initial demo
Day 1- Present plan to users
Day 1-Demo Map & device
Testing
Day (1-30)- Diary studies. Week 1-6 (day 5)- Attitude surveys
Day 1&2-Intro. interviews
Day 5- Market survey
Day 4 & 5- User testing
1st week in October – 3rd week in November
Week 6
Day 5- Market survey
Day 4&5- de-briefing
Week 7
Day 1- Present plan to users
Day 1-Demo Map & device
Day 2-Intro. interviews
Day 5- de-briefing
Day (1-30)- Diary studies. Week 1-6 (day 5)- Attitude surveys
Day 5- Market survey
Day 5- Market survey
Day 4- User testing
Day 1&2- User interviews
Day 1- User interviews
Observed usage in NHS
Suited downtime refreshers
Activity map
Plenty of ‘wearable’ devices
Key learnings
– Mobile technology could empower developing communities
– Mobile technology can opens up new infrastructure
– It’s hard to fit into established workflows
– Healthcare professionals have a lot of wearable technology already
Improving safety and efficiency of wind turbine maintenance
Visual Eyes mobile
2011
Visual Eyes desktop application
Mapping activities across roles
Targeting a maintenance agent
2 33
5
5
4 6
6
8
8
7 9
6 Response to alert
As Bob has almost finished his final task he agrees
with the Operations Controller that if he can
complete the job in 15 minutes he will, otherwise
he will have to leave the site and come back another time.
7 Completes task
Bob completes the final task in the job list and taps to add
more details (photo/notes).
He takes a photograph of something that he has
spotted that will need to be monitored and adds a note
with the date and his comments, before getting in his
van ready to move on to the next job.
5 Alerts
While he is still on-site working, Bob receives an alert notifying him that there are electrical storms forecast in the area he is working.
Bob dismisses the alert by calling Operations Control to
check in and get advice on what he should do.
1 Planning for the day ahead
Over breakfast Bob uses his phone to look at the jobs he has scheduled for the day. He
taps to view details of each job (location, weather forecast, time
allocation etc) so he can plan his day.
2 On the way to Turbine
Bob gets into his van and drives to the location of the first job on
his list. If he needs to he can view the location on a map and link through to his iPhone's GPS enabled maps application to get directions.
3 At the Turbine
When he arrives at the wind farm/turbine, Bob taps the
start button in the job detail screen. He is asked to verify
his ID by entering a password/code. When this
code is successfully verified he receives a code via SMS which will
give him access to the turbine.
4 Completing Tasks
As he completes each of the tasks for the job, Bob taps to mark it completed. (this logs his progress and updates the display at Operations Control).
Visual Eyes Mobile App User Journey
Met Office Mobile
Key learnings
– Mobile solutions don’t need to reflect desktop counterparts
– Mobile technology can create new use cases
– Use older insights to inform new solutions
Making timesheet more enjoyable
Fingerpainting
2012
Timesheet applications fail
– Boring
– People forget
– Entering time against different job codes is hard
– Designed for resource and account managers, not ‘talent’
Parallel inspiration
Touch and swipe interactions
Prototyping
Key learnings
– Sound can provide tactile feedback
– Sound can engage others
– Bad sound can annoy
– You don’t have to follow a platform paradigm
– But a strong metaphor can always help
Interaction R&D for A&E applications
Healthier mobile entry
2012
Clinical system for an A+E
– Leapfrog competition
– Triage patients better and more efficiently
– Reduce waiting times
– Minimise data workflow errors
Typical clinical form
Multiple pulldowns
Spider triage
Spider triage
Physical triage cards
Old stool hypercard UI
Touch triage
Touch triage
Key learnings
– Different users and usage contexts demand different UI
– GUIs haven’t moved on that much from hypercard
– Truly touch interfaces are rare but allow for eye contact
– Touch interfaces suit more coarse interactions
– Quickly prototyping and animating engages stakeholders
Focusing on what matters to the market
Future smartphone
2013
Plan
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Mobile phonesInfluential milestones for designers
3310 9210 6310 5510
Siemens SL45iSiemens ME45
7650 5210
Vertu Signature
89107210
Siemens A55
6610
Handspring Treo 270
3650 68005100 N-Gage
SiemensSL55 Siemens XeliriO2 XDA BlackBerry 6230
1100 2300 76006230 7200
Siemens Xelibri KDDI Talby (Marc Newson)
7610
VertuAscent
6630 2650
Siemens SL65
6170 7260 7280 7710
Siemens SK65 Toshiba Nudio V602T
8800
Siemens CL75 KDDI Penck(Makoto Saitou)
N91 N70 7380 7360
KDDI Neon(Naoto Fukasawa)
N93
LG Chocolate
N95 8800 7373 6300
BlackBerry Pearl 8100Vertu Boucheron
2630
LG ShineKDDI MediaSkin(Tokujin Yoshioka)
LG Prada
8600 5310
Apple iPhoneO2 Cocoon KDDI Infobar2 (Naoto Fukasawa)
Porsche P9521
N82 8800 8800 Sapphire Arte
7900
Palm Centro
5220 Xpress music
E71 E66 8800 Carbon Arte
5800 Xpress music
N97 5330Xpress Music
6700 6790 Surge
5530Xpress Music
N900 X66600(C) 1661
HTC Touch Diamond BlackBerry Storm Google G1 Vertu Signature S Palm Pre LG BL40 HTC HeroHTC Magic Apple iPhone 3GS Iida Ply Iida LottaBlackBerry Bold 9000
V8088 V60 V70 E365V600 A835 A920 E1000 RAZR V3 PEBL L7 SLVR RAZR V3 PEBL Colours W220 L7 (RED) MotoFone KRZR K1 RAZR V9 PEBL U9RAZR2 Luxury edition
Aura Motocubo A45
Droid HD2 Nexus One Desire
M100 A110 A200 A300 A400 R210 T100 A500 V200 P400 A800 E720 D500 Z500D600 E530 Serene P300 E870 E900 X820 X830D900 F300 i600 U300 U600 J600 P520 Serenata G800 U900 F110 F400 M7600 Beat DJM32000 Beat Blue Earth S8300UltraTouch
S3650Corby/Genio
S5150Diva
C3530 Nexus S Galaxy Ace Galaxy S2 Galaxy NoteWave 525ChampChat 355 GalaxyMonte
Sony CMD Z5 Sony CMD J5 Ericsson R520 Ericsson T39 Sony Z7 Sony J70 T68 T300T200 T610 Z200 P900 K700 P910 K750i W800i W950 K800 Z610 W850 W880 K810i P1 T650 K770i W380 Xperia X1 Z555 W980W350C902 C510 W508 W508 C901 Jalou Xperia X10 Pureness Vivaz X8Cedar Xperia RayX10 Mini Xperia Arc
E5N8 C5 N9 Lumia 710x5X2 X3-02
HTC, Legend
Apple, iPhone 4 BlackBerry Torch 9800 BlackBerry P9981LG Cookie LG310 Dell Streak Æsir, AE&Y, (Yves Behar) Motorola, EX212
Rhyme Sensation XLRadarSalsaChaCha
BlackBerry 9930Huawei, Folded Leaf
HD7
What’s next?
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Mobile phonesInfluential milestones for designers
3310 9210 6310 5510
Siemens SL45iSiemens ME45
7650 5210
Vertu Signature
89107210
Siemens A55
6610
Handspring Treo 270
3650 68005100 N-Gage
SiemensSL55 Siemens XeliriO2 XDA BlackBerry 6230
1100 2300 76006230 7200
Siemens Xelibri KDDI Talby (Marc Newson)
7610
VertuAscent
6630 2650
Siemens SL65
6170 7260 7280 7710
Siemens SK65 Toshiba Nudio V602T
8800
Siemens CL75 KDDI Penck(Makoto Saitou)
N91 N70 7380 7360
KDDI Neon(Naoto Fukasawa)
N93
LG Chocolate
N95 8800 7373 6300
BlackBerry Pearl 8100Vertu Boucheron
2630
LG ShineKDDI MediaSkin(Tokujin Yoshioka)
LG Prada
8600 5310
Apple iPhoneO2 Cocoon KDDI Infobar2 (Naoto Fukasawa)
Porsche P9521
N82 8800 8800 Sapphire Arte
7900
Palm Centro
5220 Xpress music
E71 E66 8800 Carbon Arte
5800 Xpress music
N97 5330Xpress Music
6700 6790 Surge
5530Xpress Music
N900 X66600(C) 1661
HTC Touch Diamond BlackBerry Storm Google G1 Vertu Signature S Palm Pre LG BL40 HTC HeroHTC Magic Apple iPhone 3GS Iida Ply Iida LottaBlackBerry Bold 9000
V8088 V60 V70 E365V600 A835 A920 E1000 RAZR V3 PEBL L7 SLVR RAZR V3 PEBL Colours W220 L7 (RED) MotoFone KRZR K1 RAZR V9 PEBL U9RAZR2 Luxury edition
Aura Motocubo A45
Droid HD2 Nexus One Desire
M100 A110 A200 A300 A400 R210 T100 A500 V200 P400 A800 E720 D500 Z500D600 E530 Serene P300 E870 E900 X820 X830D900 F300 i600 U300 U600 J600 P520 Serenata G800 U900 F110 F400 M7600 Beat DJM32000 Beat Blue Earth S8300UltraTouch
S3650Corby/Genio
S5150Diva
C3530 Nexus S Galaxy Ace Galaxy S2 Galaxy NoteWave 525ChampChat 355 GalaxyMonte
Sony CMD Z5 Sony CMD J5 Ericsson R520 Ericsson T39 Sony Z7 Sony J70 T68 T300T200 T610 Z200 P900 K700 P910 K750i W800i W950 K800 Z610 W850 W880 K810i P1 T650 K770i W380 Xperia X1 Z555 W980W350C902 C510 W508 W508 C901 Jalou Xperia X10 Pureness Vivaz X8Cedar Xperia RayX10 Mini Xperia Arc
E5N8 C5 N9 Lumia 710x5X2 X3-02
HTC, Legend
Apple, iPhone 4 BlackBerry Torch 9800 BlackBerry P9981LG Cookie LG310 Dell Streak Æsir, AE&Y, (Yves Behar) Motorola, EX212
Rhyme Sensation XLRadarSalsaChaCha
BlackBerry 9930Huawei, Folded Leaf
HD7
A mobile timeline from Plan Strategic — www.plan.london
Future smartphone
Meaningful value
Usability
?
Battery life
Camera?
?
? ?
Screen
Connectivity
?
Key learnings
– Gimmicks do attract attention
– Advanced technology is not enough
– Design can empower through providing usable and meaningful solutions
– Connect to the wider system
Helping people unlock London
Future transportation service
2014–ongoing
A service design challenge
Icons created by Vicons Design from the Noun Project
?– Helps people unlock London – Mobile apps and wider digital services – Spaces, places, people, vehicles, interactions
Mobile diary and movement tracking
Digital diaryMovement tracking Battery pack
+ Needs
– Client – Call centre services company – Brand agency – Marketing and advertising company – App development company – Systems integrator – Product strategy consultancy – Political negotiations – PR groups – Maintenance company – Hardware companies – Payment provider
Key project partners
– Algorithm experts – Product owners – Product designers – Developers – Researchers – 2D Designers – 3D Designers – Design strategists – Product strategists – Content strategists – Strategist strategists
Key project roles
– Proposition – Service ideas – Marketing ideas – Design details – Language
A lot of opinions about everything
A lot of overlaps in what we contribute to
We have heated debates on UI
Product designers Me
– Engage people – Less words, more imagery – Less steps – Smaller narrow font – Subtlety – Reference cool app UI
– Be clear to people – More words – Clear steps – Readable font – Contrast – Reference UI research
Visual simplicity Conceptual simplicity
Copywriting is often the saviour
– Selling ideas – Explaining functions – Working within tight spaces – Expressing the brand
So much of what we do in User Experience ends
up being about the words we use
Key learnings
– Mobile diary studies help to catch people in the moment
– Mobile phone batteries don’t last
– People love battery packs
– Visual designers getting more influence
– Old stool usability and accessibility is being left behind
– Service and UX sensitive copywriting is a rare skill
– Think beyond the device
– Find ways to engage people
– Consider how your solution co-exists in a wider system
– Visual designers are getting more influence
– Usability and accessibility is getting forgotten about
– We’re copying bad examples
– Optimisation is as important in 2015 as it was in 2000
Key lessons from 20+ years
Looking forward Potential trajectories
What’s next in our most popular UI paradigm?
Better graphical user interfaces
Graphical
User Interface
Allows users to
interact with
electronic systems
Visual Language
Motion Graphics
Information Design
Information Architecture
Interaction Design
Visual Language
Motion Graphics
Information Design
Information Architecture
Interaction Design
Visual language
Motion graphics
Information Design
Information Architecture
Interaction Design
Still relevant
Original iPhone
2007 — Direct manipulation — Dynamic display — Rich graphics
???
Steve lied We do need hard keys
???
Steve lied We do need a pointer
Skeuomorphism ??
2007 — ??
In defence of skeuomorphism
2007 — ??
Skeuomorphism has always been in design
Windows 8 Radical failure
What’s next after flat?
Does Material design get it right?
Screens will continue to improve
New screen technology
Round screens
Any shape screens
Curved screens
Better interfaces designed for touch
Truly touch interfaces
iMaschine2
Portable music making app
with 3D touch
iMaschine2
Portable music making app
with 3D touch
Summary conclusion
Connectivity inside more focused products
Connected devices
Bleep Bleeps
Bleep Bleeps
Hackaball
SAM
A prototyping toolkit for
the Internet of Things
SAM
Sensors
Actuators
Computer brain
Great battery life, restricted functionality
Focused phones
Respect human values
Calmer technology
Polite technology
Different devices and services working together
Co-operative systems
Ableton link Multi-device synchronisation
Ableton link Multi-device synchronisation
Physical peripherals working with a central brain
Accessories and modularity
Physical peripherals with digital interfaces
Modular smartphones
Distributed knobs
What will the interfaces and objects be like in the future?
Future form factors
What’s next? Mobile computing form factors
?
What does your home look like?
Original iPhone ??
2007 — Direct manipulation — Dynamic display — Rich graphics
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Original iPhone ??
2007 — Direct manipulation — Dynamic display — Rich graphics
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knob handles ??
Knobs
Buttons
Switches
Levers and handles
Knobs
Buttons
Switches
Levers and handles
Looking forward Challenges
Visual and conceptual simplicity are often confused
Simplicity is complex
2 types of simplicity*
Visual – Less words – Less clutter – More attractive – Cleaner – Clearer visually – Hidden controls and options
Conceptual – More words – More to arrange – Less engaging – Can be too much to parse – Options are clearer – Exposed options
*An oversimplification in itself
Displaced complexity
System rules
Mental models
Attracted by magic
and visual slickness
We’re like magpies
Wearable excitement
Something other than a smartphone to design
Even if they make us look ridiculous
Gestures
Theremin
Gesture issues
Tiring
Coarse control
Confusion with natural gestures
Hard to learn and remember
We’re too expensive, we can’t do enough, we can’t be the bottleneck — we need to disseminate
Not enough UX skills
Not enough UX
Too expensive
Tangible ROI is unclear
Lack of supply to meet demand
Supply isn’t of great quality
UX Spectrum
Strategy
ResearchInterface
Info
rmat
ion
PSProduct Strategy
CXCustomer
Experience
VDVisual Design
IxDInteraction
Design
QlRQualitative
Research
qNRQuantitative Research
IAInformation Architecture
CSContent Strategy
Work in progress with Vitamin T…
UX Spectrum of skills
UX Spectrum
Strategy
ResearchInterface
Info
rmat
ion
PSProduct Strategy
CXCustomer
Experience
VDVisual Design
IxDInteraction
Design
QlRQualitative
Research
qNRQuantitative Research
IAInformation Architecture
CSContent Strategy
Work in progress with Vitamin T…
Product Designer
Strategy
ResearchInterface
Info
rmat
ion
Product Strategy Customer Experience Visual Design
In
teraction D
esign Qualitative Research Quantitative Research§
Info
rmat
ion
Arc
hit
ectu
re
Co
nte
nt S
trat
egy
Service Designer
Strategy
Research
Interface
Info
rmat
ion
Product Strategy Customer Experience Visual Design
In
teraction D
esign Qualitative Research Quantitative Research§
Info
rmat
ion
Arc
hit
ectu
re
Co
nte
nt S
trat
egy
UI / UX Designer
Strategy
Research
Interface
Info
rmat
ion
Product Strategy Customer Experience Visual Design
In
teraction D
esign Qualitative Research Quantitative Research§
Info
rmat
ion
Arc
hit
ectu
re
Co
nte
nt S
trat
egy
UX Strategist
Strategy
Research
Interface
Info
rmat
ion
Product Strategy Customer Experience Visual Design
In
teraction D
esign Qualitative Research Quantitative Research§
Info
rmat
ion
Arc
hit
ectu
re
Co
nte
nt S
trat
egy
So many organisations, skills and roles to navigate
Many different people to work with
Hard to observe context of use on the move
Understanding mobile experiences is hard
Physical web, native vs. web, agile vs. waterfall
Dogmatic differences
We use a lot of jargon and deceptive language
Bad language
Battle the bullshit
Ban deception
– Intuitive
– Seamless
– Frictionless
– No UI
– Natural UI
Clarify our jargon
– Lean
– MVP
– Responsive / adaptive
– Mobile first
Looking forward Opportunities
Applying design across all levels of the mobile experience
Design across all levels
Design better UI components– Buttons – Signifiers – Scrollbars
Tap me please
Use the right interactions– See – Tap – Swipe – Stroke – Speak
On clearer screens– Layouts – Grids – Cards – Zones – Drawers
Tap me please
Within better flows– Drill down – Traverse – Fade – Pogo stick
Tap me please
Within quality apps– Proposition – App icon
Tap me please
Better device app organisation– App icon – Within groups – On different screens – In widgets
Tap me please
Better app store organisation – App icon – Within groups
To put on their devices– Smartphones – Smart watches – Tablets
To use in different environments
Icons created by Jonathan Li, DonBLC and parkjisun from the Noun Project
– Car – Home – Office – Street
In different geographies– Connectivity – Data plans
Created by Yamini Ahluwaliafrom the Noun Project
Design skills are important across all of them
Elements + interactions
Screens + flows
Apps OS App stores Devices Environments + geographies
Tap me please
Different levels of abstraction that we can design around
User research
Sound design
Motion graphics
Visual language
Information design
Information architecture
Interaction design
Experience strategy
Elements + interactions
Screens + flows
Apps OS App stores Devices Environments + geographies
Tap me please
Uniting the worlds of physical products with digital services
Cohere the Physical and Digital
A recipe for integrated products?
+ +Physical Product
Digital Interface
Digital Service
Integrated product
=
+ +Physical Product
Digital Interface
Digital Services
Aesthetic Visceral. Visual, sonic, feel.
Interactive Behavioural. Distribution of inputs and controls.
Experiential Reflective. Fit with person’s context and ecosystems.
Key levels of harmony
Components of integrated experience
iPod The original integrated product?
Appropriate interactions — Hardware and software
interface working together — iTunes store — Aesthetic mismatch
Unite product and graphic language
Nokia and Microsoft Windows mobileSeparated at birth
Nest Rare harmony?
Coherent product-service — Elegant hardware — Slick UI — Intelligent services
Norman, Verplank, Tog, Neilsen and more
Revisit (and respect) our elders
I want harmony
Think of the motor
Diverge again
Focused devices
Peripherals and accessories
Even if they do have some senior moments
Ideally the ones that have research evidence and design solutions
But follow practitioners
Connect, calibrate and create with different skillets
Craft collaboration
How can we better collaborate with an increasing number of stakeholders of different backgrounds? ?
Create Ca
libra
te
Connect
Strategies
C
reate
C
alib
rate
Connect
Be
human
Hold up
a mirror
Establish
frames
Foster
friendly
friction
Practice,
practice,
practice
Flex
yourselfPrinciples
C
reate
C
alib
rate
Connect
Be
human
Hold up
a mirror
Establish
frames
Foster
friendly
friction
Practice,
practice,
practice
Flex
yourself
Crafting Collaboration
Talking
Capturing
Listening
Learning other
perspectives
Planning and
preparing
Sharing at
right time
Skills
As well as the product/service and its interface
Consider experience + engagement
You can start with an idea, a need, some technology– A service – A product – A feature
Which you can empower through good designEmpower
– Desirable – Accessible – Usable – Powerful
To engage the audienceEmpower EngageEmpower Engage
– Reach out – Connect – Sell – Remind
And embrace the wider systemEmpower EmbraceEngage
– Integrate with other services – Fit into people’s lives – Cohere with conventions
Just remember there are 1000s like your product or service
3 strategies
Get (and stay) on the radar
Unlock the potential
Connect to the wider system
1 2 3
Engage Empower Embrace
Jean-Philippe CabarocCreated by Pantelis GkavosCreated by Joel Bryant
Go to where people are, and listen with your eyes
Understand behaviours in context
Observe real people doing real things in their real environments
The world The products and services that people will use and the context of that usage
The user How they see the world and how they need to manipulate it
The world The products and services that people will use and the context of that usage
The user How they see the
world and how they need to manipulate it
Environment User
Situation Task
System
FamiliarityEcosystem
Intent
Environment User
Situation Task
System
FamiliarityEcosystem
Intent
The world The products and services that people will use and the context of that usage
The user How they see the
world and how they need to manipulate it
Environment User
Situation Task
System
FamiliarityEcosystem
Intent
Usability
Product
Experience
Brand
The world The user
Cennydd Bowles: http://www.cennydd.com/blog/designing-with-context
evices nvironment ime ctivity ndividual ocation ocial
D E T A I L S
— IBM, 1980
customers didn’t like the solution, not because of flaws in the recognition but because of a host of hitherto-unseen environmental challenges
IBM voice UI
Speaking taxed the subject’s throat
There was concern for privacy
Awkward in a communal setting
Polite interactions
Contextual
Respectful
Discrete
Wrapping up Conclusions
We have all the parts already We just need to remix them in our own style
Goals
– Think beyond interfaces + devices
– Empower technology
– Engage people
– Embrace wider systems
– Understand the real context
Key tactics
– Connect, calibrate + create with others
– Keep learning from each other
– Think beyond one person’s answers
REMIXING User Experience
Thank you
@jasonmesut