Monthly Archives: February 2010

Some ideas for the mobile Firefox UI

This post is also available in Belarusian thanks to Marcis G. Thanks for the translation!

Following up on my post yesterday about my impressions with web browsing on the N900, I wanted to elaborate on one of the points I was making: Firefox’s UI model of showing controls (a.k.a. chrome) on two sides of the web page.

I see a few problems with it:

  • You need to swipe your finger in a specific direction in order to reveal specific chrome (e.g. swipe to the right to show tabs, and swipe to the left to show Back/Forward buttons and some other controls).
  • The split between the chrome on both sides isn’t natural. For example, both Back/Forward and tabs are types of navigation, but they’re on separate sides. This means you simply have to learn on which side specific UI is located. Not a huge problem, of course.
  • If you’re zoomed in on a page, you may have to swipe several times to reach the side of the web page and reveal the chrome (or double tap and then swipe).
  • Having controls at the bottom of the screen feels more intuitive to me. More objectively, though, it also works better in portrait layout when you’d rather not waste width on chrome.
  • The required panning of the web page itself when reaching for chrome feels rather clunky. I’m swiping to reveal toolbar buttons, not to pan around on the page, but I have to do both at the same time in Firefox.
  • The tab thumbnails are always of the same (small) size, since the chosen tab model doesn’t allow for flexibility.

My simple ideas:

Allow me to present a few ideas on how the UI could be simplified. Please excuse this poor GIMP mockup:

The mockup above shows a redesigned navigation toolbar and a different way of switching tabs. Let me explain each feature in more detail:

  • The new toolbar is overlaid on top of the web page and fades (or slides) into view when interacting on the page (e.g. when scrolling or tapping).
  • All buttons are on the same toolbar. This means that you don’t have to remember which direction to swipe to reveal the controls, because any direction works.
  • The web page itself doesn’t pan when the toolbar appears.
  • After a short while of no interaction, the toolbar fades/slides away again.
  • The left side of the toolbar shows the Back/Forward buttons, the center shows the Tab (or Web Page) Switcher button, and the right side shows a Bookmark and a Tools button.
  • This toolbar can easily fit in a portrait layout.
  • Clicking the Tab Switcher button shows the currently open tabs. The size of the thumbnails change dynamically depending on the number of open tabs. Clicking on the Tab Switcher button again or outside the tab switching “pop-up” takes you back to the current web page again.
  • Clicking the Tools button reveals a “pop-up” similar to the Tab Switcher chrome, but this one of course shows the Firefox options window. Rather than clicking a back button to come back to the web page, you click outside of the “pop-up”.

In addition to the ideas above, I would also suggest that the toolbar is made customizable. Personally, I would like a zoom button (maybe even a +/- type of button) instead of a bookmarks button, but there’s obviously a limit on how many buttons you can show at the same time. This mockup assumes approximately the same button size as in the MicroB browser, so there would be plenty of space for buttons, at least in horizontal layout.

Thoughts? Piece of crap? Just shoot me.

My impressions with web browsing on the N900

I’ve recently had the pleasure of testing Firefox on the brand new Maemo based Nokia N900 phone (which I blogged about previously), and I have to say I’m impressed. Of course, I’m biased — I love Firefox. I’ve been using it since the Phoenix days and it’s almost part of my DNA these days.

However, I have a confession to make: Firefox isn’t yet my default browser on the N900. I think it will be very soon, but right now, my browser of choice on this particular device is another Mozilla-based browser: MicroB. It’s actually the best web browsing experience I’ve ever had on a mobile device (but to be fair, Firefox is the second best experience, so it’s definitely up in the same league already).

