IE9 UI

[~Johnny]

Could you please link to these guidelines? As far as I know, no such thing exists. The only thing that exists is the Zune software's UI, from which people have extrapolated a whole "Metro" design, despite the fact that it's used nowhere else, and has little to do with the actual Metro design found on the mobile devices.

As for MetroTwit, I don't see how it's the same as the Zune software.

They have little in common apart from a lack of depth. Is that what Metro means? "Flat?" Whatever Microsoft considers "Metro" to be internally, I have serious doubts that it's the kind of ultra-vague philosophy that people here are claiming.

Anyway, the problem I have with the design is that it completely ignores the UX guidelines for Windows. It is radically different from them, and radically different from the Windows design itself. It's really inconsistent with Windows and looks completely out of place. If all of Windows looked that way, then that would be one thing, but to have a single OS component (IE) be so radically different from the rest of the system? It's absurd.

There is also no framework for it. To use it, you have to custom design everything. You have to draw everything manually, all the way from the window borders down to the individual UI controls. It's a lot of work trying to jury-rig the look into a framework that was not designed for it.

This only real documentation they've externally released is this: http://go.microsoft..../?LinkID=189338. There are no guidelines for Metro on Windows, or for the Zune software's design. Just, what Metro is, and what it focus' on. It's pretty open. Of course the Windows Phone 7 take on Metro has more specific guidelines for you to follow???:rofl:

There's really not much more to say about it, it's a simple idea. Simple, clean design with beautiful/consistent typography. Does it matter that much if it looks inconsistent? It still looks nice, and provides unique and pleasant experiences on their own, and it's easy to use. And there is no "actual" Metro design on mobile devices - it's a Windows Phone 7 design based on Metro's philosophy (or design language as Microsoft call it) - there is no rigid design template, just guidelines you should follow.

?

Comparing these two, they both have simple typography, and simple colouring. They both remove as much necessary UI as possible, and focus on showing only the users content - there are very few superfluous design elements or content borders or decorations, leaving for a very clean look.

And you don't have to draw your own borders or controls, it's just something Zune & Metrotwit do on their own accord. It can still work very well without. For example, here's something Metro inspired I was working on, and it looks fine with Aero borders. And to be fair, you don't particularly need a framework - you can do it with any existing framework on any platform. Just create a lot of whitespace, use consistent and well designed fonts, and use as little graphical design elements as you can. You do need something that can animate well though, so building on top of WPF or Silverlight would be easiest. (In which you can conveniently too create custom stlyed UI controls in minutes if you wished).

Either way, Microsoft will never use it in their browser ? :rofl:?I'm sure they'll stick to something that looks similar to Windows Explorer =)

[Descartes]

At least the OP didn't put metro/ribbon in the mockups.

[jbrooksuk]

Microsoft would really be very stupid if they bloated IE9 now, especially after all the work they've put into the actual engines.

I think they may surprise us all.

[Calum Veteran]

Could you please link to these guidelines? As far as I know, no such thing exists. The only thing that exists is the Zune software's UI, from which people have extrapolated a whole "Metro" design, despite the fact that it's used nowhere else, and has little to do with the actual Metro design found on the mobile devices.

As for MetroTwit, I don't see how it's the same as the Zune software.

[...]

You were using a screenshot of version 2 or 3 of the Zune software, that is why :) Check out ~Johnny's post for a screenshot of version 4, which MetroTwit was based off.

[...]

Anyway, the problem I have with the design is that it completely ignores the UX guidelines for Windows. It is radically different from them, and radically different from the Windows design itself. It's really inconsistent with Windows and looks completely out of place. If all of Windows looked that way, then that would be one thing, but to have a single OS component (IE) be so radically different from the rest of the system? It's absurd.

[...]

Seeing as Windows is released at different times to Internet Explorer and other software, if Microsoft wished to overhaul the design and ensure consistency between Windows and its applications in regard to this new design, one (either Windows or Internet Explorer) would have to adopt that design first. Due to how appalling IE 8 is compared to the new Opera, Firefox, Chrome or Safari, they have to release IE 9 as soon as possible and wouldn't be able to wait until Windows 8 is released. It's also likely that IE 10 will be released some time after Windows 8; due to this, if Windows 8 is going to adopt the Metro design (a big 'if'), IE 9 would have to adopt it now.

