Notes on Luke Wroblewski’s “Mobile Design Now” Workshop.

Published in: Web Development.

Luke Wroblewski takes and shares great notes from talks that he attends. They’re big shoes, and I don’t expect to fill them, but here are my notes from Luke’s “Mobile Design Now” talk.1

The Mobile Opportunity

Arguing for Mobile

  • With the growth in mobile, it’s difficult to argue that we shouldn’t address mobile
  • The Mobile Moment: the point when mobile sales surpassed non-mobile sales
  • We have seen significant growth in mobile holiday shopping, mobile email opens, and mobile PayPal payments

Apparently some people are having a hard time convincing their decision-makers to accommodate mobile. I’m not really having that issue. Mobile is big and in our face at Goizueta. We are well aware of the need to address mobile needs. Finding the resources to make mobile accommodations in the many places that need it is our main challenge.

Our Design Bias

  • We spend most of our time looking at our computer, and have been working with computers for a long time
  • We use the mouse and keyboard to build things and we are building things that use the mouse and keyboard
  • We have lots to learn and lots to unlearn
  • There is a difference between being thinking mobile-centric and thinking desktop-centric plus porting to mobile
  • We are mostly being desktop-centric plus porting

This is so very true. We are steeped in desktop experience and thinking. We have so much less experience working with mobile, an environment that is not only new but rapidly changing and improving. We should cut ourselves some slack for mobile mistakes, but we need to press on and learn and adjust and adapt.

Design Considerations

Product Vision

  • The central idea or concept.
  • “What are we making, for whom, and why?”

Design Principles

  • Characteristics used to evaluate decisions
  • Whenever someone has an idea, it needs to be validated against the concrete and stated design principles

Design Considerations

  • How/what to think about while designing
  • Shake off desktop tendencies
  • Think and create in a mobile “native” way
  • Make informed decisions
  • Mobile devices have a lot of data about the current context

Layout & Navigation

  • How do we organize and present mobile screens
  • Think outside the display box
  • Going from desktop to mobile, the tendency is to stack the content
  • Offscreen elements makes use of all directions. We are not limited to stacking.
  • Desktop: “This is my canvas, let me arrange things on it” vs Mobile: “Where can I stash stuff until it’s needed?”
  • Don’t fit everything on a small screen, make a fake big screen and move it around.

Obvious Always Wins

  • Don’t just copy “patterns”
  • Think through what is the primary content and actions vs what’s secondary content and navigation
  • Visible triumphs hidden, which forces prioritization, which is good

Content First, Navigation Second

  • Dashboards can work: use content as the navigation
  • Web sites are struggling to accommodate browsing. Finding somethings specific is fine, but how to facilitate browsing?
  • Look for things in the page that are uniquely suited for mobile behaviors, bubble those forward
  • Look for ways to integrate content into navigation
  • Start small and enhance upward

I think this is the first time that this approach has actually clicked with me. It doesn’t mean get the navigation out of the way, it means get the user right into the primary purpose of the page. Moving the navigation off-canvas doesn’t help if there’s a inches of header/pre-content keeping the user from the page’s primary purpose. Prioritize the primary content or action above all else. Get the user right into the content.

Inputs & Actions

  • How do we allow people to get things done?

Minimize Typing Mistakes

  • In general, do not put things inside boxes that you want users to fill in
  • Offer designed real time input validation
  • Keeping a form thin and light vs providing context and extra information is always a balance
  • Use input types
  • Input masks enforce a particular format on an input. Make sure to maintain format and that it doesn’t look like an answer
  • Allow users to see and verify sensitive inputs

Jump Right Into Input

  • As soon as possible and practical, move into input mode
  • provide input prompts
  • account for the smaller screen space during input mode

Condense Input Controls

  • Remove optional fields
  • Remain in input mode
  • Hide irrelevant controls
  • Avoid splitting single input entities
  • Find the balance between combining/separating inputs
  • Be mindful of existing conventions

Drop-downs are the UI of Last Resort

  • Fundamental issue: they’re a lot of work
  • Consider steppers, action sheets, segmented control/radio button groups, switchers, and sliders as alternatives
  • There are a lot of options, use what’s appropriate given the content and context
  • Be aware of the limitations in alternate controls
  • Reduce input effort

Make Primary Actions Obvious

  • Button shapes help
  • Keep a clear visual hierarchy
  • Consider echoing core interactions, but be aware that OS conventions don’t consider context

Gestures are Sloppy

  • Allow any number of fingers
  • Don’t try to be too clever
  • Big screens invite big gestures
  • Be careful with multiple scroll directions
  • Design for thumb flow

Making user input easy is hard. We need to take the effort to do it well, because it adds real value.

Feedback & Communication

  • How do we let people know what’s happening?

Teach in the Moment

  • Don’t hold the user hostage with tutorials
  • Teach in the moment, in the context
  • Teaching doesn’t need to be explicit, consider animation cues
  • Onboarding and tutorials are different, use each when appropriate
  • Surface tips/help in context
  • Find the appropriate user actions to trigger help
  • Communicate what’s possible

This was a great day of information. The mobile space is exciting and moving fast. There is so much to learn here.

  1. I hope I’m not stepping on Luke’s toes by publishing my notes. These are only the big points as I understood them; the talk was much more in depth than this. If you get the chance, you should hear Luke speak.

Share:

Permalink:
http://writings.orangegnome.com/writes/notes-on-luke-wroblewskis-mobile-design-now-workshop/
Shortlink:
http://lilgn.me/88

Pingbacks:

Comments are disabled on this blog. If you have a thought, contact me on Twitter or on the contact form. If you have a really long thought, send me a link to your post about it.