A Word on Smart Phones

So, what’s different about usability when you’re designing for use on a mobile device? In one sense, the answer is: Not much. The basic principles are still the same. If anything, people are moving faster and reading even less on small screens.

There are some significant differences about mobile, but it's likely going to take another few years for things to shake out, probably just in time for innovations that will force the whole cycle to start over again.

But nevertheless, there are some very obvious things to note:

Small Screen#

The most obvious thing about mobile screens is that they’re small. One way to deal with a smaller living space is to leave things out which, of course, raises a tricky question: Which parts do you leave out?

Mobile First#

One approach was Mobile First. Instead of designing a full-featured (and perhaps bloated) version of your Web site first and then paring it down to create the mobile version, you design the mobile version first based on the features and content that are most important to your users. Then you add on more features and content to create the desktop/full version.

This sounded like a great idea mostly based on the assumption that when people accessed the mobile version they were "on the move," not sitting at their desk, so they'd only need the kinds of features you'd use on the move. For example, you might want to check your bank balances while out shopping, but you wouldn’t be likely to reconcile your checkbook or set up a new account.

Of course, it turned out this was wrong. People are just as likely to be using their mobile devices while sitting on the couch at home, and they want (and expect) to be able to do everything. Or at least, everybody wants to do some things, and if you add them all up it amounts to everything.

One-Design-Fits-All-Screen-Sizes#

This is also called scalable design a.k.a dynamic layout, fluid design, adaptive design, responsive design etc. If you have a website, you must make sure to make it usable on any screen size. Always, ensure that you:

  • allow zooming
  • provide a link to the "full" web site. The current convention is to put a Mobile Site/Full Site toggle at the bottom of every page.

Affordances#

Affordances are visual clues in an object's design that suggest how we can use it.

For one, there is "no cursor = no hover = no clue". As a result, many useful interface features that depended on hover are no longer available, like tool tips, buttons that change shape or color to indicate that they're clickable, and menus that drop down to reveal their contents without forcing you to make a choice. As a designer, you need to be aware that these elements don't exist for mobile users and try to find ways to replace them (e.g., by taking extra advantage of colors, contrasts, font features etc.)

Mobile Apps#

Mobile Applications

It is not in the scope of our discussion to get into specific UI design principles for Mobile apps, but if you are interested here are some links to get you started:

Edit this page