By DelvarWorld
Monday, 7. September 2009, 22:34:01
Dragonfly UI confusing and not-intuitive
Dragonfly is the most confusing web debugging toolbar I've used, and that's entirely due to the fact that it's littered with meaningless icons. I have no idea what any of the icons mean or what they do. There are tooltips but I don't want to have to hunt and peck for what I'm looking for. I want to control the application, not be controlled by it.I propose an example of the Firebug icon model. In the process of updating they originally had simply the word "inspect" to activate the DOM inspector. In the beta releases they "upgraded" it to a flashlight. They realized this was a bad design move and now it's a mouse with a blue box. But this is one of the only sparing places an icon is used. Why was it a bad design move? Because not only did users have to learn what "inspect" meant, but they had to remember that a flashlight meant inspect.
Icons essentially double the amount of work a user has to do to use an application, because we have to understand the function the icon performs, then we have to understand that a random symbol is associated with that function. The icons in Opera Dragonfly are confusing at best. A lightening bolt? "<!>"? "\s"? Whatever the heck the two buttons above the styles area are supposed to be? If you're a designer and you're having a hard time coming up with a logical symbol for an icon, then it almost definitely shouldn't be put into an icon.
Part of the problem is it seems like you're trying to put every single piece of functionality into an icon bar, when in reality it should be broken out into more logical places. Consider a view dropdown for showing / hiding things in the DOM tree. Consider moving things like "update DOM tree on node change" into an options dialog. This will free up the impressively cluttered toolbar space for adding text and making the interface logical and meaningful.