Mobile Best Practices
ā¢
98 likesā¢14,954 views
These are the materials of a full-day workshop for a Fortune 500 company. It explores the best practices for mobile design, sprint-teams, and considerations to make when designing for omni-channel.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Mobile Best Practices
Similar to Mobile Best Practices (20)
More from Pauly Ting
More from Pauly Ting (14)
Recently uploaded
Recently uploaded (20)
Mobile Best Practices
- 1. Mobile Design Best Practices with Pauly Ting and Omar Jalalzada Wednesday, 22 January 2014 MobileDesign Best Practices
- 2. Mobile Best Practices Whatās ahead Introduction Contextual Background Exploration 1 - Navigation, Browse and Search Exploration 2 - Content Design Exploration 3 - Performance and Delivery Team Dynamics
- 3. Mobile Best Practices What are mobile users exposed to?
- 4. Mobile Best Practices What are mobile users exposed to? Simpler PathsNew Interfaces More InformationMore Control
- 5. Mobile Best Practices What are mobile users exposed to? Clearer InteractionsFeedback Loops More DetailNew Workļ¬ows
- 6. Mobile Best Practices What are mobile users exposed to? Multiple Platforms Hand-fed Support
- 7. Mobile Best Practices What are mobile users exposed to? Multiple Options =
- 8. Mobile Best Practices What is driving this shift? Less ScarcityImpulse Factor Social ProofLean Logistics Risk-free Purchasing Hardware Tech Software Tech Wider Access
- 9. Mobile Best Practices Mobile consumers relate a quality experience to: Speed of experience Ease of use / EnjoymentReliability and robustness Security and trustworthiness
- 10. Mobile Best Practices Three Explorations Exploration 1 - Navigation, Browse and Search Exploration 2 - Content Design Exploration 3 - Performance and Delivery
- 12. Mobile Best Practices Mobile Best Practices What are the challenges? Too many product, need to categorize and sort for the user to browse through Volume of content If a user knows what he/she wants, make it available for the user immediately Quick Accessibility
- 13. Mobile Best Practices Mobile Best Practices Navigation General best practices Limit the layers of navigation ā¢ Mobile users arenāt known for their patience so you need to limit the number of interactions before they get to the product options. Limit the number of menu options on each page ā¢ Even Amazon, with its wealth of product options, only gives six categories on its homepage. ā¢ Another report published in The Journal of Personality and Social Psychology suggests that people tend to get confused when presented with more than six options. Obey the 44x44 rule ā¢ Give each interactive element ample spacing Make it native ā¢ Utilize UI transitions and eļ¬ciency
- 14. Mobile Best Practices Mobile Best Practices Navigation: Best practices on iOS A hierarchal navigation structure Navigate by making one choice per screen ā¢ In a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some of their stepsāor start over from the beginningāand make diļ¬erent choices.
- 15. Mobile Best Practices Mobile Best Practices Navigation: Best practices on Android A navigational drawer Navigate by swiping from the left edge ā¢ The user can bring the navigation drawer onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar.
- 16. Mobile Best Practices Mobile Best Practices Navigation and browsing In-depth look Oļ¬er thematic or guided product browsing ā¢ Customers that need inspiration before deciding which types of products to buy. For example, Summer pants or Birthday Gifts for 10 year olds. Design an easily scannable homepage that enable users to get a feel for what they can do and expect to ļ¬nd at your site. ā¢ 80% of users scroll up and down through the entire page when they land on a homepage or a category list, in what was described by most as "getting an ā¢ overview of my optionsā. Avoid sub-category redundancy and ambiguity. ā¢ More speciļ¬cally, avoid too deep and too shallow categories, illogical hierarchies, and mismatches between categories and their content.
- 17. Mobile Best Practices Mobile Best Practices Navigation and browsing In-depth look Oļ¬er thematic or guided product browsing ā¢ Customers that need inspiration before deciding which types of products to buy. For example, Summer pants or Birthday Gifts for 10 year olds. Design an easily scannable homepage that enable users to get a feel for what they can do and expect to ļ¬nd at your site. ā¢ 80% of users scroll up and down through the entire page when they land on a homepage or a category list, in what was described by most as "getting an ā¢ overview of my optionsā. Avoid sub-category redundancy and ambiguity. ā¢ More speciļ¬cally, avoid too deep and too shallow categories, illogical hierarchies, and mismatches between categories and their content.
- 18. Mobile Best Practices Mobile Best Practices Design an easily scannable homepage that enable users to get a feel for what they can do and expect to ļ¬nd at your site. ā¢ Confusing eye-path ā¢ Highly graphical ā¢ Visual clutter ā¢ Too many CTAs ā¢ No eļ¬ective hierarchy Navigation and browsing In-depth look
- 19. Mobile Best Practices Mobile Best Practices 67% of mobile users utilized search in past week
- 20. Mobile Best Practices Mobile Best Practices Search Best Practices Mobile is highly local (40% according to Google), focused and timely. ā¢ Four out of ļ¬ve people use their smartphone to look up local information. Have search handle mis-spellings and, more importantly, synonyms. ā¢ Users have little knowledge of industry-speciļ¬c jargon and keywords. ā¢ A more systematic and automated approach would be to do machine dictionary lookups of synonyms and add them as fallback (lower weighted) keywords in your search logic. Handle thematic search queries intelligently preferably ā¢ with matching product results or at least with links to matching thematic category lists. ā¢ Apparel search is often diļ¬cult to use as product titles are rarely descriptive but instead use the product model name. So unless the user knows the exact model name of the clothing item they want, it will be diļ¬cult to get a list of relevant search results.
- 21. Mobile Best Practices Mobile Best Practices Search: In-store behavior Best practices Neiman Marcus ā¢ This app provides customers with the ability to personalize the in-store shopping 'experience' by bookmarking certain items, and connecting with sales staļ¬. Meatpack: Hijack ā¢ It used GPS technology to detect users of its app when they were in competitor stores, before sending them a message with a discount. The discount amount acted as timer as well, so the customer had to run to the store. http://vimeo.com/58411219 Amazon ā¢ To make searching for products even easier, Amazonās mobile apps have a barcode scanner that allows users to immediately ļ¬nd the product details and cost
- 22. Mobile Best Practices Mobile Best Practices Exploration 1 Try an exercise Letās draw something. Break into teams of three and spend 15 minutes on one of the following: ā¢ How do you organize a pantry? ā¢ How do you sort your laundry? ā¢ How would you ļ¬nd a good Thai restaurant without the internet?
- 24. Mobile Best Practices Mobile Best Practices Exploration 2 Try an exercise Letās draw a comic strip. Break into new teams of three and spend 15 minutes drawing a comic strip. You are limited to presenting just THREE panels. ā¢ Describe how Health Care Reform works ā¢ The story of Romeo and Juliet ā¢Ā How to ļ¬y a plane
- 25. Mobile Best Practices Mobile Best Practices Challenges with content design User canāt consume all information and drop off Too much to say Losing hierarchy and clarity Everything is Important
- 26. Mobile Best Practices Mobile Best Practices 1. Develop an aesthetic integrity ā¢ Aesthetic integrity doesnāt measure the beauty of an appās artwork or characterize its style; rather, it represents how well an appās appearance and behavior integrates with its function to send a coherent message. ā¢ It's a measure of how well the appearance of your application integrates with its function. Content Design: Best practices Aesthetic Integrity
- 27. Mobile Best Practices Mobile Best Practices 2. Create concise and contextual content ā¢ Always keep in mind that the content for Mobile has a diļ¬erent context, the approach needs to be tailored for this particular medium. ā¢ Describe only what the user needs to know. ā¢ Eliminate redundancy, such as titles that restate the body of an information box. ā¢ Keep text as short as possible. Content Design: Best practices Contextual and Concise
- 28. Mobile Best Practices Mobile Best Practices 3. Focus on visual hierarchy ā¢ Contrast ā¢ Color, creating visual emphasis to create clear distinctions ā¢ Shape, diļ¬erent shapes have diļ¬erent visual weight ā¢ Size, Bigger elements demand more attention than smaller ones. ā¢ Continuance ā¢ Lines, a very standard and user-friendly mobile element is the list ā¢ Similarity, Grouping similar items together tends to create emphasis and demand attention ā¢ Space, Negative space and the space between elements not only gives your design room to breathe, but it can also be used to create continuance. Content Design: Best practices Visual Hierarchy
- 29. Mobile Best Practices Mobile Best Practices Clear CTAs Concise messaging Clutter free Deļ¬ned hierarchy Content Design: Study and Analysis Visual design and content
- 31. Mobile Best Practices Mobile Best Practices What are the challenges? Slow and limited processing power and poor network quality Network & Device No feedback, complicated ļ¬ows and useless links User Experience
- 32. Mobile Best Practices Mobile Best Practices Performance: Best practices Hardware and data limitations People expect a faster experience on mobile then they get on the desktop but the networks connecting them to your service are naturally slower. As a result, your app ends up ļ¬ghting performance on both sides. In these situations it really pays to be an optimist.
- 33. Mobile Best Practices Mobile Best Practices Performance: Best practices Perception of performance How speed can be a design feature? ā¢ Its part of the core experience, it needs to support the user ļ¬ow. Preform actions optimistically ā¢ Have a reactive UI, make the elements respond faster as you interact at the back. Like Add to Cart buttons. If it fails in the back, then UI can adjust. ā¢ Amazon new patent for shipping methods. Adaptively pre-load content ā¢ Listen to what Users the user is interested and preload that particular element instead of all doing it to all the content at once Move bits when no-oneās watching ā¢ When you can anticipate better, you can take contents from step 1 and start utilizing data by the time your on step 3. In example, how Instagram uploads images.
- 34. Mobile Best Practices Mobile Best Practices Exploration 3 Try an exercise Redesign a situation to appear faster Break into new teams of three and spend 20 minutes designing an experience to appear faster. It can be written, drawn, acted out, or described. ā¢ Baggage claim ā¢ Waiting in line ā¢Ā Growing a garden ā¢ Elevator ride ā¢ Make one up! Exploration 3 Try an exercise
- 35. Mobile Best Practices Working Together Why most teams fail (and how you can prevent it)
- 36. Mobile Best Practices Team Structure Tuckman's Stages of Group Development
- 37. Mobile Best Practices Team Structure Forming Stage Gathering information and impressions This stage is about feeling out who else is involved, the scope of the task, and how to approach it. Typically void of conļ¬ict as opinions are still positioned as ādiscussion pointsā for later. Opportunities ā¢ Develop an understanding of each personās/roleās objectives ā¢Ā Find common interests and make new friends ā¢ See how each team member works and functions ā¢Ā Ability to build mutual respect between roles Challenges ā¢ Little tends to get done at this point due to conļ¬ict avoidance ā¢Ā Desire for acceptance/romance of the idea can over-simplify things ā¢Ā Team members can create independent activities/opinions that can work against the bigger picture if ā¢Ā Team members tend to be focussed on themselves Comments - phrased by āweā and āmaybeā - āI do my part. I hope you do yours.ā - āWe have no differences.ā
- 38. Mobile Best Practices Team Structure Storming Stage Diļ¬erent ideas, competing for consideration This stage can be emotional as team members begin to cross paths on ideas, perspectives, and ways to go about solving the problem. It can be upsetting and driven by pride. Opportunities ā¢ Communicate opinion-agnostic goals of the project ā¢ Develop an understanding of each personās/roleās objectives ā¢ Analyze logic and reasoning to identify commonalities ā¢Ā Look at the problem with a wider perspective to limit group think ā¢Ā Create a safe place to share opinions and views ā¢Ā Tension and struggle is ok if there is impartial adjudication ā¢Ā Ability to build mutual respect between roles Challenges ā¢Ā Cliques and āsidesā can form, creating fragmentation in the group ā¢Ā Can be contentious, emotional, upsetting, and frustrating ā¢Ā Tendency to focus on minutiae ā¢ Tolerance and patience is a must Comments - direct and disagreeable - āIām doing my part. Why arenāt you doing yours?ā - āI hate your differences.ā
- 39. Mobile Best Practices Team Structure Norming Stage A mutual plan is needed for the team This stage is about ļ¬nding a way to build a mutual plan that everyone can work toward. It will involve some give and take from all members in order to function. Opportunities ā¢ Develop empathy and mutual ownership ā¢ Maintain a forum of open and accepted discussion ā¢Ā Paint a picture of what success looks like ā¢ Have an open debate structure around divisive issues Challenges ā¢Ā Some may not wish to give up on their ideas ā¢Ā Pride/authority may create unhealthy hierarchy ā¢Ā Reluctance to share controversial ideas ā¢ Loss of conļ¬dence or trust in themselves or each other Comments - getting help to get stuļ¬ done - āWe are doing the work. Thanks for the help.ā - āWe work through our differences.ā
- 40. Mobile Best Practices Team Structure Performing Stage Diļ¬erent ideas, competing for consideration This stage sees team members as motivated, knowledgable, and competent to function autonomously. Dissent is still expected, but there is mutual trust and respect to work productively through it. Opportunities ā¢ Streamline decision making processes ā¢ Open, direct, and honest feedback loops ā¢ Develop higher levels of skill and mastery ā¢Ā Less ongoing management or supervision ā¢Ā Higher quality output ā¢Ā Mutual trust and respect for future endeavors ā¢ Tendency for members to supplement each otherās weaknesses Challenges ā¢Ā Changes in team members will revert back to forming stage ā¢Ā Management trying to always control the Group Development ā¢Ā Insecurity in the form of āImpostor Syndromeā ā¢ Personal vulnerabilities and issues Comments - about the work and getting it done. - āWe are awesome. Letās do more stuff!ā - āOur differences make us stronger.ā
- 41. Mobile Best Practices Forming Storming Performing Norming Team Structure Review: Forming ā¢ High degree of guidance needed from manager ā¢Ā Individual roles are unclear ā¢ Process not well established Forming
- 42. Mobile Best Practices Forming Storming Performing Norming Team Structure Review: Storming ā¢ High degree of guidance needed from manager ā¢Ā Individual roles are unclear ā¢ Process not well established ā¢ Understanding how team decisions are made ā¢ Purpose is clear, but team relationships are blurry Forming Storming
- 43. Mobile Best Practices Forming Storming Performing Norming Team Structure Review: Norming ā¢ High degree of guidance needed from manager ā¢Ā Individual roles are unclear ā¢ Process not well established ā¢ Understanding how team decisions are made ā¢ Purpose is clear, but team relationships are blurry ā¢ Relationships are well understood in the team ā¢ Commitment to team goals ā¢ Begins to work to optimize team process Forming Storming Norming
- 44. Mobile Best Practices Team Structure Review: Performing ā¢ High degree of guidance needed from manager ā¢Ā Individual roles are unclear ā¢ Process not well established ā¢ Understanding how team decisions are made ā¢ Purpose is clear, but team relationships are blurry ā¢ Team is committed to performing well ā¢ Focuses on being strategic ā¢ Team runs well with little oversight ā¢ Relationships are well understood in the team ā¢ Commitment to team goals ā¢ Begins to work to optimize team process Forming Storming Performing Norming
- 45. Mobile Best Practices Team Structure Who are the members of a performing design team?
- 46. Mobile Best Practices Team Structure Who is a performing design team made up of? Skill-set ā¢ Front-end/native development knowledge ā¢Ā Knows how interactions and interfaces relate to the technology Motivation Has a deep interest for content interactions, color, typography, layouts, and the finer visual and textual details of an experience. Most likely to find resonance with ā¢ UX Designers ā¢ Product Managers UI Designer
- 47. Mobile Best Practices Skill-set ā¢ Some dev and UI design experience ā¢Ā Knows how interactions and interfaces work together as an experience Motivation Has a deep interest in how people act, think, and make decisions in order to design an intuitive and positively usable experience. Most likely to find resonance with ā¢ Product Managers ā¢ Domain Experts ā¢ UI Designers Team Structure Who is a performing design team made up of? UX Designer
- 48. Mobile Best Practices Skill-set ā¢ Wide proficiency in the full-stack of mobile development technologies ā¢ Experience or appreciation for UI/UX design ā¢ An ability to think iteratively and in the realm of prototyping Motivation Has a deep interest for technical details, data relationships, data logic, and understanding how various technologies inter-relate. Most likely to find resonance with ā¢ UX Designers ā¢ Product Managers Team Structure Who is a performing design team made up of? Full Stack Engineer
- 49. Mobile Best Practices Skill-set ā¢Ā An experienced ex-engineer or ex-designer now leading strategic product vision Motivation Has a deep interest for a smooth user experience that meets all objectives, and provides both qualitative and quantitive insight for future product strategy. Most likely to find resonance with ā¢ UX Designers ā¢ Domain Experts Team Structure Who is a performing design team made up of? Product Manager
- 50. Mobile Best Practices Team Structure Who is a performing design team made up of? Skill-set ā¢ Deep field experience and knowledge of the operating space ā¢ Experience in software UI/UX design Motivation Has a deep understanding of how the work relates back to operational, and what it would take to gain success within the organization. Most likely to align with ā¢ Product Manager ā¢ UX Designer Domain Expert
- 51. Mobile Best Practices Team Structure What is the process of a performing design team?
- 52. Mobile Best Practices Team Structure The process of a performing design team Teams thrive on shared culture and values ā¢Ā Embrace the form and storm period ā¢ Clearly deļ¬ne individual roles ā¢ Establish interpersonal relationships ā¢ Deļ¬ne the project boundaries Form Properly Take Ownership Clear Direction Communicate Things to help form properly Learn more about your personality and of those on your team Build a culture of appreciation, feedback, recognition, and support Go on a retreat or day trip to get to know your team mates in a friendly environment Do an empathy mapping workshop on an unrelated topic to build a group culture
- 53. Mobile Best Practices Team Structure The process of a performing design team Cross-functional teams take ownership ā¢ Deļ¬ne success as a team ā¢ Deļ¬ne success as an individual ā¢Ā Individuals and the team are responsible for the end product ā¢ Identify team goals and deliverables ā¢ Establish an inclusive decision process Form Properly Take Ownership Clear Direction Communicate Things to help take ownership Build a team proļ¬le and identify what is missing / could be stronger Establish the rules of your culture and organize how they will be measured Split test designs and validate with users to reduce subjective debate Elect a vocal dissenter (and anyone) for a speciļ¬c design task and have them conduct a Lunch & Learn
- 54. Mobile Best Practices Team Structure The process of a performing design team Everyone stays up-to-date in real time ā¢ Have individual articulate how they will contribute ā¢Ā Help each other identify strengths/weaknesses in order to ļ¬ll gaps ā¢ Create clear deadlines, milestones and events ā¢ Scoping Documentation may be required Form Properly Take Ownership Clear Direction Communicate Things to help clear direction Simple task oriented project management may help with focus Simplify daily stand-ups into ongoing streams of communication Have a meeting-free day for undisturbed design sprints Do a problem/statement matrix to reframe the problem and provide a fresh perspective
- 55. Mobile Best Practices Team Structure The process of a performing design team Everyone stays up-to-date in real time ā¢ Create a communication hierarchy ā¢Ā Keep meetings/stand-ups to a strict schedule ā¢ Work side-by-side where and when possible ā¢ Avoid side conversations so no one-person has to manually give context to the team ā¢ Read a daily digest of progress on busy days ā¢ Establish an adjudication process Form Properly Take Ownership Clear Direction Communicate Things to help communicate Create functional prototypes and collect/track design feedback Gather detailed user behavior insights in the form of video and tracked feedback to share amongst the team Use a collaborative platform to share discussions, research, and real-time updates of project work Phone = immediate IM = within the hour Email = by tomorrow Campļ¬re = no reply needed
- 56. Exercise Empathy Mapping a user experience Time 10 mins Materials Easel pad, Sharpies, different colored post-it notes How To 1. On a large easel pad, draw the base empathy map with four quadrants: 1. Say; 2. Do; 3. Think; 4. Feel. 2. Notice that āsayā and ādoā are very explicit and āthinkā and āfeelā are implicit. 3. Consider a speciļ¬c userās experience and walk the map, writing down on sticky notes what the user said, did, felt, or thought. 4. Use another color for another userās experience. 5. Once populated, step back and reļ¬ect on the content. Look for patterns and inconsistencies. Whatās at the heart of this experience? Write down these observations and insights. 6. From your discussion, write āWays ofā¦ā statements that can seed a brainstorm of ideas.
- 57. Mobile Best Practices āNot finance. Not strategy. Not technology. It is teamwork that remains the ultimate competitive advantage, both because it is so powerful and so rare.āĀ Patrick Lencioni
- 59. iOS7 Overview: Focus Content is brought to the foreground. Maximize the user experience by applying iOS 7ās three core design principles
- 60. Mobile Best Practices iOS7 Overview: New features Airdrop Flat design language 1500 New APIs Enhanced Multi-tasking Physics EngineiCloud Keychain iBeacons Automatic App Updates
- 61. Mobile Best Practices iOS7 Principles: Deference Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ Deference The UI helps users understand and interact with the content, but never competes with it.
- 62. Mobile Best Practices iOS7 Principles: Clarity Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ Clarity Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate. A sharpened focus on functionality motivates the design.
- 63. Mobile Best Practices iOS7 Principles: Depth Depth Visual layers and realistic motion heighten usersā delight and understanding.
- 64. Mobile Best Practices iOS7 Overview: The rise of ļ¬at design
- 65. Mobile Best Practices Tigerspike Key Considerations: Overview Resource - http://www.taming-openofļ¬ce-org.com/newsite/?page_id=90 The new ļ¬at aesthetic Tinting, not textures Dynamic typography Full bleed interfaces Hierarchy conveyed through depth Physics engine Enhanced multi-tasking 1500 new APIs to use New Safari is omni-channel friendly
- 66. Mobile Best Practices Key Consideration: iOS6 Support Does your app need to support iOS 6? iOS users tend to be very quick to update their devices and expect their favorite apps to follow suit.
- 67. Mobile Best Practices Key Consideration: The New Flat Aesthetic
- 68. Mobile Best Practices Key Consideration: Tinting, Not Textures Get iOS7 Ready
- 69. Mobile Best Practices Key Consideration: Dynamic Typography
- 70. Mobile Best Practices Key Consideration: Full Bleed Interfaces
- 71. Mobile Best Practices Key Consideration: Hierarchy Conveyed Through Depth
- 72. Mobile Best Practices Key Consideration: Physics Engine Get iOS7 Ready
- 73. Mobile Best Practices Key Consideration: Enhanced Multi-tasking Get iOS7 Ready
- 74. Mobile Best Practices Key Consideration: 1500 New APIs To Use Get iOS7 Ready
- 75. Mobile Best Practices Key Consideration: New Safari is Omni-channel Friendly Get iOS7 Ready
- 76. Mobile Best Practices Where to start Get iOS7 Ready Compile and test your iOS 6 app(s) on iOS 7 ASAP Get a point release ready with updated iOS 7 UI components (and any bugs ļ¬xed) for when the update arrives Begin work on your next major release re-imaging your experience to take full advantage of the OS Donāt boil the oceanārelease, iterate & release.
- 77. Mobile Best Practices Upcoming events: San Francisco Wednesday October 23rd, 2013 8am to 10am PST Wearable Tech Round-Table Thank you!
- 78. Mobile Best Practices Helpful Resources iOS7 App Redesigns http://ios7redesigns.tumblr.com The iOS 7 Design Cheat Sheet http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ 36 High-Quality Flat Design Resources http://mashable.com/2013/07/29/ļ¬at-design-ui-kits/ iOS 7 GUI PSD http://www.teehanlax.com/tools/ios7/ http://applidium.com/en/news/introducing_ios_7_gui_psd/