WUX206 - Pimp My App - 3 screens and a challenge

Shane Morris

Apologies that this post is fairly nonsensical. I've put my raw NZ TechEd 2011 notes up here for my reference. I'd like to think that I'll refine them over time, but that probably won't be the case.

Designing interfaces for:

• Phone
• Tablet
• PC
• Television (10 foot)
• Non-screens - Call centre, Shop

Brand is more and more being defined by websites and application integration. E.g. Online banking.

Problems

Different:

• Screen sizes
• standards and conventions
• interaction techniques
• abilities
• even different fonts (browsers)

Less Obvious - Difference contexts and objectives The experience needs to match the context HTML

• Which browsers alters CSS and Javascript.
• CSS3 Media Queries - integrate the browser for info such as screen size.

XAML

• Smart Layout
• Setting MinWIdth
• WrapPanel
• Swapping styles and templates

There is more to targeting different platforms that "rearranging the deck chairs" Reverse working order: Visual Design - How to use it, where you are Interaction Design Information Design Conceptual Design

Conceptual Design

What is the right experience for the platform.
What are they doing, where are they? How are they constrained?

Are they on the bus, the couch, an office chair?
Is the phone going to ring at any time that may require the user to leave at any moment?
Posture - wandering around (phone), hunched over (tablet), leaning forward, leaning back (couch)

Rearrange features or curate them differently (which service to offer)

The App/Browser divide
Signal what is an optimized experience and what is a "well, if you must" experience. Transition between app and website.

Phone more passive
Tablet more interactive
PC more interactive

Is it sustainable to have different products for different platforms or is it better to have a single scalable web solution?

Tablets

"We don't quite know what their for yet."
Snaking/Foraging/Consuming/Creation device?
Have attributes of a great input device.
Lightweight, instant on, low maintenance, more affordable, easier to use.

Information Design

Phones give a very small window on the world. (Toilet roll holder)

Less space for navigation controls and context.
Web - Unsure how the user arrived at the page so requires more context, navigation, legal terms...
A Mobile device will usually have a defined path to a page.

Browsers - Don't know what they are looking for (Phone designed mostly for browsing)
Searches - Looking for a particular thing - Tasks to achieve.
Collectors - Will go through the site from end to end

Tasks that:
- Can be interrupted
- are obviously short

Interaction design

Gestures - Discoverable, Standard

www.lukew.com/touch (Touch Gesture Reference Guide)
Emphasis on direct Manipulation
Designing for touch/gesture is more about "Context over chrome"
Design for the small or touch screen first (Lowest Common Demoniator) and then enhance it up to other platforms.

Should the content or the navigation come first?
Mobile - Content first, Navigation last. Larger screen can have navigation first to give context (Orientation)

Visual Design

Platform standards (Native or HTML)
When designing for mobile consider contrast as they may be using it outside under bright light.