root navigation content

Delavy for the Web

Bilingual thinking to improve the Web

Version FrançaiseEnglish Version

Bookmarks Interface

jeudi 8 janvier 2009 [11:54:31]

As I have a new bookmark classification system, I search new ways to search and display them. I was inspired by the idea of Wei Zhou : previews during search. It just missing some possibilities of sorting and informations on bookmarks, so I realise interface mock-ups.

This article follow upon "Bookmarks ogranisation".

Cet article existe aussi en version française.

First Interface

The user make a search restrained to bookmarks, (by a button or a short-key like ctrl + b). He is now in the awesome bar. He have to type a tag and/or a category of bookmarks (data, tools or websites) and/or a type of data (picture, text, video, ...). The bookmarks of a folder (e.g. "pictures") are automatically tagged with its name 01. If the user begin by the tag "picture", the search would be restrained to this type. In the example, the user type "css".

The result page (see below) display previews of bookmarks who match with the tag sought. The text line in the head allow to specify or modify the research. It shows the different tags that contain bookmarks returned by the search, the same for data type and category. We can see that bookmarks with tag "CSS" are websites or tools, and they have lot of other tags. The words are clicable, to add them to the query.

little picture of the first interface

The user want no validators. So he type "website" to exclude tools, and add the keyword "tutorial". And just 3 bookmarks correspond (see picture below).

little second picture of the first interface

Here is another version (see picture below) where I present the first query with a little form and a cloud tag.

little picture of the second interface

All this is allready possible using just the tags : we can tag a bookmark with its category, type, language, and keywords. But that can create redundancy : if you search type "video", we type that for tag but its can display text pages about the new tag in html 5. "Separate" the fields could solve the problem in the case of using form.

Notes and references:

  • It will be good to can use operators like it's usually in a search engine, for example "html OR xhtml" or "css -validator".
  • For those who have seen the article before the 03 July 2009, I rewrite it to made the current version is more comprehensible and more reflective.
  • Bookmark preview add "an album view (like cover flow) and a thumbnail view (with drag and drop)" to the bookmark manager, which allows to navigate more easily.
  • [01] actually, it's feasible with the add-on tagsifter (for Firefox).

Texts, pictures, and design : Copyright © 2008 - 2009 Delaby Pierre.
Copyleft : This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License. You find a copy of this license on the site and other sites.
Icons by Mark James in Creative Commons | All Credits and Attributions.

Logz Powered : | Host by | Copyleft Licence Art Libre | Vrs ?, Vxl ? | site map