Using Weave always starts with the account setup screen, which looks like this:
(If you're on Fennec, you can check out the live version of the mockup here.)
You will see this screen in the following conditions:
I mocked up this screen as a web page. It could use some style-sheet love and maybe better layout, but all the important contents are there. My recommendation is to do it as a web page (perhaps a chrome:// URL). The user already knows how to scroll a web page, and they know how to move between fields, and how to use the Back button to get out if they don't want to complete setup right now. Plus, doing it this way lets the full screen be devoted to the form.
Rather than the multi-stage wizard used for setup in the current desktop Weave, I preferred to put everything on one screen, so that the user can see at a glance what information they'll need to provide, and be able to make a decision right away about whether to proceed with signup right away, or come back and do it later. I also eliminated a lot of fields, so that even with a large font size for small-screen readability, everything that the user needs to enter fits easily on one screen.
The password and passphrase field display in plain text; they don't hide what you type behind bullets or asterisks. This is because:
The rest of the stuff on this page should be self-explanatory. Except where otherwise specified, the fields work the same as the ones in the Firefox-Weave signup wizard.
The account setup screen assumes that you already have a Weave account. I think the most likely use case is that the user sets up Weave on a desktop computer or laptop first, doing the account creation there, and then tries to connect a mobile device, meaning that the default is for a Weave account to already exist. However, if the user doesn't have a Weave account yet, we should allow them to create one from Fennec. It might be an unusual use case, but what if someone has two phones that they want to sync, and no computer? They'll have to create the Weave account from one of the phones. So we provide a simple link which takes them to the account creation screen, which looks like this:
Most of this page should be self-explanatory. The password and passphrase entry here, like on the previous page, are in plain text, not hidden.
I've left out the duplicate "confirm password" and "confirm passphrase" fields that are in the Firefox-weave account-creation wizard. This is because:
Once you've completed either the account setup or the account creation screen, the Weave client stores your username and password, so you will not be prompted to re-enter it each time Fennec starts up and tries to connect to Weave. Entering a password is a painful operation on many mobile devices, and Other People using your client is not as much of an issue on mobile devices as it is on your desktop, so I think we can get away with not prompting for the password every time.
When Weave syncs you up, it will find the single most recent tab that you had open on any other device, and add that tab to the bottom of your open tabs list in Fennec, as in the screenshot above. So the tab is not automatically loaded up in your main screen, but it's just a couple of clicks away.
If you want to get at all of your other tabs, not just the most recent one, you can touch the button with the weave symbol on it. That will scroll your screen westward, revealing a screen like this:
(Please ignore the super-ugly font I used in this mockup. Pretend it's in a nice font like all the existing UI.)
That's all of the tabs that Weave knows about, organized by which device they came from. The names of the devices are at the tops of the columns. Tabs in this view obey exactly the same interactions as the tabs in the basic Fennec tab column. If you decide you don't want any of these tabs, just scroll back to the right with a finger flick to get back to the basic tab column and your web page contents.
(When there are only a few devices but many tabs on a single device, those tabs could be displayed in two columns instead of one for easier access. When there are too many devices and/or too many tabs for everything to be on screen at once, this screen could become scrollable, using the same finger-flicking interaction used to scroll web pages.)
The problem with Weave-synced bookmarks is that in the most common use case, the number of bookmarks from a desktop computer will be much, much greater than the number of bookmarks created on a mobile device. Therefore Fennec's local bookmarks are in danger of being swamped by a flood of external bookmarks brought in by sync, making those bookmarks which are most important to you on your mobile device nearly impossible to find.
To avoid that problem, I propose addding simple folder hierarchy model to the Fennec bookmark UI. This folder hierarchy navigation could equally well be used even in the absence of Weave, if the need arises to deal with a large number of bookmarks native to Fennec.
That's why the new button which I've added to the lower-left of the main bookmark view (see picture below) has a folder icon, rather than a Weave icon.
Touching this button scrolls the screen to the west to display the folder hierarchy view. (You could also get here by swiping the screen right to scroll left, but that might not be discoverable without the button.)
(Please ignore the super-ugly font I used in this mockup. Pretend it's in a nice font like all the existing UI.)
The folder hierarchy behaves about like you would expect. Weave creates top-level folders named after each synced device. These initially appear in the left column. Touching one of them selects it and displays its contents in the right column. From there, you can touch a bookmark to go to that page, or touch a folder to navigate deeper in the hierarchy (doing so will move the current right column contents to the left column, to make room for the new folder contents in the right column.)
If a list is too long to fit in the vertical screen space, it can be scrolled by swiping up and down. Swiping right (to scroll left) will restore one higher level of the hierarchy that has scrolled off the scren to the left, if any. Swiping left (to scroll right) will take you back to the regular, local bookmark view. Touching the X in the lower right will close the entire bookmark view and take you straight back to the page you were looking at.
The user needs to be able to turn Weave syncing on and off, and to change the settings. So the preferences screen needs the following additions:
(Again, sorry for the terrible font. Pretend it's a nice font.)
Now, that's a lot of vertical space taken up just for Weave, which might be a problem since screen space is so limited. Futuer additions are going to want to add more stuff to this screen, and with three lines dedicated to Weave, the next thing that gets added is going to start to force scrolling at the default size. Why force scrolling if we could avoid it? Here's an alternate version that uses only one line:
It doesn't look as clean as the first version, but I prefer this one.
The current Weave UI in Firefox has a concept of being signed in or signed out, and additionally it has a check box in the prefs for "back up and synchronize" and an additional check box for "automatically connect each time you start firefox". From the user's point of view, that's three different ways of saying "sync or don't sync", and the user isn't going to care about the difference or understand why more than one is needed. So in the Fennec version, I propose condensing all of these to the single check box on the preferences screen. Implementation-wise, unchecking that box could sign you out of Weave, and checking it again could sign you back in (using your stored password). The "back up and synchronize" preference would be always on, and the "automatically connect each time you start" preference would follow the state of the check box.
From the Preferences screen, touching the "Account..." button takes us to this screen:
(Again, t could use some styling and layout help, but the contents are all there.)
Just like the account setup and creation screens, I've mocked this up as a web page. (Live demo here.) It could be implemented as a chrome:// URL. The rationale for doing it this way is the same as with the account setup/creation screens, so I won't go into it again.
I've left out a ton of stuff which is in the Firefox-weave preferences dialog box. For example, there's no way to turn encryption off, to see an activity log, or to get debugging tools -- all of these are only of interest to us developers. I've already covered why we don't need sign-in/sign-out. All you need to be able to do on the mobile prefs screen is:
Fennec is meant also to support devices with no touch screen, that have only a directional pad, numeric keypad, and "soft" (i.e. context-dependent) buttons. As I understand the state of Fennec development, the touch-screen stuff is highest priority, so the non-touch UI is not as far along. I'll have to see what the interfaces for tabs, bookmarks, and preferences look like on non-touchscren Fennec before I can figure out how the Weave UI will plug into them. The account setup, account creation, and preferences screens will be exactly the same.
One thing about mobile devices: they're always getting shut off suddenly. You're poking away at the screen on the train when suddenly your stop is announced and you have to rush to close the gadget, shove it back in your pocket, and jump out the door. There's no time to wait for a sync operation to finish. Or, batteries could suddenly run out.
So if Weave is in the middle of doing its regular auto-sync and suddenly gets shut off, it's going to have to be able to deal. We need to make sure that interrupted syncs are recoverable, by using journaling, atomic transactions, etc etc.
Auto-sync on shutdown, which is on by default in Firefox-weave, doesn't make sense in Fennec, since the shutdown of Fennec will often be simultaneous with the shutdown of the whole device. Instead, the next time Fennec starts up, it should check if it has any unfinished syncs going and try to finish those; and then it should check if syncs are needed periodically while running.
Firefox Weave has a "Sync Now" button, but I've deliberately left this one out. It's only of interest to people who are either debugging Weave (us) or who are trying to micromanage their sync behavior for some reason. For normal users, periodic automatic syncing in the background is the ideal behavior, and no UI to trigger it is needed.
Since shutting down during sync won't be a problem, we can drop the progress bar indicating Weave sync status -- there's no actionable info there for the user. It just happens invisibly. This further unclutters the UI.
Finally, I haven't included any notification or error-display mechanism. I can't think of a single error or notification message that Weave could display that a mobile user would need to know, or be able to do anything about. If you can't do anything about an error message, its appearance is just an annoyance. What with a tiny screen and a user operating in a high-distraction environment, extraneous notifications and errors incur an even higher penalty than they do on the desktop. So unless anyone can think of an exception, I recommend Weave just fail silently and then sometime later automatically retry whatever it was doing.