Mobile UI – popular devices and their screen specs

Very useful – a big list of screen specs for popular mobile, tablet and monitor devices.

http://screensiz.es/

via Mobile Tuxedo

Advertisements

10 tips for mobile UX

Read: Ten Tips for Mobile UX from Red Ant

I like this article. It focuses on taking a thoughtful approach to mobile UX, rather than offering spot-fixes for your design. A great primer for when you’re ready to embark on a new project.

Thanks, @BishoyGhaly for the link!

Tl;dr:

  1. Start by designing with mobile in mind.
  2. Identify your users – are they here to get something done or to browse?
  3. 80% of app users will use just 20% of the functionality – tailor your analytics and future improvements to suit.
  4. Use task-based design – craft the easiest way to get stuff done.
  5. Keep it simple.
  6. Respect the platform’s quirks – eg. UI elements, behaviour, etc.
  7. Capture more than just touch – eg. geolocation, sound, lighting, etc.
  8. Design for interruption – mobile users get interrupted a lot.
  9. Continually evolve and improve.
  10. Fall back on best practise and your own experience.

6 ways to make your website tablet-friendly

A checklist of simple things from UX Magazine:

When a website exhibits “tappiness,” it’s easy—or even delightful—to use on a mobile or tablet device. Tappiness encompasses smart use of space, text that is easy to read, logical interaction clues, and large touch targets that allow visitors to navigate with confidence.

Read: The Pursuit of Tappiness

Tl;dr:

  • Bigger buttons with more whitespace around them.
  • Make links more obvious, without relying on hover states.
  • Bigger font sizes.
  • More padding in nav menus (to create bigger hitboxes).
  • Greater margin, padding and line-heights for better readability.
  • Bigger form fields with more whitespace around them.

Bad mobile UX will make people tired (and sore)

As a web designer, if you’ve ever felt your work is too virtual, too intangible, then find some solace in designing for mobile environments. Thinking about how users position themselevs while using a touch device, we grasp how our UX decisions can have physical, real world impact:

Every touch, every swipe, every pinch, and every zoom requires quite a bit of physical motion. Your hand moves while the rest of the arm is working to stabilize the wrist and you are holding the device steady with the other hand. That is a lot of physical exertion compared to using a typical mouse, where your hand moves less, your wrist is probably resting on a wrist pad, and your arm sits comfortably on a chair arm. Your other hand is not even needed. So, you can start to see how much more effort using a mobile device can be.

Read The Cost of a Touch for a bit of theory on how to make life – real, physiological life – easier for the guy at the other end of your project.

Tl;dr –

  • Remember the user’s prior selections
  • Make it easy to skip ahead
  • Take advantage of device sensors (light, movement, sound, etc.) to understand context
  • “Looks cool!” should never interfere with “Works well!”