Behind the design of the Internet Explorer 9 chrome

Internet Explorer 9 chrome

After the “Beauty of the Web” keynote earlier today I got a chance to speak with several design leads of the Internet Explorer 9 team – Mary-Lynne Williams, Jane Kim and Jess Hollbrook to learn more about the decisions made to make one of the most designed Internet Explorer releases for a long time.

The first thing you’ll notice with IE9 is that just how “light” it looks. Even though the IE9 chrome takes up less screen real estate than both Chrome and Firefox 4, it was actually not a goal of the team to build the smallest chrome. A fundamental concept of the new approach to Internet Explorer’s design is that “it is not about the pixel count, but what you do with it”.

Whilst the team doesn’t claim their single-line design as the solution to the tabs-over-address bar dilemma, it was decided after all the two-line configuration was too distracting for users. The team also determined the window’s title bar was redundant because the name of the page was already displayed in the tab.

To further reduce the number of concepts in the chrome, the address bar was merged with the search bar after statistics showed that people used both bars just as much to search. They found that the new OneBox is not just simpler but actually helps people feel like they’ve mastered the functionality of the browser and gives them more confidence to just search without thinking about which field to search in.

Due to the one-line configuration, determining the size of the OneBox was no easy feat. To scientifically optimize the default size, researchers went out to find the top 2000 domain names and made sure that most of them could be displayed without truncation. Subtly, the OneBox also adapts its size proportionally to the screen resolution to fit approximately a third of the width for greater than 1024px and half the width for 1024px or smaller.

An obvious question people have asked ever since the UI leaked out a month ago is that how the browser deals with many tabs. Not surprisingly there is a power-user perception that everyone runs with dozens of tabs but as the design team found out via telemetry that it is simply not true.

For 90% of the browsing sessions they analyzed, most people had 4 or fewer tabs open and never more than 8. As such, on a reasonbly sized display, there is more than sufficient room for tabs used by most users.

Although the performance and standards capabilities of Internet Explorer 9 exceeds the competition today, even Microsoft acknowledges that they might not be in the lead for very long. However, the new user-experience seems to have enough merit on its own to differentiate IE9 as not just another release with better standards support. This is actually pretty neat.

