The original discussion about design happened years ago, during the redesign of the Macromedia website. We had decided to show hyperlinks by using a light blue background color on hover. This is pretty common now, but back then, no one was really doing this. I was wondering why we were using this method of displaying hyperlinks, and we got into a discussion about the philosophy of design. It made me realize that I was looking at things from the usability angle and he was looking at things from a different angle.

The usability angle and the design angle

Back in the 80s, I was drawn to the mac because of the philosophy around usability. I did software projects on the mac and devoured the Inside Macintosh books. I read the human interface guidelines and I thought about usability. I took this perspective with me as I worked on projects like Dreamweaver, Contribute, and so on.

When you look at interfaces from the usability angle, you think about software from a purely functional perspective. Does the customer understand how to use the thing? Does the software do what they want it to do? In a sense, you get the sense that for any usability problem, there is a “perfect” answer out there somewhere for the most usable design, and that our job is to strive toward that “perfect” answer.

Meanwhile, Michael was looking at things from the design perspective. Usability is one of the considerations in design, but it’s not the only consideration. Great designs are more like alchemy than science. Think about the designs of people like Saul Bass, Paul Rand, and Ray and Charles Eames. Their designs take a stand. They express a point of view. They evoke emotion.

The importance of taking a stand

The point of “taking a stand” is not to be needlessly different or to throw out conventional thought. In fact, designs that are needlessly controversial tend to fail, and great designs usually build on conventional wisdom (grid layouts, etc). The important thing, in my mind, is to have confidence in following your ideas and to express them in the fullest. Designs that aim to avoid controversy end up being watered down, “lowest common denominator” designs. In order to push designs forward, you need to take a stand and be prepared to face the naysayers.

Recent design controversies: Adobe CS icons and MTV.com

During the last few months, I’ve been following a few design controversies. The first controversy is around the CS3 icons. Some people love them, while others hate them. I personally love them. The more I look at them, the more I like them.

Before, I could never remember the difference between the hexagon shape and the weird one with the feather. Now, I know what everything is. Not only that, I love the saturated colors. Splash screens tend to be mostly grey or white, with some icons and text. I love the big block of saturated color I get when I launch the new apps.

Whether you like the new branding or hate it, I’m sure you can see that the new branding system has a thought process behind it with a definite point of view. I don’t think you’ll see the designers backing down from their point of view on this one.

Another interesting case study is MTV.com. They launched an all Flash site called MTV Overdrive that caused considerable controversy. Some of the concerns may have been valid (too slow to load, too much stuff going on), while others were just reactionary (Flash sites are stupid, etc). I personally thought this was a good design direction for MTV, given who they are. The MTV site needs to be dynamic, focused on video, and willing to push the envelope.

I learned, via Ryan Stewart, that MTV changed their site back to HTML. You can read about the reasoning and see the comments at the MTV blog.

Now I don’t have any insight into what happened backstage at MTV, and perhaps there were very good reasons for switching back, but from my perspective, it looks like they are not helping themselves any by flip-flopping back and forth. If you read the comment thread, you will see that there are lots of angry people (again).

So what’s the lesson here? Is it that Flash is better than HTML? Or vice versa? I don’t think so. I think the lesson is that when you go for a gutsy design, you need to really believe in it and fortify yourself to see it through. MTV went for a gutsy design with MTV Overdrive. There were some issues (it was overwhelming for some, and slow for others), and from my outsider’s perspective, it seems like they should have kept iterating on it. Again, there may have been very good reasons for the switch, but that’s the way I see it.

Does that mean I have to stop listening?

Does “taking a stand” mean not listening to customers? Not at all. In the end, if people don’t buy into a design, then the design isn’t working. The advice to “take a stand” may seem like a directive to stop caring about what customers want, but in an odd way, I feel like the advice to “take a stand” is the paradoxical answer to how to reach customers in a deeper, more authentic way.

To me, it’s a bit like the conundrum that politicians face. People say they want leaders who are “authentic” and “know what they stand for”. At the same time, if the leader doesn’t follow the will of the people, the leader is “out of touch”.

It is important for politicians to listen to the people, but not at the expense of being who they are. In the final analysis, a politican who derives his/her opinions purely from polls is a politician who doesn’t stand for anything and can’t be trusted. In the same way, a design may require iteration based on feedback from customers, but not at the expense of being what it is.

So don’t be afraid to take a stand. But listen to your customers and be willing to iterate.

What I love about this application is that it opens your mind to what a Flex application can look like. It looks deceptively simple, but there are some interesting UI thoughts behind this app. One innovation is that the navigation area serves double duty as an editing bar, saving screen real estate. Another is that they have really paid attention to how you can get your work done without losing data. If you leave the app and come back, you will end up in the same state, editing the same document. If you go into “creative tools” mode, you get multiple steps of undo.

I love seeing this kind of experimentation with Flex UI. Remember that HTML became what it is today after fifteen years of innovation. Flex 2 has been out for less than a year. These are still the early days. Those of us in the Flex community don’t yet know what this technology is capable of.

So I was playing around with the sliding drawer components recently, and it reminded me of two things: (1) Sometimes, good usability design is so subtle than you don’t notice it until it goes wrong, and (2) Fitts’ law is real, even though I’d previously dismissed it as a bit silly.

~

Good usability is sometimes subtle

I remember reading an anecdote about the design of the chooser in the Mac OS. In those days, the chooser looked something like this:

