Upload
pauly-ting
View
3.893
Download
6
Embed Size (px)
DESCRIPTION
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.
Citation preview
Mobile Design Best Practices with Pauly Ting and Omar JalalzadaWednesday, 22 January 2014
MobileDesign Best Practices
MobileBestPractices
What’s ahead
Introduction
Contextual Background
Exploration 1 - Navigation, Browse and Search
Exploration 2 - Content Design
Exploration 3 - Performance and Delivery
Team Dynamics
MobileBestPractices
What are mobile users exposed to?
MobileBestPractices
What are mobile users exposed to?
Simpler PathsNew Interfaces More InformationMore Control
MobileBestPractices
What are mobile users exposed to?
Clearer InteractionsFeedback Loops More DetailNew Workflows
MobileBestPractices
What are mobile users exposed to?
Multiple Platforms Hand-fed Support
MobileBestPractices
What are mobile users exposed to?
Multiple Options
=
MobileBestPractices
What is driving this shift?
Less ScarcityImpulse Factor Social ProofLean Logistics
Risk-free Purchasing Hardware Tech Software Tech Wider Access
MobileBestPractices
Mobile consumers relate a quality experience to:
Speed of experience
Ease of use / EnjoymentReliability and robustness
Security and trustworthiness
MobileBestPractices
Three Explorations
Exploration 1 - Navigation, Browse and Search
Exploration 2 - Content Design
Exploration 3 - Performance and Delivery
MobileBestPractices
MobileBestPractices
Exploration 1Navigation, Browse and Search
MobileBestPractices
MobileBestPractices
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
MobileBestPractices
MobileBestPractices
NavigationGeneral 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 efficiency
MobileBestPractices
MobileBestPractices
Navigation: Best practices on iOSA 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 different choices.
MobileBestPractices
MobileBestPractices
Navigation: Best practices on AndroidA 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.
MobileBestPractices
MobileBestPractices
Navigation and browsing In-depth look
Offer 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 find 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 specifically, avoid too deep and too shallow categories, illogical hierarchies, and
mismatches between categories and their content.
MobileBestPractices
MobileBestPractices
Navigation and browsingIn-depth look
Offer 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 feelfor what they can do and expect to find 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 specifically, avoid too deep and too shallow categories, illogical hierarchies, and
mismatches between categories and their content.
MobileBestPractices
MobileBestPractices
Design an easily scannable homepage that enable users to get a feel for what they can do and expect to find at your site.
• Confusing eye-path• Highly graphical• Visual clutter• Too many CTAs• No effective hierarchy
Navigation and browsing In-depth look
MobileBestPractices
MobileBestPractices
67% of mobile users utilized search in past week
MobileBestPractices
MobileBestPractices
SearchBest Practices
Mobile is highly local (40% according to Google), focused and timely.• Four out of five people use their smartphone to look up local information.
Have search handle mis-spellings and, more importantly, synonyms.• Users have little knowledge of industry-specific 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 difficult 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 difficult to get a list of relevant search results.
MobileBestPractices
MobileBestPractices
Search: In-store behaviorBest 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 staff.
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 find the product details and cost
MobileBestPractices
MobileBestPractices
Exploration 1Try 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 find a good Thai restaurant without the internet?
MobileBestPractices
MobileBestPractices
Exploration 2Content Design
MobileBestPractices
MobileBestPractices
Exploration 2Try 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 fly a plane
MobileBestPractices
MobileBestPractices
Challenges with content design
User can’t consume all information and drop off
Too much to say
Losing hierarchy and clarity
Everything is Important
MobileBestPractices
MobileBestPractices
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 practicesAesthetic Integrity
MobileBestPractices
MobileBestPractices
2. Create concise and contextual content• Always keep in mind that the content for Mobile has a different
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 practicesContextual and Concise
MobileBestPractices
MobileBestPractices
3. Focus on visual hierarchy• Contrast
• Color, creating visual emphasis to create clear distinctions
• Shape, different shapes have different 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 practicesVisual Hierarchy
MobileBestPractices
MobileBestPractices
Clear CTAs
Concise messaging
Clutter free
Defined hierarchy
Content Design: Study and AnalysisVisual design and content
MobileBestPractices
MobileBestPractices
Exploration 3Performance and Delivery
MobileBestPractices
MobileBestPractices
What are the challenges?
Slow and limited processing power and poor network quality
Network & Device
No feedback, complicated flows and useless links
User Experience
MobileBestPractices
MobileBestPractices
Performance: Best practicesHardware 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 fighting
performance on both sides.
In these situations it really pays to be an optimist.
MobileBestPractices
MobileBestPractices
Performance: Best practicesPerception of performance
How speed can be a design feature?• Its part of the core experience, it needs to support the user flow.
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.
MobileBestPractices
MobileBestPractices
Exploration 3Try an exercise
Redesign a situation to appear fasterBreak 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 3Try an exercise
MobileBestPractices
Working TogetherWhy most teams fail (and how you can prevent it)
MobileBestPractices
Team StructureTuckman's Stages of Group Development
MobileBestPractices
Team StructureForming Stage
Gathering information and impressionsThis stage is about feeling out who else is involved, the scope of the task, and how to approach it. Typically void of conflict 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 conflict 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.”
MobileBestPractices
Team StructureStorming Stage
Different ideas, competing for considerationThis 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.”
MobileBestPractices
Team StructureNorming Stage
A mutual plan is needed for the teamThis stage is about finding 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 confidence or trust in themselves or each other
Comments - getting help to get stuff done - “We are doing the work. Thanks for the help.” - “We work through our differences.”
MobileBestPractices
Team StructurePerforming Stage
Different ideas, competing for considerationThis 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.”
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: Forming
• High degree of guidance needed from manager
• Individual roles are unclear
• Process not well established
Forming
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: 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
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: 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
MobileBestPractices
Team StructureReview: 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
MobileBestPractices
Team Structure
Who are the members of a performing design team?
MobileBestPractices
Team StructureWho is a performing design team made up of?
Skill-set• Front-end/native development knowledge• Knows how interactions and interfaces relate to the technology
MotivationHas 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
MobileBestPractices
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 StructureWho is a performing design team made up of?
UX Designer
MobileBestPractices
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
MotivationHas 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 StructureWho is a performing design team made up of?
Full Stack Engineer
MobileBestPractices
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 StructureWho is a performing design team made up of?
Product Manager
MobileBestPractices
Team StructureWho 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
MobileBestPractices
Team Structure
What is the process of a performing design team?
MobileBestPractices
Team StructureThe process of a performing design team
Teams thrive on shared culture and values• Embrace the form and storm period• Clearly define individual roles• Establish interpersonal relationships• Define 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
MobileBestPractices
Team StructureThe process of a performing design team
Cross-functional teams take ownership• Define success as a team• Define 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 profile 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 specific design task and have them conduct a Lunch & Learn
MobileBestPractices
Team StructureThe 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 fill 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
MobileBestPractices
Team StructureThe 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 = immediateIM = within the hourEmail = by tomorrowCampfire = no reply needed
ExerciseEmpathy Mapping a user experience
Time10 mins
MaterialsEasel pad, Sharpies, different colored post-it notes
How To1. 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 specific 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 reflect 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.
MobileBestPractices
“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
MobileBestPractices
Thank You
iOS7 Overview: Focus
Content is brought to the foreground.
Maximize the user experience by applying iOS 7’s three core design principles
MobileBestPractices
iOS7 Overview: New features
Airdrop
Flat design language 1500 New APIs Enhanced Multi-tasking
Physics EngineiCloud Keychain
iBeacons
Automatic App Updates
MobileBestPractices
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.
MobileBestPractices
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.
MobileBestPractices
iOS7 Principles: Depth
Depth
Visual layers and realistic motion heighten users’ delight and understanding.
MobileBestPractices
iOS7 Overview: The rise of flat design
MobileBestPractices
Tigerspike Key Considerations: Overview
Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90
The new flat 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
MobileBestPractices
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.
MobileBestPractices
Key Consideration: The New Flat Aesthetic
MobileBestPractices
Key Consideration: Tinting, Not Textures
Get iOS7 Ready
MobileBestPractices
Key Consideration: Dynamic Typography
MobileBestPractices
Key Consideration: Full Bleed Interfaces
MobileBestPractices
Key Consideration: Hierarchy Conveyed Through Depth
MobileBestPractices
Key Consideration: Physics Engine
Get iOS7 Ready
MobileBestPractices
Key Consideration: Enhanced Multi-tasking
Get iOS7 Ready
MobileBestPractices
Key Consideration: 1500 New APIs To Use
Get iOS7 Ready
MobileBestPractices
Key Consideration: New Safari is Omni-channel Friendly
Get iOS7 Ready
MobileBestPractices
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 fixed) 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.
MobileBestPractices
Upcoming events:
San FranciscoWednesday October 23rd, 20138am to 10am PST
Wearable Tech Round-Table
Thank you!
MobileBestPractices
Helpful Resources
iOS7 App Redesignshttp://ios7redesigns.tumblr.com
The iOS 7 Design Cheat Sheethttp://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
36 High-Quality Flat Design Resourceshttp://mashable.com/2013/07/29/flat-design-ui-kits/
iOS 7 GUI PSDhttp://www.teehanlax.com/tools/ios7/http://applidium.com/en/news/introducing_ios_7_gui_psd/