60 insightful thoughts

  1. I guess the important question is how fast will they keep updating IE.If they continue to keep the 90day between updates even after IE9, the could stay competitive with other browsers.

    BTW, the performance of IE9 is really good, as expected, but I’m not a fan of the UI ( especially the tabs and titlebar as i keep a lot of tabs open)

  2. I think they are wrong that the title bar is redundant, especially when combined with the small tab area, tabs will often not show anything close to the full page title.

    Also just because the average user doesn’t make good use of mutiple tabs, it isn’t an excuse to make the tab experience worse for those of us who do use them.

    1. I’ve been using the beta all afternoon since installing it, and I’ve had no fewer than 8 tabs open (typically 10+)… I’ve had no issue differentiating them by the site’s favorite icon or just pointing at the tab itself. Of course, as an “advanced user” by their definition, I am just as capable of CTRL-SHIFTing my way through the tabs as well. :)

  3. So to actually answer the question about how the browser deals with many tabs: As you add more tabs IE9 makes them narrower until there is no longer room on the tabs to display both the favicon and the first character of the page name. Then tabs are hidden one at a time and scroll arrows appear. In other words, a fairly standard way of dealing with this issue. Not the way I prefer, however, so I’m hoping there is a way to change this behavior via an extension.

    1. I think the point is, that this will make life simpler for the beginner users, helping them to have a better web experience and more secure. If they eliminate the random toolbars i think that users are less likely to install their own, just out of not knowing what they are. Most power users will probably go straight for Firefox, chrome, safari or opera anyway due to the abundance of add-ons. It’s also going to make life much easier for people like me and other IT tech’s, not having to piss about with web design crap-outs, and users complaining that their computers are slow just because they are still using IE7.

  4. After testing IE9 beta now for several hours I really like the overall layout, the look and the feeling. But there is so much they should improve until they release the browser. Now the small things do make a difference when all major browsers have decent interfaces:

    – one of the biggest concerns I have is readability of text. With the new hardware accelerated rendering, text looks ugly on small sizes and sometimes is really difficult to read. Seriously that is a really huge issue if they can’t improve this. ClearType in Windows may be one of the biggest advantages and the web is even more heavy on text and readability. Losing ClearType support here should give the developers sleepless nights.

    – no “smooth scrolling” anymore. While the scrolling is super fast it is not smooth so it “jumps” to the next step. If you used the “Smooth Scrolling” add-on on Chrome you know what it should feel like 😉

    – I love the combined OneBox and tab bar. I think we don’t need a large address bar so I made it very small just to realize that this also shortened the drop down window with suggestions. But it should always be the full with, IMO

    – the interface is fast but feels slow: fade-in effects for all the buttons make it feel slower as it actually is.

    – the tabs are still boring. I really was hoping to see the use of hot track color on the tabs with the same hover effect as on the Taskbar. The tabs really could need more eye-candy with similar animations and color effects like the well loved Windows 7 Taskbar, oh and sometimes it is really difficult to see what tab is the active one, like on IE8

    – the new notification system is great but does hide content. The little pop-ups shouldn’t be on top of the webpage but underneath, not hiding links or text even when you scroll to the end of a page.

    – the New Tab page should be more like Zune’s Quickplay page ( http://images.thoughtsmedia.com/zt/2009/zune4software0big.jpg ) A combination of pinned, recent and maybe even “new” or updated sites (RSS?) displayed as thumbnails. Why aren’t even pinned sites there? I also don’t get the reason behind that “active” bar on every icon…

    – there is that monster of a menu bar still hiding behind the new beauty!

    Just my 2 cents. Sorry for the long post and my bad English 😉

    1. First of all, your English is excellent!

      Second, I agree completely on most of your points but especially on the readability of text. I’m noticing extremely odd font rendering issues all over the place, and it’s driving me crazy. On the other hand, I LOVE the new One Bar, and the rendering speed is fantastic!

      1. The text looks blurry becouse cleartype fonts are not turned on by default – you need to do that manually from internet options – advanced tab.

    2. I’m surprised that cleartype isn’t o by default. This is disappointing.

      I’m not sure why it’s not smooth scrolling but it should be smooth.

      I also totally agree with you that fade in/out animations make everything seem slower. If you’ve used the Vista calculator, you’ll understand.

    3. Your English is better than most lifelong speakers. I didn’t detect anything that suggested it wasn’t your first language.

      Your QuickPlay idea is masterfful. I can’t believe no-one else has thought of this.

  5. I haven’t downloaded or used yet but I think they should sort out that back button. Just make it the same size as everything else on the menu bar. And is there really another favicon next to them? I also really wish that they could at least give a IE8.5 update for the XP users instead of “forcing” business users to upgrade.. Can’t wait for the backwards compatibility hacks from the interweb.

    1. Luke, my guess the reasoning behind not supporting XP or making an 8.5 is that XP is no longer supported in the public realm, so why develop software for an operating system no longer publically supported?

      1. Luke, the extra “favicon” to the left of the back button is to always link “home” (in a sense that home is the URL you pinned/bookmarked)… it’s actually redundant to those of us who know how to surf the web, but for the average user I can see how it would be handy.

        I totally agree about the back button. It looks stupid that way. Resize it and stop cutting it off at the bottom! :)

      2. it’s even simpler than that; the hardware accelerated rendering that IE9 uses requires WDDM, which is the video driver system developed for vista.

  6. I just don’t get why they wasted 30 pixels of vertical space over the adress and tabs bar.

    “Oh, look, we have moved adress bar and tabs in the same row and now we have 10 pixels smaller menu bar than Chrome!” … yea, cool MS, but it could have been 40. Or you could have just been equal to Chrome’s size and offer the users a rewarding tab expierience.

    Seriously, on a 24 inches screen, 6 tabs is the maximum you can use without having the tabs resized. This is ridiculous in a browser that is stunning, fresh & new in every other point. :(

    1. Having a 24 inch screen myself it is just not true. You can resize the address bar. Who needs to see all the stuff in there? The domain and sub location should be enough. Oh and the “wasted” pixels are where you can move the whole window around. It is sometimes difficult in Chrome, not even thinking about trying it on a tablet with fingers.

      1. Chrome has this “grabbing room” also when you use it in window mode (about 20 pixels small), but IE9 also wastes this space in full screen mode. Speaking of tablets – if a touchscreen is present and enabled, yes please, make this room big. But I use a plain old standard 24″ monitor with no touch at all, so here it is really not needed.

      2. @Bernhard, Chrome doesn’t have any grabbing room when maximized. Besides that, I’m more concerned with how you get off saying IE9 wastes space in full screen mode when it’s just a web page and scroll bar with the chrome being hidden?

      3. @bernard

        i actually with you there. At least with previous versions of IE (which i’ve used fully until just a few months ago) i could resze and move UI components around as i wished. Sadly, with IE9 i couldnt find how to do this, and by default i don’t like the way the address bar and tabs share the same vertical space. it just doesn’t make sense to me.

  7. It would have been nice if the tab overflow had been fixed with some sort of tab preview like in Windows 7. Maybe that can be either added later or through an add-on.

  8. It has some good ideas, and some bad ideas, and part of that could be relying on poor data.

    I am not totally anti the single line Address bar and tabs, but when they talk about “most people” having about 4 tabs open, I think they are missing that most people that are power users only use IE to download another browser. I dont know how many times I have seen people with 2 rows of tabs on firefox, and they are even going nuts in firefox with a spaces like feature for it. That being said, on windows, the task bar itself is more of a natural fit than tabs alone. I dont know, in the end, it should be up to the user.

    UI wise, its kinda “meh”. I am rather vocal of MS not following any sort of consistant UI theme and again I am proved right. We can now add a 5th style for back and forward buttons in stock windows. I also find it funny that they have a completely square address bar and bar buttons, then have slightly rounded tabs, and totally round back/forward buttons. It clashes IMHO. I also find the cut off back button completely out of place in the windows UI zoo.

    There is also a 3 or 4 pixel white line underneath the tabs which looks either non existant or very bad depending on the website. If you have a white background, yay, if you have something darker, it looks like crap.

    I have also noticed that some websites seem to render with an inset grey border all around the frame, and some pages on those same websites do not, I am wondering if this is just some odd bug. I noticed on amazon.com that some pages have it and some dont.

    I like to have the favorite bar up, and its colored background looks like the MMC toolbar background (which looks crap and seems to be phasing out) and not the Windows Explorer bar’s nicer background. Again, I dont know why this is so hard to do right, its very noticable when side by side.

    I also would prefer the title in the “title bar” area. If you have several windows up it is really nice to have glancable information to help you find them. Could live without it, but now its just wasted space.

    The pinning functionality is interesting, I like the effort put into it, its really a well thought out feature, the coloring of the buttons is actually a decent touch. I do not like that I cannot grab a tab off a “non-pinned” window and drag it to a pinned window, it wont snap into it. Its my tab, let me do what I want with it.

    Seem fast, so far isnt playing with VS2010 well yet when debugging.

    1. The coloring of the new back button is used as the branding for the whole app. Look there is no Internet Explorer logo or even a text on the whole window now. And the size and overall style fits very well with other Microsoft designs. I especially like that the back button has the same size as the Start orb and it sits behind the content just like in the Zune client UI.

      It is most likely that Windows 8’s Explorer will look very much like this.

  9. I would also add that I think the way chrome searching address bar works is better in how it displays the results. I dont really need things in groups, its just one more thing to click through. Chrome just looks so much more clear when you use it. I do like that IE keeps it as a dropdown, Chrome does not you always have to type.

  10. I hate the font rendering right now. I hate the back button. I hate the still bird egg blue “menu” for the Favorites/Command bar.

    I’ve had quite a few sites that render poorly (Microsoft Technet subscription renewal) or don’t render at all (Gateworld.net), but 99% works great. Simple AdBlock extension is broken for now which is definitely going to prevent me from using this as my default (for now).

    BUT, those handful of negatives aside, the experience overall is quite favorable so far. It’s fast… wicked fast! I like the download manager, and the web app concept is awesome!

  11. I dont know if its just me, but i cant seem to right click on anything in IE9 for some weird reason.

    ohh and i do miss my favorites bar :(

      1. @Charles Woelfel Thanks mate!!! :) But do u have any problems right clicking on a picture or a link? I’m only able to click on the status bar and the tabs and some other things in the menu but thats all.

  12. the “Blurry font” glitch can be solved by opening Advanced Options dialogbox, and ticking “Always use ClearTyoe for HTML code”. And then close & restart IE9.
    I hope a new version of Simple Adblock will be released soon, coz it has become buggy indeed

      1. It depends on Document Mode. You can see it, if you press F12 (Developer Tools). You’ll see than, in which mode the page is rendered (you can also switch both modes by pressing these signs)

      2. forgot: DirectWrite is used in “Document Mode: IE9 standards”. This results in a blurry font. All other modes use GDI+ rendering, where ClearType is in a game…

  13. I get why they went with the single-line design for the tab/address bar but I wish they at least provided an option for those users that want to move them to the top (or the bottom) of the address bar.

    And why in the world would you leave the title bar of the window blank? Doesn’t make any sense what so ever, especially because it’s just taking up space for no apparent reason.

    1. the titlebar is blank because the window title is already on the tab (and thus on the tab’s thumbnail in the taskbar). note that Windows Explorer also has a blank titlebar, as the location is already in the address bar. it reduces redundancy, but the title bar still exists as a drag point.

      1. That true. Except if I have a bunch of tabs open, I won’t be able to tell which tab is which page just by glancing anymore. I actually have to hover over the tab or use Alt/Shift-Tab to locate it.

    1. Oh yeah that is one thin I really miss, too. This and the ability to drag UI elements around like in Fx. Two of many reasons to stick with Fx 4.

  14. LongZheng, many users find that IE9 “Send Feedback” doesn’t work even if you have the latest version of Windows Live Sign In Assistant.

    This the best time for releasing your “Internet Explorer 9 Task Force” website!!!

  15. Hmmm, I’m wondering if the Sidebar Gadgets on Windows are now hardware accelerated? It seems that IE does the rendering (it feels different and some Gadgets are even broken, like the Calendar Gadget).

    Oh and one idea comes to my mind: what if Microsoft has the IE9 engine soon ready for Windows Phone 7 with HTML5 and also hardware acceleration? THAT would be awesome.

  16. While the hardware acceleration features are good, it seems that the new user interface is as bad as ever. The space for the address bar is simply too small, often web addresses are long and people want to change the url in the address bar, but with the cramped design, this is now a very unpleasant experience. If you have turned on search suggestions, there is also unpleasant flickering when adding results. Simply put a very bad feel to the most important “gizmo” in IE.
    None of the stellar features of finding and recalling sites from Firefox has been implemented. You still can’t tag sites, you can’t search your favourites. It’s just like IE 4, since then there has ben 0 new interface innovations other than to swipe all the problems under the carpet. This is excatly what has been done now. Instead of rethinking the user interface, instead even more things have been hidden away. I think it culminates in the fact that you have to press a “secret” key, the Alt-key, to display the menues, and that they are still there. The old stile menu and command bars in all their glory. Why? I find no other explanation than either the developers are so lazy they take decades to implement changes or the designers lack any deep vision.
    It is also very awkward that the Page title for a web page is cramped only in the tab title, that keeps getting smaller and smaller the more tabs you open, and since tabs are placed to the right, it is in a place where the eye will not look naturally.
    So yes, it is better than IE8, but interface wise, it is same old, just with a little spring cleaning done.

  17. I’m just glad you can disable tabs altogether and use the win 7 task bar to organize your browsing experience. I would just like to have disabling tabs cause ctrl+t to open a blank new foreground window, and middle clicking a link open a backgrounded new window.

    Tabs have no place in the sites-as-apps-centric vision I think Microsoft is going for anyways.

  18. Whilst it may be true that some users do only have a few tabs open at any one time, it needs to be acknowledged that there are power users that do have many tabs open, so how does IE9 accommodate these users? Is there a strategy of dealing with those users, like me? I don’t mind the new interface I have to say, I am all for the simplifying of interfaces that was first brought about by Google’s Chrome a while back now. I’m going to have to download this and have a play within Parallels 6 to see how it looks and performs with a large number of tabs. I do commend Microsoft for coming to the standards party at long last, delivering us a web browser that finally won’t need serious work arounds when coding our web pages as we’ve needed to do in the past. Hurrah!!!

  19. I’m using IE9 WAY more than I used IE8 once I began using Google Chrome. Google Chrome is still one of the best browsers of all time, though, but IE9 is getting there.

  20. I can’t stand the address bar it’s too damn small and if you have any pull over this please make it customizable and/or not the default. I’m a developer and I care deeply about those URLs, IE9 currently hides all the work that has gone into making URLs look nice and user friendly. It’s a nuisance trying to navigate anywhere using the address bar.

    1. Um… just gab the space between the address bar and tabs and make it bigger….. but feel free to continue to be pissy (and ignorant) about it.

    2. If feel the same too. I would feel better if the address bar would expand when it got focus and/or at least show a tooltip, just like the tabs, when hovered. The refresh and stop buttons could also be merged together to save precious space. Hope this gets through in the final version.

  21. My sidebar calender won’t work after installing IE9…first i thought something gone wrong with sp2 install (had to reinstall windows) but no it was IE9.My calender looks like it would have lagged and there are “notes” behind it (a gadget) no…I can see the date….After i click on a different date say 18th and swich back to…23 the calender looks just like it should…But than the dates can dissapear….after…some time…Dunno why.
    I have run some commands (yes as an admin) but no ofcourse it ain’t working…I uninstalled 9 and with 8 everthin is working.I like IE8 design better,doesn’t look old,no,it looks awesome.

    IE9s back and forth buttons looks FLAT…lol…

    Any ideas?

    I ain’t upgrading to 9 until they fix this.No big deal but it’s annoying

Leave a Reply