Designing for Mobile
61
@paultran i Paul Trani [email protected] www.paultrani.com @paultrani DOESN’T SUCK Mobile Design and User Experience that
description
Fundamentals of design and UX for mobile.
Transcript of Designing for Mobile
@paultrani
Paul Trani [email protected] www.paultrani.com @paultrani
DOESN’T SUCKMobile Design and User Experience that
@paultrani
• Adobe Evangelist• Lynda.com author• Adobe Certified Instructor• Art school graduate
Live
Work
Love
Ride
Play
Paul Trani
@paultrani
WHY SHOULD YOU CARE?Question
@paultrani
Don’t Get Caught
@paultrani
Keys to Successful Mobile Design
1. Understand the User
2. Create Appropriate Content
3. Use Device Capabilities
4. Design for Device Constraints
5. Understand Design Fundamentals
@paultrani
THE MOBILE USERMobile Design/UX
@paultrani
Who is Your Target Audience?
Generation Y: 97% have a computer, 94% have a mobile phone.
In the next 5 years more transactions will happen on devices over desktops.
@paultrani
Development Inside Outside(partly cloudy)
Outside(sunny)
Where are They?
@paultrani
When Will They Interact?
Design for two minute tasks.
Make navigation shallow and easy.
@paultrani
600x1024
?
?
How Are They Holding the Device?
One hand? Two hands? Portrait? Landscape? Both?
@paultrani
Why Will They Use it?
Fun? Engaging? Informational? Helpful?
@paultrani
CONTENT WITHIN CONTEXTMobile Design/UX
@paultrani
Lack of Context
@paultrani
Create, Don’t Convert
@paultrani
Content
@paultrani(But have a link to the full site)
Content
@paultrani
USE DEVICE CAPABILITIESMobile Design/UX
@paultrani
Mulitouch Accelerometer
Orientation Microphone Keyboard Geolocation Camera GPS
Device Capabilities
@paultrani
Click for more info?Swipe for additional items?Pinch to zoom?GPS for nearby stores?
Using Capabilities
@paultrani
Using Capabilities
@paultrani
DEVICE CONSTRAINTSMobile Design/UX
@paultrani
• Processing power of a computer 8 years old• Screen 1/3 the size
=
Device Constraints
@paultrani
Graphics
Consider bitmaps over vectors Keep bitmaps as small as possible Minimize number of vectors Test your animations with different qualities of Stage
Avoid, if possible: Filters Blend modes Transparency Perspective distortion
@paultrani
ActionScript
Set frame rate as low as possible Dynamically adjust frame rate Use enterFrame event when necessary Consolidate into a single handler instead of multiple ones
Avoid, if possible: High-frequency timers UpdateAfterEvent
@paultrani
Mobile/Tablet Device Sizes
1024x768
132ppi
1024x600
240ppi
854x480
240ppi
800x480
240ppi
480x320
163ppi
960x640
326ppi
120 ppi (low), 160 ppi (mid) or 240 ppi (high)
@paultrani
Dynamically Adjust Graphic Sizes
Create a button that’s ½” across three devices:
next_btn.width = Capabilities.screenDPI * .5;
@paultrani
Don’t Resize. Recreate.
Mobile Tablet
@paultrani
Don’t Resize. Recreate.
Mobile Tablet
@paultrani
iOS User Experience
Back
Home
New/Edit
@paultrani
Options Menu
Android User Experience
Back Home
@paultrani
BlackBerry Playbook User Experience
Application Switching
Application Switching
Minimize Application
Bring up Keyboard
Orientation Change
Context Menu or 2nd Navigation
@paultrani
Use Existing User Experience Metaphors
@paultrani
Leverage Real World Metaphors
The UK’s Most Popular Handheld
@paultrani
ELEMENTS OF SUCCESSFUL DESIGNLayout, Typography, Color
@paultrani
Bad News
@paultrani
LAYOUTElements of Successful Design
@paultrani
Elements of Successful Design
leading the eye
@paultrani
One Column? Two?
@paultrani
Grid Structure
Divide the page into a grid
The eye naturally follows an “F” shape
@paultrani
Button Placement
42
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
@paultrani
Native Keyboard Placement
@paultrani
Design for Real Hand Sizes
The average fingertip is 3x larger than the hand cursor
Make your buttons 3x larger
45x45px15x15px
@paultrani
Space
Implies importance, elegance, and professionalism. Don’t try to be great, try to be invisible.
“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”
Antoine de Saint-Exupery
@paultrani
Space
Ross Kenneth Cole
@paultrani
@paultrani
Examples
@paultrani
TYPOGRAPHYElements of Successful Design
@paultrani
Typography
■ Choose a font that fits the subject■ Don’t use more than three■ Font size around 24pt
“Typography has one plain duty before it and that’s to convey information in writing.”
Emil Ruder, Founder of Basel School of Design
@paultrani
Choosing a Font
■ San-serif lack Serifs and are considered modern■ Understand type anatomy ■ Understand type measurements
@paultrani
Contrast
Size
Hierarchy
Focus on Clarity
@paultrani
Examples
@paultrani
COLOR THEORYElements of Successful Design
@paultrani
Color
■ Use color to create hierarchy, dominance, and balance■ Consistent use of a few colors makes a more cohesive design
“Use color to emphasize importance, not decorate a page.”
Alexander White
@paultrani
Color
■ Choose colors using The Color Wheel ■ Warm colors bring elements forward■ Cool colors move elements back ■ Find contemporary colors using Kuler
@paultrani
Example
@paultrani
APPLICATION OF THE FUNDAMENTALSApplication
@paultrani
Etsy
@paultrani
Example
We want to sell you stuff you don’t need.
@paultrani
Product
@paultrani
Thank You
http://www.patterntap.com■http://www.webdesignerdepot.com ■http://www.alistapart.com ■www.paultrani.com■http://www.designmeltdown.com■http://www.smashingmagazine.com ■http://www.uxbooth.com ■http://www.colourlovers.com■http://www.webdesignerwall.com■http://thinkvitamin.com■http://www.noupe.com
Paul Trani [email protected] www.paultrani.com