Allow me to summarize my initial impressions with both of these Mozilla browsers:

  • The Awesome Bar in Firefox is… awesome. I never actually reflected on how convenient it was to use until I tried MicroB, which forces me to remember URLs again.
  • Weave is probably extremely useful, too, but since I’m using the latest trunk builds of Firefox (“Fennec”), I can’t actually use it.
  • I’m not completely sold on Firefox’s UI model of showing controls on a surface on the sides of the web page. I’d be curious about whether there has been any usability research that suggests it’s better than the more traditional toolbar at the bottom of the screen. Btw, I’ll follow up with some ideas about this in a future blog post.
  • I’ve fallen in love with the volume rocker zoom in MicroB — it’s smooth, fast and surprisingly accurate. Would love to see this in Firefox!
  • When double tapping to zoom in MicroB, a subtle zoom animation is used which feels intuitive and responsive. In Firefox, the zoom is instant, making it feel less fluid.
  • The default page zoom in Firefox is designed to make the full width of the page fit on the screen. This unfortunately has the side effect of making the text on almost all web pages too small to read. It seems like MicroB has chosen a different approach where the default zoom includes about 800px of the web page width, which makes it possible to read most pages without zooming in.
  • Actually zooming in on a page in Firefox is a bit tricky, because it auto-zooms on the object you double tab on, even if that object is only e.g. a small image. This means that you often zoom in too much, and since it’s not possible to adjust the zoom level in an easy way (keyboard shortcuts don’t cut it, especially not for me since I have the Scandinavian keyboard layout where [Ctrl]+[-] doesn’t work), you have to double-tap again to zoom out and then try again.
  • MicroB feels more responsive when panning around on a page. This is mostly due to the fact that the UI and panning is done in a separate process from the actual Gecko web rendering process. At FOSDEM, I was pleased to hear in the Mobile talk by Mark Finkle that Firefox will make full use of the Electrolysis technologies that are currently being baked. What this means, in simple terms, is that Firefox will be just as responsive as MicroB in the future since the web rendering process will be separate from the UI/frontend. I can’t wait to see the results of that (which of course will benefit desktop Firefox as well).
  • The checker pattern seems to show up more frequently on the screen in Firefox compared to MicroB. I don’t know if Firefox is just more conservative with how much of the web page it pre-loads off-screen, but sometimes it can cause the whole screen to remain “blank” for a few seconds, which rarely happens with MicroB.
  • The Back button history in MicroB is a good idea in theory: when clicking the Back button, small thumbnails of the previous pages are shown, making it easy to pick the page you want to get back to. However, the implementation sucks because it takes several seconds to load these thumbnails and the thumbnails are big enough that you have to pan around in order to see anything more than one page back. Would be nice to see some kind of combination of Firefox’s and MicroB’s implementation: when tapping on the Back button, Firefox would simply go back to the previous page, but when tapping and holding, it would show a pop-up with preloaded thumbnails in a similar fashion as with MicroB, except without the delay. (Maybe the actual thumbnails could be recorded when you navigate away from a page?)
  • Flash — as much as I hate it — works pretty well in MicroB out of the box. In Firefox, I have to enable it manually, and the responsiveness of the UI with Flash enabled isn’t great. Can every web site switch to open video, please?

I personally feel that both MicroB and Firefox are really good web browsers, and the fact that they’re both powered by Mozilla’s Gecko web rendering engine is a huge plus for me. So in a way, I don’t feel bad for not using Firefox primarly right now, because my current web browser of choice is still filled with Mozilla love. :)

That said, I can’t wait to use an Electrolysis-powered version of mobile Firefox later this year!

Dreaming of lizards, too

Following up on my brief blog post the other day, I am currently in Mountain View to work from Mozilla’s main office. The main reason for this is that we had the pleasure of hiring Kadir Topal as the SUMO community manager. The plan is to get him properly introduced to all the people he’s going to work with remotely. So far, the plan has really played out well, but it’s definitely been an intense first day for him!

Of course, traveling nine hours back in time also means fighting a pretty intense jet lag. The first night is always toughest (although I was pretty excited about one particular dream I had of holding the jaw of a huge lizard with one hand and petting it with the other… it’s a shame I had to wake up while I was running through the forest to get my camera!), so I’m confident that both Kadir and I will be more energized tomorrow.

