Thoughts & UI Clean-Ups on a Random Red Hat/Gnome2 Screenshot

I was reading Adam’s preview of Red Hat Limbo beta 2 the other day, and was also checking out his screenshots. I already did a Gnome 2 review a few months back, and a month ago I did a more constructive article on KDE 3’s UI. This time, I just picked a random screenshot off Adam’s article, and I will suggest some UI changes to make it look better. IMNSHO, as always of course, so be prepared. Update: My post to Gnome Usability mailing list, regarding a more refined/fixed version of my GUI suggestion for the specific theme discussed.As many of you already have noticed so far, I am a control freak. I want my work, my life and especially my desktop to be pixel perfect. You either give me something that looks good, or I will trash it in my review. That’s the deal, and I am not hiding behind my own finger. Whatever I find good, it will be praised, but if I find flaws, these will be pointed out in a pretty critical manner.


So, I opened up Gimp last night, and tried to modify a part of this screenshot. I tried to modify just its two preferences panels, a Font Preferences one (made by Red Hat and not by the Gnome project, I think, doesn’t really matter) and a Theme panel.


Please note, that I do not just criticize Red Hat here, but also Gnome2, the person who did the themes, and the GTK+ project, as all of them have their own small part to that overall UI disaster that was shown before me on an OSNews article. It is not one person’s fault, and it is not one’s team fault. It is the fault and miscommunication of many people, many projects and companies. The fact that a Linux desktop is consisted from many different components made by different teams, is its strong point, but when speaking of its UI, is its plague. Inconsistency to the max.


Same goes for KDE, of course, but Gnome2 has more visible problems. For a UI to work well, the people doing the toolkit, the UI designers, the developers, the font engine guys and the distribution company should be under the same “roof”. You either having the developer on a meeting with his UI designer, and the font engine guy talking to the Toolkit team face to face about how to make things better, or you end up creating UI atrocities, glued together.


Oh, yeah, flame as much as you want. I am wearing my flame proof Dolce & Gabana jacket. At least I respect my (jacket) designers. 😉


All I did in the following screenshots was to clean up the UI of two preference panels that will come with Linux’ more popular distribution: Red Hat. I did nothing more and no less. As a user, I do not care who did what, and who programmed or designed what, what I care, is that it should look good, consistent, and logical. Some of my clean ups are only 1 pixel changes here and there, or changing a color to a tiny tint different one. To see many of my changes you will need to zoom in or wear your glasses in order to notice the rounded widgets or the change of some colors. But when you look to the original and to the modified one, side by side, possibly from a distance, the modified one just feels more “right”.






The Original
The Original
The Modified
The Modified


Please note, that most of the following points, can apply to whatever theme is used. They are generic enough.


Changes I made:


