I’m sure many of you have noticed the steadily climbing percentages in your Analytics for iPhone, HTC and various other mobile browsers. When re-designing or making minor modifications to usability on a site it is important to be cognizant of your users. After all we might have just built (what we think is) the greatest design element ever, however if it’s not going to work for our users we might as well not have it.
Obviously mobile browsing (for the most part) is not a primary traffic driver for a website. Most of the time we are looking at a few percent at most, which in a lot of cases means it is not practical to design a full mobile version of a website. The modern mobile browser makes it quite easy to view full websites. So unlike 3-4 years ago when a mobile version was required if you wanted mobile traffic that’s not necessarily the case today.
There are however a few things that are common place on the web which are not so mobile friendly. Thinking about these during the design process can greatly increase the usability of your website on a mobile platform without increasing the budget.
Hover
On touch capable browsers such as the iPhone there is no hover state. There is simply no option for this, either the finger is down (click) or its not. The iPhone does have touchstart and touchend (“User Experience” 66) which can help to take over some hover events such as image swaps, but what happens when it comes to more interactive features?
Many websites employ hover activated fly-out menus. The use of such menus on their own can be usability disasters if not implemented correctly, but lets think about mobile users for a second. Often the primary level of a fly-out menu has a link on it that links to a safety page for those without javascript enabled so they can still see the navigation structure for the site. This does save mobile devices as well, but its not very usable. A great deal of modern mobile browsers support javascript so we can still make use of it to increase usability.
Why not invoke the sub menu on both hover and click? Less savvy web users are likely to click the link anyways not realizing it will fly out on hover. Having it appear on click and disappear on a second click can greatly enhance usability overall not just on the mobile device.
Flash
Flash is an unparalleled medium for delivering rich user experiences to web users. It has a 99% user penetration (adobe). However this is certainly not the case in the mobile world. Few mobile devices have Flash support and even fewer have native Flash support. Flash files are also generally large and take time to load over 3G and Edge networks.
There are many fantastic and proper uses of Flash on the web, however there are equally as many (if not more) poor uses. Before building a Flash element for a site consider whether or not it really needs to be Flash. Will it just be a rotator with images fading in and out? We can accomplish the same effect most of the time with a lighter footprint using javascript, and better yet it will work on more mobile devices, than if you built it in Flash.
Forms
No matter how efficient I get at typing with my thumbs it will never compare to a keyboard for speed. As a general rule with forms, the less information you ask me for, the higher the probability you will get me to complete it. This is even worse on a mobile device. It should be a standard with all forms. Go through and make sure you are collecting only what you absolutely need, and then check it again. If its setting up an account get some basic information and then prompt the user to complete their profile at a later point.
Live feedback will also increase your usability. A greater percentage of users will successfully complete a form that uses live validation (Wroblewski). Keep in mind while using a mobile device it takes that much longer for your page to reload. If the user has to wait until after the information is submitted for feedback it will be that much more difficult to complete. Luke Wroblewski has recently written an article on live feedback in forms.
Many of these ideas are common usability concepts that not only will make websites more usable for mobile but also make it more usable for traditional users. Ideally we would be building mobile versions of all our sites, however it is not always practical or in the budget. In its place we can make our websites more usable on mobile platforms.
References
“Flash Player Version Penetration”. Adobe Systems Incorporated. 10 Sept. 2009 <http://www.adobe.com/products/player_census/flashplayer/version_penetration.html>.
“User Experience”. Safari Web Content Guide. Apple Inc. 10 Sept. 2009 <http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf>.
Wroblewski, Luke. “Inline Validation in Web Forms”. A List Apart. 5 Sept. 2009 <http://www.alistapart.com/articles/inline-validation-in-web-forms/>.
Tags: Design, Development, Javascript, Mobile
Share this page
