Mozmae

I had the great pleasure of attending the Maemo/Mozilla Danish Weekend last weekend, where I gave a talk on user-interface issues and tips to think about when creating add-ons for Fennec. The high point for me, other than getting suggestions from some of the first people to try building add-ons for Fennec, was getting to see the results of the Fennec Add-ons Developer Challenge, including the winner: Fabrice Desre's GraffiTwit.

Brian King wrote a great overview of the event, with links to the winning Fennec add-ons, so I'll cheerfully refer you over there rather than recounting everything again.

I will link to my slides, though. Here they are:

Addons And Fennec UI

View more Microsoft Word documents from madhava.

A very good place to start

I've been thinking a lot about the idea of start pages recently, mostly in the context of what we should do in Fennec.

In Firefox, by default, we show a Google search field when you start the browser, but also give you the option to change it to whatever homepage you want. Occasionally, as on the very first time to run the browser, we show you a welcoming message instead. Recently, there's also been work to try to further refine what shows up when you open a new tab. All of these "start page" variants are attempts to speed you on your way to whatever it is you'd like to do with the web.

Let's break it down a bit. I'm thinking about three cases, the last two of which aren't addressed separately in Firefox today, but could be.

1. First run page – shown the very first time the app is launched
2. A start page that is shown each time the app is launched
3. A new tab page – shown every time the user opens a new tab

What should we do in Fennec? Where does the usage landscape differ from how Firefox works on the desktop?

1. First-run page

The first-run page is our big chance to get the user started with using the browser and the web quickly and pleasantly. It's a particular opportunity, in that we have some important things to communicate, and it's also when the user will forgive us the most for getting between them and whatever they were setting out to do. I think that users more or less expect, the very first time they open the browser, that we'll have something to say.

At the moment, Fennec uses this point of contact in a fairly limited way; we say hi and put up a little bit of pictorial instruction about how to use the browser:

There's more we can do here, and other ways to introduce the location of controls (zooming animation!). This is a separate topic from the one I'm thinking about right now, though.

Skipping to 3. Opening a new tab

A lot of thinking has been going on into what to show when you open a new tab in desktop Firefox. There's a good overview of the design issues and goals here, with a lot more detail here. In a nutshell, though, the ongoing work is trying to provide three things:

1. Links to sites you probably want to go to, drawing that list from the browser's knowledge of where you go often and have been recently (also offering links to recent updates on those sites, drawn from RSS)
2. If you opened the new tab immediately after closing another tab, the page offers a chance to reopen the tab (undo)
3. If you copied something before opening the new tab, the page provides a means to do something contextually appropriate with whatever it is that you've copied — a dictionary lookup if it's a single word; web search if it's a phrase; map if it's an address

And all of this on a page that's as spare and clean as possible.

The key insight here is that everything offered is an attempt to speed the user towards whatever it was he or she was setting out to do. None of it is general, though possibly interesting, information like "the current weather." Instead, the browser makes its best guess about what you're doing, and tries to help. When a user opens a new tab manually it's almost certainly with some specific goal in mind, so this start page, more than the other varieties, must not derail that train of thought with a lot of non-targeted distractions.

What about Fennec? Of those three types of interventions, I actually have another idea for a way to undo an accidental tab-close that's more tightly tied to the closed tab (more on that in a future post). Easing the taskflow for something copied is something we should figure out how to incorporate, though, for the moment, the incidence of general purpose copying is fairly low on smartphones (another issue for another day).

What remains is the "let's let you just tap on the link you probably wanted" functionality. It turns out, though, that this is something that Fennec already does — the navigation screen (what comes up when you tab on the titlebar) contains a set of awesomebar-educated guesses as to where you're trying to go. Rather than duplicating this in a start page, it seems to me that we should, on a new tab opening, skip the user right to the navigation screen for those suggestions. You can also search from that screen, which covers a major mobile new-tab use case.

Still interested and following along? You win a free trip!*

Back now to 2. Start page

What about a start screen that comes up when you launch the browser?

Unlike the case of a new tab, it's more plausible that a person might open the browser without a specific destination or search in mind. The likeliest cases, I think, are (a) just wanting to be entertained and kill some time; and (b) wanting to check in on what's new on your sub-section of the web since the last time you looked (from news to the latest tweets). This got me thinking about having a really light-weight and zero-configuration page that just presents some recent things that, awseomebar-style, we know the user might be interested in. Here's a quick mockup of the kind of thing I've been thinking:

I'm borrowing some ideas from some interesting stuff that's been coming out of Mozilla Labs -- most notably Atul Varma's Ambient News experiment (a video here). You can read more about it on his blog post, but, essentially, it addresses my relevance and low-configuration criteria by assembling the list of news sources automatically awesomebar-style and draws in the latest articles via RSS transparently. The user never goes through the still overly-jargon-filled (eating? molecules?) process of subscribing to feeds -- from his or her perspective, the article titles are just there. Ideally, we could use the same method to generate the entries in the section above for number of new emails, unread tweets, and so on.

Anyway - lots of details to work out yet, so please get to it. :) Or, rather, please let me know how you think this could be made simpler and more useful. What would you want to have come up when you launch a browser on your phone or mobile device? Or would you just want the browser to launch with the tabs you had open last time? Under what circumstances would you launch the browser manually rather than following some other path to it (like a link in an email or a search initiated through a widget on your phone's desktop)?

Please discuss here!

* to another thousand words on the subject of start pages! Not redeemable for cash value. Which would be huge.

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.

Fennec Beta 1

We just released Fennec Beta 1 for Maemo devices like the Nokia n810. If you don't have one of those, you can also get a build for a desktop OS like Windows, Mac, or Linux. Download it and give it a try! Performance is much better than in our previous alpha releases, the user-interface is coming along as well.

In the time-honoured tradition of my people, I have recorded a video walkthrough. If you don't want to install the beta, or just want to have a guided tour first, click on through:

Of course, there's more going on around Fennec as well. People have been creating new add-ons for Fennec, which you can install either from addons.mozilla.org or directly from within Fennec's add-ons manager.

Stuart mentions a couple of particularly cool add-on projects in progress in his beta 1 blog post, as well as detailing some of the back-end work that's been a major focus for this release.

Fennec Alpha 2

Fennec Alpha 2 is out! The emphasis for this release was on performance and responsiveness, and that focus has resulted in much faster and more natural-feeling interactions.

You can get instructions and a download via the release notes. If you don't have a Nokia n810, desktop versions are available too (Windows, OS X, Linux).

For a quick introduction, I've recorded a short video walkthrough of alpha 2:

Fennec Alpha 2 Overview from Madhava Enros on Vimeo.

For more information on what's new and what's underway, there are a number of other blog posts related to alpha 2:

• Taras Glek on Alpha 2 performance
  
• Mark Finkle on what's new in the front end
  
• Jono DiCarlo on Weave in Fennec
  
• Stuart Parmenter announcing the release
  

Please tell us what you think, or, better yet, get involved!