Last week I took an hour to evaluate the Ask A Question page design over at http://superuser.com. Jeff and the community provided some valuable feedback in the comments on that post as well as this meta discussion. A single hour isn't really enough to do a good job looking at an end to end user experience so I decided to take this weeks Coding Friday to examine the feedback and look more closely at the overall user flow to see if we can improve things to keep the proposed redesign largely intact.

The Related Questions feature is probably one of the most important for this page -- it helps users find answers AND helps to prevent duplicate questions from being asked. In response to my suggestion we move this to the right side bar Jeff responded...

"I don't think we can get away with removing the "How to Ask" entirely -- you assume mightily about the competence of our audiences :) And if we can't get rid of that, that means the sidebar is now unavailable for the related questions."

I agree with Jeff the 'How to Ask' section is important to the audience -- and I think I've got an idea which helps put it front and center while at the same time respecting returning users and preserving the Related Questions side bar.

But before we go there, let's take a look at the overall user progression and note some of the outstanding issues.

1. User navigates to the Ask Question Page.
2. When user leaves the Title field the Related Questions appear.
3. User types their question text.
4. User selects a Related Question.
5. User selects OK and is navigated to the related question page.
6. User presses the Back button in their browser to return to their question.
7. User leaves the Title field.

There are four issues we need to resolve with this user experience…

1. Whether the user has visited this page once or hundreds of times the 'How to Ask' and 'How to Format' sections are present.
2. Related Questions between Title and question text pushes the preview below the fold.*
3. User gets a dialog box and is navigated away from their question when they select a Related Question.
4. When I return to my question the Related Questions section has disappeared until such time I leave the Title field.

*Note: Even though Jeff thinks the fold is largely irrelevant it is important to consider for the task he originally lamented: Keeping users from posting incorrectly formatted questions. Being able to see the live preview as I type will generally aid in this area -- therefore we should strive to keep the preview above the fold if possible.

And here are some suggestions to address the 4 issues identified above with the end to end user experience.

• Make 'How to Ask' a dialog which is presented the first X time(s) a user enters this page, where X is 1 to 5.

• Revise 'How to Format' in the right column with a bounding box to separate from the balance of the page.

• Replace 'How to Format' with the Related Questions when the user leaves the Title field.

Open any Related Question in a new window, preserving my question and Related Questions at all times.

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.

Feedback welcome!

Note: Click on the images to see 100% screenshot.

0

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.

1

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.

2

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).

3

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.

4

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?)

5

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.

6

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.

7

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.

8

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.

9

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…