Highlights of a Revolution

Valuable design principles like symmetry, consistency, and simplicity are all part of the idea I am about to share with you. I will be talking about highlighting and selection graphics on the SUSE/KDE desktop. Why? Because this is a subject that not many have talked about and when it comes to designing this aspect of the GUI, many just follow what the precedent has done. I am not here, however, to tear down anyone's effort to make these graphics, but rather, give a personal explanation and solution based on the three design principles aforementioned.

I believe that as SUSE embraces a different idea about highlighting and selecting, they can leave a palpable trace in the world of GUIs. Yet another aspect that can make SUSE "highlight" itself as a very unique Linux distribution and a viable solution for anyone's computing needs. The KDE desktop does not seem to have a clear idea of what they want to do with selections, they rather take ideas from everywhere and put them on the desktop. There is lack of consistency and direction. It is time for a revolution.

But first things first. An analysis of the current design ideas on different desktops. Here are some examples from Windows, Mac and SUSE on the way they currently handle highlights and selections.

Although this is an extra settings, Windows can add a check mark box beside an item. At the same time, this image shows how there is a selection, and a hovered item. Selections have a darker tone of the same color family, in this case, blue.





This one comes from the redesigned windows panel and this image shows two different colors. The blue is the current hover/selection and the orange one is a different kind of selection, probably a new item or one that needs attention.







Mac OSX also has a few ideas on highlighting. I have to say that Windows and Mac have a lot in common when it comes to consistency about their highlights and selections. They have a very consistent coloring and color identification for the items used. But it seems to me that OSX has a reduced amount to highlight and selection options. A more concise concept.

I am sorry that I could not find a better example of this, but here is one. Icons in OSX on the desktop only get highlighted on the tittle name. Sometimes these icons have descriptions, like the one above, in which case anything other than the file name do not receive the highlighting.

In this piture, there is a multiple selection going on. The selection is pretty much the same in all the OS's that I have used. When you choose multiple items, with the mouse pointer, a rectangle appears which selects everything that it covers. In OSX you see 3 elements of selection/highlight: The selecting rectangle created by the mouse pointer, then the OSX file name highlighting, and finally the application icon highlight, a gray square over the selected icon and about the file name. Additionally, and this is present in Windows as well, there is a place selection on the right location menu.

openSUSE also follows a few ideas conceptualized by Windows and Mac OSX. Probably because Linux is an OS brought about after Windows and Macs had already set foot. This is not an accusation, by the way. From the 3 OS's in question, it seems that openSUSE has the most selection/highlight ideas on the desktop. Here are some, there could be more but I can't think of any other.

  
This is Dolphin's idea for last selection, an underline. Dolphin also features hovering just like Windows, a lighter shade of the selection color. In this case it is light blue.

The the next one is panel button highlighting. This is very similar to the latest Windows 7 panel highlighting. A glow or light that shows on hover for the selected icon.

Here is a window highlight for the current window present on the desktop. A blue band that tells you that you have this one window selected (personally, I do not like this because it is an extra visual idea that is already set forth by the sole presence of the window in the front of other windows. It must be because I am working with this window).

This is probably the one I like the least. A frame going around the hovered item. The frame does not change into a solid color as it happens in the folder selections within Dolphin.
The selection on the Folder View Widget, I think, is one of the most elegant of all the present on openSUSE. It is simple, very non-distracting, it does not divide selections with different colors like multiple selection does in OSX for example.
Menu items hovering in Dolphin, and just any other KDE 4 application, shows a fade out near the right end of the hovered item. This time, the selection coloring takes after the color set forth by the window. This is, I think, very consistent. It shows users in a simple way that they are working with something foreign to icons. The selection is done inside the menu and does not take the coloring from side to side like OSX does with its menus. KDE's does not touch the menu edges, neither does it touch menu item separators. Additionally, KDE's menus underline the first letter of each item on the menu. If you press the underlined letter, then you select such item.


I really don't like these two very much. On hover, you see the light blue but at the same time a popup image shows you the items contained inside that category. The highlight is good, but the popup gets to be annoying after a while. Can you see how it hides the rest of the System Settings items?

This one has to do with buttons and drop down menus. The button features a blue frame for hover and selection and the drop down menu item keeps that blue on it as it is hovered.

And here is the one created by the Plasma team. A similar idea to other items on KDE. Selections and hovering do not touch menu edges, it take over the whole area around the selected item.

The ideas that go around different OS's and the way the represent highlighted and selected items differs greatly. Not to say that this is a problem. I believe it is rather a strength. OS's dare to be different and they seem to be more interesting to work with. Simplicity is something that I value, I believe that openSUSE does not have this simplicity yet. The KDE desktop features a few ideas that can be used across the whole platform. I am not saying either that OSX and Windows treat this better.

