A Case Study of “Designed By Developers”: Stack Overflow

July 21, 2010

Stack Overflow was set up by two successful high-profile businessmen, attracts over 7 million unique visitors a month, and has received $6 million in funding. So I found it a little jarring when I visited the site to see this:

How Stack Overflow Looks on First Use

My eyes puked from the motion sickness of not-knowing-where-to-look-oh-my-god-everything-is-everywhere-ness of the page. It’s a typical case of ‘designed for developers, by developers’, and I’m sure most regular Stack Overflow users have got used to it and don’t mind. Perhaps they even like it. But a little bit of care over the design could make a huge impact on usability for newcomers, and regular users too.

Before I get to the details, some caveats:

  1. The site may very well be designed for optimum revenue rather than optimum usability. I’d like to think that there is a connection between the two, but I have no idea if Jeff and Joel have somehow proved that this is the best design for profits. Those guys know what they’re doing.
  2. I don’t know what percentage of visitors are new vs returning, how successful the adverts are in their current guise, or any other analytics which could be used to influence design improvements.
  3. I don’t know what the edge cases or constraints are; maybe there are some underlying reasons behind some of the apparent design ‘mistakes’.

With those caveats in mind, I’ll continue with my public-complaining-because-it’s-easier-to-complain-than-create.

Here are my initial concerns, with just the part of the page I can see on my MacBook – there are uglier things, like a second banner, lurking just under the bottom edge:

Stack Overflow, with labels showing questionable design decisions

  1. This is unnecessary noise. I’d hazard a guess that not many people click that link, and it doesn’t even fade out automatically – you have to click the close button. This is based on an assumption that most of their traffic arrives via search engines, and the visitors are interested in the main question and answer on the page, not about the site. On a rather pedantic note, the typography needs work – we haven’t needed double-dashes since the typewriter, and the exclamation mark is tacky.
  2. The search box looks like I’ve already typed something in. If it’s not obvious that it’s a search box, and you don’t want to use a search button or a proper form label, the default text should be greyed-out to hint at its status. And the ‘careers’ link in this top menu has nothing to do with the Q&A site – it’s basically a hidden advert, and shouldn’t be sandwiched between ‘log in’ and ‘about’. That’s just sneaky.
  3. This menu is visually one of the highest priority elements on the page, but contains things that are ambiguous (Badges) or almost pointless (Users) to most visitors. And why have they been styled to look almost like buttons?
  4. It would be nice to use some grammar here (“Ask a Question”), and maybe also visually differentiate it from the other menu items, as it seems to serve a different purpose (i.e. things that do different things should look different).
  5. This is one of the most important parts of the page. As a user following a Google search result, you need the validation when you open a page that it matches your expectation (search query). Unfortunately, the lack of negative space undoes any work that the typography does of highlighting it. It’s hidden.
  6. This seems to be the highest priority visual element on the screen: the colour yellow jumps to the foreground, and it’s the largest block of full colour on the page. It sucks the eye up to the top-right of the screen. At this point, yellow has been used for three purposes: to illustrate a notification message at the top, to show the current navigation, and as a background to the site introduction. Yellow is also increasingly known as the colour that represents ‘temporary’ information on the web (a la yellow fade, 37 Signals), which jars a little with this permanent, non-disappearing block. I know, from using the site, that it disappears on subsequent visits, but a new visitor doesn’t.
  7. This is a big assumption, but my market research to-date shows developers as being a particularly bad audience for advert click-throughs, so I’m surprised by the insistence on ads for revenue. Not only are there ads, but they are purposefully placed to be as intrusive as possible (there’s another one just below the fold), which I guess is because that’s the only way to squeeze out any revenue from the little-clicking developer crowd. If their revenue is based on impression numbers and not clicks, it would be nice to re-position them slightly.
  8. The second most important element of the page (the original question), and it’s completely hidden.
  9. What do these huge numbers mean? Okay, I’m being a bit pedantic here, and will assume the first one is some kind of voting system, and the other is a favourites mechanism. They are greyed-out though, so I can’t use them. Or can I?
  10. This is just a whole bunch of meaningless information, and needs serious editing.
  11. Is ‘tagged’ a heading? Or just a random word? It seems to be the same typography as the main body text.
  12. I’m happy to be proved wrong on this, but who actually clicks on these tags? Oh yes, I had a specific question on prototyping, and now I’d LOVE to see exactly 6,412 more questions about ‘subjective’ please. I’m not a fan of tag clouds (except for SEO purposes), but if you must show this information, cut out the unnecessary precision and just show relative sizes or another visual indicator of popularity, if you need it at all. And why do they look like buttons?
  13. Really? A tab device to choose ordering options? This decision blows my mind.
  14. I’m being facetious again, but these words have no context or meaning, and are greyed-out disabled. Having said that, the target audience (developers) probably understand their meaning.
  15. As per J, this is probably too much information.
  16. Ego stats. I can get a good sense of the popularity/likelihood of a correct answer from the number of responses and votes; I don’t need page views. I’m also not sure why this information, which is closely related to the main question and answer, is so visually disconnected way over on the right.
  17. It took me a while to get my head around what these mini-sentences were. Even now, I’m just going on the assumption that they’re replies to the answer above.

