Successfully reported this slideshow.

Designing cross-platform mobile apps - Meetup Oslo 2014-01-22

477 views

Published on

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 .

Published in: Design, Technology
  • Be the first to comment

Designing cross-platform mobile apps - Meetup Oslo 2014-01-22

  1. 1. The Experience The key to cross-platform design – Robin Klein Schiphorst
  2. 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. 3. Agenda • Current situation • How to get started • Design tips & tricks • Good examples what to do and what not • Summary
  4. 4. Designing an Experience In the digital jungle
  5. 5. Forget about devices
  6. 6. source: http://bradfrostweb.com/
  7. 7. Forget about platform
  8. 8. But.. but..
  9. 9. We change phone every 1 to 2 years Your brand doesn’t.
  10. 10. Iphone wins on time & money spend on apps.
  11. 11. “ winning, for us, has never been about making the most. ” - D11 Conference, Apple CEO Tim Cook
  12. 12. Users don’t care If i change phone, should i relearn to use the app?
  13. 13. Let’s stop. Take a step back. Noise..
  14. 14. So.. What does this mean.
  15. 15. 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
  16. 16. Don’t skip Research and testing
  17. 17. Remember easy and enjoyable
  18. 18. getting started A clear idea, vision & goals.
  19. 19. Think in opportunities
  20. 20. Location Situation Usability Functionality
  21. 21. Write down all idea’s, features & wishes
  22. 22. Organise your idea’s so you have a clear overview
  23. 23. Create a flow chart
  24. 24. Create a list of targeted devices What is the difference between them iPad Air - mini iPhone 4 - 5 Galaxy Note Galaxy S4
  25. 25. Fluid & mobile first improve with break points
  26. 26. Start wireframing on paper gives you more time to think
  27. 27. Design tips & tricks makes working easier
  28. 28. 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
  29. 29. Animate you interaction ideas Source: The float label form interaction by Matt D Smith
  30. 30. You go from this.
  31. 31. You go from this. to this.
  32. 32. Examples of cross platform The good and the bad
  33. 33. Create a solid brand identity
  34. 34. Common elements/feeling ✓ ✓ ✓ Logo Icon Label
  35. 35. Its a great feeling when something just works amazing.
  36. 36. Common elements, but why the strange difference? Iphone Android Blackberry
  37. 37. Bad choice on menu position on android Iphone Android
  38. 38. Create a solid experience cross-platform It’s in the details.
  39. 39. Popular mobile design patterns should be shared cross-platform It doesn’t matter on which platform it was first used.
  40. 40. Interactions
  41. 41. Interactions Default behaviour to show menu Swipe from right to left
  42. 42. One interaction Default behaviour is check or delete New option Setting a value Variation Finido & Mail Pilot app
  43. 43. ✓ 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
  44. 44. ✓ Simple navigation ✓ Touch & hold:
 The heavy user navigation
  45. 45. User moments
  46. 46. Handle (unexpected) moments Very important
  47. 47. Create an emotional connection
  48. 48. When you take care of the moments clients will love you.
  49. 49. 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 • •
  50. 50. 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
  51. 51. Thank you all! For you interest. It’s time for the break Email robin@interactivetribe.com! Twitter @eyenoxmedia

×