Fresh

It’s holiday time and we’re in a giving mood here @eROI! Before we tip back the spiked eggnog and prepare for that flurry of holiday parties, we decided to end the year on a solid note and roll out 12 days of ideas, inspiration, tools, code, and general fresh goodness that you can use to spice up your next project. Think of it as the opposite of that grooming kit or generic scented lotion basket you received from the aunt last year.

As the first installment in the series, we wanted to take a look at what fantastic things are being done with user interface (UI) out there at the moment. When I started gathering my favorites, I came across all sorts of fantastic UI ideas and protoypes that could someday change the way we interact with computers, and for that matter, the rest of the world. However, I think that this is such a broad topic, and I want to instead focus on some applications of UI that can be put to use today, and why they’re working.

What I found when I got it all together was that everything seemed to fall along a certain spectrum: On one end, we have sites that totally blow you away from the moment the loader bar finishes, leaving you wondering — WTF? What just happened? How did they do that?

Generally, I see these being used for entertainment and game sites, and anywhere that the user goes in with an exploratory mindset. This can be really fun, but can’t be used everywhere because sometimes people actually need to find something in those interwebs (go figure!). This is where the other end of the spectrum comes in, when the real strength of the design is in the subtle details, and everything is about doing something easier. This is found a lot in your web 2.0 style, where user-friendliness is key. I found things along much of the in-between spaces on that spectrum, so without further ado – let’s check it out!

Starting on that more practical side of things, we have Soundcloud , Wufoo and Panic:

[1] Wufoo is a tool for those intimidated or not interested in the monotony of form-building for their website. It sports a bubbly, clean interface that makes building a form easy and yes – fun! Its strength is in the way it uses a now very intuitive drag-and-drop interface to quickly throw together what you need and move on with your life. The prompts and details are simple and right to the point, really enhancing the functionality of this site.

[2] Soundcloud is a wicked idea – A website for people who really want to use the internet for uploading, sharing and distributing music of all kinds. I’m not quite clear as to how they’ve managed to avoid the copyright issues that Pandora and Muxtape have, but its rad anyhow. It seems to be focused on those wanting to upload music they’ve created, since the memberships come at a premium. However, once uploaded, the interface makes it super easy to share with others and create an inbox widget that can be posted to your favorite social media/website, in order for others to easily drop you the latest find. Plus you get these glossy visual timelines of your songs, and a really easy-to-use interface.

[3] Panic uses some great examples of drag-and-drop on their site, and the “goods” section is a great example of how to implement this. the bottom of the screen has a “cart” section that you can drag the products you want onto, making the shopping experience really enjoyable. It was so freaking fun I quickly loaded up $200+ in shirts I didn’t need just because I wanted to see it work. Dangerous.

Now for a few examples that I feel fall somewhere in the middle of the fun/function spectrum: Space Collective, FLYP Media and Viewzi. All of these use some visual trickery, but all the while enhancing the understanding of the content. I’m feeling that this is really the sweet spot to be in right now.

[4] Space Collective is an information source about some heavy topics like “the state of the species, the planet and the universe”. It’s a user-built content site, and the real beauty comes in the “new posts” section, where all the articles are presented in a friendly rounded-corner shape reminiscent of playing cards, with a respectable size picture and snippet. All the articles expand in place, making the exploration of more content easier and more appealing.

[5] FLYP Media bills itself as an original-content news source, and is akin to the newspaper you can pick up at the stands, but on interactive steroids. It admittedly uses some analog metaphors (the animated page turning between sections), but it does so with an eye on fitting as much content on one page as possible. It’s not so much what’s here, but how it’s put together that works so well. Every page has a focus, and all the media on that page supports that subject and enhances your understanding of it.

[6] Viewzi is somewhat of a visual search engine, and its strong point is the range of options it gives the user to rifle through the results. There’s some loss of functionality here, as you probably won’t get as thorough of results as you would at Google, but you might possibly find what you’re looking for faster, since it gives you snapshots of all the content in one place. You really have to play with this one to see how useful it is, give it a try.

Now for the really fun stuff. These sites are great to play with and really push UI out there a bit more. Take a look at Don’t Click It, Leroy Merlin, Safe Trip Home, The Whale Hunt , Digg Labs and the Bio-Bak.

[7] Don’t Click It is a great experiment in what would happen if you removed the click factor from input. It’s funny how we’ve trained ourselves to use the computer in a certain way so that clicking now seems instinctive. It’s super tough to not click at some points!

[8] Leroy Merlin is a wicked cool french interior decorating supply company, with a crazy flash video animation for navigation. Interestingly, even with all these bells and whistles and the site being in another language, I had no problem navigating to a product and adding it to my cart. Wild!

[9] Safe Trip Home is a virtual globetrotting experience, where users get to see somewhere on the world from someone else’s viewpoint, giving people shared experiences and stories. The interface is an unbelievably slick CG video. A must see!

[10] The Whale Hunt is a visual trip through the eyes of Jonathan Harris, an interactive artist who here uses different forms of timeline navigation to give the user multiple ways of experiencing his voyage to see an actual whale hunt. The organization here is mind-blowing, and is really worth a look. WARNING: There are some quite graphic pics near the end of this piece, so be warned if you’re squeamish. This is actually an older site, but this guy is quite ahead of his time, so it still seems relevant.

[11] Digg Labs is a living, breathing infographic. It gives the user a way to see what’s hot on Digg, and several ways to visualize it. Its fun to see where the relationships between stories show up. Not a site I would use very often, but really interesting.

[12] Bio-Bak is a playground and portfolio of flash wizard Coen Grift from Amsterdam. It transforms your cursor into a moving hand that you use to push your way around this crazy pixellated wonderland. This site is so funny it makes me feel like I’m in elementary school again, complete with fart noises and stupid voices. Make sure to turn up the sound and have fun.

Hope you enjoyed the goods. Thanks to Stephen, Mike, and all who sent their finds my way! Look for more goodness in the next 12 Days post!