Thursday, 20 January 2011

Some thoughts on GNOME 3

I stumbled across a website talking about GNOME 3 today, with a few screenshots. It's not really my first exposure to gnome-shell and friends, but it's the first time I sat down and really looked at it, and imagined myself trying to work with it.

(Disclaimer: I haven't actually tried GNOME 3 as a user yet. Thus, quite a lot of my opinions might be completely off the mark, but I'm not going to be biased by having actually used it.

Disclaimer #2: I decided to write down my immediate thoughts, to offer ideas to people working on UI things as much as possible. I like to think that my ideas and points are good ones, but they are, at the end of the day, opinions. Please respect that.

Disclaimer #3: I'm syndicating this entry on the basis that UI design is an interesting topic that doesn't get discussed all that often, please don't shoot me for going off-topic a little.)

First of all, let's take a look at the 'banner' image.

Good:
  • Visually appealing
  • Nice contrasting colours
  • Fairly consistent icons styling
  • Appealing widget styling
Bad:
  • The 'inactive' window isn't so visible. It needs to be subtle to not grab attention, but at the same time, not difficult to read.
  • The icon under 'Image Viewer' is just weird. Why is it zoomed in? It's also, I imagine, going to be really bad for contrast. I would just remove that (and the "Image Viewer" text) from the bar entirely, it seems out of place.
  • Why is the wifi icon not monochrome, like the rest? Use colours, or don't. Mixing them just leads to a mess.
Next up, the overview image:

Good:

  • Pervasive search is a useful feature
  • Easy to see what windows are open
  • Distinctive use of contrast, very visually appealing
Bad:
  • Why is there a wifi icon up the top, and another (or at least, what looks like one) down the bottom?
  • Why does the search box have a caret visible with no text entered? That looks ugly.

    Websites get this right: guide text when nothing entered, not explicitly focused - but grab text if needed. Clear guide text when text is grabbed, or when focus is explicitly granted, add caret.
  • What are the three boxes (two mostly transparent) at the bottom center?

    I presume this is some kind of pagination thing but that isn't immediately clear.
  • Why does the central view have a scrollbar?

    Typical users don't have that many windows open; while I understand the need to scale to power users (the people presumably developing the environment), I don't think scrolling is a very nice mechanism to do it with.
  • The left pane is appalling. So many ellipses.

    One thing that many modern UI implementations have done away with is text from the task bar, dock, whatever you want to call it, and this is a very good example of why that isn't such a bad idea.

    It's hard enough fitting the text in on a horizontal panel, but a vertical one has even less horizontal real-estate for horizontal text.
  • "Windows" and "Applications" look like they are made to switch state, but it isn't immediately obvious what they do. Will they function like tabs, and change the content of the center panel?
  • "Activities" in top left seems to be a state switcher. I'm unsure if the naming is very descriptive of what it does. It could also use some mechanism to stand out more, if it will be used to switch windows a lot as this appears.
  • The size of the captions of the windows seems to have a bug. Notice "Spiral_by_firas.jpg" has a lot more room on the right hand side than the left.
  • The bottom right hand icon (next to the wifi icon) is really, really hard to figure out just by looking at.
Next up, instant messaging.

Good:
  • I love integrated IM. It is one thing I adore about my Nokia N900, apart from Qt.
  • The use of gradients to differentiate sender is intriguing, subtle, and I like it
  • The scrollbar is gentle, and beautiful
Bad:
  • Why is the icon in Vincent's chat window the same as on the bar at the bottom? Why not use Vincent's avatar, or something.
  • Why is there a large chunk of empty space on the left side of the chat dialog? I think it's quite unbalancing.
  • The effect of having a zoomed icon (under "File Manager") still looks weird.
  • The purpose of the bottom right is now more clear: it's a replacement for the system tray?

    Okay, I can go with that. Splitting system and applications makes some sense.

    I'm not sure if this is the best way to position and display it, though, and to me, I think IM almost belongs as part of the system, not in the application 'systray'.
  • Lack of timestamps on the IM dialog is a little anoying.

    One interesting effect to minimise effect on dialog space might be to only timestamp conversations after a reasonable (>1-2 minute) delay with no conversation.
And last, but by no means least...

Good:
  • Nifty integration of different types of things
  • Good demonstration of search
Bad:
  • The problem of using text as opposed to icons once again rears its ugly head. This really needs fixing. So many ellipses.
  • Searching for other things here might be nice. Open windows? A document I've been working on? My web history? People I talk to?
  • How are items sorted? Alphabetically? Not sure that's a great idea.

    Giving them in some form of contextual usage (most often used, most recently used) would be a lot more useful. At least a favourite/'pin' option like the MeeGo netbook UI.
  • Why on earth is 'wo' matching 'Chess', etc?
  • Showing the number of items: reasonable.

    Displaying them on the right hand side of the screen, as far away from everything else as possible isn't so reasonable.

    I'd just not display it at all. It doesn't convey useful information that the user cannot distil by looking at the icons, if they really need to know how many items are in their boxes.

9 comments:

  1. Just observing (and occasionally using) Gnome Shell here, too, but I have a few thoughts / clarifications for you.

    The bottom area is the message tray. It's where notifications go, particularly optimised for new-fangled persistent notifications. (And not so good for transient notifications).
    It also does system tray stuff, I believe as a temporary holdover.

    Indeed, the system icons on the top right are done entirely in the shell now. It's using the fancy new symbolic icons, so they can have colours assigned dynamically. The wifi icon just hasn't been made yet ;)

    That spot you see on the right in the overview is a ginormous button to add more workspaces. Now you mention it, I see what you mean: it does look like a scrollbar!
    If I recall correctly, there is still some work to be done for that bit of the UI.

    The ellipses are something I grumble about constantly. They happen in Ubuntu's Unity, too. Hopefully not in the desktop version when it's released.

    I didn't notice that pattern with the gradients. Hm!

    That _is_ Vincent's avatar. I think your confusion with the message tray springs from an over-use of icons. You get a label for each notification / systray icon when you mouse over it. But look at all that glorious empty space! :b

    ReplyDelete
  2. You have made a very nice set of observations and I think this will help the Gnome 3 devs specially the ones handling the UI/theming stuff. This constructive criticism is much needed in the FOSS world. Great job!

    ReplyDelete
  3. It's not a scrollbar on the right. It's where you add workspaces. See this video to see how it's intended to work:
    http://www.youtube.com/watch?v=XOR2A-I2UhU

    ReplyDelete
  4. >Why on earth is 'wo' matching 'Chess', etc?

    Because it match app name and description... Like in Kde...

    ReplyDelete
  5. Some of the issues (theming of unfocused windows, wifi icon in the messaging tray...) you've mentioned are because the screenshots weren't done on a full GNOME 3 installation - it's GNOME Shell on top of GNOME 2. A lot of the other problems are known and fixes are in the works (labels are going to be removed from the dash, for instance).

    You really have to use the messaging tray to get an idea of how it works. It becomes populated with notifications that have not been responded to, and there are some animated interactions between notifications and the tray.

    ReplyDelete
  6. FYI: we've updated the screenshots on the site, and you're linking to them: some of your comments might not make sense any more.

    Let me know if you want the old versions of the images. I can probably grab them from our Git repo.

    ReplyDelete
  7. Hi Allan,

    Thanks for the comments. I'm aware that this is definitely WIP, I just think it's better that the more objective thinking that is done, the better - I'm happy to hear that a lot of these niggles are being dealt with.

    I'd appreciate a copy of the old images if it's no hassle to you, presumably the best way to get them to me is via email: viroteck@viroteck.net.

    I look forward to GNOME 3 progressing further, and reviewing it properly in the future!

    ReplyDelete
  8. I guess it may be easier to post with the old images but wouldn't it be better to repost an article with the thoughts on the new UI?

    ReplyDelete
  9. @Allan: aha! That's how come I couldn't figure out WTF he was talking about!

    (I figured, maybe you were sleep-deprived from travel...? You're usually more coherent than that.) :)

    ReplyDelete