Wake Up and Smell the Ribbon!

Posted Thu May 3, 2007 @ 9:14 AM

A little while ago it hit us that our website was almost 3 years old. It had aged well, but the polish was starting to come off, and it grew to the point where its navigation was no longer adequate. It was time for a complete re-vamp.

While brainstorming the new website and its navigation structure, we quickly came to the subject of ribbon - a new user interface element introduced by Microsoft Office 2007. We felt that it worked really well in desktop applications, but at that point we had never seen a website driven by it. We decided to give this idea a try and allocated some resources to research it.

Office 2007 Ribbon | ComponentArt.com Ribbon

The problem with getting website navigation wrong is that it essentially makes your entire site useless. If people are not able to find what they are looking for, they simply won't stick around. Trying to do something new and unusual is asking for trouble and should be heavily scrutinized - it would have to be extremely intuitive and well executed in order to even begin to compete against solutions that people have previous experience with.

It was interesting to observe the stages we went through while trying to design the ComponentArt.com ribbon. We went from initial excitement to anxiety, to denial and despair. :) After a couple of weeks of building various mock-ups we came to the conclusion that it was simply not going to work. I was actually trailing behind our website developers by about one week: at the time I was excited they had already reached the denial phase. But by the time I came around and started having doubts about using the ribbon for website navigation, the guys came back to me and said: "No, wait! It's going to work! Check out these wireframes... "

We then spent many hours populating the ribbon with tabs, groups, items; giving special attention to the overall hierarchy as well as carefully crafting each individual title, label, description. We wanted our navigation to have a no-nonsense vibe to it, so we stayed away from cute or catchy terms and phrases.

We are quite happy with the final result. However, our website visitors are the ones who have the final say on whether this experiment was a success. What do you think, does it work?

 

Posted to I Build, Therefore I Am by miljan

Posted on Thu May 3, 2007 @ 9:14 AM

Filed under: , , , ,

Comments

Posted on Thu May 3, 2007 @ 9:14 AM
Everyone (including me) in my office thinks its pretty darn cool!
Hoang
Posted on Thu May 3, 2007 @ 9:14 AM
Your new menus are awesome! They are very different and definitely eye catching. Are you guys going to let us know how to implement one like it?
Posted on Thu May 3, 2007 @ 9:14 AM

Miljan over at ComponentArt is looking for some feedback on using an Office 2007 Ribbon style for thier

Jurgen
Posted on Thu May 3, 2007 @ 9:14 AM
Does the ribbonbar comply with the Microsoft OfficeUI specification? I am concerned of using an interface component that does not comply with the full spec: http://blogs.msdn.com/jensenh/archive/2006/11/21/licensing-the-2007-microsoft-office-user-interface.aspx Are you a licensed OfficeUI partner yet? http://www.microsoft.com/presspass/features/2006/nov06/11-21officeui.mspx Jurgen
Posted on Thu May 3, 2007 @ 9:14 AM
Looks great - this has been one of the first times where I was able to easily find the component I was looking for, and how to download/purchase them without wading through a bunch of menus. The effects are nice, too. Great job!
Posted on Thu May 3, 2007 @ 9:14 AM
I'm glad to see the ribbon getting embraced. I think there's a lot of potential with the design, and I'm impressed with your implementation. To mitigate the risk, I would recommend providing a very prominent option at the top of all pages allowing the user to select their preferred navigation style. Then cookie the preference of course.
Posted on Thu May 3, 2007 @ 9:14 AM
Thank you very much for your feedback everyone! It's great to get this kind of confirmation from our users. Thank you for the plug on your blog ScottW. Jurgen, yes - we are a licensed MS Office 2007 UI partner. Jeff, the thought of providing an alternate navigation system is interesting and it had crossed our mind, but we decided against it. We thought that selecting the right method for navigation was the responsibility of website developers - not the user.
andy p
Posted on Thu May 3, 2007 @ 9:14 AM
what I really like is that none of the alt tags contain data, plenty of table action and styles in tags rather than those silly css sheets. makes it easier to read the source for ideas.
Michael
Posted on Thu May 3, 2007 @ 9:14 AM
I like your new ribbon menu; can you give us a tutorial on how to do it?
Posted on Thu May 3, 2007 @ 9:14 AM
Our ribbon navigation was implemented through ComponentArt TabStrip, MultiPage and Menu controls. Publishing a detailed tutorial on how this was done is a good idea, I'll run it by our developers and see whether any of them would be interested in writing it.
Posted on Thu May 3, 2007 @ 9:14 AM
I understand that the ribbonx features works for "desktop" apps, but how to you plug this into a C# web application?
Calvin
Posted on Thu May 3, 2007 @ 9:14 AM
I am infatuated with the ribbon navigation on your website. Regarding publishing a detailed tutorial done by your developers: Can I interest them in cash or a Starbuck's gift card? Seriously, I would pay to have a detailed tutorial like a Camtasia or any Screencast of how this was done. Thanks!
Trent
Posted on Thu May 3, 2007 @ 9:14 AM
Seriously. Waaaay cool. As the live demos don't quite fully implement your ComponentArt.com ribbon, any chance you can release the source code for it? I'd love a full tutorial but that could take a while so let's at least put the source out there so we can learn from that. Thanks :)
Posted on Thu May 3, 2007 @ 9:14 AM
Thank you again for the praise everyone! I agree - including a full-blown example of the ComponentArt.com ribbon into the Web.UI demo package would be quite useful. We will try to do this for the upcoming 2007.2 release if at all possible (time-wise).
Posted on Thu May 3, 2007 @ 9:14 AM
I need the Componentart.com Ribbon Menu Code so please if u give us the Code for that then its very help full to us regards feroz
Anonymous comments are not allowed. Click here to log in or create an account.