Places UI: Bookmarks Organizer
Alex Faaborg
mozilla wiki:
http://wiki.mozilla.org/Places:User_Interface/Organizer/i1
This design just covers the overall window layout. In future mockups
I might focus on things like:
-iTunes style tag browser when the user selects "all tags"
-UI for history
-UI for syncing bookmarks to an online service
-Extensions adding different views (like a tag cloud)
-Advanced searching
-Creating smart folders
-Minor UI differences for OS X?
===Notes===
1) Since we are making a lot of interface changes, I'm trying out a
new platform-based window name. It would be "Bookmarks Finder" on OS
X, etc.
2) Items from the previous bookmark organizer's toolbar are now under
"Organize"
*New Bookmark
*New Folder
*New Separator
*Move
*Properties
*Rename
*Delete
3) Clicking on the star in the location bar adds the bookmarks to
"All Bookmarks" directly in the root. The bookmark does not appear
in the Bookmarks Toolbar or Bookmarks Menu unless the user moves it
there.
4) The ability to have folders and saved search folders that are not
displayed in the Bookmarks Toolbar or Bookmarks Menu is new.
Bookmarks in these folders are accessible through search, but do not
appear in primary UI. This is for long term storage.
5) Sync Bookmarks loads UI controls in the list view area of the
window, allowing the user to select which providers they would like
to synchronize their bookmarks with (like del.icio.us). These
providers use the Places Sync API
6) The stars in the list view can be toggled: removing a bookmark, or
bookmarking a page (if viewing history and the star is not activated)
7) URLs throughout the interface use the same formating as the
location bar
8) Live preview of the bookmark, with a throbber in the lower right
hand corner to show feedback
Robert Kaiser
> 1) Since we are making a lot of interface changes, I'm trying out a new
> platform-based window name. It would be "Bookmarks Finder" on OS X, etc.
Hmm, in my brain, the name "Explorer" is associated with using
Explorer's UI style and elements, same with "Finder", which we aren't
actually doing. Maybe this is just my brain though.
Additionally, it gets harder to do cross-platform support in newsgroups
etc. when the same thing does not carry the same name. We sometimes are
seeing this with prefs already, but this is still more intuitive than
those window names, I think.
Robert Kaiser
Thomas Stache
> Alex Faaborg schrieb:
>> 1) Since we are making a lot of interface changes, I'm trying out a
>> new platform-based window name. It would be "Bookmarks Finder" on OS
>> X, etc.
>
> Hmm, in my brain, the name "Explorer" is associated with using
> Explorer's UI style and elements, same with "Finder", which we aren't
> actually doing. Maybe this is just my brain though.
>
For me this mockup looks pretty much like Vista's Explorer, see
http://www.winsupersite.com/images/showcase/winvista_rtm_bus_15.jpg
Only the search bar layout differs. And the right side with the bookmark
properties matches the optional "preview pane" in Vista Explorer.
B. Polidoro
I'm wondering what you think of using a rich list box in the middle
column. With the bookmark name, tags and URL you quickly run out or
horizontal space. The two side columns make this worse. The current
setup you show limits you to one line of text. The rich list box
seems to give more flexibility. It's worked out well for the EM, the
DM, and error console.
One thing you do lose with the RLB is the column headers. But that
should be able to be overcome by labeling the fields:
Name: Bookmark one
Tags: one two three
URL: http://mozilla.org
Also with the RLB couldn't you switch to edit fields when the item is
selected? Then you could do edit in place instead of editing in the
right column. An item could just show the three fields above when
it's not selected. And it could expand when selected to show the
other fields: description, keyword, save & cancel buttons.
But then that leaves the question of what to do with the preview.
Removing the right column should give enough space to have the preview
at the right end. Sort of like the command links at the right end of
the Download Manager. But just show the preview for the currently
selected item.
Brian Polidoro
Marco Bonardo
> platform-based window name. It would be "Bookmarks Finder" on OS X, etc.
Imho a general name (like "Bookmark Organizer" or "Bookmark Place") is a
better choice for technical support
> 2) Items from the previous bookmark organizer's toolbar are now under
> "Organize"
>
> *New Bookmark
> *New Folder
> *New Separator
> *Move
> *Properties
> *Rename
> *Delete
Organize is too general, if i read organize i have to open it to view
that it contains new, properties and delete... I think that an icon
toolbar with labels could be better (New >(submenu) | Move To...|
Properties | Delete
Rename could be moved under Properties or Move To dialog, i think that
everyone uses mouse click in the columns to do rename
Where is import / Export?
> 4) The ability to have folders and saved search folders that are not
> displayed in the Bookmarks Toolbar or Bookmarks Menu is new. Bookmarks
> in these folders are accessible through search, but do not appear in
> primary UI. This is for long term storage.
How you could explain to "non technical" people that there are bookmars
that they don't see, they will ask "where are they from?" and think that
the program collect informations on their browsing
> 5) Sync Bookmarks loads UI controls in the list view area of the window,
> allowing the user to select which providers they would like to
> synchronize
Maybe Add a submenu here to import / export?
> 6) The stars in the list view can be toggled: removing a bookmark, or
> bookmarking a page (if viewing history and the star is not activated)
Good for adding a bookmark, but "turn off a star" does not sound as
"delete a bookmark"... probably there will be a big number of "where is
my bookmark gone?" of people clicking on the star thinking that it is
some sort of "bookmark ranking"
The last thing, Tags take up too much space... "one "two" "three" are
short words but if someone tags with "Himalaya" "Supermegaextracool" how
are they mantained in the list?
Axel Hecht
like Germany where people run businesses for suing folks using the term
"Explorer". Basically, the "make this sound like Windows, call it
Explorer" as a concept is vandalized by folks with legal education and
not enough beatings in their early days.
I ignored the location bar thread for quite a while, is there going to
be a pref to get rid of that artificial markup? One pref to rule them
all? In particular in the bookmarks search case, hitting more pages on
the same server sounds likely. Just as your example shows, and that
hides the distinguishing parts rather than highlighting them.
Axel
Alex Faaborg
In this mockup we are going for consistency with windows explorer on
Vista. On the Mac the organize button will be a gear icon.
> Where is import / Export?
Maybe it should get a new button on the toolbar? Otherwise I guess
it gets placed under Organize with everything else.
> How you could explain to "non technical" people that there are
> bookmars
> that they don't see, they will ask "where are they from?" and think
> that
> the program collect informations on their browsing
The program does collect information on their browsing, the window is
going to have a history view. Hopefully showing stars next to each
bookmark in the list view will remind users of when they clicked the
star icon to bookmark a page. I think we should also add "show all
bookmarks" to the bookmarks menu, similar to Safari.
> Good for adding a bookmark, but "turn off a star" does not sound as
> "delete a bookmark"... probably there will be a big number of
> "where is
> my bookmark gone?" of people clicking on the star thinking that it is
> some sort of "bookmark ranking"
Yeah, I forgot note that activating the star just activates it, and
deactivating the star produces a dialog box asking if you would like
to delete the bookmark.
> The last thing, Tags take up too much space... "one "two" "three" are
> short words but if someone tags with "Himalaya"
> "Supermegaextracool" how
> are they mantained in the list?
In cases where the tags are long, you will only be able to see the
first few, and you will need to select the bookmark to view all of
the tags in the preview pane. Speaking of, we should probably make
the tags text field larger in the preview pane, or think about
displaying the tags in a vertical list.
Thanks for the feedback,
-Alex
> _______________________________________________
> dev-apps-firefox mailing list
> dev-apps...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-apps-firefox
Alex Faaborg
Ok, let's drop the window name idea, it looks like it has a wide
variety of problems.
> I ignored the location bar thread for quite a while, is there going to
> be a pref to get rid of that artificial markup? One pref to rule them
> all?
Yeah, I think we are going to have to provide one pref to rule them
all, or risk a very small subset of technical users revolting.
-Alex
Alex Faaborg
> column. With the bookmark name, tags and URL you quickly run out or
> horizontal space.
I think it depends on what the user is trying to do. If they want to
edit the tags in a list of bookmarks, being able to both view and
edit the information in place is well worth the bookmarks taking up
more vertical space. But if they want to quickly scan a list of
bookmarks to find one (perhaps when viewing search results), we want
to display as many bookmarks in the list view as possible.
Perhaps a rich list box could be an additional view (under the views
button)? I would also really like to get inline thumbnail images of
bookmarks, but this is probably out of scope for Firefox 3 and would
take up a lot of disk space.
-Alex
pcab...@gmail.com
> mozilla wiki:http://wiki.mozilla.org/Places:User_Interface/Organizer/i1
>
> This design just covers the overall window layout. In future mockups
> I might focus on things like:
> -iTunes style tag browser when the user selects "all tags"
> -UI for history
> -UI for syncing bookmarks to an online service
> -Extensions adding different views (like a tag cloud)
> -Advanced searching
> -Creating smart folders
> -Minor UI differences for OS X?
I think it would also be interesting to see the interface when
Downloads item is selected in the left sidebar in the mockup.
>
> ===Notes===
>
> 1) Since we are making a lot of interface changes, I'm trying out a
> new platform-based window name. It would be "Bookmarks Finder" on OS
> X, etc.
>
Since it involves more than bookmarks what about something like Places
Manager. It sounds closer to Bookmarks manager and would help current
users make the transition I think.
> 3) Clicking on the star in the location bar adds the bookmarks to
> "All Bookmarks" directly in the root. The bookmark does not appear
> in the Bookmarks Toolbar or Bookmarks Menu unless the user moves it
> there.
This is really gonna confuse some people. I tried Safari which has
this same behavior and it took me a while to figure out where my
bookmarks were going to.
Maybe the bookmarks button should included on by default in the
bookmarks toolbar. I think if this is going to be done, bookmarks have
to be brought closer to the user.
> 8) Live preview of the bookmark, with a throbber in the lower right
> hand corner to show feedback
A live preview could be confusing: maybe the current content of the
page doesn't mean anything to the user. A stored thumbnail could be
more useful and less resource demanding.
I'd also like to see a special live bookmarks folder to have them
together and get to them quicker from the bookmarks sidebar.
While in the subject, could the bookmarks manager be kept in a tab
instead of a separate window? Is there some reasoning for this?
Looking forward for more mockups.
Marco Bonardo
> deactivating the star produces a dialog box asking if you would like to
> delete the bookmark.
Ok, but i hope that this anoyance is only for star, selecting "remove"
from the right click menu will open the same dialog?
Moreover on the first star click should be a dialog explaining to user
how stars work and where bookmark are placed, with a "don't show me
anymore" checkbox
> the preview pane. Speaking of, we should probably make the tags text
> field larger in the preview pane, or think about displaying the tags in
> a vertical list.
The mockup is larger enough, what about people with eye problems or with
little monitors (as tony notebooks)... where do you steal space to
increase the tags column? Location is already not readable, i see only
the domain...
You could move to a 2-line items as:
________________________________________
|star| favicon | bookmark | url |
|tags tags tags tags tags tags |
_________________________________________
Or put a Tag icon at the end of the line afer url, onmouseover show the tags
______________________________________________________________
|star| favicon | bookmark | url | tags-icon>[tags menu onover]
______________________________________________________________
Or maybe, how about moving the "bookmark preview" (right column) to the
bottom...
===================================
| left column | bookmarks |
| | ------------------|
| | bookmark preview |
===================================