Post on 09-Jul-2015
description
transcript
– Robin Klein Schiphorst
The Experience The key to cross-platform design
My name is
Robin Klein Schiphorst
User interface & experience designer Mobile | Responsive | Consulting www.robinkleinschiphorst.nl !
Current location Holland, recently lived in Norway for 1,5 years
Agenda
• Current situation
• How to get started
• Design tips & tricks
• Good examples what to do and what not
• Summary
Designing an ExperienceIn the digital jungle
Forget about devices
Forget about platform
But.. but..
We change phone every 1 to 2 yearsYour brand doesn’t.
Iphone wins on time & money spend on apps.
“ winning, for us, has never been about making the most. ”
- D11 Conference, Apple CEO Tim Cook
Users don’t careIf i change phone, should i relearn to use the app?
Let’s stop.
Take a step back.
Noise..
So..
What does this mean.
We should aim for✓ A means for the user accomplice his/her goal ✓ Create an enjoyable experience ✓ A good foundation to build on ✓ Visual layer to make the use a breeze ✓ Making a task easier.
It’s not a design competition
- Look amazing - Doing new & intuitive things
Don’t skip
Research and testing
Remember
easy and enjoyable
getting started
A clear idea, vision & goals.
Think in opportunities
Location Situation
Usability Functionality
Write down all idea’s, features & wishes
Organise your idea’s so you have a clear overview
Create a flow chart
Create a list of targeted devices What is the difference between them
iPad Air - mini iPhone 4 - 5
Galaxy Note Galaxy S4
Fluid & mobile first improve with break points
Start wireframing on paper gives you more time to think
Design tips & tricks makes working easier
Design tips & tricks
✓ Go vector or at least retina
✓ Create structure with folders
✓ Name your layers
✓ Use layer colours to highlight status
✓ Use smart objects
✓ Make a folder with all elements
✓ Use notes in your psd
Animate you interaction ideas
Source: The float label form interaction by Matt D Smith
You go from this.
You go from this.to this.
Examples of cross platformThe good and the bad
Create a solid brand identity
✓ Logo ✓ Icon ✓ Label
Common elements/feeling
when something just works amazing.
Its a great feeling
Common elements, but why the strange difference?
Iphone Android Blackberry
Bad choice on menu position on android
Iphone Android
Create a solid experience cross-platform
It’s in the details.
Popular mobile design patterns should be shared cross-platform
It doesn’t matter on which platform it was first used.
Interactions
Interactions
Default behaviour to show menu
Swipe from right to left
One interaction
Default behaviour is check or delete
New option Setting a value Variation
Finido & Mail Pilot app
✓ Good use of screen space in combination with interaction
✓ Different types of navigation
✓ Customisable navigation
✓ Smart touch gestures
✓ Respecting your time: Continue while tweet is being send
✓ Great use of sounds
✓ Simple navigation
✓ Touch & hold:The heavy user navigation
User moments
Handle (unexpected) moments Very important
Create an emotional connection
When you take care of the moments clients will love you.
• Forget device & os
• Create a clear concept
• Start with flowcharts & wireframes
• Solid brand identity
• Solid uniform experience
• Icons should be communicate the same message
• Find touch interactions to compliment experience
• Start with a small range first, like tablet 7 to 9 inch
• Mobile first
• Fluid first
• Enhance with break points
• Use device specific features to enhance experience
• Create structured and clean design files
• Create a ui collection
Summary remember
We are giving two courses in March on!mobile app design & development.!!
Learn about the compleet proces of a great app in detail from start to launch in the app stores.!!
We appreciate if you can help share the news with college’s and friends.
Course info: www.interactivetribe.com
Going into detail with our course
Thank you all!For you interest.
Email robin@interactivetribe.com!
Twitter @eyenoxmedia
It’s time for the break