A Better eBay Listings Page

eBay Alternate Test Design

I like redesigning sites that I use quite often, when I feel that they’re getting overly cluttered, or that it’s become too hard to find what you’re looking for. eBay is currently testing a new alternate layout scheme (see inset screenshot), but aside from removing the overkill amounts of eBay yellow (good idea) it’s really just a shuffling around of the same old information that’s always been there. There’s no visual direction here, nothing that regroups data and turns it into information, if you get my meaning. So I took a crack at redesigning a listings page to see what I could come up with. It’s likely far from perfect, but I like where it’s going.

 

 

 

“AJBay” regroups the content into two main columns, a wider left and a narrower right, roughly three-fifths and two-fifths in proportion.

The Menubar

The top bar is given more usefulness by noting your logged-in status, a usericon, welcome message, and message notifications. The search bar is made much wider, as the current one is nearly unusably small. A few utility links are up in the top right corner.

Where the current eBay inexplicably puts the main navigation up in the top-right corner, I’ve moved it into a more standard navigation bar, with four larger primary links and three secondary ones. The current “Motors” and “Stores” don’t mean anything to the new user, so I’ve added the company name before them, which should help explain that those are sub-sites.

Given the depth and complexity of the site’s functions and categories, I’d keep the current drop-downs and fly-out menus as there seems to be some consensus that they work well, even from Jakob Nielsen; similarly, the breadcrumbs don’t really need much fixing.

The Listing

The title of the listing is given prominent place at top, which is, in my mind, where you’d expect it to be. Below that is a much larger image lightbox; it’s always bugged me how eBay thumbnails are too small to be useful, so this view uses some behind-the-scenes magic to create large square cropped images. The visitor can page through them, view a lightbox grid, or zoom the image to its full uncropped state, as you’d expect. 

Next, since this is a site about selling things, I wanted to call out the pricing information in a big, friendly way, hence a shape that recalls an old-fashioned price tag. I imagine that new items would get a green one, used ones get yellow, and maybe a different kind of tag for Dutch auction formats. The price is large and bold, using proper superscripts for readability, and there are clear, unmistakable action buttons and other information indicators there. When you want to enter a bid or buy the item, it’ll pop up a modal dialog box right there, rather than force you to load another page. 

Below the tag, various bits of information that were tucked away in various corners of the page have been unified in a zebra-stripe table, with certain terms linked to provide either pop-up explanations or tooltip-style definitions of terms in place.

The left-hand column finishes off with some category- and product-specific information in tables; in this case, specs for this particular model of MacBook. I debated putting this in the right-hand column where the seller’s description is now, but I thought that the first thing I would want to see after the pics are the specs; I’d only want to read the seller’s description to find out about things that aren’t standard, such as included accessories, notes about damage or refurbishment, etc.

Countdown Clock, Seller info and Seller Description

The right-hand column starts off with a large ‘countdown clock’, the background of which will slowly change from blue to green to yellow to red as the auction progresses. This seemed like a much more logical place to put the ‘Watch This Item’ button, as it emphasizes the connection between watching an auction and its expiry date. Below that is a friendlier Seller Information area, with self-labelled links to profile pages and feedback information, a handy form for asking a question about the item, and an invitation to view the seller’s other items. Using a specific number makes it more concrete, rather than a vague promise of ’something’ on the other side of the link, hence the ‘72 other items’.

After that is the seller’s description. I’m thinking simple, clear typography with maybe only a few styles (headline, subhead, paragraph, bullet points) would help keep the site looking more consistent, vs. the current riot of ‘themed’ pages. Similarly, a simple WYSIWYG editor that works cross-platform will help users a lot here; it’s 2009 and there still isn’t one that works with Safari.

Let me know what you think in the comments below. Does this make you want to shop more? Less? Does it make the product more appealing? Would you use eBay more if it had listing pages like this? What other UX issues does eBay need to work on, in your views?

Filed under: design is not decoration, the internets, user experience design

Anti-Anti-Design