A more centralized highlighting system should be in order to make sure that applications, menus and icons respond similarly to hovering, highlighting and selecting. Fewer options that mean selection would be better, in my opinion. The varied array that the SUSE/KDE desktop shows seems inconsistent. It comes across with the point but it could be reduced.
Next is the problem of selections and the number of selections made. Single items are the only ones that receive hovering, whereas multiple items do not receive any hovering, you can only select them. Then what is hovering for? Selection of multiple items is also done through key combinations such as using Control for multiple individual items and Shift to select all items within a range. However, I do find that I select more individual items than a range of items. I spend most of my time selecting with Ctrl key rather than Shift and if I need a range of items then I selected with the mouse pointer or simply do Ctrl + A to select everything. Then, if I want to take items out of the selection range I press Ctrl and click on the few that I do not need to work with.

Finally, there is the concept of symmetry. Symetry gives the impression of order, good organization and tidiness. But Dolphin File Manager got this symmetry very well in the beginning, but it ended up creating this optical illusion when many icons were selected. http://www.michaelbach.de/ot/lum_herGrid/index.html#

So, KDE guys decided to change the selections a little bit and came up with this:

 

Perfectly fine, right? The optical illusion is gone because of the spacing. Look at what happens when the icons are smaller than tittle ans icons.
Symmetry in Dolphin is lost.

Possibilities
Here are some of my ideas about what selections could be like. Here is the revolutionary treatment for selections. These are not perfect, help me make them better. Your support is important.

Enter a selection mode. Whenever you are working with many items the file manager can show you, among other things, a "Selection Mode" where you can click on each possible selection method and work freely with your items.


 
Selection with helper icons upon hover. I would actually do away with highlights. let the mouse pointer have extra power and it will seem more natural to just locate the mouse. Provided that the pointer has within it the ability to alter elements underneath it. Another suggestion would be to do away with popups. Elements in the desktop can be worked a little extra and would be able to become self explanatory through the use of explanatory labels for example. Or even better, if the user seems to take less time hovering and just clicks items, make KDE realize that the user already "knows" what the icon or elements do, therefore popups can be done away with after a while. Also, avoid underlining, it really looks out of place. Again, empower the mouse pointer.
Finally, take ideas from the Plasma desktop and place them on the applications. Highlight with glows, they seem natural and can be worked to be very beautiful.

About buttons, follow daily-life examples. They can be quite elegant. For example, elevators. Here are some pics:







Written by

5 comments:

Rawler said...

Nice overview, somewhat thought-provoking. I especially find the disparity between selections in different contexts troubling. One of my key criterias for an appealing user-interface is consistency, and this breaks it pretty bad.

In general, I feel quite a disconnect between look and feel of plasma-parts of the UI, and the rest of KDE. I think it's a problem (albeit small), and should be addressed in a release soon.

Meanwhile, I think anyone interested in desktop-system user-interface design should have a look at http://www.hci-matters.com/blog/2007/06/16/archives/8/. Part2 gives a quick example, while Part1 goes through the underlying theory of a IMHO BIG problem with the last 15 years of UI design.

Anonymous said...

Fascinating... Windows gets an option for easy file selection with checkmarks, much in the way old file managers (e.g. like XTree) did 30 years ago!

Windows Explorer is particularly annoying because is one of the most used parts of Windows, so it has a huge impact on usability...

On a related subject -- actions on a selection -- I noticed a curious problem in KDE 4 yesterday (in Mandriva 2010.1): when dragging (& dropping) a file on the desktop with Ctrl pressed, one expects a copy of said file to be produced.

It works that way in 3.5 (in Mandriva 2008) and even in 2010, inside Dolphin. Oddly, it just moved the file in "Mandriva 2010.1" KDE's desktop.

If not for any misconfiguration on my part, it seems something could be improved...

Unknown said...

"when dragging (& dropping) a file on the desktop with Ctrl pressed, one expects a copy of said file to be produced"

the desktop is not a folder. it is not a file manager. it is not a disk.

if you drop files to a folder view on the desktop (and you can set the desktop to be a folder view in the configuration if you wish), then you do get a copy.

Anonymous said...

> if you drop files to a folder view on the desktop (and you can set the desktop to be a folder view in the configuration if you wish), then you do get a copy.

Well, living and learning... many thanks...

You and your KDE fellows, please keep up with the excellent work, which is much appreciated.

Unknown said...

Telling which window has focus just because it's in front is an assumption based on your personal way of using your desktop.
I'm a big fan of "focus follows mouse" and often type in a partially hidden window (i.e. not in front) and I like the idea of having a visual way to tell where focus is. Obviously I alredy know where it is, but it's clearer when it's visually emphasized.

As always, thanks KDE for the great configurability.

However your article makes some good points.

JMTC, jco