For Users

New Look For Tabs

One of the first things that you’ll notice is tabs on top. This paradigm really makes more sense since the tab defines not just the content but the environment it’s viewed (prev/next button, URL bar). It’s also just much sleeker looking. After a few minutes you’ll likely agree this is a better approach than tabs under.

Another nice touch is if you enter a URL that’s already open in another tab, you’ll be given the option to switch to that tab. Perfect for those of us who end up with 50 tabs by lunch time.

It also just feels tighter and less intrusive on the web browsing experience.

App Tabs

App Tabs are a great way to pin sites you use constantly (webmail, Twitter, Facebook, etc.) to your browser and make them easily accessible throughout the day. I suspect many webmail/Facebook addicts will really dig this feature. To use it, right clicking on a tab and “Pin as app tab”. Don’t need it? Don’t use it, it’s not forced upon you.

Tab Groups

Tab groups are simply a way to group your tabs so that you can stay a little more organized through the day. For example you might group tabs for “personal” and “work” then switch between the two groups a few times per day, rather than navigating through 50 tabs to find what you’re looking for. The tab groups interface also gives you a more visual way of navigating tabs and a search feature for searching for a particular tab. I personally like it for searching through the dozen bugzilla bug reports I have open through the day. It takes a little effort to work into your workflow, and I’m personally not quite there yet, but once you do it seems to really be handy. Again you can ignore it if you feel no need.

Goodbye Status Bar

The status bar you used to see at the bottom of the window is gone for most people. If you have an add-on that relies on it, for now it will still show (one of my computers still has it). Just another few pixels for web content. It does take slight getting used to for the technical folks who watch the connections as we’ve been used to looking at that bar for 15 years or so. For the rest of you, it’s just more web on your screen to fill with photos of cats and amusing captions.

Polish

Like every Firefox release, there’s little polish, cleanup, simplifications everywhere. To many to go into each individual tweaks but you’ll see some, and others you correctly won’t see as unused and outdated options are gone.

Sync

Sync is now built-in. Settings, passwords, bookmarks, history, open tabs. It’s encrypted on your computer then sent, so the only one who can view the data is you. I’ve called this the ultimate security model in the past. It’s optional, you don’t have to use it, you don’t loose anything by not using it, other than the ability to sync multiple computers obviously.

Add-on Manager

The add-on manager got some love in 4.0.

OMG Fast!

Firefox 4 is faster in almost every respect. First of all, it seems much more responsive on startup. Its JägerMonkey JavaScript engine has really made a difference in various benchmarks including Kraken, Sunspider, and V8. It also has hardware accelerated graphics. Even on Windows XP, which is still fully supported (ahem).

Out Of Process Plugins (Mac)

Windows and Linux got this in Firefox 3.6, the Mac version was a little behind schedule. Plugins now run outside of the Firefox process. That means when a plugin like Flash crashes, it won’t take out your entire browser. As Windows users will tell you, this makes a big difference in terms of stability.

Do Not Track

Simply put it’s a way to tell websites and advertisers that you don’t want to be tracked. It’s obviously up to websites/advertisers to honor the flag.

To enable it go into Preferences and under the “Advanced” tab select the “General” sub-tab and check the “Tell web sites I do not want to be tracked” checkbox.

For Developers

Support for WebM Video

I’ve discussed WebM on this blog before and won’t repeat what I’ve said before. WebM is an open standard, it looks great.

WebGL

WebGL is amazing. Check out some of the demos by Mozilla or gathered by the Chromium team.

Take a look at Flight of the Navigator and remember: this is the web!

Fix for the CSS :visited hole

Just a FYI, this no longer works.

Web Console

This replaces the old Error Console and in many ways is almost like Firebug Lite. It’s got some great features like HTTP headers and will make it a lot easier to quickly debug things if you’re using a computer without Firebug already installed. If you are a web developer make sure to take a look.

Do Not Track Header

This is a feature that’s been in the news quite a bit, and mentioned above. When enabled all HTTP requests will include the following header:

DNT: 1

HTTP Strict Transport Security

A HTTP header to tell browsers to only use HTTPS to communicate with the site. As more sites start to switch to HTTPS this is a great way to mitigate some potential attack vectors.

CSS border-radius

If you’re a web developer or designer you’ve likely tried to do this before using images and realized how much it sucks. Now you can do it with the simplicity of CSS.

CSS -moz-calc

Do calculations to determine the size and shape of an object. I can’t tell you how many times this would have been realy helpful.

HTML5 Parser

Faster, more powerful, more consistent, futuristic!

Partial Support For HTML5 Forms

Forms in HTML5 are pretty awesome. I won’t go into detail on HTML5 forms here, but you should check them out.

SVG Animation with SMIL

Exactly what the title says. I suspect this will result in some really cool things over time, and some really pointless things that we’ll still find amusing.

Of course that’s not all, just the stuff I really find to be the most interesting.

Essentially we’re seeing Google move from a point & click UI to almost a command line UI. For ages the focus was automatically set on the search box, no need to click on it. Just type, press enter or as I’m sure many (if not the majority did) mouse over the “search” button and click on it and you got search results. It’s just another step forward in simplifying the process. This is one less interaction (pressing search).

