GNOME Design Update

It’s been a while since I’ve done one of these design update posts. There’s plenty going on in GNOME design at the moment though, so I thought it would be a good idea to write about what’s being worked on. Here’s what we’ve been up to recently.

Perhaps the biggest and most exciting design venture right now is Jon and Jimmac’s ongoing application design work. We all know about Documents and Contacts, which had initial releases in 3.2. Now other new application designs are being produced, including Music, Photos, Chat, Transfers, Weather, Web, Mail, Calendar, Videos, Clock, Maps and Notes. These application designs are looking pretty awesome, and we’re already had developers stepping up to work on them. You can check them out them out on the wiki.

Music
Music

We’re also looking to refresh the design of many of our utility applications at the moment. Vinicius did a really nice design for one of these recently – the GNOME dictionary. I really like the simplicity of this…

Dictionary
Dictionary

Jimmac has also been looking at making it easy to use different kinds of authentication with GNOME 3, and has designed a new GNOME Credentials application as well as some updates to Seahorse.

Credentials
Credentials

And Jon has been looking at how to respond to technical problems when they happen, as well as designs for a new problem reporting application, called Oops. Jimmac’s been on hand to help with the visuals there. Cue cute graphics:

Fail Whale
Fail Whale
Oops
Oops

Hylke’s been helping out in a few different places, mostly around system settings. He did a very nice redesign of the zoom options the other day. These are going to be added to the Universal Access settings panel for next release.

Jimmac (gosh that man works hard!) has also made some great updates to Cantarell, GNOME’s default font, including new characters and improved hinting.

Cantarell
Cantarell

Another part of System Settings that has been getting attention is the network panel, where Lapo has been valiantly pushing on with an epic redesign.

Monster Network Settings
Monster Network Settings

Finally, I’ve been working on a number of system settings panels, including Power and Region and Language, and I’ve been untangling some of our text input methods. I’ve also been developing the Contacts designs to fit in with our other application designs.

As you can see, there’s lots going on in GNOME design at the moment. These are exciting times – we’re filling in large blanks in the GNOME 3 picture and we’re pulling things together to work as a whole. If you want to follow what’s happening, just subscribe the the relevant wiki pages or watch our Github repositories. Or stay tuned – there are more updates to come.