Greg Storey picks at up an old Scobleizer thread in commenting about the failure of PodTech, which sold for $500k after $7.5M in financing, noting that it disproves Scoble’s theory that somehow “anti-marketing design” makes for better, stickier websites.

Downthread, Luke Wrobleski (you really need to read his new book about web forms) leaves this comment which parallels many experiences I’ve had, too:

More than once, I’ve been presented with the following sentiment: “we don’t want our Web site to look too good.” From Internet executives to the leadership of Web 2.0 start-ups, the rationale is that when a site seems too “professional” it loses its appeal. It feels corporate and no longer genuine -as if authenticity can be communicated by lack of visual refinement. There are of course plenty of examples to point to (Craig’s List, MySpace, del.icio.us).

Without getting into the typical form vs. function debate (yes, sites need to be useful and usable!), I’ll explain things the way I do whenever a client of mine makes this assertion. First of all, dismissing visual design as just a matter of “making things pretty” cuts off your ability to communicate with your customers at the knees. Design is a solution to communication not mere styling. Each product (via its interface design) needs to “tell” users what features it offers (its utility), how to use those features (its usability), and why they should care (its desirability).

Second, even if you deliberately don’t think about your site’s personality during the development process, you will end up with one anyway. The colors, content, and visual elements (or lack of all three) of your Web site all make an impression on your audience, intentional or not. Therefore, it is in your best interests to be aware of the personality you are creating for your site and make certain it is telling the story you want.

Yet many sites with a poor visual presentation remain popular on the merits of their content alone. But does their audience enjoy bumping through the site’s awkward graphics and hard to read labels? No, but the personality of the content (it could be high quality, funny, worthwhile, and more) makes the rest bearable. Would their audience be happier if the personality of the presentation matched the personality of the content? Of course. They like the content, don’t they? Such a site would be well served to improve their presentation. Not only would it enrich their current customers’ experience, but a presentation that reflects the site’s content would tell the site’s story to newcomers as well. Hey, we have quality content, come take a look.

Filed under: design is not decoration, the internets

The Movie Puzzle Solved

Here’s the relationships between these movies:

Logan’s Run is related to Austin Powers because Michael York is in both of them — in the first as the eponymous title character, and in the second as Basil Exposition, Austin’s boss who delivers expository dialogue.

Austin Powers is related to Casino Royale because the very first Casino Royale movie, back in 1967, was an Austin-Powersy 60s Bond spoof starring David Niven, Woody Allen and Peter Sellers.

Continuing in that theme, Down With Love is a very campy take on the old Rock Hudson-Doris Day comedies of the 60s AND at one point, star Ewan McGregor was tipped to take over the Bond role.

This is connected to North by Northwest partly by lettering style (letters with arrows – as was used on one movie poster for NxNW), the fact that there’s a direction in the title, and also because NxNW was basically the prototype for the Bond films. Cary Grant was the producers’ first choice, but they went with Sean Connery when Grant refused the role.

This connects to West Side Story by studio (MGM), and again because of a compass direction in the title.

WSS connects to Demoiselles de Rochefort as the latter is a Jacques Demy tribute to MGM musicals; Demoiselles connects to the earlier American in Paris by both being filmed (AiP, only in parts) in France, and sharing marquee song-and-dance man Gene Kelly.

AiP connects to Amelie via Montmartre, as Kelly’s character is trying to sell his paintings there, and most of the action of Amelie happens in that neighborhood.

Amelie is connected to the Fifth Element via Mathieu Kassovitz (“Gimmee de CASSHhhhhh!”) …

From there we go to Jacques Tati’s Mon Oncle…what’s the connection here….um…they’re French films…there’s some silly slapstick and…oh yes, there’s airport scenes in both! And sort of satires of supposed Western, technological progress! (Yes, that’ll do.)

From there, two more M. Hulot / Jacques Tati films, Les Vacances de M. Hulot and PlayTime.

Ratatouille… is also set in France…and they try their best to capture the same idea from Mon Oncle, the idea that food and wine and pleasure and doing what you love are more important than money.

From there to the Daft Punk / Leiji Matsumoto co-production Interstella 5555 — the music is French, the animation is Japanese.

