The craigslist team isn't interested in updating the site, so Wired asked leading designers to give it a user-interface lift.
Craigslist Today
Visitors arriving at craigslist are confronted by a confusing homepage cluttered with links most people will never click on. Overall, the user interface is in dire need of an organizing principle that guides you to the details you seek while filtering out extraneous information.
It's hard to know even where to begin: Should you start your career search under Jobs or Gigs? The right side of the screen is devoted to an exhaustive list of cities and countries, although most users care about only the one they live in. Once you dive into a section, navigation requires more backtracking than a hedgerow maze. Locations aren't sorted in sufficient detail, images aren't available until you click through to a listing, and items can't be flagged for side-by-side comparison. And that's just the desktop version. On a mobile browser, craigslist is an interminable roll of links rendered in eye-crossingly minuscule text.
Make It a Web App
The NYTimes.com team retained craigslist's basic look and feel while making the site work more like an app. Since search is the most important feature, design director Khoi Vinh and his colleagues gave this function more real estate and placed it at the top of the page. They moved the all-important Post to Classifieds link to the right side of the page and increased its visibility by bumping up the type size. They made room for white space and eliminated the gray backgrounds, which they thought weighed down the site. "It feels more open, more nimble," Vinh says.
In the design created by Vinh and his team, the listings themselves don't stand alone but are framed by navigational aids that let you jump immediately to other parts of the site. Buttons up top lead to the major sections (the current one always appears front and center in light gray). On the right side, the My Craigslist sidebar shows the ads you've viewed most recently and the sections you browse most often, transforming Craig's list into your list. The calendar, fixed at the bottom right, is available on every page.
Make It Simple
"Craigslist is working," says SimpleScott, former design director of BarackObama.com—why fix what isn't broken? Instead, he focused on making the site easier on the eyes. On the front page, he aligned rows and columns in a uniform grid so they're clearer at a glance. Links you've already visited leap out in blue so you can retrace your steps easily. Displaying the site on a mobile browser, however, presents bigger challenges. SimpleScott met them by dividing the pages into a series of screens. A hierarchical menu makes it easy to navigate without accidentally clicking the wrong link. A map page lets you browse listings by location. Ads and photos each get their own screens. Buttons along the bottom make common functions available at all times.
Make It Beautiful
"Craigslist is frustrating and claustrophobic," Matt Willey says. His layout has a contemporary look, a Web 2.0 feel, and plenty of breathing room. He eliminated long lists in favor of two pulldown menus: one that lets you jump to various sections and another that sorts listings by price or date. His design displays images in the category pages, so you don't have to click through to the individual listings to see them. Thumbnails load rapidly and blow up to full size with a mouseclick. A button called Add to Watchlist marks favorites, while the Share button emails listings to friends or posts them to social networks.
Make It Personal
Think the current homepage lacks personality? "We decided to do something about the cult of Craig," Lisa Strausfeld says. She and Luke Hayman highlighted the contradiction between Newmark's interest in grassroots democracy and the reality that the site is, well, his list. The arrangement of words is essentially random; this design won't win awards for ease of use. Numbers from the calendar outline Newmark's head and glasses; longer text strings form facial features. Newmark is always in the background—this version brings him to the forefront.
via: wired.
Posts
No comments:
Post a Comment