Don’t be seduced by the Dark Side

The Web 2.0 hype isn’t over yet and we’re already talking about Web 3.0. The new trend is all about animations, fancy rollovers, glossy look, sliding and sweeping, advanced interactions. Your old, flat blog seems suddenly so boring. Well, don’t be seduced by the dark side and remember that – doesn’t matter how posh your website looks – usability is its first priority.

I’ll make my point with two examples of totally crazy redesigns: the Huffington Post‘s app for iPad and the new Gizmodo website (and we’re not talking about two amateur bloggers, right?).

The Huff Post delirium

Version 1.x of HuffPost’s app was a simple interface to the blog, composed by:

  • an opening article with a large pic, with great relevance
  • a list of articles; at the first glance you could see: title, category (clearly identified by color), thumbnail image
  • a list of posts with comments/opinions/blogs and their excerpt
  • on top, a list of main categories with an option to show all the categories at once

Each article was displayed at full size; slideshows showed a large photo in the top half of the screen and some scrollable text on the lower half. The experience wasn’t too different using the iPad in landscape mode.

HuffPost Front Page HuffPost Page Single post

Few months ago someone put some weird drug into the water at HuffPost’s headquarter and everybody apparently said: “Hey, we’re 2.0 now, let’s do something spectacular”. After having painted the walls in pink, worn XVI century clothes for a week and danced naked under the moon, they came out with a new app with these features:

  • A list of categories on the left: 107k pixels against 36k of the previous version. More categories are visible, but still you have to scroll to see all of them.
  • 5 “strips” of posts: top stories, news, blogs, slideshows, popular. If you have some popular news between the top stories you’ll see the same post three times.
  • Each strip scrolls horizontally and features a wide photo for each post. Post tiles are wider than tall, so you can see up to eight posts at the same time: if you’re lucky and there’s neither a duplicated post nor too wide tiles. In version 1.0 you had at least eight posts plus up to six blog entries on the left and just scrolling once you accessed the following eight.
  • You don’t really know why a post is between news, top stories or popular and, anyway, you have to swipe a lot to explore new articles. Moreover, the animation isn’t smooth at all.
  • 300×400 pixels for a slideshow image (iPad screen is 1024×768). Slideshow? Looks like a thumbnail to me.
  • Slideshows again… You have your (tiny) pic, two lines of text (when available) constrained inside a 100px tall space, and again two strips: top 5 and a full list. Again, you can see your image three times, if it’s in the top five. It’s nice to have some buttons (previous, next, facebook, twitter, e-mail), but should they use almost the same space as the image?
  • Guess what? A full screen post would be so ordinary. Let’s use just a quarter of the screen to keep some useless stuff visible.

New front page New Slideshow New single post

The app was totally unusable. There’s a nice “Feedback?” button, which I used immediately and they kindly replied within 24 hours telling me that the app received a “love or hate” reaction, but I think it was mostly hate because they started to release updates after updates adding features (or, better, putting them back) like full screen posts and white background as options.

They say: previous app was too similar to the website, if you want the same experience you should browse the website instead. Well, previous app was fine because it was similar to the website experience, with the best of both worlds. Now apparently they found out how to provide the worst of both worlds.

The Gizmodo mess

Now to Gizmodo. Here is a cached screenshot of how it was before yesterday.

Old Gizmodo

Well, it’s a blog. Three columns, maybe some waste of space but I like whitespace so I think it’s ok. Articles, pictures, titles, tags, everything is clear, everything is where you expect it to be.

The new Gizmodo features a weird sidebar with… with? with what? Latest articles? They’re not, they don’t match the latest posts I see in the main body. How many are they? Where am I? I don’t know: this sidebar scrolls by its own with no feedback. It just scrolls endlessly. If you’re hover it it scrolls, if not the main body scrolls, sometimes everything scrolls, sometimes nothing does. Flip a coin.

New Gizmodo

What’s on the bottom? I don’t know, but it doesn’t go away. And it isn’t really fixed on the bottom on my iPad: it moves, gosh if it moves covering the underlying post and moving around while I scroll.

Now I can see eight (instead of 46) posts; three top stories on the bottom (instead of 5 on the top); misterious buttons on the right top (they don’t work). The main section is constrained inside a 620px wide box making me feel claustrophobic.

I would like to leave a comment, but the clever AJAX form doesn’t work.

Final notes

As you can see, a lot of effort (and money) is needed to create a mess like this. But sometimes you can’t see the forest because of the trees: your first goal is and always has to be usability. Improvement is just that: adding a feature to make thing easier or to do more things without forcing the user to learn the basics again. Simple things often work just because they are simple, and creating a simple interface is not simple at all.

If you develop or buy a theme, or if you hire a designer, keep this in mind:

  • First things first: your content needs to be accessible, your interface has to be usable, your goal has to be clear (a lot of text? focus on text. Mostly pictures? focus on them).
  • New isn’t always good, it’s just new. More isn’t always good, it’s just more. Don’t cheat, don’t try to trick people: they don’t buy it. They will cheer you for your fancy site and never come back again.
  • Remember that people is used to Internet how it works now. Add, improve, refine, tweak, but don’t modify basic behaviours of buttons, links, pages and so on. Browsing experience should be immediate, fast, easy.
  • Don’t add unneeded things unless you think they are really, really good for your visitor.

This will make you a pioneer of the Web 3.0 experience.