This space is available to any ComponentArt employee to write about anything.

Wake Up and Smell the Ribbon!

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?

 

Share this post: email it! | bookmark it! | digg it! | reddit!

Posted by: Miljan
Posted: Thursday, May 03, 2007 9:14 AM


Comments

Steven Berkovitz said:

Everyone (including me) in my office thinks its pretty darn cool!
# May 3, 2007 11:08 AM

Hoang said:

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?
# May 3, 2007 5:45 PM

Ancora Imparo said:

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

# May 3, 2007 7:30 PM

Jurgen said:

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
# May 3, 2007 11:39 PM

Nicolas Webb said:

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!
# May 4, 2007 5:36 AM

Jeff Handley said:

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.
# May 4, 2007 6:02 AM

Miljan said:

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.
# May 6, 2007 8:29 AM

andy p said:

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.
# June 13, 2007 4:49 AM

Michael said:

I like your new ribbon menu; can you give us a tutorial on how to do it?
# June 14, 2007 8:26 AM

Miljan said:

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.
# June 27, 2007 9:17 AM

Chris said:

I understand that the ribbonx features works for "desktop" apps, but how to you plug this into a C# web application?
# July 20, 2007 1:32 PM

Calvin said:

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!
# August 22, 2007 8:08 AM

Trent said:

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 :)
# September 13, 2007 6:13 PM

Miljan said:

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).
# September 14, 2007 11:33 AM

feroz said:

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
# April 29, 2008 7:39 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Industry Friends
Rob Howard (Telligent)
Scott Watermasysk (Telligent)
Michael Schwartz (Ajax.NET)
Hamid Shojaee (AxoSoft)
Scott Cate (myKb.com)
Steven Smith (ASPAlliance)
Wally McClure(ASP.net Podcast)
Vassil Terziev (Telerik)
Andrew Flick (Infragistics)
Tony Lombardo (Infragistics)
Ken Cox (Freelance Author)
Lino Tadros (Falafel Software)
Robert McLaws (Interscape)
Blogs On This Site
Thoughts on web user interfaces and component development.
Ramblings of a web control developer.
Web.UI news and more
Next weeks guest: A dog and a baby dog!
I'm in your base, killing your dudes.
Absurdity is it's own message.
Musings of an ex Java developer
im in ur page, hackin ur codez
ComponentArt in the Community
... and the program ran happily ever after.

Tools / Utilities