designing beyond the screen
TRANSCRIPT
WELCOME#SoMITP
HANNES VAN DE VELDEProduct & Design Manager, In The Pocket
#SoMITP
DESIGNINGBEYONDTHE SCREEN
#SoMITP
Design is the new engineering.
It is.Is it? Isn’t it?
#SoMITP
We will have to get away from our screens.
WHAT’S ALL THAT FUSS ABOUT?
#SoMITP#SoMITP
#SoMITP#SoMITP#SoMITP
DOWNLOAD
ALL THE APPS
#SoMITP#SoMITP
#SoMITP
+ =
Potential customer Your product Happy customer
#SoMITP
We need an app to support our marketing campaign
We need a functional app, to be ahead of our
competitors
We need a better app than our competitors
We need mobile technology to support
our business
We need (mobile) technology to be at the
core of our business
#SoMITP
IoT
#SoMITP
#SoMITP
Thank you, computer.
AI
#SoMITP#SoMITP
AR & VR A whole new world
#SoMITP
“What no one is working on is the UI. Everyone is building these headsets but unless we have some way of interacting, it’ll be 360 degree cinema.”
~ John Underkoffler, UI visionary
http://thenextweb.com/media/2015/08/31/a-stark-future/
SUCCESSFULLY DESIGNING BEYOND THE SCREEN5 rules of thumb
#SoMITP
Design from the problem towards technology,not vice versa.
1.
#SoMITP
“I’m not so different from a teenager of 2015, I suppose, or any time in the last few decades. I want to hang out and chat with my friends, to be independent, to find my individuality and my place in the world, and to have the right clothes and gadgets to stand out, and fit in.”
~ a teenager in 2030
https://medium.com/ideo-stories/dear-iot-visionaries-8a9a35f616f8
UX UI
#SoMITPBased on: Golden Krishna, The Best Interface is No Interface
UX
peoplehappiness
problem solving
needs
empathy
delight
personalitysatisfaction
gratification
productivity
magicconvenience
efficiency
smiles
#SoMITPBased on: Golden Krishna, The Best Interface is No Interface
• UX is about people, not about screens or interfaces.
• Our job is to understand the everyday problems of people and use technology to solve them in the most elegant ways.
UI
menus
buttons
rounded corners
tab bars
alerts
input boxes
password fields
hover states
animations
swiping
colors
iconsgradients
carousels
banner ads
login fields
notifications
#SoMITPBased on: Golden Krishna, The Best Interface is No Interface
• UI is about screens and interfaces.
• Our job is to design usable and delightful interfaces, so people succeed in reaching their desired goals.
UX UI
menus
buttons
rounded corners
tab bars
alerts
input boxes
password fields
hover states
animations
swiping
colors
iconsgradients
carousels
banner ads
login fields
notifications
peoplehappiness
problem solving
needs
empathy
delight
personalitysatisfaction
gratification
productivity
magicconvenience
efficiency
smiles
#SoMITPBased on: Golden Krishna, The Best Interface is No Interface
#SoMITP
Designing from the problem:
• Solving problems as a goal, leveraging technology and interfaces as a solution
• UX vs. UI
• Building a team with the right people with the right responsibilities
#SoMITP
Work with clients and for users.
2.
#SoMITP#SoMITP#SoMITP
Discovery workshops
Designsessions
Demomoments
#SoMITP
Free our minds and users will follow
3.
#SoMITP#SoMITP
2.486You’ve got mail
Hi there, please log your calories for today
Hi there, please log your calories for today
BREAKING NEWS
A long forgotten high school friend invited you to play Candy Crush
You didn’t reach your fitnessgoal for today
People are interested inyou on Tinder
@somefriend mentioned you in a tweet
Another friend is nowlive on Periscope
We have 12 new stories for you to read
Your device storage is almost full. Please clear some space.
90% chance of rain in the coming 15mins.
#SoMITP#SoMITP#SoMITP1969, NASA moon mission preparation
#SoMITP#SoMITP#SoMITP1997, Deep Blue vs. Garry Kasparov
#SoMITP
Let computers do the hard work for us
#SoMITP
We’ll have to earn the trustof the people
#SoMITPHer, Spike Jonze, 2013
#SoMITP
Overcoming distrust:
• Onboard users, so they know what they can expect
• Explain the choices you make
• Allow people to make the system better, smarter and more personal
#SoMITP#SoMITPFacebook M
#SoMITP
We need to think about:
• What goes in: which triggers, sensors and data do we take into account.
• Processing: what are the rules to define the translation between input and output? Which choices do we make or prepare?
• What comes out: when do we push some information back to the user, and what does that interaction look like?
#SoMITP
Design moments.4.
#SoMITP#SoMITP
Food freshness
…
…
…Time Location
Movement
Weather
Fitness
Blood values
ZZZ
Sleep
Temperature
Heart rate
#SoMITP
#SoMITP#SoMITP#SoMITP
Clear Glanceable Actionable
#SoMITP#SoMITP#SoMITPhttps://www.kickstarter.com/projects/582920317/hidrateme-smart-water-bottle/
#SoMITP
Designing moments:
• Be contextually relevant
• Make your information clear, glanceable and actionable
• Blend in with the user’s current environment
• Think about what to push vs. pull
#SoMITP
Design systems, not screens.
5.
#SoMITP#SoMITP#SoMITPAtomic Design
Atoms Molecules Organisms Templates Pages
Beyond the screen Screen-based
#SoMITP
CONCLUSION
#SoMITP
Mobile technology is capable of delivering elegant and magical solutions far beyond screen experiences.
#SoMITP
Technology is becoming so embedded in our lives, that our job as designers can not just stop at designing the on-screen experience.
We need to design everything around it to make the entire experience elegant and magical.
#SoMITP
With more technology at our disposal, we’ll have to focus on designing the service as the main driver of the user experience and see the interface as an ‘avatar’ to deliver that experience through.
THANK YOU!