3

I'm designing a web application which has a large number of commands and customizations, with many more to come in the future.

I've read a number of things on usage of the ribbon, from MS's guidelines, to a long series of videos by the original Office 2007 designer on their motivations for doing so, etc.

From what I can tell, you should consider a ribbon if you have a large number of commands, and a large number of commands tied to a specific context for document creation. That I believe I have.

As a side note, I don't EXACTLY have a document creation scenario. I have a document creation scenario (RTF level, not full-on MS Office level) surrounded by a larger data structuring and navigation scenario. It seems that the ribbon is still appropriate here but it seems worth mentioning.

However, what I haven't really seen is whether or not it's considered bad practice to use a ribbon UI for a web application for some reason I'm unaware of. Is it? Are there web-specific pitfalls I should be aware of?

Improve this question
1
  • Native Sharepoint websites use the ribbon. Then again, it's Microsoft. Example here.
    – SNag
    Aug 3, 2013 at 5:47

3 Answers 3

Reset to default
1

If you are building RIA with lots of features you have to use ribbon :). According to this discussion:

One of the main drivers behind the Ribbon was discoverability of new functions. This was driven by research conducted by Microsoft that indicated that a large number of most requested features for Word actually already existed in the product; the user simply didn't know where to find it.

There is also another point of view: Microsoft Concedes That The Ribbon Isn't Intuitive

I would say ribbon may help, but you should be careful, because it is so easy to add some visual noise instead of valuable functionality.

Improve this answer
3
  • 1
    Discoverability? Ribbon? If Discoverability and Ribbon were people, they would be duelling each other viciously with axes and spears.
    – Deer Hunter
    Aug 3, 2013 at 17:49
  • That article about the ribbon being not intuitive is more about the Office 2007 button that's since been abandoned not being intuitive. They are really 2 separate concerns. One doesn't need the other to exist.
    – jtheis
    Aug 4, 2013 at 3:18
  • However, that other link has some really good stuff at it. I can't upvote yet on this board, but you win.
    – jtheis
    Aug 4, 2013 at 3:20
2

I don't think that there are any web-specific considerations regarding the use of the ribbon. One somewhat relevant factor is that the ribbon is well-designed for the use of keyboard shortcuts which isn't as common on the web as on the desktop, but otherwise I think that all the usual considerations apply.

Actually Balsamiq uses a ribbon-like interface with much success. It's not exactly the standard ribbon, since the top-level menu is also present, and the "ribbon" part only lets you select controls, but overall it's the same concept.

enter image description here

Improve this answer
5
  • 1
    I don't think that this is much like a ribbon type interface. It's a menu with a tabbed toolbar. A ribbon doesn't just have a tabbed toolbar with multiple buttons on each toolbar, it has multiple panels each with multiple controls on each toolbar.
    – Marjan Venema
    Aug 3, 2013 at 9:36
  • 1
    Um... What's the difference? :) Tabs are panels and buttons are controls. A ribbon is precisely a tabbed toolbar, nothing more. Beyond that the difference is graphics.
    – Vitaly Mijiritsky
    Aug 3, 2013 at 13:44
  • Ribbon is a hodge-podge of panels without a systematic menu.
    – Deer Hunter
    Aug 3, 2013 at 17:50
  • Yes, that's why I said "It's not exactly the standard ribbon, since the top-level menu is also present"... Besides, in MS Office they still have the menu under the Office button.
    – Vitaly Mijiritsky
    Aug 3, 2013 at 18:20
  • The point about keyboard shortcuts being important to the ribbon but also web-foreign was very useful.
    – jtheis
    Aug 4, 2013 at 3:16
2

The main problem with a ribbon on a website is the wide range of devices you (might) need to account for. The obvious problem is it won't work well on a phone size device, the the other problem is the size of a pixel unit (css px, or device pixel) varies greatly depending on the device. I've seen apps that work fine on an iPad but on an iPad mini become 20% smaller and that 20% makes a big usability difference (on some apps).

Ribbons strike be as being size sensitive: if the elements are too big it becomes clumsy and space inefficient, too small and the elements become hard to read and click. This might not be an issue if you're only concerned about the desktop, I don't think the size of device pixels vary as much there.

I any case I think a ribbon can be as effective in a website as in a native application, but the technical challenges may be greater (or maybe just different), especially around sizing and scaling.

Improve this answer
2
  • Ribbons are very "responsive" to screen/window size. a lot of effort was invested in resizing and relocating elements on it. You can try and see for yourself. Therefore, I think it can manage responsive design even in a Smartphone.
    – AsafBO
    Aug 4, 2013 at 7:24
  • 1
    @AsafBO - We still don't have nearly the precision for web layout that we do in a native app. For instance, determining the exact size of a pixel is still problematic on the web, but has been a non-issue in native apps for 25 years.
    – obelia
    Aug 4, 2013 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.