Blue Blazer

Achieve perfection by constant effort and creative will.
Code every day, no matter what...

Ribbon UI , Korat UI

Hello, i've hesitated to put this blog post on KDE, afraid being told this is a crazy idea.Finally i'm open for challenges, at least this post shows an idea.

Plasma is maturing, more widgets have been added. As a result it enables some other possiblites.

Recently i've seen the beauty of Ribbon UI in Office 14 and Windows 7.
And googling the Ribbon UI on Linux, found two implementations:
GTK# version in Mono:

It seems to be (maybe intended to be) 1-1 copy of M$'s Ribbon UI, where's their creativities?

Vtk designer's menustrip:

Looks OK ,and that's all. It's just bigger icons on a bar.....

Not satisfied with the above two, i'm writing my own:

My Korat::MenuBar's Features:

  • Adaptive layout according to width (use own greedy relaxing algorithm), similar to M$'s Ribbon UI.
  • Users are very easy to wrap their graphics widgets to be adaptive layoutable. You just need to provide only three other functions (typedef QList WeightList;):
    • QList availableWidths();
    • qreal getWidth(const WeightList &);
    • void adjustWidth(const WeightList &);
  • Use plasma extensively: theme, palette, Plasma::IconWidget, Plasma::LineEdit etc....,
Pics comming....
Widest:

Medium:

Narrow:

Too narrow, scroll button appears:


Also i'm thinking of bringing more powers and beauties of plasma and graphics model/view to normal widget based application, so i start a Korat UI project(plan):

Its goal is to provide a normal QWidget - Korat::MainWindow,
which correctly provide a view on a QGraphicsWidget - Korat::MainWindowGraphics

Feature plan of Korat::MainWindow:
  1. Fully QGraphicsWidget based, goes deeper on the way that Plasma::Dialog do, correctly manage the layout for you (handle spacing, margins, theme change etc...), It's auto themed according to your plasma theme, provide animated layout(Kinetic ?), and other animation effects.
  2. Integrate KRunner into the main window. Application and its plugins can provide its own krunner plugin, the main window manage/merge them, To quickly search this application's actions, help info, quickly tag the document etc... anything that krunner can do. (You can see from my above pics, there's a filter button and a lineedit besides the tabbar, that's it).
  3. Ribbon like menubar as i mentioned above, but merge the application and its plugins' sub actions( maybe need to extend kde's xml gui somehow )
  4. Provide optional Drawers on four corners of central graphics widget, optional Docks on four edges of central graphics widget. Manage their position,size,layout to ease your programming .
  5. A statusbar(notification area) on bottom.

The Korat::MainWindow's base architecture is done and the Ribbon like Menubar is nearly finished (some scrolling bugs not fixed yet).

Future plan:
  1. brainstorm and implement the Drawer, Dock, StatusBar.
  2. Port(hack) my own version of KJots to use this UI, since it's one of my favourite KDE application, so it deserves to have a beautiful and easy to use GUI.
  3. Experiment XML Gui support.
Source code under trunk/playground/base/plasma/widgets/koratbar

Thanks for reading, finally a pic for "korat“ , kudos for plasma developers.

41 comments:

leinir said...

i for one applaud this effort! The FluentUI team put a huge amount of work into defining just how in particular the Ribbon should work, and after you get past the knee-jerk "Oh no, it doesn't look like my early-90s toolbars!" reaction, you start realising just how well the concept really works. So, again: Good job! :)

agateau said...

Interesting stuff, I have always been fan of the Ribbon. I am not sure using Plasma widgets is a good idea for consistency though.

And the name Korat makes me think of a KDE version of Borat, but maybe I am just weird :)

2tos.oYZqe35g2_CWqRHREcapyTxiq8Hf5iGrocX said...

I really hate the ribbon as used in MS Office, but I'd love to see it used in KDE applications.

Looks very good, but the MS ribbon is context-sensative and has buttons are like menus.

Wang Hoi said...

The context-sensative thing is not hard to implement,
What i plan is when you select/edit something ,there is context menu/tab.
Moreover, when you performe krunner query.
It's also context sensative.

jstaniek said...

