April 17, 2009

Whither bookmarks?

The following is what you see when you launch Fennec, UI-wise:



It's quite minimal, out of necessity; when there's so little screen space to work with, everything there has to really earn it's place. What's there -- the page title/URL (all a tappable control itself), the site identity button, the stop/reload button, and the bookmarks button -- are all there because either they are important (1) immediately on app launch, (2) when a page is first loading, or (3) as a user begins to use a page.

Recently, though, we've been coming up against even tighter constraints than those that led to the current titlebar design. While everything you see above can reasonably fit on a screen like that on the Nokia n810 held in landscape orientation, it starts to get a little cramped when in portrait instead. On devices with smaller or lower-resolution screens, the problem starts to become acute.

There are a number of small things we can do to get back some horizontal space. For example, if you look at the work going on with our theme, you'll notice that we're starting to replace some of the interior curves with straighter edges -- it's saving us about 20 pixels at the moment, which may seem small but is a big deal on screens that are only 240px wide.


It's still not enough, though, and that's where this new idea comes from: moving the bookmarks button out of the titlebar. Given all the talking I do about the value of awesomebar results, you might wonder why we need a separate list of just bookmarks at all. It turns out that it is valuable, though, and that's because sometimes you're browsing, where the awesomebar is for search. Some examples:

  • using a particular organization of bookmarks as a to-do list (either for a task or "here's my stack of every-day morning news sources")
  • "I remember I've got it here somewhere... but what was it called?"
  • and the big one: sometimes, you just can't type – maybe you're on the go and have only a thumb free – so you forgo the speed that searching would give you and just swipe through the list to the bookmark you want
So, here's the proposal: moving access to bookmarks to the top of the pre-typing awesomebar list, like so:


That "See all bookmarks" item is the first item in the list, so as you pan down the list, it scrolls off the top. Also notice that this simplifies the titlebar – there's now just one place to tap when you want to go somewhere.

What's interesting (and effective, I think) about this design is that it adapts to your current usage type. When you're in can't-type browse mode, access to all your bookmarks, in a browsable format, is right there alongside our suggestions of where you probably want to go. When you're in the mood for search, at which point you're typing, that item gets out of the way because it's not a match for your search terms.

Am I concerned about taking up a whole row of vertical space that could be allocated to another awesomebar suggestion? I am, but on the whole I think it's worth it. No placement will be ideal for both screen orientations -- when landscape, the extra space we have is horizontal, whereas, when a device is portrait, the extra space is vertical. It's not quite a deadlock though -- we're more constrained in portrait than we are in landscape, which makes this seem like the best option.

What do you think? If you've got thoughts about this and/or ideas for alternate approaches, I'm very eager to hear them. Please pipe up in the discussion, over here.

Posted by madhava at 12:56 PM