It’s interesting to see a less mouse centric UI develop after decades of anti-keyboard UI. For those of us comfortable typing quickly and using keyboard shortcuts constantly it’s a constant nuisance when applications don’t handle shortcuts nicely. We’re now seeing an effort to reduce use of the mouse, even if it’s just to press the “Search” button. One less reason to take your hands off the keyboard.

One interesting quirk I’ve noticed is Google’s calculator (the ability to type a math problem into Google and get an answer) just feels awkward and unpolished. I suspect they will improve upon that shortly. This can vastly improve the utility of these little applications. Google has several little apps built into its search (try typing “movies” for example). It’s just that much easier to use.

I’m not sure who’s idea it was to put the title in the UI like that, especially in a time when displays were small. That was a gigantic waste of space. The address bar in this version is read only, you need to select open and enter your URL there. Other than that, it’s pretty much the same browser UI since 1993. That’s right, 15 years of really the same user interface. The window to the web has always looked that way. There’s now bookmarking, a fancier address bar, favicons, and a search box. Firefox goes nuts by letting users install add-ons. Overall: Not very different.

There’s a few reasons why it hasn’t changed too much. First of all, it’s a pretty good design. Minus some quirks which were worked out pretty fast, it’s effective. If it wasn’t the web wouldn’t have caught on. Secondly, people know how to use it already. Why make people re-learn?

The mobile space is different yet surprisingly the same. Like days of old there’s a need to conserve screen space. Unlike days of old there’s no reason to believe it will get bigger since small phones are always desirable. Until screens are foldable, the iPhone is about as big as you’ll see. Even when phones get thinner and lighter, the screen size won’t likely get any larger since it will be awkward to hold and put in your pocket.

With a touch screen you can only make items in the UI as small as a fingerprint. Any smaller and they are unusable to people. A stylus while clunkier and more awkward allows for a much more compact UI. This leaves very little space to get a lot accomplished. Too add to the complexity of the problem websites are designed for big displays meaning there’s a lot to cram into a small space.

Apple’s allegedly making a pretty interesting change to iPhone 2.2. Safari will break out the search box into a more desktop-like separate box. This results in a smaller address bar and the reload icon being moved inside the url bar. I think the reason for this is to better parody the desktop, and remind users they can search from the browser chrome.

To be perfectly honest, I’m not sure the address bar is even needed in a mobile browser on a touchscreen device. Unlike a desktop you can’t type directly into it because of the small size. Your essentially going to another UI to enter the text anyway. Why not just make it a button? You could argue you need the address bar as a way to know where you are. Of course you can likely merge it with the Title to accomplish that. All that’s needed in the main UI is the title and hostname. That can be all in the title of the window. I think I’d prefer a back button more than the address bar on a mobile device. Of course if I could tap or tilt the device to go backwards or forwards that would be cool too. One less thing for the UI.

The most similar to this is Fennec.

On a side note, thanks to Apple’s insane SDK licensing and app store policy it is unlikely to ever live on an iPhone. Maybe one day Apple will realize that just like 3rd party applications (something they were originally against), an even more open device would be even more enticing. But I digress.

Another concept I’d really love to see and experiment with is a dual screen format. Similar to that of the Nintendo DS. This would be perfect for a flip phone style smart phone. As phones can be made thinner folding them over is an option to keep the physical device small enough for portability but the display size can then be doubled. By the time the iPhone can be made half the thickness (remember the iPod G1 was much thicker than it is now) this is feasible.

There are several fun things about this design. First of all you essentially Optimus Maximus keyboard on your phone. Secondly you can now separate the content from the chrome in applications. Perfect for things like web browsers. This is also handy for watching movies as controls don’t overlay video but are still available. It also would be great for multi-tasking.

That’s where I predict things will ultimately go. We’re once again in the era of Bar form phones. Anyone remember the Nokia 1100/5110/3210/3310 fad a few years ago? Then flip phones came back in style. The flip phone style also has the advantage of protecting the internal display from scratches and involuntary button pressing.

It will be fun to see how the interface evolves. I’m relatively certain despite all the different UI prototypes surfacing right now regarding web browsers, as they mature they will adopt features from each other and become surprisingly similar to each other.

iPhone Safari image via Wired. Nintendo DS image via Wikipedia Commons]

1. Invalid certificates, while providing a secure mechanism between the client/server are extremely annoying to use in Firefox 3 for many people because of the multi-step process. Previously it was just a warning dialog.
2. There are no free SSL certificates that are really “usable” (not throwing up warnings in a many browsers). CAcert.org has likely gotten the most inclusion, but it’s barely anywhere.

Certificates not signed by a trusted certificate authority (CA) give up a warning because of the idea that a certificate authority verifies the certificate belongs to the person whose name is on the certificate. This concept was busted a while back as CA’s started doing “domain validation” to offer lower prices. To “remedy” this, they created EV SSL. EV SSL requires more background checking, but at a higher cost. This means there are three tiers of SSL:

