#aeabos: Screen Time & Mobile Design Now

Luke Wroblewski talked about Screen Time on day 1, then gave a full day workshop on day 3 on Mobile Design. The knowledge and information he brought to the table is really really really condensed. I'll try to capture my notes here on a high level. In case you want to hear him talking, I found a video of him talking at Designer + Geeks event: It's a Write/Read (Mobile) Web.

Mobile Now

  • Not just that smart phone sales rocketed to more than 1.2 billion
  • Not just that PC sales plateaued
  • More than 50% emails were sent from a phone in 2013
  • More than 50% holiday shopping in US is done from a phone in 2013
  • All and all. Mobile REALLY matters now.

The Mobile Screen

We care about [the display] because it's the window to the software.  -- Tim Cook (source)

The display is the window to the INTERNET.

Online time is the screen time. Know your screen.

  • Wide screen (16:9)
  • Rotatable (turn 90deg around)
    • Short screen
    • Long screen
  • Very high resolution
    • 2560 x 1440 mobile screen vs. 2560 x 1440 HD screen
    • how dense is that? 
    • Screen size is a poor proxy to inform your interface design (but it's all we got for now.)

Output:

  • Media queries can detect not just the screen width, but also the aspect ratio (vertical or horizontal?)
  • High resolution. (retina?)
  • Design for adaptability

Input:

  • multi touch
  • virtual keyboard
  • audio
  • camera
  • Design for all possible inputs

W3C: media queries level 4

  • detecting input: mouse? finger? stylus...ect.
  • Support all inputs
  • Communicates what's possible (user affordance)
  • light level: is it ambient light in the room? then use a dark theme

Posture:

  • How far away is the screen from the user? 18 inches or 10 feet?
  • Netflix has to deal with all the devices from handhold to projected screen.
  • How Google Glass deal with their display? instead of showing a webpage, show a dashboard kind of view, so everything is at a glance. No need to stop and read.
  • Design for human scale and environment, not just the screen size.

Desktop UI vs. Mobile UI

On a mobile interface, due to the limited space, the information is flat.

Desktop App, you're thinking:

  • Modules
  • Windows
  • Keyboard shortcuts
  • Mouse pointer (hand, cursor, pen, brush, drag...)
  • Left click, right click & scroll

Mobile app:

  • don't just think how to squeeze all the content in a smaller screen, and stack everything on top of each other.
  • Think WHAT THIS PAGE IS SUPPOSED TO DO
  • Mobile screen force you to make hard decisions: getting rid of stuff.

Desktop UI doesn't directly translate into mobile UI.

NAVIGATION on mobile

Think out of the screen box.

  • Vertical scroll?
  • Horizontal scroll?
  • Hide and show?
  • Off canvas?

Think again about your UI pattern.

  • Just because you see Mr. Liney (the hamburger/sandwich menu icon started by Facebook mobile app) everywhere, doesn't mean all your users get it. 

Content first, Navigation second.

  • Content as navigation
  • Live tiles (Windows 8) showing meaningful info rather than confusing dashboard icons (LinkedIn)
    • What's the difference News, Updates, Buzz?
  • Minimum nav, maximum content (YouTube)

INPUT on mobile

Input immediately. i.e. Amazon Flow (in their web app). Using camera to scan anything and find out how much it cost.

Keep people in input mode. Meaning, i.e. if you ask people to put in Day, Month, Time, combine them into 1 input action. First Name, Last Name. Can you put in one? Full Name?

  • Hide irrelevant input 

Avoid Splitting Single Input Entities.

  • Hard to nav into different fields on mobile
  • sometimes find the division illogical
  • unclear what's required (Zip Code - 4-digit Ext.)

Let the OS handle the input type: Date, Time, Number, Month... etc.

Picker as a dropdown menu replacement? Is it appropriate to use?

  • Using option tabs? So the user can see all the options
  • Use a stepper? (+ and -) i.e. Select how many passengers when booking a flight.
  • Or slider?
  • Segmented option (a.k.a. radio button group)
  • Drop-down is the last UI resort.

Just-In-Time Education

  • tutorials and tips should show just in time, in the context when the user is using that function.
  • don't show all the tips up front.
  • one tip at a time

Onborading vs. Tutorial

  • Onboarding: required steps to get started; ideally minimum amount necessity.
  • Tutorial: instructions for use; overview of features/benefit list.

Permission for use (location, photo, personal info, your phone info....)

  • Provide steps, reasons and explanations to ask people to grand permission
  • 95% accept rate, after you provide an onboarding tour.
  • Ask in context, at an appropriate time: Find appropriate user actions to trigger help

Miscellaneous QA session

RESS: Responsive Design + Server Side Optimization

  • Only send what the client needs: media, images.. etc. as component packages
  • http://ress.io/

Perceived performance: Use design tricks to make it feels faster.

  • Instant visual/audio feedback on UI
  • Show your comments on the client-side before it actually hit the server. (this is badass.)

Final Words

  • Growth = Opportunity. Mobile is here to stay.
  • Lots to learn and unlearn. Don't get stuck in the past.
  • Release, Refine & Repeat
  • Change is continuous. Get better at learning.