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:
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:
- 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.
- 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.
- 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:
- 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.
- 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.
- 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?
- 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).
- 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.
- 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.
- 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.
- The second most important element of the page (the original question), and it’s completely hidden.
- 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?
- This is just a whole bunch of meaningless information, and needs serious editing.
- Is ‘tagged’ a heading? Or just a random word? It seems to be the same typography as the main body text.
- 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?
- Really? A tab device to choose ordering options? This decision blows my mind.
- 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.
- As per J, this is probably too much information.
- 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.
- 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:
- Use existing analytics to identify what is and isn’t working.
- Be designed by a real designer and user experience expert.
- Take more than an hour.
- Most importantly: be based on real user research, and user tested.
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:
- A better use of negative space.
- 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).
- A defined typography hierarchy (four discrete sizes, consistent use of weight).
- A better visual hierarchy – important things are big and dark, less important things are smaller and lighter.
- A consistent and accessible use of complementary colors.
- 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).
- 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:
- The brand/position as being the place to go for answers to technical questions.
- 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.
