Science of Great UI & Windows Phone 7

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?

Free DevExpress Products - Get Your Copy Today