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:

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.

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.

The number of real Twitter followers you have matters. And using borderline-spammy techniques to get those followers works too.

I run a blog called Amorphous Blog, which has a Twitter account at @amorphousblog. I spend quite a lot of time researching and writing posts for the blog (often hours at a time), so at the end of May when it was getting 20 or so visits a day, it didn’t really feel worth the effort.

That’s when I decided to start auto-following the followers of other relevant Twitter accounts (I think I chose infoviz type accounts). At the end of each day, it would unfollow anyone who hadn’t followed it back, so that it could follow some new people the next day (it was following about 100-200 people a day).

Before I started, it had about 15 followers. It now has over 800 – hopefully relevant – followers. And, as you can see from the stats above, it seems fairly convincing. The frequency of posts has remained constant (about once a week), but the additional reach of the Twitter announcement seems to bring the short-term traffic in. Sure, it hasn’t really impacted the baseline visitor number, but at least now when I publish a post that’s taken me half a day, I feel like some people actually get to see it.

Caveat: I believe this only works if you can find Twitter accounts whose followers you think would be genuinely interested in your blog if they’d stumbled across it themselves anyway. I’ve convinced myself that I’m actually doing them a favour!

This is my home on the web, but I run (or contribute to) a number of other blogs that you may or may not know about. For the sake of self-promotion, you might want to check these out and subscribe to the RSS feeds! (I’m currently obsessed with FeedBurner stats.)

• The Januarist (RSS, @thejanuarist) – A blog about culture, often looking to the past. Kind of like a cultural Boing Boing. Average 1-2 posts a week.
• Amorphous Blog (RSS, @amorphousblog) – Another blog about culture, but this time focused on popular culture through data and charts, with a hint of humour. Average 1 post a week.
• Contentini (RSS, @contentini) – the Content Strategy consultancy/blog that Amy and I run. Obviously, the posts are about content strategy, but cover a wide range of topics, including SEO, copywriting and marketing. Average 1 post a week.
• The Content Strategist Blog (RSS) – a tumblog equivalent of Contentini; re-posting interesting content/language related things that I find on the web. This is quite new so I haven’t got into a rhythm yet – I guess it’ll average out to 3-5 posts a week.
• Lame But Cool (RSS, @lamebutcool) – I can’t honestly recommend that you subscribe to this blog; it’s just an excuse to get some content on to the web with Amazon Affiliate links in it. Average 1 post a week.
• A Tramp Abroad (RSS, @atramp_abroad) – this is really Amy’s new independent Travel Blog/Magazine project, but I’ll be contributing.
• Japanese Gore Movies (RSS, @japanesegore) – a rather niche blog about funny splatter films from Japan.
• And, of course, you should double check that you’re subscribed to the RSS for this site and that you’re following me on Twitter!

(The photo is an abandoned hotel in San Blas, our current location on our year-long travel)

Fitts’s law is a model of human movement in human-computer interaction and ergonomics which predicts that the time required to rapidly move to a target area is a function of the distance to and the size of the target.

From: Fitts’s Law, Wikipedia

the steering law is a predictive model of human movement, concerning the speed and total time with which a user may steer a pointing device (such as a mouse or stylus) through a 2D tunnel presented on a screen (i.e. with a bird’s eye view of the tunnel), where the user must travel from one end of the path to the other as quickly as possible, while staying within the confines of the path. One potential practical application of this law is in modelling a user’s performance in navigating a hierarchical cascading menu.

From: Steering Law, Wikipedia

Hick’s Law, or the Hick–Hyman Law (for Ray Hyman), describes the time it takes for a person to make a decision as a result of the possible choices he or she has.

From: Hick’s Law, Wikipedia

The Power Law of Practice states that the logarithm of the reaction time for a particular task decreases linearly with the logarithm of the number of practice trials taken. It is an example of the learning curve effect on performance.

From: Power Law of Practice, Wikipedia

I thought it would be kind of fun to create a random graph, using words from Twitter. So! Just head on over to:

http://danzambonini.com/randomgraph/

and you’ll see a new random graph every hour (well, if you refresh the page every hour)! Please be warned: I don’t filter for swear words or other potentially nasty words. Also: it relies on the Twitter API, so there’s a chance it might break every so often…

The Boundless Wolf theorem states that if you give a wolf a Moleskine and a Sharpie it will eventually recreate Leonardo’s Vitruvian Man.

(Source Image: Gray Wolf on Flickr)

This government only provides pensions for people who vote for it. There’s no accountability: if something great happens to you it might very well be their doing, but the bad stuff is not their responsibility. Have a problem with that? Tough – the president will appear to listen to everything you have to say, but will never reply. Even so, you’re expected to formally and publically thank him at least once a week.

Let’s hope that this unaccountable, totalitarian dictatorship never happens.

I thought I’d take the ‘content curator’ discussion to the extreme by adding yet more noise, in the shape of lowest-form-of-wit: sarcasm. Here are some new definitions for you to start using.

