Felipe's Bookmarks Design

Adding a Bookmark

Firefox and Chrome place a small "bookmark" icon inside the address bar. This proposal follows the same pattern.

Bookmarks are created/edited/deleted using a small menu that hangs from the "bookmark" icon. The menu entries "Add Bookmark" (or "Edit Bookmark" when the bookmark already exists) simply open this menu.

https://github.com/felipeerias/sketches/raw/master/epiphany/bookmark_icon_flow.png

Tagging

This proposal considers the use of a token field, quite similar in behaviour to the one that can be demoed here. We might want to add a way to display the list of existing tags (e.g. with an expander) and/or make it easier to enter the most commonly used ones (e.g. with dedicated buttons). Something to consider is that this UI makes it easier to create new tags than some of the alternatives (e.g. the one used in Nautilus), which might in turn generate a large number of tags to deal with in the Bookmarks page.

https://github.com/felipeerias/sketches/raw/master/epiphany/addbookmark.png

Browsing and searching Bookmarks

Each item in the Bookmarks page is shown with its complete title, favicon (in this mockup, 32x32 px), tags and domain.

(TODO: editing and removing)

https://github.com/felipeerias/sketches/raw/master/epiphany/bookmarks_mockup.png

The Bookmarks page should support searching. A possibility would be to use the Search pattern so that the user scrolls up to perform a search in the currently selected tag.

Another possibility is to have an overall, always visible search field. Searches in this field are performed on all items at the same time, and the tags on the left side offer a summary of the search.

https://github.com/felipeerias/sketches/raw/master/epiphany/bookmarks_mockup_search.png

Note how the number of tags and the count of items for each one follows the search results.

https://github.com/felipeerias/sketches/raw/master/epiphany/bookmarks_mockup_searching.png

Design/Apps/Web/Bookmarks/FelipesDesign (last edited 2015-10-06 13:45:31 by AllanDay)