Redesigning Movable Type’s Comment Management Screen?

In a project I have been working on I have had the need to revisit an old plugin of mine: the [Contact Form plugin](http://www.majordojo.com/projects/movable-type/contact-forms/). When designing the inquiry management screen the plugin I thought it would be a nice user experience to mimic Outlook as much as possible thinking that a familiar interface for a similar activity would be ideal. This is what I came up with:

Original Contact Form Manage Inquiries Screen


The theory was a good one, but in practice the constraints of the Movable Type user interface often made the interactions a little awkward. A UI model like the split pane browser in this context really needs a lot more screen real estate to work effectively, otherwise the user spends too much time scrolling for no logical reason.
So in returning to this plugin, I wanted to improve upon this user experience. So the first thing I did was start to look at how others are managing a similar user experience: comment management. Let’s take a look:
## Drupal

Drupal Comment Listing


Two words: God Awful. Next!
## WordPress

WordPress Comment Management


True to form WordPress delivers a highly functional interface. All the actions a user is likely to want to perform are clearly visible. Although one criticism I have heard (although poorly illustrated by the above screenshot), is that the UI in displaying the full comment often overwhelms the visual experience. This is a problem shared by Movable Type as well.
The fact that WordPress also let’s you expand the table to the full width of the page also helpful in that it removes distractions from the UI allowing users to more easily focus on the task they are engaged in.
On the downside, the tabular layout seems to be a UI constraint that is not easily dealth with. It forces whitespace into several columns which is not needed and results in a UI that lacks polish.
## Movable Type

Movable Type Comment Management


Movable Type is not *bad*, but it is far from *good*. Mainly the links users most want to click on, like “Reply” and “Edit” are hard to see, not to mention the fact that a single click “Report as Spam” and “Delete” actions aren’t offered at all. Plus, the content on the page feels really dense – not an effective use of whitespace at all.
Also the lack of userpics forces users to scan more intensely for who comments are from.
## TypePad

TypePad Comment Management


TypePad by far has the most polished UI for managing comments visually. It is a very effective use of space, especially considering that the comment listing table is a fixed width.
I like the fact that the table has no table header — because let’s be honest, it is simply not needed. The data makes the subject of each column obvious – labels are simply unnecessary. Second, I like the fact that actions have been differentiated from the comment’s status and that the current status of a comment is very clear without having to spell it out “Published” or “Reported as Spam,” etc.
Although it suffers from the same problem as WordPress in that a single long comment can easily dominate the page. Also, the help text is nice, but as you become more familiar with the UI is becomes unnecessary and distracting. It would be nice to be able to dismiss it all together and let the UI claim that space for the table.
## Final Observation
One final observation: I was shocked to see the use of AJAX almost entirely absent from every platform. This is 2010 folks. Can we at least handle deleting comments and reporting them as spam via a process that is not disruptive to my primary activity: processing and triaging comments?
## Contact Form Inquires
Considering all of the user experiences, I endeavored to take what I liked about each and fix what I thought was broken to come up with a user interface for managing comment form inquiries, which could easily be applied to comments. This is what I came up with.

Contact Form List Inquiries Screen


And because screenshots don’t illustrate these things, here are some details:
* No one comment can dominate the page, but any long comment can easily be expanded or collapsed if you want.
* Replying to comments, deleting inquires and reporting them as spam are handled via AJAX so that users never have to wait for the page to reload to go on to processing the next comment.
* I got rid of the iframe-powered dialog of Movable Type because it simply took too long to load. I converted it to a pure-jQuery dialog so that it appears almost instantaneously.
* I added the polish of animation so that elements fade and ease quickly into or out of view. This helps the page transition more easily from one state to another without the user feel the jarring effect of the page shifting up and down as elements disappear or appear.
* I am tracking the state of inquiries to know whether you have read them or not, whether they have been replied to or not, etc. That way you can at a glance see what is new and what requires action.
* I got rid of the table column headers.
* All actions one might want to take are clearly visible and accessible via a single click.
Technically this screen is for processing contact form inquiries, but it would be trivial to apply to main comment listing so it is only a matter of time.
In the meantime, I would be curious to hear feedback from Movable Type users, and the thoughts from others about what makes a good comment management experience. Is there a tool you use and love that I have not taken a look at, but should?

Advertisements

One Comment on “Redesigning Movable Type’s Comment Management Screen?”

  1. aleksarus says:

    It works with MT5?


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s