Native-looking widgets in Flash
Friday, 02 December 2005A 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.
Interesting article. Some good points I feel, and some possibly
Campbell | Monday, 09 January 2006 | 11:10 amInteresting article. Some good points I feel, and some possibly over extended ones. Although I realise these are just your views I think themeing can be a positive. The widgets must behave in a similar fashion, but not to the exact….I seriously doubt most semi web savy users would be “confused when they didn’t move.” [in the context of the osx flex them windows] but merely pass over the fact and accept it.
I think its definately an expanding area but The web UI is about to undergo a huge change…and it will probably take alot of cues from operating systems but with a “web spin”.
As always you have to know the rules before you break them so I will hunt down this book and give it a read :o)
Only my thoughts though! :o)
[...] are no more or less fast, fluid or native
Dynamic Flash » The problem with SproutCore | Monday, 14 July 2008 | 10:21 am[...] are no more or less fast, fluid or native than Flash or Flex components. You can make either one look like native operating system controls but that doesn’t mean you should, and speed of execution and layout is down the to the [...]