“I think it shows how unique and progressive your restaurant is when you use 90% of the screen area for your theme and ambiance, and 10% for the information I actually came to your site for.”
Somewhere between that 960-pixel Interwebs masterpiece and the dreamy iPhone app lies the well-traveled but poorly-served world of the mobile user. Apps are lovely, but they’re device-specific and every site doesn’t need an app.
I’m constantly surprised by what a strikingly different experience a site will be on a “regular” computer versus a mobile browser. On one side there’s a rich, intuitive (and often expensively-made) experience — and on the other, a navigational battle of screen-pinching or epic scrolling to find basic information or accomplish the #1 user scenario. This matters, and will only become more important — the future is mobile, lightweight, location-aware: smartphones, dumbphones, tablets, netbooks. Get small or get lost.
Like anything with serious constraints — haiku, tiny city apartments — limits inspire total ruthlessness and reveal what’s essential. And like the dude who wrote one of my favorite books says: Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
Who’s Doing It Wrong?
Well, a lot of sites, hence… le blindspot.
Here are a couple of examples:
Given how global, youth-marketed and tech-forward (in-flight wifi etc) Virgin is, I’m really surprised that this is their mobile default. Especially for an airline site — 95% of the time I just want to check-in or see if my flight’s on time.
Early web pioneer and Microsoft-spawn Slate is hastening its irrelevance with a bad mobile experience. They do have an app at least, but you wouldn’t know it from landing on this page — there’s a small link to it in the footer. (Check out The Onion‘s mobile site for a good layout for a site like this.)
Who’s Doing It Right?
Not surprisingly, a lot of the web’s megasites — Facebook, Amazon, CNN — do a great job of making your digital life easier.
Here are some others:
As a counterpoint to Virgin America above, Alaska Airlines does a great job of serving their audience — travelers with phones who need information fast. (Bonus: Your QR-code boarding pass is delivered to your phone screen — I’ve used it and it works great.)
Bam! You’re in. No-brainer UI, deep data, instant gratification — this is what mobile web is all about.
How to Do It Right — The Basics
Let’s use a restaurant site example since it’s a really common scenario. (Though I’m using a simple site type for this exercise, the more complex and data-rich your site is, the more important it is to have a smart clean UI at the top level.)
1. Identify Your Key User Scenarios
This is true of any site, of course, but the key here is to focus on people standing on the sidewalk versus people sitting at their office desk.
Desktop Customer wants to know: where you are, what’s on your menu with some detail, how much it costs, what other people think of your restaurant, what it looks like inside and if it’ll impress their date / client / etc
Mobile Customer needs to know: if you are nearby, if they can eat there now-ish, what you generally offer + price range, if people love it or hate it
How to satisfy Mobile Customer:
■ Location, location, location: Address! If nothing else, list your address, phone number and hours of operation. (Extra credit: link to Google Maps.)
■ HTML info: Open a PDF menu on a phone? That way lies sadness. I’d rather pull into a Taco Bell drive-thru than open a PDF on a phone. Throw your would-be diners a bone with (at least) an idea of menu items and prices.
■ Link to reviews or lightweight customer rating of some kind, e.g. Yelp reviews, Zagat rating icons
■ Social media links (optional), e.g. Facebook, Twitter, Foursquare, Yelp — people use them to “file” things they like (or want to brag about… I mean, check in from), plus it’s a marketing boost for you. Win-win.
2. Be True to Your Brand (and Make Sure It Degrades Elegantly)
Like it or not, first impressions matter big-time, and your mobile site is how a lot of people are going to decide whether or not to put money in your pocket. You can blow tons of cash on posh signage and high-end light fixtures, but if your site looks like a digital quickie mart, you’re going to lose out. That’s your storefront. That’s YOU. Assuming your main site is totally on-brand (let’s hope!) and a thing of beauty, you want your mobile site to be its ultra-efficient Mini Me. This includes making sure it degrades elegantly. What does that mean? That it doesn’t totally break or look like crap no matter what you’re looking at it on.
3. Auto-Detect Mobile Visitors
Self-explanatory and more of a technical detail than anything. You can send any and all mobile visitors to the mini site, or just those without iPhones (if your site already looks good on them) or whatever. Always give users the option to view “Full Site” if they want to.
4. Just Do It
While I’d love nothing more than site owners to put money behind smart, well-designed and unbelievably easy-to-use mobile sites, that’s not always going to be the case. And since I’d rather see a friendlier and more useful mobile web than just about anything else — here are some cool tools for getting your DIY on.
Keep in mind that mobile sites are likely to last a lot longer than other web efforts anyway (i.e. not need a rede$ign) — given that they’re likely to be made of basic brand elements and core functions — and that an investment in a good one will go a long way.
. . .
Here’s some inspiration and more resources:
How App-Like Design Can Turn Your Site Visitors Into Customers
The Best Part about a Smartphone Is Never Having to Call Anyone
A Netflix Design Principle: Simple Trumps Complete
Is Mobile Affecting When We Read?
6 Brilliantly Designed Mobile Sites