Anyway. Enough complaining. Let’s get physical… physical. I mean constructive.

Here’s what I’ve come up with so far (click the image for a full-size version). Please note that this is NOT a re-design, but a first step towards solving some of the problems. A real re-design would:

  1. Use existing analytics to identify what is and isn’t working.
  2. Be designed by a real designer and user experience expert.
  3. Take more than an hour.
  4. Most importantly: be based on real user research, and user tested.

A first step towards a better Stack Overflow

My suggestion hasn’t included all the functional elements yet, and is using shades of grey where a final design might use color.

What I have tried to show in the suggestion is:

  1. A better use of negative space.
  2. A defined grid system, based off the existing body text size (a grid should be based around the most important element of the page, which in this case, is the answer text).
  3. A defined typography hierarchy (four discrete sizes, consistent use of weight).
  4. A better visual hierarchy – important things are big and dark, less important things are smaller and lighter.
  5. A consistent and accessible use of complementary colors.
  6. Getting things ‘out of the way’ of the vertical eye line that don’t form part of the solution narrative (user profiles, replies to answers).
  7. A better grouping of elements that belong together.

As I said, this doesn’t yet include all the information (e.g. a link to flag inappropriate content, which would probably be a low priority icon), so it’s not really fair to compare like-for-like.

Even so, what I hope this shows is some of the basic rules of design composition, which non-designers (such as myself) should be able to use to improve their web app layout.

Dealing With Those Adverts

I can’t help but desperately want to remove those intrusive, ugly, ill-fitting adverts from the Stack Overflow design. Great business models should be beneficial to everyone, not based on irritation.

There are some so-so variations that would offer a slightly better user experience.

Companies could ‘sponsor’ keywords/sections; for example, Zend might have their branding integrated (but not intrusively) into pages that display questions tagged to PHP. The problem with this model is the overhead of selling-to and managing the sponsorship deals. (EDIT: It appears they already offer a variation of this)

Alternatively, the popularity of the site is large enough to support a Facebook/AdSense style proprietary ad-bidding system, where smaller companies could create their own adverts against specific keywords. This would have the benefit of being able to dictate the advert format, so that it can be more naturally integrated into the interface. Still, that’s a big piece of work.

We need to look beyond adverts, and capitalize on the real value of Stack Overflow.

The real competitive, hard-to-imitate value is not the traffic numbers, nor is it the question and answer content. The real value is twofold:

  1. The brand/position as being the place to go for answers to technical questions.
  2. Most importantly, the peer-reviewed database of personal expertise, for thousands of technologies and software skills.

Once you realize these core values, a new business model becomes clear.

Stack Overflow should become the broker of commercial technical customer support for generic languages and skills.

There are tens of thousands of companies, agencies, and software-houses globally that can purchase expensive support for packaged software, but not easily for the languages or frameworks that they use: PHP, Java, Ruby, Javascript or even specialist topics like Artificial Intelligence.

When developers in these companies need to solve a language-level problem (‘How do I do X in PHP 5?’), they can of course ask it on a public forum. But with that comes no guaranteed response rate or quality of response, and also the public ‘outing’ of inexperience. For many companies, they need the answer NOW – every minute is wasted money – and they’d prefer to get it directly, from a known expert, rather than in a flurry of mixed-quality responses on a public forum.

That’s where Stack Overflow comes in.

