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.

Introducing the Stack

Here we are again with a new post about Unity. This time I want to introduce you a new feature I recently designed: “the Stack“. The stack is a new 3D presentation approach for icons in the launcher, a concept to easily understand and discover whether an application is started and how many opened windows it has. Currently, as you can see from the image below, the only way to know the status of an application in the launcher is looking at the small points on the left of the launcher icon.

“Current Unity launcher icons view”


Where there are no points, it means the application (if docked) is closed; one point means it is started with one window, multiple points means multiple windows of the same application.
It’s not that bad, but:

  • It looks too Mac
  • It’s sad to have 2D solutions (points) in the age of 3D

 
 
 

The stack

That’s why I designed a different solution based on the concept of a stack:

“A design concept of the stack”

“Stack icons view”

  • When a docked application in the launcher is closed, its background is almost transparent (except for a light effect on the top) and only its borders are coloured
  • A started application has a full-coloured background
  • A multiple windows app has a perspective stack behind it

No more points, no more triangles, Welcome 3D :). The implemented concept should look like this:

A complete Unity launcher mockup


In the picture on the right you can see 2 started applications: Firefox (with multiple windows) and LibreOffice Writer (with a single window). All others docked applications are closed. I believe “the stack” design perfectly suits with “the spread”, the new Ubuntu task switching system. By clicking on a stacked icon all windows will be scattered, showing them using the Spread switching approach, while selecting one of them will collapse all windows in the stack again.

Icons requiring attention…

On my Ubuntu 11.10 a small blue triangle to the left of an icon means that an application requires attention. In my opinion, attention requests should be clearer. A motion effect, which is enabled every few seconds and only stops when people click on the icon, even if annoying, may be a better solution. It is also to be noted that colour-blind people can have problems in distinguishing a started program from one requesting your attention if only colours are used.

I hope you enjoyed this post, let me know your thoughts…

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+ \?

Unity and the Dash

2 months ago I promised you a new post. Unfortunately, real work took me away from my blog activity. A lot of thoughts have crossed my mind since then, and I’d like to share some of them with you. I’m going to talk about Unity focusing on the dash.

Unity…

We all know Unity, the default Ubuntu launcher, Dash and lot more, probably the most important Ubuntu project, a big effort to innovate the linux desktop. Despite these efforts, a lot of users seem not to feel comfortable with it. People don’t appreciate innovations if changes solve problems creating new ones.
I’m really pleased to see Canonical efforts on desktop research, and Unity, that has reached 5.0 version, is absolutely a great step forward (do you remember the suse slab menu?), but it still has some design leaks. Unity could be a big trouble for users approaching linux for the first time or coming from Gnome 2.0 layout. Now I’m going to explain my critics:

My critics on Unity dash design

Lack of exploration: I have learned an important lesson from website development:
A great search feature can’t justify a poor user experience. Unity has a great search tool but is too hard to have a contents overview or find items exploring its dash.
For example, imagine you are an Ubuntu newbie user and you want to explore the applications list looking for installed Internet apps. You have a fresh Ubuntu 11.10 and no idea of what is in your system (this is not uncommon, remember that by now, Ubuntu is a growing platform with a limited diffusion).
Looking at the old Gnome vintage menu it was quite simple to figure out what apps are installed in each section. As you can see in the screenshot below in Unity things are a bit more complicated:

Navigating Internet section on Unity. A step by step guide

Not that simple indeed. There are too many steps and clicks, even for my 50-year Ubuntu dad and my newbie girlfriend (I sometimes use my family as guinea pigs for my 2-cent usability tests) :)
 
 
 
 
Contents organization: My personal point of view is that Unity dash is cluttered and not well organized. Contents are grouped in subcategories, so, for example Applications section is divided in “Recently used”, “Installed apps”, and “Available apps”. As a result Apps are sometimes duplicated or hidden when menus have more than 5 or 6 elements. An image is usually better than a thousand words.

Duplications in "Recently Used" and "Installed apps" categories

