Tag Archives: user experience design

branding expert-review Flash interstitial iphone mobile devices mobile web readability South Park touchscreen Usability video video sites WiFi youtube

Usability and Design of WiFi Interstitial Pages

You’re out somewhere, maybe a coffee shop or an airport.  Suddenly, a man falls to the floor – you need to know – what’s the antidote for tricyclic antidepressants*?  You grab your laptop or mobile and use the local WiFi to look up the answer –

Only to be annoyed and inconvenienced by the interstitial “terms and conditions” page that the coffee shop and/or airport redirects your browser to.  Time is of the essence!  Why do they need a 2-minute flash animation to load an “I agree” button?

Thus ends my attempt to make a relatively boring subject seem interesting.  In any event, I can’t be the only person who’s noticed that WiFi login or “terms and conditions” pages are often way more complicated and annoying than they need to be.

In the hope that someone, somewhere will do a quick search before implementing one and come across this blog, here are some guidelines.  These all follow logically from supporting the user’s goal, which is to get info quickly, and the business’ goal, which is to attract and keep customers.

Do not require Flash, ActiveX, or god forbid Silverlight.  Nothing you could want to do here could possibly require it, and there are lots of WiFi-enabled mobile devices that don’t have it.  Do you really want to poke a finger in the eye of every customer with an iPhone?  If we’ve already bought iPhones,  we obviously like spending money!

Make the checkboxes / buttons large enough to click on a small device.  So that people with touchscreen PDAs, Blackberries, iPhones and G1’s will be able to touch it on their screens.

Make the page and any server-side code fast.  Stay out of the user’s way as much as possible.  If your code can’t accept a form and do some logging without dragging a user’s browsing session to a crawl, you need to go yell at your devs.

Once users agree to terms, save it in a cookie for a reasonable amount of time. Many mobile devices don’t allow programs to run in the background, which means session cookies can expire every time the device dozes off.

Once users agree, redirect them back to where they were trying to go.  And use a real, server-side http redirect too, not a fragile javascript redirect.  Many people set up their browsers to ignore those.

Make the legal terms and conditions as readable as possible.  Readability is an interesting topic, with lots of research into measurement formulas and the like.  I think we can all agree that an iframe with 1700 words of legalease is not readable or useful.  And while we’re at it, why not add some actually useful information, like bandwidth limits, disabled protocols, etc.  If you are blocking POP and IMAP, let me know so I don’t waste time trying to check my email.

While the crazy scenario at the beginning of the post isn’t very likely, this isn’t just a list of gripes.  Why are you providing WiFi if not as a service to customers or a way to differentiate?  Well, coffee shops with WiFi aren’t very unusual anymore, so you should look at it as part of the who customer experience.

* Why did I pick tricyclic antidepressants?  I did a Google search for poison antidotes and picked the first one with an antidote I thought you might be able to find, in a mad rush to save a beloved minor character’s life, like in a TV show.

EDIT:  thanks to Wysz for pointing out the massive numbers of typos.

Web Video Usability Review: South Park Studios

After a few years of Youtube showing the world how to do video on the web, lots of traditional broadcasters and studios have started putting their content online. Part of the reason is to try to steal YouTube’s thunder – a more market-friendly tactic than just lawsuits. Many of these sites are trying to figure out an advertising model and make money, while others are obviously trying to get viewers more engaged by joining social networks, making mash-ups, etc.

But enough about their goals, what about user goals and experience? In web video the content may be king but usability is almost as important. If your user interface is difficult, confusing, or unpleasant, users will leave your site to get the content elsewhere.

So I’m going to try to do a usability review of various web video sites over the next few weeks. These won’t be formal reviews with user tests and cool eye-tracking heatmaps. Instead I’ll point out some user goals and hold up each site to the same rubrick.

The first site: SouthParkStudios.com

southpark-screenshot

So, what do users want out of web video? I can think of a number of scenarios: finding a particular clip or episode, watching recent episodes, sending a link to a friend or embedding a clip in a blog, and , well, just enjoying the show.

Selection

Score: 4 out of 4 points. This site has everything – every show from every season.

Finding Particular Videos

Method: I’m taking a cue from the creators of Friends – people don’t remember episode names. So I’ll be doing a Google search for the show name and “the one where” and taking the first relevant result. In this case it’s “the one where Ben Affleck has a relationship with Cartman’s Jennifer Lopez hand” (without quotes).

Score: 2 out of 4 points. The search fails, but a simpler query for “Ben Affleck” leads us right to the clips. The full episode is available.

Watching Videos

How easy is it to watch videos? What’s the quality?

Score: 4 out of 4. It’s immediately apparent what to click on to see an episode or clip. You can watch videos full screen and South Park’s animation lends itself well to compressed video. The navigation between episodes is pretty nice, with thumbnails of all episodes for that season along the bottom of the window.

Linking to Videos

Score: 3 out of 4 points. The URL for each clip and episode is available by clicking the “Share” button. Clips open up in the main window so if you can get the link like any other web page. The only lost point is the fact the episodes open in new windows – what is the point? It takes away my browser toolbar and any social bookmaking toolbars or extensions I might normally use.

Embedding videos

Let’s give it a try:

Score: 3 out of 4 points. Once again use the Share button to get the embed code. They lose a point for not allowing embedding of full episodes – they probably have good reasons for not wanting users to do so, but we’re only concerned about the user’s side of things right now.


Advertising

Score: 3 out of 4 points. Ads are shown before the video (for clips) or at two break points about halfway through (for full episodes). Commercials are short and don’t obscure video or interrupt the show more than normal TV commericals would. They lose a point, though, because of the lack of variety – I watched a few episodes and plenty of clips and only saw two different commercials, over and over again.

Audio Experience

I’m going in go with a slightly different scale this time: introducing the patented Bleeding Ear Scale of Web Video Volume.

You may have noticed that some TV stations play their commercials a little louder than the show. The theory I’ve always heard is that they want you catch your attention even if you get up to go to the fridge.

Score:

bleeding earbleeding earbleeding earbleeding ear

Unfortunately, most people don’t watch web video the same way they watch TV – they’re usually sitting much, much closer to the speakers or wearing headphones. The bone-shattering difference in volume between the video and the commercials on SouthParkStudios.com earned the site four bleeding ears.

Total score: 19 out of 24 points, with a special note to dive for the volume button whenever an ad is coming up.

Here come the iPhone killers…

DSCN1935-1Nokia has announced a new phone, the N81, which looks suspiciously similar to a certain Apple phone.  What’s more, Nokia is launching a music download service which will allow people to download songs directly to the phone, instead of going through iTunes on their Mac or PC as iPhone users must.

Is this a bad sign for Apple?  Does it mean Apple had merely a fleeting lead over the competition?

I wouldn’t worry too much.  Nokia is a successful company that makes some great phones, but  Apple is playing a completely different game, the game that Motorola played with the Razr.  When it first came out, people heard about the Razr, they knew what it was, and they knew it was very thin and stylish.  After the success of the Razr other manufacturers came out with thin phones, but apparently copying the form factor and giving the device a serialnumberesque name is not enough.

My guess is it will be the same with the iPhone – every time Nokia tells the press and customers “The N81 is just as great as the iPhone” people will hear “Mumble mumble great mumble iPhone.”  I’m not a marketing expert, but it seems like a branding mistake to me.

The real way to steal the iPhone’s thunder is to figure out what people would like to do with a mobile device and an internet connection and better support that user experience.  From the review on Gigaom, I’m not sure that’s the case here.