SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

5 Can’t-Miss Usability Tips for Mobile Website Designs

March 11, 2010 by Joel Reyes 20 Comments

Finding your way around a majority of the mobile websites that exist has become a nightmare with the lack of proper usability being implemented into their designs.

This has caused the quality of designs (especially the mobile usability factor) to decrease on a larger scale when compared to the sites that not only practice good mobile aesthetics, but allow their users a smooth transition between the regular site to an enticing experience on their mobile devices.

Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.

Get To Know Your Users


Like any other usability article no matter web or desktop related, there’s always some sort of connection that needs to be made between the designer and the user. Needless to say, if you’re aiming towards designing a mobile website with the best possible level of interaction between the sites interface and the user, how would you be able to devise this step effectively if you don’t have a clue who’s going to use the mobile website?

Get to know your users by conducting a few tests and gathering useful information using various usability testing and analytics tools on the large scale site. Remember, your job is to “listen” and learn from your users. 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, which is: Accessibility

Mobile Accessibility


Designing your mobile site so that your users can move quickly and freely throughout the interface is key to the effectiveness of your websites usability. For example allowing toggling for options rather than forcing users to view them, hiding rarely used features and widgets, and avoiding having users fill out long forms are just the beginning of things you can do to create a more accessible environment. When users access a mobile website, a massive amount of their attention should be re-focused on the content you want them to view opposed to the aesthetics. 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 240×320.

Keeping Everything to a Minimum


KEM (Keeping Everything to a Minimum), is very much like the Keep It Simple Stupid (KISS) technique. Okay, you got me, there’s no such thing as the KEM technique, but you get the idea. Since effective mobile interactions have everything to do with great usability and nothing to do with overcrowded designs, we find ourselves at a place where in order for us to successfully reach out to a user we must keep our mobile designs as simple as possible. For example, make sure your navigation bar is as short as it can be, you eliminate excessive hyper-links within one page, and you keep the use of images to a minimum. A simple mobile website, will more than likely be 9 times out of 10 more effective then one that feels bloated. Less is definitely More.

Communicating Through Color


As unrelated as it may seem, color plays a large role in a mobile websites usability. When color is used within the right parameters, it gives way to a more visually compelling manner for us to communicate information on a page without having to use up any additional space. If you decide to use different colors, make sure you refer to the W3C Mobile Web Best Practice (Use Of Color), 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.

Background colors are accepted, however there must be a definite contrast between a background color and text. Information that is conveyed using colors, should contain a clear contrast between any of the other elements within the mobile websites design. Remember, we’re using colors to communicate information effectively, not to make things just look pretty.

Testing Phase


The development of effective usability within your mobile website will require you test early on in the design process. As we touch base on mobile testing, remember to keep tests as simple as possible. Testing for usability is not a one-time event, it’s an ongoing process. This will help you increase the quality of your mobile website through time. After-all, Rome wasn’t built in one day. Since there is an enormous amount of devices users can utilize to access your mobile site, you should not only test often, but on multiple devices as well. Even though some devices may use the same browsers, you should make note that testing on multiple devices will help you address the difference in screen resolutions, sizes, and operating systems so that your mobile website is able to run as efficient as possible.

Here’s an article written by Jakob Nielsen on Mobile Usability. It explores conducive research results from 36 websites. Definitely worth reading.

Books and Further Resrouces on Mobile Usability

  • A Three Step Guide to Usability on the Mobile Web
  • Wikis for Mobile Testing
  • Nokia Forums: General Usability Tips
  • Handheld Usability Book
  • Mobile Usability in Educational Contexts
  • Informative Slide on Mobile Usability Testing
  • Mobile Usability: Is it Good Enough?
  • Mobile Usability: How Nokia Changed the Face of the Mobile Phone

Your Turn To Talk

I hope you enjoyed this post! Please feel free to chime in and leave a comment below ;)

