UI Mockups for Tags in Nautilus


Yesterday I read an article on OMG Ubuntu about some new features being developed for Nautilus and one of them just caught my attention: Tags! I've being waiting for this for so long and now Gnome developer Alexandru Pandelea is doing a great work on making it possible. Amazing!


So much I like his work, my designer spirit started to take place, bringing some ideas of how it could be improved to look a little more consistent with modern Gnome and Nautilus itself.

I took two main references that I consider relevant for Tags. One of them is Nautilus "New Folder" dialogue. Since most users are familiarized to it, using the same approach for this new feature can help in its adoption.

Another reference is Gnome Map location search, since it presents a meaningful list of results in a cleaver and modern way.

After some iteration, here I present my first UI mockup for Tags in Nautilus.  


Disclaimer: Everything below are just images made in Inkscape (mockups). They do not show the actual Nautilus.

Start screen

The Tags feature is currently launched from a context menu option, but for now I have no intent to deal with the ways it could be launched. I'm just assuming the feature was invoked somehow, and the user wants to "view, create and remove tags of a file or folder".

The main screen uses the same approach of "New Folder" dialogue, except the input field has no focus by default. That is made so the user can have a visual introduction o the UI elements. The text input let the user search for existing tags or create new tags. The space right below are the used tags, or in this t case, a tip of "No tags yet". The top buttons let the user Cancel the dialogue, and there are no changes to be Applied yet.

Typing a tag's name

When the user clicks in the Add tag field, a list of existing tags appears, with its first result selected. If there are no existing tags, the first result is a tip of "Type to create a tag". For this example, I populated the list with some tags and you can see a scrollbar indicating the list height is not getting any bigger and polluting the view. The list width is fixed to the input width.

The user starts typing a tag's name and the list is updated right away. The first result if always a way to create a new tag when the text is not exactly an existing tag. Otherwise, the list should just include the resulting tag(s).
A color picker popup is called when clicking in a colored circle, allowing the user to change the color of new and existing tags. Ideally the color of a "new tag" should be automatically initialized to be random and different from existing tags, so the user is not forced to manually choose a color to avoid ending up with many tags of the same color.

Applied tags

So the user added some new tags or existing ones, the list closes and now we can see the applied tags in alphabetic order. Finally the Apply button is enabled and the user can save the tag list and close the dialogue. But each tag has visual clues to 3 actions that still can be performed. A click on the colored circle opens the color picker. A click on the close icon removes the tag.


And a click on the text itself let's the user rename the tag. The tag rename dialogue has the exactly same visual of the "Rename folder" dialogue, and its width and position are fixed to Add tag input width and position. I don't know if this feature is required, but I thought it was good idea to include.

So many tags

I believe the average user will user a few tags, maybe 2 or 3, so I don't see the need to create a horizontal scrollbar right away. Instead, the tags can follow each other in a continuous flow, creating few additional lines if needed. But I included a example of use of +13 tags, limiting the tags height at 5 lines using a vertical scrollbar - which scrolls just the tags area, not the whole dialogue.

That's all for now

I know my solution isn't perfect and I actually see many points of failure that can be (and need to be) improved. The input list occludes the tags view, but that's intentional, so the top-to-bottom flow is kept: the user add tags and they are added below it, right next to where the mouse cursor was placed when the tag was added. Although, still there are the ambiguity of "renaming a tag" renames it just for this file (kinda creating a new tag) or all the files with that tag get changed as well? This and other UI issues I would love start working right now, but I'll wait to see if there are some interest from others than me. ^_^

I'm really happy to see Nautilus getting some new features and I thank Alexandru Pandelea for his great work, not only on Tags, but another new features too! And finally, I hope he or someone else can find some use of what I have done here. Till next time!

Comments

Post a Comment

Popular posts from this blog

LibreOffice New 2020 Icons

Image
Hi... Again. After so many years, I'm back to LibreOffice icons development. Or at least that's what I'm trying to do with this: A spoiler of what's in the end. Caution: work in progress. Here I'm going to start documenting this journey, from my first contribution in 2011, through my first failed try of returning in 2015, up to the present days of 2020 with the development of the icons above. I'll try my best to write as many details as I can, because I like it that way, so take your time and enjoy the ride. Preface Before I start, a recap of my history in LibreOffice. Back in 2011, I've joined the design team, and helped stylizing and creating bigger sizes for the new icons, originally and beautifully created by Christoph Noack at the time. Comparison between Christoph's original icons, and my additions, both from 2011. These icons are called the Mimetype Icons and they were used in the main applications desktop icon, and in the document
Read more

LibreOffice in Blender

Image
There are some years that I work with Blender, an open source 3D program. I love to play with 3D, making an simple idea become true. Although, my first try to mix Blender and LibreOffice was put a bit of the Blender's User Interface in the LibreOffice's User Interface. So today I thought "Why not put a few of LibreOffice in Blender too?" Yeah! Here is a try: It's just a 3D model of the Writer document icon from LibreOffice's new branding. For now I made it for fun, but maybe it can be useful to marketing stuff or something else, I don't know. :)
Read more

LibreOffice Wallpapers

Image
Hi guys, here we go with more 3D stuff: Update (16 feb 2011): The second wallpaper was updated to correct some incorrect vertexes on 3D meshes. The most perceptive error was in the triangle on top right corner of the Base icon. Now they all look fine. :D [Blender + Gimp] - The PNG files are huge (almost 1MB each one), so here you find JPG versions : Wallpaper 1 - Wallpaper 2 These are my first wallpapers since I started to play with 3D models of LibreOffice new icon set . The first one have no much perspective and the light source come from the backside. It's the because icons have less saturated color. The second still have the back light source, but this arrangement and camera perspective make the scene darker. Please, make your choice. :P Design team, sorry for change the color of the symbol and the "Document Foundation" text.  It was done to make them seem more native in  this "light style", and in mean time empathize the Libre Office name too .
Read more