Ubuntu is old, most of the time

One thing that I really don’t like about Ubuntu is that, by default, it doesn’t automatically upgrade popular software releases until a whole new version of the operating system is released. This means that right now Ubuntu 9.10 (the latest stable release) is still running Firefox 3.5.8 and OpenOffice.org 3.1.1, when the latest versions are 3.6 and 3.2, respectively.

I can definitely understand why such a policy simplifies maintenance on older releases, allowing the developers to focus on the upcoming release, but why can’t they just change this policy at least for the most popular desktop programs?

The way they do things today is annoying and makes Ubuntu feel old-fashioned. Is there another Linux distro that has a better software upgrade policy that I can switch to instead, or am I stuck having to upgrade software manually and store the programs in my home folder?

Let's create that ideal world together!

John Slater recently hosted a brown bag about how to improve Mozilla’s web sites by making a clearer distinction between Mozilla, the non-profit organization, and Firefox, one of its products (and, of course, the most popular since it happens to be the best browser in the world!). He also posted a blog post about the topic, and David Boswell then followed up by providing his thoughts from the point of view of the Mozilla Foundation.

As I’ve said before, my vision for SUMO goes beyond Firefox: SUMO is a vibrant community of people who want to help others with their web experience. It’s also a support website platform for products like Firefox, mobile Firefox and Thunderbird.

The URL for Firefox Support, the largest SUMO-powered support site, is currently support.mozilla.com. While I don’t think URLs are that important in the first place (the navigation and structure of websites are far more important), this particular URL is a bit unfortunate because the support site is indeed about Firefox, and not Mozilla as a whole. A URL like support.firefox.com would make more sense, and would also send a clearer message to everyone what the focus of the site is.

In the ideal world, there would be a central place for support on mozilla.org where users of all products could find easy access to the support offerings per product. In other words, something like mozilla.org/support, which already exists today (although I would also make sure that support.mozilla.org worked).

Then, each product would have its own support site hosted on the product domains, e.g. support.firefox.com, support.thunderbird.com, and support.seamonkey-project.org. Of course, these sites would also link to all the amazing community-hosted support websites around the world — just like they do today.

So, what stops us from creating this ideal world? Well, nothing, really. But we’re an incredibly big community and support is just one piece of the big puzzle, so I encourage you to participate in the discussion!

Two months with eagle eye vision

American Bald Eagle Close-up Portrait by Beverly & Pack / CC BY 2.0

It’s been two months now since I had my EPI-LASIK surgery and I have to say I’m extremely happy with the result. I’m beginning to see things clearly now and have a different perspective on things!

EPI-LASIK isn’t like the traditional LASIK where they cut a slit in your cornea and operate with laser behind the lid. Instead, EPI-LASIK operates straight on the surface of the eye. This means that it’s much safer (no need to cut in the eye!), and as a result, you don’t risk cutting the nerves that control eye fluids, something which tends to make LASIK patients suffer from dry eyes. More info about EPI-LASIK can be found here (warning: marketing material).

To anyone who is considering going through this procedure, here’s a bit of info on how it works and what to expect:

  • The actual surgery was completely painless and not at all as scary as I thought. The machine handled everything itself, and the only thing the doctor actually did was dropping cooling and disinfecting drops into the eyes before and after the laser did its job.
  • After the laser was done, they put a protective contact lens on the eye. Immediately after the surgery, I could see much better than I could without glasses before.
  • About 20 minutes after the surgery, the eyes started to itch and I became sensitive to light.
  • The following 48 hours were pretty tough with tears running down my cheeks, extreme light sensitivity and itching/painful eyes. I spent most of the time just lying in bed listening to music with my eyes shut. (Christina Aguilera’s Hurt was played more often that I would like to admit; maybe my state of mind made me more receptive to emotional lyrics?)
  • After these 48 hours, I woke up with essentially no pain at all. It felt a bit like wearing contact lenses for too many hours, which of course was exactly the case too, since I had to wear the protective contact lens for about five days.
  • I was still sensitive to light during the third day, but on day four it was all gone.
  • After five days (the day before Christmas Eve), I visited the optician again and could finally remove the protective contact lens. From there on, it was as if the surgery never happened!