The users with the highest ratings can opt-in to provide customer support for languages or skills that they have proven expertise in. Badges and Points are no longer just a status symbol, but a route to being given this opportunity.

Companies then pay a monthly fee for technical support in the subject(s) of their choosing. For the sake of argument, let’s say $100 for 10 questions a month about PHP (there would of course be a stepped pricing model for the number of questions and topics covered). A simple web application/dashboard (or an AIR app, etc.) allows the company employees to privately ask questions, which are relayed in real-time to approved ‘community support assistants’. Whoever picks it up first and answers it satisfactorily receives $5 – not a bad payment for potentially five minutes of typing an answer. Stack Overflow gets to keep a healthy 50% of the revenue to cover costs and invest in growth.

Everyone wins, and those pesky ads can be removed.

Tags: , , , , , , , ,

62 Responses to “ A Case Study of “Designed By Developers”: Stack Overflow ”

  1. Jason on July 22, 2010 at 4:16 am

    Perfectly reasonable critique here; the nearly spiteful, baseless opposition to it from the Tea Party wing of the developer community is as predictable as it is unfortunate. Take comfort in the fact that folks like Steve and others truly have only some small grasp on their “wants”, and had the poles been reversed on this little experiment, the opposition would remain the same.

  2. Stephen Sullivan on July 22, 2010 at 5:39 am

    Hello Dan,

    Why would you suggest moving the user info to the left side? SO’s use of negative space in that area make the site inherently more readable. There is nothing to skip in the SO design. The other element, the vote, which you now made smaller is actually much more important than all that user detail.

  3. kathy sierra on July 22, 2010 at 6:14 am

    Oh what a fascinating and twisty little topic. I think you partly described the entire issue with these three sentences:

    “I’m sure most regular Stack Overflow users have got used to it and don’t mind. Perhaps they even like it. But a little bit of care over the design could make a huge impact on usability for newcomers”

    Clearly most of their active users *do* get used to it and don’t mind. But your second sentence, “perhaps they even like it”, is the one that made me stop and think. I’m just guessing, wildly, that they might even like it not just BECAUSE they “got used to it”, but because they HAD to get used to it. In other words, it could be a variation of the phenomena where an acquired taste is more valuable than one that *everyone* shares.

    Given how useful the site actually is, I seriously doubt there was any strategy there to deliberately make it slightly less helpful for first-timers, but… as a strategy for club/community sites, it might not be a bad idea to at least consider doing so. When we’re talking about a club/community/tribe, “user-friendly” does not mean what we think it means.

    Think of real world scenarios where activities are personally valued in part *because* they were an acquired taste or something not everyone could easily do. Rock-climbing, sushi, command-line coding. You don’t “rock” because you can do what’s been made super easy for the newbies. You rock because you did the heavy lifting. Or in this case with SO, a tiny bit of lifting 😉 The best BEST passion-inducing user experiences are those we earn.

    Now, having said all that… there’s quite a lot to the “Don’t Make Me Think” argument. Because the heavy lifting on SO should be in answering the questions. Members should spend every free neuron figuring out how to generate better, cooler, more memorable and helpful explanations. They should be thinking about that while the SO UI disappears. And I’m pretty sure that’s actually the case once people have spent a little time there. And in that case, whatever small confusion they might have early on will either be forgotten or even an unconscious source of pride.

    I’m so speculating here, and the special case of SO doesn’t detract from your otherwise very useful and thoughtful suggestions. Were SO a site with the sole purpose of providing answers to searchers, well, that would be a very different story.

  4. Mark Trapp on July 22, 2010 at 6:29 am

    Great analysis. One thing the “maybe it’s not for you [you ignorant fool]” crowd should take into account is that Stack Exchange, the software behind Stack Overflow is essentially unmodified for all Stack Exchange sites, and many of the upcoming sites are not developer-oriented.

    The argument also presupposes that developers are qualitatively different than everyone else in how they process information, which is contrary to years of usability research.

    The only other thing I’d point out is that Stack Overflow was designed to “wipe out Experts Exchange”: that Stack Overflow would outrank Experts Exchange in organic searches (c.f. http://mixergy.com/stack-exchange-joel-spolsky-interview/). To this stated purpose, deflecting the issue to say that the registered user experience is better or drive-by clickthroughs are unimportant is at best counterproductive.

  5. Andrei on July 22, 2010 at 7:41 am

    I usually don’t comment on blog posts, max one comment per month.
    But I must say this:
    Dude you are so, so, Wrong!
    You totally missed the point 😛

  6. Sacha on July 22, 2010 at 8:00 am

    I enjoyed this article as well as the ensuing discussion. In fact I added my own 2 cents on my blog:

  7. Mike Woodhouse on July 22, 2010 at 8:56 am

    I’m a long-time SO user (ID 1060) and I love it. Which is not to say I think it’s perfect, nor do I believe for a second that Jeff and the other “valued associates” think so either. That’s evident, if only for the fact that they did in fact go out and hire themselves a designer pretty much as soon as they had their VC cash. I’m looking forward to seeing how Jin evolves the look and feel over the coming months.

    As ever, a lot of the commenters have rather missed the point, which I thought was well-made: the first-time experience, which most everyone above has either never had (because they joined before it reached its present form) or have long-since passed. Honestly, as a click-by visitor I’d much prefer your rework, partial though it is. I don’t want it for my experience as an established user because the pages I see work very well.

    I suppose it’s all about how much the SO guys think it’s worth investing in converting casual droppers-by to registered participants against putting the effort into the Area 51 push to develop new Q&A communities. At the moment, I’d say they were more focused on the interenet Q&A “land grab”. That’s OK, geeks have other hobbies too. Well, some of us do.

  8. durkin on July 22, 2010 at 11:08 am

    Hi Dan. Nice article. I agree with you. I’ve been using SO for years but have never joined up. I’ve gotten used to the interface but I think your layout is a definite improvement. I think some of the commentors here are being very defensive about the site and are missing the point of the article which is not about criticizing the ethos or usefulness of SO but pointing out some ways in which it might be made better. Maybe you shouldn’t use phrases like ‘my eyes puked’ – they tend to provoke an emotive response;-)

  9. ondrobaco on July 22, 2010 at 11:19 am

    The design you propose looks like a blog or any common website template for me at first sight. Your design might be more polished but I think its the distinctiveness of the SO design that made it so popular. When people arrive and scan it they see it’s something new. It compels people to check it out. Perhaps it works for developers as they are often naturally curious people, it might work less for other type of audience….

  10. Doug on July 22, 2010 at 12:12 pm

    Huh. I am in infrequent user of Stack Overflow but actually very much like its design. It’s not just “I learn to ignore the noise” I actually find the site quite usable.

    Questions and answers are left-justified, and only the votes (which are important) have more emphasis.

    I find Stack Overflow fashionable. Stack Overflow conveys a sense of newness and that it was designed by hand for someone to use. Your design feels more like bland, inoffensive, corporate shrink-wrap forum software sold to big companies for tech support. It feels like lots of time was spent making it look a certain way in the meantime not paying much attention to how users were actually using the site.

    For example, tags are very important. It’s true they don’t help answer my specific question, when I have a specific question. In all other cases– I use tags constantly. If I am browsing the site, which I often do after I’ve found an answer, tags are a primary means of navigation.

    The related questions box– yours is a token sample and unless your algorithm is amazing there’s probably nothing in the list that will interest me. I can easily process 20 items on a list like that. Do I want 20 primary menu items in my face? No, but for something like “related questions” it’s better.

    I don’t think Stack Overflow is perfect, but I do disagree fundamentally on some of Dan’s design priorities. And some of the nitpicks are seriously just nitpicks (the search box? IT never confused me even once). Dan’s design definitely puts more answers on the page, which is my main gripe with Stack Overflow. So many questions have 3+ answers and only 1 or 2 of them are visible without scrolling.

    And I would agree that Stack Overflow is pretty ugly. But so was my Grandfather’s basement workshop. Being pretty wasn’t the point.

  11. Dan on July 22, 2010 at 2:27 pm

    Thanks everyone for the constructive comments, negative and positive. I appreciate many of you have put a lot of time into your responses. And to get comments from Jeff Atwood and Kathy Sierra – well, that’s pretty awesome.

    But it’s taking too much of my time, unfortunately, to moderate the swearing one-liner comments out, so I’m going to have to close comments at the 60 mark. Hopefully the thread shows a good range of viewpoints, agreements and disagreements.

    Thanks again for reading.

  12. […] is in response to Dan Zambonini’s article on the design of the excellent programming Q&A site, Stack Overflow. In it, Dan suggests some […]