2010 is the year of the mobile web. There seems to be record number of internet retailers converting their website to their mobile/smartphone audience. Yours truly is engaged in the middle of a mobile web project which will hopefully be revealed soon enough. Along the way, here are some of the tips I used and examples I've collected amongst some of industry's best practice. I'm here to share three design tips to help you engage in a better mobile experience for your customers/audience:
Best Example: Hotels.com
Hotels.com's mobile website is probably the best of breed based on my research. Their user interface is clean and easy to use. Menus are bold and easy to engage with fingers for touchscreens. It seems like the project manager for their mobile web really understood their mobile clientele and offered all of their most relevant and important links right up front. A customer can easily get to "View Reservation" or choose between different "Customer Care" numbers that engages the phone function with ease. Another tip on "Finger Friendliness", its ususally the text-based hyperlinks where mobile webs run into trouble... don't be afraid to bump up the font size for a much better interaction.
Best Example: Wikipedia
Many retailers assume that a consumer's mobile experience begins with a visit to their homepage from a mobile browser. As a basic step, they've setup a simple user-agent detection and redirects a that user to a mobile homepage to begin the mobile experience. They often forget that a consumer may enter their site using a mobile phone mid-way (ie. Received a marketing email or saw a blog post from their handset). For me, this is something I'm always conscious of because other hats I wear at work involves other marketing initiatives and I always want to tie everything together harmoniously. While I was drafting this blog post, I ran three examples and here are the findings; feel free to try this your self on a smartphone:
Product Detail Page:
* UrbanOutfitter (SKU #18151712) - Successfully Rendered this page in Mobile
* BestBuy (SKU #9558089) - Successfully Rendered this page in Mobile
* Sephora (SKU #1283712) - Successfully Rendered this page in Mobile
* UrbanOutfitter (Men's Top) - Successfully Rendered this page in Mobile
* BestBuy (iPod & MP3) - Successfully Rendered this page in Mobile
* Sephora (Skin Care) - Successfully Rendered this page in Mobile
Bonus Tip: Keep the Search Box available on each page, preferably on the top of each page. Mobile users will grow frustrated if search is not readily available on everypage. Site search is probably your most powerful eCommerce tool, it will prove to be even more powerful on mCommerce. While you are at it, make sure the mobile search results page (SERP) is optimize for mobile!
Building a mobile website has been fun thus far; being as passionate about mobile experience makes me think about every ecommerce website component in a different light on mobile devices (ie. site search, menus, images, videos, product display, recommendation engines, store locator, etc...). When in doubt, keep things simple and go to as many websites as you can to gather ideas and best practices. If you run into a hard time with keeping things simple, rely on your web metrics to tell you what is important to keep for mobile.