[...]

For example, here's something Metro inspired I was wokring on,

[...]

Oh man, that looks beautiful. I've been looking for a Metro Facebook client, to go along with MetroTwit. You don't happen to be planning on releasing it, do you? :happy:

[George P Global Moderator]

So a UI can be "bloated" if it's got too many buttons now? So I take it people are just tacking on the word "bloated" to anything and everything now eh?

[hdood]

There's really not much more to say about it, it's a simple idea. Simple, clean design with beautiful/consistent typography. Does it matter that much if it looks inconsistent?

I think most people would expect consistency across a product. You don't expect parts of the OS to be wildly different, and you can't deny that a bright white window with no window borders looks very different.

It still looks nice, and provides unique and pleasant experiences on their own, and it's easy to use. And there is no "actual" Metro design on mobile devices - it's a Windows Phone 7 design based on Metro's philosophy (or design language as Microsoft call it) - there is no rigid design template, just guidelines you should follow.

But I don't think this is something that Microsoft is actually pushing, expect for on their mobile devices? It gets a lot of attention, even though I can't say that I've heard that Microsoft is trying to start any revolution.

Comparing these two, they both have simple typography, and simple colouring. They both remove as much necessary UI as possible, and focus on showing only the users content - there are very few superfluous design elements or content borders or decorations, leaving for a very clean look.

Well, that's pretty subjective. I'm not that fond of it personally, but I recognize that it's a clean design. I see that they're a lot more similar in your pictures, with the only major difference being the turquoise "titlebar" which draws a lot of attention to it. It almost steals the focus from the content, and becomes even more visible than the standard aero window borders. Compare that to the single-color Zune where everything expect the content is extremely discreet. I'm not sure I get that. If it was going to be the standard though, I would like it to be a little more standardized and have fairly stringent guidelines. Not that it would necessarily help, if you look at how inconsistent much of the software out there today is.

And you don't have to draw your own borders or controls, it's just something Zune & Metrotwit do on their own accord. It can still work very well without. For example, here's something Metro inspired I was working on, and it looks fine with Aero borders.

Well you don't, but it looks nicer if you go all the way. It doesn't seem as trapped inside a box. Your screenshot looks nice, but it's worth noting that you have very bright window borders. It wouldn't look as nice with my dark blue ones.

And to be fair, you don't particularly need a framework - you can do it with any existing framework on any platform. Just create a lot of whitespace, use consistent and well designed fonts, and use as little graphical design elements as you can. You do need something that can animate well though, so building on top of WPF or Silverlight would be easiest. (In which you can conveniently too create custom stlyed UI controls in minutes if you wished).

Right, but that is .NET. People tend to forget that most software is not written in .NET. Most software is native code, using native graphics and UI frameworks (gdi/user/common controls). This is a very different world, where things are a lot more difficult. Not because they have to be, but because Microsoft's APIs are very bad and very dated, and Microsoft has shown no interest in superseding them with something better. I think this is something that is important to understand. It is not C++ in itself that makes native development so much more work, it's the poor quality of the native APIs.

Much of it because of the Vista debacle where the dream was to essentially deprecate native code. We all know how that went.

[+Anarkii Subscriber²]

So a UI can be "bloated" if it's got too many buttons now? So I take it people are just tacking on the word "bloated" to anything and everything now eh?

Bloated to me is just a UI full of things that can be smartly hidden.

I prefer the clean look of Chrome, and I like the functionality of Firefox. But IE, well it just looks like a mess, with no real improvements to the UI since what... version 5? All M$ have done is added more and more buttons to their menus.

[hdood]

You were using a screenshot of version 2 or 3 of the Zune software, that is why :) Check out ~Johnny's post for a screenshot of version 4, which MetroTwit was based off.

Yes, my mistake.

Seeing as Windows is released at different times to Internet Explorer and other software, if Microsoft wished to overhaul the design and ensure consistency between Windows and its applications in regard to this new design, one (either Windows or Internet Explorer) would have to adopt that design first. Due to how appalling IE 8 is compared to the new Opera, Firefox, Chrome or Safari, they have to release IE 9 as soon as possible and wouldn't be able to wait until Windows 8 is released. It's also likely that IE 10 will be released some time after Windows 8; due to this, if Windows 8 is going to adopt the Metro design (a big 'if'), IE 9 would have to adopt it now.

