User Interface Hierarchies Rant

image

There's the picture of the iPod's user interface again. I just think it's so clear, consistent and easy to understand and use by just about everyone. My Mom could easily navigate that menuing system. Apple could have put buttons and drop downs and a whole load of crap on that UI, but they didn't. They kept it insanely clean and easy to use. I think this is the nicest gadget interface there is.

I'm looking at user interfaces more recently. Online, on my desktop and on my gadgets and I'm taken aback by their complexity. But I've had an epiphany about their underlying structure that I wanted to try to express here. Well, it's less of a sudden realization... more of a growing awareness. I'm trying to document a mobile UI right now and realizing that every time I point out a feature, I'm using a hierarchical method of writing about where it is even though the interface itself isn't really organized that way (unlike the iPod). I don't say "Click on the menu button, then use the joystick to move down and highlight the Tools folder and press the center button in to open, then highlight the settings icon and open that, now move down the list of options and select Connections, now open Access points, now click on the options button (the left button) and scroll down the menu to New Access Point..., etc." No. Instead I use a hierarchical shortcut like: Menu -> Tools -> Settings -> Connection -> Access Points -> Options -> New Access Point. I'm assuming *a lot* about the user in order to write that shortcut, but that's because of the UI I'm documenting. On an iPod that would both be useful and specific.

This is what got me thinking. Is there a reason for the icons and the buttons and the menus and the tabs and the list boxes and all the other GUI crap that we have to deal with both on a computer and increasingly on our mobile devices as well? I honestly don't know. I personally think less is more when it comes to user interface design. When I hear Microsoft and Macromedia talk about Rich Internet Applications (RIAs) with WAML and MXML I cringe a little because it probably just means a more bewildering array of widgets which have lost their analogies years ago and now just trap data and make it more and more impossible for people to learn the UIs. The WIMP interface does not lend itself to hierarchies well, yet every year that we live with computers we're all realizing that's how inforation is naturally organized.

Maybe it's just me, but I think in hierarchies and outlines. Even if I don't always use my outliner for everything, I still organize my documents like that, and the text within those documents are usually indented as well. Maybe it's because I'm a programmer. Classes and methods and routines are naturally hierarchical. XML is also hierarchical and I think XML is the be-all, end-all of information formatting. I'd *love* to live in XML if I could (and think that soon I will be able to do just that).

Hierarchies aren't perfect. For example, here's a problem when using my outliner and in my writing always end up running into: There can be more than one way to arrive at a piece of information. You can say Year -> Seasons -> Winter -> December -> Holidays -> Christmas. Or you can say Year -> Months -> December -> Days Off -> Christmas. Right? It'd be nice to have a UI option to include links anywhere on my computer so I could use them in situations like this to "skip" between hierarchies. The Unix guys did this god knows how many years ago with symbolic links in the file system and from experience they're great, but also from experience there's no better way to get lost within a hierarchy than drilling into location and then finding out that the piece of data you're manipulating actually "lives" somewhere else. That's the problem I think, is that data - at the end - needs to live somewhere and that tacking on additional hiearchies can make that confusing to the user. But it's not like they're not confused already. How many ways can you think of right now to open up a Word document on your computer? Those different paths to the same piece of data is what - in my opinion - causes so many problems in computers. This is what makes web data so great - most of the time there's only one way to do something and only a limited amount of widgets in which to do it with. This is a good thing.

Even what can be considered free-form writing is actually Documents -> Paragraphs -> Sentences -> Words. Are you a Windows XP user? Try this: Start -> Settings -> Control Panel -> System -> Advanced -> Environment Variables -> System Variables -> New. Now did you find what I was pointing out? Probably. However, look at all the User Interface Crap you had to wade through to get there! Menus, buttons, windows, tabs, sections, etc. It's a hierarchy, but instead of being a clean and clear User Interface to get there like an iPod, it's a confusing array of widgets thrown down onto Windows Forms by geeks with *no* respect for the person who's going to have to both learn to use and use that window.

Why does every dialog box have to be designed differently? Why does every application have to look different? Why do menu options bring up settings windows with tabs, each one having their own look and feel that users have to first analyze then memorize in order to use correctly? Apple popularized the WIMP UI 20 years ago. Great. Now what? Has anyone taken a look and decided whether it was a good thing or not? Why is the height of a new of IDE a blank window and a bunch of widgets?

What's my point? That we need to do like Apple did with the iPod and review how our UIs work. We need less widgets, not more. We need more than simplicity, we need consistency. And since *all* data is a hierarchy, using that as a base for all UI elements would be a good thing. Teach a newbie: "This is how a hierarchy works. Now, anytime you need to find or edit information - whether it's the MP3 you want to play or the settings on your phone, now you'll know how."

Here's an open secret about how applications are designed: They aren't. A programmer gets his IDE or text editor out with a blank screen. He thinks "which popular program has done something similar to what I need to do today?" And he goes and sorta copies that application's UI. Then, of course, he needs to tweak it a bit for his own app. A drop-down here, a text box there. An extra button with an extra dialog. A tab or two and some interesting new widgets just because they're new. Then he gives that to the testers or the clients who suggest moving this button over there or grouping this and that together and generally making the best of the original mess, but not really doing anything about it. But hell, everyone's employed so who cares, right? And it's not like anyone is doing anything *wrong*. That's the way it's been done for 20 years.

It doesn't make sense any more. Now that we're all comfortable with the idea of computers and the mouse, we don't need "buttons" and "gauges" and "files" and "tabs" and all that crap that are analogies to real things. They're not real things - it's just data.

Okay, end rant. Back to work.

-Russ

< Previous         Next >