This is easily the best investment I’ve ever done to myself (aside from making Sofie my girlfriend). So far, the vision hasn’t really stabilized, and some days my left eye is better than the right, and then the next day it has changed. I still don’t see perfectly, but it’s good enough that I almost never think about it. If Ken pushed me to give a number, I’d say my vision is at 97% right now.

According to the doctor, the healing process can take up to a whole year, so it’s too early to tell what the end result will be — we will see! But even if it doesn’t get any better than this, it’s still better than I had with contact lenses, and without the dry eyes and hassle of taking them in and out of your eyes every day.

See you later!

Nokia N900 impressions

I’ve been using the Nokia N900 for a couple of weeks now and I have both good and bad things to say about it. To give you an idea of what I’m comparing with, my previous phone was a Nokia N95. Here’s my list of impressions:

Pros

  • The screen is pretty good, and I rarely have a problem clicking on links and buttons using my thumbs. The fact that it’s resistive feels like an advantage in this incredibly cold Swedish winter. Next to a Nexus One, however, it’s obvious that the color reproduction could be better.
  • The Mozilla-based MicroB browser really is awesome. Scrolling and zooming is so smooth and quick that it feels like surfing on the iPhone, only this time you’re using the real web. By far the best web browsing experience I’ve had on a mobile device.
  • The fact that I can use it to call VoIP, Skype, Gtalk, and regular cellular networks is amazing.
  • The Conversations application seamlessly integrates IM and SMS in an intuitive manner.
  • The media player handles almost anything you throw at it after installing a few extra software packages.
  • Great synchronization with Exchange-based mail services (e.g. Zimbra, which Mozilla uses).
  • Nice multiple desktop solution (though lacks useful widgets).
  • Battery life is impressive in active use such as in a phone call. Though see the standby time below…
  • The “one-click” (actually a few clicks) publishing of both photos and videos to services like Facebook and Flickr is really neat. Though see below about the camera quality…
  • It really is fun to use it. And it’s open source! And it can run Firefox!

Cons

  • This thing is heavy! I thought my N95 was heavy, but this is significantly heavier. It definitely feels like a solid device, for better or worse.
  • The camera is actually worse than the 3-year-old N95 camera in a number of ways: terrible colors in low light, terrible metering, light leaks making the subject in focus appear washed out, and the field of view is narrower than the N95 camera. In comparison, here’s a photo taken by the N95. Both are 5-megapixel cameras.
  • The standby time is a joke. I don’t know what I’m doing wrong, but sometimes I can just keep the phone in my pocket during the whole day and it will discharge in less than 8 hours. I first kept all accounts logged in (Skype, VoIP, Jabber), but have since then compromised a bit and only keep Jabber online. Still, the battery isn’t impressive.
  • The horizontal layout is annoying most of the time. When I’m out and about, it feels awkward that I can’t use the phone with one hand. I understand the “handheld computer” legacy (I even owned an N810), but feel that my typical use is much more like a regular smartphone than a portable computer. Ideally, all applications should support both layouts.
  • The keyboard, while certainly better than the N810, is still not really good. It’s too easy to click on the wrong keys, and there’s no auto complete feature that can detect (and correct) common spelling mistakes.
  • The auto suggest feature only shows one suggestion, so 90% of the time it’s not suggesting the word you want and as a result you end up ignoring the suggestions altogether.
  • The physical unlock switch is only comfortable to use when in horizontal layout. It’s nearly impossible to reach with one hand if you just want to make a quick call.