Downloaded 36 times
Uploaded byTrebbble
Mobile Functional Beauty - Trebbble
This document provides an overview of key considerations for mobile user experience (UX) design. It discusses the mobile ecosystem and how it is constantly evolving. It outlines the typical mobile app lifecycle including discovery, design, quality assurance, launch, and ongoing improvements. It emphasizes designing for the unique constraints of mobile like screen sizes and developing effective app flows and navigation. It also stresses the importance of visual design elements like icons, animations, and branding to create positive first impressions for users.
More Related Content
![[Srijan Wednesday Webinars] Rethinking Mobile Strategy for 2015](https://cdn.slidesharecdn.com/ss_thumbnails/mobile-20151-140825090521-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile Functional Beauty - Trebbble
- 2.
- 3. AGENDA Mobile Ecosystem(rules, constraints & challenges) Mobile App Lifecycle Focus on Mobile App Flow Analysis of Beauty & Creativity Aspects App Submission & Future Improvements Practice In Action
- 4. UX DOMINATES WHENTECHNOLOGY DELIVERS BASIC NEEDS Donald Norman
- 5. MOBILE KNOW WHATYOU WORK ON
- 6. OS FRAGMENTATION RESPECTSPECIFIC PLATFORM CHARACTERISTICS AND, CONSEQUENTLY, THE USERS THEMSELVES
- 7. DEVICE FRAGMENTATION WITHINTHE SAME PLATFORM 18,796 Distinct Android devices in 2014 240x320 - 1600x2560 Screen Resolution range you have to compensate OpenSignal 2014, opensignal.com
- 8. DEVICE FRAGMENTATION WITHINTHE SAME PLATFORM www.paintcodeapp.com
- 9. DEVICE H/W CAPABILITIES UNIQUE MOBILE CONTEXT MOTION SENSORS Accelerometers Gravity Sensors Gyroscope Rotational ENVIRONMENTAL SENSORS Air Temperature & Pressure Illumination Humidity Barometers Photometers POSITION SENSORS Orientation Sensors Magnetometers macro & micro location EVEN MORE Camera (front & rear) Microphone Fingerprint …
- 10. MOBILE ECOSYSTEM ISEVOLVING DAY-BY-DAY
- 11. USER BEHAVIOUR ON-THE-GO& MULTI-TASKING 80% USE SMARTPHONES ON-THE-GO 64% USE SMARTPHONES IN COFFEE SHOPS 54% USE SMARTPHONES WHILE WATCHING TV
- 12. MOBILE ECOSYSTEM OFFERSGREAT CHALLENGES FOR UX DESIGNERS
- 13. MOBILE APP LIFECYCLE & THE ROLE OF A UX DESIGNER Foursquare App - Early visual design explorations
- 14. MYTH #31 UXDESIGN IS A STEP IN A PROJECT uxmyths.com
- 15. MOBILE APP LIFECYCLE THE 3 STAGES DISCOVERY UX & VISUAL DESIGN QUALITY ASSURANCE MARKET LAUNCH SUPPORT & IMPROVE PROJECT PLAN ROADMAP ENGINEERING ACQUIRE & ENGAGE
- 16. DISCOVERY WHICH ISYOUR TARGET AUDIENCE
- 17. DISCOVERY WHICH ARETHE BUSINESS GOALS LOYALTY / SALES / BRAND AWARENESS / INDUSTRY LEADER necessitate different UX approach
- 18. DISCOVERY WHERE &WHEN EXPERIENCE TAKES PLACE IN-STORE OR OUTDOOR / DAY OR NIGHT impose different needs
- 19. UX RESEARCH INDUSTRYANALYSIS INDUSTRY TRENDS / COMPETITORS / FIELD INNOVATORS / SIMILAR APPS / CLIENT WEBSITE
- 20. UX RESEARCH PERSONASANALYSIS CREATE PERSONAS / BUILD SCENARIOS / UNDERSTAND USERS’ CONTEXT & PSYCHOLOGY
- 21. FOCUS ON APPFLOW START WITH SCREEN TRANSITIONS; VISUAL DESIGN COMES LATER
- 22. APPLICATION FLOW INITIALSCREEN FLOW SKETCHING START WITH A WHITEBOARD; GOOD FOR TEAM BRAINSTORMING
- 23. APPLICATION FLOW INITIALSCREEN FLOW SKETCHING CONTINUE WITH PAPER SKETCHING; GREATER FOCUS TO HELP IMPROVE APP FLOW
- 24. APPLICATION FLOW LOW-FIDELITYPROTOTYPE QUICK TESTING TO VERIFY IDEAS, APP FLOW AND ENSURE USABILITY
- 25. APPLICATION FLOW DIGITIZEIT ;) VISUAL HIERARCHY / CONTENT GROUPING / SPACING / POSITIONING
- 26. SYNC WITH DEVELOPERS MAKE SURE THAT YOUR FLOW IS FEASIBLE
- 27. APPLICATION FLOW (FINAL)WIREFRAMES CONTENT HIERARCHY AND APPLICATION FLOW — SHARE WITH THE CLIENT; IT WILL SAVE TIME!!! —
- 28. APP FLOW TIPS KEEP THEM ALWAYS IN MIND
- 29. PAPER SKETCHING TIPS BALANCE BUSINESS & DESIGN EVERY LEFT PAGE IS DEVOTED TO BUSINESS BRAINSTORMING; EVERY RIGHT PAGE TO SKETCHING DESIGNS
- 30. CONTENT HIERARCHY LESSIS MORE MORE IMPORTANT LESS IMPORTANT EMPHASISE ON THE PRIMARY CONTENT GET RID OF ALL THE EXTRA CLUTTER THAT DOESN’T ADD VALUE
- 31. CONTENT HIERARCHY HOWUSERS HOLD MOBILE DEVICES 49% 36% 15%
- 32. CONTENT HIERARCHY HOWUSERS HOLD MOBILE DEVICES 90% 10%
- 33. NAVIGATION MAKE IMPORTANTTHINGS FAST ENSURE MINIMUM STEPS FOR THE CORE FUNCTIONALITY - IF POSSIBLE, MAKE IT EASILY EXTENDABLE -
- 34. NAVIGATION DON’T IGNOREPLATFORM UX EPIC FAIL!!! NO RESPECT TO ANDROID USERS
- 35. BEAUTY & CREATIVITY MAKE IT SEDUCTIVE, MEMORABLE Workspace of Jeremy Goldberg - UX Designer @Google
- 36. FIRST IMPRESSION MATTERS THIS IS WHERE YOU WIN A MOBILE USER
- 37. YOU NEVER GETA SECOND CHANCE TO MAKE YOUR FIRST IMPRESSION
- 38. THE FIRST IMPRESSION SPLASH SCREEN Timehop Directr Artsy KidCam
- 39. THE FIRST IMPRESSION WALKTHROUGHS USE OF INSPIRATIONAL PHOTOGRAPHY ALONG WITH APP BENEFITS Airbnb Application
- 40. THE FIRST IMPRESSION WALKTHROUGHS SIMPLY INTRODUCE HOW-TO-USE THE APP Stacks Application
- 41. THE FIRST IMPRESSION WALKTHROUGHS FUNNY APPROACH Clique Application
- 42. THE FIRST IMPRESSION SIGN UP FORMS TriplAgent ChitChat Timehop SMALL-SIZED FORMS / SIMPLICITY / CREATIVITY
- 43. THE FIRST IMPRESSION ONBOARDING FULL OF CREATIVITY Citymapper Application
- 44. INSPIRATIONAL PATTERNS LEARNFROM THE BEST, REAL APPS
- 45. MOBILE PATTERNS EMPHASISON PHOTOGRAPHY & SHORT DETAILS LISTS Yahoo News Digest Snapguide Sosh - City Guide Day One
- 46. MOBILE PATTERNS LISTS Gogobot Peek Calendar Hotel Tonight Clear FLAT APPROACH
- 47. MOBILE PATTERNS NICEALTERNATIVE TO LISTS COVER FLOWS Foodspotting DIY Dcovery Beat
- 48. THE FIRST IMPRESSION PROFILE VIEWS EVOLUTION OVER TIME Foursquare Application
- 49. MOBILE PATTERNS CONTENT/VENUEDETAILS Airbnb Foursquare TriplAgent
- 50. THE FIRST IMPRESSION NAVIGATION - SIDEBARS EVOLUTION OVER TIME Rdio Application
- 51. MOBILE PATTERNS NAVIGATIONALTERNATIVES Storylane Reader Ultravisual Huffington Post LinkedIn Connected
- 52. MOBILE PATTERNS POPOVERS Two Dots Dots Lootsy Rdio
- 53. DETAILS MATTER NEVERNEGLECT “SECONDARY” SCREENS
- 54. MOBILE PATTERNS GUIDETHE USER EMPTY DATA RunKeeper Circa News Potluck iMovie
- 55. THE FIRST IMPRESSION EMPTY DATA Clique Frontback BE CREATIVE
- 56. THE FIRST IMPRESSION ERRORS Timehop WIND My Q KEEP THE USER (POSITIVELY) SURPRISED
- 57. MOBILE PATTERNS COACHMARKS Secret MySpace Flink Facebook Paper HELP USER UNCOVER ALL OPTIONS
- 58. MOBILE PATTERNS ABOUT Peek Calendar Harmony Yplan Coco’s Workout World PROVIDE CONTACT INFO / PROMOTE YOUR BRAND
- 59. ANIMATIONS MATTER SKYROCKETTHE EXPERIENCE
- 60. ANIMATIONS IN WALKTHROUGHS Mark Geyer @dribbble
- 61. ANIMATIONS IN MENUOPTIONS Karol Ortyl @dribbble
- 62. ANIMATIONS IN MENUOPTIONS Sergey Valiukh @dribbble
- 63. ANIMATIONS IN LOADING Cuberto @dribbble
- 64. ANIMATIONS IN LOADING Jan Semler - Animation
- 65. ANIMATIONS PULL-TO-REFRESH DmytroPrudnikov @dribbble
- 66. SYNC WITH DEVELOPERS MAKE SURE THAT YOUR VISUAL APPROACH IS FEASIBLE
- 67. VISUAL DESIGN TIPS KEEP THEM ALWAYS IN MIND
- 68. SIMPLIFY UI ENHANCEBLOCK SPACING CLEAN UI / COLOUR SPACING / NO LINES OR DIVIDERS Peek Calendar Application
- 69. COLOR SCHEMES HIGHLIGHTACTIONS Lumosity Sosh - City Guide Timehop ENHANCE FOCUS ON ACTIONS
- 70. LAYERED UI TRANSLUCENTELEMENTS ENHANCE CONTENT FOCUS & HIERARCHY Yahoo Weather Application
- 71. BUTTONS DON'T MIMICUI ELEMENTS FROM OTHER PLATFORMS
- 72. BUTTONS MULTIPLE STATES ALWAYS PROVIDE FEEDBACK TO THE USER
- 73. BUTTONS CONSIDER HIDDENBUTTONS GESTURES LEAD TO EVEN CLEANER & SIMPLER UI
- 74. BRANDING KEEP ITUNOBTRUSIVE RECOMMENDED NOT RECOMMENDED USE SPACE ONLY FOR THE CONTENT USERS CARE ABOUT
- 75. TONE OF VOICE KEEP IT SIMPLE & FRIENDLY
- 76. PREPARE UI SPECS MAKE DEVELOPERS’ (& REST DESIGNERS’) LIFE EASY
- 77. CREATE UI ELEMENTS YOUR FRIEND QUICKLY EXPORT PSD ELEMENTS - SUPPORTS RETINA -
- 78. SPECIFY UI ELEMENTS YOUR DEVELOPERS’ FRIEND
- 79. MOBILE UI SPECIFICATIONS DOCUMENTS FINAL WIREFRAMES HIGH-FIDELITY MOCKUPS UI ELEMENTS All the above should be part of the overall app specifications document
- 80. QUALITY ASSURANCE ENSUREAPP QUALITY
- 81. QUALITY ASSURANCE HOWCAN YOU HELP PARTICIPATE IN UAT SCENARIOS EXTENSIVE MANUAL TESTING Focus on both usability & visual aspects
- 82. APP SUBMISSION THEVERY FIRST IMPRESSIONS START HERE Foursquare App - App Store screenshots
- 83. APP SUBMISSION APPICON App Icon inspiration, @dribbble
- 84. APP SUBMISSION APPSTORE SCREENSHOTS Camu iPhone App
- 85. APP SUBMISSION APPSTORE SCREENSHOTS Fuse iPhone App
- 86. SUPPORT & IMPROVE ECOSYSTEM CHANGES EVERY DAY. ADAPT. Apple Event, Sep 2014
- 87. LESSON #1 GETTO KNOW MOBILE CONSTRAINTS & CAPABILITIES
- 88. LESSON #2 WORKALONG WITH DEVELOPERS
- 89. LESSON #3 STOPTHINKING OF SCREENS AND START THINKING OF TRANSITIONS
- 90. LESSON #4 WORKHARD ON INFORMATION ARCHITECTURE
- 91. LESSON #5 GODLIVES IN THE DETAILS
- 92. LESSON #6 ANIMATIONSSKYROCKET MOBILE EXPERIENCE
- 93. LESSON #7 STUDY& RESPECT OS PATTERNS AND BUILDING BLOCKS
- 94. ONE LAST TIP DOWNLOAD NUMEROUS APPS. DAILY.