8 Limitations When Designing For Mobile

So you have a website designed for standard desktop computers, but you obviously want to keep up with times and make your site mobile-friendly too. However, it isn’t just a matter of scaling down your design – it’s a new platform with a new set of interaction patterns and limitations.

In this article we’ll explore seveneight UI limitations to be aware of when going from desktop to mobile web.

1) No hover state

On smartphones there’s no hover state (not yet anyways). This can be a challenge for pages with a lot of content or features as the interface quickly gets bloated with links and buttons that would normally only be shown on hover. On mobile, any information or feature must be accessed in either of two ways:

Visible – the content or feature is accessible from visual means. It may be nested in sub-sections or child pages, but the content is nonetheless accessed from visible navigational elements such as buttons or links.

Convention – by relying on mobile design conventions you may hide content and only display it when the user employ certain gestures such as swipe or shake, or when the user drags content around such as pull-to-refresh.

The last approach, convention, can help simplify the interface but also runs the risk of obscurity. Essentially you rely on the user to a) know the convention and b) try it out on your site to see if you support it. But if either of those fall flat the user will essentially have no idea that the feature exist, thus such features should either be explained at first visit or be non-essential to the experience of the site.

2) Slow and error-prone typing

Typing on a touch keyboard is a slow and error-prone exercise so make sure to keep your form fields to an absolute minimum and pre-select clever defaults. Furthermore, you need to consider how you deal with errors in data.

While you’ll certainly need to deal with erroneous data in desktop designs too, there will be even more errors in forms filled out on touch devices due to the touch keyboard and smaller screen size (providing less context and overview). Review pages may be a good idea for longer forms if the user can’t edit the data after it’s been submitted.

You may also consider auto-complete functionality, the use of geo-data, inline validation, address validators, and other methods for suggesting and correcting user inputs as they are typed.

3) Less context

The smaller screens on touch devices results in reduced context. This tend to make it more difficult for the user to get an overview of the page, compare various options, and remember prior content.

Consider a long form. As the user scrolls down, the title of the form disappears along with previously entered data. Without this context it gets significantly more difficult to interpret the meaning of the currently visible form fields. It also makes it difficult to spot errors retrospectively. In this instance a review or summary screen can help avoid erroneous data while a header fixed to the top of the screen can help maintain context. (A fixed header will of course lower the screen real estate for unique content so if the context of nearby fields is more important then this approach would actually reduce the context.)

4) Inaccurate clicks

On touch devices people use their fingers to click links and buttons on the screen, which significantly decrease the accuracy of clicks. This is also known as the “fat finger problem”.

In practice, this means you must consider the size and proximity of all clickable elements, making sure they’re large enough to reliably touch with a human finger and far enough apart that users won’t accidentally touch the wrong element. Navigation and control bars are of particular importance as they include numerous clickable elements (making accidental clicks more likely) that all have significant consequences to the page (making accidental clicks more critical). During our mobile e-commerce usability study we observed a multitude of sub-problems caused by accidental click, some even leading to abandonments.

One way to deal with accidental clicks is to ask the user to confirm their action but that quickly gets annoying. A much less intrusive (and typically better) approach is having an “Undo” feature that allows the user to revert accidental behavior when it happens as opposed to constantly interrupt the user’s intentional acts.

5) Poor connectivity

No connection – While users probably won’t expect offline mode from your website then you should still try to handle lost connections gracefully. AJAX-enabled features are particularly prone to unexpected behavior and silent failures (see navigator.onLine).

Slow download speeds – If you’re on a mobile EDGE network download speeds will be pretty miserable. In other words, if your site should be usable on slower connections too then be sure to make its footprint as small as possible by implementing aggressive asset caching, using CSS3 effects instead of images, etc.

Of course both of these solutions will improve the experience on all types of networks. Lowering your site’s download footprint will make it super speedy on faster connections. Handling network issues gracefully will of course be much appreciated by the users the few times they do experience network issues on otherwise more stable connections.

6) Slow hardware

While the performance of touch devices is improving rapidly, they are still slow devices compared to desktop computers. This means that page initialization can be upsettingly slow – especially if you execute a lot of Javascript on page load.

Another issue of slow hardware is that transitions and other animations may be “laggy” which – besides being aesthetically unpleasing – may wreck the user’s sense of virtual space (or fail at establishing it in the first place).

