Design - Usability - UX Design - Mobile - Responsive

Introduction to Mobile Design Usability

With the exponential development of mobile devices in terms of numbers and in terms of functionality, the rapid growth of mobile sites is nothing but logical.

Just a few years ago not many companies bothered to have a mobile site but now the trend has been reversed and it’s more of an exception than a rule not to have a mobile site. However, mobile sites have their specifics and when basic mobile usability principles are not followed, the results can be disastrous.

While it’s true mobile design usability isn’t a totally different game from the old desktop design usability, there are certainly some differences that stem from the differences in devices used and from the very nature of desktop vs mobile use.

The rules of mobile usability are many, but if you follow at least these basic rules, you will see a huge improvement in the usability of your mobile sites. Here are 7 simple rules to start designing by.

1. Break Pages into Smaller Chunks

One of the trends in desktop design I personally find very irritating are these longish pages you scroll, scroll, scroll for ever. This endless scroll is kind of annoying in desktop design but in mobile design is much more inconvenient.

I must admit sometimes scrolling is better than pagination (because the next page loads without the user having to click Next) but just think how nice it is for the user to scroll back and forth on a tiny device. This is why it’s best to limit endless scrolling on a mobile only to the times you really need to use it.

Even if you don’t go for endless scrolling, a standard Web page for the desktop is pretty big for a mobile device. More often than not, you can’t turn a desktop page into a mobile as is because of several reasons.

First, it won’t fit properly on screen – horizontally and vertically. Second, such big pages tend to load for ages and to consume lots of bandwidth. There might be many mobile users who subscribe for unlimited data plans and for them consumed bandwidth isn’t an issue but there are still millions, if not billions, of ordinary mobile users who subscribe for metered plans and any waste of bandwidth costs them money.

01 and 03 - SitePoint Mobile

01 - SitePoint Desktop

Because of this, it’s highly recommended to break mobile pages into smaller chunks. When a page is broken into multiple smaller chunks, users don’t have to load the whole page. Take a look at the screenshots below of the mobile and desktop versions of SitePoint and notice how small the mobile version is. When large pages are broken in smaller chunks they load faster and consume less bandwidth, keeping your users happy.

2. Embrace Minimalism

As a rule, mobile pages are stripped down versions of your normal site. This per se means you can’t put all the stuff you have on your desktop site onto a mobile one. With mobile pages you just can’t afford to cram them with unnecessary stuff, you need to keep only the essentials.

This is easier to say than do. When you start removing stuff from the desktop version, it always feels you are removing essentials as well. The rule here is simple – everything that is not directly related to the core functionality of the site must go. For instance, look at our mobile version – clean and simple.

02 - Minimalism

You might feel reluctant to remove so much good stuff and leave just the bare essentials. However, as you know, mobile devices have limited screen estate and for many mobile users consumed bandwidth and load times are important. These two reasons make it mandatory to strip your mobile version as much as possible.

Even if your desktop version is pretty minimalistic and there isn’t much to sacrifice, it’s always a good idea to include a link to your normal site. This helps if the user wants to view more, or simply if something doesn’t display properly on their mobile device, they can always go to the desktop site and check it there.

3. Make Links Easily Clickable

The way users access links is a major difference between mobile and desktop sites. On the desktop you point your mouse over a link and click – nothing fancy. However, on a mobile you have no mouse and it’s much harder to click a link.

This is why it’s a huge usability improvement to make links easily clickable. This can be done in many ways. For instance, you might use a larger font for the links and provide more spacing around them. Needless to say, you should avoid having multiple links in close proximity, especially in a tiny font size because this makes it so easier to click a link by mistake.

01 and 03 - SitePoint Mobile

If we look at the mobile site of SitePoint again, we’ll see that basically the links to the full articles are more than visible and more than large. Of course, you can’t always make your links that big and visible but this site illustrates how good it is to have links that are easily clickable.

4. Test with As Many Devices and Resolutions You Can

Responsive design is great and it can do a lot to make it easier for you to design for multiple resolutions but don’t take for granted that if you make it responsive, it is bound to work. It’s really tedious but if you are concerned about user experience, you do need to manually check how your site is displayed on at least 5 major devices/screen resolutions.

Of course, you can’t check your site on all platforms and resolutions – you can’t possibly have all popular and not so popular devices to test on and even if you did, this would take a lot of time. One possible solution is to use W3C mobileOK Checker for a quick check if everything is OK in theory.

Another alternative is to use various device/platform emulators. Unfortunately, these aren’t exactly as the real experience but for some quick and dirty work they do help. There are dozens of emulators, such as the Android Emulator by Google, or Opera Mobile Emulator so you might want to try a few to see which one is the most suitable for your needs.

04 - opera-mobile-emulator

5. Use Click to Call When Possible

Click to Call is one of the really useful features in mobile design. While you can use this functionality in desktop design as well, there it doesn’t make that much sense as it does in mobile design.

Click to Call is really handy for mobile users because it spares them the necessity to dial a number. While Click to Call is certainly convenient for the user, don’t overuse it – i.e. if your site lists dozens of numbers, don’t make any single phone number on your site clickable because this way users can easily call a phone they don’t want to and this is really annoying. Instead, use Click to Call for the important numbers only – like sales, or customer support.

05 - Click to Call

6. Simplify the Navigation to the Max

Complicated navigation is never good but for mobile design it’s even worse. Yes, the screens of mobiles are getting bigger but the ways users navigate don’t benefit much from this. The most important thing you can do is cut the navigation path to the maximum.

On mobiles even 3 clicks away is a huge distance, so don’t make your navigation that complex. One of the ways to do this is to have longer menus with more items in them that are normally collapsed but expand when clicked.

Another way to simplify mobile navigation is to always include a Search box. This ways users can type what they are interested in and find it in the search results rather than having to browse through menus.

06 - Simplified Navigation

06 - Amazon Full

Most of the navigation from the desktop version of Amazon is gone in the mobile site but the Search box stays!

7. Simplify Forms

I don’t know a user who loves filling long forms even on the desktop, but for mobile users these are just a nightmare. Even with a QWERTY keyboard it’s much harder to input info on a mobile, so cut your forms as much as you can.

Simplified forms are a good practice in desktop design as well and as many webmasters have discovered, the simpler the form, the better it converts, so unless you have some really compelling reason to do otherwise, go with forms that have 2 to 5 (at most) fields to fill.

07-mobile-form-2Image Credit: FormSmarts

As you see, there are some major usability differences when you design mobile sites. You can’t say these differences are too drastic but if you don’t take them into account, your mobile site will never be good. It’s really difficult to keep with all the new devices and no matter what you do, there will always be users who don’t like your site, or even can’t access it on their mobile device but if you want to keep this inevitable percentage to a minimum, make your best to follow mobile design usability guidelines. In the long term, this will pay off for sure.

About the author

Ada Ivanova is a fulltime freelancer. She finally managed to find the perfect job that allows her to combine writing, design, (some) coding, and entrepreneurship skills under one umbrella.

Share this post

Leave a Comment

Subscribe To Our Newsletter