Interface refinements

This is a proposal improve EoG's interface. Here's the rationale:

• Priviledge content over functionality - ensure that the image being displayed has prime place in the interface.
• Provide an efficient backdrop for the viewing of images - use a frame and background that makes it easy to focus on the image being viewed.
• Rationalise the UI - ensure that there isn't overlapping functionality, reduce unecessary or repeated visual elements.
• Make it look beautiful and elegant - a simple, clean design, nicely laid out, with nice little visual touches.

The overall result is something that is elegant and attractive, as well as being easy and enjoyable to use.

Mockups

Normal View

Browsing

Zoom and Pan

Properties

Menu

Required Changes

Many of the changes required to implement these mockups can be found in the following bug reports:

• File paths get cut off in properties dialog

• Menu tweaks

• Remove the image frame

• Properties should be in a sidebar

• Nicer background colour

• Leave a border around images

• Best fit and normal zoom states

• Rename 'Image Collection' to 'Gallery'

The changes that aren't mentioned in these bugs are:

• Move the toolbar to the bottom
• This allows a user to focus primary on the image being displayed. Users will be interested in seeing the image first when using EoG, not inspecting the application's features. Moving the toolbar also aligns EoG with Totem and other media players. It says 'this is a media player', which is a good way of describing what EoG is.
• Remove the statusbar

• Once the other changes are introduced, nothing important is lost by this move. Most of the information currently in the status bar isn't needed because it is provided elsewhere (resolution is in the properties dialog, the position of the current image can be seen in the collections view, and some zoom information can be provided by button states and menu items - see this bug above about that). Removing the status bar makes the interface cleaner, more attractive, and easier to use (since it removes a lot of visual noise).

• Display the image collection by default
• It is a much much better way to browse than using previous and next buttons, and people will often want to browse to another image in the same directory as the image that has just been opened.
• Change the default toolbar layout
• If you display the collections view by default, you don't need previous and next. Normal zoom is a bit techy and geeky, so shouldn't really be in there by default. Collections view and slideshow really do need to be there. Separating the buttons into groups (view options on the right, rotation in the middle, and zoom on the right) makes it easier to understand their functionality.

• Pan with a hand

• Use a pan tool for panning instead of scroll bars. This offers more control (debatably!) and a cleaner interface.
• Use a single menu rather than a menu bar
• There are a few details that still need working out here. The following menu items would probably have to be removed though.
  • Save - it is confusing having this in EoG - it's a viewer, not an editor.
  • Page Setup - available through Print... anyway. It's confusing to have it under File.
  • Move to Trash - this is accessible through the File Manager - seems odd to have it in a viewer app.
  • Open With... - again, available from the File Manager
  • Zoom and Orientation Controls - these are available in the toolbar, though some actions (zoom to 'normal size', flip horizontally and vertically) are not available by default

Comments and Discussion

Hey Allan, looks really nice. Some things are already possible (hiding the statusbar) or are planned like the black background for image view. Just a few remarks/notes:

• Hey Felix! Glad you like the proposals. Thanks for the comments.
• Things that incorporate moving UI elements around the screen, like moving the toolbar to the bottom, are something we can probably achieve by making the UI more configurable and providing sane defaults, the collection/gallery for example is already movable.
• The viewfinder selection is a bit tricky as it likely going to require custom widgetry, also one needs to be careful in terms of theming/theme-support here. Yet, this might become easier as in preparation for a Clutter-based image view it's still undecided whether this includes the collection as well.
  • Agreed. a11y is a particular concern here - we would need to figure out how to support high contrast themes especially.
• I am not sure if your custom toolbar layout is possible with the various toolbar implementations. Generally the way to group toolbar items are the small separator bars. Also your layout bears the possibility to require covering long distances on large screens as the single groups drift apart a lot.
  • Design issues first. There's a trade-off here: The advantage of the approach I'm advocating is intelligability and aesthetics. Dividing the buttons using spacing looks good and it communicates their function better than separators (this is particularly the case with the rotate buttons, since they are located at the horizontal point around which an image is rotated). The down-side, as you've correctly identified, is the distance between buttons in those situations where they are used in succession. I would say this trade-off is the right one, since intelligability and aesthetics are more important than minor ease-of-use issues in this case (using different buttons successively will be a relatively uncommon event for EoG).
  • Implementation: the barrier here would seem to be the editable toolbar. Firefox's toolbar enables editing and the presence of spaces between icons. That kind of thing could be used to acheive the right hand justification of the zoom controls. I've never seen a toolbar editor which allows for the centre justification of controls, however.

• I am not sure what you specifically mean with the "Pan with a hand" part. Do you mean a hand cursor (#491851) or something like Gimp's navigation window (#336223)? Anyway, I wouldn't want to "ban" the scrollbars as they give some hints about your position in the image as well about your options of panning.

  • I mean the hand cursor. Thanks for pointing me to that bug, I've added it to the appropriate section above.
  • I'm not sure whether scrollbars would work with the design I've suggested. Adding them to the interface would make things pretty ugly. Again, it's trade-offs - a clean, elegant interface, or something which doesn't look as nice, but has a minor advantage in terms of functionality. One option would be to indicate position using the gallery thumbnail - you could highlight the part of the image currently being displayed.
• We had some bad experiences with using expanders (the triangular button next to "Metadata") in the metadata dialog, although they might work better in the sidebar (due to the possibility to have scrollbars) I'm not quite sure these are the way to go
  • What bad experiences were they? I don't think horizontal scrollbars should be used in the sidebar. Resizing the sidebar would be preferable.

-- FelixRiemann 2010-05-13 12:26:39

• -- AllanDay 2010-05-14

Comments and Discussion