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 seven eight UI limitations to be aware of when going from desktop to mobile web.
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:
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.
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.
Using optimized touch keyboard are key. 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.
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.)
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.
It’s not uncommon with intermittent connectivity issues and slow download speeds on smartphones. It’s really a two-pronged issue:
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.
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).
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?
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.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Excellent post. Some mobile efforts truly capitalize on fat finger syndrome with many many ads clicked!
Often forgotten in the midst of layout and formatting is any thought about context. I especially like the notion of accommodating ‘returnability’ after inevitable interruption.
Yes, “Returnability” is certainly an interesting concept that will only increase in importance as we shift towards mobile sites.
Very nice article! Thank you for sharing.
nice article thanks jamie
Nice list of heuristics to employ when evaluating a mobile interface. I’m storing them away in my “things to remember” box.
Good points. I can’t but agree on error typing. Something surey should be done about that – either some kind of suggestive input method or like that.
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!
I love your melted crayon comment – so accureate
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’!
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.
Great stuff, that’s a very in depth look at mobile UI. This kind of insight is very hard to come by.
There are some ways through which we can come through this limitation and professional companies know how to handle these issues.
Great stuff, that’s a very in depth look at mobile UI. This kind of insight is very hard to come by.
Well technology is advanced now this is 2014 and these Limitations are no longer for us. But i must say you read excellent article on a very sensitive issue.
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.
Great stuff, Good points, Very nice article :)
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..
Thanks for the post about mobile design. Nice post.
At last! Got to see some points apart from everyday design importance! I love the facts how some points are regarding how a person with fat fingers has to struggle!!
The simpler the better. No body uses a touch pen anymore!
Really very useful info.. Thanks for sharing…
Very Valuable points Indeed. Mainly the second point “Slow and error-prone typing”. Thanks for the Tips.
I agree with your last Idea, there is no right click on the mobile and also there are many inaccurate clicks. Many time because of the small screen, users suffer from invalid clicks. This thing will break down the reputation of the site which is not good for us. Pretty good article to learn many new Ideas. Great work!!.
I am using a second hand refurbished mobile phone, but I am not facing any design related limitation.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org