Non-touch screen browser UI

On Friday I posted a few screen shots and descriptions of my proposed user interface for non-touch screen phones.  The assumption is that these devices will have QVGA screens (240×320 pixels), a 5-way directional pad and two soft keys. The discussion page is here, please feel free to check it out and leave feed back. Also, I’ve created a firefox extension let’s you check out the work in progress.  It creates a 240×320 pixel window using the new chrome. I’ll keep that updated as I make changes, and it should get updated through the add-ons manager.

The central idea of the dialogs has been to simplify the navigation. Most dialogs and actions are accessed through the main menu which is mapped to the right softkey.  Dougt suggested combining bookmarks, history and the address bar into one unified places dialog.  I like that idea and I hope to get to it in the next week or so.

The feature I find the most intriguing is the scrolling and zooming with the virtual cursor. Currently, it works like this (or at least its supposed to):

  • A virtual cursor indicates where the browser’s current focus is.  It also allows navigation of complex UI items such as drop down menus and roll overs.
  • Short clicks of directional pad map into Dougt’s spatial navigation, bringing the focus to the nearest selectable element as indicated by the virtual cursor.
  • Long presses of the directional pad begin smooth scrolling. Instead of jumping from link to link, the cursor moves in one direction at a steady speed.
  • After a set amount of time, the page begins to zoom out. This is implemented with Firefox 3’s full page zoom feature. An intended side effect of zooming out as we scroll is that the scroll is accelerated.  It also allows the user to look ahead as they scroll at these higher speeds, similar to how a driver fixes their eyes further down the road at 65 mph than they do at 35 mph.
  • The OK/Select key maps to the left click of a mouse. A key down event triggers a mouse down, a key up event triggers a mouse up event and a key press event triggers a mouse click event.
  • The Left softkey maps to the right mouse button in the same way, providing access to context menus (not implemented yet).
  • One item to be added to the standard context menu is begin selection. This will have the same effect of pressing an holding the mouse button.  The browser will highlight the text and other elements as the user moves the mouse until another OK/Select or left soft key press is detected.  The effect will be to allow users to select and copy text.

It should also be noted that the assumptions in the first paragraph is considered a bare minimum for functionality. We’d also like to do something useful (an hopefully intuitive) with any other controls that are available. The obvious ones are numbering menu items, using a click wheel or volume control to scroll and mapping clear, send and end call into things like back, forward and stop.

Some non intuitive ideas include mapping the number keypad onto spacial location of the screen. So for instance if there if a user wanted to go to the bottom right hand corner of the screen they could press the ‘#’ key.  Alternatively we could use those keys for fast scrolling (holding the 9 key would fast scroll down and to the right).  We could also map the number keys into the bookmark system (long pressing one navigates to google.com, 2 brings you to your blog site etc.).

But this brings up another point.  How do we determine what the “right” mix of default settings is?  And even more importantly, how do we let users customize these settings with a minimum of pain?

 

Colts fans boo 14 year old girl

This probably shouldn’t shock me.

http://www.youtube.com/watch?v=WzKIvMxmfAM

Stay classy Indy…

n800 as an IP phone

So today my Mac decided to get hung 5 minutes before our weekly mobile call.  No one told me running two VMs, open office, safari, firefox (in each VM and natively), mail etc. etc. etc. at the same time was a bad idea….

Anyway, not wanting to miss out on all the exciting developments in mobile mozilla I dialed in on my handy n800.  I knew it was supposed to work, and I figured it would get me by until my mac rebooted. What I wasn’t expecting was for it to blow my mac away in terms of performance.  The sound quality was great.  I ended up using it for all four of my conference calls today and didn’t drop the call once, which as anyone who has been on a call with me recently knows is pretty close to a miracle (I’m looking at you comcast).

According to Taras, the N800 is  equipped with a pretty bad ass DSP, so the sound quality shouldn’t be that  surprising.  For anyone else who has been stuck using a soft phone recently, I encourage you to try it.

Tab search

I love tabs. I’m one of those people who spends a week with the same browser window open, just creating tabs every time I look at something new.  In my mind, it means I can always find what I was looking at a couple hours ago of even a couple days ago.  Maybe with the awesome bar I should consider changing my behavior, but old habits are hard to break regardless.

But, this leeds to one of my biggest pet peeves of browsing the internet; searching though 149 tabs (really, that was the count when I checked ten minutes ago) trying to find the one I want.  I’ve complained about it a lot, mostly to my roommate who I doubt was listening.

The good news is I finally decided to get off my duff (or on it if you want to take things literally) and do something about it. Its a simple extension that adds a search box to the “All tabs” drop down in firefox.  That’s the drop down that lists all the tabs you have open when you click the little down arrow on the extreme right of your tab bar.  This is my first foray into the world of extension making, so use with caution….

 http://people.mozilla.org/~blassey/tabsearch.xpi

