System Settings as a Design Lesson
Gestalt is a set of psychology principles which describes how the brain perceives visual information in a certain way. There are 6 basic principles: proximity, similarity, continuity, closure, area, and symmetry. Gestalt is one of the first set of principles taught in an elementary design class. Complex design relies on these principles in order to ensure visual information is interpreted consistently and efficiently. Errors applying gestalt often result in usability problems such as the user missing or misinterpreting information in a page.
Let’s use KDE’s System Settings UI as an example in applying gestalt.
This is the System Settings UI in KDE 3.5.9. In particular, take notice of the position of the category label and line/border embellishment.
Now, this is the System Settings UI in KDE 4.1.3. Look at the position of the category label and line/border embellishment and compare it to the 3.5.9 design.
Did you notice anything strange? The position of the line/border embellishment changed in the 4.1.3 design. At first you may not think this slight change matters, but this single minor change could force users to think harder when interpreting the visual information in the UI. Instead of immediately making sense, the user is forced to take an extra second to make sense of grouping and visual hierarchy.
For a better view for comparison, here are the two UI designs side by side, mocked up to remove any distracting and unnecessary information (left is 3.5.9, right is 4.1.3).
There are two ways you can analyse these UIs, in terms of object zones (area principle) or groups of objects (closure/proximity principle).
Here are the UI designs side by side, mocked up and abstracted to get a sense of information object “zones” on the category information level (left is 3.5.9, right is 4.1.3). In the 3.5.9 design, there is a clear separation of the objects; while in the 4.1.3 design, the reversal of the label and line/border embellishment create ownership competition and could conceptually make the group zones overlap.
Here are the UI designs side by side, mocked up and annotated to show the perceived groups of objects on the category information level (left is 3.5.9, right is 4.1.3). In the 3.5.9 design, the bold category label creates an upper boundary and the bottom line/border embellishment creates a lower boundary, easily creating the sense of an enclosed unit. The border also acts as a separator between objects. However in the 4.1.3 design, the line/border creates a separation between category label and its data, forcing the brain to work harder in order to put the two together and create a single object. Additionally, the lack of a separation between the category data and the next category label makes the brain work harder in order to separate the two in to different objects.
I wanted to use this System Settings example to illustrate how a single, seemingly simple design element can affect the entire design. I hope I have effectively explained why the 3.5.9 design is the better of the two. The 4.1.3 design forces the user to think a little harder in order to interpret the organization, instead of doing the work for them. The issue itself is minor and I really doubt users would mistaken the wrong label for the group. There are other factors involved in making sense of a UI than only the presentation. The point is, if we can make the design more efficient, why not?
Do you know why the design changed between 3.5 and 4.1? Was it an accidental change which arises from the implementation? Was it deliberate?
If I didn’t know anything about this particular application but knowing how software development sometimes happens I’d guess that the change was accidental and the developer responsible might not even have realised that they had changed anything.
Personally, I think the 4.x one is better. The line clearly (from my perspective that is) clearly marks that “everything between this line and the next line belongs to one specific category”.
That being said, I think the main problem with System-settings is something else: it’s cluttered and neeedlessly complicated.
At first, get rid of the advanced tab. Secondly, hide some modules by default (for instance, GRUB Editor) and only show them if the user explicitly tells the computer to show them. Thirdly, the settings of some modules should be integrated into others (for example, “Samba settings” should be integrated into “Network settings”, “Input actions” should be integrated into “Keyboard and mouse”, “Desktop theme details” should be integrated into “Appearance”).
What I’m trying to say is: the categories in system-settings need to be utilized better and more consistent (why is “Task scheduler” under Advanced/System while “Font Installer” is under “Computer Administration” when neither necessarily requires superuser privileges, and if su-privileges are required both could be considered “System” categories).
Hm, somehow I find the KDE4 version more clean and easier to decipher.
At least my brain had to work less ;-)
@Robert Knight: I don’t know why, but I agree with your assumption that it was probably accidental. It is very easy to miss minor details like this especially when you are intimately familiar with the design. Minor errors like this happen all the time when building a UI from a mockup/wireframe or rewriting/porting.
Your point is well made, and I agree with you in concept. I, however, am not convinced that it applies in this case. Looking at the two actual screenshots, I prefer the KDE 4 layout. I claim no expertise, but allow me to suggest what occurs to me.
The KDE 4 layout separates the category further (figuratively) from the icons. This I feel is a good thing. When I browse system settings, I will normally use 1 of 2 methods. I will either look at the category names, and then find look at the icons in the category I choose, or I will ignore the category names entirely. I never look at the category name after having looked at the specific icons.
Because I look at the icons after finding a category, the horizontal line draws my eyes down toward the appropriate icons.
There is no question in my mind that the KDE 4 layout is easier (for me) to use. The discourse above is, however, entirely speculation on my part as to the cause.
@Jonas - both of them have a line clearly delimiting the categories, no problem there.
The problem is that in the KDE4 version, this results in the description of the category actually being on the wrong side of the dividing line. At first look, the “About Me” and “Accessibility” icons seem to be labeled “Network & Connectivity” rather than “Personal”.
I *do* think the fading lines of the KDE4 version look nicer from a style point of view, but to serve their function as separators, should be placed *above* the heading, not as an underline.
@Simon
I think the reason why I think the KDE4 version is easier for me to grasp is this:
I’ve been reading books and articles since years and my brain is used to:
heading1
========
text
heading2
========
text
The KDE4 version more closely reminds me of that.
In the KD3 version I actually thought at first that the About Me icon had two labels: on right above it and one below.
I find the KDE4 layout much easier to read. Maybe because I’m used to seeing titles with horizontal rules under them. Seeing a horizontal rule above the title makes it look as though the title belongs to the section above. It looks awkward and out of place.
I completely agree that there are some usability inconsistancies in the transition from 3.5.9 to 4.1.3. However, there is I see no evidence to support your claim that the 4.1.3 interface is “forcing the brain to work harder”.
Part of the problem with getting interfaces right is in making design decisions backed up data with real data rather than conjectures. Never assume what is easier for the brain of a user. Brains are complex things, not to mention users.
I applaud you looking and thinking carefully about this. It does look like you spent a good deal of time looking at this issue and preparing this post.
I am no usability expert, but here is what i think:
I’d like to also say that because it is a common in written/typed documents to underline a title/heading, I find that the division of sections in kde4 works really well for me. because the line fades as well, it makes it look even more underlined, rather than a divider like in kde3.5
and so, i think that celeste would be correct if the line didn’t fade in kde4, but because it fades it has a different purpose — underlining the header rather than dividing the section
@Simon,
Take a look at any textbook on a given subject (or fiction or newspapers for that matter). What do you expect to find after the chapter (sub)heading? At a guess, a discourse about whatever the heading is about, right?
That’s what I would expect anyway, which is why the category description is exactly where it should be: where people expect it to be: _above_ “the chapter” if you will. And that is further reinforced by the simple fact that the heading is emphasized by being in bold compared to a plain font (at least by default). For better and worse, it’s a convention that the header is emphasized in some way and the KDE4 variety of system-settings does exactly that - no more, and no less.
It’s of course possible to break conventions, but you do it at your own peril (in KDE terms, consider “default container” vs. folderview. The latter breaks conventions, and thus: it has received quite a lot of criticism just because of that).
@Michael & David: Regarding underlined headers in print: the underline itself isn’t enough detail about the design you cite. It is possible (and likely) that other design factors are in play with the underlined header. For example, a clear separation of content sections (such as a larger header font or large white space between content sections, essentially creating a negative line — area/ground principle) would offset the separation the line creates between the header and the content. In the case of the System Settings UI, there isn’t much visual hierarchy. The labels are bold, but the same size. There is slightly more white space between the category sections in the 4.1.3 design, but it isn’t strong enough to offset the line embellishment. The line is a very strong element in the design, which is why it is such a problem.
@John: Gestalt *is* the evidence. I’m sorry that I took a shortcut through the theory to get to the practicum. If you are still not convinced, pick up a psych book. I see no reason to repeat 100 years of applied research to prove my point. Good design will never get done if we have to repeatedly prove what we already know.
@Vlad: The fade is so far away from the point of interest (the label) that noticing the decoration is only an after effect. When you scan the left side of the UI for the main category label, the fade isn’t something you would (or should) notice. It is hard to take a fresh look at the design in the context of this entry because the analysis makes you intimately aware of the interface. Once you know something exists, it has always existed. The problem is before you are aware it exists.
@seele
I’m a mere user and no expert (and no KDE hacker btw). As logical as your explanations may sound, I find the KDE4 version works better for me. That’s all.
For me, the KDE3 version is too crowded. I already mentioned the “About Me” icon.
You have two icons and two labels in very close proximity, which makes it very hard for me to find the section header. If “About Me” was more to the right and more distincly separated from “Personal”, I guess the KDE3 version would work better for me.
There is another important element: space between categories. The spacing is lager in KDE 4.1.3 — that’s why some people found it easier to understand.
I’m with Celeste on this one. The first thing I did with the KDE4 one was look at the top and the bottom to figure out which end had a category title with no icons. Once I saw that the top had a title sitting by itself, I knew that it went with the stuff below the line. It was pretty obvious in the KDE3 one that the stuff between the lines is one “chunk.”
To clarify why I had to look at the bottom after seeing that the top had a label by itself: it is possible that there could be an empty section. I had to check the bottom to see if labels were consistently at the bottom with the top section being empty *or* if the top label actually went with the stuff under it.
I do prefer the single-line text in the KDE4 one though. The line-wrap on the icon titles in KDE3 does contribute to the “crowded” feeling someone mentioned above.
I can see the technical merit of the point you’re making, but as others have said, I haven’t really noticed it during use. The KDE4 application always looked organized and browseable. If there’s one criticism I can make of the systemsettings application, it is the extremely mouse-oriented approach that it takes. For both the “back to overview” button and the various configuration modules, there’s no underlined letter allowing for easy access with “Alt + .” My friend has somewhat bad arthritis and doesn’t like to switch between the mouse and the keyboard very often, so this has been a problem for her.
I also feel like the original KControl application was able to give a much better “overview” of the settings than the current solution does, but that’s really unproductive criticism. I’m not sure how I would go about improving the kde4 application — the only thing I’ve consistently noticed and would change is the odd placement of some settings under the Advanced tab. Some of those choices just didn’t make a whole lot of sense to me.
-Please read this entire comment before judging it, and apologies for the length-
Seele, I think you’re relying too much on the term “Gestalt” in making your point. Your reliance on it seems to set up a communication barrier between you and those of us who don’t have the same design training. I think it is also blinding you to the possible merits of some of the others opinions.
In my opinion the 4.1.3 design is better. I find it actually does a better job at grouping and representing the hierarchy than the 3.5.9 version. It’s ironic that you said “underline itself isn’t enough detail about the design you cite,” because many of the other details are present and being ignored in your analysis.
1. White Space:
a) You noted that the 4.1.3 version has more white space between categories, but claimed it was insignificant. It’s true, a little more could be added to improve separation, but it is contributing - however small - to the grouping.
b) The 4.1.3 version has a larger indentation of the items in each group. This makes the hierarchy more visible. The headings are clearly more foundational than the items in each group, because they are so much further to the left.
2. Font Style
a) Header text is bolded in both. This draws more attention to the headers, setting them apart from the items, and, again, emphasizes the hierarchy.
b) The proximity of the line to the header text in 4.1.3 makes it work as a font embellishment. Again, it emphasizes the hierarchy by grounding the headers.
3. The combined effect of heavy headers and increased white space actually emphasizes the grouping. The header text actually becomes part of the separation between categories. I can’t think of how to explain that better.
So, the 4.1.3 system settings does a better job representing the grouping and hierarchy *overall*
However, overlining the category should definitely be considered. All of the points I addressed can also be applied to a horizontal rule above the headers. Simply, keep the extra white space (both indentation and between categories), and bring the line closer to the text, for a more solid division. Something like the following could be good:
__________________________________________
| Lorem Ipsum
Content…
@Michael & David: As a side note, underlining isn’t as common in publishing as most people think it is. Looking at all the textbooks on my shelf here’s how it broke down:
Overlined: 7
No horizontal line: 4
Different Background colour: 3
Underlined: 2
As you can see, the overline is actually much more common. The books without a horizontal line also tended to be earlier editions.
And, with no rigorous tests: hearing the complaints about text books from classmates, the order from best to worst goes: Overline and/or Shaded background; Underlined; No horizontal line. Most of the time, the complaints were generally that a book was cheap or difficult to read.
So, to summarize this very long post:
We should acknowledge the improvements present in the 4.1.3 version, but also consider making changes that could improve the current state — specifically, trying out an overline for the headers.
(also, I think the underline was probably put in with all the other changes)
@Soap
I agree with most of what you said.
Ironically enough, this blog uses underline:
System Settings as a Design Lesson
———————————-
text
I Absolutely agree that System Settings should be changed. Overall, the KDE4-version might be better, due to other changes in the UI. But fact remains that the category-labels are worse than they were in KDE3. We should change back to KDE3-way of doing things, while holding on to the improvements made in the KDE4-version.
The argument about “underlining” does not really work, since that “underlining” causes the category-label to be on the wrong side of the separator. It looks like it belongs to the category above it. If we are really gung-ho about underlining, how about creating a mockup where the label is in the correct side of the separator AND it’s underlined? Personally, I feel that that would make the UI look busier for not particular reason. If you want to emphasize the label, bolding should be enough.
Congratulations, you’ve just discovered what most people have known for years: KDE’s UI is seriously broken.
I also agree with Celeste and I really appreciate that she cares about this kind of details.
Ah, and there is somone else who agrees with Celeste:
http://en.wikipedia.org/wiki/Image:SysPrefsMobileMe.png
Regards, Daniel.
Just start Dolphin and choose View=>Show in Groups. The KDE4 System Settings doesn’t have much in common with the KDE3 one and uses e.g. Model-View separation. So, I guess to just take the groupview from Dolphin was just the most easy way :)
Celeste, I agree captions should stay with the object they explain and not be separated by obstructions. It’s like when reading a book: I like to have explanations right next to the figure that needs explained - otherwise I spent too much time finding the text, rather than understanding it.
But some of the people expressed a different opinion here, how can we gather the opinion of users at large? Is there some way to enclose design polls into applications?
I agree with this and think that the 3.5.9 is clearer, however I would like to see something a little like this in addition to that:
http://dose.se/systemsettings359.png
Pretty ugly but you get the point, could be more suble.
Gestalt was, as with any artistic pattern / movement / philosophy, a temporal thing. Suggesting for a single moment that it is pure fact is no more foolish than suggesting that the Dadaists got it ‘right’ and that we should evaluate everything accordingly. Further still, you probably should have mentioned which Gestalt principle you are heading toward - proximity?
Beyond that, I find the revelation a tad on the subjective and aesthetic - which is _wonderful_ but not when represented as a shade of right or wrong. Bringhurst has some very particular views on headings and such, and those too are obviously up for debate in spite of his stature amongst typographers. Cultural biases would also play into this ‘usability’ factor as well I suspect. While we are discussing notions of “more efficient” should we also increase the font size to twenty-six to accommodate those with vision impairment?
Finally, this hypothesis — even if we localize and describe the details of the impacted audience — would apply to a singular aspect of ‘usability’. Is everything that happens in the operating system experience a race? Should it be? Heaven forbid we simply accept things such as Fitt’s Law and blindly apply them in all situations? Should we evaluate one impact on ‘usability’ against another?
Stimulating discussion, however.
I think separation of hierarchy is more important than separation of categories. After all, the point of a hierarchical structure is than you can first scan through the headings, then, once you have found the correct one, scan through the corresponding category.
The KDE4 version does this better for me. Even as a very logic-oriented thinker I also prefer aesthetically the flowing style of the KDE4 version to the strict boxing-off of separate categories in KDE3.
Thirdly, the gradient in the line in the KDE4 version, draws your attention to the left-hand side and to the category label, It’s a really good piece of design.
Finally, I agree with Troy - Gestalt is a set of interesting ideas and in this case a starting point for thinking deeply about design, but absolutely not an absolute. :)
@robertknight: Sebastian Sauer is right. At the beginning of December 07 I realised that KDE 4 System Settings was still a straight port of the KDE3 version with lots of howling bugs, and visual issues caused by hardcoded and layouts. So I ported it to KCategorizedView from Dolphin and in doing so was able to throw away loads of the code.
So IMO this discussion should be applied to KCategorizedView, and then we’ve solved the problem all over KDE.
I think you are right, the line distracts me. Lines should group things, not mark headings!
whynot put a small icon next to each category? like a wrench for computer administration, a brush for Look&Feel, RJ45plug for network&conn.
Reading this blog and looking at the pictures I was initially confused, thinking that the old UI had better groupings and decorations that the new one, but usually newer is better. However it then became clear when I realised that was the point of the blog. This particular UI has become a little bit more confusing with KDE 4.1.3. Hopefully, now that it’s been highlighted this area can be improved upon. Thanks for making this visible to us.
There’s no doubt in my mind that the KDE3 version is more readable. I can actually feel the tiny extra effort involved in looking at the category label in the KDE4 version. It’s similar to the tiny frustration I feel when I have to reach for the mouse to do a small task when I’d far rather stay at the keyboard.
I think you miss a very important point in your mockups. The distance between line and icon-top of the same category is much less than the distance between icon-bottom and heading of the next category.
Personally, I think my mind easier deciphers the 4.1.3 way, due to the explained distance between objects and probably also due to headings you usually see in books as stated by Michael.
I prefer the KDE4 version too.
I also like KCategorizedView when using icon-view in the file manager. Please no-one change this hastily. I think the current layout is very elegant.
I never thought that I would see two of my spare times activites, KDE and Gestalt mentionned one day in the same website. It’s really fun to see those completely unrelated subject converge :-)
Wow, never thought like that, but it appears that you are right, but, aesthetically kde4 version is much better, that’s why so many people prefer it
For me the aesthetics gain is greater then the “visual organization” gain in this case
I agree with the post. People liking the kde4 design do so because they see the nicer things of qt4. If they see kde4 way in the old kde3 style, they would not like it I believe.
So, one obviously can improve the kde 3.x design with the ideas of kde 4 design, so that the grouping is obvious immediately and one has the pretty kde4
Eg:
1. horizontal separator between parts, greater distance between icons, that is like kde3 now, but I think many people don’t like that setup too much
or
2. heading with small underline. A vertical line in front of the parts to group header with icons, greater distance between the icons.
Other options are possible: background shading color grouping, …
Great post Celeste!
Looking at the most probable source of inspiration of SystemSettings, MacOS X preference application, you can see how they avoided this issue:
http://switchtoamac.com/guides/images/sys_pref_leopard01.png
In short: using alternating row colors and putting the title inside the row.
/me adds an item in this TODO to fix Gwenview start page, which suffers from a similar problem :)
First let me say thank you to seele for this good analyse. I completely agree and hope KDE developers respect your work as much so that they really consider your input!
@Michael: I think you look to much at a side node instead at the important point. The important question is where should the headline? Above or under the separator? And here i’m completely with seele.
Your problem with the KDE3 layout is not the position of the headline in reference to the separator but the position of the headline to the icons. Onone disagree that this could be improved too.
So i just want to encourage every participant to focus on the main topic: “seperator above or under the headline” and don’t confuse the problem by discussing negligibility which can be fixed separately.
I wasn’t convinced because the KDE4 version looked more appealing to me.
In order to compare two versions with the same style, I just made a mockup from the KDE4 version with lines above the heading. Here it is : http://tifauv.homeip.net/~tifauv/images/systemsettings413.png
Now that I see it, with the same style as the original & same margins, I absolutely prefer with lines above. Much easier to read.
Take a look, compare, and change your mind ?
Although I am no Apple fan-boy I think you forgot to compare it with the original ;)
http://www.guidebookgallery.org/pics/gui/settings/menu/macosx103-1-1.png
http://images.apple.com/support/switch101/switcher/images/switcher08.jpg
As you see the alternating colors really help to distinguish between the sections.
Besides the KDE3 version looks nicer to me because of the section icons besides the labels.
My brain is really easier perceiving the KDE3 version.
I would agree with the line under the title if sections were separated more clearly, otherwise these lines become the separators.
@Henning
I’ve always hated this aspect of kde, space, space usage, white space overload, you can clearly see what is wrong in comparison between sys. settings of os x ( http://www.guidebookgallery.org/pics/gui/settings/menu/macosx103-1-1.png ) and kde 4 ( http://weblog.obso1337.org/wp-content/uploads/systemsettings413.png ) panel from os x contains 50% more modules yet it is smaller (you can compactise it even more using alphabetical order option http://www.extensions.in.th/post4/prefs1/pref02.jpg which unfortunately doesn’t exist in kde.
@Tifauv’: Thanks for the mockup!
*) As I have already said, this is a minor issue — the type users don’t notice but it does have a minor affect when compounded with other minor issues. Fleas on a dog.
*) A lot of people seem to be getting stuck on aesthetics. Take a look at Tifauv’s mockup and the 4.1.3 screenshot.
*) I mention in a comment that there is space in the 4.1.3 design; however, it is very minor and not enough to offset the affect the line has on grouping.
*) Someone made a good point offline that many book headers stop at the end of the text and don’t continue on to the end of the page. By only underlining the text, it enhances the hierarchy instead of creating separation. The separation comes from extending the line past the text.
*) If Gestalt is dead, you better notify the design and human factors engineering schools because they’re still teaching it.
Please, don’t use alternating colors, that would not be beautiful. I like Tifauv’s mockup more than the other alternatives (it is much better than the 3.5.9 design). I also agree with the second commenter: some modules are in the wrong category (see his comments).
I like KDE 4 version way better.
I think it ends up to this : KDE 3 -> clearer; KDE 4 -> more elegant…
I would be nice to combine the two.
To me, two nice suggestions that have been made are : different background colors and/or underline going no further than the end of the label.
And again, Apple has found a really proper solution to the problem, making it perfectly clear. Take a look: http://www.saarcozy.de/wp-content/upload/leopard_system.png
Sorry, wrong link, here’s the correct one: http://www.saarcozy.de/wp-content/uploads/leopard_system.png
“The KDE 4 layout separates the category further (figuratively) from the icons.”
+1
when i’m going through category names, finding next name is easier when it is underlined
the only improvement that could be made is to increase spacing between categories.
The attention to detail here is great, definitely, and you can count me among those who agree the location of the divisor lines was better in KDE3.
However I don’t think this is the most pressing issue with System Settings. The major problem as I see it is that the control panels that System Settings embeds are generally in a fairly unloved state.
There is too much inconsistency in layout between them. Some panels are tabbed, some are not. Some panels have crazy spacing that makes them a real pain to use on small screens, or forces System Settings to resize, which is ugly. Some are completely non-obvious (e.g. the Keyboard Layout panel, which completely ignores the keyboard map set by xorg.conf or autoconfiguration, and where you bafflingly have to ’switch on’ a keyboard map even though you’ve already got one). Some panels are incredibly busy (again, the Keyboard Layout panel, or many of the Konq panels), others are almost empty and seem pointless (e.g. the Windows Shares panel - and apparently that’s important enough to be on the main page). Terminology is inconsistent across panels too.
The Advanced tab has become a dumping ground for panels that no-one has figured out how to categorize yet, some of which (e.g. File Associations) are not really ‘advanced’ for many users. The System section in ‘Advanced’ is also a dumping ground - either these should be integrated with the relevant sections in the General tab, or System should get its own tab and several things should be moved there from General.
Is there a style guide for KDE Control Panels? I know lots of work was done in the KDE 3.x timeframe to turn them into mostly .ui and .desktop files to make it easier to edit them for usability, so the barrier of entry isn’t too high. I’d love to get involved helping out with this critically important bit of KDE…
Thanks for your work, Celeste and all the other contributors here! It’s fun to see how KDE keeps on improving!
I’m afraid I can’t remember my first impression when I saw the KDE4 System Settings but I liked it more than the KDE3 version. But the question for me is: *Why do I like the new more?*
Because it looks smoother, more elegant, the icons are nicer, etc.
But at least the comparison of the mockup with the original
http://tifauv.homeip.net/~tifauv/images/systemsettings413.png (mockup)
http://weblog.obso1337.org/wp-content/uploads/systemsettings413.png (original)
showed me, that there is still room for improvement in the way you mentioned it. Of cause, as mentioned above, space is a powerful devider, but in the context of mobile devices and small displays space shouldn’t be wasted it there are other solutions. I think I slightly coloured background (like in the details-view of dolphin) with a tiny, fading gray line could even improve the nice design of KDE4.
Perhaps this example goes into the right direction:
http://3.bp.blogspot.com/_10NAUsX52R4/STVL56_MjrI/AAAAAAAAAAM/UJ9bF2CA3is/s1600-h/systemsettings413-coloured_background.png
If we can make KDE better, than let’s try it!
I’ve noticed pretty much everyone keeps calling it KDE3’s System Settings. I believe a more correct name would be Kubuntu’s System Settings for KDE3. In KDE3, the System Settings UI was downstream of KDE and I wouldn’t mind if it had stayed that way.
The only (questionable) advantage I see in System Settings for KDE4 over KControl for KDE3 is that it looks like OSX, and the OSX interface isn’t necessarily “teh pr0n” of the interfaces that should be copied at all costs as things seem to happen lately.
Usability is an opinion, and I know a lot of people who find themselves lost in System Settings and would prefer KControl’s tree view. This doesn’t mean anything statistically, do keep your Maccish Kubuntu System Settings upstream if that’s what the mighty usability cabal has decided for us.
But let’s be constructive: I wonder, would a patch that adds a tree view to System Settings be accepted?
This is a much requested feature: http://bugs.kde.org/show_bug.cgi?id=153556
though I wouldn’t call it an additional feature but rather a fix for a serious regression.
Cheers
Teo is correct in that it is Kubuntu’s 3.5.x settings, not KDE’s.
@most people — I agree. The KDE4 one is *far* easier on the eyes. The KDE3 one, with the icon and text below the line, makes for a confusing first glance.
Neither are particularly good. However I agree the former was “better”.
Work needs to be done in general IMO.
I agree with your points why the 3.x could be considered better, but I can not agree with your conclusion. And you forced me to think of ‘why’. Why is the not-sensible one (KDE4) not worse (for me) than the sensible one.
I think that the answer could be this:
While the line was used as a separator in 3.x series, it doesn’t serve that purpose in 4.x. The separator in 4.x is the spacing, and the line is used as a *focus drawer* to the titles. Underlined text is something that people are used to be important, and is something you notice immediately. And, most people, when studying, underline the most important parts.
So, “the zones” you mentioned haven’t really changed at all.
I can not say which approach is better, but in this case, comparing the screenshots, I prefer the 4.x version. (just to mention that, in Lancelot, I went for line-above-title :) )
Cheerio!
I prefer the new one, and I suspect it has to do with the search strategy I use, as others have pointed out. The issue seems to be that you are assuming that we should perceptually group the headers with the content below them. I disagree. I think the headers should be perceptually grouped with the other headers, at least for my search strategy. What I do is look for the appropriate header first, and then look for the entry within that header. For this strategy I need the headers to be perceived as distinct from the entries. This is easier for me to do with the 4.1 strategy.
I am not certain, but I suspect the reason for this has to do with the very grouping you are criticizing. I suspect I am doing a comparison of the text items within a perceptual group. When the line is below the heading, I contrast the heading text with the entry text directly above it. Because this text is much closer with no distraction in between, it is much easier to tell that the heading text is bold. However, with the line above, I compare the heading text with the entries below. The larger distance and icons in the way make it much harder to tell that the text is different, so it makes it much harder for me to separate out the headers as distinct elements. So in the KDE 4 case my eyes are automatically drawn to the header while in the KDE 3 case I first have to find the lines and then use those to locate the headers. It is the same with the Os X example people provided, I have to locate the header based on its anticipated position within the box rather than my eyes automatically be drawn to it like it is in 4.1. This makes it noticeably harder for me to navigate since I have to work harder to identify the headers.
I think the answer, rather than to simply move the line, is to make the header more distinct generally. I think giving it a more distinct font size and some sort of other highlight that allows easy perceptual grouping both between headers and with the entry would satisfy both people who prefer the KDE 3 style (since it would allow grouping with the entries below) and with people who prefer the KDE 4 style (since it allows the headers to be easily identified).
I’m pretty sure that the underlines of the headers are part of some new standard look (by Oxygen maybe? in any case it’s also used e.g. for grouping icons in Dolphin) and the grouping separators were removed since those only added clutter. Of course seele’s remarks are perfectly valid, so I’d suggest changing the look of that grouping header’s line from an underscore to a continual line right (or left for LTR languages) to it (which should not only “fix” System Settings but also look fine in Dolphin).
Gimped quick example of my suggestion: http://e.imagehost.org/0825/systemsettings.png
The trouble is that once you’ve found the right heading…hrm, now are the corresponding options above or below it? *proceed to hunt around*
@Daniel: the Mac screenie you linked to is fucking sweet. That’s why Mac makes it rather way easier into ‘mainstream’ even with a hefty price tag.
All these small details matter a lot to the user experience.
Soon to be a user interface designer myself. :-)
Wow… got article and all the comments and mockups readed/watched.
There are lots of good points for both styles.
Personally, I like the KDE4 but the KDE3 is “correct”.
KDE4 toke a Dolphin as default filemanager and it includes a way to show files in groups. Someone commented that we should compare the original (Apple) and current System Settings and notice the space what is used more wisely on Original than on our version, what is just wasting it. So much emtpy space around icons. This was one thing what I hated on Dolphin, when you use a “Icons” view, the grid had three size, small, medium and large. Even with “Small” sized grid, the space was wasted, the space between icons were HUGE. Now on KDE 4.2 beta 1, there is new level, called “none” what really use space more wisely, just like Apple’s system settings when comparing to KDE4 system settings.
But the question about line, wich side the header belongs. Top or below. I preferr the top version on Dolphin, because the header is not big text, but just a letter. It feels like browsing a phonebook what is needed to be fast and simple. You need to find fast the letter what you are looking and then when you have found the correct letter, then after that point is the information what you are looking for.
But on system settings, it does fit better than the KDE3 version. Why? Because there is clear line between header and the icon and the icon name.
header
——————–
[ ]
[ ]
Icon name
header
——————–
The KDE3 way is disturbing me because the header comes too close the icon itself:
————————-
header
[ ]
[ ]
Icon name
————————-
header
So I would say that the problem on the KDE3 version, is the icons so close the header name, what makes it look stupid. Not so well designed.
The header top of line, is valid in my logic, because when you search something, wich one is more important, the information what you are search (letter, name) or the informmation what tells that “Last chapter ends here”?
When you scroll with Dolphin the /etc directory with groupped and icon view ON. You notice that letters pop-ups clearly first in your eyes. If you search “udev”, you search first “U” group, then the directory named “udev” in that group.
If this is turned around, so the header is below the line, then you start seeing first the lines, not the letters (groups) what you are looking for. You need to spend more time thinking as “End, letter… End, letter… End, letter…”
I would not take books headers comparing to this, because usually you dont many chapter headers on next each others. And you can use more numbers, bolding, bigger font or moving sub-chapters with indent. Just for giving a user the big information first, and then later the smaller ones.
I see same thing with the header top of the line. First you get the most important information the header, class, group etc. And then you can search the information what you were actually needing.
The headers idea is to allow easier finding for things what we are searching. First we search the group and then the thing from the other stuffs what all belongs to same group.
On System Settings, we have very little icons there. Lots of empty space used because names are wanted to keep in one line and not on two lines. Situation is same as on older dolphin versions where grid size is too big and no possible way to get it smaller like Apple’s System Setting is using.
The whole question feels like it can not be solved by using logic or by using a usability tests. Because it feels like the human eye finds the group faster if the header is top of the line. But the idea, logical way is to move the header between two lines, as it belongs to group itself. The compromise could be, like someone made mockup, that headers comes first and lines after them, on same line. Not top or below of headers. Still there is problems about spacing
We have many problems:
a) Lines, we should not use them, but we need to use them because they gives great border between groups, but adds a information what stops eyes by controlling what starts and what stops from where.
b) Space, we do not use wisely space between headers and icons when the header is below line. the header looks like belongin to first icon and the first icon is disturbing the searching.
c) Amount of entries on the view, if we have only a 5 entries (icons) what to choose, do we really need lines or spaces so much as we would need if we would have 50 or 500 entries? (General & Advanced tabs vs only a one view).
d) too _long_ headers. Comparing to letters (on dolphin groupped view) they are giving more information by the current style, than the system setting with long descriptions
So in the end, I believe that we could discuss endless time of this topic and we could’t find a best solution for it.
Based on what I was saying about making the headers distinct to make it easier to pick out the headers while still making it so it is clear the headers belong with the entries below, I made this mock-up. The final thing wouldn’t necessarily have to look like this, I know it has some problems, it is just an example of the sort of approach you could take that I think would satisfy both sides:
http://img.photobucket.com/albums/v89/toddrme/computer/systemsettings_mockup.png
It also would allow you to get rid of quite a bit of white space because you wouldn’t have to worry about people getting confused about what is a header and what is not. I made this mockup, it looks kind of cramped but it shows how you can get rid of a lot of white space without making it hard to read:
http://img.photobucket.com/albums/v89/toddrme/computer/systemsettings_mock_nows.png
I agree with your post but in general I dislike both designs. I think KControl in KDE3 is better, but maybe it’s because I’m more used to it.
I was going to suggest something like TheBlackCat’s mockups, but those are even better than my idea so I’ll just skip it.
I am not a design professional, but for me personally KDE4 system settings view is slightly better than the compared KUbuntu 3.5.9 style. My non-professional mind tells me that when I first look at the view, I am looking at category headers to find the one I need. I find the categories better if they are clearly separated out - e.g. underlined. This means that the line acts not only as a separator to tell the brain where the category contents start, but it also acts as a guideline to easily locate header itself. Then all the entries below that belong to that category. The extra whitespace denotes the separation between categories. I agree with other comments that relate this concept to a hierarchical view.
For example, please see:
http://www.google.com/support/
I think it works pretty well - I believe it’s better than if the lines were above the category headers.
I agree that the KDE4 view could use slightly more vertical whitespace in between categories and slightly less horizontal whitespace in between icons - to me it looks like that’s the only issue.
@TheBlackCat, I like your design better than the presented, it would be nice to see then getting into KDE itself. It looks better and more organized.
@TheBlackCat: Nice mockups. They’re being discussed on the KDE Usability mailing list and I believe the SS dev is going to ask the Oxygen team to take a stab at KDE4izing your idea. Thanks!
@zd: Also notice the 3 lines worth of space between each “object”. The KDE4 design would work if there was that much space but there isn’t does it doesn’t. Adding more space isn’t an ideal option either because screen real estate is rare and the UI shouldn’t scroll.
@ seele: wow, thanks! I am glad they were useful.
I like the principle behind the mockups of TheBlackCat but I think it is important to keep the dividers simple enough to be “style neutral