Articles Usability

7 Tips to Improve Usability in Mobile Web Design

4.5/5 (2)

These days there are thousands or mobile websites all around the web, some of them can be considered to be a pure nightmare for mobile devices because of improper usability testing and design implementations. This causes the overall diminishing of mobile web and users distrust to this useful functionality.

The information about mobile web design, presented on the web, is a bit vague. Lots of websites have really poor mobile interface because they were not produced professionally. In this article, we are going to describe several simple steps that would help you design effective mobile websites. Additionally, at the end of the article we described several software options that would help you adjust your website to the needs of various portable devices. Keeping in mind following tips you will be able to create mobile website that would satisfy needs of the most demanding users.

 

Tips to Consider:

 
Tip #1: Try to Understand What Your Users Want

No matter what type of UI is created, first of all, you need to establish some sort of a connection between designer and user. If you are building a mobile website with the best possible level of interaction between the user and the interface, how would you be able to devise your steps effectively if you can't even imagine user's preferences on your exact matter? You need to provide a survey, it would give you information about user’s preferences. Once you have a good idea of what areas and design elements your users are attracted to the most, then you can move on to the next step.

Tip #2: Minimalism is the Key

Keeping everything to a minimum is a simple and effective solution. Since effective mobile interactions have everything to do with great usability and nothing to do with overcrowded designs, it is essential to keep your mobile designs as simple as possible. A simple mobile website will more than likely be 9 times out of 10 more effective than one that feels bloated. This depends greatly on the mobile device, the “heavier” your site is the more time device will need to download it. Keep in mind that most mobile devices have ≈ 512Mb of operating memory or even less.

Tip #3: Overall Mobile Accessibility

The key to effectiveness is the possibility for user to browse freely thorough the interface. For example, allow toggling as an options rather than force users to view them, hide rarely used features and widgets, and avoid having users fill out long forms. When users access mobile site, much of their attention should be re-focused to the content. This means that the content should be as equally accessible as it is legible. You should also use a variety of techniques that will help you redirect mobile users and/or detect specific screen resolutions. The standard screen resolution is 320×480.

Tip #4: Try to Provide Information Through Color

Color rendering plays an important role in mobile usability. When used right it gives a compelling manner to provide information without need to use additional spacing. In case you decide to use different colors you may refer to the W3C Mobile Web Best Practice this tells us that if we provide users with information in color, we have to make sure that this same information is available without any color. There has to be a definite contrast between a background color and text. Information that is conveyed using colors should contain a contrast between any of the other elements within the website design. Please remember that colors are used to provide information effectively but not just to make “things look pretty”.

Tip #5: Do not Accept Mobile Device as Mini Computer

To regard mobile devices as tiny computers is a major simplification and the idea that content can be just shrunk to size is wrong, to some extend. Web design for mobile devices requires major overhauls. You need to adjust fonts and color scheme to be legible on smaller screens, contrasts and resolutions need to be sharpened, complicated design features need to be dropped out or simplified, the information needs to be shifted so that the most important elements can be viewed together.

Tip #6: Omit Pop-ups and Refreshes

Most mobile browsers do not support pop-ups. The ones that support this function have a very narrow space to pop into. Try to use them less (or do not use them at all) and you will avoid unpredictable results. Also, omit the function of automatic page refreshing to avoid filling of the device limited memory. User can refresh the content manually or turn this option on in the settings of his/her device'.

Tip #7: Testing Time!

The development of effective usability of a mobile website requires constant testing of the design. Test your website on a cellular network; turn off Wi-Fi connection and use your wireless carrier's data network. Then launch your web browser and enter your site's URL. Start counting. If it takes five seconds or less to load your home page, that's pretty good. If it's 10 seconds or more, there are lots things that need to be improved. Usability testing is not a onetime event. You need to improve your website’s quality by providing tests on various devices with different screen resolutions, operating systems and performance features, to check how usable your website is.


Software to Create Mobile Websites:

When speaking of mobile usability it is essential to mention tools that can help you create a mobile version of your website, below you can find a list of resources and applications that will help you successfully fulfill your aim:


Mippin

Mippin is a fantastic tool for those who want to mobilize an RSS-driven site. It’s much quicker to use and the results look great, every time. What’s more, your site will be optimized to work on over 2,000 handsets and the service is completely free. It provides users with basic analytics in reports, as well as the ability to earn money through mobile advertising.

***


Wirenode

At last count, 31,912 websites had been optimized for mobile phones using Wirenode, though this tool offers slightly more than Mippin. Using Wirenode’s users can configure their domain name, upload pictures, track visitors and page views and preview their site on an emulated phone. Editor interface lets fully personalize mobile site with colors and images, and create, edit, rearrange and delete individual pages.

***


2ergo

2ergo has mobilized huge organizations like Rightmove and The National Guard, creating mobile-friendly websites for them which look great and load quickly. 2ergo’s customers can choose to use the self-service mobile publishing and content management tool, Mobile Site Builder, or let 2ergo design a custom site especially for them. The latter, obviously, is the more expensive option of the two. 2ergo’s service includes automatic device and carrier detection, data capture and collection forms, an integrated ad service platform, real-time tracking and top-notch technical support.

***


Zinadoo