• Content Physicist. Someone who understands how content moves through the environment of the web, and can extract rules/laws about how it does so (The Law of Conservation of Energy: the energy required to read bad content is the square of the energy used to write it). For very small items of content, like Twitter, you may use Quontent Physicist.
• Content Surgeon. Someone who fixes errors in content (cf. Editor).
• Content Accountant. Someone who accounts for content (cf. performing an audit).
• Content Chemist. Someone who studies the material composition of content (cf. HTML coder, SEO consultant).
• Content Pharmacist. Someone who provides you with content to resolve your problems (cf. Search engine)

P.S. This was prompted by a blog post by Kristina Halvorson, who I admire greatly. My original comment on her piece was (I ‘curated’ this from the original blog post):

Having worked closely with the museum and gallery sector for 10 years, I have to say that I find the term ‘curator’ both naive and insulting.

A curator does more than filtering, or even ‘filtering with a theme’, or editing, or whatever the new ‘curation’ is. As I said in a tweet yesterday, one of the main differentiating factors for me is that a ‘real’ curator *cares for* (not ‘cares about’) their collection. It’s not a ephemeral ‘choose it, post it, next one’ relationship, which so many of the modern ‘curators’ seem to do.

A museum/gallery curator has a long-term duty of care over their collection; it’s not about constantly looking for the next acquisition, looking to get the next set of ‘curated’ information out. Of course, curation is a whole lot more (including training, outreach, documentation, research), but to simplify the matter I like to use this ‘care for’ topic.

I’m all for language changing and evolving – I’m with Stephen Fry on that. Language isn’t sacred, we should be pleased to see new ways of using old words. But a curator is something specific. Like the ‘citizen journalism’ of old, it can be a degrading term to the professionals who have spent years training to be a real curator/journalist, and understands all the nuances of the job.

If we want to be playful with words, can we perhaps not choose a different word that doesn’t hold such specific meaning in the first place? I guess we don’t have a choice now – the internet meme gods have spoken – but just thought I’d register my discomfort with it! (Though, if it does ‘stick’, I reserve the right to start using it in blog posts for SEO purposes!)

Kristina replied saying that she likes the term because it, “puts the onus of the ongoing care and feeding of content on the person who’s publishing the posts”, to which I replied:

I (respectfully) disagree.

The modern use of the word ‘curator’ is applied to those who filter/select/edit/aggregate/choose/collect/whatever-but-not-curate content, not the content owners. That’s going to be a very difficult thing to change. Web apps are now beginning to use the labeling ‘Curated by’ and ‘Curator’ in their text, in the context of people who can easily select and re-publish *others’* content (see: Pinterest).

These people cannot be – and, anecdotally, have no intention of being – owners of or responsible for the original content. ‘Curators’ are the middle-men, the filters.

We can’t now change who ‘curator’ refers to. Few people think that the original content owner/creator is the ‘curator’. So by perpetuating this term, are we not confusing the situation? If the ‘curator’ is, in the traditional sense, the person who ‘cares for’ the lifecycle of the content, yet the term is referring to someone who has neither the technology nor the ownership nor the inclination to do so, we aren’t putting the onus on anyone. We are just muddying the waters with mixed terms and definitions.

Toodle-pip!

PPS The photo above is totally random, just something from our current location in San Blas, Mexico.

Almost four weeks ago, I switched my personal blog (this very one) from Tumblr to WordPress, because I didn’t think Tumblr was particularly versatile or good for SEO.

The graph above shows my search engine referrer numbers, by the week. I realise this isn’t a huge amount of evidence yet, but it would seem to suggest that WordPress has the upper hand with SEO.

Now, some of you may say, “But! You’ve posted more content since then!“, and that is a good point. Even so, when I transferred my content from Tumblr to WordPress, I actually reduced the amount of content by at least 20 posts: a large number of audio/image posts didn’t come across, including my previous top SEO-referrer post on sitting/standing data (there were problems with the import, and to be honest, I didn’t think the content was particularly worth spending a lot of time recovering). So it should have all evened out.

Disclaimer, and to reiterate from my previous post: I don’t dislike Tumblr, and don’t think that advanced SEO is particularly important to everyone – certainly not most people who keep tumblogs on Tumblr. I’m not advocating that everyone should switch from Tumblr to WordPress. It’s just a move that suits me better.

Mariah Carey photo under Creative Commons license from Flickr User Capital M

Driving around Phoenix, you hear a lot of ‘classic’ 70s and 80s music, and the worst of modern music. I can’t tell you how many times I’ve heard Whitney Houston and Leona Lewis. Argh!

Anyway, in my insanity, I decided to write a quick thing that converts and post on this site into diva mode! Simply add a /whitney/ to the start of the URL.

So, for this post, try going to http://danzambonini.com/whitney/new-and-very-useful-view-any-post-in-diva-mode/

It doesn’t work particularly well. But I don’t care. I just wanna dance with somebody.