5 Quick Usability Fixes for your iPad app

interactions & patterns,mobile design | Wednesday, April 11th, 2012

I am quite enamored of my iPad, so much so that I can’t imagine how I functioned before I had one. As a left-brained Virgo information architect, though, I can’t use it without thinking about how to make it better. I’ve installed many apps from publishers large and small, and in many cases it feels like we’re back to 1995 when it comes to designing something that actual humans can use.

Here’s a top 5 list of my main pet peeves. Just a starter, certainly, but I need to vent!

1. Where am I? How do I get around?

The tablet UI is a learning curve for desktop users (no dock, Start button, etc) so why complicate things? Make sure the Home and Back buttons are easy to locate (“Back” preferably in top left), and the current state (i.e. page) of the app is labeled in some way so the user can orient herself more easily. Many usability problems I’ve encountered could be solved just by attending to basic navigational rules.

2. Where are the things I use on the web version?

If the iPad app is a mobile version of a site that your customers are already using, make sure that you include the basic functionality they will expect. Omitting basic task flows -> frustrated customers.

Example: the Netflix iPad app doesn’t allow me to manage my DVD queue. This seems like a very obvious user scenario: I’m sitting in front of the TV, watching previews, and want to add a DVD to the queue. Clearly the iPad app was designed only for streaming (when they planned to separate the DVD business). As a result, however, even the movie catalog is constrained to streaming titles. If you search for something that’s only available on DVD, the app presents a null result:

3. Follow established interaction patterns. Please.

Just because the content is presented via an app doesn’t mean you need to invent brand new interactions for standard functionality. For example, search results. The Epicurious app allows me to search the catalog for recipes based on ingredient, dish, occasion, etc. Awesome, and now indispensable in our kitchen.

However, it took me awhile to realize that the side tabs next to the list of search results are actually sorting tools. Say it ain’t so! Granted, there are space issues, but I think a simple drop-down would still work in this context, and would stay within established conventions.

4. Account for landscape mode

The screen cover sold in the Apple store rolls up into a handy little stand for the iPad — in landscape mode only. Make sure your app’s orientation can rotate.

5. Help, settings, & accounts

As with many web apps, these are the neglected stepchildren of the app world. I would argue that with an app it’s even more important to provide easy access to the nuts and bolts of how to use the app and protect your data. Most apps provide some way to sync your data to the cloud, but often the function is manual and/or hard to find.

This one I discovered the hard way: if you upgrade the operating system, you lose your data. So, make sure the account management details are straightforward.

That’s it for now. Venting complete. I feel much better!


Further reading on iPad usability:

iPad Usability: Year One (Jacob Nielsen)

Lightbox fatigue

ia/uxd methods,interactions & patterns,user-topia | Wednesday, August 13th, 2008

Jacob Nielsen just proclaimed the lightbox the “interaction design technique of the year“:

In UI terms, a lightbox draws the user’s attention to a dialog box, error message, or other design element in the middle of the screen by dimming the rest of the screen.

Yes, the lightbox has some benefits. It shows you an Important Message within the context of the page you were just looking at. It doesn’t get blocked by popup killers. And it looks super-cool, especially when used as a slideshow.

But lightboxes are starting to crop up everywhere. In my Yahoo mail (I hope the developer got paid a lot for that), in half the applications I interact with, even in my own website (OK, I put it there, but that was 2 years ago when it was very cool and cutting edge).

Is anyone else starting to suffer from lightbox fatigue?

STC Berkeley writeup on Ajax/Web 2.0

The November/December 2007 of Ragged Left, the newsletter of the STC Berkeley Chapter, is now online.

The issue includes my summary of a talk given by Adaptive Path‘s Sarah Nelson and David Verba, entitled “Lessons Learned from Web Applications and User Centered Design“.

In their talk, they defined Ajax and Web 2.0 and then offered insights into how these developments in web application design offer both opportunities and challenges in designing effective user experiences.

Using sliders to filter results

info visualization,interactions & patterns | Tuesday, November 6th, 2007

Sliders in web design are becoming as ubiquitous as the fading yellow highlight. They certainly offer a more interesting and sophisticated way of interacting with a lengthy data set (remember the old days: choose from a drop-down, click Submit, wait, look at new page, click Back button, get lost …).

Some sliders allow changes to the top and bottom of a range of values:



Other sliders are designed to help the user choose a value (especially useful when it’s a hard value to remember):

Yahoo! UI Library – RBG Slider Control
Yahoo slider - RGB selector

Some sliders even include sparklines (small data displays), a very data-rich approach:

Prisjakt.nu (via IXDA-Discuss):

Oakland CrimeSpotting
Oakland Crimespotting

Other than the obvious cool factor, there are definite advantages to using sliders:

  • instant feedback allows the user to focus on the data itself, rather than on manipulating it
  • it’s much faster to modify a number of criteria at once (price, bedrooms, bathrooms) while keeping the cursor in one place (compared to a bunch of drop-down lists)
  • small changes to the chosen ranges display right away, allowing for faster decision making

There’s always a downside:

  • Sliders aren’t good for small adjustments or for choosing very specific values, because they require too much fine coordination (not everyone uses a mouse, and some of us have a lot of cat hair on the mouse’s infrared sensor, which makes it jump around a lot)
  • People who aren’t used to seeing sliders may not even notice it’s there, and get frustrated.

Nonetheless, sliders are a very useful design element, so get going and use one! Better yet, use one on every page!

Best practices for web forms

In the past week I’ve come across two useful reviews of best practices for designing web forms. The first is from LukeW’s Functioning Form–he writes about the pros and cons of different label placement options (top-aligned, right-aligned, left-aligned). He’s posted about the topic in detail before, but this recent post offers a handy summary of the issues to consider. Print it and hang it on your wall. For lots more detail, scan the pdf presentation.

As the question of top, right, or left aligned form labels comes up often for designers, here’s a short overview of the pros and cons of each method. For illustrated examples and more details, take a look at the full document: Best Practices for Web Form Design (3.9 MB PDF).

Another recent article related to web forms addresses instructional text in the user interface. Embedded user assistance can quickly become more complicated than you might think. Too much assistance clutters the screen, but if you hide the form field explanations under tooltips, your users might never see them.

Mike Hughes offers up the compelling idea that contrary to the logic of flow, instructions should appear below the form element rather than above it. When completing a form on the web, people tend to go straight to the action–so if the help text comes first, they skip over it:

Users skip static elements, such as instructional text, because they focus immediately on downstream actionable objects. Effective user assistance design accommodates users’ natural workflows by providing instruction immediately beside or following interactive elements that constitute points of need for more information.

Now that average Internet users are more accustomed to interacting with web forms, they have higher expectations for usability. Written best practices like those above help to make these expectations explicit, so we can better understand what makes a form easy vs. annoying.

Powered by WordPress | Based on a lovely theme by Roy Tanck | | Log in