May 18, 2011

Apple iPad Page’s Jarring UI

Apple consistently delivers a beautiful UI for all its products. The fonts, colors, layout, placement are all optimized and deliver an attractive, pleasing look. Therefore it was a surprise to see Apple iPad page’s jarring UI, where the UI elements clash with each other and make the webpage less attractive than it could have been.

iPad on IE

First, take a look at iPad page using different devices and browsers. The page looks different in each device/browser combination – good on some, bad on others. On a PC, surprisingly, the page looks the best on Internet Explorer, followed by on Safari. The least attractive display of this page was on Chrome. Perhaps it was the browsers not rendering the page correctly but regardless, for the user, the webpage did not look good.

Then, take a look at one of the text panels on the page

The Title (All-new design) is in a black, bold, medium font.
The Info (Less in your hands …) is in a black, normal, medium font.
Details (iPad is now 33 percent …) is in a black, normal, small font

Unfortunately, it is hard to distinguish the elements, the text all looks about the same creating a jumbled mess. 

A choice of different colored fonts would have made each element stand out. Black for the Title, dark-grey for Info, light-grey for the details.

Or, take a look at the iPad landing page.

iPad 2 in large black-grey font stands out, Good!
Starting at $499 in small grey font goes in the background, Good!
But the black text in the middle in between the two produces a jarring effect, Bad!  This jarring effect is magnified on PC/Safari, PC/Chrome combinations.

Inconsistencies and jarring effects such as the above are across many of the top-level pages.

Hopefully, Apple keeps producing more webpages with beautiful UI and fewer webpages with jarring effects such as the above.