NCDevCon2012_designing the mobile experience

Designing the mobile experienceFrom a UX/UI perspective

Tuesday, October 2, 12

Dee SadlerAdobe Community Professional

Adobe Certified Expert / InstructorAdobe Freelancer Program

Conference Organizer - D2WC.comUI Strategist/Android/HTML/CSS geek for Sprint

Total Training and Adobe TV (CS6) video tutsHybrid

@DeeSadler

TopicsUnderstanding how the user uses their devices

Rules of UX - Human Factor guidelines, Orientation etc.

Sizes - from fingers to pixels

Prototyping

Who are the users?

If you are going to bother making a web app, consider the experience

How does it all work “together”

Decide things like,How is the user going to navigate?

“The Rules”Human Interactioin

Guidelines

Mobile Design Life CycleThis isn’t your dad’s website

1.Assess current user requirements

2.Understand your users

3.Prioritize mobile features

4.Design with mobile considerations

5.Prototype / preview / refine / test

User RequirementsAgile, Story Boards and User Stories

Touch eventsNo rollovers, but does the user know

they clicked on something

What is the experience as they move through pages

Multi-pane views

Tablet multi-plane views

NativeDon’t mimic other platforms, stay true to the OS

Don’t try and make a new interaction from one that already exists and keep it consistent per OS

SAMPLE OF IOS, ANDROID AND WINDOWS UI

Think top down

Think top downWhere is their hand going to be?

Think top downWhere is their hand going to be?Make usage easy and logical

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realism

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.Be aware of orientation

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.Be aware of orientationAdd detail and depth

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.Be aware of orientationAdd detail and depthTypography is just as important

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.Be aware of orientationAdd detail and depthTypography is just as importantThink twice before you designa standard control!

Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.Be aware of orientationAdd detail and depthTypography is just as importantThink twice before you designa standard control!Create a great brand experience

4 step processDesigning for multiple screens

Define device groups by grouping screens with similar widths together resulting in a manageable number of groups,

Create a default reference design that will adapt to smaller and larger screens,

Define rules for content and design adaptation for it to display well and

Opt for Web standards and a flexible layout.

What elseSimplify navigation

Be succinct with the content

Minimize user input

Form efficiency

Can they use it offline?

Don’t use high res images for everything

Don’t forget to test!

Device Sizes

Sizes (some examples) iPhone 3GS, iOS 4.3.n, 320x480px (no retina display)

iPhone 4, iOS 5, 320x480px (retina display)

iPad, iOS 5, 1024x768px (10" tablet, no retina display)

Android 2.1 — Motorola, 480x600px (popular)

Android 2.3 — HTC, 480x320px (QWERTY)

Android 2.3 — Huawei, 320x480px (low CPU)

Android 3.0 — Samsung, 320x480 (low CPU, low dpi)

Android 2.3.4 — Kindle Fire, 1024x600 px (7" tablet, proxied browsing)

Android - trouble x 10xlarge screens are at least 960dp x 720dp

large screens are at least 640dp x 480dp

normal screens are at least 470dp x 320dp

small screens are at least 426dp x 320dp

Pixel Density/Screen sizeTo get the ppi, you first need to find out how many pixels there are diagonally.

This is the square root of each side squared, added together (from a2 + b2 = c2)

Android densities: low, medium, high and extra highDensity-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.http://developer.android.com/guide/practices/screens_support.html

HTML5 Image issuesWhich method to use? Scale. replace images at each break point, what?

Start with small and then serve up larger at each break point?

Solutions

ProsMimics other media syntax like <video> and <audio>, which makes sense.

The fallback makes it backwards-compatible with browsers that don't support it, which is extremely important. We can't have images that just don't work in older browsers.

Gives us web authors the control to show exactly what we want under situations we specify.

ConsIt's a whole lot more complicated than <img>. Harder to teach, harder to learn, more code to write. Easy to screw up.

Muddies the water of CSS and HTML a bit, by bringing the media query syntax into HTML.

Similar issues to why inline styles are bad. Makes future updates more difficult. Not a reusable abstraction.

Adaptive Images

Skeumorphism

DesigningUse vector shapes where possible

Start with large artboards

Get rid of unnecessary metadata on images

Decide which format of images works best for the images. Are they opaque, transparent, etc.

If Android, keep consistent naming conventions for different density images

SHOWING BAD PATCHES

CSS Sprites

PrototypePrototype

jQuery Mobile Starter Pages

WireframeToolsBalsamiq

AxureFireworks

OmmnigraffleEightShapes for InDesign

iMockups for iPadSketchyPad for iPad

Keynottopia for Keynotemany, many more

FIREWORKS ANDROID TEMPLATE

Fireworks CS6

CSS Sprites

CSS Properties Panel

jQuery theme creation

New wireframing tools

Gesture icons

Example: Title Bar

Thanks!

NCDevCon2012_designing the mobile experience

Design

Transcript of NCDevCon2012_designing the mobile experience

Redwerk mobile experience

Mobile experience

Modeling the Mobile User Experience

Mobile Experience Benchmark_crittercism

Crafting the mobile experience

Context: Enhancing the Mobile Experience

Optimizing the Mobile Experience

Mobile user experience conference 2009 - The rise of the mobile context

Designing mobile experience

Mobile Customer Experience

The Comfyland Experience mobile unit

The True Experience Of One: Personalizing The Mobile Shopping Experience

Mobile Advertising and Mobile Marketing The Edipresse Experience

Designing the mobile experience powerpoint

The Sametime Mobile Experience

Optimizing the Mobile Search Experience

Designing for the traveler’s experience in the mobile ... · Designing for the traveler’s experience in the mobile space & beyond. Designing for the traveler’s experience in

Designing the mobile user experience

Monify, the new mobile shopping experience - Mobile Forum 2014

The mobile experience