Warning: If you aren’t a designer you’ll find this uninteresting. Move along. Move along.
I spent a nightmarish 1.5 hours getting the Nexus 4 yesterday–How could G blow that it in so many ways?– and a few optical illusion UI issues jumped out at me. Let’s see what you think.
I would recommend opening the two full-size screenshots linked below to see the true before and after. With this tumbr theme the size restriction forces me to use 500px wide vignettes which minimize the impact.
Original
Modified
And since the changes are subtle (but #4, below) here are the differences called out and the modified css.
There are really two underlying components of environmental psychology that are operative in these examples:
1. Weakened Edges
The edges of white content background boxes are being eroded by the diagonal white line page background texture. That type of fine parallel hatching can cause tons of optical illusion problems, though because of their light color and relatively low contrast they’re not overly problematic here.
The solution is adding a mid-tone grey border at just the right opacity. You can’t see the border, but the box is stronger and edges don’t bleed. It’s hard to tell in the vignettes, but on the full screen pngs linked above its a pretty striking difference.
2. Choppy Type
Due to the same type of problem caused by the tight diagonal lines on the background, the “SOLD OUT” looks blocky, almost as though the font smoothing was disabled or there was a faint dark drop-shadow. Because of the higher contrast of the white diagonal on the dark background, as compared to the previous example, in this instance the diagonals cause the dark background to read as lines that erode the type. Compare the bold “SOLD OUT” to the bold “More options” below it. The original hardly looks bold at all (though this is also partly due to 13px vs 14px font size).
To fix this I added 3 drop-shadows of varying tones and opacities.
3. Slumping Title
The “Nexus 4” title should be vertically centered, but it isn’t. Actually it is, it just doesn’t look like it, instead it looks slightly lower. It’s subtle but on some level people will have a sense that it’s somehow “wrong”.
The cause is the thin dark blue bar on top of the main blue title bar. Even though the “Nexus 4”, is perfectly centered in the original, the addition of that thin dark blue bar unbalances the lower bar. Since they are so similar in hue and shade their shared edge actually bleeds together, making the lower bar seem taller. You also detect the bleed in that the thin dark blue bar almost looks like a drop shadow from the menu bar, doesn’t it? If you don’t look directly at it that edge looks like a gradient.
The dark bar is a nice touch though, so we don’t want to get rid of it. Instead I just shifted the “Nexus 4” title up a few pixels, changing the balanced 15px-15px into 13px-17px. NOW it looks centered in the main blue bar, and doesn’t look like it’s weakly slipping down the page.
4. We Get it With the Lines Already
Ok, this one isn’t that much of an optical illusion issue. Yes, the white diagonals are eating away at the most hierarchically important part of the page which could be fixed by layering some text shadows like we did before, but in this case the better solution is to just lose the lines.
Yes, we get that the gDevices are high tech, and edgy, and you’re intentionally thumbing your nose at the skeuomorphic fruit-bois, but in this case just be simple and bold. You don’t need that extra edginess, the slight bit of added interest is outweighed by the way it weakens the title of your flagship products. Androids UI is bold and edgy because of it’s stark modernism. You’re not selling the new Droid (yet). This is how Google makes a phone. Clean, simple, everything just works the way you want it.