Science of Great UI & Windows Phone 7

05 November 2010

The Windows Phone 7 release is imminent. Here are screenshots of two versions of the start page tiles:


When I first saw this screenshot I noticed a few variances from the guidelines presented in my Science of Great UI talk.

One of the things I mention in my talk is that everything presented onscreen is information (everything – data, background, borders, etc.), and not all information has the same relevance. Since our eyes are attracted to great contrast, relevant information should be rendered in a higher contrast than less important information.

When I look at the screenshots above, my eyes are primarily attracted to the large black “+” sign formed by the proximity of the top four tiles (in bright amber or blue) over the black background. The sharp edges of the borders attract my eyes. After that the bright tiles themselves attract my eyes. However the data that varies inside the tiles (presumably the important information), is rendered in a much lower contrast – white on a highly saturated light background.

Here’s my redesign of the front page, using the guidelines from the Science of Great UI session:


Here you can see I’m placing a higher emphasis on the actual data inside the tiles, and a lower emphasis on the tile background itself. Also, I’ve softened the edges of the tiles with a subtle gradient to lower their contrast against the black background. I’ve increased the size of the time – an important piece of information that is now easier to see. And since we’re showing the time, I added the day and date as well near the top. The final change was a redesign of the high-contrast button (the arrow pointing to the right).

Here are the original (on the left) and the redesign (on the right):


What do you think?

10 comment(s)

Yours is definitely better but the major "thing" it's missing that Apple achieves (always) is the elegance factor.  Microsoft has always been about data, not presentation.  I think a "thing" that looks good will sell far better than a thing that "works" good.

5 November, 2010
E. Brito

I definitely agree Neal.

The UI is probably the number one reason I'm not get one of these phones. I also think that these large border is a waste of space (which in such small screens is not a good thing).

With silverlight Microsoft does have a chance to combine the elegance of iPhone/iPad with the power of Windows/Data.

6 November, 2010
Alex Danvy

Microsoft Windows Phone 7 UI uses the "Metro" concept. Designers got their inspiration from the display signs, particularly metro signs.

Having 2 "flat" colors on metro signs is very common. Those are read by millions of people all around the world for decades.

Of course you could kid the thing saying that thousands of people get lost in the metro everyday :B

6 November, 2010
Geert Depickere

Technical question: is your new design a mock-up or is it really possible to tweak the WP7 UI?

As it is SL, I guess it should be possible to tweak the actual UI.

6 November, 2010
Geert Depickere

At first glance, your design looks better (looking at it as a screenshot on my bright laptop display).

However we should also take the environment into account (looking at the UI on a less bright (?) phone display outside in a bright (sunshine) environment...)... So in certain situations you would need more contrast.

I dimmed my laptop display and looked at the screenshots in a bright environment. Even then your new design looks better (to my surprise). Nice!

6 November, 2010
Jack Dolby

Mark, first off, the presentation was fantastic... excellent points with meaningful examples!

I had heard you discuss some of these points with Carl in the past, but this presentation "brought it home."

I agree with Neal (hey, Neal... I'm the old guy who sat in front of you in New London, 2005) as to Apple's attention to elegance. It will remain to be seen how successful Microsoft's entry will be. I've heard some good reviews, but the market is the final judge.

I think the improvements you presented above speak for themselves. Especially the size of the time and the inclusion of the day/date (I hate that my iPod only shows the time on the main screens.)

It would be interesting to compare two things with Microsoft's display and yours: visibility outdoors & battery life.

6 November, 2010
David Brillon

Neal, I think this start screen is much more elegant than a buch of icons like IOS.  Sorry but the lack of elegance is not applicable for WP7.

6 November, 2010

@Neal, if that was true, iMac would have taken over PC in corporate environments a long time ago. :)

6 November, 2010
Mark Miller (DevExpress)

Geert, it's just a mock-up. I have no idea if it's possible to change the UI as a third party. Also, I agree with you that a contrast adjustment is useful, if not necessary. Not only for bright environments but also when viewed by visually impaired users.

8 November, 2010
E. Brito

If we look at it from a different points of view, everybody is right on what tey are saying.

Let's just wait and see how customizable this UI will be because I need a phone were I can have a home screen with a big clock, the weather, my next appointments and my favorite shortcuts. Wall at once without have to scroll down, and HTC already accomplished that long time ago with the limitations of Win 6.1:

8 November, 2010

Please login or register to post comments.