Designing cross-platform mobile apps and how to get find the key experience elements that will make your app a success. A meetup lecture i give in Oslo, Norway at the 22th of january 2014. Would you like me to give presentation, a different talk or a lecture about design & user experience? Give a me shout at http://www.robinkleinschiphorst.nl .

1. The Experience
The key to cross-platform design
– Robin Klein Schiphorst

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

3. Agenda
•
Current situation
•
How to get started
•
Design tips & tricks
•
Good examples what to do and what not
•
Summary

4. Designing an Experience
In the digital jungle

5. Forget about devices

6. source: http://bradfrostweb.com/

7. Forget about platform

9. But.. but..

11. We change phone every 1 to 2 years
Your brand doesn’t.

12. Iphone wins on time & money spend on apps.

13. “ winning, for us, has never been
about making the most. ”
- D11 Conference, Apple CEO Tim Cook

14. Users don’t care
If i change phone,
should i relearn to use the app?

15. Let’s stop.
Take a step back.
Noise..

16. So..
What does this mean.

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

18. Don’t skip
Research and testing

19. Remember
easy and enjoyable

20. getting started
A clear idea, vision & goals.

21. Think in
opportunities

22. Location
Situation
Usability
Functionality

23. Write down all idea’s,
features & wishes

24. Organise your idea’s so
you have a clear overview

25. Create a flow chart

26. Create a list of targeted devices
What is the difference between them
iPad Air - mini
iPhone 4 - 5
Galaxy Note
Galaxy S4

27. Fluid & mobile first
improve with break points

28. Start wireframing on paper
gives you more time to think

29. Design tips & tricks
makes working easier

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

31. Animate you interaction ideas
Source: The float label form interaction by Matt D Smith

32. You go from this.

33. You go from this.
to this.

34. Examples of cross platform
The good and the bad

35. Create a solid brand identity

36. Common elements/feeling
✓
✓
✓
Logo
Icon
Label

37. Its a great feeling
when something just works amazing.

38. Common elements, but why the strange difference?
Iphone
Android
Blackberry

39. Bad choice on menu position on android
Iphone
Android

40. Create a solid experience
cross-platform
It’s in the details.

41. Popular mobile design patterns
should be shared cross-platform
It doesn’t matter on which platform it was first used.

42. Interactions

43. Interactions
Default behaviour
to show menu
Swipe from
right to left

44. One interaction
Default behaviour is
check or delete
New option
Setting a value
Variation
Finido & Mail Pilot app

45. ✓
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

46. ✓
Simple navigation
✓
Touch & hold:
The heavy user navigation

47. User moments

48. Handle (unexpected) moments
Very important

49. Create an emotional connection

50. When you take care of the moments
clients will love you.

51. Summary remember
•
Forget device & os
•
Create a clear concept
•
Start with a small range first,
like tablet 7 to 9 inch
•
Mobile first
Start with flowcharts &
wireframes
•
Fluid first
•
Solid brand identity
•
Enhance with break points
•
Solid uniform experience
•
Use device specific features
to enhance experience
•
Icons should be communicate
the same message
•
Create structured and clean
design files
Find touch interactions to
compliment experience
•
Create a ui collection
•
•

52. Going into detail with our course
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

53. Thank you all!
For you interest.
It’s time for the break
Email
robin@interactivetribe.com!
Twitter
@eyenoxmedia