As a side note, I began thinking about how we manage tabs in Firefox while I was doing this.  It seems to me that there is a lot more we can do here.  First off, wouldn’t it be great to get some sense of the history of a tab when looking at the all tabs drop down?  I know I’ve frequently lost track of a tab I was keeping open to look at an API because I had clicked on a link and the title had changed.  Just a thought….

Mobile tinderbox

We’ve got a new tinderbox set up and producing builds for the n800/n810.  You can find it here:

http://tinderbox.mozilla.org/showbuilds.cgi?tree=Testing

As of now, it is just making sure that the tree builds for these targets.  We aren’t running any tests to see if the builds actually run, let alone run well.  If any one is interested in setting that up, please let me know.

Finally, the nightlies from this tinderbox are being put in a repository on ftp.mozilla.org.  If you add the following line in you sources.list (or in your application manager) you’ll get the latest nightly every time you run an update.

deb http://ftp.mozilla.org/pub/mozilla.org/mobile chinook extras

Enjoy!

Maemo repository

I have created debian installer packages (.deb files) for armel and i386 for the builds I blogged about several weeks ago. You can download these directly for the i386 scratchbox or armel based device running OS2008. Once you’ve downloaded the .deb file, you can install it by running the following command as root:

# dpkg -i minefield_1.9-1_(i386 or armel).deb

Alternatively, you  can add the following lines to /etc/apt/sources.list:

deb http://people.mozilla.com/~blassey/ chinook extras
deb-src http://people.mozilla.com/~blassey/ chinook extras

which will allow you to install minefield (from a root terminal) with:

# apt-get install minefield

or build with:

$ apt-get source minefield
$ cd minefield-1.9
$ dpkg-buildpackage -rfakeroot

See http://maemo.org/development/tools/#apt-example for more details.  Also, I should note that these packages don’t wok with the graphical Application Manager.  I assume this is because they are not signed.

There are lots of bugs. The virtual keyboard issue has been partially resolved, but there are still focus issues (hint: if they keyboard is not responding, try pressing left or right on the directional pad).  Still, I think its an exciting start and an interesting data point.  I encourage everyone who owns an n800 or N810 to download and try it.  Let us know what you think, but keep in mind this is not a release.  Just what I’ve hacked together for your enjoyment.

Mobile build options

For desktop systems, Mozilla is supporting three major systems (Mac, Windows and Linux).  There aren’t a huge amount of variations needed for subclasses  of these systems.  However, as we begin supporting mobile devices, I can see the need arising for “profiles.”  There are two major reasons for this.

First, especially when it comes to embedded linux, there will be many flavors of  the OSs to support.  I just finished making the virtual keyboard work for the N800, which involves calling Hildon specific methods to bring up the keyboard.  I’m convinced that there will be a different implementation for just about every linux device.  There will probably be many other functions that will be device specific that we haven’t even run into yet (such as connection handling, and sms/phone integration).

Second, there will be classes of devices that share certain characteristic, such as touch screen/non-touch screen,  12 key/qwerty/no keyboard at all and GPRS/EDGE/3G/wifi.  We might also like to do certain things for screens of certain size.  How can we express these things in the build system and/or classify extensions that should be included.

I’d love to hear any and all ideas…..

Minefield on the N800

Nokia released a Beta version of OS2008 for the N800 yesterday.  This is of particular interest to the Mozilla community because of the pango and cairo support it brings to the device.  Using this support, one can follow the build instructions found here and get a working build of Minefield that will run on your device.

It is very important to note that this is not Mobile Firefox. Its pretty stable for ‘normal’ use but I was able to crash it by opening a bunch of google maps tabs. (failed alloc not handled properly).  Also, text input is broken; I’m sure it won’t be a problem with the hardware keyboard on the N810, but right now focusing on the address bar or a text box doesn’t bring up the soft keyboard.

What this is, in my opinion, is a very nice starting point.  This binary has all the capabilities of desktop Firefox, including support for XUL and SVG, so it can be an excellent platform to experiment with different UI concepts for mobile (both the browser UI and web pages targeting mobile users). We are also working on tools to develop and test mobile UI’s on your desktop, but more on that later.

We have a lot of work to do on stability, usability, performance and getting the “right” mix of features.  For now though, if you have an n800 or n810, I encourage you to pull and build the source an then tell us what you think.  Hopefully we’ll have nightlies available shortly to cut out the pull and build steps.

Minefield start page

Google maps

SVG Tetris

Hi

My name is Brad Lassey and I started working for Mozilla October 1st.  I am going to be focusing on the various aspects of bringing the Firefox experience to mobile devices.

Previous to this, I worked at France Telecom R&D’s Boston Lab working first in the multi-modal skills center and then in the Integrated Browsing group.   Before that I completed my masters at the MIT Media Lab working with Pattie Maes’s  Interactive Experience research group

Close
E-mail It