Get guaranteed success in E20-001 exam using up to date resources. Testking offers expert study material to help you pass 70-432 as well as 642-524 exam with minimal efforts.

Filed Under: Article, Usability, UX

Comments

  1. Maverick says

    March 11, 2010 at 6:54 am

    these are some really good tips. yes, lots of mobile websites do lack these things.

    thanks for the post.

  2. designi1 says

    March 11, 2010 at 11:53 am

    Recently made a post about this subject at designi1 and for what i wrote here i must that i´m plenty agree you you… must web sites don´t know or ignore the mobile users!! i think the future of web i´ll be around mobile phones and another small machines with smaller screen :D let´s mobilize our websites!!! :D

  3. ben says

    March 11, 2010 at 5:49 pm

    Thanks for the information especially about all the scree resolutions – there is so much to think about . . . . . .

  4. Alex Flueras says

    March 11, 2010 at 11:57 pm

    There will soon be a time when designing a mobile version of a site will be a must. That is why this article is so useful. Thanks.

  5. Lava360 says

    March 12, 2010 at 2:40 pm

    all great tips specially u mention the testing phase is so important. thanks for the post

  6. Theo says

    March 13, 2010 at 11:13 am

    Thank you for this article. What would be best practice to implement a mobile stylesheet ?

    Thank you again for these tips.

  7. Sites By Josh says

    March 13, 2010 at 7:14 pm

    “I hoe you enjoyed this post! Please feel free to chime in and leave a comment below ;)”

    Who you callin’ a hoe?! Nice Post.

  8. Jon Phillips says

    March 14, 2010 at 12:12 am

    @Josh: haha, thanks for the heads up, I just edited the post :)

  9. Joel says

    March 14, 2010 at 7:06 pm

    @Alex Flueras

    Yes, I definitely agree with you. The time will come when mobile websites will be the “standard” and everyone will have one. This is mostly due to the quickly rising use of the super high-speed surfing speeds of data-powered mobile devices (i.e. 3G, 4G networks). There are a lot of people that rather surf on their iPhones than their laptops or netbooks when they’re on the go.

    @Theo

    I wouldn’t call this a “best practice”, but more of a preference :)

  10. Atul Kash says

    March 16, 2010 at 6:30 pm

    Never had the opportunity to design a website with a mobile device in mind but there’s always a first time. Thanks for the heads up! Great article

  11. Pixil.info says

    March 17, 2010 at 4:14 am

    Great points, You’d think more sites would notice mobile users trying to access their sites!

  12. Creative Nuts says

    March 17, 2010 at 1:50 pm

    great tips to try. We have recently launched our mobile website.

  13. leon says

    March 24, 2010 at 5:08 am

    I like the tips! It would have been nice to see some best practices and examples explaining each of five tips visually though ;)

  14. James Duncombe says

    March 24, 2010 at 10:22 am

    It’s also worth remembering that not everyone’s going to be using an iPhone to view your site. Again, this would depend on your research into the sites intended audience.

  15. Beatrix Potter says

    April 20, 2010 at 11:41 am

    Excellent post, thank you very much for taking the time to share this with us.

  16. John says

    April 25, 2010 at 3:25 am

    Thank you for this great post. This is a very valuable information.
    keep posting.

  17. Kelly says

    August 6, 2010 at 8:34 pm

    This post is very useful as these days people are accessing website via there mobile phones. The tips you have provided are really very useful.

  18. Abhijit says

    September 28, 2010 at 3:14 am

    Useful indeed. Thanks for sharing. I will keep them in mind while designing a mobile layout in future. Thanks.

  19. Website Design Birmingham says

    May 26, 2011 at 8:41 am

    Thanks Joel Reyes for an excellent information, These tips you have provided are really very useful. I am going to implement these strategies into my web design approach!

    Cheers!!

  20. Digimax Dental says

    August 7, 2020 at 4:50 am

    These tips were useful 10 years ago, don’t you think now it’s a time to update the article.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022