I am interesting in this implementation for Kexi.
(http://www.kdedevelopers.org/node/2955)
Obvious requirement is: small dependencies (mostly kdelibs) and keyboard access + accessibility.

Also, the Vtk designer's framework appears like supporting groups and layed out buttons, rather contrary to what you mentioned (i.e. not just bigger icons on the bar). Have you performed research on their file format (XML?) defining the bars?

(It would be cool if you can contact me at staniek@kde.org, TIA!)

Anonymous said...

As far as it is an option...
Beauty? Maybe. Usability? I'm in doubt... I used msoffice some time ago and the ribbons are a really headache. They look ok, but are not usable without a really difficult learning curve, and that's the main problem: if you need to gain a PhD in order to use a shiny new interface... well, I'll use the ugly but quick.
Don't get me wrong: more options are good, but I always prefers the "useful" options, even if they are ugly (openoffice.org over koffice, for example).
Fist the use, then the user friendliness and only then the beauty.
Go on, if you feel it will be good, it will be good (at least for you... ;) ), but don't forget that someone will use those ribbons!!!

Anonymous said...

I just know that I dont like Ribbon and I dont know anyone who likes it what they have used it on the MS Office 2007.

The normal toolbar offers more space for buttons if needed and clear way to get hands to multiple options when needed.

Look Koffice2 and IBM Lotus Domino, both use sidebar for actions. That makes more sense for me and I have noticed that I like much more the sidebar than ribbon. But still I like more the original toolbar.

The reason to toolbar exist ain't that no one got better idea, but because it was best for all applications. The ribbon works on office application but it sucks on drawing application etc. You can not use ribbon on music player or on the videoplayer. And when you end up to have multiple different UI's for different applications, you have already lost the war of better usability.

Apple does not need to invent new layout at all, because they have global menu. MS can not copy that but we could. You get clean simple easy to use toolbar for all applications trough XBar (and similars) and you do not need to build somekind wierd toolbar like ribbon (ribbon is actually a new toolbar, not a new menu).

We should focus to choose best default buttons on toolbar for all KDE applications. Polish the menu order and think better way to open pop-up dialoges etc.

I dont say that implenting Ribbon is bad, but it should be used only for study purposes to find out possible better way. As far I have now used MS Office 2007 since it came out and I have forced to use it (I would like to get the old menu or use other application) I have just grown up so much for the MS way to redesign UI totally when competitors are having same features on their application. That is just building a vendor Lock-In.

We have now big userbase with current interface, why to throw that away?

Wang Hoi said...

I also note one of ribbon's problem:
Sometimes hard to find the command.
So i add the krunner integration,
It suppose to be able to work in two mode:

1.type the keyword, eg. save, then current tab's all save related actions are highlighted/blinking. so you know the way.
2.type the keyword, context tab is added, related actions are grouped under that tab. Just like the traditional KRunner way.

@jstaniek:
i've played with vtk designer (GCF) 's menu strip,
Ribbon's one key feature: adaptive layout , it lacks,
It's size fixed, i doubt whether user like to "scroll" to see all commands.
about the file format, that's to be considered in future, my basic thought is to be somehow similar to existing kparts xml gui, sorry not seen vtk designer's ui file format.

Andreas said...

Vtk Designer's menu strip comes from GCF, the Generic Components Framework (dual licensed). It is quite similar to KParts in concept and Qt based. I know that its maintainer is interested in working with KDE; he gave presentation on GCF at Akademy 2008.
AFAIK they are *also* working on an improved menu strip.
I think it's a good idea to get in touch with the GCF team: http://www.vcreatelogic.com

Anonymous said...

The ribbon takes lots of space from the most important part, the application window. Traditional menu can be sqeezed to small size and you still have all buttons. Not with ribbon.

jstaniek said...

@Wang Hoi: yes, the search+highlighting feature is the way to go for me too. So yeah, your development is well welcome. Moreover, as for tabs, I think about having animated tabs like these black in the KDE menu. Would it be possible to reuse them?

ivan said...

Congrats for this, although I'm not exactly fan of the ribbon UI (far from that - it takes too much space with IMO no advantages, especially on wide screens).

If you could make it vertical (an optional feature, obviously), for a sidebar for example, that'd be something even I couldn't complain about. :)

Anonymous said...

Anon said: "(...) I dont know anyone who likes it what they have used it on the MS Office 2007."

I love it! 2007 edition just simply rocks, I can find edit options 2xFaster in 2007edition then before.

Anonymous said...

