A few months ago I was designing the UI of Sequel OS. I am not part of the project anymore, but I kept developing the UI in my free time, just when I was feeling a bit creative. Yesterday, in my Gnome 2 article I mentioned that it would be nice if Gnome/GTK+ adopt a new default theme. So, here is my proposal for the project, mockups seen for the first time in public… Update: One more mockup I just (quickly) created just to show to some readers that the theme is clean when used in a normal app. Update2: Vote for the poll inside. Update3: Download the Gnome window manager theme here.Sequel was a “sequel of BeOS”, so you will see a few widgets that look similar to Zeta/Dano design (e.g. radio button, checkbox), but I have taken them further and enhanced them.
If anyone feel like coding it, by all means start creating a theme that looks like it, but please alert me that you do, so we stay in touch, as I can help and feed the development with more states and widgets that are not seen in the only two mockups I include here today.
Before starting coding away (well, if you like it ;), please bear in mind:
This are _not_ final mockups. I am sure they can look better if more work can get into them
It requires Toolkit changes (GTK/QT/whatever), it is NOT a matter of writing a simple theme for it. To get that look and feel, their shapes, sub-widgets etc, you will need toolkit support. If people from GTK+ team read this, please consider at least allowing bolding of headers, tabs, buttons and menus.
ALL widgets have on-mouse-over states. All of them. Including the radio buttons, checkboxes, scrollbars, even drop-down boxes. It is not as simple as implementing the two basic states (enabled, disabled) as the idea was to have on-mouse-over state, and even animation (for radio and checkboxes when they get clicked)!!
The “ZSnake” effect (the selected menu that continues to flow on the menu and on the drop-down menu) should be flicker-free. Dano/Zeta OS does this trick too, but their implementation ain’t flicker-free.
Be careful of the colors involved! The background color of the application menu has a different color than the body. Same goes for the Tab views.
If you manage to get the toolbars underneath that menu and see them together they really look nice… 😉
The font sizes on the different elements are calculated and important, so please consult the mockup.
Should add some [optional] shadow underneath the windows and the menus, just to ice the cake…
I believe the colors are light and inviting, in contrast to Gnome’s default grey look.
Metacity needs to add the ability to take one pixel off its corner in addition of the usual “arc” shape that it offers.
Remember again, this is not final work. It _can_ be better, leave your comments or mockups in the discussion area. I do believe though that Gnome needs to implement a modern, good looking, inviting theme and I believe my proposal is close to this goal.
And now, the mockups:
A test window.
The important window that shows a number of widgets. (Update: People don’t seem to understand: This second window is there just to show the available widgets, NOT an application that is busy and cluttered! This theme IS clean, without losing its modern looks. Just look at the first mockup. Do not confuse the second busy window with a real-life application. The second mockup is just a placeholder for the widgets so developers can have them all in one place!)
Update: Erick Woods worked on an alternate scrollbar to better match the sliders.
Another update: This is a more silver-ish version, and while it looks a bit pale, scrollbars/sliders are now more consistent with the rest of the wigets.
Note: The poll is now closed.
Somehow it looks very ‘inspired’ by something else. I was hoping it’d be a bit more original, but it’s a good design
The only inspiration there is the checkbox/radio button from Dano (remember, this was supposed to be the UI for a BeOS-related OS). But I believe the UI as it is, it is already pretty original, mostly because it is a pain to develop it… No toolkit available supports some of the stuff suggested there.
Ok, so that’s what the window manager theme contest was part of, I see…
Anyway, what’s with the blue? Aqua(blue), Longhorn(blue),Bluecurve(not quite blue), Eugenia’s Sequel(bluish). Isn’t there another soft soothing color?
Dont’ get me wrong, blue is my favorite, but is the advancement of the desktop related to how blue it is?
are really nice. I especially like the background, slightly coffee-colored one (and the fact that the active button does not have random crap surrounding it)
2:45 AM…OSNews is ruining my sleeping habits.
>Isn’t there another soft soothing color?
Not really. Blue is the nicest on the human eyes. Light.
I think it has to do with the fact that a) CRT’s have blue backgrounds by default, i.e. everything is drawn on a blue base, and b) blue looks just nice on computer monitors.
I love it !
The day there is such a theme for GTK i might use GNOME instead of KDE … until KDE has such a theme too
@Eugenia:
doesn’t look bad, i like it.
it just looks a bit too complex on the first sight, especially when i first saw the second test i was kinda confused. the fonts are IMO too thick, something lighter would be better.
there should be a little more space around the number in the spinboxes in test1. although it’s windows-ish, i prefer the idea of having a combo-box with an arrow pointing down on the button, seems to make more sense to me since the combobox does open downards (or do you want to change that, too? test2 shows something like that in the upper right corner). buttons are a little flat, maybe they should have at least a bit 3D in them. i really like the sliders and scrollbars..
the window border is a bit too icky for me (edges should be more rounded than just 1-pixel-off), and too thick with this additional border around the title bar. the bevel effect on the title text looks nice though..
i’m a bit confused by the button-focus in test2. there is the “Apply” button with a drop-shadow, the “OK” button underlined and the “Defaults” button just plain. if i press return now.. what will be activated? i guess “Apply” has default focus and “Ok” is selected..? when “OK” is selected, why still show which button had default focus? (something i didn’t understand on BeOS either)
something i don’t like about the listboxes is that there’s one pixel space between the border around the selected item and the listbox-border. doesn’t look nice IMO, would probably look better with 2 pixels space or no space at all. need to try that out
i like the ZSnakes and the way the selected menu item marking grows over the width of the menu itself.
then there’s this tabview on test2… it’s nice that the selected tab is bigger than the others. but it still looks too plain IMO. it’s lacking something. but i’m not yet sure what.
just my opinion so far.
>it just looks a bit too complex on the first sight, especially when i first saw the second test i was kinda confused
The second shot is just a placeholder for the widgets, it is NOT a real app.
>i prefer the idea of having a combo-box with an arrow pointing down on the button, seems to make more sense to me since the combobox does open downards
No, they do not open downwards, not always. If you think about it, it makes more sense to look to the option and not to a direction.
>there is the “Apply” button with a drop-shadow, the “OK” button underlined and the “Defaults” button just plain. if i press return now.. what will be activated?
As I said, this is work in progress. I was playing with ideas, just pick the one you like best for “focused”.
>something i don’t like about the listboxes is that there’s one pixel space between the border around the selected item and the listbox-border
Without it, it looks fat.
>then there’s this tabview on test2… it’s nice that the selected tab is bigger than the others. but it still looks too plain IMO. it’s lacking something. but i’m not yet sure what.
Tab views should be plain. Not like the terrible Keramic’s ones… What needs, is bold font to stand out. And it has that…
Love the widget and other stuff (don’t know the terminology).
But although I liked the window manager theme last time it was posted here on OSNEWS. I just don’t think it works well with the rest of the stuff. Maybe the colors should be closer to the rest of the theme.
Why not have the ZSnake thingy in the expandable tree-view box (where it says “Look and Feel -> Colour Theme”)? much like the drop down combo box at the top right, that might look nifty.
On second though it looks okay as it is.
I like your design enough, but there’s two things that bother me slightly:
1) several of your widgets (notably the tabs) have a second line of pixels around their outside to look more “anti-aliased” the result, however, is that they don’t look crisp enough, you’ll probably want to slightly tweak the color on that.
2) The min/maximise buttons lack definition, I think they could use slightly more contrast, to make them look less bland and flat.
otherwise, great job.
>The min/maximise buttons lack definition, I think they could use slightly more contrast, to make them look less bland and flat.
This is already being worked on on an alternative Today theme.
>) several of your widgets (notably the tabs) have a second line of pixels around their outside to look more “anti-aliased” the result, however, is that they don’t look crisp enough, you’ll probably want to slightly tweak the color on that.
I actually like it as is…
Instead of ‘Why <insert UI name here> Sucks and will never compete with <insert Commercial Alternative here>’, we actually have somebody who suggests improvements in a way that can be more or less directly implemented.
How refreshing.
It would be a nice theme for Zeta.
I think it is a nice theme. And I like the color of the backfround, too. It’s a nice pastel shade.
But I think, that the scrollbars looks a little bit ugly. It don’t suit to the rest.
But all in all: Nice theme. I would be happy, if you publish the theme at “art.gnome.org”.
Wondaful… everything is clear and distinct, and the elements are unified (e.g. the selected menu’s top looks similar to the selected tab). I think some of the more sweet-toothed will be turned off by the edges on the borders; after using the theme (or whatever you want to call it) for a few days, however, they would be grateful for them.
By the way, what program(s) do you use for mockups? Do you use the GIMP? How long does one take to make? I’ve been trying to make a mockup for my filebrowser-UI idea and I have spent too long with too little results; I think I have a good idea though!
>By the way, what program(s) do you use for mockups?
An old version of Paint Shop Pro: 5. It always crashes when I UNDO a transparent selection paste action and I always curse it when it crashes, but I like that app so I keep using it.
> Do you use the GIMP?
Only for specific stuff when I am under Linux.
> How long does one take to make?
About 1-2 weeks of 1-2 hours work a day. Not for the complete set, too much work for final work.
I’m somehow not too fond of the minimize/maximize buttons. Big and small circle ain’t all that intuitive or clear
Pretty neat. But I think it would look more clean with less colours.
Maybe the menu icons should have the normal background color. And the scrollbars and sliders should share a colour with the arrows in scrollbars, spinboxes, combo boxes etc.
Also the gradient in ZSnakes and selections is IMO a bit overdone.
But for a first shot, it looks pretty good.
The scrollbars look similar to the Breeze theme for the Mozilla Browser (firebird), only just a different color.
This looks too busy to me. Simplicity is sexy! True UI skill is in creating a functional, attractive, usable and clean UI.
I did like the ‘continuing’ drop-down menu kind of style, though.
(Isn’t red the easiest color on the eye, since it’s at the lowest of the spectrum?)
>This looks too busy to me. Simplicity is sexy! True UI skill is in creating a functional, attractive, usable and clean UI.
You don’t understand!!! This window is a PLACEHOLDER for the windows, it is NOT an application that has all these wigets in there!!! It is just a window to show you what it could be in there!
IF there ONE thing that theme has, is being CLEAN without losing its modern look.
Really nice
I’m really hoping that the Gtk/Gnome people will consider using this theme as default theme.
I do have some issues with it though, the menubar and some other parts are too heavy, and the window decoration doesn’t fit with the widget style (imho).
And I would really like to see a custom color dialog like in test1.png
Hi Eugenia, i will comment your mod. I’m not a codder, but i know the GUI’s look’n’feels. Don’t shot me, it’s just MHO:
-Generally, the colors are too much contrasted. The colors combination must bee more fine. Imagine 6 windows open at same time with lots of widgets: it will be very confusing to choose between buttons.
-The theme seems a variation (not a copy) of WindowsXP styles, specially for buttons and colors. Personal opinion: don’t use the blue tones.
-The shadowed “Apply” button must be aligned with other buttons, maybe making their shadow smaller.
-IMO, the buttons musb be more squared, or better more rounded, to avoid it’s XP-style
-I don’t like the scroll bars too.
-I like the Zsnake effect, but, as other widgets, it must be less contrast
Anyway, good aproach
I love it! Would be great if it would be default Theme for Gtk 2.4/Gnome 2.6 … Design of the UI is one of the important things on how people decide between desktops. Your Design is something really *new*, like Aqua or Luna were too.
I don’t know anything about themes or HID stuff, but I really appreciate Eugenia putting in the effort (which so many people don’t) in making the Unix desktop the best it can be.
pretty
Bads:
– Gradients, gradients everywhere! It gives everything pretty XP-ish look, which IMO isn’t the best idea. Also the gradients add to general visual bloat these mockups.
– Widgets are too thick. Z-Snake looks terrible. The one from BeOS menus was pretty cool, this one is simply too thick.
– Widget borders: too thick and too rounded.
Goods:
– Colors. Get rid of gradients and make everything slimmer andlighter and this will be pretty nice thme
I don’t see much things in this mockup which aren’t yet supported by GTK+-2.2. You write:
“If people from GTK+ team read this, please consider at
least allowing bolding of headers, tabs, buttons and
menus.”
Are you refering to bold text here? Complex text markup is supported since GTK+ version 2.0 and so are font attributes. Some apps already make heavy use of it. Should be trivial to use from a theme (gtkrc).
I don’t like it so much, I mean it’s to much Xp-ish (buttons, background coluour), Be-oish, and Mozill-ish. However some things I like very much but sadly they are not supported by GTK (and if you look just how long it takes to make new file/open dialouge you will se that your theme would be faster accepted by kde). I like Z-snake (colour is too mozilla like), and I really like sidebar dots like in kde or win explorer (don’t know what is called but where the Look and Feel, Window manager and colour theme are written. Nice job anyway keep up the good work.
in my opinion, it (zsnake) doesn’t look good at all.
it might be eyecandy allright, but it sure does not look
clean, menus are cluttered. dropdown w/ zsnake looks scary,
hopefully it’s not implementable (you have to consider a
scrollbar in a dropdown menu, don’t you?).
i also think radios and checkbuttons are too thick.
now the pros
i do like the colors, especially this beos-like blue,
although you use too many gradients (like in selection menu
– this it too flashy, makes letters hard to read).
tabs and tree menu look great, i’d like to see that in
Gnome one day. big scrollbars and buttons are definitely
good ideas, though they look kind of XP-ish.
keep it mockin’
regards,
artb.
Nice job, Eugenia. The only thing I don’t like is the Z Snake effect, but if there was a way to turn it off, that would be great. Otherwise, I’d use this ui right now. Very nice.
Also, I agree with a previous poster that it’s one thing to complain about something but it’s another to actually do some work to suggest alternatives. Excellent work. Thanks for the mockups.
The snake thing to my eyes clutters the menus.
I didn’t like the beige under the menu icons when they first appeared in MS Office, and still don’t like them here.
I have a serious problem with window titles which place the close button so close to the maximize button. The GNOME HIG recommends “Close | Title | Min | Max” so that dangerous buttons are as far away as possible from non-dangerous buttons.
Someone was saying they are fed up with blue — try shades of brown/cream. My theme — SandyCrack — is based around the colour of Wile Coyote (literally, I have a picture of him). A sample is at http://www.burtonini.com/computing/screenshots/sj-main.png
Really nice imho. It’s a bit similar imho to http://kde-look.org/content/show.php?content=6390 but that’s not a problem at all, as that is a very nice, clean theme too (unfortunatelly qt only atm). I hope it will be implemeneted for both kde and gnome as i use kde as de, mainly for karamba, but use some gtk apps too, and i HATE when they look differnet. Anyway does somebody know any other unified solution than geramik/keramik which is available as source (i didn’t find a “bluecurve theme source” ) ?.
I love the treatment of the buttons and the sliders; they look fantastic.
I think the window border is a little fat and imposing compared to the rest of the theme, but I always have problems with grabbing thin pixel borders so I’m not sure; maybe soften up the inside edge of the border so it isn’t so distinct or it blends more (more like the rest of the theme)
Also, have you tried changing the frame outline (sorry; its called a frame in gtk; for instance the curving line around “header”) from blue to brown? I really like themes that do a multi colored menu like that (hearkens back to Reno desk, which was fantastic), but I think the brown might be able to play a bigger part. Or maybe even the green, since you are using the colors from the buttons.
I was wondering, do you think about how other themes could mix with yours while you’re designing? The menu system in particular looks fairly original (from what i’ve used, anyway), but how would the theme work with say different window decorations? I bring this up because I use Mist w/ metabox window decorations in gnome2, and there are many other themes in gnome2 that go quite nicely together.
Nice Job. I have a few questions…
1) The graphics appear aesthetically pleasing, but could explain what makes this design unique from other equally aesthetically pleasing graphical designs?
2) What significant contribution is being made to human computer interaction design here?
3) What aspects of human cognition are being addressed in this design that makes these graphical representations more usable than others?
Thanks
I think the z snake thing is really good! The use is to see what submenu you’re in and you might say it is redundant information since the location of the submenu already indicates where you are, HOWEVER, I think it looks even better now.
Kepp up the good work!
Very nice, eugenia!
minor gripe: in Test1, the inner box-thingie (as outlined by a blue rounded box; someone give me the technical term) is a bit confusing to the eye for a moment; at first it looks as if it has the same context and depth as the outer two boxes, and at the same time the lack of a title makes it seem indistinct. otherwise, again, great job!
> You don’t understand!!! This window is a PLACEHOLDER for the windows, it is NOT an application that has all these wigets in there!!! It is just a window to show you what it could be in there!
I *know* that. Perhaps I should clarify. I mean that the *widgets* look a little too busy, over-ornate, even misleading, now I took a second look at it.
What is the difference between Apply, Ok, and Defaults such that they have to have such visually contrasting styles?
Why the shading of everything?
If you’re intent on this style, why not have the window borders, style and widgets reflect and complement the style of the others?
I hope I’ve explained myself a little more clearly.
Quite nice, although I do not like all the huge round corners; it isn’t subtle enough to my likes.
One thing I think you should really improve is the window decoration. Try this: look at the top left of the window, then follow the left border to the bottom and the bottom-right. Do you notice how the perspective of the border changes from concave to convex? (sorry, I do not really know the correct english words… anyhow, it reminds me of Escher’s “Hol en Bol”).
That window in the test1.png looks a little familiar! Nice though, I quite like them. With some criticisms though..
They look good in most places but seem a little overdone in others. The menus are too much; the “snake” confusingly appears to start behind the menu but then comes across the menu item and follows down the submenu. It looks a little like the menu has been pushed through the snake. The snake doesn’t really seem to add anything for the user either, as they already know which menus and sub-menus they have open. Simply highlighting the menu item they are over would seem to be enough. The coffee colour down the left edge of the menus is odd, too. You don’t use it anywhere else in the entire scheme, so it sticks out a fair amount and draws the eye straight to it.
The drop-down menu arrows are confusing. As the menu drops-down, the arrow should point down as well; the principle of least surprise!
The drop shadow on the “Apply” button confuses everything. For example on test2.png the Apply button has a drop shadow, the O.K button has an extra border and the Cancel button has none. Which is the default/selected button? None of the other widgets have drop shadows.
The tabs seem to “glow” too much. How about having just the “Tab” part in the widget-grey colour, the blue outline, but the main part of the tab view the same background grey colour as the rest of the application?
Now as a final thing that I’m sure will bring flames (But that is not what I am trying to do!). Joel Spolsky (Of Joel On Software/Frog Creek Software) has written User Interface Design for Programmers ( http://www.joelonsoftware.com/navLinks/fog0000000247.html ) In it he offers some interesting insights into what users actually do. One of the most interesting parts (To me at least) was the idea that a mono-spaced font E.g. Apples Chicago, is a much better font to use than a proportional, spidery one like Arial. Why? Because users can’t control a mouse, and trying to click between the letters in a sequence like ill, or rnm, is much much easier using a monospaced font than propertional. Something that had never occured to me before I must admit, but now I’m interested.
I may have to fork out some cash for a UI design book or two!
>1) The graphics appear aesthetically pleasing, but could explain what makes this design unique from other equally aesthetically pleasing graphical designs?
We are not talking about usability here, we are talking about widgets. OF course, well designed widgets do help usability. I believe this widget-set is both modern, clean, it has clarity, and it is not loaded, no matter what some people think by seeing the second mockup.
The checkbox, the list box, the menu zsnake, I believe help a lot and they are not to be found on other themes. Even Dano’s are very plain and wild looking.
>2) What significant contribution is being made to human computer interaction design here?
I have no idea what you just said here. Speak plain english please.
>3) What aspects of human cognition are being addressed in this design that makes these graphical representations more usable than others?
See above.
I just reminds me too much of the default XP theme. I don’t want gradients, rounded corners, irregular windows, etc. They just make the whole appereance of a desktop very bloated.
I think the current default theme (this one with the 1 pixel borders around buttons, not the one with the “fat” boarder) of GTK+ is one of the nicest looking themes I have ever seen – even prettier than the windows classic design.
Your mockup of the printer dialog looks acceptable in my eyes, however I still don’t understand the use of rounded corners every – it looks like the keramik window border of KDE.
Really!
Everyone will be trying it out themselves…
*Opens paint and photoshop*
I really like the blue you used for the background (69,105,130 right?). Normally, my default (after a long search) is the standard MacOS azure dark from MacOS 9, which translates to 48,70,125 in Windows. But by direct comparison, the blue you use is even easier for the eyes. Neat. Looks good with Luna silver under XP, too.
regards,
Stephan
…doesn’t really do it for _me_, but that’s just me. 🙂
I like the look of this. My main requirement with a widget set is that I can forget about it as quickly as possible, if I’m always conscious of what the gui looks like, it’s interrupting my chain of thought.
This looks forgettable, and I mean that in the nicest possible way!
“I think the current default theme (this one with the 1 pixel borders around buttons, not the one with the “fat” boarder) of GTK+ is one of the nicest looking themes I have ever seen – even prettier than the windows classic design. ”
My thoughts exactly.
I dont like Eugenia’s theme at all…
First, let me say that I quite like your design! I have some feedback that might be useful to you, and I would be interested in your response to this feedback.
I think the choices to end the dialogues (like apply, OK, cancel) require a default choice (which would probably be OK for productivity reasons) that should be made visible in the design, which is not the case now. Also, these three buttons (that describe general window choices) cause a little confusion as their makeup is similar to button used to describe tool specific choices (like save scheme)
Also, I would like to know what the reasons are for placing the menu options above the menu titles, which does not feel intuitive to me, as titles generally describe the contents of the menu. Logical thinking would therefore put the menu options on the same z-index/level of the menu title. The context relation would be better then the floating impression currently used and would suit the graphical style IMHO.
A final thing to think about is the standarisation of the HELP menu option, which imho should be given the same priority as a search option on webpages. You never know when a user will need the help function, so you’d want to put it in a consistent place. Therefore, I’d recommend to try out how this would be improved by aligning the help option to the right of the toolbar, consistently with every window. This way it won’t change position depending on the amount of menu options.
Note though that I’m not aware of technical limitations of Gnome and GTK+. If you wish I could try to mock something up myself when I have some spare time.
Hope this is helpful
@Eugenia:
>The second shot is just a placeholder for the widgets, it is NOT a
real app.<
i know
but still, the thick fonts make it IMO a little hard for
the eye to find something to focus on.
>No, they do not open downwards, not always. If you think about it, it
makes more sense to look to the option and not to a direction.<
ok, if you change the direction, you have to change the arrow. an
arrow to the option itself just doesn’t make so much sense to me..
>Without it, it looks fat.<
and with it, it looks confusing
>Tab views should be plain. Not like the terrible Keramic’s ones…
What needs, is bold font to stand out. And it has that…<
i don’t like Keramik’s tabs either. i don’t want them to be 3D..
btw, another thing, i like the idea (like in BeOS or AmigaOS) that in
the menus instead of “CTRL+Blah” a little image is displayed for the
modifier key.
and again, i really don’t want to say your theme is bad.. it’s one of
the best themes i’ve seen so far! i just think, when we are at
thinking about changing things, it could get even better
i’ve made a mockup myself and changed a few things that IMO make it look better. some changes are just subtle, but if you take a closer look, you’ll notice them. i’ve cut away everything where i didn’t make changes:
http://home.t-online.de/home/a_harnath/test2-mod.png
just my personal opinion: i don’t like it. I recognize it is very well done, but, quite simply, it is not what i would like to have on my desktop.
Who cares, you (rightly) say. Well, i noticed that my taste in desktops tends to agree with those of a certain group of “power users” – to come to the point, i like mosfet’s liquid theme a lot, I know you find it horrible, and i would very much like to hear why it is so.
federico
(what happened to my first comment-i’ve waited over an hour for it showing up…?!)
again,
i think your theme is too bright (not enough contrast-i also don’t like blue very much), and is irritating or hard for the eye (the ximian theme is better because it has dark bold frame).
as for the different coloured buttons, they might be helpfull to some users, but the mojority is using such buttons without different colours (in the windows-standard-theme) without any problem, and they look strange compared with the rest of the window.
so, at least i wouldn’t use it.
Sander, you are talking about *usability* here and how this theme would put into work. What I offer here is just a WIDGET-SET. Nothing more, nothing less. It is up to the developers to design their apps in a way that have help buttons, focused buttons etc. All I offer here is a graphics design with no other thoughts.
The mockups are stuck in the small monitor make-the-user-monkey do a million tiny operations modality of Windows 95. In fact, mostly that is where mainstream UI stopped evolving… right there, Windows 95. Oh, we have some flashy spare parts that were welded on for Windows 2000 and Windows XP, but that’s about it. Well, add some Mac OS X widgets in there too, but most of those are simply rehashes of NeXT that were made worse instead of better.
It would be refreshing to see some imagination. And real usability engineering. Just looking at the theme window… how many mouse clicks does it take to setup a new theme? Is all of it visible at once? Are the most frequently used buttons larger? Is the action of all buttons clear? If button actions have visible side-effects, can the user preview the button action if it is not already on screen?
With all the firepower a modern graphics card gives you… and modern CPU… why settle for Windows 95 style UI and its broken usability? No one works on a 640×480 screen anymore. And if the UI were intelligent, it would autosize to your screen using your desired settings anyway.
I could go on, but it’s pointless. Most usability engineers are too stupid to actually do any usability engineering. What they do is take some braindead style guide and become hawkish taskmasters and pixel dominatrixes. Unfortunately most of them no longer think and certainly do not possess imagination.
“The mere formulation of a problem is far more essential than its solution, which may be merely a matter of mathematical or experimental skills. To raise new questions, new possibilities, to regard old problems from a new angle requires creative imagination and marks real advances in science.” — Albert Einstein
very clean…id use it (if everything else could match). but you should try to take suggestions once in a while.
@Eugenia:
ugh, copy&paste from notepad somehow f*cked up the formatting on my post.. hope you still take a look at my mockup
I _hate_ the look of that, I really think it looks SO ugly and I have a hard time convincing myself that it would be good for usability… but it’s flashy and that’s what counts?
The rest of the proposal is really good however, I’m not so convince about the tabs, I think it looks a little silly that the button goes out of bounds on the tabs (test3.png – I think MyTab3 would look better if it was aligned with the border of the currently open tab “Options”) – it would be really nice.
Radio buttons look silly, I like the older dot buttons better.
Check buttons look slightly silly, I like crosses better than checks.
Both of these should stay inside the bounds of the boxes, going out of bounds looks bad.
The button select effect – the shadow bit – I would like this to be in bounds of the button, maybe a blow effect ?
but other than that I REALLY love the slighty curvy look of the widgets, the dropdown lists especially are beautiful in their default states..
1) The graphics appear aesthetically pleasing, but could explain what makes this design unique from other equally aesthetically pleasing graphical designs?
We are not talking about usability here, we are talking about widgets. OF course, well designed widgets do help usability. I believe this widget-set is both modern, clean, it has clarity, and it is not loaded, no matter what some people think by seeing the second mockup.
Saying that the widgits are “clean” is not enough, since I can find cleaner widgets. If you say that ‘clean-ness’ is a measurable attribute of a widget that can be shown to improve understanding (semantics) or perception (syntax) then how do you measure it? What is important to be careful of is that ‘clean’ ‘modern’ and ‘clarity’ are all subjective terms that describe your view of the interface.
The checkbox, the list box, the menu zsnake, I believe help a lot and they are not to be found on other themes. Even Dano’s are very plain and wild looking.
You need to be more careful when describing the actual effect of a design relative to human perception such that you use objective terms that can be measurable and provable. You explanation so far is not objective, cannot be measured, and therefore your claims cannot be substantiated.
2) What significant contribution is being made to human computer interaction design here?
I have no idea what you just said here. Speak plain english please.
Human Computer Interaction is a well established branch of computer science that deals with the issues related to humans and their interaction with computers, namely user interfaces. Check here for the latest conference : http://www.hcii2003.gr/
What I am asking is what your contribution is. What are you bringing that is new to the field of HCI. Is this just another graphical picture of widgits, or is there something really unique about this design that makes a computer more usable, and if you claim this, what is that contribution.
3) What aspects of human cognition are being addressed in this design that makes these graphical representations more usable than others?
See above
Your explanation of why your design is more usable uses terms like ‘modern’, ‘clean’, ‘clarity’ yet none of these have anything to do with cognition, i.e. how people think and perceive these designs. Saying that a design is ‘clean’ and is therefore is usable is not a complete answer because you have not shown any proof that this relationship is true. Why does ‘clean’ make the widgit usable? In other words, what can you say about how humans perceive that allows you reach this conclusion?
Allow me to translate into plain english:
>>2) What significant contribution is being made to human computer interaction design here?
>I have no idea what you just said here. Speak plain english please.
What does your theme do better to interface the user than others?
>>3) What aspects of human cognition are being addressed in this design that makes these graphical representations more usable than others?
>See above.
How does your theme make looking and finding things better than others?
Having read through these posts I should mention that 99% of them are about peoples personal oppinions of that they like or don’t like. Although a persons opinion of 100% valid, I should point out that it is only valid for them, and therefore makes no contribution to the determination of the effectiveness or validity of Eugenia’s design. Arguing about what one person likes vs what another person likes is a waste of time if you are trying to evaluate this GUI critically and objectively, but fun none the less =)
Seems like someone had the same idea I had…Sorry Simon
Ok most of them were, but what is the point of designing something for a user interface if you don’t look at the user? What did you design it for? Perhaps this is off topic then, but deciding to build a new widget set because it is nice won’t make anyone supportive, and makes me confused.
So I am left wondering how you design a featureset without thinknig about how it’s used. For example, bold menu buttons, animated checkboxes and amount of contrast between widgets are all usability issues as well as design issues, and are used by you as positive points of the design, however when I would comment on those points, they stop being design and become usability. To the best of my knowledge, usability is part of the design, even for widgets.
Sorry if I sound critical, I’m just trying to express my confusion. I think a seperate background article would help clearing things up at least for me, and would make an interesting read.
Again, much praise for the mock up of the widgets, sorry if this comment is out of the scope of the intension of the article.
This looks really great!
Good work!
But IMHO not appropriate as a default. The current default is good enough. Let GNOME not make the mistake KDE did when it chose Keramik as default — it’s as imposing as the cheer-leader they have on the first-login screen. Windows made the same mistake with XP. Everything is as round as candy.
Well if you like the XP theme then you’ll like Keramik and this one too but remember there are as many people who love it as they are people who dislike it. A default should be neutral ( not ugly, not imposing, just clean with a tough of professionalism ). Mandrake got rid of the teletubies for a reason.
The question to ask for a default theme is: Will you tolerate it if it was the only theme available? For Windows Classic, the answer is yes. For GNOME simple the answer is yes, for Bluecurve the answer is yes, for Windows XP the answer is no, for MacOS the answer is no, for Keramik the answer is no.
Just my £0.02
Spontaneously, I both like and dislike the theme. I don’t think anybody misunderstood that the mockups wheren’t actual programs. The busy look is, in my opinion, due too a slight overuse of shades and 3D effects. The fisher price of Windows XP is there, but much more appealing.
My main objection is the low contrast between the contents of widgets and the borders and other “uninteresting” parts. For example – the table in test2 has nice use of bold font and an alternative background for the headings, but at the same time the grid lines steal attention from the contents of the cells. The same applies for the borders and shadings of selections. They afford clicking in my view, but should only inform of state. And the buttons do not afford enough clicking when in combination with the selections. They might be more click appealing if they were part of a more toned-down theme, but as they are now, they are lost in the large selection of borders and shades. I would like to se the complete opposite, where buttons are shaded and fully 3D, while the selections and similar elements are toned-down and flattened. Yes, it’s more old-school, but old GUIs are well worked through. The color selections are very nice in my opinion, and a slight shift in emphasis as mentioned would make it even more appealing.
Anyway – a very nice initiative and an interesting starting point.
Looks like a mix of KDE’s web style with Dano elements and WinXP elements.
However I have to vote for “so so”. Simply because of the colour. Well, it is a preference issue. In addition to that fact that it doesn’t have enough contrass for those who have bad eye sight (some people just forget about this very large minority, do they?). Personally, I would prefer that colour darker. And the widget fonts white, again, for contras.
Plus I hope, if this gets implemented, please anti-alias the edges of widgets. They look awful especially since I’m too used to stuff like Keramik, Luna and Aqua :-P. I like the gradients (the main reason why I didn’t vote for sucks). But as for the ZSnake, how viable is this in a theme? A GTK one at that?
But hey, I’m not the UI expert.
Actually, I remember studying that indigo is the more soothing to the human eye because of its lowest wavelenghts amongst the colours (red is the worsed, because of its highest wavelenghts). I’m not sure, I completely forgot (thus shows how good am I in studying).
I thought BLEH! Until I saw the shots that were at the bottom of the page. The GTK scheme looks pretty good.
“Metacity needs to add the ability to take one pixel off its corner in addition of the usual “arc” shape that it offers.”
It has this capability. I’ve been toying with Metacity and GTK for a few weeks now, and I think it wouldn’t be too hard to pull off.
“I’m really hoping that the Gtk/Gnome people will consider using this theme as default”
🙁 I hope they leave it as it is.
Great job! 🙂
I find the target areas of the sliders, radio and check buttons to be too small, at least perception wise. Also, the sliders don’t give a clear impression of being adjustable by any other means than directly dragging the very small slider (IOW, the scale looks too static, as part of the background, without being a field open for mouse events).
Usually I can’t stand your designs, but this one I am fairly impressed by. What I really like are the menu’s and how the blueish color continues through each submenu. I’m not overly impressed with the window border especially the minimize/maximize/close buttons. I think its just the colors of them that bother me. I also wish that metacity allowed you to put buttons down the side of the window and not just the top, but that’s a whole other issue.
Looks like a combination of Dano, the KDE dotNet theme, and the KDE Ceramic theme. Overall, I like it.
I really like the widgets, but I don’t think the window title bar and buttons go along too well.
No, it’s not indigo. Indigo’s wavelength is 700 nm. Red is 400 nm. 400 nm is a much larger wavelength than 700 nm. Look for a pic of the Electromagnetic Spectrum and you’ll see.
Red’s much more soothing. That’s why darkrooms have that reddy orangey color.
…the dano styled buttons looks great. But I’m not sure if I’m a fan of the window border… and it’s wierd looking colors and icons.
What’s the purpose of this theme? Making GNOME look uglier as KDE or XP?
Well, just kidding, but sincerely it looks far too cluttered and XPish to be efficient. The initiative is good and having such a theme could help adopting new users, so I really hope it will get implemented
Most probably, I’m not the first one to comment on this, but then, I can’t be bothered reading through 80 comments. Anyway, the look of all the widgets is superp. Wonderful work Eugenia. I doubt it can get much better without being actually able to using it on a day-to-day basis.
However, I do have criticism about the window border decoration. The sharp edges don’t go well with the curved look of the other widgets. I’d love to see some elaboration on that.
Keep up the good work!
Red’s definately less soothing then blues, because red is associated with pain and danger (which is why it’s used by traffic signs), and blue by water and calming effect (which can be a drowning color if used too much).
Any art-interested person or architect can tell you that.
I would like to hear from somebody in the know how hard this would be to implement. The ZSnakes thing would be challenging but I think you could use XSHAPE to do that.
Perhaps, but that’s because of a socialization, not a physical attribute.
Higher wavelength waves are able to transmit much higher energy than lower wavelength ones. So even that blue is ‘calming’ and red is not, blue is more “intense”, so to speak, since it has higher wavelength.
I don’t think this theme is especially beautiful or overwhelming in the aesthetic sense, but that also happens to be what I really like about it.
This is the kind of theme that I would like to have when I am sitting in front of a workstation all day, staring at the screen and working for many hours at a time. It draws the user’s eye to the key areas of interest very subtly and effectively without relying on any kind of wild eye-candy tricks and I like that. All of that anti-aliasing and gradient stuff really helps to ‘comfort the eye’ and that’s what I like about XP Luna too.
The ZSnake is a bit disconcerting, and I would have to see it in action before deciding on whether or not I like it. I prefer a circle in selected radio buttons, rather than that little switch you are using. At first, I thought I preferred (the default) Gnome’s greyishness but then decided that your blue-tint would feel better on my eyes over time.
When I look at this theme and think about having to work in it for a long period of time, I get a cool and comfortable feeling that I don’t get from other, flashier, themes.
Very nice. Meant to be worked in, not gawked at (like Aqua). Functionally aesthetic more than visually and an excellent default theme.
If YellowTab has any brains, they will hire you and use this for Zeta (no green-card problems in Germany, I presume?).
So I got it upsidedown. Didn’t I tell you that I suck in physics?
When you hear “red”, people normally associate it with those bright bright red lights – there are many tones of red, and I mean many. Use pure blue, and viola, it has generally the same effect than red. In many cultures, including that of 1 billion people (Chinese), red is more soothing and calm than blue.
When I first installed KDE3 I was eager to try out Keramik. I was amazed by all the gradients and shiny buttons. But my excitement did not last to long. For day to day work I prefer a simple, clean and elegant theme and now I use QtCurve which is really nice and the old KDE2 window decoration + the KDE default colors. In my eyes, this looks really nice and offers you an interface, you can just work with.
I really appretiate all the work Eugenia invests in this theme, but for me it looks too much like Keramik or similar themes. A theme that is nice to impress some friends, but is not ideal for daily work because it uses too many colors, the buttons, lines etc. need too much space and so on.
Personally I really prefer a clean, elegant interface which does not waste a lot of space with gradients, shadows etc. and offers you the functionallity to make your life easier. I think currently KDE + QtCurve is a very nice combination that helps me a lot to solve my day to day work efficiently (I also installed KDE3.2 debs, I did not really look at it in detail, but what I saw at a first glance looks really nice).
Especially the discussion that takes place on the GNOME mailing lists afterwards.
soft…a little yellow…kinda feels like my eyes are blurry because its not really crisp anywhere…just my eyes 17 cents
I like it, I like it.
I think that your widgets and overall design are very slick, neat, and clean. Excellent!
“Red’s definately less soothing then blues, because red is associated with pain and danger”
Tell that to my Lava Lamp ;o)
i am not sure if you would implement these buttons as bimaps or drawn line by line.
Because I really hate themes which can’t be changed to ANY color. Like WindowsXP’s luna. I don’t like it at all, but even IF i liked it, I could not change the colors to anything different than 3 colors since the whole GUI is a big bitmap but not drawn by rectangles and lines anymore.
i lub it!
I would say that this theme don’t need any bitmaps. You can do neat things with GTK primitives. FYI, I implemented LunaXP for metacity using gtk primitives only (so it does get the GTK theme color). Grab it here: http://sebdelestaing.free.fr/metacity/MetaXP.tar.gz
I’ve created a FULL XP GTK/Meta theme, but I’m afraid to release it. 🙁
I looked up ‘graphical user interface design’ at http://www.amazon.com and it came up with a dozen titles. I don’t understand one quarter of what you people are saying here, I really need to read a couple of those books.
I’ll tell you one thing. I didn’t like the default theme of Gnome2 or RH 9.0 so I changed it to ‘ocean dream’ and I messed around with several other attributes, and my desktop looks reasonably nice now, but I would definately like more choices. I actually want some liquid elements, but more generally I just want more functionality because I’m not sure if adding custom themes from the Internet even works on RH9.0. I tried a few times and was unsucessful. $HOME/.themes does nothing.
I think that a lot of work could be done, not just in terms of new designs (although this is obviously important), but also in terms of documentation and testing. It just requires that people become interested and also participate / learn.