Posts tagged Thoughts

Windows 8 Explorer Metro Ribbon UI with Touch First in mind

With the Microsoft BUILD conference nearing closer there has been an increased surge of excitement throughout the developer world as Steven Sinofsky, President of the Microsoft Division begins to openly discuss the in-depth look into the mechanics behind their new  ”Redesigning Windows” approach.

He recently posted an article on ‘Improvements in Windows Explorer’. Where he discusses how the Windows Explorer (They should change it to File Explorer) has developed over time and ends with introducing the new Windows 8 Explorer that features the ‘ribbon’ we see today in applications such as Microsoft Office or Live Essentials.

This GUI (a static kitchen sink) had it’s uses in feature rich applications, however Microsoft should consider developing this further and provide a “dynamic and intelligent” ribbon that is not only configurable but is smart enough to change it’s UI based on device type and window size. (i.e: icon size, text placement, number of rows and columns, spacing etc.)

Windows 8 Ribbon

As it stands this Ribbon interface is ideal for legacy applications as it provides a function but I assumed the whole idea of Windows 8 was to move away from standard Windows environment and provide something revolutionary and innovative. Like mentioned previously, a “Dynamic and Intelligent” Metro ribbon that understands the users needs.

Touch First Windows 8 Ribbon

See full Size with annotation

That is exactly what I designed in the above image to try and communicate this point. By simply borrowing the design from IE9 (chromeless window) and moving the ribbon below the navigation bar it makes everything more legible. I have also increased the spacing between elements to maximise touch performance, provided a better way to collapse the ribbon and added additional functionality [see full size image]

Microsoft needs to give Windows a personality, this is what I mean by ‘intelligence’. The Explorer should be something that is centric to the OS experience not just a boring environment that lists your files but is an all-in-one GUI - library, document viewer, control panel and so on. For example, Explorer should have an organisation tool that allows me to organise and structure my entire PC in a simple method by creating virtual groups, libraries and tags so that I wouldn’t need to create a number of actual directories just to organise my files. All it takes is a simple search to find everything without ever navigating to a folder.

These are just some ideas of what I see as a truly “Reimagining of Windows” but whatever we see at BUILD I am hoping it will truly be something innovative and different (by that I mean totally touch-first and Metro styled UI - no legacy stuff at all but completely “redesigned”).

What are your thoughts on Windows 8 so far? Do you agree with how Microsoft is presenting the Ribbon to users in it’s new operating system or should they redesign it similar to how I explained through my concept design?

Microsoft Homepage: How Microsoft Can Improve It’s Branding (Note: All images are edited and do not reflect the original website) I came across an article yesterday by Cory Watilo called ‘Why Microsoft has an image problem’ where he compares Microsoft.com to Apple.com. He makes the point that Microsoft is still very much stuck in their ways by continuously cramming loads of unnecessary elements on one page and using too much colour which distracts the user from focusing their attention on the important things. — I agree with most of what he says but let’s be honest, Microsoft is never going to be like Apple so they shouldn’t try to be like them but they could learn a great deal in their presentation and how they display information.I’ve always noticed this problem so wanted to see if Microsoft maybe aren’t bad at marketing and design, they just lack in direction. I’m beginning to think I am right and that’s precisely their problem.Microsoft Homepage Redesigned The photo above (click to view larger version) was created using elements all found on Microsoft’s own websites (www.zune.net, www.microsoft.com/uk, www.microsoft.com/uk/wave/home.aspx)If the images are not showing fullsize, use these links: for home, for work Microsoft homepage when user navigates to the work section. Conclusion: Microsoft is well aware that they have perhaps grown old and were in need of a re-branding to revitalise their consumer image. Their problem lies with trying to manage so many complex deep-link pages (mostly unnecessary) and product micro-sites that there is a disconnect between the design which confuses people A LOT!. There needs to be one or two universal design templates that follows through out every single page and site. This template must make use of screen real estate and support wide-screen viewing. This means using clearer heavier fonts, using HTML5, using less banner ads, using more subtle colours in your branding (not bright blue or orange) and finally force people to use your site (don’t spam your page with links to items of less importance.)

Microsoft Homepage: How Microsoft Can Improve It’s Branding

(Note: All images are edited and do not reflect the original website)

I came across an article yesterday by Cory Watilo called ‘Why Microsoft has an image problem’ where he compares Microsoft.com to Apple.com. He makes the point that Microsoft is still very much stuck in their ways by continuously cramming loads of unnecessary elements on one page and using too much colour which distracts the user from focusing their attention on the important things. — I agree with most of what he says but let’s be honest, Microsoft is never going to be like Apple so they shouldn’t try to be like them but they could learn a great deal in their presentation and how they display information.

I’ve always noticed this problem so wanted to see if Microsoft maybe aren’t bad at marketing and design, they just lack in direction. I’m beginning to think I am right and that’s precisely their problem.

Microsoft Homepage Redesigned

The photo above (click to view larger version) was created using elements all found on Microsoft’s own websites (www.zune.net, www.microsoft.com/uk, www.microsoft.com/uk/wave/home.aspx)

If the images are not showing fullsize, use these links: for home, for work


Microsoft homepage when user navigates to the work section.

Conclusion:

Microsoft is well aware that they have perhaps grown old and were in need of a re-branding to revitalise their consumer image. Their problem lies with trying to manage so many complex deep-link pages (mostly unnecessary) and product micro-sites that there is a disconnect between the design which confuses people A LOT!.

There needs to be one or two universal design templates that follows through out every single page and site. This template must make use of screen real estate and support wide-screen viewing. This means using clearer heavier fonts, using HTML5, using less banner ads, using more subtle colours in your branding (not bright blue or orange) and finally force people to use your site (don’t spam your page with links to items of less importance.)