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…

Redesign the nautilus filemanager (Part 1)

With the latest Gnome releases, a lot of work has been done on Nautilus UI and more improvements are coming in the future. Below you can see how the current implementation looks like:

 
I believe that file managers have lost their importance in the last few years: modern interfaces and integrated search tools (such as Unity on Ubuntu and Finder on Mac) organize contents in a simple and intuitive way, avoiding in the majority of cases file manager usage. However, this couldn’t be an excuse for a poor designed file manager and that’s why gnome guys are paying attention to the outdated Nautilus interface. Current nautilus design direction doesn’t satisfy me. That’s why I decided to extend the original gnome team mockups and create my own concepts. This is the first of some posts where I’m going to present my works.
 
 
 

I would love to see Nautilus with these features implemented

 

Modern & Clean interface

Compared with older versions the current nautilus design is a big step forward but I think elements should be reorganized in a different way. The philosophy is that each element has its own place

online Integration

Online integration is a critical feature on modern filemanager. The Nautilus Send-to plugin doesn’t suit anymore with the social media needs. Cloud support should also be improved

Search & Tags

The last nautilus version has introduced inline search. This a first step but it isn’t enough. Advanced search criteria and tags could be helpful when you look for a file

 

Modern & Clean interface

Concept of a new Nautilus UI

The design of the main toolbar is minimal and contains only global elements: as you can see above, the “navigation bar” is placed under the contents section. The reason is simple: current position gives local information (it refers to the current directory). Moreover, in a multi tab environment navigation should be local for each tab.
A contextual menu has been introduced to avoid right clicks. The benefit of this menu is questionable and in a future post, I will present a new way to interact with files and folders.
 

Nautilus Multi tab view


 
 
 

Online integration

Nautilus Online accounts integration

Nothing about online integration has been said on the Nautilus roadmap. A modern file manager should be integrated with online services giving the ability to share files on the Web. Cloud support still needs improvements: Ubuntu One is the only Cloud Service which is well integrated on a Linux machine.
 
 
 

Search & tags

In the near future semantic file browsing could even replace the old file system hierarchy structure: in such a scenario, users may forget about directory organization. I think that tagging system, at least at the beginning, shouldn’t replace but integrate the hierarchical file system structure. A lot of users (and I’m one of them) are new to tags and feel comfortable with hierarchical directory design.


Nautilus tags & inline search


Unfortunately tags and semantic file browsing have never been successful on the linux desktop. The problem is not in the idea of tag (content related organization instead of hierarchy organization) but in the implementation: tagging system experiments under the linux desktop all sucks. In order to be used, tagging should be immediate, easy to discover and well integrated in your gnome desktop. Makes tag visible in the nautilus left panel together with drag & drop support (tag a file by moving it over the right label) could really bring semantic file browsing over the Nautilus filemanager and more general over the entire gnome desktop.

Inline search should be integrated with a powerful and unobtrusive advanced search like the one shown in the picture below (first one).

Nautilus new and old inline search feature


When a new search is started the left panel shows advanced search criteria in a clear and smart way.

That’s all. I hope you enjoyed the post and will be there again for the second part of my nautilus redesign.

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…