Furthermore “Installed Apps” and “Available apps” aren’t the same things: the first ones lay on your computer, the other ones in the wonderful software center. Why mix them on the same page? I suspect this might be a source of noise. The problem is in the approach: search over presentation and design.

 
Docs section: In many circumstances it is simpler to search a file using the Unity search box instead of navigating through the file manager. This often saves me from the “Where the fuck I saved my file?” nightmare.
However I’d like a simpler interface, without neither “Filter results” nor “Folders, Downloads and Recent files” groups. It’s enough showing all your files and optionally filter them by name or time (es. show files accessed last week)

 
Integrating Unity with Ubuntu ecosystem: Ubuntu has a great software center, a Music store and a cloud service. Every service is well integrated in its own applications, why don’t integrate them in the dash? The dash already shows some available applications from the software center, why don’t extend this concept to the Music available on the Ubuntu Music store? And also, why don’t allow users to install applications or buy Music directly from the dash?

Unity redesign concept

Below I’m not going to show any “Dash home” mockup: Not because I don’t like it but I simply think that with version 5.0 the “Dash Home” reached his aim. I focused my work on other sections:

Apps section

All apps view (Search is selected by default)

A group view of all my installed applications

Available apps (Allow install directly inside unity)

Available apps (Installing process)

Where is my just installed app?

Docs section

A docs section showing all your docs

A time view of your docs using zeitgeist

Music section

Your music collections in one simple view

A grouped by genre view of your music

That’s all

That’s all for now. I haven’t finished assessing Unity yet. I should work, among others, on a Dash Music store view on a Video section and more. However, there are already much information duscussed for a first article. I’m going to stop here and I’ll cover further topics on next articles.
If you like this post or have any suggestion/critics, just let me know.

Refine Ubuntu apps indicator

Ubuntu founder Mark Shuttleworth stated on his blog that Ubuntu 12.04 release cycle will focus on polishing. I believe App Indicators are a good point to start. I really appreciate Ubuntu Application Indicators and I think they are pretty original and well-designed if compared to other projects. In my opinion, however, some of them seem to be confusing and not properly organized. That’s why I started working on some mockup.

Ubuntu Message indicator

That’s my best App Indicators; I use it many times during the day and I appreciate the way it informs me on new events. Efficient and not intrusive. That’s how it looks now:

  • Why the IM status is at the top? What kind of status is it? Which applications it refers to? Why a status is displayed even if I’m not connected to any IM client? After some checks, I realised it is not a global IM status but simply my Empathy one.
  • The presence of the UbuntuOne Control Panel in this App Indicator is unclear to me. Does it notify something? Is there something I’m missing?

That’s how I redesigned it:

  • I locate the IM Status Indicator in a different position (within the Empathy section)
  • If you change your status, the “Chat” icon changes accordingly
  • The status menu is disabled when you are offline
  • I didn’t remove the UbuntuOne menu waiting for further explanations

Ubuntu Volume indicator

I wonder whether the Volume Control Indicator is the right place for music player notifications. Aren’t multimedia applications such as Totem, VLC and Audacity more suitable to this end? I believe volume applets should only manage sound. It may be valuable to design a new Multimedia Indicator, something like the Gnome-shell multimedia applet. Below you can see how it looks now:

  • Why is the “Mute” menu the first item? I believe it may be perceived as intrusive
  • I don’t like the Play/Prev/next button look and alignment

Below, my actions on that:

  • The “Mute” menu is now placed at the bottom (I think that most of the times a user doesn’t want to disable the sound but simply turn down the volume)
  • I redesigned the Banshee section, even if I’m still convinced this is not the proper location

Network indicator

I think this is the worst Ubuntu indicator. Let’s have a look at it:

  • It shows useless information (a “Disconnect” menu below the “Wired Network” section even if no wired network is available)
  • Sections are not well-organized (have a look at “Wireless Network” to have an idea)
  • It is not intuitive to understand which networks are used and how to properly disconnect from them

And here my solution:

In this version there are helpful messages, a better organization - separators are used when needed -, it is easy to see which networks you are connected to and how to disconnect from them.

User Switch indicator

As I have one user on my PC, I don’t have much to deal with it. Anyway there is still something unclear to me about this indicator:

  • Why the first item is a “Change User” menu? Considering that I can switch from a user to another by simply clicking on it, isn’t it a duplication?
  • What does this icon mean?

After some attempts, I’ve understood that it indicates when a user is logged in. Below the new, redesigned indicator:

I hope this is the first of several articles dealing with the Ubuntu features I don’t like and on how I will redesign it.
What do you think?