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.

Unity and the Drag&Drop way

This new post is about Interaction, focusing on relations between Unity launcher and our files. I’d like to introduce a simple extension to Unity behavior while interacting with files in our systems.

The old way

Before Unity was launched, if you needed to interact with a file you could choose one of this common options: Right click on it to see a list of actions or Drag & drop to move it.
In my opinion, both methods have some disadvantages:

  • It may be hard to find the right menu item inside the “right click menu” if you installed several Nautilus plugins
  • Drag & Drop works only for unmaximized windows
  • Drag & Drop is strictly an application dependent feature

The Unity way

With Unity Ubuntu has introduced a new drag & drop capability in the launcher:

Unity drag & drop system

The current Unity launcher drag & drop feature


If you move a file to Unity, the apps which cannot handle it are shadowed. On the contrary, the ones which are able to do the desired operation remain active. I really love this new feature and I tried to replace both Drag&Drop and Right click with this new method… Unfortunately, my attempts were unsuccessful:

  • This feature works only for apps in the launcher; so that Unity Drag&Drop can’t be a complete replacement for the right click “Open” and “Open with” menu items
  • If you are writing multiple emails and you want to attach a file to a particular email you can’t. Dropping a file to the email client will always open a new email window
  • If you are chatting with some friends and want to send them your fresh downloaded song you can’t.
  • You can’t move files to removable devices even if they are displayed in the launcher (At least not in Ubuntu 11.10)

An alternative recipe: The adaptive Unity launcher

However these are not problems, simply the launcher doesn’t work as I expected. That’s why I studied a possible alternative to the current behavior: a launcher that adapts its content depending on what you move towards it. Let’s explain my idea with an image:

The adaptive Unity launcher for an audio file

The adaptive Unity launcher for a video file

When a music file is moved to the launcher, the latter changes its content and displays:

1All the applications that can handle the file properly. The launcher could be smart enough to list the default applications together with some context related apps. In the audio file example, if you have a blank CD inserted in your CD drive, the launcher should also display the Brasero Burning Tool icon.

2 Emails and IM contacts. In addition to Email and IM client icons (specifically Thunderbird and Empathy) Unity will display thumbnail icons for each person you are chatting and for each email you are writing. This means that you can use drag & drop to attach or send files to a specific person.

3Online accounts actions. In my opinion, Unity needs to be integrated with Online accounts: I’ll discuss this subject in the section below.

4All your devices (removable and cloud) should be visible. As I use Ubuntu 11.10, I cannot be sure whether the latest Ubuntu release has solved this issue. Anyway, why can’t you copy a document to an USB stick or Dropbox share using Unity drag & drop?
As a second improvement I would replace the home directory with a file-type dependent “right” folder: if I drag a video file, the launcher will displays the Video folder (but only if that video isn’t already there). This is also a way to encourage people to use the proper Ubuntu directory structure when organizing contents.

A look at the social world…

An “Online account” menu entry has been recently added to Ubuntu User Indicator. At the time I’m writing, Google account is the only feature supported even if I think that the gnome board is planning to make this the default entry point for all online accounts such as Facebook, Twitter, Flickr, Google and the like. I also imagine that almost all gnome apps will soon be integrated with your social accounts: Thunderbird will automatically add your Gmail profile, Liferea your Google reader feed, Empathy will setup your Facebook and Gtalk accounts while Shotwell will synchronize your Flickr and Facebook galleries etc. Or maybe that’s simply what I hope to see.

Now the question is: “How can the launcher be social and integrate well with online accounts?” I think there are a lot of annoying tasks that often require several steps: uploading a video on Youtube, sharing your new photo album on Flickr, Facebook or Google+, updating your MySpace profiles with the latest songs are a few examples of that. How can we make these tasks faster? At this point, you probably know the answer: Unity Drag & drop can be the solution for your laziness 🙂

A Unity preview mode

While looking for a file preview application I tested several Mac-like preview apps but I’ve never been satisfied with them. That’s why I want to propose a totally new approach: a Unity based preview.

An audio preview example

A video preview example

Dragging a file over the right launcher icon without dropping it displays a Pop-Up with a small preview.

That’s all at the moment, if you want to share your thoughts feel free to post a comment and if you like the idea follow the link below to votes for it on Ubuntu brainstorm.


Alt + Tab and Unity

The time has come for a new article of the series “How to reinvent the wheel”. These posts are about well-designed and functional features. The only purpose I have is to show new ways of using them. Just consider it as a simple “what if” exercise. 🙂

Let’s take a look at the current state of art in the main operating systems.

Without entering the details, we can say Ubuntu, Mac and Windows7 follow, except for small differences, the same concept, which is to show a list of fully-opened apps in small thumbnails in the middle of the screen. Unlikely Windows, Ubuntu gathers the same apps in a single place and explode them when users move the selection over them. This is a simple and helpful implementation.
Now, let’s see my “what if” questions: What if launcher contents can change following users’ actions? Furthermore, What if we can list the apps we launched into the Unity launcher by pressing Alt + Tab keys? The results are shown below:

My Alt + Tab design

Simple Alt + Tab inside Unity launcher


 

Unity Alt + Tab with preview


 

Unity Alt + tab preview (multiple windows)


 
When users press the Alt+Tab combo the launcher only shows the apps you launched. If you select an app a bigger thumbnail of the window is displayed (or more thumbnails if you have more than one window).

My Alt + \ design

Simple Alt + Slash based on Unity


 

A Unity based Alt + Slash with preview

What do you think about a Unity based Alt+ tab and Alt+ \?