Dynamic Flash

A few months ago I picked up a copy of About Face 2.0 on a whim, and boy was it an eye-opener.

One of the tenets of user interface design that I came away with after reading this book was that UI design is not just about how the things look, it’s also about how they behave. If two things look similar but behaving in different ways then you’re going to end up confusing your users.

This applies equally in the real world too, as anyone who has tried to pull the handle on a ‘push’ only door will tell you.

One example given was that you shouldn’t make something look like a native OS widget if it isn’t going to be have in the same way. I now cringe whenever I see examples of Flash/ UI widgets being themed to look like native Microsoft Windows or Mac OS X widgets.

The underlying ideas is that the UI will be more user-friendly because it looks like all the other programs that the user interacts with every day. Speaking from a purely visual standpoint there is nothing wrong with this approach. Unfortunately, as soon as the user tries to interact with the component they’ll find that they don’t always behave in the way they expect them to. Far from making your user feel at home, you’ve just confused them.

The first thing I tried to do on this Mac OS X Flex Theme example was drag the windows into a more comfortable location. I got confused when they didn’t move. Next I tried out the combobox only to find that it popped up a Windows-style list rather than a Mac-style one. I fumbled about a bit more before finally giving up. It’s an interesting example of how much you can customise the widgets, but I would advise never using these widgets in a real-world application.

That’s not to say that you shouldn’t skin your widgets at all; by all means make them look different and fit the design of the rest of the application. However, if you cannot duplicate the functionality of native OS widgets then make sure they look different enough that the user will understand that they are different. And if something isn’t a widget at all, make sure it doesn’t look like one!

The human brain is geared up to recognise patterns. You’re not reading the text on this page letter-by-letter. Instead your brain is recognising the shape of the words made by the pattern of the characters. Our brains treat UI widgets in the same way. If something has a title bar, a drop shadow and contains some content then most people will automatically recognise it as a window and interact with it as such. If it isn’t a window, your users are going to be seriously confused when they can’t drag it around the screen. The same goes for the pop-out look of buttons or underlined text on a web page - people will try and click them.

I suggest that anyone involved with UI design for any purpose (even forms on web pages) pick up a copy of About Face 2.0 and read it cover to cover. It covers the whole area of interaction design for web and desktop applications, and will make the users of your applications love you. Well, maybe not, but they won’t hate you, which is a start.