STUCK ON AMBER

iPhone Message Composer (Episode 2)

When I first saw the iPhone's message composer, on a friend's device, I was working on the design of a similar feature, and a detail struck me: the message bubbles on the left side of the screen were horizontally aligned with (and exactly as wide as) the input field at the bottom.

I said to myself: "What a smart and simple way to indicate the origin of messages!". The bubbles on the left obviously were the messages sent by me to Maria, and the ones on the right were the ones received from her. The alignment trick made it useless to indicate explicitly the sender name for every message. The visual association was the information.

Many months later, I realized it was not working this way. The observation I was so excited about was just a coincidence. I was disappointed. How could Apple get that close to such a nice concept by accident, and not take advantage of it?

By studying more carefully their design, I found that:

• the width of the bubble varies so as to best fit the length of the contained message (a simple "Yes" is displayed in a very short bubble). Pure aesthetics consideration, it seems.

• the width of the input field varies too, because it depends on the width of the "Send" button that itself depends on the language of the interface. In French, it's "Envoyer", wider than "Send".

• if it took me such a long time to realize that my beloved design feature actually didn't exist, it proves that having it or not didn't make a big difference to me. 

 

More importantly: who cares who sent what?

Think about it: if I am Fabrice the user (rather than Fabrice the designer), who wrote what is supposed to be obvious to me because I know the history, the context of what happened.

Designers sometimes make wrong assumptions about what's necessary in the real life, because they fail to be the people. In the screenshots above, you have no way to know whether I'm the author of the messages in green or those in grey. But that's fine, because that's my conversation, not yours. So as long as I know, that's okay.

See also: iPhone Message Composer (Episode 1) in this blog

Design Tools on Touch Screen (My Finger Told Me...)

User interface designers usually work on desktop computers; they use tools like Omnigraffle, Visio, Adobe CS, or even Powerpoint to produce screen specifications and interaction flows.

A year ago, I had a chance to try Surface, the huge and innovative multi-touch table from Microsoft. I thought that would be fantastic to have UI design tools on a device like that. Imagine: just drag and drop interface components with your 10 fingers, assemble, resize and align them, swap two buttons in a spin gesture, in the most natural way.

I don't know if anyone made that for Surface, but there are some similar tools emerging for iPad and iPhone. I was much intrigued and tried a tool called Interface, for the iPhone (picture below).

Note: this product does not claim to be a design tool as such, just a handy application to quickly compose realistic screens directly on the device. However the test was enough to make obvious several issues that would apply to more sophisticated design products as well.

 

What I realised:

• Your finger - no offense - is too big: it hides the element you're manipulating, making adjustments harder. Just try to reposition the tiny information icon on the example shown above (bottom right). Also, the finger lacks accuracy for fine-grain operations. Some auto-snap functions help a bit, but it still feels like having to put a thread through the eye of the needle, you know what I mean.

• You need keyboard shortcuts: amazing how much you can get done thanks to them. Experienced users can invoke most of the controls instinctively, just by pressing a key combination. Hard to beat a method that is already at reflex level...

• You need space: the screen you design on must be larger than the screen you design for. Because you want your toolbars and building blocks library visible at all times around the working area. If you're not using keyboard shortcuts, you want to be able to spot your options in a second, in a toolbar at hand. Now if you are to design screen transitions (not just structure), then needless to say you need a LOT of space to manipulate and preview the whole diagram.

Now I'd like to see how a hybrid system would feel: it would let you do the high-level manipulation with the fingers (such as zoom in/out), and accurate things with a more traditional pointing device.

See also iPad versions of Interface (by Less Code) and Omnigraffle (by The Omni Group).

iPhone Message Composer (Episode 1)

 

 

 

Irresistible Details

  

Example of details that make a UI more compelling than another!

Page corners that really follow your finger. Bookshelves that flip to the bookstore side. The flip effect is common on iPhone, usually to reveal a settings screen; except that here, the view is THICK as real wooden shelves. Useless? I would have agreed, not long ago. But I must admit this is cool. Details like that give more presence to the application, and help you immerse in it. Simple feeling to get closer, to control better, that something's alive in there. And what's more, the pleasure of surprise.

So consider bringing a bit of the physical world to your interfaces, and keep some surprises for your users. Discovering cool yet unexpected things is always rewarding. However there are 2 things you don't want to compromise:

Workflow and concentration

You don't want to distract your user's attention to the extent that they lose focus on their task. In the iBooks example above, the page animation as well as the bookshelves effect do not hurt; this happens in less than a second and doesn't make the application harder to use.

Performance

Ensure it does not eat your whole budget in development. Ensure that it runs smooth and does not kill the device's battery.

No More Rocking

 

Hallelujah. The iPhone 4 comes with a flat back. Contrary to its predecessor, it's stable! That's more comfortable to type text on the corner of a table. That's possibly my preferred new feature, with the support of the Bluetooth external keyboard, of course. But I don't always bring the latter outside with me...

326 Pixels Per Inch

 

The screen of the new iPhone has 326 pixels per inch. That's more than what the human eye can detect at a distance of 25cm; apparently the limit is 300, beyond which dots become really too small. A first consequence is that anti-aliasing, the technique that fools your eye by artificially smoothing jagged edges, is probably no longer needed on this device. But more interestingly: the race is over. Phone manufacturers no longer have to compete for smaller pixels, ever.

This reminds me of the news on the radio, on May 15, 2005. The day before, helicopter manufacturer Eurocopter landed one of their babies on the highest point on the planet, the top of Mount Everest. They commented the exploit: "We're very proud of this world record. We're quite confident that nobody will do better than that in the near future".

Absolute records. Stuck on amber!

Making Clear Statements (iPhone Switches)

Two simple ways to make options settings easier to understand. Making clear explanatory text is not enough, it still has to be obvious what it's referring to. Look at the grey text on the following screenshots.

   

LEFT. Use of "Turn off to..." to make clear that the status described is not the current one, but what will happen if you switch. Better than something like "Voice search won't use motion sensing": won't use if I switch or if I change nothing? (Note that in this example, turning off the switch to enable motion sensing may not have been the simplest way to explain the action, but that's another issue, not my point here.)

RIGHT. Recall of the currently set option to make clear the description refers to that very value.

Announcing What's New

When launching a newly installed version of this application, the latter tells you briefly - just once - what's new. Simple and friendly, for those who don't bother to read the release notes on the App Store and directly commit all available updates.