Tips & Guidelines for A Better Mobile UX - pt2
Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on the fly while on the metro, right? So let’s make sure not to produce a mobile website just because everybody has one, but to make our clients happy, with a real mobile experience that will give them what they need and not just what we want.
Broadband Is Not Always with You
Bandwidth optimization is a rare practice in desktop-oriented web development nowadays, because we assume that broadband is available to most of our users, but when considering the mobile network, the scenario is different. Data plans are seldom limitless (2GB/month is a pretty common value), the signal can be weak, high-speed networks (4G) are not around everywhere, and mobile networks are, in general, less reliable than their landline-based counterparts. Resource optimization becomes a necessary step to undertake when starting a mobile project and, apart from the usual technical practices like responsive images and asset request cuts, the entire user experience has to be redesigned with simplicity and efficiency in mind. The UX designer who desires to optimize the mobile version of a website must first focus on what is essential: be ready to get rid of all the elements that add value or visual glare on desktop but can be discarded on mobile, without decreasing the quality of the browsing experience. A mobile layout has to be much easier and simpler than its desktop counterpart; that is what users expect so there’s no reason to transpose every element, especially the ones that need to be redesigned to maintain their functionality.
Portrait Mode Is the King – but Please Don’t Forget Landscape
Most users handle the phone in portrait mode and websites are all designed with this in mind, but there’s also a landscape mode that offers significant more room for a design improvement, so why not take advantage of it? You could design a specific section better, display more information or even provide extra features. iOS makes extensive use of this approach.
Mobile Websites Have to Be Responsive – or Else!
A responsive website, ideally, should be fluid, gently adapting itself to every resolution, not just to the common ones. However, too often we see websites that, when viewed in an uncommon or supposedly not used resolution, fails to display itself decently. This happens because we write media-queries with a glitch-fixing attitude instead of building a really fluid experience. The limits of this approach, as time passes by, become more and more evident since even more devices hit the market. Before the release of the iPhone 6, the standard viewport width was 320 px (even though some Android terminals with a different viewport size were already out, their market share was considered still too fragmented to hit the statistics) and we designed with only that size in mind for a long time. It was Apple’s new phone, with its 375 px viewport, that revealed the limits of a too strict fixed-width mobile strategy. Phone screens are becoming larger and larger, while mini-tablets already have a relevant market share: basically every resolution is covered by one or more devices. So it makes no sense anymore to develop only with a fixed-width strategy: make it fluid!
In Search of Errors
Searching for UX bugs in a website can be a tiresome task, but it will be much quicker if you know where usual errors lies. Read on to find out more about common UX mistakes.
- Use standard UX and design patterns. Mobile interfaces can be tricky; a lot of research has been made on them and there are standard prototypes that solve many complications and make users comfortable. Walking away from some standard conventions may disorient your users and don’t necessarily make you more creative.
- Do not assume that users will certainly scroll down your page; they will do that only if it is undoubtedly clear that some relevant information is present below the fold.
- Beware of too long pages; they will make users less likely to scroll down to the bottom. Remember this if there is some vital information in your footer.
- If you have modal windows (not recommended, remember?) in your design, be careful with the closing buttons: if they are too small they will become hardly clickable. The risk of trapping the users inside the modal window is quite high and they will not come back, for sure.
- If someone needs to use a pinkie for browsing your interface, you probably need to design bigger buttons and elements.
- Beware of scrolling overlap. To scroll a page you need to place a finger on the screen, and you should have the space to do that: if your page is full of clickable elements, it will be hard to place a finger on the screen for scrolling without accidentally clicking them.
… One Last Small Hint
Hopefully, the most important concept that you got from this article is that when designing for mobile, making a good responsive website that scales well is not enough. You have also to take care of the numerous details and micro-interactions that happen on the page.
Making errors is pretty common and totally understandable; as we have not been designing specifically for mobile for all that long. On the other hand, the topic has been pretty hot recently (I mean… for the last five years, at least), and the web is full of resources and hints to easily bend the mobile UX to our will. And there’s one more thing… stay tuned, since we are going to talk about UX for mobile apps, one of these days.