In both cases, good programming is paramount. Deferred Javascript execution combined with liberal use hardware accelerated CSS animations will do the trick in most cases when implemented properly.

7) Usage situation

Since the very nature of smartphones is mobility you have to consider the impact of “real world” distractions – a speaker announcement, walking in traffic, etc. Another and possibly larger source of distractions are the digital interruptions – text messages, phone calls, push notifications, two-taps-away-from-Angry-Birds-syndrome, and so on.

These two sources of interruptions make the “returnability” of your site increasingly important. If a user return to your site after a distraction can they immediately pick up where they left or do they lack essential context? If the page is refreshed will their data still be there despite never submitting the form (see HTML5 localStorage)? Has the session expired?

It’s a new world

This is by no means an exhaustive list, but it should give you an idea of some common UI challenges that arise as you shift from desktop design to mobile. Smartphones have opened up a new and exciting world but we need to be thoughtful when designing for these devices. It’s a different platform with its own limitations and opportunities.

For mobile usability research see the related articles below or the 400-page research report with 147 design guidelines on how to design a high performing mobile commerce site.

Ideas Added:

8) No right-click (added by Jamie)
Custom right-click menus aren’t that utilized on traditional websites, but you do see them in more and more web apps (e.g. Google Docs) and in most native software. Here, the right-click menu often acts as a quick context-based shortcut to commonly used features. However, mobile devices do not have a traditional right-click option. Using a “tab-and-hold gesture” is the closest substitute that comes to mind.

I would rename #4 as “Inaccurate Taps” since in the mobile world you are tapping on things with a finger or stylus, not clicking them with a mouse. We call it “over-lapping tap targets” in our list of things to watch out for when designing for mobile.

I think another “limitation” with mobile is that many people forget the other gestures which are available to the mobile user. Swiping is probably the most useful for moving between pages, items in a list, galleries of pictures, etc. I see many mobile designs that use the desktop metaphors exclusively. Maybe that’s the way to describe it: over-use of desktop interaction metaphors.

Here’s one in that category: we initially used a “menu bar” on the top of our mobile website. It only had 3 items, but the problem was a skinny menu bar along the top of the screen was really a desktop metaphor. Thankfully we were thinking about tap-target proximity so we didn’t squish anything TOO close up under them. And Fitt’s law rescued our users from having to hit an impossibly small target. But the better solution was to get rid of that bar and add a nice juicy fingertip-sized button that said “menu” and opened a layer with the menu options on it.

Here’s one more since I do this all day: images that are too small to be meaningful. Some mobile sites and apps use photographs that might as well be inkblots. You can see some shapes and shading, but you’ll probably just have to make up what you’re looking at.

Not saving the photos correctly, using complex images in tiny thumbnails, or not providing larger than thumbnail images happen all the time. And logos get this treatment as well.

Using a desktop logo for your brand and just shrinking it down to the mobile space often results in the “melted crayon” logo. Hey look, there are some colors all mushed together!

Great article – some useful points raised. I’ve noticed (while using the Nexus 4) that Android have implemented a fallback for ‘fat finger’ syndrome and will actually zoom into the selection area if there is an inaccurate click (whether it be a dropdown list, navigation etc) and will give you better proximity and focus to make your correct selection – a welcomed addition for those of us with ’butcher’s hands’!

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.

At last – many of the downsides/failings of touchscreens well articulated in a single article.
I’ve lost count of the number of people who swoon at new technology, and forget how it has become worse to use than “old technology” (e.g. pencil and paper).
New methods are great, wonderful, even magical, but they’re never the finished product – there is always room for critical review and improvement.
Thanks for bringing all of these downsides together. This is a page to which I will refer others.

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.

Except for #6 on “hardware speed” these issues are still vital to the mobile site and app user experience, and will be for the foreseeable future as they are tied to the input type (touch) and the usage scenario (mobile) – and thus not “solvable” by simple incremental hardware changes.

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.

Nice Article!! use of smart phones made it necessary to have mobile friendly website to get good searched over it..while designing responsive websites, we will keep in mind these limitations & their way back as well..

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.

Post a comment!

You need JavaScript to comment. Unfortunately we've had to require JavaScript to deal with comment spam.