Firefox 3.7, 4.0 design in progress – video from design lunch

Alexander Limi has posted a video, from the Design Lunch three weeks ago, wherein the UX leads answered questions about their provisional redesign of the Firefox UI.

Alex wants to warn you that the contents of this video are very rough, very much a work-in-progress, and very much liable to change. You shouldn’t watch it thinking "this is how the next version of Firefox is definitely going to be". You should think of it as a behind-the-scenes look at "how the sausage gets made", in Alex’s words. He also warns:

There’s swearing, there’s mumbling, there’s ranting, there’s hand-waving, there’s political incorrectness.

I’m also in the video, playing MC in my overalls.

Today we recorded Part 2, which goes into detail about the notifications interface and the downloads manager; it should be posted fairly soon.

 

Fennec Tab-Sync UI Update

The latest version of Weave now syncs your open tabs — and it can sync them between Firefox on the desktop and Fennec on a pocket-sized gadget.

“Syncing tabs”, by the way, doesn’t mean that we force all your browser instances to have the same set of tabs open. That’s not what anybody wants! Instead, it means that every browser has the ability to access the tabs that are open on other synced browsers, and to locally open copies of those tabs.

Here’s how it looks on Fennec. Keep in mind that this UI is a work in progress, and I’m well aware that it needs work, polish, and testing. But I’d like to let you see how it’s coming along and get your feedback on it.

On the left sidebar of Fennec, where your tabs appear, is a new Weave button. (This assumes that everyone recognizes “Rectangular Celtic knot” to mean “see my tabs from other computers”. Not a good assumption, so consider this a placeholder.)

Clicking the button slides the screen further to the left for a full-screen view of tabs from other computers. If you have more than two browsers being synced, each remote browser will have its own column here. Each column is identified with the client name. Eventually we’d like to display thumbnails of the tabs, but since we’re not syncing thumbnail data yet, we make do for now with titles and favicons.

A click on one of the remote tabs opens a local copy of it, which adds it to the tab bar, as you can see here.

Comments?

(Addendum: Here’s Madhava’s proposal for how the tab sync UI ought to work when it’s finished.)

(Addendum 2: Here’s the new and greatly improved version of the UI shown above.)

 

Open Design Lunch video — Fennec Bookmarks

For the past few Thursdays we’ve been doing something called an “Open Design Lunch” at Moz. We’ll pick a design problem that somebody’s working on and brainstorm it informally while munching pizza and burritos. Asa has been broadcasting these events on air.mozilla.com.

At today’s Open Design Lunch I brought up the question of how bookmarks should be accessed in Fennec. Bookmark management on Fennec gets extra tricky when you have hundreds (or thousands) of bookmarks from your desktop computer getting synced onto your mobile phone; so this problem is closely related to the UI design of Weave. My previous attempts to design a bookmarks UI haven’t solved these problems to my satisfaction.

The conversation didn’t conclusively settle anything (of course) but it brought up a lot of good ideas that deserve further investigation. Here’s the video:

• Part 1
• Part 2

(Note: These videos use the cutting-edge <video> tag from HTML 5, so they may not work for you unless you have the latest version of Firefox or another standards-compliant browser.)

 

Weave on Fennec

Here’s why I haven’t blogged for these many weeks — I’ve been too busy working on this:

That’s a Nokia N810 pocket-sized internet gadget. The picture doesn’t show the screen contents very well, but if you squint at the bottom right you can barely see that there is now a “Weave” section at the bottom of the Fennec preferences screen.

I demonstrated Weave syncing on the Nokia in front of a live audience at the Labs Night last week. So far we just have bookmark sync working, and bookmarks loaded in from a desktop computer are accessible only through Fennec’s Awesome Bar, but it’s a start.

We are trying to land very basic Fennec support into the next Weave client release (which is planned for this week).

Here’s a screenshot from the Mac version of Fennec:

(I know the position of the “Preferences” button is all wrong; it’s a work-in-progress.)

Currently, you can’t create a new Weave account from Fennec, only connect to an existing account. That means you have to set up the account from a computer with Weave and Firefox first, then you can connect your Fennec gadget. Here’s the connection screen:

I’m trying to get it down to the absolute minimum possible user interaction — even more minimal than the earlier mockup I posted. I took the advice of some commenters on my earlier post and added a button to hide/show the password/passphrase, rather than making them always visible.

I’d like to personally thank a few of the many people who helped me out with this project:

• Stuart Parmenter and Mark Finkle for helping me understand Fennec and
  Nokia development
• Dan “Thunder” Mills for helping me understand Weave
• Madhava Enros for UI design discussion