STUCK ON AMBER

Awesome Firefox for Tablet

Nice design for this Android tablet version of Firefox. I really like the landscape tab interface, above.

Google+ Innovative (and Fun) Feedback Feature

 

Click Highlight. Select all the page zones on which you want to report an issue (the word 'Public' in my example above).

Click Black out. Select all the elements you don't want Google to see. They're covered with black blocks.

Describe the problem. Preview. Submit!

Straightforward Help (It Will Never Work, Episode 1)

We spend so much time striving to design perfectly self-explanatory interfaces. Instructions seem to get old-fashioned nowadays. Probably because we know nobody likes to read text on a UI anymore; everything should flow like magic. 

This application decides not to care, and provides all written instructions at first launch; bang! But that works fine, because the style is daring to the extreme and catches your attention efficiently. 

It will never work, they said? Perhaps 'poor' ideas like that should always be tried if that's cheap to do. We may have good surprises and save a lot of time.

 

Terrible Calendar Design

So when is that dentist appointment, Mr Outlook? 19th or 26th?

Top feature expected from a calendar: show me clearly what occurs when.

Of course you could argue "obvious, events are hanged just right under their date", which puts my dentist appointment on the 19th.

But consider the case where you want to add an event to an empty day. By selecting the white cell, are you 100% sure the upper label applies to it, rather that the lower one? Same problem with days full of events. It would help to make very clear which label comes with which cell, through a better visual association.

 

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

Designing Pop-up Messages the Right Way

We don't really read them, do we? We just want to get them out of the way. I think Cancel/Shut Down is always better than No/Yes, which forces me to read what the question is about. Of course, in an extreme case like "Cancel this reservation?", it's getting complicated... that might be the exception, fair enough.

I would even shorten the title to a more economic "Shut down your computer?". The first part "Are you sure you want to" is noise. It's not friendly sugar. As to "Now", it's pretty implicit. 

You Don't Mess with the Convention (Episode 1)

When there is a well established design convention, there is something worse than drifting away from it: you can conflict with it. Let's look at an example.

Web browsers popularized the rule that page navigation controls should be located at the top-left corner of the window. This has been adopted since then by file explorers, the iPhone UI, etc. If you support some kind of page navigation in your application, that's a good idea to follow this convention if possible, because this is where people will look for the controls, instinctively.

What iTunes does is particularly deceptive and naughty: at the place you're looking for the page navigation controls, you will find buttons that strongly resemble them, but the damn commands are for songs, not pages! 

And although i DO know the problem, today I still frequently click Previous Track by mistake, when I just mean to go back to the All Artists view. The music stops, and I'm stuck on the same page... It happens often because I usually don't use my brain when I want to perform something as simple as navigating back. Today, it's something we do all the time, the same way (top-left corner).

Imagine that tomorrow, you suddenly had to turn anti-clockwise to screw. Even if you know the new rule, it's likely that you'll still be trying to screw clockwise for some months. Or imagine yourself cutting your hair in the neck, using a mirror: you know you have to move left to go to the right and vice-versa, but I'm sure you noticed how insufficient this knowledge is to make you feel confident. I guess the brain just doesn't get why left to right suddenly becomes right to left.

When looking at the screw and the screwdriver, or in the mirror, everything looks standard until you take action. Nothing suggests "Hey, be careful, it's not as usual". So if you don't follow a convention for some reason, at least make sure it doesn't seem that you do!

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)

 

 

 

Application Launch: Resume or Reset?

On a smartphone, when you start an application, the usual behaviour of the device is to open the application as you left it last time.

However, in some cases, resetting the state of the application is your best bet.

A camera software that prepares to shoot whenever it opens, regardless what I was doing last time (e.g. review the stored photos). It makes sense because if I start the camera it's almost always to take a new picture. To review existing pictures, I'd rather go directly to the media library.

A dictionary that sets ready for a new search whenever it opens, even if I was busy reading a definition last time I quit it. Relevant, because you can be quite sure that what I want is to do a new search.