95

Mobile Functional Beauty - Trebbble

Embed Size (px)

DESCRIPTION

Crafting brilliant mobile experiences, goes beyond aesthetics and pixel perfect designs; it necessitates strong understanding of interactive elements, usability patterns, gestures and mobile hardware capabilities. All these, when harmonically blended, may lead to highly emotional and delightful experiences, which will target the hearts and minds of mobile users, and will ultimately keep them engaged in a mobile application. The presentation covers most aspects of a mobile app lifecycle (starting from early Discovery stages to Store submission and on-going support) and helps designers understand and recognise mobile landscape evolution, screen limitations, huge hardware opportunities, and how to take advantage of touch interactions. Moreover, it provides best cases and practical information on core design components of a mobile app, creating an optimised information hierarchy, respecting mobile platforms usage patterns, prototyping, evaluating designs and more. The presentation was delivered by Trebbble, a mobile strategy and development firm, in the scope of the Digitized 2014 Workshops.

Citation preview

  • 1. www.trebbble.co

2. AGENDAMobile Ecosystem (rules, constraints & challenges)Mobile App LifecycleFocus on Mobile App FlowAnalysis of Beauty & Creativity AspectsApp Submission & Future ImprovementsPractice In Action 3. UX DOMINATESWHEN TECHNOLOGY DELIVERS BASIC NEEDSDonald Norman 4. MOBILEKNOW WHAT YOU WORK ON 5. OS FRAGMENTATIONRESPECT SPECIFIC PLATFORM CHARACTERISTICSAND, CONSEQUENTLY, THE USERS THEMSELVES 6. DEVICE FRAGMENTATIONWITHIN THE SAME PLATFORM18,796Distinct Android devicesin 2014240x320 - 1600x2560Screen Resolution range youhave to compensateOpenSignal 2014, opensignal.com 7. DEVICE FRAGMENTATIONWITHIN THE SAME PLATFORMwww.paintcodeapp.com 8. DEVICE H/W CAPABILITIESUNIQUE MOBILE CONTEXTMOTION SENSORSAccelerometersGravity SensorsGyroscopeRotationalENVIRONMENTAL SENSORSAir Temperature & PressureIlluminationHumidityBarometersPhotometersPOSITION SENSORSOrientation SensorsMagnetometersmacro & micro locationEVEN MORECamera (front & rear)MicrophoneFingerprint 9. MOBILE ECOSYSTEMIS EVOLVING DAY-BY-DAY 10. USER BEHAVIOURON-THE-GO & MULTI-TASKING80%USE SMARTPHONES ON-THE-GO64%USE SMARTPHONES IN COFFEE SHOPS54%USE SMARTPHONES WHILE WATCHING TV 11. MOBILE ECOSYSTEMOFFERS GREAT CHALLENGES FOR UXDESIGNERS 12. MOBILE APPLIFECYCLE& THE ROLE OF A UX DESIGNERFoursquare App - Early visual design explorations 13. MYTH #31UX DESIGN IS A STEP IN A PROJECTuxmyths.com 14. MOBILE APP LIFECYCLETHE 3 STAGESDISCOVERYUX & VISUAL DESIGNQUALITYASSURANCEMARKET LAUNCHSUPPORT &IMPROVEPROJECT PLANROADMAPENGINEERINGACQUIRE & ENGAGE 15. DISCOVERYWHICH IS YOUR TARGET AUDIENCE 16. DISCOVERYWHICH ARE THE BUSINESS GOALSLOYALTY / SALES / BRAND AWARENESS / INDUSTRY LEADERnecessitate different UX approach 17. DISCOVERYWHERE & WHEN EXPERIENCE TAKES PLACEIN-STORE OR OUTDOOR / DAY OR NIGHTimpose different needs 18. UX RESEARCHINDUSTRY ANALYSISINDUSTRY TRENDS / COMPETITORS / FIELD INNOVATORS /SIMILAR APPS / CLIENT WEBSITE 19. UX RESEARCHPERSONAS ANALYSISCREATE PERSONAS / BUILD SCENARIOS /UNDERSTAND USERS CONTEXT & PSYCHOLOGY 20. FOCUS ON APP FLOWSTART WITH SCREEN TRANSITIONS; VISUAL DESIGN COMESLATER 21. APPLICATION FLOWINITIAL SCREEN FLOW SKETCHINGSTART WITH A WHITEBOARD;GOOD FOR TEAM BRAINSTORMING 22. APPLICATION FLOWINITIAL SCREEN FLOW SKETCHINGCONTINUE WITH PAPER SKETCHING;GREATER FOCUS TO HELP IMPROVE APP FLOW 23. APPLICATION FLOWLOW-FIDELITY PROTOTYPEQUICK TESTING TO VERIFY IDEAS, APP FLOWAND ENSURE USABILITY 24. APPLICATION FLOWDIGITIZE IT ;)VISUAL HIERARCHY / CONTENT GROUPING /SPACING / POSITIONING 25. SYNC WITH DEVELOPERSMAKE SURE THAT YOUR FLOW IS FEASIBLE 26. APPLICATION FLOW(FINAL) WIREFRAMESCONTENT HIERARCHY AND APPLICATION FLOW SHARE WITH THE CLIENT; IT WILL SAVE TIME!!! 27. APP FLOW TIPSKEEP THEM ALWAYS IN MIND 28. PAPER SKETCHING TIPSBALANCE BUSINESS & DESIGNEVERY LEFT PAGE IS DEVOTED TO BUSINESS BRAINSTORMING;EVERY RIGHT PAGE TO SKETCHING DESIGNS 29. CONTENT HIERARCHYLESS IS MOREMOREIMPORTANTLESSIMPORTANTEMPHASISE ON THE PRIMARY CONTENTGET RID OF ALL THE EXTRA CLUTTER THAT DOESNT ADD VALUE 30. CONTENT HIERARCHYHOW USERS HOLD MOBILE DEVICES49% 36% 15% 31. CONTENT HIERARCHYHOW USERS HOLD MOBILE DEVICES90% 10% 32. NAVIGATIONMAKE IMPORTANT THINGS FASTENSURE MINIMUM STEPSFOR THE CORE FUNCTIONALITY- IF POSSIBLE, MAKE IT EASILY EXTENDABLE - 33. NAVIGATIONDONT IGNORE PLATFORM UXEPIC FAIL!!!NO RESPECT TO ANDROID USERS 34. BEAUTY & CREATIVITYMAKE IT SEDUCTIVE, MEMORABLEWorkspace of Jeremy Goldberg - UX Designer @Google 35. FIRST IMPRESSIONMATTERSTHIS IS WHERE YOU WIN A MOBILE USER 36. YOU NEVER GET A SECOND CHANCE TOMAKE YOUR FIRST IMPRESSION 37. THE FIRST IMPRESSIONSPLASH SCREENTimehop Directr Artsy KidCam 38. THE FIRST IMPRESSIONWALKTHROUGHSUSE OF INSPIRATIONAL PHOTOGRAPHYALONG WITH APP BENEFITSAirbnb Application 39. THE FIRST IMPRESSIONWALKTHROUGHSSIMPLY INTRODUCE HOW-TO-USE THE APPStacks Application 40. THE FIRST IMPRESSIONWALKTHROUGHSFUNNY APPROACHClique Application 41. THE FIRST IMPRESSIONSIGN UP FORMSTriplAgent ChitChat TimehopSMALL-SIZED FORMS / SIMPLICITY / CREATIVITY 42. THE FIRST IMPRESSIONONBOARDINGFULL OF CREATIVITYCitymapper Application 43. INSPIRATIONAL PATTERNSLEARN FROM THE BEST, REAL APPS 44. MOBILE PATTERNSEMPHASIS ON PHOTOGRAPHY & SHORT DETAILSLISTSYahoo News Digest Snapguide Sosh - City Guide Day One 45. MOBILE PATTERNSLISTSGogobot Peek Calendar Hotel Tonight ClearFLAT APPROACH 46. MOBILE PATTERNSNICE ALTERNATIVE TO LISTSCOVER FLOWSFoodspotting DIY Dcovery Beat 47. THE FIRST IMPRESSIONPROFILE VIEWSEVOLUTION OVER TIMEFoursquare Application 48. MOBILE PATTERNSCONTENT/VENUE DETAILSAirbnb Foursquare TriplAgent 49. THE FIRST IMPRESSIONNAVIGATION - SIDEBARSEVOLUTION OVER TIMERdio Application 50. MOBILE PATTERNSNAVIGATION ALTERNATIVESStorylane Reader Ultravisual Huffington Post LinkedIn Connected 51. MOBILE PATTERNSPOPOVERSTwo Dots Dots Lootsy Rdio 52. DETAILS MATTERNEVER NEGLECT SECONDARY SCREENS 53. MOBILE PATTERNSGUIDE THE USEREMPTY DATARunKeeper Circa News Potluck iMovie 54. THE FIRST IMPRESSIONEMPTY DATAClique FrontbackBE CREATIVE 55. THE FIRST IMPRESSIONERRORSTimehop WIND My QKEEP THE USER (POSITIVELY) SURPRISED 56. MOBILE PATTERNSCOACH MARKSSecret MySpace Flink Facebook PaperHELP USER UNCOVER ALL OPTIONS 57. MOBILE PATTERNSABOUTPeek Calendar Harmony Yplan Cocos Workout WorldPROVIDE CONTACT INFO / PROMOTE YOUR BRAND 58. ANIMATIONS MATTERSKYROCKET THE EXPERIENCE 59. ANIMATIONSIN WALKTHROUGHSMark Geyer @dribbble 60. ANIMATIONSIN MENU OPTIONSKarol Ortyl @dribbble 61. ANIMATIONSIN MENU OPTIONSSergey Valiukh @dribbble 62. ANIMATIONSIN LOADINGCuberto @dribbble 63. ANIMATIONSIN LOADINGJan Semler - Animation 64. ANIMATIONSPULL-TO-REFRESHDmytro Prudnikov @dribbble 65. SYNC WITH DEVELOPERSMAKE SURE THAT YOUR VISUAL APPROACH IS FEASIBLE 66. VISUAL DESIGN TIPSKEEP THEM ALWAYS IN MIND 67. SIMPLIFY UIENHANCE BLOCK SPACINGCLEAN UI / COLOUR SPACING / NO LINES OR DIVIDERSPeek Calendar Application 68. COLOR SCHEMESHIGHLIGHT ACTIONSLumosity Sosh - City Guide TimehopENHANCE FOCUS ON ACTIONS 69. LAYERED UITRANSLUCENT ELEMENTSENHANCE CONTENT FOCUS & HIERARCHYYahoo Weather Application 70. BUTTONSDON'T MIMIC UI ELEMENTS FROM OTHER PLATFORMS 71. BUTTONSMULTIPLE STATESALWAYS PROVIDE FEEDBACK TO THE USER 72. BUTTONSCONSIDER HIDDEN BUTTONSGESTURES LEAD TO EVEN CLEANER & SIMPLER UI 73. BRANDINGKEEP IT UNOBTRUSIVERECOMMENDED NOT RECOMMENDEDUSE SPACE ONLY FOR THE CONTENT USERS CARE ABOUT 74. TONE OF VOICEKEEP IT SIMPLE & FRIENDLY 75. PREPARE UI SPECSMAKE DEVELOPERS (& REST DESIGNERS) LIFE EASY 76. CREATE UI ELEMENTSYOUR FRIENDQUICKLY EXPORT PSD ELEMENTS- SUPPORTS RETINA - 77. SPECIFY UI ELEMENTSYOUR DEVELOPERS FRIEND 78. MOBILE UI SPECIFICATIONSDOCUMENTSFINAL WIREFRAMESHIGH-FIDELITY MOCKUPSUI ELEMENTSAll the above should be part of the overall app specifications document 79. QUALITY ASSURANCEENSURE APP QUALITY 80. QUALITY ASSURANCEHOW CAN YOU HELPPARTICIPATE IN UAT SCENARIOSEXTENSIVE MANUAL TESTINGFocus on both usability & visual aspects 81. APP SUBMISSIONTHE VERY FIRST IMPRESSIONS START HEREFoursquare App - App Store screenshots 82. APP SUBMISSIONAPP ICONApp Icon inspiration, @dribbble 83. APP SUBMISSIONAPP STORE SCREENSHOTSCamu iPhone App 84. APP SUBMISSIONAPP STORE SCREENSHOTSFuse iPhone App 85. SUPPORT & IMPROVEECOSYSTEM CHANGES EVERY DAY. ADAPT.Apple Event, Sep 2014 86. LESSON #1GET TO KNOW MOBILE CONSTRAINTS & CAPABILITIES 87. LESSON #2WORK ALONG WITH DEVELOPERS 88. LESSON #3STOP THINKING OF SCREENS AND START THINKING OF TRANSITIONS 89. LESSON #4WORK HARD ON INFORMATION ARCHITECTURE 90. LESSON #5GOD LIVES IN THE DETAILS 91. LESSON #6ANIMATIONS SKYROCKET MOBILE EXPERIENCE 92. LESSON #7STUDY & RESPECT OS PATTERNS AND BUILDING BLOCKS 93. ONE LAST TIPDOWNLOAD NUMEROUS APPS. DAILY.