1. ALL the widgets are now rounded. Just one pixel off their corners and you immediately get this nice smooth feeling. Combo boxes, buttons, Tab Views, Sub-Views, the font input text etc, are all have been rounded.
2. The Theme Panel’s “Help” and “Close” buttons do not perfectly align with the Tab view.
3. That huge Nimbus font used *everywhere* at the *same* size (no matter if it is plain text, or widget text) is terrible. Its characters are glued to each other in many cases, it is big and it is ugly. I simply used the ever present, Arial font. It is not something that you find in space, just Arial, in different sizes and modes. Please replace it with whatever equivalent font, if Arial costs too much to license or something.
4. The little underline under each word’s letter than happens to be a hot shortcut, it is too big.
5. That “Details…” button on the Font panel is stupid. It does not really give you a clear idea of what it does. Does it give you more details on the choice you just clicked? Does it give you details for all the Font Rendering settings available?
Check my “More Settings…” (rather modernized) HTML-like link instead of an abrupt button. Of course, here, I have to guess that this “Details…” button is about having more settings.
6. The Theme panel has unnecessarily big width. In fact, the font used inside the list view should have been smaller anyway, but even with the current font size, the list view is too big. I can hardly imagine someone naming a theme as long-ish as “My Beautiful Atlantian Theme – Under the GPL too! Hoorah!”
7. The “install new theme” and “go to theme folder” buttons have been aligned with the list view in my version. I also changed the “Go to Theme Folder” to “Open Theme Folder”. “Go To” might mean that the current application might change to a file manager and get you away from the current view (that of course, doesn’t happen, but “Open Theme Folder” is more correct).
8. The default radio buttons are too big. They look like holes…
9. The input text placeholder showing “abcdefgop AO” etc., have unnecessarily big height. Instead of the characters to be aligned “middle” in the text field, they are aligned “bottom”, leaving all this white space on top of them. Also, the fourth input text placeholder is wrongly, 2 pixels shorter than its neighbors. Also, the first row is one pixel off on the left, than the second row.
10. Very important: The background color of the “Font Rendering” child view and the background color of the Tab child view on the Theme panel is now RGB(226,226,226) while the parent view is RGB(230,230,230). It is hardly noticeable, but it really helps creating a real object oriented system, with colors and boldness, making it nice and logical to the user’s eyes. The parent view should have the fairest color, any children views should have a tint bit darker color, and the buttons and widgets should be a bit darker than that. In our case, the buttons are now RGB(222, 222, 222). A window’s menu background (File, Edit etc) should also have this tint different color as the tab view or any other child view. Object orientation is a Good Thing (TM), even at your desktop, even when created with nothing by colors.
11. The line around the “Font Rendering” child view is now a bit darker, making the child view more distinct.
12. And talking about object orientation with colors regarding views, the same should be true for the text. Notice that I have as “Arial, bold, size 8” the headers of the Tabs, and the child view of “Font Rendering”. It is really like a header to a new chapter/child view, and it should look like one. To do all that today, a theme can’t do it. You need the GTK+ guys to allow this! Come on guys, you know you want to do this, even if it breaks the current themes and even if the current available fonts for Linux suck when used in different sizes or enable boldness. But do the right thing and ask people with money and a reason to do so (e.g. Red Hat, Mandrake and other companies richer than you and me) to license better fonts to get bundled with XFree86, because the default configuration is the only one that matters, not what a user might or might not change (IF he/she is allowed to change in a corporate environment anyway).
13. Buttons are Arial size 9, and normal text is size 8.
14. The combo/drop down boxes have been made smaller (via code you can tell the combo box to have a standard default size, even if the inside data might need more space – the box will expand when in use to meet the size of its larger option). They are also centered and their accompanied text on the left side, they now have been aligned on the right (and not on the left as they were originally – hope this makes sense).
15. Notice the Tab differences between the two shots. The modified version exhibits an inset look of the non-selected tab.
16. Now, create event states for all major widgets (for example, for buttons it would need tiny bit different looks for onMouseOver, when selected, when pressed and onMouseOff) for all themes included in an official distro, and there you go, you get a great, clean UI.
17. I won’t talk; neither did I touch this window manager theme and the thick/unattractive border it exhibits around the window. It looks bad, unoriginal and it should not be used as the default one (not sure if it the default or not for Red Hat 8).


And these were more than 15 points of modifications needed (without counting the actual window manager issue), to only two preference panels. I do not want to think how much time I need to spend to modify or simply clean up the whole distribution’s UI and/or Gnome2 (sorry Spark, too much work to do :). It is a dirty job, but someone’s got to do it. People will pay money to Red Hat. But I won’t, unless they fix these issues on each and every window or menu they include. MacOSX’ Aqua might be a bit too much for some, but overall, their UI is really refined and carefully designed, as they have some great UI and graphics designers in their premises (everyone knows that I am not a big Apple fan, but I recognize that they have the best UI/gfx designers in the industry).


Red Hat or Gnome2 UI designers should go over all of their applications, developers should listen to their designers and fix their mess, and the Toolkit developers should also listen to UI designers to enable some of the color and fonts changes discussed above. As for the distributions, should employ people to clean up the GTK+ and window manager themes that they are going to use, to something better crafted, and then send these changes back to the theme developers. As for the XFree86 and Freetype people, they should do something together to fix their font interoperability issues, and license or create 2-3 fonts that are looking good, for a change.


And the most important one… What’s the deal with that ugly mosquito (update: now they tell me it is a dragonfly; whatever…) as the default background on Red Hat Limbo (or so I was told)? It is repulsive. If Red Hat wants to be closer to nature (as WindowsXP and Lycoris seem to exhibit a similar urge lately in their background images), it is better to choose something cuddly instead. A big fluffy sheep eating grass in a nice, open field, for example. 😉


Yeah, some will find me funny today, others will find me nasty. What I really am though is very serious.