1. Untrusted/Self Signed – Free – The user is strongly discouraged from visiting a site with one of these. Indicates the technologically the channel is secure only.
2. Signed By CA – Variable Pricing – The user is told this is secure.
3. EV SSL – Expensive – The user is told these sites are super awesomely amazing and can cure cancer.

Essentially EV SSL is nothing more than a scheme to charge more. EV SSL is supposed to do what a signed certificate should have been doing all along. By 2012 I’d bet there will be a SEV SSL(Super Extended Validation Certificate). Maybe that would require a DNA and fingerprints to prove identity.

The Problem

It’s 2008 (actually more than half way through it). I still can’t use a secure https connection without either throwing up an error to users (who are always confused by it), or paying a fee? It seems right to me it should be free to use https without any barrier for a technical level of security.

Why is “trust” bound so tightly to encryption? Why can’t a medium be encrypted without being trusted? The technology shouldn’t be tied the way it is to the business side of things.

Trust should be bound to encryption, but encryption should not be bound to trust. Trust is the “needy” individual in this relationship. Encryption is strong and confident. At least it should be…

A modest proposal

I propose that browsers should allow for self signed certificates to be used without any dialog, interstitial or other obstruction provided they are properly formed and not expired. The user interface should indicate that the channel is encrypted and communication is unlikely to be intercepted between the user and the server. It should note if there is any change (just like SSH notifies the user if the signature is changed between sessions). Other than that it should be transparent.

SSL certificates and EV SSL certificates should indicate in the user interface the the site being browsed is not only encrypted, but trusted by a third party the browser trusts. These are suitable for ecommerce, banking etc.

This would allow for things like intranets and other places where encryption is desired, paying for a CA to verify identity is overkill, and “domain verification” is just pointless.

Trust should be bound to encryption. Encryption shouldn’t be bound to trust. Encryption shouldn’t require verification. Encryption should be self-serve.

I’d be curious to know what others thought of the issue.

The impression I’m left with is simply: why wasn’t this created as an extension?

So the servers had a giant melt down. That’s hopefully history now. It’s out! Go download it. While your at it, spread the word and help break a world record. After all, how many world records have you participated in so far?

• Awesomebar – Find what you want easier than ever.
• Malware Protection – Stay safer when browsing the web
• Native UI Appearance – It looks better than ever.
• Better Addons/Plugins Manager – Manage plugins with ease, find new addons.
• Download Manager – Resumable downloads!
• Smart Bookmarks – Most visited, recently bookmarked, recently tagged.
• Better Memory Management – Nuff said
• Powered By Robots Not only are they awesome, they obey the Three Laws of Robotics

See Deb Richardson’s Field Guide to Firefox 3 for more details.

Read

Unread

For the navigation toolbar the most obvious change is the new keyhole design. My only complaint is that the menu that appears when you click and hold isn’t as intuitive since the arrow isn’t there.

Navigation Toolbar (Windows XP)

Navigation Toolbar (Mac OS X 10.4)

My only objection about the prefs is that the Windows privacy option is a great example of an icon that’s seemingly impossible to interpret what it’s supposed to represent. The light switch for “Main” is also a little odd, but I can manage with that much better than the privacy icon. Other than that, I think they look pretty good.

Options (Mac OS X 10.4)

Options (Windows XP)

That’s all for now folks. If warranted, I’ll post again with updates.

It should be noted that this stuff isn’t finalized and will definitely be tweaked. In the past things were adjusted until the very last moment, I expect we’ll see the same. Also don’t forget things like the planned keyhole shape aren’t even in place yet.

Navigation Toolbar (Windows XP)

My general thought on this is that Windows XP has thus far been left behind. Linux and Mac OS X look absolutely awesome. Vista doesn’t look to bad, though in general I think the OS design is an ugly turd. For XP, the reload and stop button are particularly what looks the strangest. Both seem to thin and small. It really doesn’t fit the rest of the UI. Home I think actually is actually an improvement. A step away from the “dirty house”. Back/Forward haven’t been updated yet as I mentioned before.

Navigation Toolbar (Mac OS X 10.4)

Simply awesome. Enough said. Not even shown is the new tab design which is also better. I’ve got to put together a screenshot post of Mac OS X thus far so others can drool.

Options (Windows XP)

I think this overall is better than the toolbar. I still have a few issues with it. For one the “Main” icon abstractly looks like a switch, but I’m not sure how apparent that is if you didn’t know what it was supposed to be. “Tabs” looks slightly distorted (that’s one tall tab) but otherwise good. I like the concept behind “Content” but I’m not sure I can tell what any of that is. Images is clearly in there, it would be nice if it was more obvious you can control popups from in there. “Applications” seems to work well. I’m really not even sure what “Privacy” is supposed to depict. Anyone know? “Security” and “Advanced” also very nice.

Options (Mac OS X 10.4)

It’s pretty much the same old, nothing to report here. Looks good.

So there you have it. My 5 minute rundown of some icon changes. There will be more, and a lot more polish I’m sure. I’ll try and post a follow up later on and show how it’s changed. For anyone who hasn’t seen it yet, hopefully this gives you a little taste of the great UI design work being done.