I'm not sure if you researched Ribbon UI, but Microsoft has a license on any Ribbon like UI.
http://msdn.microsoft.com/en-us/office/aa973809.aspx
Since you mentioned Ribbon by name you can't even claim that it was a clean-room implementation.
Any office like application that will be using it will be violating Microsoft license.
Trolltech devs had Ribbon implementation in Qt. The reason it never went in Qt is because Microsoft license on that UI is obviously not GPL/LGPL compatible.

So while you can try to use it in some less known application hoping that Microsoft won't sue you, it's obviously impossible for any well known applications/frameworks (like KDE).

David Mills said...

@Anonymous:
In what way does Microsoft own the concept of a Ribbon. It isn't an action, so it can't be patented, and unless Wang Hoi has spent time studying the Microsoft implementation, his work is clean room too.

Notice how your link doesn't specify what you are licencing. Since no code is provided, it can't be copyrights. It isn't a logo, and as such can't be trademarked (although the term Ribbon can), and no where is a patent application number specified.

This license is just a trap which offers nothing in return.

jstaniek said...

@Anonymous: it's obviously related to patents. Whether you can ignore patents on User Interfaces differs from country to country. Hyperlinks and menus on web pages are also patented, BTW. Yet this does not stop to develop relevant FOSS software offerings. *GPL until v3 was patents-agnostic IIRC, now it asks you to unlock your relevant patents _if_ you have them.

The problem _for MS_ is possibly that backers (SUN, Redhat, IBM?) of FOSS have patent pools that could hurt MS heavily too, so they sit in silence. (TomTom is apparently rather smaller kid that only recently tried to join some FOSS organization formally, but too late...)
That said I've yet to see RedHat/Sun/IBM acting as supporters of a UI-related FOSS project, when somone sues for patent violation, so it may be true that thee big names are not quite even interested in anything than servers/backends/middleware software.

Anonymous said...

I don't like the rubberband much:

- it is not adapted to wide screens. The best exemple is MS Word where the canvas is filled with empty space around the page.
I'd prefer a vertical docker, like in Koffice2. It's much more space efficient.

- if the position, size and icon/text change each time the size of the window is changed, then it will be harder to find a feature. Even if the user find a size that please him, he may need to change the size of the windows because of its content. I think it should stay static.

Here are the advantage that the menu, toolbar and docker have IMO:

menus
- the distance that the mouse has to cover is smaller (and mostly vertical).
- since they're static, they are good for learning, tutorials...
- it's easy to search for a feature when you know its name.
-it take almost no space when not used.

toolbar
- all icons are quickly clickable
- easily configurable.
- you can show only text if you want, the user choose the layout.

dockers
- dockers can be moved independently where the user want, and can be a floating window (good when you got more than one screen).
- docker can be contextual too, see Koffice2.

So I don't think that the rubberband UI will ever beat the flexibility and learning curve of the menu+toolbar+docker combo.

Anonymous said...

I love the ribbon in Office, and it would bump up the rock-factor of KDE 100 %. Go on give it to us!

jstaniek said...

BTW, regarding the question "when the prior art is": http://www.kdedevelopers.org/node/1617
This is my old though that has been reused on the Wikipedia page http://en.wikipedia.org/wiki/Ribbon_(computing) in the meantime.

"Attempts to be issued or enforce such a patent would probably face examination under the guise of In re Bilski and a thorough study into prior art."

BTW2: there are other ribbon-like implementations outside MS, e.g. http://www.pushing-pixels.org/?p=412 or some commercial clones http://www.componentsource.com/features/toolbar/net-components/index.html

Anonymous said...

"It seems to be (maybe intended to be) 1-1 copy of M$'s Ribbon UI, where's their creativities?"

It's GNOME. In particular, it's Mono. Neither group is capable of being creative.

Anonymous said...

don't like the ribbon
it's take too much space,
loose to much time to access function

Anonymous said...

First, I like ribbon UI. I like mac osx style menu bar too. Ribbon is menu + toolbar combined.
So, please consider how to handle both cases.
Also, it would be great to set a single place in KDE, which chooses menu+toolbar or ribbon or vertical implementation etc for all applications. Since it is done using plasma one should be able to theme them. So, please make the xml format expandable to different themes.
Plasma + xml can push KDE beyond mac/win7.

blueget said...

