In addition to guest posting on the UpCity blog, Colibri Digital Marketing is featured as one of the Top Digital Marketing Agencies in San Francisco. Check out their profile here.

UX (User Experience) has shifted radically over the past 18 months, largely spurred by the rise in mobile traffic which has now surmounted desktop as the primary means of contact. The needs and purposes of mobile visitors, and their expectations of a site, are meaningfully distinct from their desktop counterparts, but many sites are still failing mobile users when it comes to UX. When designing a site for these mobile users, there are a few design tips and pitfalls to keep in mind in order to give those users the best possible user experience.

1) Design for Smaller Screens

On smaller screens, with less of your content visible at any given time, a user will have to work harder to engage with it. Your content will require more frequent scrolling and more cognitive effort to stay focused and keep the thread in mind while reading. Put simply, seeing less of the content at a time makes it harder to understand. Unlike desktop content, mobile content depends more on memory and spatial awareness.

This can be described as a higher “interaction cost” when accessing even the same content on mobile versus desktop. When considering any design element, you’re faced with a basic engineering problem. Is the addition of a new interaction button, image (which would break up the text or command the reader’s attention), banner or blind, or a new piece of content itself worth the interaction cost for a potential reader?

When designing for mobile, screen real estate has a greater per-square-inch value, so be sure that you’re not wasting any of it.

Moz

Moz does an excellent job of making clear what the site is, what it does, and how to interact with the page with zero scrolling, using color choices and imagery to present the brand to its target audience. There’s no clutter, but there’s no wasted space either.

2) Allow for Interruptions

Mobile devices are built for multitasking. Mobile users are consuming content quickly, in sporadic bursts. At any moment, their attention might be diverted, either by a notification, a sound in their environment, their stop coming up on the subway, getting to the front of the line, and so on. Make sure your site is ready to accommodate that kind of interaction.

For example, a site should be able to resume an article at the same place that the user left it, without them having to reload the page or find their place again. Allow a user to resume a session without having to re-submit forms, re-enter data fields, or reload a shopping cart.

Cart abandonment, in particular, is a huge risk factor for ecommerce sites, and frustration (with an interface or with having to rebuild an order) is a key reason why so many users drop out of a possible conversion funnel.

3) Make Sure Chrome is Appropriately Used

Chrome (the subset of design elements, not the browser) give a user information about how to interact with or operate the content on display. In most cases, those interactions are provided by the operating system itself. With mobile devices, those usually include tap, hold, drag, pinch, and sometimes shake and pull. Others depend on context, but for the most part, users will already be familiar with the basic navigation and interaction methods.

Things get fuzzier when your content starts incorporating its own interaction features. The worst thing you can do is to leave an interaction ambiguous. Don’t use blue text except for hyperlinks, for instance. If an image is clickable, connote it with a shadow. Don’t clutter your interface with unnecessary interaction buttons, except where their function can’t be replicated by traditional means. Any interaction elements are subject to the same opportunity cost function as the rest of your content, so use them sparingly, if at all.

Ecommerce site Magento uses chrome inappropriately. On the homepage, interaction buttons scroll automatically, at intervals. If you manually click “Business Need” or “Industry”, you have a very narrow window to select an option from the list before the page cycles unbidden.

The following images were captured one second apart.

Magento Example

This is as unhelpful as it is unintuitive.

Brevity and ease of use are worth limiting total functionality, especially on mobile devices. If you can’t do it without being intrusive, don’t do it all.

4) Don’t Be Afraid of Skeuomorphism

Earlier in this post, we said that mobile devices depended more heavily on a user’s spatial awareness. Skeuomorphism helps you cater to, and leverage that spatial awareness to build more intuitive interfaces and better user experiences.

Skeuomorphism is the incorporation of virtual design elements meant to evoke their analog counterparts. For instance, there’s no reason a virtual notepad should have a leather-looking binding, torn pages, printed lines, or yellow paper, except that it looks like a notepad and a user will intuit its function, and find it more familiar.

These elements are often more than just visual accents. They also give users valuable feedback. When a button on screen is clicked, for example, a sight animation (like a depression or a shadow) indicates that the button has registered the input. Without feedback, a user will often click the screen more than once, re-loading the target page, and wasting time. Unnecessary frustration is the antithesis of positive user experience, and can be prevented or mitigated with better design.

Skeuomorphic design elements can also indicate interaction functions more intuitively than labels or tutorials. For instance, image carousels. Without shadows, or some indications of the extra slides, these images will appear static, and the interaction effect will be lost.

Cover Flow

Apple’s Cover Flow interface is a great example of an intuitive skeuomorphic interface, especially appropriate for touch devices

5) Keep Flow in Mind

“Flow” describes your users’ interaction path through your content. Unlike desktop, which is much more straightforward, mobile comes with a number of potential pitfalls, mostly to do with the way people naturally hold a phone.

For starters, thumbs will tend to funnel inward from the upper corners (a fact of the rotational axis) so your content should be laid out in such a way as to mitigate the block effect during scrolling. Buttons, too, should be positioned more or less in line with ergonomics. Be sure not to assume handedness; users can set their own devices to favor one side or other, but you should keep your own content neutral.

Another aspect of flow comes from load order. You can seriously compromise flow, and user experience, if elements of your page load in situ, after your content has already loaded. For instance, if a page of links has loaded, but interwoven ads have not, a user might get pranked. Flow gets interrupted if the links get bumped, and jump from out from under your fingers.

Improving User Experience for Mobile Users

If you take anything away from this article, it’s this: now that mobile devices are becoming the primary point of contact user experience has become much more fickle, but also much more important than at any other time in web design and digital marketing. Be mindful of the unique needs and challenges of mobile users, and you’ll see your site thrive.

colibri digital marketing
Andrew McLoughlin
Content Marketing Manager at Colibri Digital Marketing |

Andrew McLoughlin began his writing career in education publishing at a young age, producing content for math textbooks in his parents' home office. A freelance writer and digital marketing consultant, Andrew has been with Colibri Digital Marketing since 2016, serving as Content Marketing Manager. His degrees are in Classics and Linguistics. He lives in Ontario, with his wife, daughter, and two rabbits.