But that’s not what I’m here to write about today.

Well, in a way, it is what I’m writing about.  Because what we’re talking about here is usability— user interfaces that are easy and enjoyable to interact with are inherently more usable than ones that aren’t.  I might think LiveWhale’s interface is more usable than that of another CMS, but that’s not because that CMS isn’t capable of being used by human beings; on the contrary, top commercial and open source CMSs are used every day by plenty of people without complaint.  I think our interface invites you to use it, which to me is the ideal of usability.  Anyway, as it happens, one of the primary books on Web usability happens to have the worst, most foolish title of any book on Web development anywhere.*

Steve Krug’s Don’t Make Me Think espouses a particular philosophy of Web usability that makes perfect sense. You shouldn’t have to look at a page and sit there thinking about what to click on; the information hierarchy of a page ought to be self-evident. Every day I encounter Web sites that make me think in ways I shouldn’t have to.  Where is the search box?  How do I find directions to your campus?  What’s going on this week?  Often the competing interests at work in a Web design tend to crowd out the simple big picture observations, and the things that ought to be easy get lost.  It’s true, as Krug writes, that people don’t read Web pages, they scan them, and that’s why information hierarchy is so important.  Frankly, I agree with most of what Krug has to say in his book.

But that title!

My company designs Web sites for colleges and universities.  Usually the schools we work for hire us largely in an attempt to improve their sites’ outreach to prospective students; when we’re working on an Admissions site this is an obvious and explicit goal, but it’s almost always a general mission.

We have found, from years of experience, that prospects will become more attached to an institution if they find ways to make contact— let’s call it intellectual contact— with a school.  They fall in love with a book by an alumni author, they meet with a faculty member, they have an interesting conversation on Facebook.  At some point in the process of getting to know a school, something clicks.  A connection is made.

(Obviously some students pick a school on less interesting criteria— its position on the US News list or the likelihood of a Fortune 500 job after graduation.  But we’re not talking about them.)

This process, above all, involves thinking. Constant, engaged, curious, obsessive thinking about a number of schools, the choice of which will have an enormous influence on the kind of person you’ll turn out to be.

In our site designs we try to encourage this, and to create Web environments that repay close attention.  Sometimes this means putting an actual math problem on a math homepage— why not?  And sometimes it means detours, hidden doors, or easter egg-like features that you have to explore a bit to find, such as what happens when you click the motto (”Since 1840,” etc.) on the Southwestern University site, or the mouseovers on the Brown Admission Student Life page.  Building things like this makes our job interesting, it makes our clients (and their stakeholders in the know) feel special.  It’s fun for everyone involved.

But it does make you think. And invariably, at some design meeting or another, someone will ask, “Well, Steve Krug wrote this book, and doesn’t this design violate his main principle of usability?  I mean, that design definitely is making me think.”

I don’t think Steve Krug is opposed to Web designs that invite some intellectual engagement. Especially not for prospective college students, for Pete’s sake.  But the simplistic title of his book waters his argument, which I believe is a good one, down to its lowest common denominator.

I want the Internet of the future to be smarter, more engaging, better organized.  And I want it to make me think.  Otherwise the inevitable availability of Web content on every available surface in our lives will turn us into dull, unfeeling automatons.  (Some people would argue it’s happening already.)  Without an Internet that makes us think from time to time, we’ll end up glued to our chairs, waiting patiently for spoon-fed information from our Internet masters.

And nobody wants that.  Not even Steve Krug.

I also like the idea of “communicate with me”, or “tell me what is going on here”.  This seems like a more personal connection between designer and audience—or product and user—and maybe it’s just me, but I actually really appreciate it when someone teaches me something new.

