Website Usability: Designing for Mobile Devices

full-screen

 

In the quest to make your website more user-friendly, there comes a time when you need to give great thought as to what type of device and user you are designing for. As mentioned in part 1 of this series, many people today are accessing the web via mobile and multi-touch devices. As Steve Jobs commented just days after the release of the iPad," Elements that rely only on mousemove, mouseover, and mouse out or as a CSS pseudo-class hover may not always behave as expected on a touch-screen device such as the iPad or the iPhone."As a result, web developers should keep in mind that anything designed for the web and requiring a hover state has an uncertain future and may face serious website usability issues. Not sure? Consider this telling fact, "There are two smartphones being purchased for every one desktop computer."2

iPhoneThere are a variety of steps you can take to keep a website, whether
being viewed on a desktop or mobile screen, from being unpleasant at
best and unusable at worst. Here are a few common elements you may wish
to consider avoiding as you design or edit your next site.

  • Splash
    pages that require an extra click to get into a site -If you must, make
    sure there is a good reason for it. Not just to "Be cool."
  • Videos or music that plays automatically on load – Unless you
    want to compel a large percentage of your visitors in public places to
    scramble for the "Close Window" button.
  • Using drop down menus or
    hiding content that is critical for people to get to easily – Although
    the popularity of the drop down menu has helped to reduce it’s inherent
    counterintuitiveness, consider other, more simple navigation techniques
  • Hyperlinks that are not totally obvious
  • Javascript tool tips or other pop up boxes – Use these only for supplemental information, not critical info
  • Build intentionally and specifically for the touch screen devices

Although
many of these items relate to Javascript, that doesn’t mean that one
should quit using it (It can be a very useful tool, actually), but
rather that it is necessary for web designers (and website owners) be
aware that every "special effect" should be there for a purpose. Whether
it is getting more content on the page for SEO reasons without making
the page look so text-heavy, or hiding a  login area that comes to the
forefront only after a click, if only 20% of a site’s visitors may need
to login, etc.

Website usability for the mobile generation also means some natural constraints3.
According to Luke Wroblewski, website usability for the mobile device
means that pages should be designed for a screen size of 480-320 pixels,
which is only 80% of the size of a low resolution desktop screen. As a
result, designers need to focus on what aspects of the site are most
important to your customers. You will also want to keep user interface
elements geared toward these "finger usable" sizes:

  • Use extra big buttons
  • List components should have plenty of line spacing
  • The width of a finger limits the density of items on the screen. If
    the items are too close, the user will not be able to choose a specific
    one.

With all of the browsers, devices, and programming
choices today, it’s easy to get caught up in implementing too many
features. However, ensuring website usability is a critical aspect of
increasing sales and that is the bottom of line for any business. After
all, the average user is not going to stay on a site that is difficult
to use, challenging to focus on, or takes too long to load. If you want
to increase your website’s usability, be sure to ponder these
suggestions. And remember that Page Progressive is happy to help you make your website all it can be :-)

Sources:

  1. http://trentwalton.com/2010/07/05/non-hover/
  2. (.net/standards, Sept. 2010)
  3. Practical Web Designs, Sept. 2010


 
 

recent posts

Why choose Page Progressive?

Page Progressive came to our rescue after our previous designers had let us down. They delivered different design ideas within a very tight timeline. My partner and I were impressed by how quickly they showed a good understanding of our company and what we needed. We were given excellent care and guidance - they were prompt, knowledgeable, efficient, friendly and professional.

Divya Parekh & Michelle Holjes
The Moxie Solution, Inc

Client Access

back to top
   

Free Estimates!

Still not convinced? Contact us for a free estimate and we’ll examine everything up and down and show you how we can develop a solution for you and even help you market your idea online.

Our estimates are always free,
so why wait?

Call us now at
919-374-3014 or fill out our
contact form to get started!