The chooser dialog would come up instantaneously, but the list of printers would take some time to fill up, based on the speed of your network. What UI issues would you consider if you were to implement this? Your average UI programmer might not think twice about how to implement this, but there was some subtle thought put into how the programmers over at Apple thought about this problem.

Let’s say that a new printer needs to be inserted into the list above the portion that was visible. (alphabetically before dmca_laser1 in this case). In these cases, the scroll position would be adjusted so that the visible contents of the list would not move.

Sometimes, these subtle details matter.

Why go through the trouble? Well, if you were about to click on a printer, you don’t want to end up clicking on the wrong one.

Now, what happens if a printer needs to be inserted into the visible portion of the list? Whether you adjust the position of the scroll bar or not, some things on the screen are going to move.

What the Apple engineers did was to detect the position of the mouse and adjust the scroll position to make sure to that the item beneath the mouse did not move.

Tweaking the sliding drawers

In my first implementation of sliding drawers, there was a bug in which if a drawer was open when the mouse moved off the screen, the drawer would stay open.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 1: drawers stay open]

Someone commented on how they were annoyed by sliding drawers remaining open in Visual Studio, and this feedback rang true. What if you have important content on the screen that would be hidden by the drawer? What if the drawer opened up and stayed open every time you moved your mouse off the browser? The more I thought about it, the more it sounded like a problem.

As a result, I tweaked the sliding drawers to close once the mouse left the browser window. This resulted in the following. Try it out. Move your mouse to the edges of the browser to open the drawers. Be sure to un-maximize your browser window to witness the true horror. And pretend you are in a hurry and need to work fast.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 2: drawers close on exit]

Ack! Instead of being better, the drawers feel much, much worse. Why does this “improved” version feel so bad? The answer lies in Fitts’ law.

Fitts’ law

I’d always thought that Fitts’ law was a bit silly. I first became aware of it during the mac/windows flamewars on USENET, in which people claimed that Macs were superior because, among other things, the menubar was on the top of the screen, and thus easier to aim for with the mouse. While undoubtedly true, it always seemed like a weak argument (and at the time, I was a rabid “mac guy”). Was this the only leg that us mac guys had to stand on?

Fitts’ law says that bigger things are easier to reach with the mouse than smaller things, and the farther away the thing is, the more this matters. To which, you might say “duh”. In the case of the mac menubar, the argument was that because it was at the top edge of the screen, it was essentially inifinite in size; you can fling your mouse as far as you want upward and hit the menubar.

Because of my earlier bug, in which the drawers stay open when the mouse leaves the browser window, I essentially had an infinite hit region for the drawers to open. “Fixing” the bug made my hit region very difficult to navigate to with the mouse.

There are a variety of ways you could imagine fixing this, but I decided to restore the original behavior, and add a timer to close the drawer if the mouse stayed outside the browser window for more than one second. Like the chooser example above, it’s not something I would have thought to do ahead of time, but after trying it, it makes a huge difference. Check it out for yourself.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 3: drawers close on exit, based on a timer]

I think my head is going to explode.

http://coenraets.com/viewarticle.jsp?articleId=100

1. The layout syntax uses the new beta 2 syntax, which is not out yet.
2. The notes cover a bit less material than the slides. That’s because the notes were finalized before the slides were, in order to get them printed on paper for conference attendees. If I have time, I may extend the notes but with so much going on, I am not sure I will have time to do this.

[Slides - ppt] [Slides - pdf]
[Speaker notes - doc] [Speaker notes - pdf]

• Huge attendance — I don’t have exact numbers but I hear it was ~1400?
• Loved Erik Natzke’s talk. Very inspirational. Wish I’d been able to see Grant’s talk as well, but I had a meeting.
• Talked to lots of people about Flex. I was pleasantly surprised by the enthusiasm.
• I had a few people say to me, “I don’t get it.. is Flex an easier version of Flash?” This is obviously not what Flex is, and I think this means we need to be clearer in how we talk about it. During the keynote, I emphasized how easy it was to put an application together, so I can see how you could walk away with that impression.
• Had an interesting talk with Moses Gunesch about tweens. I wish I’d been able to stay to hear his session.
• Found out what shots of Southern Comfort and lime taste like (thanks, I think, Chafic)
• Really enjoyed David Schroeder’s talk about sound design. Made me think about sound in a whole new way.

All in all, a great experience. I’ll post notes and slides soon.

Meanwhile, text fields that offer completion hints are starting to become standard for Flex and AJAX applications. Typicaly, these are used to let you quickly pick things that you’ve already typed into the box. They are not used for picking, say, a country from a list of countries.

I believe text input fields that offer hints for possible completions should be used instead of combo boxes 95% of the time. Down with combo boxes!

1) When you want to use the mouse, it is just as simple.
2) When you want to use the keyboard, it gives you better feedback on what you have typed already.
3) It gives you an obvious affordance to “start over” when you’ve made a typo.
4) It gives you more immediate feedback.

Here is a relatively simple version of a text completion control for MXML. Unlike most versions of this type of control, this is also optimized for the above case: picking from a list of predefined strings.

[Sample removed. Please download the new version instead]

When you want to pick from a list of predefined strings, just supply the list of all strings as the dataProvider of the control (just like how ComboBox works), and set the “mustPick” flag to true.

Let me know what you think. Are there bugs? Do you think the heuristics are wrong? Is this a good idea in general?

P.S. I’ve also had to include some other random classes as part of this. I plan on officially distributing these classes and other classes once they are more baked.