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."1 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
There 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:
- http://trentwalton.com/2010/07/05/non-hover/
- (.net/standards, Sept. 2010)
- Practical Web Designs, Sept. 2010