Pretty as a picture

Eye of GNOME is one of those trusty applications that you just can’t live without. I love it for it’s simplicity. That said, I do think that it could do with a bit of polish in the UI department. So I’ve spent a little while thinking about how EoG’s interface could be improved. Here’s the result:

What do these changes accomplish?

  • First, they make EoG look like a viewer. The bottom toolbar is reminiscent of a media player. The design prioritises content over functionality: the first thing you see is the image being displayed, not a toolbar.
  • The second difference is about enhancing the viewing experience. The black background makes it easier to focus on the image, as does the border around it.
  • Third, the toolbar has been refined a little. The gallery and slideshow buttons are exposed, and the separation of the groups of icons is both visually balanced and easier to mentally process.
  • Fourth, the appearance of the image gallery has been improved, with the viewfinder-esque selector providing a mental cue about the application’s purpose.

There’s a page which describes the design, which I’ve broken down into a series of actionable tasks. Best of all, some of the changes included in the design are already on the way to being implemented. :)

About these ads
This entry was posted in gnome-ux and tagged . Bookmark the permalink.

36 Responses to Pretty as a picture

  1. Kris Thomsen says:

    Hi,

    I love this idea! :) Looks really great, imo.
    Hope it will get implemented for GNOME 3.x

  2. Olivier Le Thanh Duong says:

    I like it, except for one detail : the removal of the photo’s informations in the status bar, I find it very useful to be always displayed. Would it be possible to try to integrate that in your design?

  3. ethana2 says:

    Toolbars belong in the top part of a window.
    Menu bars belong in the top panel.

    Too many panels does look ugly and confusing. Google realized this when they made Chrome.

    • ethana2 says:

      The most important aspect of a UI is consistency.

      • Simon says:

        Wrong. The most important aspect of a UI is that it works for it’s users.

        Consistency is nothing more than a tool for achieving that goal – an important tool, to be sure, but it shouldn’t be mistaken for the goal itself. If breaking with consistency produces a better outcome for the user, then it’s absolutely the right thing to do.

    • I second this. Toolbars go at the top of the window. Even if one application prefers them to the left and some other thinks bottom is the new top.

      • Allan says:

        So should Totem move its toolbar to the top?

      • Hylke says:

        UI layout dogmas like this are exactly why a lot of GNOME apps are not as good as they could be.
        Examples: Cheese’s UI is good because it doesn’t follow the toolbar on top, and Sound Recorder’s UI sucks because it does. There are good cases for toolbars, or them being on top but it has to be reviewed case by case. As long as the toolbars, wherever they are, behave consistently there is no problem.

  4. Simon says:

    Looks good, though I agree with Olivier that basic info like width and height should be available somewhere without having to bring up the full properties and metadata panel. Though something like a tooltip might be sufficient, without the need for a permanent status bar.

    To those commenting on the toolbar matter, I actually disagree. Yes, toolbars traditionally go on top, but this doesn’t actually look like a toolbar to me – it’s more like the navigation controls you see at the bottom of a typical media player.

  5. Simon says:

    One additional comment though – consider how this will look on a small screen, e.g the 1024×600 typical of a netbook. I suspect you’ll find that on such a system, displaying the image collection by default is completely unusable.

    Actually, I think I’d find it annoying on a large screen too – it’s fine if I want to browse a directory, but if I just want to open a single image from Nautilus, I don’t want the view cluttered by a list of any other images that happen to be in the directory. At present, I tend to keep the collection panel turned off, except when I deliberately choose to use it.

    • Allan says:

      Yep, the netbook issue is a real one. That said, you can toggle the gallery, and a netbook might require different defaults anyway.

      There has to be a navigation mechanism present by default though. It is extremely common for users to want to view a series of images, not just one.

      • Felix Riemann says:

        Well, it is actually possible to place the collection vertically to the left or right of the picture by modifying a certain GConf key. Although it’s not entirely glitch-free (esp. in fullscreen) it leaves more of the precious vertical screen space to the picture on modern widescreen displays. Likely helps when they become netbook-sized, too.

      • Simon says:

        There has to be a navigation mechanism present by default though. It is extremely common for users to want to view a series of images, not just one.

        True, but I very rarely use EOG’s Image Collection panel for that – even on a large screen, it takes up space displaying stuff I have no interest in seeing. The next/previous buttons (or more accurately, their keyboard equivalents) are all the navigation I normally need, or want.

        Keep in mind, by the way, that when you’re browsing files in a directory, the Image Collection panel is probably just duplicating the contents of the Nautilus window EOG was opened from. To me, it’s only useful when I’ve explicitly opened multiple files – i.e the view *doesn’t* correspond to the contents of a single directory… and that’s not a common use case for me…

      • Allan says:

        Relying on Nautilus for navigation functionality isn’t really an option. Closing EoG each time and finding the next image you want to view produces a highly fragmented and awkward user experience. That kind of interaction model would be better served by some kind of quick look application.

        The next/previous buttons are pretty good in the sense that they offer some navigation capability without a massive UI overhead, and they are OK when a user wants to view every image in the directory. The problem is that they clutter the toolbar and are not well-suited to viewing multiple non-sequential images. This design attempts to resolve this by showing the image collection for those kinds of operation and highlighting the slideshow for situations when a user wants to view every image.

    • sEbastian says:

      same thought here, what about the more and more commong 16:9 and 16:10 screens. On such screens the collection should go to one side of the picture and not below

      • Allan says:

        I’ve explored that possibility. A vertical image collection distracts from the image being displayed (I posted a comparison to this bug report). It would also mean that the centrally justified icons wouldn’t line up with the main image and would combine badly with side-panels.

      • sEbastian says:

        even SABL said it is all about vertical space :-)

  6. Søren Hauberg says:

    Funny with the toolbar-up-or-down discussion. Personally, I don’t see any buttons I would use that often, so I’d just remove the bar altogether. But then again, I’m no UI designer…

  7. pt says:

    The toolbar is ugly, takes the sleekness from the black background. The toolbar should be transparent and the buttons should only appear when the mouse is over it.
    This would make EOG a better viewer

    • Hylke says:

      “The toolbar should be transparent and the buttons should only appear when the mouse is over it.”

      Can’t because of a11y.
      We can use a dark gtk theme by default. It’s a media viewer after all.

  8. Vaibhav says:

    Are those Next/Prev buttons or rotate buttons in the bottom?

  9. Mårten W says:

    As long as EOG pre-loads the next picture and keeps the previous picture in memory so that switching between images is made fluid. It’ Ok.
    I’d rather have the whole image shown instead of that “cover-flow” thingy.

  10. Dave says:

    I work for the City of Largo and we use EOG to display images for our employees. The area that they mention to me all the time is *printing*. They want to be able to have lots of options to print them 2 up or 4 up or whatever meets their needs. If you want to find me on the IRC, I’m around all the time. dave_largo.

  11. spaetz says:

    Ohh, the black background please!! And black background in the preview gallery too! The current gray/white distracts a lot. And then preload the next image. The rest can stay as it is, I don’t care.

  12. nicu says:

    I am a photographer and a *heavy* Eye of GNOME (I do almost all my photo organizing – tens of thousands – with Nautilus, EOG and some scripts involving ImageMagick). With that said, I do *not* like your proposed change:
    - the toolbar is supposed at the top, as per GNOME HIG, it is a GNOME application and it should behave consistently with all the GNOME apps on my desktop;
    - I *need* the info currently available in the statusbar (file size, image dimensions), I use it all the time. Moving it is a dialog won’t cut it, will require additional clicks;
    - the black background is distracting: most of the time I *work* with the photos, having them in windows, sometime several EOG windows opened at the same time, so much black distracts my attention. Of course, when just *viewing* photos, the black background is good, but then I use EOG in full screen mode, when the background is already black;
    - as I use the app to *work* on images, not to *look* at them, for me viewing the collection by default is not useful, hope it will remember my choice and start next time in the simple mode.

    • Hylke says:

      Looking at all of your comments, it seems that F-Spot or Gthumb are more for you :)

      • nicu says:

        Uh, no… I tried those and found them less useful than the combination of Nautilus + EOG… for years I used Gthumb *ony* for its “Export to web” feature, and now that was removed I just uninstalled it. I do serious photography on Linux for years and I know well the tools.

      • Hylke says:

        Then those tools need to be made better, instead of adding more bloat to a basic image viewer. We’re already working on redesigning F-spot to be bettter at the features you described.

      • nicu says:

        You have a wrong understanding of what “bloat” is, is not bloat to have easily accessible some basic info, bloat is to have to install all the Mono stack for mere image viewing.

      • mike says:

        yeah, mono is such a bloat when working with photos :D

        it’s not even the size of 30 photos, so when it helps me manage thousands of them, that is very negligible.

        but then again you just sound like a whiner and I can’t stop smiling..

      • Hylke says:

        “You have a wrong understanding of what “bloat” is”

        We’re talking about the user interface here, not system libraries.

        Sure, photographers need to know such information, but the majority of EOG users won’t be photographers.

        Things like showing the dimensions could be done with a plugin.

  13. David says:

    Got lazy at the end and used a stock wallpaper icon.
    img222.imageshack.us/img222/3982/eyeofgnome.jpg

    • Dave says:

      Better.
      http://img100.imageshack.us/img100/6710/eogj.jpg
      Nice option would be to be able to disable the grey, or even show location instead of size. Click date for img notes/eog settings, edit expands the bar and changes everything to its right. Click scaled to switch between 1:1 or drag it for precision. Whole box is grab to move, click to slide show or edges for next/previous, swipe if you can touch. Should be able to drag images to other programs to share.

      I think the image gallery is bad because it delays work on the image experience in nautilus which is where most people will explore their images. However it would be cool if when you pinch the image or drag scale the image below default, the image would zoom out to show more images.

      Of course drag to top to expand or grab the edges and minimize is already in the tray. I’ve thought of most everything I hope.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s