143 Comments

  1. 2002-08-07 3:18 am
  2. 2002-08-07 3:23 am
  3. 2002-08-07 3:25 am
  4. 2002-08-07 3:45 am
  5. 2002-08-07 3:46 am
  6. 2002-08-07 3:49 am
  7. 2002-08-07 3:50 am
  8. 2002-08-07 3:53 am
  9. 2002-08-07 4:05 am
  10. 2002-08-07 4:26 am
  11. 2002-08-07 4:27 am
  12. 2002-08-07 4:28 am
  13. 2002-08-07 4:29 am
  14. 2002-08-07 4:35 am
  15. 2002-08-07 4:45 am
  16. 2002-08-07 4:47 am
  17. 2002-08-07 4:47 am
  18. 2002-08-07 4:51 am
  19. 2002-08-07 5:18 am
  20. 2002-08-07 5:27 am
  21. 2002-08-07 5:33 am
  22. 2002-08-07 5:54 am
  23. 2002-08-07 5:55 am
  24. 2002-08-07 5:58 am
  25. 2002-08-07 6:03 am
  26. 2002-08-07 6:06 am
  27. 2002-08-07 6:12 am
  28. 2002-08-07 6:15 am
  29. 2002-08-07 6:19 am
  30. 2002-08-07 6:26 am
  31. 2002-08-07 6:27 am
  32. 2002-08-07 6:29 am
  33. 2002-08-07 6:29 am
  34. 2002-08-07 6:42 am
  35. 2002-08-07 6:46 am
  36. 2002-08-07 6:47 am
  37. 2002-08-07 6:49 am
  38. 2002-08-07 7:04 am
  39. 2002-08-07 7:06 am
  40. 2002-08-07 7:09 am
  41. 2002-08-07 7:20 am
  42. 2002-08-07 7:24 am
  43. 2002-08-07 7:45 am
  44. 2002-08-07 7:53 am
  45. 2002-08-07 8:09 am
  46. 2002-08-07 8:09 am
  47. 2002-08-07 8:11 am
  48. 2002-08-07 8:23 am
  49. 2002-08-07 8:40 am
  50. 2002-08-07 8:40 am
  51. 2002-08-07 8:50 am
  52. 2002-08-07 8:54 am
  53. 2002-08-07 8:59 am
  54. 2002-08-07 9:00 am
  55. 2002-08-07 9:06 am
  56. 2002-08-07 9:30 am
  57. 2002-08-07 9:48 am
  58. 2002-08-07 9:51 am
  59. 2002-08-07 9:59 am
  60. 2002-08-07 10:32 am
  61. 2002-08-07 11:17 am
  62. 2002-08-07 11:49 am
  63. 2002-08-07 11:52 am
  64. 2002-08-07 11:56 am
  65. 2002-08-07 11:56 am
  66. 2002-08-07 11:57 am
  67. 2002-08-07 11:59 am
  68. 2002-08-07 11:59 am
  69. 2002-08-07 12:05 pm
  70. 2002-08-07 12:25 pm
  71. 2002-08-07 12:28 pm
  72. 2002-08-07 12:32 pm
  73. 2002-08-07 12:34 pm
  74. 2002-08-07 12:42 pm
  75. 2002-08-07 1:10 pm
  76. 2002-08-07 1:12 pm
  77. 2002-08-07 1:55 pm
  78. 2002-08-07 1:58 pm
  79. 2002-08-07 2:01 pm
  80. 2002-08-07 2:19 pm
  81. 2002-08-07 2:23 pm
  82. 2002-08-07 2:40 pm
  83. 2002-08-07 2:54 pm
  84. 2002-08-07 3:07 pm
  85. 2002-08-07 3:31 pm
  86. 2002-08-07 3:35 pm
  87. 2002-08-07 3:42 pm
  88. 2002-08-07 3:44 pm
  89. 2002-08-07 3:49 pm
  90. 2002-08-07 4:01 pm
  91. 2002-08-07 4:10 pm
  92. 2002-08-07 4:14 pm
  93. 2002-08-07 4:23 pm
  94. 2002-08-07 4:30 pm
  95. 2002-08-07 4:45 pm
  96. 2002-08-07 4:56 pm
  97. 2002-08-07 4:57 pm
  98. 2002-08-07 5:00 pm
  99. 2002-08-07 5:42 pm
  100. 2002-08-07 5:47 pm