Ok, then a group of Hayao Miyazakis, and then we end up at the cinematic adaption of Osamu Tezuka’s Metropolis, which deviates from the original manga by being more referential of Fritz Lang’s Metropolis, which concerned a group of downtrodden workers….

which brings us to Office Space.…which is connected to The Matrix viathese mash-ups… and the fact that they involve cubicle farms.

The Matrix and Blade Runner are gritty dystopian future movies…Lord of The Rings is connected to Blade Runner because…um….Gandalf rides a unicorn? And Gaff makes a tinfoil unicorn to allude to the ‘replicant dream’ Deckard has? (OK, Shadowfax was a horse, but let’s let it go.)

Which connects back to Star Wars because Rancors are kinda like cave trolls? And of course the LOTR trilogy, very steeped in all that Joseph Campbell-y universal-myth-making stuff, inspired Lucas to write his trilogy in the first place.

ok, from Star Wars to It’s a Wonderful Life…they’re both American classics in the AFI Top 100, no?

And IAWL connects to Bueller because the former is a morality tale about a near-suicide and the second is the story of someone trying to have a perfect day off, but they both feature scenes of people running home, you see how much one person can affect the world (everyone truly loves both Ferris and George Bailey) and the bad guy / vice principal get it in the end.

Bueller connects to Anchors Aweigh because the latter starred Sinatra and Chicago was his kind of town…which connects to The Life Aquatic because they involve boats and love triangles…and that connects to Yellow Submarine because they both feature (ahem) yellow submarines and fantastical made-up animated undersea creatures, and good music too.

“And that’s the truth!”

***

From left to right: Logan’s Run; Austin Powers; Casino Royale; Down With Love; North by Northwest; West Side Story; Les Demoiselles de Rochefort; An American In Paris; Le fabuleux destin d’Amelie Poulain; The Fifth Element; Mon Oncle; M. Hulot’s Holiday; PlayTime; Ratatouille; Interstella 5555; Nausicaa of the Valley of the Wind; Kiki’s Delivery Service; Princess Mononoke; Spirited Away; Castle In The Sky; My Neighbor Totoro; Howl’s Moving Castle; Metropolis (anime); Office Space; the Matrix Trilogy; Blade Runner; Lord of the Rings trilogy; Star Wars box set; It’s a Wonderful Life; Ferris Bueller’s Day Off; Anchors Aweigh; The Life Aquatic; Yellow Submarine.

Filed under: collections, movies, music, the internets

Calculate your neighborhood’s Walk Score

Interesting Google Maps mashup site that calculates the walkability score of your neighborhood, showing listings of services within walking distance.

My neighborhood rates 53/100, but I expect when the new Metro grocery opens at the corner of De La Montagne and Notre-Dame, and we get more diverse retail (other than antique shops and deps….) that might change somewhat.

I also wonder if they don’t count the fact that Montrealers are more willing to walk longer distances into the score. My neighborhood doesn’t have cinemas, but it’s eminently not a great hike to the AMC or the Paramount.

By comparison, Quartier Dix-30 rates 15/100, and the neighborhood around Laika rates 75/100

via Atrios.

Filed under: montreal, the internets, urbanism

The Italian Job

….in three panels.

Filed under: comedy, movies, the internets

Beyond LOLCats….

…are the very disturbed  folks — by Jim Henson, at a young age, I’m guessing? — behind OmNomNomNom.com.

If you value your laptop, don’t drink coffee while viewing.

the original. (my heart be: meltoring…poor guy)

Filed under: comedy, the internets

Beware of MSN worm!

I’ve gotten faux MSN messages from several friends that invite you to click on a booby-trapped link, typically asking you to look at a photo. Thankfully as I’m on a Mac I’ve been immune to them (they download .exe files typically) but it seems more computers are getting infected.

Details here at The Register.co.uk.

Filed under: suckage, the internets

Test The Nation

I missed two because my mouse trigger finger was a little itchy — so while I feel like a 48, I’ll go with the official results.

Filed under: the internets