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
There is no better way to manage the relationship between giving your audience a good overview while offering the flexibility of viewing details of each section or sub-sections. For retailers with product descriptions and reviews or media sites with news headlines and stories, Javascript Collapsible menus are the best way to go. The website that demonstrates this best is WIKIPEDIA. With so much content, Wikipedia uses this technique to hide & show the information with various sections. By default, all the sections are collapsed so the viewer can browse its categories and each section can be expanded individually. Alternatively, some mobile web chooses to take the user to a different page entirely, while its an option, I personally find the collapsible menus more engaging on mobile. Another tip around menu design is to give as much preview to your audience prior to an engagement (ie. if you are selling something within a category, provide a product count or if you are taking viewers to see customer reviews, provide a review count or ratings average); bottom line is to empower a user's mobile experience by saving them time and guess work.
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
Category Page:
* 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.
No comments:
Post a Comment