Firefox Mobile Concept Video
Firefox is coming to mobile. The innovation, usability, and extensibility that has propelled Firefox to 200 million users is set to do the same for Firefox in a mobile setting.
User experience is the most important aspect of having a compelling mobile product. Every bit of interaction and pixel of presentation counts when typing is laborious and screen sizes are minuscule. Many of the standard interaction models, like menus, always-present chrome, and having a cursor, don’t necessarily make sense on mobile. It’s a wickedly exciting opportunity but there are myriad challenges to getting it right.
One avenue for exploring this opportunity is through Mozilla Labs, which is about pushing the envelope towards better and brighter interaction horizons, as well as incorporating a winder community into the innovation process. This concept video explains one direction we are thinking in, and we’d love to inspire participation in thinking about other directions.
Standard Mockup/Experimental UI Disclaimer
All of the images and videos are only conceptual mockups of an experimental UI for Firefox Mobile, any particular feature may end up looking entirely different, or may not even make it into the final release.
Screencast
Design Principles
Touch. This concept prototype for Firefox mobile (code name Fennec) is being designed for a touch screen. Why not multitouch? Because Firefox should be able to run on the least common denominator of touch devices. Especially for touch-enabled interfaces direct manipulation is key. Along that line of thought, the interface should be operable with a finger. Switching between input methods is time-consuming and annoying, so the user shouldn’t have to switch to a stylus or other secondary form of input. Firefox will work on non-touchscreen devices, but that’s out of scope for this demo.
Large targets are good. The same fingertip that controls the interface takes up between 1/5th to 1/10th of the vertical/horizontal height/width of the mobile touch-screen. In other words, fingers are fat: hitting small targets is like trying to touch-type with your elbow. All actions should be represented by targets that are large enough to be fast, easy, and (at the very least) not aggravating to hit.
Visual Momentum and Physics are compelling. Nothing shouts “sexy!” like pretty animations and a physics engine. Beyond marketing appeal, there is a strong argument that such physicality helps the user build a mental model of the interface, and that interface physics yields consistency. We are wired to track the movement of things and to be able to remember where they’ve gone, as long as they don’t appear and disappear, which doesn’t happen in the real world. Of course, copying every physical metaphors blindly gets you interfaces like the multi-million dollar blunder that was Microsoft Bob, so we need to select our metaphors carefully.
Typing is difficult. This means we want to minimize the amount of keystrokes required to get anywhere or do anything.
Content is king. With restricted screen size, every pixel counts. As much of the screen as possible should always be dedicated to content, not controls or cruft.
Opening Screen
Let’s start with the basics. When you first open the browser, you’ll see two things. Your bookmarks (right), and a big plus button (left) which opens a new tab/page.
Clicking on bookmarks zooms the browser to the page. You can scroll the page by dragging as well as flicking. Scrolling has momentum (like the iPhone), so it’s easy to go long distances.
You zoom out again by dragging the page past its border in any direction. One of the cool things about this is that the gesture for zooming out to the home screen is simply throwing the page in any direction. It’s singularly therapeutic! It’s also discoverable: in the panning process you discover the visual clues that there is more past the edge of the page. In informal user tests every user figured out the interaction without instructions or help.
New Tabs
Creating a new tab is easy. You click on the big plus, and the browser finds an open spot, puts the tab there, and zooms in on it. If you have a homepage, the new tab opens there. Even as the page zooms further out, the new tab buttons remains in the same logical spot.
Placing the cursor in the URL immediately gives a set of results (a la the awesome bar) that is generate from your history sorted by both frequency and recency. To do an immediate search on what you’ve typed, you can just tap a search provider at the bottom of the results.
Controls
The standard controls (like back and forward) are located to the left of the page. You get there by gently dragging the page in the appropriate direction. When the controls are visible, the URL bar fades in as well. This makes for a discoverable way to access the chrome, with a huge Fitts’s-law-abiding target. To get rid of the chrome, you just drag the page back to the center, and the controls slide away.
Because the controls are accessed by panning, for the most part every single pixel of the screen is filled with what you care about most: the content.
By using horizontal panning to access the controls, we avoid the iPhone’s problem of needing to go to the very top of the page to enter URLs. (Yes, I know about tapping on the top of the screen to auto-scroll, but few iPhone users even here at Mozilla knew the trick). Horizontal panning does introduce the problem of accessing the controls when the page requires a lot of horizontal scrolling, but this is a rare case, and with kinetic scrolling moving a long distance is fast. Even long left-right pages will require only one flick to get to the edge, and then one push to open the controls.
To increase the discoverability of the controls even further, it might make sense to show the controls in the zoom-out view as well (appropriately scaled with the page).
Spatial View
In the zoomed-out view, you can drag the pages around to group them in a way that makes sense to you. If you have a couple pages open to your email, and a couple pages open to some vacation planning material, you can place the similarly-themed sites physically together. This makes excellent use of our spatial memory and muscle memory: finding where you put a page on two-dimensional plane is remarkably swift and requires little cognitive load. With the addition of semantic placement, it’s even better. Spatial view uses space in a near optimal fashion—all pages are displayed at once in near maximum size so that extraneous interaction is not required to browse through your open pages.
This is in contrast with the standard list-based, pop-up method of choosing pages, which is fast for a small number of items but becomes increasingly cumbersome as you have to peck-hunt-and-scroll for the page you want. Such interfaces retain no sense of physicality or visual momentum, and thus lose the benefits they confer.
One of the big benefits of the Spatial view is that it is easily extensible. The bookmarks page is a good example, but think bigger. Imagine if I wanted to transfer info from one cellphone to another: I’d bring the the new phone close to mine, and it would appear as an area in the spatial view. I could zoom into it (assuming I had the appropriate permissions) and see what the other phone is looking at, collaborate, and drag tabs/files/contacts back to my phone. I’m sure there are other ways of using the metaphor, too.
There are a couple ways of augmenting this view. For example, the pages can be sized based on the frequency/recency with which you view a site. That way, sites you visit more often will be larger targets. It also helps to combat the all-page-thumbnails-look-like-white-squares problem. The spatial view has some potential scaling problems on the desktop where you can have upwards of 100 tabs open, but on mobile you’ll never have more than 10ish tabs open. Even so, I think there are solutions to the desktop problem, but that will have to wait until another post.
Spatial view has some passing similarities to Apple’s Expose. Both mechanisms are examples of zooming user interfaces (ZUIs), which have been around for almost as long as multitouch. The biggest different is that with Expose, the spatial relationship between windows is broken every time the windows reshuffle. With the spatial view I know that the tab I want is down and to the left, whereas that mapping doesn’t exist using Expose. It’s an important distinction that helps the user to feel comfortable in the space and not get lost.
Get Involved
The code for the demo is open-source and available here. You can even play with it, but be warned that it is a hack-up-prototype and there are lots of edge-cases that aren’t handled. Labs is interested in turning this concept into a working Firefox extension, so if you are interested in helping to spearhead that effort, drop me a line (my first name at mozilla.com). If you’d like to get involved with Mozilla Labs more generally, check out our forums.
If you’d like to get involved on a broader level with the Mozilla mobile effort, you can join us on IRC (either #labs or #mobile on irc.mozilla.org), join the mailing list, or take a look at the Mobile wiki page.
Thanks
Creativity thrives best when not in a vacuum. There are a lot of folks I’ve bounced ideas off of, but I wanted to call out special thanks to crazy-in-the-best-way-possible Mark Finkle, drier-wit-than-thou Madhava Enros, unsung-hero Alex Faaborg, and I’ll-get-you-next-time Jenny Boriss for their invaluable input.
RT @azaaza Firefox Mobile Concept Video | Follow @azaaza on Twitter | All blog posts
Boriss
Very cool post Aza – your demo is full of great ideas. A couple thoughts –
- You may want to scale the page view when the back/forward panel is activated. People may want to click forward and back a few times, or even temporarily keep this menu in view, but as it is they are getting a partial view of content. This could be particularly annoying if the last section of text in a paragraph is cut off. To keep a person’s place, the trick would be to scale upwards *and* downwards so that as text is repositioned, the visible portion of window is in the same spot.
- I think group behaviors could work very well in your tab view, such as tagging groups of tabs or deleting them.
Aza Raskin
@Boriss: I like your scaling idea. I’m not sure if I made it clear in my prose, but clicking on the back/forward button wouldn’t hide the controls, so you could go back multiple times until you found the right page. I wonder, however, whether losing that left 100 pixels matters when you are just trying to find a page in your history? It’s worth mocking up to try it out.
Kalle Persson
Oh, nice. This seems like a really nice way to do mobile browsing, especially with the zooming view. Makes sense on a touchscreen.
I have a question though, how will the page navigation work when you’re accessing the sidebar? Will you be able to scroll pages the same way you do when not in “sidebar mode”?
I’m also a bit curious how to handle very long horizontal or vertical pages. Wouldn’t “page tossing” conflict with scrolling?
Thanks for an interesting read. I’ll be watching your blog for more interesting stuff!
Keff
That is very nice, so much better than minimo (I feared that firefox is going to make same mistake as Minimo – copying desktop prowser on a device where it doesn’t fit).
I like the actions made by scrolling to the side, it is quick, and inituitive.
As for the tabs – not so sure, I personally wouldn’t like to have to micromanage positions of tabs, and I don’t like the ‘chaotic’ look of it.
My idea would be a grid with thumbnails: first 4×4 (+ button and up to 3 pages), then 3×3 (for up to 8 pages), and then user would get more tabs by scrolling the list with his finger (so, clicking would open the page, dragging would scroll the list, with snapping to edges).
However, in a typical scenario, user wouldn’t open more than 5 pages (and even todays fastest mobile browsers on fast PDAs have problems with speed and memory with several pages with lots of DOM nodes).
By the way, will the FF be fast enough to do smooth scrolling? I am afraid that XUL engine will be too heavy for mobile devices (as it is still interpreted JS, and rendered DOM, instead od Operas and IEs C++).
Aza Raskin
@Kalle: Absolutely. You’ll still be able to scroll the pages as normal when the control side-bar is up. It’s important that as little as possible in the interface is modal.
@Keff: I think it is important that users never need to micromanage their tabs. That’s why if you never move any of the tabs around, they’ll line themselves up in just the grid you describe. I played around with snapping, and although my implementation was too lack-luster to demo, it felt nice.
A whole bunch of extremely good work has gone into making FF on the desktop fast (as you can see by playing around with FF3). This work turns out to be invaluable as we bring FF to mobile: the mobile team is working hard to make FF able to do both smooth panning and zooming.
Tobias A.
Very smart and a really nice use of an application-wide ZUI. And, not to forget, it’ll finally reveil the ‘design’ sites that extremly use horizontal scrolling as useless as they are ;-)
Patrick Camilleri
I love your ideas, especially how you handle the screen real estate problems, as much as possible should be given to accomodate content.
One thought, you specifically said that it will work on single touch screen devices (not multitouch). I agree with you that single touch should be used, because most pdas today use single touch, but it would be great if firefox automatically realized if the phone can handle multitouch. If the phone does handle it (like the iphone), then firefox zooming and panning and all that can be done using multitouch as well.
Multitouch is a great technology, and probably most new phones will be trying to integrate multitouch, so its good to think of multitouch from the very start to accomodate the best of both worlds (the new phones, and the “old ones”).
Great stuff..keep it up..always love firefox.
Winz
You could also zoom out a little when the back/forward buttons appear or when they are used. The content would be smaller and less readable, but you will generally have a more clear global view of the pages.
And I think that you concentrate on the global aspect of the page rather than on the content itself when you are navigating in your history.
What I don’t understand is why the “zoom out” feature is on both sides of the pages. Isn’t it annoying to have to pay attention not to go too far when aiming at the buttons on the left?
Aza Raskin
@Patrick: Good point re multi-touch. To handle multi-touch I was thinking of using the idea of “progressive enhancement” from the web. That is, if you have multi-touch than you can access new gestures. Do note that sometimes multi-touch loses to single-touch, so that Apple added double-click to zoom in, in addition to the pinch.
@Winz: Boriss suggested something similar for zooming out slightly when the controls are on screen. It would be worth playing with that. As for why all directions? My basic idea was that you could throw the page any which way to zoom out. If you try to scroll of the top and bottom, you get the same interface affordances. That is, trying to move away from the page zooms you out. Knowing what’s best, though, would require some user testing. That said, as I have used the interface, I haven’t ever gone too far and zoomed out when I didn’t mean to.
Ikaros
Lots of great ideas here, definitely looking forward to seeing more.
Would something like this be available for larger scale touch-screen devices as well, such as tablets, umpcs, etc.?
V
Very interesting mechanic. The 2D plane reminds me a little of expose on OSX. I think it’ll work really well as there really is so little screen real estate on mobiles. Not sure if it’s already been thought of, but I think it would be nice if the content page “snaps” back from the control panes/menu if there is no user contact/input after say 2 or 3 seconds. It’d be much easier rather than having the user “push” the content back into view.
Also, what are that platforms that Firefox Mobile is being developed on? I’m particularly curious about Android support.
sil
Couple of thoughts around a really rather interesting concept mockup:
1. “Placing the cursor in the URL immediately gives a set of results” — but there is no cursor, right? So there’s no hover event available. Does this mean the same thing as “touching the URL bar”?
2. Since this is for single-touch (which is all my touchscreen phone can do, so yay; bring on the J2ME version of this for my Armani :)), how do you zoom into a page, and how do you choose a link to follow? If touching a link directly is what follows it, then there needs to be a really simple one-finger way to zoom in and out, because links are too small to press in the default view…
Aza Raskin
@Ikaros: Fennec (Firefox for mobile) is the real Firefox — it’s not a second-class special-classed browser. That means that the innovations that come to mobile will also be available to run on the desktop or other more “normal” computing devices.
@V: I am not generally a fan of time-based interfaces. They are generally too slow for some people, and too fast for others. In fact, your own perception of time is dependent on your current cognitive load, so that time-based interfaces will also never quiet be right for just you!
We are still figuring out what platforms Fennec will run on, but we do know that the current build already runs on devices like the Nokia N810.
@sil: You got me. I misspoke. I indeed meant “touching the URL bar”. Old habits die hard :) In terms of single-finger zoom in and out, I was imagining the double-click method that the iPhone uses for now. It’s an avenue of exploration that requires more thought.
Paul
Very nice. I like the way it maximizes screen space. How have you come with that concept?
Look mom, no chrome or start menu!
Mirek2
Only one suggestion: Make the “Tab” plane snap to grid…
Ben
This is really cool, I can see these features not only used for mobile but for firefox’s desktop version as well.
Jonathan Greene
This looks very cool and I hope to see a build in fennec for the Nokia N810 soon … What happens though on non-touch devices? How would we move things around and get access to the controls you are showing?
Dan
I very much like this concept, and I very much hope someone takes the 2d tab-spacial thing and makes an extension for Firefox that does it.
A refresh/stop button would be welcome, and of course we need some sort of close tab button. Maybe a little X that’s across from the page title when you zoom out.
I wouldn’t want to stop there, I’d really want all the functionality I can get with Firefox desktop (I’d definitely go too far if I designed something like this!) but if I had to limit my vision I would want at least the ability to see urls of links easily, and some sort of extension system like in Firefox desktop definitely, I would NEED [lightweight] ports of NoScript and Adblock Plus.
Roope Rainisto
Hi Aza, very interesting stuff, some of these ideas certainly bring a smile to my face.
One topic I haven’t seen explored here: Do you have a way in this concept to handle zooming in and out within the web page? i.e. there’s the problem of seeing things clearly on a small mobile display, hitting a right link amongst many links close to each other etc. In theory you could of course put +-/ controls on the left side tool area, but would you have anymore elegant in mind?
Joe Feldman
At first glance the only reservation I had was the back buttons and the zoom being separated by speed of gesture. I would have to actually use it to know whether it would be a problem. Looks fantastic. As a Nokia N800 owner, I would love to test it!
dh
Love it. I think you made the right move in not mimicking a desktop layout. Little curious how you differentiate the “back” buttons with other options (I think it was “zoom”). Instead of using speed or length, why not make a circular motion clockwise zoom in, counter clockwise zoom out?
Really looking forward to seeing what you guys do with mobile.
Abi
Many great ideas in this post. One thing I really liked was having the toolbar on the side. I mean this is such an obvious thing (now that you showed it) and so, I wonder why Apple didn’t consider this for having the back button, etc. It would free up more space on the already small screen and in the case of the url bar, its so much more painful to scroll all the way up to get the bar.
I also like the 2D space idea and as you noted in the video, it would be great for desktop Firefox, too. For some time now, I have also been thinking about how to have a better way of organizing/grouping tabs because I find the simple tab bar to be very constraining as I surf the web. So, having a 2d space for tabs makes a lot of sense.
dj mue
it’s nice. but it’s not decided how to scale the content page? then i like to share some idea to zoom in-and-out content with gesture on no-multitouch screen.
http://kr.youtube.com/watch?v=hYkEZxnuhWo
Mark
Oops, left this comment on the Labs page, but this may be the more appropriate place…
Looking good. Good ideas. But having any functions that are based only at the bottom of the page you’re on does not seem like a good idea to me. The availability of these functions will vary based on the size of whatever page you’re at. They would be fine at the bottom of the Google home page, but, if, for some odd reason, you’d set your google search results to 100 per page (or you’re at some other very long page), all these functions will be very inconvenient and out of reach in a practical sense.
The solution that comes to mind for this problem is to have a button below where you have the Page Info button (it could be flat and wide if you’d like to keep current ratios). Click this new button and then your functions bar slides out. This would also make it convenient for when you’re performing a specific function on a part of the page. Let’s say you want to call a number or bring up a map (if we don’t have an algorithm that detects it for some reason). Merely highlight the text in question and bring out the functions bar. This would be much more convenient than highlighting a part of the text and then having to scroll all the way down to the bottom of the page in order to perform functions on it.
Patrik
Very nice. I like the spatial nature of the “tabs”, the fact that you use the mostly unused drag left/right gesture, and that you hide that much of the interface.
I’m not so sure about the bottom-of-the-page stuff (difficult to reach) and the fact that there are two things on the left and it depends on the amount you drag (needs too much effort to get it right).
iPhone has a shortcut to scroll right up to the top. Have you thought about a similar thing?
Daniel
Nice work. How about sliding left to go back, sliding right to go forward and up/down to zoom out? that would give the web a truly spatial quality Aza.
Christoph
Dear Aza,
this is an amazing demo. I thing something like this would also be a very reasonable interface paradigm for a multitask touchscreen-based operating system (applied to all, not just browser windows). Please publish it on paper in some way too, so that nobody can patent it.
I see two things worth thinking about:
-Having the “Zoom out” option duplicated on the left side, where the navigation controls are located, creates an unnecessary need for fine motor control. You have to move it just the right amount of space to use the navigation controls. Removing the “zoom out” from the left side would give movement simple semantics: left = actions, right = zoom out.
-The controls at the bottom might be tedious to reach if a page is long with respect to vertical scrolling. Of course this may be a legitimate tradeoff for keeping the paradigm of “no user interface elements on the page” pure.
Ian Jorgensen
Excellent post. I especially like that you’re pushing for designers to follow the metaphors. Something that even the iPhone hasn’t quite managed to do.
Jeffrey Morgan
Nice demo Aza.
As with most things, the usability will depend on implementation details:
1. The touch recognition software would need to differentiate between a finger/thumb on the page starting a throw gesture and a finger prodding a link. The system would be less usable if users had to search for open space to start a throw to ensure their gesture is not mistaken for a prod if the throw gesture starts on a link. Finding open space to start a throw gesture would mirror the usability problems of finding open space to drop an object to cancel a mouse-based drag. (I use the word prod to describe the finger equivalent of clicking on a link.)
2. I wonder how well the spatial arrangement of tabs would scale with more than the three or four pages in the demo. Screen space is limited and when the pages get too small to be useful, showing them at all would actually waste space. A list of page titles might then be more appropriate. Whenever approach is taken, a set of levels-of-detail presentations might be needed.
Rene Melzer
I miss the button that close the tab!
Ian Jorgensen
Excellent post. I especially like that you’re pushing for designers to follow their metaphors. Something that even the iPhone hasn’t quite managed to do.
Brian King
What about having a ‘Cover Flow’ type option. If it can be done for music, why not tabs too. Songbird already has an implementaion in an extension (for album covers that is, not tabs).
Thomas Stache
I would be interested in a solution for the problem of navigating a page like Google Maps, or Google Calendar (the desktop versions) on a touch screen. On the iPod touch I never got the browser to move the map or calendar view – instead of scrolling around in the surrounding web page.
MarkC
You probably also need a way for the user to specify that the input is intended for the browser, not the page content.
Consider something like a Flash or Canvas based doodling application – how is the browser to determine the difference between drawing a line in the app compared with a scrolling gesture for the browser.
For devices with hardware keys that can be used, one of them could be defined as the “attention” key – when it’s held then gestures go unambiguously to the browser rather than the content. Or perhaps pressing it would act as a toggle between “browser” and “application” targets.
For devices without a suitable hardware key there would need to be a gesture that the browser catches to make that switch.
The Apple Newton (which had no hardware keys apart from the power switch) recognised the differences between the following simple ways of starting a gesture:
* A single tap (down then up)
* A double tap (down then up, down then up)
* A drag (down and move)
* A tap-and-a-half (tap down and up, then tap down and move)
* A tap-and-hold (down, hold until the gesture was recognised, then move – this was used for marking selections)
The first three items map easily to mouse-click equivalents (click, double-click, and drag). Tap-and-hold is often used on tablet devices in lieu of a right-click option. The tap-and-a-half, I’ve only ever seen used on the Newton – perhaps you should “claim” that as a way of unambiguously directing input at the browser rather than the content.
Joe Humbert
What about cell phones that are not touch screen? How would the user get access to the controls? Also you didn’t discuss zooming and panning around pages that are too big for screen real estate. How will this work with/ effect the zoom out feature? Nice concept though. I would like to see the mobile Firefox browser available asap so I can ditch mobile IE
kht
hi
this is some impressive work,
im still worried about speed and speed has to be high priority.
if im using a mobile i would like to sync all my bookmarks with my firefox at home.
it should also be possible to save current state so i can continue later or sync the state and use it on my laptop.
other than that i really like the interface which uses minimal screen estate.
i am actually just joining university and was really interested in gui design etc , is there any particular degree i should go for.
i would really appreciate your advice.
thank you
Rohan Jayasekera
If “user experience is the most important aspect of having a compelling mobile product”, surely speed should be a major consideration, given that most of us who access the web via the cellular networks don’t have 3G speeds today.
My Treo 650 was effectively unusable for web access, until I installed Opera Mini, which includes a server that compresses each web page before it’s transmitted over the airwaves.
Would Mozilla Labs consider adding compression? Without it, Firefox Mobile wouldn’t be an option for me.
Kevin
this is really awesome…impressive video… let’s hope Mozilla make it available asap…
bex
What fun! Very playful. I am curious what kind of screen size you are prototyping for? The video seems a bit larger than many pda/smart phone devices – but I’m new to the space so I’m not really sure.
It’d be nice to have some auto options for arranging your thumbnails of tabs too – like sorting. Probably wouldn’t be useful until you could really open a lot of them, but if you could it might come in handy. Or maybe even some other view options, like a list view? Just ideas. ;)
Very inspiring! Thanks for sharing!
Hans
Very impressive. Will it work on a Nokia N95 ?
Carlos Leopoldo
Wow, impressive! I hope to see this browser on my BlackBerry.
bpm2000
very cool – like Jeffery M. noted above, once it gets to a certain # of tabs how will it handle the mess? He suggested just having a list of page names instead of the graphics associated – i think this should even be a feature you can turn off/on from the start. Even with 1-5 pages open I think many people would appreciate the cleaner look of having the page names on a compact grid vs page graphics with the title overhead.
Rhazza
I want my preferred browser on my mobile too! Great you guys from mozilla, i was just waiting for that to get rid of OPERA! =]
Johnathan
I have one word fantastic, nice to see Firefox thinking outside of the box as usual. With a little work i can see this being the best mobile broswer platform.
Only thing that concerns me is the screen real estate you’ve got to work with having multiple tabs being a little small, however with most touchscreen phones having reasonable sized screens i don’t think this will be a major issue.
Hoang Pham
I see some issues with the proposed scheme:
. “Horiz pan to access controls” assumes the page layout is “skinny” so that the side edge is accessible by a single horiz swipe/flick. If it takes more than one swipe, then the extra labor more than offset the intuitiveness. I suppose this “skinny page” assumption is valid if one were to only browse mobile-specific sites, or if one has a high-end smartphone with hi-res display. For the first, then browser functionality is limited; for the second, then it violates your lowest-common-denom tenet.
. On usability: The best control scheme is one that is relatively intuitive that it can be quickly found/learned, and requires the least amount of hand/finger motion. While the proposed scheme is intuitive (“go to the edge”), there are faster ways to access controls, that is just as intuitive.
For any sort of involved UI manipulation (i.e. more than single thumbing), a MID/smartphone requires two hands: one to hold/stabilize the unit, while the second manipulates the UI w/ one or more fingers. The above proposed scheme “dumbs down” the holding hand (let’s call this the aux hand) by ignoring it altogether, but it still can be functional, such as thumbing a “menu” button on the unit’s side to pop up a control menu. Assuming suitable side controls, the aux hand can also handle vertical/horiz scrolling. The pressing of one or more button to access the controls is subtantially less work than swiping to an edge, especially if said edge is not near. Admittedly, it isn’t nearly as “cool” or hip as the eye-candy of flicking images about.
. There is a further issue with a “two-level” swipe proposed, ie. a heavy/far swipe to zoom out, and a light/near swipe to access fwd/bk buttons. This requires more nuance in tactile memory (what you refer to as muscle memory), making it less intuitive.
. The proposed Spatial view sounds inefficient and runs counter to the notion of spatial conservation on a device with restricted display real-estate. It can be alleviated with various tack-ons, such as hierarchical zooms, and by virtue of being planar, it can be said to be superior to the simple linear (a line) scrolling through a list, but the notion of using size and location as a differentiation factor is poor. Why not different boundary color? Why not blinking? Any of these is better than size. And one can imagine much more efficient planar schemes of organization and access than the simple location/size-based scheme promposed.
Jorge
Just a suggestion for the all-page-thumbnails-look-like-white-squares problem: you can use the site favicon, maybe overlaying it on top of the thumbnail somehow, maybe with some transparency to allow the whole thumbnail to still be visible.
Favicons are much better for visual memory than white page thumbnails, I think.
Aza Raskin
@Jorge: Alex Faaborg had the same idea. I think it is an excellent one!
Lock
Looks great, the only thing i would suggest would be more controls, possibly different ones depening on white side you pan out to, and also a different homescreen. Have options, presets and other things in a permanent toolbar at the top or side. Booksmarks shouldn’t be in the same format as tabs, differentiate them for the user. Also, and i’m sorry to compare it to the iphone, but the way you switch tabs in safari is so smooth an easy. This seems a bit gawky, especially for non-power users.
Christopher Fikes
This is fantastic, I love the concept. The only thing i would change it to have zoom out only on the right, that way you couldn’t accidently zoom out when looking for the back button. Awesome work, i cant wait to see in out in the wild.
Leigh
Jorge’s comment on using favicons is a really good idea. Interesting that theres no multi touch, could get rid of page navigation buttons completely with this, for example forward and back could be handled with one finger down and flicking in either direction or tab switching etc. Any chance of a multi touch version for the iphone ? could this be implemented through plugins for mobile versions? Are plugins going to be supported on mobile? im just rambling now.
tejaspadekar
Very nice concept.
I think someone might have already suggested this, I haven’t had time to go through the comments:
1. Instead of zooming out if you ‘throw’ the page to the right too much, just assign it to always bring up the navigation bar. Zooming out can be assigned to throwing to the left. It’s a bit more intuitive especially for novice/elderly users who won’t have way too many ways to do the same thing.
Alternatively, you could keep that concept, but keep zooming out for ‘throw right’ as a configurable action. This will solve problems with customization and ease-of-use.
2. Bookmark syncing, similar to what Opera has… I can’t believe nobody else had it until Opera.
3. How much memory would the zoomed-out view consume?! It’s a little bit scary when it comes to consumers who are not well versed with concepts of memory management. They might have too many tabs open in the end, and face it, the desktop firefox isn’t light on memory anyways. you might explore the option of a very light organized spaces-like concept of open tabs, minimizing the rendering power consumed.
Those’re my suggestions… Best Wishes!
QuacoreZX
Positively excellent! My suggestions are few:
1) Throwing right is an excellent idea for zooming out, but why not just make the left side easier and take out the “zoom out” distance? Just let it be the options menu, that’ll be more than enough.
2) How are you possibly going to handle the memory requirements for this! 5 tabs on a mobile, with room for more and complete realtime rendering? I love the concept, but just make sure you don’t need a monstrosity of a phone to keep this thing running!
Thanks, and congratulations on your progress!
TrickyBAM
The text will be to small on the phone so what feature will allow you to zoom into the text. Also if you want to size up how far you want it to zoom will be important. Furthermore adding your own default how much you would like to zoom into the page would be important.
me
Why should these cool ideas be limited to mobile browsing?
I’d pick this interface over the old-fashioned (and not that very
usable/optimal) solution even on my desktop any day. Heck,
I might just buy a Mac, and get similar usability improvements…
(^;
Thanks for the demo!
rico
Aza,
I’m a web apps developer and have written 96 apps for iphone safari and it’s nice to see that firefox has been giving some thought to mobility.
I definitly agree with you about one particular area, and that target size. While I was developing apps for the iphone, I always had to be cognizant of the limited screen size, and also aware that the user would be trying to interact with their “fat” finger.
One suggestion would be something that I’d like to call “proximity targeting”. If the browser senses a finger touch near a clickable item rather than just directly on it, some visual cue could be given to the user that would allow them to decide that that was what they really wanted to do (maybe a magnifying glass, or color highlight) that the user can then slide to the appropriate clickable item.
As someone mentioned above, the other problem with a touch based interface is that certain events are no longer valid. Things like mousedown events, or hovering tend to not work well, it at all. During your development, solving that issue might be difficult without becoming modal (ie, maybe a double tap to bring the user into hover mode)
If you visit my website at http://www.myhip.com/myhip96.html please feel free and use my apps as a test suite for some “small screen” designed pages.
dirk
This is a great idea!!! The screencast is incredible.
Here are some suggestions:
- I’m also all in for session save/restore/syncing.
- group multiple tabs: add another ‘group’ button on the canvas. After pressing the button you can select multiple tabs that will group those tabs. Just add a colored border around them. A tab group could then be minimized into a single window or button. A tab group could be another application window on its own, so pushing a tab group button would open the other window and show another canvas with all tabs of that group, plus any buttons of the other windows.
On the desktop I normally have multiple windows open, each with multiple tabs, for different activities, such as reading the news, work, project-1, project-2, etc. It would be great to have this functionality on a mobile device.
Multiple windows would also allow a lower memory footprint if you would discard the memory for static/non-interactive tabs on the inactive windows.
- I like the use of gestures, but it would be nice to let them be configurable, just like the ‘all-in-one gestures’ extension in firefox. For example, the zoom out gesture of panning right could be changed to ‘move down, then right’ to be able to pan right as you would normally do on wide pages. Or ‘move up, then left/right’ would execute the back/forward page action.
- For pages that need to handle gestures, add a button on the left zoom out bar that ‘locks’ gestures. A locked gesture page cannot be zoomed out, but could be unlocked by either a hardware key, a transparent overlay button or fixed bar. And you should be able to remember locked pages. So for example, any time you would go to google maps, the zoom-out gestures are disabled but a smaller version of the left bar is always visible.
- It would be really nice if you could start a mode in which text selection would be really easy (because it is hard on my nokia 770 with opera). And you could then drag the selected text towards the url bar to go to a link or search the awesome bar, or drop the text on a button to immediately search the text in google/wikipedia/etc.
Michael Turyn
I like:
The mobile as viewer-into-infinite plane (3D space will be better, but not yet)
The throw metaphor
The adaptive/predictive search results
I don’t like:
The potential for treating bookmarks, settings, &c. as windows that can be placed anywhere,
which means they can be lost in the shuffle or made hard to find.
…that the adaptive/predictive searching is automatic—not good at EVDO speeds.
I’m a bit indifferent to the controls; I like that they’re reachable by throwing, but I don’t see why they have to notionally live on the edges of all pages, why not super-impose them as is done for the URI bar?. I think mouse gestures would be a very good idea, at least as an option.
Markus Göbel's Tech News Comments
It’s so great. But where can I download it?
I already love Fennec on my Nokia N810. But I can’t wait to see these features implemented on it.
Alan
Your ideas are great but I do have a doubt about how well this will work on a small(?) screen PDA maybe having 320×240 resolution. The screencast seems be based on a much higher resolution.
Herbert Mühlburger
I love this concept. It is really great and I hope there is a pre-release soon. :-) Great work.
Javier
[quote="Alan"]Your ideas are great but I do have a doubt about how well this will work on a small(?) screen PDA maybe having 320×240 resolution. The screencast seems be based on a much higher resolution.[/quote]
Alan, I think that it’s tailored for new devices where 480×320 is a normal resolution.
Brett Nieland
Folks,
Looks great. I suggest you integrate optional T9 auto-completion for text fields. Users know it already, and it helps increase touch target size.
Best,
Brett Nieland
Paul
Hoi,
Nice idea
Is it a idea to put in a sort of hands free speaking to brows to a webpage.
For example I want to cal up YouTube I hit a special button to record my sound.
Than I hit a handsfree button en speak YouTube and the webpage appears ect.
(*I have the same concept in hardware form, for my RGB led lights in my room )
From
Paul Mooij
Amsterdam, Nederland
Mike
It seems unnecessarily limited to me that no multi-touch functionality is built in. Supposedly this is because it caters to “the lowest common denominator”, yet for the smooth animated effects and scrolling demonstrated, a halfway decent, modern smartphone seems to be a given. Pretty much all of the manufacturers now are integrating/planning to integrate multitouch in the next generation… which is to say, by the time Firefox mobile is actually released. So while a one-finger mode is nice, why not include multitouch pinching, rotating and the like as an option for the devices that support it?
Also, how do you plan to deal with displays that aren’t that big/high-res? A look at Safari Mobile or Opera Mini should give you some ideas as to how to solve that one; both have done so in excellent, albeit subtly different ways…
A couple more suggestions: Why not make the left-swipe gesture purely for the sidebar, and the right-swipe purely for the zoom? That way the user doesn’t have to worry about swiping “just the right amount” to get the sidebar.
One more: why not just implement the “actions” bar (Digg, etc) as a button on the sidebar that pops up a menu? It would be quicker to access than having to scroll all the way down to the bottom of the page…
Just my 2 cents.
Thanks for listening!
-Mike
Niranjan
Great design. I liked the the opening screen and spatial view. But I am not very supportive of controls on the left end of the page. Are you targeting just Nokia N8×0 in your design which uses landscape mode? Most of the phones run in a portrait mode in which case there will not be enough space for the web content with the controls visible on the screen. Back and Forward will be difficult without seeing the enough page content. Also, zooming out by throwing out the page in any direction takes away the reference on the page.
Martin Tall
Hey Aza,
Just watched your video demo on the Fennec interface. Great work. Simplicity is key. The way you use the whole display area for content is great, hiding the controls until they are needed. This confirmed an idea I´ve been thinking about for the next version of the NeoVisus Gaze driven interface. It may not look the same but your demo was a great source of inspiration. Thanks!
Demo: http://www.martintall.com/neovisus
Gaze interaction is somewhat different to many other forms of interaction but most design principles from the direct manipulation style makes sense (good feeback is really important). However, the lack of a clicking method is really challenging.
Live Crunch
I just blogged about it!
Philip (pgan)
Aza, I love your ideas! A potential downside with this setup is Fitts: You drag right but the panel appears to the left, so you have to move your hand or mouse back to the right to hit a button.
What about optimizing the (presumably) most common operation: going back in history? This could be done by panning right past the panel. That would avoid having to click the Back button. You could also use circular and other gestures (see the gestures extensions).
Philip (pgan)
You could have a 1-pixel scroll bar to indicate the view’s position within the content. It could be translucent or reverse-color, so as not to lose any content space.
As for a Stop and a Reload button, the URL bar can do that. Click the URL bar to show the URL menu, thereby stopping the page load. Double-click the URL bar to show the menu and load the current URL, thereby reloading the page.
Olly S
I think having a trash icon on the zoomed out view would be a good addition. This way tabs you are finished with could be drag-and-dropped into it. Clicking on the trash icon would bring up the history view showing recently closed tabs. This could work similar to any other tab with controls for search, list by date etc. in the left space. Clicking on an entry could then reveal controls to relaunch the tab, bookmark etc.
kashif
i need it
Aza Raskin
@Olly S: You are on to something! We were planning on having a trash area where you could drag-and-drop icons to, but having the trash area include your history is stunning! It’s the ultimate in undo. Great thinking.
martin
Will this run on p1i (UIQ os)?
Chris
If you develop a prototype that is installable on the Instinct I will play with/ try to break it for you… Unfortunately I do not know anything about programming other than HTML so the only thing I can do is Beta testing. E-mail me if you are interested (i love new playtoys lol)
Thanks, Chris and good luck!
Arsv.org
Thanks
Jonathan Parker
Would be nice to have the same layout for highly used bookmarks as the tabs. Like Opera’s speed dial.
Anders
hey!
I think this is a great idea, and i think that feenec can be really great if you just play around a little bit with some of the good ideas that were posted here.
Gotta have it sometime :)
fuphierbWrerb
Thanks for the post
Dwayne
I’m not really sure how well this will work with horizontal scrolling and timely movements. I’d prefer to use 2 fingered gestures for system commands. Perhaps, two fingers to the left for back, and then one finger for scrolling and/or zoom.
One mouse button versus two? Personally, I really like what mac did for Bootcamp. If you hold down two fingers on the trackpad and click, the right click menu appears. A quick way to access additional commands.
Blaher
This would be a cool feature for a normal pc to enable this UI, especially if the user has a touch screen computer. With the release of more and more large companies (like dell and hp) releasing touch screens, it would be nice for a change to have a easy to use touch UI for firefox.
Nick
Please make this for samsung instinct, Bell mobility, we are getting screwed with the iphone being with rogers in canada!
Uncompetative
I’m sorry but I hate this. You have to do two actions to go back one page, ugh. It doesn’t scale. Having a ZUI breaks down when the web pages are fairly similar visually – after all, not everyone has big splashy graphics. Of course, you have captioned them, but this text will either reduce beyond the point of readability as you add more open pages or by keeping the font the same size the captions will collide and become ambiguously associated.
I don’t think you can hide the UI this much. Haven’t you considered putting less frequently used actions on a pop-up radial menu – i.e. hold…drag in a direction, release to enable option. There wouldn’t be a conflict with hyperlink activation as that would be a comparatively shorter ‘tap’ that would come and go before having been pressed for long enough to enable the menu.
I would much prefer a UI that made use of your good idea of a page that has a top, but only a vague notion of an end. You could flick-scroll the page down to expose the background space of the browsing environment, where you could tap to enable a virtual keyboard or drag down one of the stacks of categorized bookmarks as seen in Wei Zhou’s tremendous “Bookmarking and History Concept Video” also at Vimeo.com. The key point to recognize is that you lose the bookmarks bar when you page down (flick up) and this constitutes a mode, so that your reverse action (flick down) will get you a page down, with iPhony elastic snap-back. Now when you are back at the top of the page with the bookmarks no longer visible you get them back by further flick down and hold, it is as if they are beyond the ‘gutter’. The stack names would probably be better placed beneath (as that would no longer interfere with the text in the “awesome bar” and these captions could be glimpsed in the gutter space before snap-back, making their existence discoverable, if the device opened onto a homepage by default). I would also make the stacks drag-release, rather than click to fan out stack, then click to pick one as it is a bit more efficient.
As the device is small I would have iPhone like zooming, along with horizontal panning, using double-click to zoom into the local page substructure, and double-click again to zoom back out. These clicks are ignored if over plain text and separated by a significant delay. The FSA for all this is all quite orthodox.
However, you would have to return to ordinary ‘fit page to width of display’ mode to be able to have flick right mean Back and flick left mean Forward – as if the pages were organized on an imaginary Left to Right, Past to Future timeline.
And I don’t see why you need tabs when you have such a simple way of managing bookmarks.
Adriann
Aza,
I like the concept video, shows alot of potential. Most notably the full use of the screen for maximum page display. The use of an infinite 2D space is a good starting point.
I’m going to try to make a suggestion here and try to describe it as best as I can.
In your video, you scroll/zoom to the left most part to call up browser elements (Bookmark, Refresh, Etc). But what if you scroll/zoom in a slow motion (slow drag?) to the left, you go back a page? Also, if you scroll/zoom in a quick motion to the left, you zoom out to a linear display of pages you’ve visited?
Another thing to make new tabs, is that if you scroll/zoom to the right in a quick motion, that should make a new tab.
An infinite 2d plane is a good start. But there should be some kind of organization. If you make it that new tabs would generate below the tab it was created, when you zoom out to view the history of each tab, it should look like tiles, each row corresponding to the history of pages visited to the “currently viewed” tile in that row.
I hope I can get time to make a simple drawing of what I mean..
Joey van der Bie
@dj mue
I like the video of the zooming gesture, only it would be difficult to apply that zooming in this prototype, because we are allready using those gestures to navigate true the page.
Maybe we could use the right sidebar (which now only functions for minimize) for a zooming bar. This way we have the same gestures for zooming as in the video and they are almost as easy to access. Also you wont have those irritating + and – buttons for zooming
@Aza
Love the content is King concept. Really think software on a whole could use more of that thinking.
oim
quite impressive. I like the video concept. I am enjoying this post.
Chris Lee
I like the idea but think it is more than just for mobile devices, it could make a great TV interface.
Just one change would make it that much better for me;
instead of throwing the content away drag the user interface over the content. So when you drag sideways you get the menu or zoom feature arriving in from the side, overlaid on top of the content with transparency so you can still see the content, content is king, and you may want to copy something or continue to watch the telly.
dcedilotte
Forget the mobile, I want that type of interface on my desktop. This is what browsing should be like IMNSHO.
Bruno
Very nice. I can’t wait to have Fennec with Weave on a phone or on a mid like the n810.
The Tjalian
Your concept sounds awesome, Aza. One thing I’ve thought of though, is that Firefox Mobile is mainly going to be on mobile phones, or smart phones, or more to the point, devices with a microphone or headset.
Instead of having to type out something, why not just say it? You said it yourself, typing on phones is a pain and the less to do, the better. Having a voice controlled system could work really well. Instead of having to open up a new tab, type in google, hit enter, type in your query, etc, all you would have to do is say “google mozilla labs” and it would come up with the query results for mozilla labs. Even better again, you could say “first google mozilla labs” and it’d take you straight to the first result on google (much like the “I’m feeling lucky” button).
You could also have other voice commands like “Book it”, to bookmark the page, and it would automatically bookmark it. “History”, to go to history. “Back” and “Forward” to go back and forward (especially useful for those users on smaller screens) and a plethora of other ideas.
This could also be programmable, you could say a word and tell it to go this web site every time I say it. For example, if I wanted to go to digg.com, I’d customise it so I’d all have to say is “Digg” or “Digg.com” and it would bring it up for me. You could go even further and let us say “Digg” to open it up in the same page, or let us say “tab Digg” to open up Digg.com in a new tab page. The possibilities are endless really.
This system is very similar to voice commands on phones already, where you say the name and it phones up said person, so translating this to Firefox Mobile would feel rather natural and intuitive. It’s a small innovation that would definitely seperate Firefox Mobile from the rest of the Mobile browsers out there (well, more then it already does anyway!).
Hope you like the idea.
Tim.
Thierry
I love it.
Just love it.
Good direction. This is what I think.
T.
Dan
I think this is great. I think possible a home page option would need to be added for the people who don’t use bookmarks and just for finishing touches have color options for background and buttons and url bar. Oh, and one thing else, what about zooming in on things on the page?
sepercar
AGGRESS AutoPost Test
Tor
Looks awesome, I would use it in my phone!
Unknown
It looks very user friendly and I hope you add some color to the final product.
emoboy
hi, Look at the photos of my new emo hairstyle
on http://tinyurl.com/5bts22
mauzer
http://Sindygirl.narod.ru
muhabbetgulu
thenks janim
muhabbetgulu
http://www.muhabbetgulu.com
balimcafe
http://www.balimcafe.net
Darrel Pace
2kk21mxfujipse2a
Dave
Visit dlshoppingmall.com the official website
Pune Business Directory
Good Post, great ideas.
danielmcvicar
looks cool. Are you only designing for 720 wide screens, or also smaller?
found you because Irene Slutski is going to interview you. Very interesting work.
On my rss now.
A.J.
Holy crap! Fricking awesome, cant wait!! My Instinct is itching for this app!
FFX all the way!
SEO
I’m delighted to hear Firefox is going Mobile
David Beers
Very cool, Aza! But when it comes to mobile interface design I find your work on Ubiquity points the way to an even greater level of usability for mobile applications in general. Is there any thought to working on a Mobile Ubiquity? If so, let me know how I can contribute as I’ve been doing some work along these lines myself and would love to collaborate with others.
kookimebux
Hello. And Bye. :)
ArabBible
Firefox is “super”…….thanks for the Mobile info
Mi
I really like the interface, but as a user, I prefer a back button that is one-touch away, like the backspace I have on my pc.
In the suggested UI, to go back, the user has to do two steps: 1. drag content right, 2. press the back button.
A solution I thought of is displaying a large clear button on one corner of the screen, which when held down, displays a list of commands [back, forward, find] … the user keeps pressing and drags down to highlight a command, this command is only executed once releasing hand.
or is that a bit complicated? Just a suggestion :)
saikat dutta
hi aza,
first of all I would like to congratulate you for such an fabulous work on mobile browser fennec.
But I personally think mobile-specific applications and widgets might be better suited than browsers for giving users access to all the content they want, and letting them experience it in a satisfying way.whats your take on this??? though we need a browser for all the existing pages around. I see future mobile browsers as feeder like netvibes and Google reader which will consist of topic / widgets which an user will enroll to depending upon the usage pattern and need. These widgets will bring in contextual information depending on user location calculated from triangulation method or GPS .These widgets will in some cases talk to each other.i am trying to work around this concept around and will try to create certain prototype and scenarios to discuss the above.
saikat dutta
Interaction designer.
Store Crowd
What’s the ETA on this hitting mobiles? I’m not a huge fan of Safari on the iPhone but then again I guess Apple wouldn’t swap their own generic browser for Firefox?
real time weather on blackberry simon
This seems like a really nice way to do mobile browsing, especially with the zooming view. Makes sense on a touchscreen.
Ariana
I like all of these ideas my two cents would be:
1) Definitely have a snap to feature available at least, maybe on/off available in a settings?
2) I don’t like how the screen turns when you turn it sideways on the iphone. I feel that it is not always appropriate so this would be another feature I would want the option to turn off.
3) how would addons be supported with the app store? Could they? or is this mostly focussing on other mobile devices that are “more phone like”?
Rock Jethwa
Interesting concepts, especially coming from a document and engineering focused product space like Firefox web browser, into a more user centric space like mobile …
Dewley
I also like the way it maximizes screen space and it looks really great – nice work ;)
johnashleys
Excellent post. I especially like that you’re pushing for designers to follow their metaphors. Something that even the iPhone hasn’t quite managed to do.
Steve Call
Thank you for useful post. But I had difficult time navigating through your web site because I kept getting 502 bad gateway error. Just thought to let you know.
daster68er
http://yaycacudby.livejournal.com/ – Ñêà÷àòü ôèëüì Íàøà Russia ßéöà ñóäüáû îíëàéí
Porus Munshi
firefox mobile concept is extensibility for the user .
Online Dictionary
retirement
I love Firefox much. To have it on mobile will be a good thing
Samsung Mobile
its very helpfull to contact within short time.
mobile
ebook
They were providing such a nice service to us like Firefox,thunder bird etc and i think the phone will also be a hit
Zayıflama Lida Fx15 Ve Biber Hapı Zlfvbh
- You may want to scale the page view when the back/forward panel is activated. People may want to click forward and back a few times, or even temporarily keep this menu in view, but as it is they are getting a partial view of content. This could be particularly annoying if the last section of text in a paragraph is cut off. To keep a person’s place, the trick would be to scale upwards *and* downwards so that as text is repositioned, the visible portion of window is in the same spot.
v-pills
the spatial relationship between windows is broken every time the windows reshuffle.
rifky
WOW!!! thats awesome!!!
Reconix
This is amazing !
I never browse the web via any mobile device, I always feel it’s some what pointless. I mean by the time you’ve found what you want browsing the web on a mobile device you could have done it much more affectively in numerous other ways.
This on the other hand seems quick,affective,fun and best of all very easy to use.
I’d love to see the final outcome !!!
Stefan
An idea. Only make the tab zoom out when swiping the screen to the left, such that the left side can be dedicated to back, forward, bookmark, etc… and users won’t accidentally be zooming out of their tabs.
v pills
Because the controls are accessed by panning, for the most part every single pixel of the screen is filled with what you care about most: the content.
Seo yarışması
They were providing such a nice service to us like Firefox,thunder bird etc and i think the phone will also be a hit
Paulo
The beowser amazing and very simple
I really would like to see it working on symbian smartphones
Internets beo
Very nice use of an application – thanks!