I personally like the idea of implementing a Ribbon-like interface in KDE applications, it could be especially interesting for KOffice. I think it should be possible to arrange them vertically, and a real must-have is the option to bring back the normal Menu. Good configurability (especially the size of the icons!) would also be very nice.

Great Idea, carry on!

Anonymous said...

Well done! I'm using Microsoft Office 2007 and ribbon GUI is so logical and practical that I cannot switch back to office 2003. Never mind that general idea comes from Microsoft it was ingenious, despite the other trash they made.
I hope this idea will come to KDE one day! Keep up good work! Linux FTW!!!!
P.S. great blog design...

notanavragelosr said...

I haven't used Office >=2007 or Windows 7 enough to form too much of an opinion about it, but I do have some thoughts about your pending implementation:

1) As others have said, please make it so that the menu can be along the side (as in, vertical orientation). On my desktop, I have enough pixels to spare vertically. On my netbook, I'd much rather have such a menu off to the side, since I only have 600 pixels vertically.

2) Please make it so that the last tab/menu/whatever retains focus after selecting an action from the ribbon. I used Word 2007 once to make a flow-chart, and it was infuriating having to navigate to through the ribbon every time I had to add a new box/line/$OBJECT. The Krunner integration should alleviate that pain, but I'm sure some die-hard mouse users would appreciate focus-retention.

Otherwise, looks good so far.

Anonymous said...

To my mind you should really have an eye to what Kirill Grouchnikod's is doing on his Swing(java) components suite Flamingo (https://flamingo.dev.java.net/), he's been working on it for quite some time and he is a really gifted developper.
Someone a few posts up dropped a link to a post in his blog, but there more posts about this subjects in it. http://www.pushing-pixels.org/?cat=9 for his posts about the ribbon.

Anonymous said...

Just came here to mention that Microsoft has patents of the ribbon style menus. In other words, it's certainly very thin ice if a company implements something like that. It's not really different for free software.
But others said that already.
Unfortunately...

Anonymous said...

Patents? Show them, or I don't believe it.

Anonymous said...

I think the problem with toolbars or ribbons, is the button is too far away from the action - let say you are creating a document, after so much typing you are near the bottom of the window, you want to make the next word bold (or whatever) - locate the top of the window, locate the likely tab, locate the scroll bar, scroll, locate the bold button.

Some posters on KDE Look have come up with better methods, although a bit frightening at first:
right mouse context menu, about six menus circle the cursor (the centre being cancel/do nothing), move towards one of the menus and about six sub-menus open out;
hover over the word/object and vertical scrollable menu appears;
etc.

Anonymous said...

Screens are getting wider, not taller. We need more vertical toolbars.

Anonymous said...

implement something like kinetic scrolling left/right (with thin(several pixels) scrollbar, would allow to make ribbon very very long + position memorization for usability), vertical mode , customization option, and smooth resizing to toolbar height (with label hiding, turning it eventually into classic tollbar) would be cool

Wang Hoi said...

It's clean room implementation, written from scratch, so i don't think M$ can sue me for it.
Btw, the GTK# version is planned to use in Mono Develop, so M$ will sue Novell first :)
Transparency in buttons is a patent, but any OS has buttons that can be transparent.
And reverse engineering something is OK, eg. coreAVC's linux port doesn't violates any patents. And it's not reverse engineering, i just use my eye only to observe how Office 2007 behaves when i resize it.

Blackpaw said...

I hope to see it become common in KDE myself, would love to see KOffice with a ribbon bar view.

When I first heard all the horror reviews of the Office 2007 ribbon bar I presumed it was another MS ui screwup. But when I actually tried Office 2007 I wondered what all the fuss was about, I quite liked it, found it easier to find stuff than with the old office bar/menus.

But the clincher was my wife - she's a long term office user, not a programmer/geek and very conservative when it comes to new stuff on her computer :) But she loved it

Sunil K said...

ribbon is great, and I really like your efforts. I wonder how well it will work on smaller screens, or touch screens. Both of which seem to be getting popular lately

Anonymous said...

First off, love your blog theme.