Enter the idea of communicating in plain English. Wow, I know, what a concept!  If I’ve learned anything in my time at White Whale, it is that clear and effective communication is the key to successful sites and applications—be it through the interface, the content, etcetera (though hopefully all of the above).  Take the first time I used LiveWhale (our fancy new approach to content management) for example.  We had all been fairly busy with client work through a bulk of its development, so outside of a few glances-over-the-shoulder and catching snippets of development conversation here and there, I was basically ignorant of how the thing even worked until it was in beta form.  Rather than walking me through the basics of the app, the LW developers just gave me a login and told me to poke around.  This of course is a form of user testing—albeit on a subject with a more critical eye and ellevated skill level.  Fascinatingly enough, the system was really intuitive, and required no real explanation at all.  This is a product of good interface design and clear communication—every button tells you what it is going to do, every input field is clearly marked, and things are laid out in a logical fashion.  Obviously, I was thinking throughout the entirety of my perusal of the app—as I was learning a new method of doing something—and it was easy to figure out the LW way of content management due to its level of explicit communication.  This follows the principles of “don’t get in my way”, “communicating in plain English”, and “tell me what is going on here”, but never “don’t make me think”.

On the topic of communicating in plain English, I ran across some amazingly easy to understand explanatory videos this past weekend during my usual relaxing passtime of internet perusal.  Stumbling upon these videos is what really sparked this tangent, as I found them so clear and effective that virtually anyone above the age of ten with at least a tiny bit of internet familiarity should be able to understand them without fail—and what is more, rather than being intimidating explanations that answer questions with questions, they are actually really entertaining and straight forward.  No one likes to feel ignorant, or left out because they can’t understand how to operate something that thousands of other people have no problem with.  It would be difficult at this point for someone to step forward and say like, “Hey man, what is this crazy WordPress thing I keep hearing about?”  Or, “What the hell is MySpace, and why is everyone of all shapes and sizes freaking out about it?”  Sure, you can get all of that from Google—or Wikipedia or something—but there is still a certain entry level base of knowledge required for even those explanations, and before you know it, you are left with tons of other questions that need answering—such as “what is a blog?”, or “rss?”  Right, it gets overwhelming when you get your questions answered with more questions, and pretty soon you’ve dropped an hour just trying to figure out what WordPress even does, let alone learning how to set it up and all of that.  Obviously, we are all well ahead of the curve here—and are pretty technically-minded—but I could just imagine my poor mom (an ex-computer programmer mind you, but not so internet savvy) trying to figure all of this out, getting intimidated and frustrated with the whole thing, and eventually resigning to be left in the dark.  Enter Common Craft and their awesome The Common Craft Show video series that even my dear mother could understand (they don’t just focus on web technologies either, there are also videos on how the Presidential Election process works, how to fight off zombies, etc—you know, important stuff).

But at the risk of stealing some thunder from that announcement, I’d like to show off something that we’ve been spending a lot of time on:

This is the add-a-news-story page of LiveWhale, the CMS we’ve developed as an answer to problems posed in our infamous (among our clients, anyway) content management manifesto. In later posts I’ll go into some detail about specific interface choices we’ve made (a personal favorite is the flowchart behind attaching images to news stories), but for now I’ll talk about what we didn’t do.

One of the main problems with most enterprise content management solutions is their unapproachability. A simple task like a creation of a news item can be buried by layers of menus, technical jargon, and–let’s be honest–really ugly interfaces. It’s the type of interface that savvy users master through days or weeks of training and non-savvy users end up navigating by way of post-its on the side of their monitors. But you need those weeks to worry about everything else involved in your website launch; you need that space on the side of your monitor for pictures of your kids.

We set out to create an interface that minimizes the distance between what the user wants to accomplish and what she has to do. This gap is huge huge in most enterprise CMSes. Adding or editing a news story is a task that every staff member at your institution understands intuitively; why does it so often feel like piecemeal data entry?

Making the user click “Attach resource” when she wants to add an image creates a cognitive separation where one needn’t exist. So all of our instructions and labels are in plain English. Steps like having to enter the story body on one page and the contact info on another–or burying things in menus, or presenting disparate information as visually equal–create a similarly artificial distance. That’s why our news edit page looks almost like a published news page: we want the headline to jump out at you and the image to appear at reasonable size, and we want everything that appears on the frontend to appear here.

By minimizing this distance between the user’s goals and the user’s processes, we think we’ve made LiveWhale a snap to use regardless of where you fall on the scale of technical knowhow. One of these days we’ll give more of a detailed tour; but, in the meantime, let us know what you think.

Here’s the document.  We’d welcome any comments.

Kenyon College Usability Testing Protocol