Update: Jeff posted this to the SuperUser.com meta discussion to get feedback – check it out here: http://meta.stackoverflow.com/questions/27204/alternative-ask-page-layout.
I simply love reading Jeff Atwoods codinghorror.com – consistently good. They are having usability issues with the Ask A Question form over at superuser.com and Jeff’s post on the subject has resulted in an astonishing 270+ comment thus far – lots of opinions about what to do with individual pieces and parts to make it better. Unfortunately, none provide much of an all encompassing view of what could be done to make the form better and solve problems. So took my Coding Friday to do a cognitive walkthrough (something us Program Managers do quite often) and see if I could come up with 10 usability suggestions for the superuser.com development team. Spending just a couple of hours doing this for your user experience can reap big usability rewards.
Of course, since the audience are ninja developers I’ve chosen to make my list zero based.
Note: Click on the images to see 100% screenshot.
Issue: We have redundant titles in the 'Ask Question' non-actionable button and the 'Ask a Question' page title).
Solution: Get rid of the page title and let the non-actionable button tell the user their location. Use a better color for a non-actionable button -- in this case I grayed out the button -- literally.
Issue: Jeff says "What we're doing with the trilogy is not exactly rocket surgery. At its core, we run Q&A websites. And the most basic operation of any Q&A website is … asking a question. Something any two year old child knows how to do." and then proceeds to tell the end user exactly how to ask a question. Like great comedy, your user experience shouldn't talk down to your audience.
Solution: Unless your audience is, in fact, under the age of two, delete altogether and use the space more wisely.
Issue: The Related Questions (which are really potential answers) and the search box navigates me forward (potentially destroying my work) and results in a dialog box (at least the first time I try to navigate away). The Related Questions experience pushes my question text further down past the fold.
Solution: The title is actually a search (and is quite a brilliant feature). Delete search from the header, move Related Questions to the right navigation, persist them and let more of them appear as my question text gets longer. Clicking on any of them opens a new window (or an in-page preview). This way I can see if it answers my question or is related (bonus: I can get the Url to embed in my question).
Issue: The preview is likely to be beneath the fold assuming screen resolution of 1024 x 768 – which is still more common than you might think.
Solution: Moving the Related Questions over to the right navigation helped as did removing the page title. Moving the label for the Title input field gains us a few more pixels. The more the end user can see the preview the better chance they will have to get things right.
Issue: Offline writing then copy and paste doesn't work. This is likely where the author of this question started (I did for the purposes of this post).
Solution: Replace Markdown with a more elegant solution which understands CRLF. Even better, implement a true WYSIWYG editor if possible and avoid the disassociated (and unfriendly) separate preview window altogether. Realizing this may be harder in practice I've left the core editing experience alone recognizing superuser.com (and its peer sites) might have special requirements which necessitate this editor. (Interesing idea: What if I could use Windows Live Writer or something like it to post questions?)
Issue: Input box for notification which doesn't tell me what to enter -- I can assume email address.
Solution: You know what they say about assume. Clean it up and be explicit. Use the actual text box space to tell the user what they need to enter -- automatically replacing when they start typing. Same thing with tags, by the way.
Issue: The 'Ask Your Question' button wording is too complex. If I were to localize the interface (using German because it usually results in the longest strings) 'Ask Your Question' becomes 'Stellen Sie Ihre Frage'. Plus, I have a greyed out button style for an actionable button which seems counterintuitive given all of the other actionable buttons are the color teal.
Solution: Change to the standard seen around the world: "Submit" (which in German is "Senden") and make the button a standard color (teal) to fit with the rest of the actionable buttons at superuser.com.
Issue: Hyperlink Hell. Do we really need About and FAQ at the top and the bottom? Not including things I’ve already deleted with suggestions zero through six I count 24 text based hyperlinks on the page.
Solution: Don't have the same link in two different places. If it's important, put it at the top. If it's not important put it at the bottom. If it’s truly not important, don’t have it. Better yet, put all links either at the top or the bottom -- if bottom, you can get some additional user workspace at the top. Realizing this may not be possible I’ve pretty much left all hyperlinks in place below. Think seriously about what hyperlinks you really need – could your user be better served with putting a bunch of them on the About page, for example.
Issue: Font hell + visual clutter. We have a combination of fonts (Arial, Consolas, Trebuchet MS at least) at a good number of varying sizes and weights. Plus we have boxes (look at Related Questions and the Markdown editor) which have dissimilar styles and don't line up. Some boxes don’t have borders. Some boxes are solid colors with reversed out text. The net effect is the overall design can't seem to make up its mind.
Solution: Stick religiously to a defined style. All input boxes should look the same. All section headers should look the same. All hyperlinks should look the same. Make things line up. Logically group items. You can never have too much polish, polish, polish.
Issue: The formatting reference can't make up its mind on how much information to give and for almost every user will be either too much or not enough. Making the information bigger, bolder (or neon pink) can’t solve this problem.
Solution: As noted above having a better WYSIWYG editor can solve most of these problems. Giving the user a better chance to see the preview (getting it above the fold) will also help. Given the constraints of this editor it's best to either (a) embed the full formatting reference in this page (at the bottom) for extremely convenient reference or have exactly one link to the formatting reference (as I've done here) – note: should be a new window or in a preview pane so I don’t have to leave my work. Having a preview + confirmation page which appears when the user clicks the Submit asking them 'Do you like the formatting of post' can also help them double check their work and perhaps prompt them to clean things up.
Here are the results if you follow the suggestions above…