Radical Interface Approaches

Improvement is usually an incremental thing.

Look at your last two cars. Your last two cell phones. Smart people take the current best version of something and make a small adjustment to it — keeping all the other nice things that worked before. Baby and the bathwater.

But not always. Sometimes when the playing field evolves, radical invention get a slight edge.

Web interface design hasn’t changed a lot in the last 5 years. Sure, the coding techniques underlying it have evolved, but the visual structures are pretty similar — header, footer, column layouts, ‘teaser’ content leading to longer articles, etc.

However, the environment that our interfaces are being lauched into has changed. Users are more sophisticated, have faster connections, faster computers and smarter browsers (in relative terms) — all of which presents opportunities to try interfaces that wouldn’t have been possible 5 years ago.

The two following examples have been around for a little while but, I think, are worth spotlighting.

Case 1: Newsmap: Newsmap is a radical approach to understanding the current state of the world through Google News.

Stories on the same subject are grouped and ‘weighted’ on their prevalence — widely-reported stories have larger boxes. Stories are also color-coded by general category (World News, Sport, Health, National etc), currency (older stories are darker) and by country (by tab). I could spend 6 paragraphs explaining it in details but you’ll get a feel for it in seconds by using it.

The system is live and updates over literally minutes. Amazing work.

Case 2: Amaztype: The first time I saw Amaztype, it struck me as just a clever little gimmick to demonstrate Amazon’s Web Services. You enter a search term (let’s say, ‘CSS’) and the app uses Flash to pull down related cover images and stack them randomly into the shape of your search term.

Yeah, cute, but how useful?

Bizarrely enough, everyone here seemed to find it a remarkably efficient and satisfying way to browse for books. Clicking on any cover immediately pops up a box pulling down details of title, author, sales rank and price. More info is a click away — no doubt with an affiliate code locked in.

IMHO the cool thing about this interface is that, by happy accident, it comes off feeling like a ‘bricks-n-mortar’ book browsing experience. There is no navigation, no crumbtrails, no search boxes, no categories. You just pick up the cover that catches your eye. It’s like rumaging through the bargain table!

In both cases the examples probably break 9 out of 10 traditional web interface rules — but still manage to be useful and even quite usable regardless.

I’m certainly not suggesting the web, as we know it is, about to be set aflame with revolution,.. but it is amazing what is still possible with a little imagination.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • pdxi

    The examples given are impressive, but what’s left to consider is that most of us have to deal with semi-static HTML to mark up our interfaces. Flash is nice when used appropriately, but it’s not necessary to make ordinary applications more attractive and comfortable.

    Smarter design, and an awareness of how people /want/ to work, will lead you to design better interfaces with the basic elements at hand: HTML widgets. Even with this limited set of options, an enlightened designer can take make an intuitive interface that pleases everyone.

  • pdxi

    Subtract “take” from the last sentence of my reply. Too bad we can’t edit our own comments :(

  • http://www.sankesolutions.co.uk hotnuts21

    That amaztype is cool, but hell it takes a long time to load.
    Try this
    http://amaztype.tha.jp/UK/Video/Title?q=x+files

    10 minutes later its still loading titles and my browsers CPU usage has just shot up, im presumbing because of the flash plugin. Plus it doesnt seem to offer any pop up advice untill its loaded, which aint yet :)

    Both cool tools though, but I dont think many people will stick around, it might actually be faster to goto amazon and browse :)

  • Gerd Riesselmann

    The approach choosen by Newsmap has been around for a while, for example regarding browsing your harddisk. However, I find this rather annoying than helpfull. This is because I’m a very textual person, which is I can scan text very quickly if it is presented in a reader-friendly way. And centuries of practice and exploration have brought as very far in knowing how a readable text should look like, from contrast to line width and identation.

    Beeing that obsessed by text, I quicky loose orientation when confronted to approaches like newsmap. There’s nothing to guide the eye, and words are even wrapped on several lines. Every attempt to quickly read the headlines will fail. So it actually takes me more time looking through the news for something that interests me on newsmap than it does on the google news page. I don’t care about importance, as you may have noticed, but think I’m not alone with this.

    When it comes to news, most people read just the headline or the first paragraph. And news are written by descendent relevance, so you grap the most important stuff quite at the beginning. This is why google news quotes the beginning of an article, which keeps you quite informed when just scanning through this single page – newsmap requires you to move your mouse over an headline to watch a (rather short) abstract as a tool tip. This is a step back, I think.

    Anyhow, I know there are a lot of people out there who are thinking different, in a more visual style, perhaps. As far as I know recent researches, I may even be a minority… So other people may find things like newsmap helpfull and a step forward, like they do with mindmaps and graph-like search results (it has been done, but I cannot remember the according site).

    Me personally likes to stay with well formatted text output, anyhow.

  • Cailean

    It will load book images ad infinitem — but you can click on a book right away to zoom and get more info…

    The CPU/memory usage drops significantly while you’re zoomed on a book…

  • http://www.functionflow.com Geof Harries

    pdxi,

    You’re missing the point – these projects are about experimenting with UI design and interaction. Yes, HTML forms the majority of the web’s documents and controls, but there’s also plenty of room for richer and more immersive experiences like these two. They may not trounce ol’ king HTML but they’re taking the same problems and attempting to find/discover a different solution. Both fail in some regards but so does HTML – again, it’s this type of experimentation which keeps us all moving forward instead of just kicking back and saying, “well, I’m happy with where we’re at. Let’s stop here”.

    geof

  • cob

    I love it…

    I’m not sure how it would catch on with mainstream web users.

    A great example of innovation, though.

  • Anonymous

    Different isn’t always good. While I agree that the AmazType is an interesting “gimmick”, it really seems mostly stupid to use.

    The continual addition, or moving, of book covers is confusing. The covers are too small to see well. I guess if you like checking out books in a brick-n-mortar in the middle of an earthquake – well than this would be perfect – otherwise just a gimmick.

    I think the main reason that we haven’t seen a huge jump in interface design is similar to the reason that most newspapers, magazines, etc all have a similar format that is essentially the same as 100 years ago. While the Internet is a new medium, you are still conveying data – which has established best practices. I’m not saying that nobody is going to come up with something better, I just haven’t seen it yet.

  • http://www.sitepoint.com AlexW

    Thanks guys. There have been some good comments.

    I think both examples need relatively fast computers and connections to work well. While 5 years ago that wasn’t even a vaguely realistic expectation, it’s something you could expect in more savvy audience sectors now.

    10 minutes later its still loading titles and my browsers CPU usage has just shot up, im presumbing because of the flash plugin. Plus it doesnt seem to offer any pop up advice untill its loaded, which aint yet :)

    I think that is the biggest usability issue with Amaztype. As Cailean already pointed out, it loops forever, though that fact isn’t immediately obvious. We noticed it quickly because we saw our own books appearing again and again, but I can imagine many users would be waiting for it to finish.

    The continual addition, or moving, of book covers is confusing. The covers are too small to see well. I guess if you like checking out books in a brick-n-mortar in the middle of an earthquake – well than this would be perfect – otherwise just a gimmick.

    True, you can’t see the books perfectly presented but the same can be said of a standard book shelf. The shape of books means that they are most often stacked with their most interesting and informative sides facing each other. We usually choose which ones to examine more closely by judging it’s a book by it’s spine, rather than it’s cover.

  • http://www.dannyfoo.com/minifolio/ etsuko

    That looks so cool!