An Event Apart: Mobile Design Now

Luke Wroblewski did an all day session at An Event Apart about mobile design considerations, patterns, and gotchas. It was an incredibly informative talk that provided a lot of insight into what works and what doesn’t on mobile.

Here are some highlights I noted.

  • Mobile design is more than just responsive design. Some things (like modals) just don’t work well on mobile and resizing the site doesn’t solve this.
  • Watch the scroll distance. Keeping too much content on mobile can force the user to scroll far too much.
  • Don’t simply follow the crowd (Facebook, Google, Twitter, etc.) when designing. They often get things wrong.
  • Don’t assume an icon is a convention that everyone will recognize. For example a magnifying glass could represent a search or zoom.
  • Hamburger menus are bad for usability. They hide content from the user and the icon isn’t clear enough. May be ok for some secondary elements though. An alternative that performs better would be to have a button that says “Menu”.
  • Carousels are similar to hamburger menus in that they hide content from users. Analytics show us that the first element gets the majority of clicks with the rest never seen by users. Auto scrolling through carousel is only a bandaid. Consider adding a list of all slides that the user can click on the jump to specific slide.
  • Don’t go straight to drop down menus for forms! There are often much better options. For instance, a stepper may be a better way to let the user choose number of passengers since options are limited and typical users will only pick one or two.
  • Controls that work well on desktop need to be rethought before dropping them into mobile. The calendar popup is good example of a control that could be rethought to provide better experience. Possibly use an entire screen and show multiple months the user can scroll through rather than forcing user to pick month via arrows.
  • Often times people (management) will be resistant to put the effort into researching and redesigning controls for mobile. Show them the results to sell it: more sales, less support calls, etc.
  • Keep the user in input mode. If the user starts entering info into a form field, allow them to stay in input mode by automatically focusing on the next field and not closing the keyboard.
  • Along the same lines, combine fields together to make a much better UX. Full name field vs first and last, phone number vs three separate fields. Don’t let the database ruin your user experience! Parse names and numbers on the backend if need be. This will often be much better for internationalization too. Many people from other countries have more than just a first and last name.
  • Make primary actions obvious. Don’t hide “Next” button in top right of header without any color changes because users will have a hard time finding it.
  • Just-in-time (contextual) education is much better than a one time intro/tutorial screen on first open. Users will just skip tutorial screens and be just as lost.
  • When asking for permissions (location, notification, etc.) you have one chance to get it or the user will have to navigate through many setting screens to enable it (not going to happen). It’s better to explain yourself and then ask.
  • Double dialog box is alternative for asking for permissions to preserve chance to get permission. Present dialog explaining and asking. If the user agrees, then make the one time only official request through the OS.
  • Perform actions optimistically. Rather than updating UI after save, assume the save will work and reflect that in the UI. In the background try to save multiple times and then only after some time, let the user know it failed. This can go a long way towards making the UI feel fast.
  • Start simple and get fancier for bigger screens. For example, use an image of a map rather than an embedded map on mobile but on desktop use embedded version.
  • Tables aren’t particularly mobile friendly. A better approach in many cases is to use the cards UI pattern.
  • Use content as navigation. E.g. clickable content that takes you to more detailed screens.
  • Optimize for mobile ergonomics. Based on how users typically hold their phones, the bottom half is easiest to tap. Consider putting the most commonly used elements there.