/>
X

Windows 8 interface's design heritage

Microsoft's new Windows 8 interface, formerly known as Metro, is a clear break from the ageing desktop metaphor. Is it the industry's way forward, or just confusing brand differentiation? Either way, it's got design-history cred.
|
stilgherrian.jpg
|
Topic: Windows
win8ui-01-win8home.jpg
1 of 8
(Credit: Microsoft)


Microsoft's new interface for Windows 8 and Windows Phone 8, formerly known as Metro, is based on squares and rectangles of flat colour arranged on a seamless panoramic canvas; a complete break from the traditional desktop metaphor.

The new interface is a stylistic development of the look developed for Windows Phone 7, something that caused confusion when it was announced in 2010.

"When I first saw the Windows Phone UI ... I was genuinely surprised. The flatness of it, an awful lot of white space ... I mean, it was clearly a shift in direction from what we've been seeing on the other platforms," said Shane Morris, formerly a Microsoft user interface evangelist, but now a user experience designer with Automatic Studio.

"I literally thought that Microsoft was being very clever and not revealing the final user interface. Instead, it put in place these square, coloured placeholders where the user interface would be revealed," Morris told ZDNet.
But the interface was real, and the abandonment of the familiar desktop metaphor was also real. Microsoft believes that it's appropriate in the era of digital natives.
"We're at a point where our users are sufficiently confident with using information technology that they don't need the reassurance of those references to real-world objects. That would be Microsoft's argument," Morris said.
"That's why the new user interface has what a lot of this what we call chrome [borders, shading, textures, and the like on user interface elements] stripped out, the argument being we can just focus on the actual information now," he said.

"You manipulate the content itself. You drag it, you drop it, you poke it. As an old-school usability guy, I found that quite confronting. Traditionally, my job was to provide enough signals onscreen to communicate to users what you're supposed to do."
In his presentation at Microsoft TechEd 2012 this week, Morris showed how the Windows Phone 7 and Windows 8 interfaces have evolved from Microsoft's previous content-focused interfaces for Media Center and Zune.
"Those applications similarly don't have a lot of chrome, the focus on the content, there's a lot of animation, a lot of use of text," he said.
The inspiration for Microsoft's new visual style can be traced back to design schools from the middle of the 20th century, including the International Style or Swiss School, the Bauhaus movement, and motion graphics such as the cinematic title designs of Saul Bass, as well as the wayfinding signage used in airports and urban transit systems.

Stilgherrian attended Tech.Ed Australia 2012 as a guest of Microsoft.

win8ui-02-xeroxstar.jpg
2 of 8
(Credit: DigiBarn)


The desktop metaphor, with folders of files and overlapping windows, is now more than three decades old. Developed at the Xerox Palo Alto Research Centre (PARC), it made its first commercial apearance in the Xerox Star (pictured) in 1981, before its evolution through the Apple Lisa, Apple Macintosh, and Microsoft Windows to the many variations we see today.

win8ui-03-mediacentre.jpg
3 of 8
(Credit: Microsoft)


Windows Phone 7 and Windows 8 were derived from earlier content-centric and text-enabled designs from Microsoft, including Windows Media Centre (pictured), Zune, and, long before them, the Encarta CD-ROM encyclopedia.

win8ui-04-wayfinding.jpg
4 of 8
(05042009724 image by James Laurence Stewart, CC BY 2.0)


Wayfinding signage in airports and urban transit systems is based on the repetition of simple rectangular shapes and a simple colour palette. This inspired the original name for Microsoft's new interface, Metro.

win8ui-05-swissstyle.jpg
5 of 8
(Credit: Idea Magazine 351)


"The Swiss School [also known as the International Style] arose early last century, and really it was mainly in print media, posters and advertising, book covers, stuff like that," Morris said.

"The premise behind this design movement was that if we just show the information in an authentic way, that is beautiful unto itself."
The Helvetica typeface, designed to be readable at many different sizes, came from this movement, as well as the use of text to visually communicate an information heirarchy.

win8ui-06-bauhaus.jpg
6 of 8
(Bauhaus typography image by Jan Tschichold, public domain)


The Bauhaus school's catchphrase was "form follows function" or, as Morris explained it, "If a sufficient and elegant design is the minimal design necessary to deliver the purpose."

Decoration was considered unnecessary.

win8ui-07-northbynorthwest.jpg
7 of 8
(Credit: Saul Bass/MGM)


A key inspiration for Microsoft's new visual style were the film title sequences created by Saul Bass, in particular those for movies like North By Northwest.

"In the olden days, we designed a series of static screens or windows, and we string them together in our user interface. We now have the ability, both in terms of the platform capabilities and also with the design tools that we have available, to start thinking much more carefully about how things move about on the page," Morris said.
"The great power of animation, of motion design, is that it leverages the way we naturally process information in the real world."

win8ui-089-madashell.jpg
8 of 8
(Credit: Josiel Lopez)


Parallel to Microsoft's evolution of this visual style has been a creative style known as kinetic typography, with words moving onscreen to convey a message. Sometimes, this breathes new life into a text. Sometimes, it's pointless animation.

 

Related Galleries

Satechi USB-C Hybrid Multiport adaptor
Satechi USB-C Hybrid Multiport adaptor

Related Galleries

Satechi USB-C Hybrid Multiport adaptor

10 Photos
First Look: New Surface PCs include Android-based Duo 2 [in pictures]
thumbnail-72371d1d9eb043bcb3986b87c5b47dc7.jpg

Related Galleries

First Look: New Surface PCs include Android-based Duo 2 [in pictures]

12 Photos
Installing and running Windows 11 on a Mac
Starting the Windows 11 installation

Related Galleries

Installing and running Windows 11 on a Mac

20 Photos
YubiKey 5C NFC: The world’s first security key to feature dual USB-C and NFC connections
YubiKey 5C NFC

Related Galleries

YubiKey 5C NFC: The world’s first security key to feature dual USB-C and NFC connections

9 Photos
Apricorn Aegis Secure Key 3NXC
Apricorn Aegis Secure Key 3NXC

Related Galleries

Apricorn Aegis Secure Key 3NXC

12 Photos
Lauco 8-in-1 world's smallest 100W USB-C wireless charging hub

Related Galleries

Lauco 8-in-1 world's smallest 100W USB-C wireless charging hub

13 Photos
Anker PowerExpand 8-in-1 USB-C hub
Anker PowerExpand 8-in-1 USB-C hub

Related Galleries

Anker PowerExpand 8-in-1 USB-C hub

7 Photos