Zinadoo is a free tool, which lets build mobile sites quickly and easily. Users can make the most of Zinadoo’s web and mobile widgets, as well as its text and email services, to promote their site to an online and offline community. Furthermore, they can optimize their site for Google Mobile with keywords and tags, and upload videos using Zinadoo’s Mobile Video. As if that wasn’t enough, users can also gain access to Zinadoo’s online Business Directory and Mobiseer, a Web 2.0 service for organizing, tagging, sharing and managing favorite mobile sites.

***


Winksite

Winksite is an excellent W3C mobileOK and .mobi standards-compliant mobile website builder which focuses on the community element of website promotion and social interaction. It’s packed with mobile-community features like forums, chat and polls. Users can use Winksite to create their own mobile portal for communicating with friends, sharing feeds and favorites. Users can also divert all of their texts, emails and Twitter messages to one mobile destination which people can interact with.

***

Mobile sites have slightly different web address than full sites. Mobile version usually starts with "m." before the regular web address, or ends with the suffix ".mobi" rather than ".com." If a mobile user types in your regular URL or follows a link to the site from a search engine, the mobile version has to be loaded automatically. Though it happens not on every phone, just in case include at the top of your website a link to your mobile site, and vice versa.

Following these simple steps, you will not only satisfy your mobile visitors creating a pleasant UI but you will become more visible in mobile search results:

 

  • Try to understand your user's wishes;

 

 

Provide survey on your site or in your social community page, your visitors will help you improve your mobile website.

 

  • Produce minimalistic design;

 

 

Do not forget that you are creating mobile version of your website for devices that are limited in screen size and functionality, comparing to your computer.

 

  • Improve total accessibility;

 

 

Take your iPhone, Blackberry or any other mobile device you owe and test your mobile version on it.

 

  • Use color coding for (less)important information;

 

 

When color coding is applied you need to ensure user that the same information is accessible without color effects.

 

  • Do not think of a mobile device as of a mini computer;

 

 

No matter how advanced mobile device is, if its screen size is less than 7 inches it cannot be considered a mini computer, so keep in mind that most users have devices with screen sizes from 2.3 and up to 7 inches.

 

  • Do not use pop-ups;

 

 

Pop-up is the main thing that causes user frustration. Pop-ups not only distract, they “stir user’s wrath” if they can’t be closed, better omit this functionality than make your users hate you.

 

  • Test, test and once again test;

 

 

Testing is important not only for mobile websites but for all kinds of work you do, better check dozen times what you have done than to feel awkward or humiliated later.

Good luck with your design products and do not forget to drop a line at the bottom concerning your mobile web experience. If you want to create a truly mobile-friendly online resource, make use of the ultimate sitebuilder guide.

Also, check out following responsive web design interactive infographic where all valuable information about RWD is gathered.

  • Mobile Application Development

    Excellent post. And perfect timing. All great points and in
    my opinion Usability Testing is vital. I have used live user testing service
    and I was all the time surprised at what I learn. I passed this post along to
    some friends who were debating about the same topic. 😉
     

  • Pankers

    I enjoyed reading this post and appreciate the helpful tips and information. Thanks Alex.

  • Hemogoblin

    You forgot the most important one. Those of us that HATE mobile sites because they are minimalistic. Nothing is more frustrating than not being able to get to the full site. My phone can handle the full site, too often what I need isn’t on the mobile site or is a garbage version of the full version. A lot of us actually dislike when a site doesn’t treat our mobile as a mini-computer. You get these designers who slam you back to the mobile site every time you switch pages or load a bookmark. Even worse is when you hit a site on a 10 inch tablet and it shows the phone version of the site with no way to get the full version.

    Designers need to remember that while you are dragging your site to a “mobile platform”, the phone designers are dragging their handsets to be more “robust”. You’re literally building sites for something that is quickly going extinct. Just give us a button that acts like it should, pictures that aren’t in Flash for some bizarre reason or a cart that doesn’t choke because of some exotic methods.

  • Eric

    I like the helpful tips and references on how to properly build mobile sites.  Although I’m not a fan nor a user of mobile sites, I know that it will be important no matter what.  What you provided is a good start.

    Unfortunately, a lot of designers are irresponsible when it comes to functionality nor consideration for its long term use.  They want quick and easy money.  Not the long term relationships that website owners need in order to succeed.

  • Jocelyn

    I need a mobile theme or plugin that will easily integrate with  wordpress template that doesn’t require uploading it on different domain. I’m having a hard time finding one here.

  • hawaii web design

    in todays development mobile development is a must, very good read! I would like to see a better typography on this blog, the font size is hard to read…

  • Nadine Abraham

    It’s a perfect shot! Thing should be more changed on Mobile platforms,
    Tablets and many more. As per survey, average people are now most
    engaged on Mobile/Smartphones to discover for internet in comparison of
    PC, Laptops and digital devices. Alex collected a general but major
    information for tech peoples that we can’t ignore.

    • alexbulat

       Thanks, Nadine!

  • Incircle Media Dubai

    Excellent Post.

  • Joint Medias

    Some great tips for mobile design. Thanks for the post!

  • Ralph Ramos

    You made some decent points there. I looked on the internet for
    the issue and found most individuals will go along with with your
    website.

  • mobile website

    Thank you for this  great article that help me design effective mobile websites.