Mobile Best Practices

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


Simpler PathsNew Interfaces More InformationMore Control

MobileBestPractices


Clearer InteractionsFeedback Loops More DetailNew Workflows

MobileBestPractices


Multiple Platforms Hand-fed Support

MobileBestPractices


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


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


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!


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




• Understanding how team decisions are made

• Purpose is clear, but team relationships are blurry

Forming Storming

MobileBestPractices

Forming Storming

Performing Norming

Team StructureReview: Norming






• 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






• 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


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


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


Product Manager

MobileBestPractices


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


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


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


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


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


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


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.

http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/


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/

http://ios7redesigns.tumblr.com

http://ios7redesigns.tumblr.com

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

http://mashable.com/2013/07/29/flat-design-ui-kits/

http://mashable.com/2013/07/29/flat-design-ui-kits/

http://www.teehanlax.com/tools/ios7/

http://www.teehanlax.com/tools/ios7/

http://applidium.com/en/news/introducing_ios_7_gui_psd/

http://applidium.com/en/news/introducing_ios_7_gui_psd/

Date post:	11-Aug-2014
Category:	Design
Upload:	pauly-ting
View:	3,894 times
Download:	6 times