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 & 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.
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:
- 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
- Actions list could be static or dynamic and appears only on big icons (minimum size required)
- 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:
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:
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…