Ocean user experience-swtokyo

1,321 views

Published on

Published in: Business, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,321
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Ocean user experience-swtokyo

  1. 1. USER EXPERIENCE SESSIONStartup Weekend Tokyo #swtokyo10 May 2012 @Pasona, Shin-marunouchi Building, TokyoMayako FagerfjällManaging DirectorPer NordqvistInteraction DesignerMaximilian LarssonGraphic Designer
  2. 2. WE ARE THE OCEANOcean Observations is a Swedish award-winning designagency focused on designing usable, useful and beautifulmobile services and products. We are located in Stockholmand Tokyo, and work with clients all over the world. Some ofthem are among the most influential companies in theindustry, such as Nokia, Vodafone, KDDI, Skype, Ericsson, O2,Samsung and Huawei.Our team is a sweet blend of interaction designers, graphicdesigners, industrial designers, design strategists,programmers and business developers.
  3. 3. THAT’S US IN JAPAN!
  4. 4. FEDEX DAYOCEAN’S MINI-STARTUP WEEKEND
  5. 5. GOOD PEOPLEMATTERSMORE THANGOOD IDEAS“If you give a good idea to amediocre team, they will screwit up, if you give a mediocre ideato a great team, they will eitherfix it or throw it away and startwith something new.”Ed Catmull, co-founder Pixar
  6. 6. PUT TOGETHER A DIVERSEGROUP OF PEOPLE
  7. 7. IF IT WAS ABOUT THE PROCESSANYONE COULD BE APPLE
  8. 8. 1. RESEARCH & STRATEGY
  9. 9. WHAT’S THEPROBLEM?“If I had one hour to save theworld I would spend fifty-fiveminutes defining the problemand only five minutes findingthe solution.”Albert Einstein
  10. 10. “IF I’D ASKED MY CUSTOMERS WHATTHEY WANTED THEY WOULD HAVESAID A FASTER HORSE” - Tom Ford
  11. 11. 2. INITIAL CONCEPT
  12. 12. 3. REFINED CONCEPT
  13. 13. CRITICISMPRESENTS ANOPPORTUNITYTO GROW“Criticism may not be agreeable, butit is necessary. It fulfills the samefunction as pain in the human body.It calls attention to an unhealthystate of things.”Winston Churchill Image from LIFE
  14. 14. 4. DESIGN PRODUCTION
  15. 15. 5. IMPLEMENTATION SUPPORT
  16. 16. THE DESIGN PROCESS !
  17. 17. THE DESIGN PROCESSSTART-UP WEEKEND !
  18. 18. THE DESIGN PROCESSSTART-UP WEEKEND !
  19. 19. THE DESIGN PROCESSSTART-UP WEEKEND !FRIDAY
  20. 20. THE DESIGN PROCESSSTART-UP WEEKEND !FRIDAY SATURDAY
  21. 21. THE DESIGN PROCESSSTART-UP WEEKEND !FRIDAY SATURDAY SUNDAY
  22. 22. DESIGN PRINCIPLES FOR ABETTER USER EXPERIENCE
  23. 23. YOU RIGHT NOW ! FRIDAY SATURDAY SUNDAY
  24. 24. YOU RIGHT NOW 9 DESIGN PRINCIPLES ! FRIDAY SATURDAY SUNDAY
  25. 25. YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT ! FRIDAY SATURDAY SUNDAY
  26. 26. Represent the basic assumptions of the world. Affect the arrangement of objects within a composition. Checklist and guide for the design practice.YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT ! FRIDAY SATURDAY SUNDAY
  27. 27. STRUCTUREOrganize information purposefully in a meaningful and useful way, and keep thesame conventions throughout the whole interface.
  28. 28. STRUCTURE Where am I? How did I get here? Where can I go?
  29. 29. SIMPLICITYFocus on most common use cases and optimize the workflow for these.Economize the information and exclude all that is irrelevant or excessive.
  30. 30. Ticket vending machine for Stockholm Public TransportationSIMPLICITYFocus on most common use cases and optimize the workflow for these.Economize the information and exclude all that is irrelevant or excessive.
  31. 31. “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.”SIMPLICITYFocus on most common use cases and optimize the workflow for these.Economize the information and exclude all that is irrelevant or excessive.
  32. 32. RELEVANCEKeep information that is relevant to the user’s current situation visible.Hide or remove the rest. Show information when needed.
  33. 33. FEEDBACKInform the user of what’s going on in the system and if somethingunexpected is about to happen. Prevent errors, but if they occur,assist the user to recover from them.
  34. 34. VISUAL COMPLEXITYFind the right balance of complexity. Give prominence only to importantelements and be unmerciful when weighting your information.
  35. 35. Visual confusion is design clutter and scares your users away! Hyperdia iPhone appVISUAL COMPLEXITYFind the right balance of complexity. Give prominence only to importantelements and be unmerciful when weighting your information.
  36. 36. AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.
  37. 37. Learn from the real world!AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.
  38. 38. Learn from the real world!AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.
  39. 39. DIRECTMANIPULATIONInteract with objects directly. Click, drag, mark & type as opposed tocommands, menu selections and dialogue boxes.
  40. 40. DIRECTMANIPULATIONInteract with objects directly. Click, drag, mark & type as opposed tocommands, menu selections and dialogue boxes.
  41. 41. CONSISTENCYSame conventions for ALL elements. Make unique or unrelated objects standout. Consistency within UI but also with platform conventions.
  42. 42. TOLERANCEPrevent errors and help the to recover from errors. Expect and forgive usermistakes. The interface is there for the user, not the other way around.
  43. 43. STRUCTURE AFFORDANCE SIMPLICITY DIRECT MANIPULATION RELEVANCE CONSISTENCY FEEDBACK TOLERANCE VISUAL COMPLEXITY !FRIDAY SATURDAY SUNDAY
  44. 44. THEBANANA Its the one thing you want your users to reach for.
  45. 45. WHERE ISTHE BANANA What is the purpose of this specific page?
  46. 46. MOREBANANASNot too many bananas.One big banana and some very few small ones.Use common sense and dont make your usersthink.
  47. 47. GRAPHIC DESIGN
  48. 48. ?How to
  49. 49. I WILL NOTTALK ABOUT Fonts, Photoshop, Color matching.- This is a crash course in a graphic design process for startup weekend
  50. 50. CONSTRAINTS- Device- Code- Time- Target user- Resolution- Performance
  51. 51. WIREFRAMES AWESOME APP- Work closely with the team- Make sure you have the user in mind- Pen and paper is your friend here- Wireframes is the guideline for the team
  52. 52. INSPIRATION- Competitors- Get inspired by other designers or apps- Current favorite site for inspiration - Dribbble.com
  53. 53. ITERATE DESIGN- Weapon of choice- Feedback with team- Don’t just add design, also remove graphicalobstacles. PSD PSD PSD PSD PSD PSD PSD PSD PSD PSD
  54. 54. DEADLINE- Your design is done when the deadline hits- Don’t get stuck on small things- Deliverables: App, Pressentation
  55. 55. GOOD LUCK!
  56. 56. THANK YOU!mayako@oceanobservations.comper@oceanobservations.commaximilian@oceanobservations.comwww.oceanobservations.comoceantokyo.tumblr.comocean_sthlm@twitter

×