My live blogged notes from Tom Crawford, @vizchef, @viznetwork session at DevLearn November 3, 2011 in Las Vegas. Forgive the typos and omissions. And also forgive the delay – forgot to publish these right after the session on Thursday!
The mobile market:
Smart phones are growing; but not-smart-phones are still significant part of the market. So you could still do SMS and text and do good stuff with mobile learning. Today we’ll talk about smart phones.
Androids are growing.
PC/laptop use is down 20%; mobile is 30% up.
The better numbers are about actual users – Yelp has 45 million users. right now only 7% of them are mobile, but 35% of searches are done on mobile.
Facebook – mobile users are 2x as active as desktop users (they post more, read more, are online longer)
Eight unique affordances of mobile:
- personal – the phone knows a lot about you – where you walked. it knows things you didn’t tell it.
- always carried (in the room EVERYONE has their phone, but most of them don’t have their laptop)
- always on
- built-in payments
- available when inspired (you have an idea or thought, you do it right then)
- accurate audience measures (incredible data – everything is tracked – when, where you sent that text; when you went online. That kind of tracking data is not available anywhere else.)
- captures context (you know where they are)
- allows augmented reality
Native Apps vs. Web Apps
native is written for a specific device.
You have to make this decision.
native apps run faster, more interesting, access more controls on the phone. However, then you have to develop for iphone, ipod, android, etc…takes a lot of time and money.
Web app runs on everything that has a web browser. Develop once and run everywhere. But doesn’t run well always and not fully featured.
Cross platform tools – unity mobile, unity, appcelerator…publish to one place and deliver to multiple devices.
Go to The Boston Globe website – the website resizes; images resizes or disappear depending on the device used. Program once and run on all devices. (they’re using a new design style – html5 and css with some javascript; also some intelligence behind it). If you’re thinking about doing mobile web apps – check out that site.
Getting started: benchmark
Look at best in class apps out there – what affordances? Flight Track Pro, SoundHound, Angry Birds, NetFlix,
Getting started: know your audience
No different from any other design. “You are not your audience”
Mobile Context – where are people using their devices? What environment are they in? Context is really important…
Are they using this on a sales call, at their desk, in a line, in a car?
If they’ll need it fast – one big button.
Design
Prepare for lots of tips..
use basic design
- no design is perfect – you can always tweak it
- every design has compromises, trade-offs and constraints – we have to make choices
- criteria for “good” design depends (LukeW calls this sharks climbing trees – in the water sharks are amazing)
- no one right answer
- no just about look, but about FEEL (does it feel responsive, like you’re learning?)
steal like an artist nothing is original – find good stuff and use it…
Content first (don’t make me login first – foodspotting – you can go find stuff immediately, you only login when you want to ask questions or upload photos, etc. get me what i need now – if i’m standing in line, get me my content otherwise by the time i’m done logging in i’m done with my line)
only ask for data/info WHEN you need it
Disappearing UI As a % of space – use it for content – minimize navigation, etc. Put content upfront and center. You can hide nav until you need it.
Edit, edit, edit cut the content to the essentials
Minimize the steps
Billboard/glance test can you look at it and get it? (period tracker app, compass app – tells you where your partner is) Billboard test – you’re going down the higway and you have 3 seconds to get it…
Clarity trumps density too much info on a screen? wasted space?
The rule of 44 your fingertip takes up about 44 x 44 pixels – buttons should fit that space (or the tap area needs to be that space). Or make it even bigger so they don’t have to think – make a giant button.
Design to a grid every object on the screen should be aligned to another object on the screen
Follow reading order in US we follow z reading order – prioritize your content
Tasteful, understated not garish
Avoid metaphor you’ve got small space, don’t waste it with interface that is bling. Content first.
Balance brands & standards follow apple standards for ios apps.
Don’t just say “Back” don’t know where i’m going back to. instead have the back arrow with text -- “full title” or “title” or “full ti…” Tell them where they’re going back to.
Follow title bar zones for apple apps follow standards. have your logo on the front page, but don’t put it on every page (netflix wastes space with their title on every page)
Don’t be too clever he shows some bathroom signs that are clever but who knows which is men’s or women’s…
Use clear standard icons
Use a consistent light source for graphics etc – you won’t know why you won’t like an app that does this, but you will
1-2 Fonts; 4 sizes nothing more and use them consistently to mean the same thing
Use visual cues like grouping
Tap zones if you’re holding your phone in your left hand there’s a zone you can reach with one hand…you can’t reach the top corner…
Use the right keyboard number, letters, etc…
Use the right capitalization make no caps
Make the form disappear TripIt is a good example. Get your flight info from delta and forward it to tripit and it pulls it all out for you. Type nothing.
Avoid scrolling where possible If you’re going to scroll, make it obvious
Beyond touch
lots of sensors now – voice, gestures, proximity, bluetooth, gps, compass, cameras, accelerometer, shake…
Augmented reality
overlay of data knowledge on an image…new employee orientation…
What was there (an app) – see what was there 100 years ago…
Word lens – live translation – while you point your camera at a sign it translates it…
Prototype & Test
Balsamiq – great prototyping tool which you can actually run on the phone. super simple way to test
“A good UI without a good UX is meaningless (and vice versa)” -- if beautiful design doesn’t work or if it works and it’s ugly…
Resources
- Tapworthy
- Desigining the iphone User Experience
- Designing Mobile Interfaces
- Designing for Emotion
- Mobile First