Well, it's a complicated issue. IE is not a separate application. It is not a standalone application that Microsoft releases separately. It is a set of Windows APIs (networking, parsing, rendering, rss and so on.) It is a Windows component. New IE releases are actually operating system updates. Even Microsoft has spent so much time and money arguing this. As such, they should hold back radical (possibly breaking) changes to the next OS update. I wonder how IE9 will work with applications that embed the IWebBrowserX control via OLE and make assumptions about how its GDI painting works (IE9 is Direct3D.) I suspect there are things that will break, so even that might be going too far.

Anyway, if Microsoft wants to push a new design, they should do it for the whole platform at the same time. There is zero reason why IE10 can't ship with Windows 8. Hell, they could slap a new GUI on IE9 and call it IE10. The number doesn't mean anything. It doesn't have to be a big update. They can just change the GUI if they want, to match the Windows version.

[ATLien_0]

Heres my 2 cents about the metro UI for IE, I don't see it happening this go around. I don't think the percentage is high enough of people that use the Zune interface or know what the the metro UI is. It looks great, but does not blend well with Windows 7 and will be a bit confusing for novice users making the switch from IE8. The interface might be simple and intuitive for us here on Neowin, but just think what you end up doing to a novice user.

I think the metro UI mock ups look awesome, I just think Microsoft is going to keep it simple. Aero, same back/forward buttons, explorer like, maybe a little more minimalistic on the tab bar.

[asusmc]

It will look pretty much like this:

If it doesn't, I'll put this in my sig for a year to mock myself for being wrong.

I will remind you on this :)

[Woelfel]

Oh yea, if you want other Metro inspired stuff this is Microsoft Bend (that WAS on codeplex but was taken down...luckily I still have it :)).

Metro design elements are also in the new Windows Messenger beta.

So Metro CAN be used for IE, we just don't know how it would be implemented (I believe Neowin said that it wasn't going to be).

The thing is that Microsoft is using Metro where they believe it can be used. It all depends on context. You wouldn't use Metro in Office because the Ribbon UI is more intuitive and would work better. Yea, it wouldn't be consistent but different applications have different needs. The OS ITSELF needs to have a consistent UI, but applications in my opinion do NOT need to because they have different needs.

[Calum Veteran]

[...]

Well, it's a complicated issue. IE is not a separate application. It is not a standalone application that Microsoft releases separately. It is a set of Windows APIs (networking, parsing, rendering, rss and so on.) It is a Windows component. New IE releases are actually operating system updates. Even Microsoft has spent so much time and money arguing this. As such, they should hold back radical (possibly breaking) changes to the next OS update. I wonder how IE9 will work with applications that embed the IWebBrowserX control via OLE and make assumptions about how its GDI painting works (IE9 is Direct3D.) I suspect there are things that will break, so even that might be going too far.

Anyway, if Microsoft wants to push a new design, they should do it for the whole platform at the same time. There is zero reason why IE10 can't ship with Windows 8. Hell, they could slap a new GUI on IE9 and call it IE10. The number doesn't mean anything. It doesn't have to be a big update. They can just change the GUI if they want, to match the Windows version.

You make an excellent point and I agree with you; they could easily slap on a new GUI and either leave the version number or bump it up. I don't know why I overlooked that :D

Oh yea, if you want other Metro inspired stuff this is Microsoft Bend (that WAS on codeplex but was taken down...luckily I still have it :)).

[...]

Thank you for the screenshots and information :)

[the better twin]

Why does everyone keep saying that Metro UI isnt for the desktop? read/watch some interviews with joe belfiore. He specifically states that Metro UI was originally built into Windows media centre and from there they expanded it to the zune software (desktop and mobile) and then to the xbox with the NXE and also Windows Phone 7. they have also integrated it into the latest windows live messenger.

its perfectly feasable that it could be integrated into IE9.

neowin seem to know different tho which is a shame, think it would work very well.

