1200 grit

user content acquisition on craigslist.org

Gathering content for the site is craiglist’s life blood. The users are their writers and content producers; they should be given the best tools available to do their job. Craig Newmark prefers the term “customer service representative” rather than founder. His site needs to reflect that ethos.

Users should be given the freedom to initiate a new classified ad from nearly any page on the site. A majority of new users navigated to the auto section to post an auto ad, but the current user flow doesn’t offer that opportunity.

Users are also denied the chance to make changes to their listing as they are creating it. In my revised process flow users are able to initiate a post from all pages, and can navigate back at any point in the process. Users can also navigate back two or three steps at any point with a single click. The page would be covered in user friendly arrows if I drew every option presented in the new process.

Hitting the ground with your butt

Moving the account information to the upper right hand corner  brings the UI in line with other sites and users expectations

Moving the account information to the upper right hand corner brings the UI in line with other sites and users expectations

A majority of users had trouble initiating the posting process. Many clicked into the auto listing section, others tried to click on what they thought was their geographic location. They all found the link eventually, but the extra effort it required should be eliminated.

Standard site layout keeps the user account information in the upper right hand corner. This is a low traffic area for most viewers attention, and standard practice is to use it for account management functions. Posting classified ads is the call to action on the page, and should be obvious as soon as the user arrives. It has to be more than a text link, and should reverse out of a dark color, or stand out on the page in some sort of way.

GPS isn’t for only out of towners

This revised posting screen gives the user control and freedom as they create their classified ad.

This revised posting screen gives the user control and freedom as they create their classified ad.

The first item to address is context. Where is the user in the posting process and how much is left? The updated posting screen clearly shows how much more information is needed for the posting, which keeps the status of their post front and center the entire time. The radio button no longer triggers an action, and the user only moves to the next screen once they click on the submit button that becomes active only after all the required information is filled out.

The verbiage of the submit button changes with every screen so that the user knows exactly where they are going next and what they will be filling in. Surprises are removed and the unique button text puts the user at ease as they commit to the next step in the process.

Upcoming actions are listed in order below the submit button. This creates a clear time line for the process and will be used consistently through the rest of the posting experience.

Help and documentation during the process is handled by CSS tool tips that match the style of the site and happen instantly when users hovers over the [?]. These are not only faster than opening a new window/tab, but are far less disruptive to the posting process.

Arrange by meaning, not spelling

The category list is presented contextually rather then alphabetically.  This allows the display of only the information that is pertinent to the selected category.

The category list is presented contextually rather then alphabetically. This allows the display of only the information that is pertinent to the selected category.

The long grocery list of items is broken into groups of similar items. This creates a more efficient system because it only shows the user the information that is related to their posting. Initially the “Item” title is greyed out (#999) and the row of radio buttons is blank. When the category is selected the “Item” text immediately flips to black, and the corresponding items appear with a 500ms fade-in. Keeping these options hidden until they are needed eliminates distractions. Categories with multiple rows of items would force the “Seller” information to slide down to accommodate the additional information.

This method is used throughout the process to create consistency and draw the user down the screen. This creates user momentum that aids in task completion. The slight fade-in adds some visual sophistication without breaking the plain text theme that is used site-wide.

The submit button only becomes active once all necessary information has been captured.

What the locals call it

Arbitrary location names are solidified with maps  showing the user what is included in each geographic term.

Arbitrary location names are solidified with maps showing the user what is included in each geographic term.

The system allows users to resume sections that were partially completed.

The system allows users to resume sections that were partially completed.

Even the salesman who spends his days on the road was confused by the geographic terms used by the site. The terms were far too ambiguous; the maps are added to show exactly what is meant by each term.

The options to move back in the process becomes clear at this point and is marked with the real world term “change.” The Top to bottom timeline is still present with future tasks underneath the current task and past information above.


Quality data by design

The fields are updated to capture more accurate data  and the field descriptors have become helpful real world terms.

The fields are updated to capture more accurate data and the field descriptors have become helpful real world terms.

The specific attributes of the post are broken out into their respective fields and given better descriptions. The year is captured in a unique field and validated.

Unique fields allow the posts to be formatted consistently on the listing page. Every model year is in four digits making it much easier for a visitor to scan down a long list of classified ads.

“Specific location” is changed to “Location (town)” which helps the user process the field correctly.

The repetitive email verification fields are consolidated since they didn’t prevent any typos in user testing and only served to create aggravation.

Users that have posted ads previously would start on this screen when they press the “classified” button. They would only edit earlier information as needed. Auto dealers will find this eliminates much of the repatative data entry that makes the current system so inefficient.

Tab order for this screen is Year, Make, Price, Model, Location, Description.

Recognize yourself

Photo uploads now include indicators for upload progress  and more accurate guidelines for format and file size.

Photo uploads now include indicators for upload progress and more accurate guidelines for format and file size.

A progress indicator gives the user a clear indication as to the status of their photo upload within the system, and clear guidelines are given to guide image format and file size.

Instructions are given for replacing or deleting an image which are completely missing from the current UI.
The submit button now indicates that you will move to a preview screen for your posting. A user is able to make edits to any part of the listing with one click at this point, and the post information already submitted is arranged to provide a preliminary preview. This is done to re-enforce what has been submitted and allows for recognition rather than recall before the preview is pulled up.

Your post, from all angles

The posting preview screen puts the ability to make accurate changes at the user’s fingertips.

The posting preview screen puts the ability to make accurate changes at the user’s fingertips.

Putting the “change” button near the item to be changed allows the user to recognize functions rather than recall. The user is also given a view of exactly how their post will look as it is listed next to the rest of the vehicles in the classified section.

Images can be arranged in desired order by clicking and dragging. Replacements and deletions are handled with a simple click of the image just as the prior screen.

The submit button states clearly what is going to happen next, and lets the user know that the posting process is about to move to the next stage.

This screen is also used for edits once the publication has been approved, but the label for the button changes to more accurately reflect its function.

The system email describing how to edit and publish an ad are useful, and further upgrades would involve moving into the account management interface which is outside the scope of this writeup.

Missed connections

There are many opportunities to make the user’s posting process more efficient and accurate. By following basic UI guidelines we give the user more opportunity for recognition of functions rather than forcing them to recall attributes. Using real world terms to label information decreases confusion and puts new users at ease as they create their submission. The submission process unfolds clearly in front of the user, and is built to give them the freedom to correct mistakes with ease. All of this can be accomplished within the framework of craigslist’s current text based design and would improve the quality of the data collected.

Craigslist has a vast amount of content and millions of users every month but there is a strong prevalence of system based design rather than user centric real world terms and functions. Making a few of these simple changes would be a great step towards bringing the UX in line with the carefully crafted collection tool built by its competitors.

Comments are closed.