User Interface

posted 02/16/08 by Rick Webb

We’ve always been passionate about user interface design, from day one. Keith, especially, was a renowned user interface designer, even before this company got off the ground. Robert as well – the two of them making some fascinating, pioneering user interfaces in their Arnold days for projects like Turbonium and Microbus.
We face a series of interesting challenges in User Interface, chiefly owing to two things: the diversity of our project types, and the two development methodologies we use as appropriate, water-falling and scrum. Our user interface design approach is obviously different for something like the Escape the Paparazzi game or the Subservient Chicken than it is for something like Kashi. Then, of course, there’s traditional user interface design, where we whip up some wireframes and sitemap in advance, and then everyone works to build that, versus the very interesting and developing field of having the user interface designers be a part of the scrum development team, iterating and adapting along with the rest of the team.
Top-level, though, regardless of the project or methodology, we believe that User Interface Design is a vital discipline, as important as the creative of the tech. In recent years, we’ve taken a much more methodical and disciplined approach to user interface, when the situation warrants it. User Interface is its own department now at the Barbarian Group, lead by Justin Baum, on par with Technical and Creative.
Lucky, Justin’s a prolific blogger, so I’ll let him take this topic over after launch!

Here are some recent posts from our employees about User Interface:

Danger mouse + Sparkle Horse + David Lynch + WEFAIL

History Pin

Have a play here

NBA Twitter Playoffs

Twitter playoffs captures what everyone is saying right now about the NBA playoffs. Nice!

I love the future so much!

On a normal day I wake up, do my showering and hygene junk and stuff so I can look good for the day, and over breakfast I open up my computer to check my email, read my RSS feeds and various favorite websites, all while listening to some awesome god damn music. When I get home from work, I’ll usually check out what’s on Hulu or Netflix. On occasion I’ll also open up Photoshop to get some work done at home. As I thought about all of this over the past month, it struck me that for everything but Photoshop, the iPad can be my home computer.
A few days ago, while watching a number of people on the train to work all playing various games on their iPhones, it struck me: this platform is still very much in its infancy, and game developers have only begun to scratch the surface for what is possible. The games we are currently playing are the Duck Hunts of the platform, and perhaps that’s even too optimistic. We are playing Pong on these things. What will games look like in five years? I am far too excited to find out.
The same is true for this entire device. After my first day of having this in my hands to play with, it truly is the wonderful device we were promised. I sat up late last night watching Netflix streaming video in amazing video quality, and this AM I found an awesome recipe for brussels sprouts that I’m dying to make. All the while it hit me, this shift from mouse + keyboard + monitor as the devices you interact with, to hands + screen is honestly a larger shift that I think I anticipated. The mouse as a pointing device is no longer the abstraction for guiding you way to what you want, now you just touch and do. Interfaces become much more direct now. Current design models for sites out there rely on a user hovering their mouse over elements to create tool tips, drop down menus, and button states… this all needs to be rethought for devices like this. What are interfaces going to look like in fives years? I am far too excited to find out.
This device is far from perfect, but it certainly is awesome. Haters are gonna hate, but deep down, like the iPod nearly ten years ago, this is a huge change in how things are done. And so far, if this is just the first of many devices to come, well, the future is gonna be pretty wild. Marty McFly would be proud.
Now when is someone gonna invent the hoverboard, god damnit!

Mag +

User Experience Gold…
This conceptual video is a corporate collaborative research project
initiated by Bonnier R&D into the experience of reading magazines on
handheld digital devices. It illustrates one possible vision for
digital magazines in the near future, presented by our design partners
at BERG.

The New RockHall.com

Big news today!
For the last year, we’ve had the great pleasure of working with the Rock and Roll Hall of Fame and Museum to redesign their website. It didn’t take more than a second after meeting everyone at the Rock Hall to see that they are extremely passionate about the preservation of rock and roll.
The Rock and Roll Hall of Fame and Museum shares an immersive, interactive experience complete with sound, video, and lights, not to mention all kinds of stuff from your favorite rock and roll artists. The music nerd in all of us wet our collective pants over Mick Jagger’s Union Jack cape (from the Stones’ 81-82 world tour), the larger than life-size photography of Jimmy Page in mid-backbend, or the phone in the Annex’s John Lennon exhibit (if it rings, answer it. Trust me). Rick’s mind was blown by the hand written lyrics to “Love Will Tear Us Apart” by Joy Division, and David Byrne’s original polaroid artwork for the cover of “More Songs About Buildings and Food.”
But all this needed some help translating to the web. That’s where we came to play.
The passion behind the “most powerful art form ever created,” to quote Greg Harris, Rock Hall’s VP of Development, wasn’t translating well in the online world. Static, informational pages dominated the landscape. Media types present in the offline experience were placed sporadically throughout the site. The mission of preservation and education of a legitimate art form wasn’t being fulfilled, and the story of rock wasn’t being told as it should be.
But today – no longer.
The experience design of the new RockHall.com shifts the focus of the site to the content that makes the Museum unique, both in the educational, historically oriented content we create, as well as the information about the museum and its programs. The Rock Hall is actively creating new educational programs, events, exhibits (and so much more), and we needed to capture and translate that online.

