Artificial Horizon

Articles and links about the design process
by Thibaut Sailly

This post is a comment to the Stevens Creek TripLog/1040 UI design discussion happening on John Gruber's Flickr entry and Ryan Singer's SVN entry.

Sreengrab from Gruber's Flickr stream

The first thought I had about this iPhone app's screenshot was, as many : "hammer, please".
But it's not pure villainy, just excessive sensitivity, and there are some logical facts backing this gut feeling, one of them being : this design mixes 2D and 3D features without any meaningful intentions regarding this dichotomy. It even seems to have no understanding of this dichotomy at all, which is even worse. But the beautiful thing about a mess is that you can only do better. Here are some comments which will hopefully help in this sense.

Pretty much every OSX and Apple apps UIs share this common analogy : they don't display a rendering of a flat, 2D, printed surface, but it shows an arrangement of items that can be described with height, material and texture proprieties. All these simulated 3D objects react to a single (or a single set of) light source, consistently from one screen to another. Every Apple designed iPhone app lives under a softbox giving this fat glossy reflection on top of the iTunes/AppStore/Sms/... buttons, and a more diffuse gradient on top of the Notes button, for example. You can visit every apps on your mac and imagine how it would look like if you turned these lights off. Not that it would turn you on, but it goes a long way to express how consistent the MacOSX UI is.

The problem with the TripLog app screen is that it doesn't respect this analogy at all.
— it has a plain flat background that doesn't react to this light source the same way the numbers selector does : it's like they live in totally different lighting situations, instead of being in the same "light space", the app screen, as they should be.
— The "plus" and "Edit" buttons are treated as if they were made of a 3mm high block of carefully polished transparent plexiglass sitting on this words-fail-me-but-it's-ok blue background. The problem is, they don't cast any shadow on the surface bellow them as they should (the "Next" arrow button in the lower right corner does it rightly though).
— The white buttons in the lower part are totally flat, sheet of paper like. And that's ok too, totally cool. The confusing thing about them is not this treatment, it's the table bellow them which is too much alike: font, text size, background color, border, and 2D, same level (or height) as the background surface.

Even without considering the placement and alignment of this app's UI elements, discomfort is felt because there is no or little consistency in the way these objects are rendered : we are given contradictory informations about the space they are supposed to re-create, so we're having an uncomfortable time looking at this.

I'd say that for an iPhone app UI of this type to be ok and well integrated with the Touch OS, you should be able to give :
— a perspective view of your UI,
— CAD drawings of all the elements (buttons, text fields,...),
— a bill of materials,
— and make sure the virtual light conditions are consistent in all the app's screens.

Make sure you envisioned every aspect of the virtual 3D object your UI : it's a way to be help your user have a natural understanding of it. It also can be a great source of inspiration to think of materials and textures, and how they react to the light source you choose. Apple choose glossy surfaces of recessed rounded rectangle shapes under a single softbox, but there are many many more options available to be explored.

☛  Table of contents

Copyright Thibaut Sailly · Subscribe to the feed · Powered by MovableType