Software Usability Thoughts: Some Advice For Movable Type
I’d like to talk a bit about usability as it intersects with software design. I’m motivated by three things:
- Firstly, my own attempts to be comprehensible and understandable, not only in this blog, but also in software whose design I participate in. Years ago, Steve Karkula provided me the phrase “design from interface” while doing due diligence on Netect. It’s quite powerful, both as an approach, and as wordsmithing to describe the approach. Start with customer stories, and design an interface that helps them accomplish goals. Everything else, everything else, everything else flows from that: Technical architecture, database design, market approach. Screen mock-ups become a powerful tool for interacting with prospects, and communicating stories about the intended software product. (I’d love to be able to talk more about some of the recent ways I’ve used this.)
- Secondly, I’m motivated by Tim Bray’s post “Adium is the Future.” His discussion starts with beauty, which is deeply true. A new bit of personal software has maybe 15 seconds to live up to the promise that causes you to try it. If the promise is sufficient, you might work through ugliness. Attention to beauty is a declaration that the creators care enough to sweat the details.
- Finally, I’m motivated by a job description sent to me by the lovely and talented Lisa, who helps with the technical end of wrangling the Movable Type software that acts as a facilitator for bringing our thoughts to you. As part of that, Lisa also listens to me rant about usability issues with a focus usually reserved for co-workers and customers. She sent me a link to Six Apart’s User Interface Positions. In reading the job description, this is very clearly an engineering job, not a design job.
Now, its entirely possible that Six Apart has employees already who will address what I’m about to say, and that they anticipate the need for multiple engineers who will implement something like what I’m about to talk about. Now, let me say that the only reason that I don’t go and either take these jobs, or hit someone with a crowbar is that between MarsEdit and Lisa, I rarely need to interact with the Movable Type UI.
The remainder of this post is an extended critique of a single screen of that user interface. If you design software, or think about its use, you may well get something out of it.
(You can click for a larger, 844×599, 250k version. I can’t figure out how to have the image expand in the extended entry, so you get to see it twice. Heck. It re-enforces the point.)
The first thing to note is that there are 11 stacked layers of controls (numbered red boxes), plus a twelfth, which, because of its consistent presentation stacks 15 controls and 4 headers into a logical grouping which I see as one thing. The green lines mark some of the vertical alignments (more on that below.) A good number of these are logically collapsable, both at the widget and the vertical stacking layer. Take, for example 5, 6 and 7. What is the difference between a tab and the “quickfilter?” Why not have a tab for unpublished and the “filter? Why do some of those links take me to new pages, others redraw the page, and yet others require a (single item) dropdown and then I press go? Why is display options in layer 11? Don’t I want to see that with the other controls? And why does it display using yet another set of widgets?
Even within the 11 layers of controls, there is minimal vertical gridding. I drew 12 lines, and could have drawn more, but after drawing 12, I felt that a proper enumeration would be visually cluttered, and may be an artifact of cross-browser display issues. I don’t want to claim that Six Apart should be solving all of those on every browser. However, putting your controls in a grid makes them easier to notice. I am regularly surprised to find controls on a page.
The lack of consistency between user interface elements is another major issue. There are at least four types of links: Ones that take you to a new page, ones that redraw the content of page you’re on with more or less detail (AJAX style), ones that cause controls to appear or disappear, and finally, ones that pop up a dialog asking you to confirm things. (There is no consistency about what types of things that I’ve learned about what gets a dialog box confirmation versus a second screen confirmation. I prefer additional screens with more detail for confirmation.)
The Edit Comments/Edit Trackback pages (eg, “mt.cgi?__mode=view&_type=comment”) are generally much better done. Things line up in a useful and compact way. (I am here tempted to comment on some features I’d like. For example, I’d love links that let me edit those scores, and also ways to directly act on say an email or URL, like mass deleting them. A column of “Delete all” buttons would be nice. But such suggestions are, as I’ll explain, part of the problem.)
The site’s CSS re-maps my keyboard, so control-F (which moves forward one character in most every Mac app) selects the find box. There is no way I’ve learned to turn this off.
There’s a valid response to some of this, which is that with more use, I would learn the application better. That is both correct, in that I would, and disdainful, in that the application should invite me to learn it, not constantly surprise me.
What all of this says to me is that there are lots of interface engineers, each diligently implementing useful features with insufficient co-ordiation or usability testing. Thus, my suggestions above about the comments pages would lead to them being more confusing and cluttered. I have little doubt that many good suggestions and a desire to improve things lead to the state of the UI as it is today. A designer whose responsibility was usability could create a master plan with a grid of “these control types go here” style manual. (Later, they might address some of the every-last-little-element is its own element, and your CSS needs to balloon to handle them all.)
I don’t know if Six Apart has a designer. If they do, that person is now either quite upset at me, or will take this in the semi-constructive spirit in which it is offered. I hope it’s the latter. Since switching to a Mac, I’ve become a bigot for beautiful software. There’s lots of it out there, and it engenders amazing loyalty, great feedback, and powerful emotions on the part of your customers. It is worth a few barbs and a risk of hurt feelings as we try to build loyal customer bases.
The only thing that’s less appreciated than a security consultant is a usability consultant.
WIth that said, I’m happy to give you some references on HCI. Then you can get really, really upset at most software on the market today.
I’m still using the older version of MT on my blog because it’s easier.
What’s your short list of Mac apps that you consider beautiful? =)