As for the ribbon I can't stress enough how much i dislike it. I come from a slightly different perspective though. I have never used it on MS products, however the makers of AutoCAD, AutoDesk, have been using concept on their software for about 2 years now. Let me tell you, it adds clicks and confusion to a user interface I have used for many years. I am an AutoCAD expert and provide customization and general support with the program, I am by no means new to this software in any regards. From a productivity perspective the ribbon is detrimental, from an aesthetics standpoint it has potential to be beautiful. I can't stress enough that if this concept is to be used that an alternate more traditional method be maintained.

With that being said, I'm sure you'll take questions comments and concerns into account and not just create something beautiful "because" like autodesk has done. If their programmers were users and not paid employees they would certainly have abandoned the ribbon long ago.

also... while i'm on it... i always here people bad mouthing MS. well.. much deserved, some not, but Autodesk... how about software subscriptions that cost thousands per license? Don't subscribe? well... upgrading will cost more, and soon... we wont let you "upgrade" you'll have to purchase a full version. Got out of the industry? want to sell your license? not allowed... i could go on. :(

Anonymous said...

I think we can all agree that if we can have the traditional interface or the ribbons as we wish, it shouldn't be any problem, and as some people like it very much the user experience would be better in general.

I personally like the Idea very much, and the resizeability is a big plus compared to the traditional menus/toolbars. If we get the possibility for vertical alignment, it would be perfect.

Anonymous said...

What I disliked immensely about MS office's ribbon interface: sure, it's a what-you-see-is-what-you-get method and doesn't hide anything, but half the time you don't even know what you're looking at or looking FOR. MS Access in College was a nightmare for this.

It does feel far too space-consuming for me. If a ribbon-like interface be integrated into KDE at all, MAKE IT OPTIONAL!

The reason why the current toolbar UI has survived so long is the same as the reason for the keyboard/mouse surviving: the toolbar is easily one of the best methods of giving users quick access to actions. Simple as that.

I'm also a huge fan of the way Koffice 2 is heading. It gives me the option to show anything I need, hide anything I don't and store away anything I only really use on few occasions (in the form of named tabs) (though maybe that's a little biased, because I am also a fan of the new flake shape system: it just seems so genius, I don't know why no-one else has thought of it before...)

Sebastián Benítez said...

Ribbon sucks big time. Uses too much vertical space (lcd monitors are wider not taller) and makes actions difficult to identify. Sure it may look nice to some, but not all people would like it. Plus an idea copied directly from Microsoft may trigger future patent issues.

Still, if the man wants ribbon, ribbon he will have. So go ahead and implement it, but at least improve the original concept to make it suck less.

Wang Hoi said...

Thanks for your feedback. I'm redesigning it.
Respect the adavantages of old style toolbar.
To make it:
1.Providing Classical mode : the old style toolbar: small buttons in a row, cost less screen height, but tabbed and still can be quickly searchable,
2. Able to be vertical.
3. Floatable.
4. Provide firefox style drag support.
and make nearly everthing draggable: button/group/tab page ...

And it will end up (to be more powerful/usable) and far different with M$'s Ribb0n interface,
and satisfy both traditional toolbar users and ribb0n ui users.

Korat Draggable Dockable FLoatable Adaptive Layouted Toolbar

KDDFALT

what said...

To you legal retards talking about patents, stuff it. I have the patent on stupid blog comments and you're infringing.

To you ribbon complainers, stuff it. This guy is making free gui software, and he's not asking if you think he should make it. It has its place because people unlike you want it. So since you don't want to be here, go find another blog to drown in.

To you horizontal space retards, guis like this can work on their side too. F'cking geniuses.

To you microsoft haters, the people behind the microsoft software you hate so much have achieved more success in their careers than you ever will, and its because they make things people like. You just comment on things YOU like. You don't even make anything, you just talk loudly about your niche.

To Mr. Blue Blazer, keep up the good work.

Anonymous said...

I'm still dubious about the ribbon thing - can't decide if i don't like it just because its different from what i know or whether its actually not that great... though an option to be vertical makes it much more useful imho, using office 2007 on a wide screen leaves you with a ribbon... of visible page!
Nice to have an alternative to endless drop-down menus - i think what makes or breaks it really will be what is put where in a specific program. Also krunner integration sounds like a very good idea (i know the Gnome ppl were looking to integrate gnome-do functionality into regular gtk apps).
Have pure keyboard navigation would be a good idea, so for example you hit a key combo start typing "format" and then you can navigate to "format paragraph" without leaving the keyboard.