-->

Mobile Web: The Big UX Blindspot

“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.”
                          —Nobody

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:

virginamerica.com
iPhone

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.

 
slate.com
iPhone

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:

alaskaair.com
BlackBerry

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.)
 
moviefone.com
iPhone

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)

nullLike 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:
Mobile Awesomeness
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

Happy travels!


talent imitates, genius steals

Somebody remind me again why I’m sitting at a desk on the ‘puter instead of dancing all day, every day? Oh yeah, because this is the best toy ever made (and pays the bills). Anyhoo… recently came across this dance scene below, which sent me down a path of Cyd Charisse, Fred Astaire, Bob Fosse, Michael Jackson and all the outrageous artistry and interconnectedness of it all. Cyd’s ferocity absolutely slays me in this — there’s actually a lot of flamenco footwork, arms, duende in there, which resonates deeply with me. If I had the time I’d lay a rapid-fire Spanish guitar and cajón track over it:

It’s no accident that Michael’s Smooth Criminal looks quite a lot like this. (There’s a cool scene-based comparison here: Michael Jackson & Fred Astaire: The Master & His Teacher.) Or that Beyoncé’s “Naughty” dance scene with Usher takes a page from it too.


And from the amazing, liquid Fosse in the 1974 movie The Little Prince, playing the snake. Set to “Billie Jean”, well, because, evidently it was the main inspiration for it:



Alright alright! One more. This is a great montage / homage — I found it (ahem) thrilling …



I could watch this stuff forever. If you need me I’ll be over here watching West Side Story


sitting in the sun

Yesterday I sat in the sun for hours doing nothing. Literally. Nothing. Not reading, writing, photo-ing, thinking. Just sitting. It was a huge change of pace for me, some time for meditation, some time to recharge. I then ran around Cottage Grove capturing some of the little details that make it such a sweet place.

More here by Sarah Jurado. Love her eye.

@sarahjurado


Sutro Baths Ruins, the movie

This just made my day. I’ve spent countless hours there and this made me see it with new eyes. Posted to the Sutro Baths fan page on Facebook (by Barton Bischoff).

Sutro Baths Ruins • San Francisco from barton bishoff on Vimeo.

Related filmmaker post: Ruined? When taking a bath in San Francisco didn’t mean your options had tanked.


chevron

“Gareth Pugh’s emblematic chevron is also one of the symbols of Art Deco, and the glamour of the Deco years in Hollywood was one of the sub-currents in the designer’s latest collection.”


thou shalt not

In 1934 the MPAA voluntarily passed the Motion Picture Production Code, more generally known as the Hays Code, largely to avoid governmental regulation. The code prohibited certain plotlines and imagery from films and in publicity materials produced by the MPAA. Among others, there was to be no cleavage, no lace underthings, no drugs or drinking, no corpses, and no one shown getting away with a crime.

A.L. Shafer, the head of photography at Columbia, took a photo that intentionally incorporated all of the 10 banned items into one image.

The photograph was clandestinely passed around among photographers and publicists in Hollywood as a method of symbolic protest to the Hays Code.

[via snacktime]