65 thoughts on “GNOME Design Update”

  1. [quote]You can check them out them out on the wiki.[/quote]

    Appears that the link to the wiki is incorrect.

    1. I like the switches. I think a lot of the designer folk do too, although not everyone agrees (since they never do!)

      1. I’m one of the people who disagrees with you :P but my main complaint is the lack of consistency as only a few of the applications that I use daily make use of the slider. Inconsistency bugs me a lot. Also, have their been user tests done to compare the slider with the checkbox?

      2. Thanks for the link. Bug report for the offending application has been submitted.

      4. They certainly look nice but my, continuing, problem with them is I can’t tell when they are on or off. Now part of that is a theming issue (google and nord are the clearest, IMHO, b/c they use the circuit switch metaphor), but the very fact that theming contributes so much to its usability seems a strike against it. A visual binary device should be as unambiguous as possible. Making them switches seems like a move away from functionality.
        Also, they way you use them isn’t consistent. In any other place than when you are using ST, you can move the switches in realtime rather than just clicking on them. Now that maybe a current limitation in ST, but I THINK it is simply the way it has been implemented thus far.
        See http://userexperience.evantageconsulting.com/2010/11/ui-guidelines-for-skeuomorphic-multi-touch-interfaces/

    1. That’s up to the Rhythmbox developers. :) We’re working hard to talk to all the involved parties, and we’d love to work with existing project contributors if they are willing.

      2. I can’t really see how that design would replace Rhythmbox’s current design, since there seems to be no place for podcasts, online radios, online music stores or even MP3 players, smartphones and similar devices (you know, in order to synchronize or copy music to them). Have you thought about that? Perhaps online radios are not so important but support for podcasts, music stores and device synchronization are things that everybody expect from a desktop music player. Maybe you’re thinking about having different applications for this? And don’t get me wrong: I’m no GNOME 3 hater, quite the contrary, I love GNOME 3 and I’m very enthusiast and really appreciate all this redesign effort. Just wondering about these pretty common use cases.

  5. Wow! You keep surprising me! What about a VPN setting in the network settings? I’ve been really missing them in the current network settings.

    1. VPN is a connection type in GNOME 3 – go to network settings, then click the add button at the bottom of the list. Is that what you mean?

      1. Haha, I have no idea how I’ve been able to miss that! Thanks!

  6. These are awesome!

    I’m wondering about the Oops screen, though. If the system is sufficiently alive to be able to display it, it might be sufficiently alive to do an emergency reboot via the magic Alt+SysRq+E,I,S,U,B sequence. The Alt+SysRq+U can help prevent data loss.

    Now I’m not actually advocating that the message itself should say “Hold down Alt + SysRq and press E, I, S, U, B in that order to restart”. Perhaps whichever OS component noticed the hang and displayed the oops screen ought to initiate the emergency reboot via a series of writes to /proc/sysrq_trigger, and the message should just say “Attempting an emergency system restart. If it doesn’t work within 30 seconds, hold down the power button.”

    1. My thoughts too. Holding down the power button is an archaic way of doing things, and when a user’s data is in question, we should do all that’s possible to save it.

    2. I was thinking the same thing… if the system is in a state where it can display a pretty graphical “everything went wrong” screen, it can surely do better than just “hold down the power button”.

  7. The pressing Alt thing in the nm-applet mockup is just wrong.

  8. I’m just commenting to point out that some languages (like Polish) actually use US keyboards with third-level AltGr as the main input method for all three of Windows, OS X and Linux. There used to be special keyboards with custom layouts but nobody uses (literally nobody, shops don’t even offer them for sale).

  9. Maybe instead of just holding the power button, have them do RSEINUB. That would be a safer alternative.

  10. As a user and financial supporter of Gnome I have to admit that I love what you are doing there :)

    As a note I might add, changing menu entries by pressing the Alt key is really annoying.

  11. Okey, so GNOME is for tablets only now, as it seems. Yet there are NO tablets with GNOME loaded. All this is too dumb for desktop. Desktop isn’t just a big tablet. So we’re doing GNOME for tablets that don’t use GNOME. Nice. Makes perfect sense.

    1. Big, easy to use buttons are intuitive and look simple to use to newcomers. Would you rather have a million buttons and options on screen at all times that overwhelm people?

  12. Sort of off topic, but I notice that the Music player mockup shows Ubuntu’s overlay scrollbars. Are there plans to integrate those in Gnome upstream? (I think it would be great if they were!)

    1. We’re keen to replace traditional scrollbars with mobile-style overlaid indicators. However, the Ubuntu implementation isn’t compatible with upstream GNOME, and I don’t think we quite want that design. We’ll probably have to wait to get the technical ability to do what we want, unfortunately….

      [EDIT: I’ve subsequently found out that they are compatible. I thought I had read that they weren’t – my mistake.]

      1. Why do you say it’s not compatible? It works super in Gnome3. And it makes Gnome3 look much less sucky (together with prefer-dark-theme and global menu).

        cf this screenshot http://i.imgur.com/NGGVu.png

      3. Happy to hear you aren’t adopting that directly. I still find Ubuntu’s hack annoying sometimes. It’s difficult to scroll around in a larger document (where the wheel is inefficient) because you have to hit the tiny indicator. Mobile doesn’t have this problem because you can just press anywhere inside the window and slide around.

  13. I just found a reference here from OMG! Ubuntu and webupd8. I just wanted to say here: keep up the awesome work. This stuff looks absolutely splendid, and really invigorates my enthusiasm for Gnome. I very much look forward to seeing where all this goes. The chat update, which I saw in the other blogs’ posts, has me indeed very excited.

    This is a very nice post, detailed with great screenshots that show off what’s in the works. Thanks for writing this up! Definitely adding this blog to my rss reader.

    1. Boxes is in a state where you can check it out, and Documents is already available to play with. I’m pretty sure that Chat, Music, Videos, and Photos will be more than one release out, and even then they will be fairly young applications.

      However, Documents already shows how powerful integration with GNOME can be even on a basic level, with the Online Accounts integration. I think we’ll start to see a lot of applications of a completely different kind, compared to what we’ve traditionally seen in desktop applications.

      I love how it’s getting more personal, and less archaic. More user-focused, less user-using. Computers are all about the power of interaction, and what can emerge from that. Hopefully we will be able to deliver, but as Alan says, people are stepping up. Perhaps it’s time for more people to step up and embrace GNOME 3, so this vision doesn’t take half a decade to realize.

      1. The complete integration with the web, in particular, will be key. GNOME3 should integrate, and work synonymously, with the web. Online Accounts is definitely an excellent start.

  15. Looks neat!
    2 things on the dictionary:
    – For the pronunciation, why not using espeak or something similar rather than an on-line tool ?
    – I would put the navigation bar at the bottom rather than the top to keep the word looked for at the same place (not having it jumping up and down according to if you have a historic or not)

  16. I see no titlebar — will the music app be fullscreen-only or are you experimenting with different window management?
    Also, will the app use the checkbox button and be single-click only (*fingers crossed*), or has the idea of a checkbox button failed (as it was in the mockup for Documents, but not in the final version)?
    Thanks.

    1. They’ll lose their title bars when they are maximised, and they’ll be maximised by default. I’m not sure about single-click only, but the checkbox button will certainly be there as a touch-friendly way of doing multiple selections.

      1. Are all windows going to lose title bars when maximised or just those apps? How do you unmaximise them? I hate how programs can’t have tabs integrated in title bar (Firefox) and a lot of space is wasted.

      2. Is it planned that all apps will be maximised by default or you’re only talking about these kind of “browse your files without a file browser” apps?

  18. Hi,

    I know almost everything you’re showing here is pretty much a concept, but you should really consider placing documents, photos, videos, and maybe even virtual boxes and music under the same framework!

    Why have all those different applications, with their own way of displaying items and such, when all you want to do is accomplish the same thing?, present the user their files…

    I know, i know, that’s what we usually call “file manager”, but we are talking about a whole different concept here. A specialized place for each type of content but with exactly the same interface. You know, simplify!

    Thanks, and keep up the good work
    nacho

    PS:
    It would be awesome if we could get in GNOME, iOS’s photo album look and feel… I just love the stacked effect, the white border, etc., and it would look really good applied to videos and virtual boxes too.

  19. Looks amazing! Very clean and fresh. I love how the title bars hide on maximize, that is one of my few gripes with Gnome 3.2. Plus the lack of menu bars (or rather compression of menu bars) is perfect. Really great directions here.

    I’m on Windows 7 for 8+ hours a day, but when I can I do work from my Fedora 16 machine because the Activity management is more productive than a task bar. Gnome 3.2 is the best desktop environment I’ve ever used and It looks like it’s getting even better. Thank you for your efforts and please keep on rockin!

  20. Oh, and my 2 cents on the scroll bars: Personally I think having zero scroll bars and using a Click+Drag system, like on phones and tables, is the best option (scroll wheel works too of course). Click-Throw functionality works well for large lists of things, and for box selecting you could just Shift+Click+Drag or something.

    1. Perhaps, but this makes it very awkward to do on systems with a touchpad, or with the weird nipple things on the Thinkpads (I’m not sure if anyone uses them though). And it would be awkward on desks with limited space for the mouse. Perhaps this could be an option, but it shouldn’t be the default.

  22. Do you know what the shell needs? A “spread” window switcher! I usually switch windows by throwing my mouse up in the left corner to activate the overview and there select the window I want. The problem is that I can’t select windows in other workspaces, I only see the ones in my current workspace. Alt+Tab is ok to use but it isn’t as fast. So if the a “spread” window switcher could be implemented it would be perfect!

    1. In case you didn’t know: Use Ctrl-Alt-Up/Down Arrow to move between workspaces. Use Shift-Ctrl-Alt-Up/Down to move the active window to another workspace. Hold Alt and press Tab to bring up a quick window switch with lines that indicate workspace separation. You can right-click on windows and set them to always be in the visible workspace.

  23. Really great work.

    But I have some questions:
    – On music, how do you select another source? Ex: Jamendo, OwnCloud, your mobile player or smartphone, DLNA sharing, etc.
    – Why music can be a manager but not video and photo? I see that in the wiki.
    – Why disk can’t manage KVM or RAID? Clearly explained, it is easy to use for everyone.
    – Have you some times to look this mockup: https://bugzilla.gnome.org/show_bug.cgi?id=636206 ?

    Thank you and continued success. _o/

  25. What do you use for creating these mockups? I wonder if there is a template that I could use for inkscape to make those kinds of mockups. Gnome is truely starting to look great.

  26. Hmmm good job! They look very pretty, but I have a single doubt: where are all the darker toolbars (I like them)? Think of Control Center, why does it have one and all the new software doesn’t?

  27. As others have said, this is really exciting stuff. It’s so encouraging to see such a burst of enthusiasm and innovation and concern for design as this in free software. I’m an Ubuntu user who’s falling in love with GNOME Shell, and I’m really rooting for GNOME these days. Keep it up guys!

  28. These are looking nice.
    Something I don’t understand is Documents. Why does it do?
    I have it installed, and realise it isn’t finished, but it doesn’t really do anything more than provide document specific search capabilities. IOW, it seems a bit too much like an app, when a more general purpose search tool would be better (less coding overhead since one wouldn’t have to maintain separate applications for each item type you wish to search for). The sharing feature certainly seems like belongs under a more general sharing application, and getting online documents should be possible by making Google a provider (via the new online accounts information).
    Is there any way we can get full search capability in the Shell? That is something that OSX has that I very much want to see.
    Also, do you know if the NM applet is going to allow one to alter the options even if an interface is disabled? I ask b/c I’ve had problems with not being able to connect to wireless UNTIL I changed some options (FWIW, I was eventually able to connect via the command line, and then make the necessary changes in NM).
    Thank you for the hard work!

    Best/Liam

  29. I feel obligated to say it again (as others already did): using alt key to change behaviour of buttons (or UI generally) is so wrong that I couldn’t even imagine how someone did come up with such an idea. Is there any background for this? Some discussion, document?

  30. There will be even more integration and some chages (Visual changes) for the bar at the top?? That could be prettier too. And how about the task bar? Or do you think make some twist to that tradicional idea? Cuz the navegation between taks or runnig programs is stricly by commands. Sorry for my english and if is neccesary, sorry for the ignorrance. Thanks in advances for your answer, have a good day.

  31. I experiencing a lack of configuration in wired networks. Though already existing configs can be used, you cannot create new ones. Its a shame, I have to switch to kde or something to be able to use them in gnome shell

    1. I use it to change the MAC address in work, use computer in different locations, and in all of them, I need to switch between different MACs to take DHCP. I also get into networks without DHCP server, and get in ad-hoc connections with other computers to make tests.

    2. I’m currently helping out with the networking settings redesign. I’ll make sure we take a look at those issues.

  32. I have one issue with the new proxy settings, there is no way to enter an exclusion list. This is useful in cooperate networks where the proxy is not used on internal sites. I used to setup the proxy settings with the exclusion list and apply globally, now I no longer use the proxy settings in gnome (since they have become useless in my use case) and have to configure each application’s proxy settings (that hopefully) supports the exclusion list, like Firefox to name one.

Comments are closed.