Too much realtime

Facebook just made an interesting change to their home page. They introduced the option to view two “different” feeds. The “news feed”, the highlighted stuff we are all used to, and new “live feed,” everything all your friends are doing play by play. The way they designed the user interface and the language they chose is a bit clunky and creates some interesting problems going forward.


Current

1) The design presents itself as if there are two separate feeds, a live feed and a news feed. This is reinforced through their awkward navigation-like treatment of the functionality. The truth is there is ONE feed with different filters to apply. Those filters are lists, networks, locations, apps etc… You know, all the stuff in that big left column.

2) There is an over focus on realtime. I can’t believe they included an unread count for the live feed. Its probably there to get people to discover the feature and hang around longer. If people do discover and use the feature they are exposed to unfiltered information, a lot of which I find completely useless. Not exactly something new, and not helping solve the information overload problem. Is a raw unfiltered list of stuff really a new feature these days? Do I need an unread count for my Facebook news?

I would love to have been a fly on the wall for some of the design conversations that led to this. I thought facebook had a big filtering win with their last major re-design. The addition of lists, the ability to change the default filter on the homepage and the other application and network filters in that left bar were fantastic enhancements. So what happened here?

I sketched up a few other ways they could have gone…

As_filter


“Live feed” as a filter


They introduced this powerful left-hand filter column last re-design… why not just make the live feed part of that? Certainly more elegant than adding another layer of clunky navigation on top of the news feed. The only logical reason to not do this is that they may want you to view other filters (lists, networks, geos etc) as both live or highlights in the future. So why did they not include the live option for all the filters? Why can’t I see my TBG list bellow as both live and highlights? I would wager because it would take A LOT of computing power and other difficult tech. Understandable, but it sure would be nice.

As_persistent_setting

“Live” as a persistent option

Computing power be damned, lets pretend. Lets also try something a bit more usable and clear. If you use the new feature you will notice the navigation items swap places and become headers for the news feed when clicked on, tisk tisk. Here is a quick n’ dirty sketch of what it could look like if you were able to see all filters as either live or highlights. Even though this probably wasn’t an option, I think it underlines the problem with the language they have chosen. News Feed and Live Feed imply two separate feeds… when in reality you are seeing either highlights or live updates of one activity stream. At least that is the mental model / agenda I am arguing for. All in all this approach is too busy. I really liked the simplicity of the filters on the left and a clean header. Although I am sure there is a more elegant solution in there.

My gut says the way they implemented this feature is going to feel confusing and not so useful to users. I think what Facebook chose not to include in the news feed was part of its charm. Giving the user the ability to see more information is not a bad thing, but getting there is not an A/B, black and white thing. Right now the faucet is either open all the way or at a trickle. Its the smart multi-levels of filtering, refinement and nuance that are missing. It doesn’t feel like the same level of polish was applied to this as was to the lefthand filters.

The key to the realtime web is filtering and I like what Facebook did last redesign around it. But here, Facebook has backpedaled a bit and given its users the key to wide open faucet, again. Im being a bit hard on them yes, but these issues around filtration and pulling value out of activity streams are the problems to solve in 2010 for the realtime web. I was expecting more from one of the leaders in the domain, and hope they have some better thought out moves up their sleeve, or perhaps this a transitional interface to something new.

Launched! Kashi (again!)

SPOILER ALERT: You can always improve on something great!
We’re now in our third year of The Barbarian Group’s collaboration with Kashi. We’re calling this release a refresh rather than a redesign. To clarify, think about the project as a house. When you do a redesign, it’s like tearing down a home to its foundation and starting fresh. That’s not what was needed here, for our foundation was already stable, our website was already successful. Think of this release like remodeling a kitchen, it’s an improvement of what was working, and an optimization of what wasn’t. So we put on our thinking caps and many months later, we’ve surprised ourselves yet again!
The countless improvements to the site are too many to list, but some of our favorites include: a redesigned navigation system, a dynamic footer showing the current community activity, a vastly improved commenting system, a simplified sign up and log in system, an improved look and feel, and of course, a ton of IA and UX refinements. And that’s just what the user see’s. The site is faster, more enjoyable, easier to use, and most importantly, easier to find what you are looking for and more likely to discover things you didn’t know were here. On top of this, we are already working on a number awesome super secret features and updates to be launched soon, so stay tuned for those in the coming months!
We love this client, and we hope you enjoy the site!