[ThomMcK]

I want something like this

http://img576.imageshack.us/img576/8141/internet20explorer20920.png

This is more like what I was thinking they would do.

Shame it didn't get on the frontpage article as its by far the best. The rest are just IE8 or Firefox aren't they.

Nice work :)

[Jamushroom Veteran]

Here's my quick mockup:

Note that the Backwards and Forwards buttons in reality should look like the OS's defaults. I took these from an Aero mockup made by me as I didn't want to remake them :p Same counts for the favorite icon.

[ThomMcK]

I want something like this

http://img576.imageshack.us/img576/8141/internet20explorer20920.png

This is more like what I was thinking they would do.

Shame it didn't get on the frontpage article as its by far the best. The rest are just IE8 or Firefox aren't they.

Nice work :)

[Chasethebase Reporter]

Here's my quick mockup:

Note that the Backwards and Forwards buttons in reality should look like the OS's defaults. I took these from an Aero mockup made by me as I didn't want to remake them :p Same counts for the favorite icon.

Yes. If it was like this I would use it.

A few Metro elements would be good, but not a full Metro UI for the application like that Bend thingy. That doesn't work at all.

[Woelfel]

Bend is freaking awesome. Using it and looking at it is different ;). It's just a text editor. I would still change some things that they use but it's still awesome.

[George P Global Moderator]

Yes. If it was like this I would use it.

A few Metro elements would be good, but not a full Metro UI for the application like that Bend thingy. That doesn't work at all.

I think, if anything, a few places we could see the Metro UI or elements of it are in a new Internet options page, it's time to drop this old one that's been around since IE6 if not older). And in any sorta redon "new tab page" or w/e you wanna call those. Also if IE9 has a IE button, like office does, and Opera/FF then when you hit that button you could get the metro UI bits used there as well.

As for the rest of the UI itself, tabs on top or not I dunno, it'd be good if it's a option in any case so people can just go with what they like.

[M V E]

This is more like what I was thinking they would do.

Shame it didn't get on the frontpage article as its by far the best. The rest are just IE8 or Firefox aren't they.

Nice work

Thanks.

[Michael Gillett]

There are some excellent ideas on this thread.

I created the below concept/mockup a months back which would make use of the current design and take elements from the Ribbon and Metro UIs. However from what I am hearing IE9 will not feature any Ribbon or Metro UI elements so is very unlikely to look much like my idea.

I also wrote some accompanying text to explain some of the elements of what I thought IE9 could look like.

[Kyang]

Here's my quick mockup:

Note that the Backwards and Forwards buttons in reality should look like the OS's defaults. I took these from an Aero mockup made by me as I didn't want to remake them :p Same counts for the favorite icon.

First off I think it looks pretty, but I'll never understand why so many concepts, even those for Firefox 4, have this tiny grip area at the top. With one or two tabs, this isn't a big deal since there's a thick, easy to reach glass area to click on, but once the tab bar is full, there's only a sliver of space for the mouse to click. That's makes it more difficult than it has to be to move the window around, and moving the window is what can be expected if the user intentionally left the window restored, instead of maximized. When the window's maximized, the tabs can be pushed to the edge for all I care, it would be easier to select tabs like that anyway.

Tabs to the edge would make Aero snap useless since the user wouldn't be able to drag a maximized window down anymore, but that that's a different matter. Tiny grip areas for restored windows always seemed like either a usability oversight, or just form over function. Either way, Chrome seems to pull it off properly, though I'd still prefer the space it leaves expanded to match the rest of the titlebars in Windows.

[LightShadow]

^ Liking your idea ^

@Zedox - I'm sure I think that is freely available now, I was looking for a new text-editor and found it. I have it installed.

[Woelfel]

^ Liking your idea ^

@Zedox - I'm sure I think that is freely available now, I was looking for a new text-editor and found it. I have it installed.

I always go to the codeplex link that I find and it never goes to it. I'm glad you found it though. It's pretty cool imo (especially with syntax highlighting...even though they mess up on the C# highlights like VS but oh well)

[jonnyH]

I like the idea of metro being used for the web browser but it won't happen :(

I'm trying to find a download link for bend but not finding any, does anyone have a link or the .exe?