Wednesday 17 August 2011

Swiping + panning = usability problem

I've written about implementing horizontal swiping as navigation between content and about workspaces UI design pattern before. It is a very a very useful tool in any designers or developers toolkit but it is also difficult to get right especially when combined with other gestures.

We know from experience that even on a UI that only has vertical scrolling combined with workspaces UI pattern the users often endup scrolling when trying to swipe between different content. Now, if we add more gestures in the mix it becomes increasingly difficult to perform the swipe gesture when user wants and only when they want.

There are two apps I use almost daily that both have problems with the swipe gestures.

Read It Later
Read It Later stores web content in offline readable form. Often the content fits perfectly to the screen size but sometime, especially when the article contains code examples, user needs to scroll the content horizontally.

User can also navigate between articles by using the horizontal swipe gesture. The UI lacks visual indication that more articles are available but much bigger problem is created by combining the two gestures, swipe and horizontal scrolling.

It is very difficult to scroll to see full article without accidentally performing swipe and jumping into another article. Over time this becomes very annoying. I've learned to scroll articles very, very slowly to prevent this happening. That's not very good user experience.


Aldiko Book Reader
Aldiko book reader is an excellent ebook reader app but it too suffers from a problem with swiping.

Users have three ways for turning pages: tapping either right or left edge of the screen, page changer component that is exposed when tapped in the middle of the screen and swiping.

By default a page of a book is displayed fully. While this is often good way to show pages on tablets or when the file format is EPUB but when reading a PDF book on smartphone screen the text is too small. Users can zoom the page by using two finger scaling gesture. When zoomed in the whole page, naturally, doesn't fit into the screen and user can pan the view by the normal dragging gestures.

Folks at Aldiko have prevented the problem RIL app has by disabling swiping when zoomed in. This solution, while not perfect, is a good one. It weakens the app consistency but on the other hand it prevents annoying accidental actions. The app still has two more ways for users to change pages.



Conclusion
Unfortunately, there are no easy answers to this problem. It is something that should be kept in mind whenever combining panning and swiping gestures.

Nielsen and Norman also talk about difficulties in gestural interfaces. Worth reading: [Gestural Interfaces: A Step Backwards In Usability].

I'd be very happy to hear your experiences and examples of very good implementations. Please leave comment and links to apps that do it right.





5 comments:

  1. What about some kind of handle similar to the top notification area of android itself? The only downside I'd the lost screen real estate.

    ReplyDelete
  2. Pulse seems to have solved this problem well enough

    ReplyDelete
  3. crackers, good idea and discussion starter. Screen real estate can be too valuable to be wasted though. In some cases that could work. There's also a lot of different options like fading the handles in and out when not needed.

    ReplyDelete
  4. Keyboardr, Pulse is great and they've definitely got the swipe right in their app's context. In their case, however, they don't have need to do horizontal scrolling in the articles (or at least I've not found any cases where you would have to or even could) so they don't really have the same problem. What they've done is to prevent the problem altogether in higher level design (= always fitting stories to the screen).

    ReplyDelete
  5. You don't need to scroll very slowly to avoid a swipe gesture. When doing a scroll gesture, just keep your finger shortly on the screen at the end of the gesture. The gesture will end with a low (or zero) velocity and therefore is not interpreted as a swipe. I have tried this with a WebView on my phone and tablet, and it works very well.

    ReplyDelete