Redesign the nautilus filemanager (part 2)

My work on nautilus continues with this new post (click to know more about the first part) focusing on how to improve the way people interact with it. Let’s start with a short overview of the topics discussed:

Grid system

Mockups are built over a concept of Grid view. The grid view, inspired by the CSS grid system, shows files with a different approach and replaces the Nautilus icon view

Animations

Small and clear animations can preview the effect of an action, draw attention on a change, or visually explain a task. Selection, file transfer, drag&drop are common tasks where to integrate them

Responsive Icons

The most used approach to interact with icons in a file-manager currently is the right click mouse button. A different and unobtrusive technique is discussed

Grid system & Responsive icons

A grid view is a modified version of the Nautilus icon view in which elements have all the same size and a selection area appears when your mouse is over an element.

Grid view details

Contiguous selection in a grid view

Close to a CSS grid system (used in website content organization), the main purposes is to clean the interface and clearly define item borders. Items in such a grid appear as follows:


Responsive icon in a grid view

Actions over a contiguous selection

  1. Moving the mouse pointer over an element shows actions on its edge. The use of the edge is intentional: showing actions in the middle of an item can be dangerous, you can click the “Move to trash” button even if you want to simply open the document
  2. Actions list could be static or dynamic and appears only on big icons (minimum size required)
  3. Actions can be showed over a contiguous selection. It may be a good point to show them over non-contiguous selection. However, I failed to design this difficult interaction (any idea is welcomed)

 

The switch to a Grid view present some difficulties:

Text truncation

Current text truncation creates icon alignment problems. In my opinion, 2 lines are a good compromise for filenames. Obviously increasing the zoom of an item makes lines longer and more characters may be visible in the 2-line filename. A tooltip (containing the full filename) should appear when the mouse is over a truncated name.

Different icon size on the same view

Different size for icons at the same zoom level

I’m not telling to use the same size for all icons, but icons cannot exceed a defined limit. As you can see (pictures above) icons with previews have a different size than the others.

 

Animations

Animations make life easier. Great animations make hard tasks simple, preview the effect of an action, provide useful feedbacks to users and help people avoiding errors by drawing attention on a change. Unlikely other file-managers, Nautilus interface has always been poor of animations. I focused my work on common tasks such as the selection and moving of multiple items, drag&drop and cut&paste. Below the results:

Multiple selection animation

Drag to folder (left panel) animation

Drag to folder animation

Cut & paste animation


I believe all animations are clear enough and I’m not going to analyse them further. However, I want you to notice the grey icons in the “Multiple selection animation”. Selecting a group of icons and dragging them shadows the original item location. The animations clearly points out that you are in a transitional state (you are moving them from one place to another) and provide feedbacks.

That’s all. I hope you enjoyed this post, let me know your thoughts…

Advertisements

media-applet + gnome format + gnome-bluetooth = Better media integration in gnome

I never been satisfied the way gnome handles local/network devices and removable media. This is the main reason  I started working on  media-applet. With the 0.4 release I reached all  my main goal and to people telling me what’s next I answered that I would have liked to work on integration between media-applet and gnome.

And now I have some good results… Currently I integrated media-applet with gnome-format to easily format removable media and with gnome-bluetooth for browsing and sending files to bluetooth devices. This is not much  but I think this could be a starting point for rethinking the way gnome manages devices.

A screenshot is more than thousand words..

media-applet + gnome-format + gnome-bluetooth

media-applet + gnome-format + gnome-bluetooth


Stay tuned…