Over the spring and summer, we ran a campaign called ‘Design by Community’, in which members of the Nokia blog’s community voted for their ideal mobile phone, having been given some ideas of the constraints that actually apply to manufacturers.

It was a massive success, with hundreds of thousands of votes cast and intense discussions on the virtues of various design decisions. This piece was a slightly meddlesome and contrary reminder that asking the users is one part of the design process.

—–

There are two schools of thought when it comes to canvassing other people’s opinions on designs, and they both have strong arguments behind them. Many of these were aired when we unveiled the draft sketches of the Design by Community concept device.

On the one hand, some people would prefer that design was left up to experienced, professional designers. After all, they’re trained and paid to do the job, and know how to balance the hardware requirements with appearances. They are also responsible for having some sort of design vision, so that the whole thing fits together properly. What’s more, they might argue, if you ask 1000 people, then you’ll get 1000 answers and the product ends up compromised, trying to balance too many wishes at once. Design classics aren’t voted on, they say: they come from inspired vision and expertise.

Those are good points, but the other side of the story is that locking your designers in a room until they’ve come up with a new phone model isn’t going to work either. Phones aren’t just electronic sculptures, they are also business ventures. If you haven’t done some homework, then your venture will fail. You need to know what people want from their phones, what’s seen as fashionable and how much people are prepared to pay. You don’t need to be a slave to that, otherwise nobody would ever come up with anything new, but in-depth market knowledge is definitely one ingredient of a successful new model.

The other thing to point towards is the power and capability of the Open Source movement. Most of the Internet is made by unpaid contributors sharing their knowledge and craft for free, both the content and the technology behind it. Wikipedia is arguably the greatest repository of knowledge that humanity has ever created, and it was done without payment. Large numbers of people can and do group together to produce really excellent things. Jimmy Wales might be the architect of Wikipedia, but he hasn’t written a meaningful proportion of its content. It’s Encyclopedia by Community.

What I think is that the truth probably lies somewhere between these extremes. Artistic vision and a tight focus are really important parts of product design. But so is understanding, anticipating and researching what it is that people want. That’s a big part of why we wanted to conduct the Design by Community project. So we can unravel together the current state of people’s expectations, learn a little bit more about the ingredients of a successful product and hopefully influence the path of future devices.

picture credit: arquera

Regulars will have noted that things don’t stand still for too long here on twopointouch. Apart from the post count. Fiddling with new themes and plugins is almost compulsive behaviour. While I’ve only had around four long-term favourite themes over the last five years, there’s every chance that you’ll have dropped in at some point when I’ve been doing something totally different — for about five minutes.

This continual urge for dalliance when it comes to off-the-peg themes has now led me in a totally new direction. Actually making something for myself. It’s all a bit scary and random, but one of the things that I’ve learned is that there’s lots of info and tools to help you out.

This is how I started.

I like the functionality of the Hybrid theme for WordPress. It’s got tons of page templates, plugin-compatibility and SEO right out of the box. So let’s start there.

It’s built for designers, and one consequence of that is that it looks a bit drab when you use it ‘naked’. The author, Justin Tadlock, encourages people to develop child-themes. For a while, I used his Structure template, which I customised very slightly to allow for full posts on the home page and the spaceman picture that I stole from the wonderful artist Jeremy Geddes.

Then I managed to break that, while trying to upgrade something else. I know how I broke it, and I could go back. But the breakage made me feel that I ought to be doing something else. That I should be trying to make something of my own.

So I reinstalled Hybrid and created a child-theme. This means that it takes everything Hybrid has to offer, but then gives you a blank canvas at the same time. By a blank canvas, I mean a new CSS file that can override every element in the theme.

Looking around recently, I liked the look of a theme called Clean Simple White. Up to a point. I liked the clean and simple bit, but there seemed to be loads of lines all over the place (according to my simple aesthetic sensibilities). It also didn’t work with the pages I’d already made and I like serifs for body copy — sue me.

So, I thought, I could take some of that look and remake it with Hybrid. You have to learn a tiny bit of CSS (this site makes it really easy) and you really want the Firebug extension for Firefox for testing and stealing things. And then it’s just trial and error.

I’m quite pleased with the look so far, but it’s maybe a bit wide and I want my spaceman back — maybe as a sort of ghost image behind the header area. Let’s see how we go.

You might not realise it, but Xara is one of the real grandaddies of software development, having been formed in the UK in 1981. Nowadays, the company is owned by the German Magic AG group, though they’re still based in Hemel Hempstead, north of London. Over the years, they’ve produced all sorts of stuff: they made Snake, Wordwise and Space Invaders for the BBC Micro, for example, and continued to support the Archimedes range of education-focused computers over the 90s.

Since 1994, however, they’ve been best-known for their Windows-based design software. It’s always had a couple of advantages over the ‘industry standard’ software tools, which remain as true now as they were 15 years ago:

1. it’s really fast. That’s less of a concern nowadays, under most circumstances, but until recently, doing anything with high-res photos was a pain in the neck;
2. mixing photos and vectors is really easy. While it’s predominantly a vector illustration package, it’s always been possible to edit photos in place, non-destructively;
3. it’s really inexpensive. The basic version costs £69, with the pro version costing £249. Adobe and Quark might sell you a beermat for that sort of money.

So what’s new in this version? For me, three things in particular. The last version – Xara Xtreme – introduced web page design options: these are now much improved. Second, Photo-editing no longer requires separate applications for 90% of what most people want to do. Third, working with longer chunks of text is a lot more powerful. There’s dozens of other things – you can check the list on the site.

It also looks very smart indeed.

MoMA New York’s department of architecture and design has acquired the @ symbol for its collection.

This is a fine piece of puffery, of course. The symbol cannot be owned by an individual gallery since it already belongs to all of us. Senior curator Paulo Antonelli explains:

It relies on the assumption that physical possession of an object as a requirement for an acquisition is no longer necessary, and therefore it sets curators free to tag the world and acknowledge things that “cannot be had”—because they are too big (buildings, Boeing 747’s, satellites), or because they are in the air and belong to everybody and to no one, like the @—as art objects befitting MoMA’s collection. The same criteria of quality, relevance, and overall excellence shared by all objects in MoMA’s collection also apply to these entities.

The symbol’s etymology lies in medieval commerce. Some scholars think that it represents an ‘a’ inside an ‘e’, standing for ‘each at’. This meaning was its only real use before computers came along. You might receive a bill saying:

10 geese @30p … £3.00

When computers arrived, a thousand years later, the fairly trivial and unused piece of punctuation was co-opted by the developers of programming languages to stand as shorthand for various functions and labels (thanks, wikipedia):

• In C#, it denotes “verbatim strings”, where no characters are escaped and two double-quote characters represent a single double-quote. As a prefix it also allows keywords to be used as identifiers.
• In Java, it is used to denote annotations, a kind of metadata, since version 5.0
• In modal logic, specifically when representing possible worlds, @ is sometimes used as a logical symbol to denote the actual world (the world we are ‘at’).
• In Pascal, @ is the “address of” operator (it tells the location at which a variable is found).
• In Perl, @ prefixes variables which contain arrays.
• In PHP, it is used just before an expression to make the interpreter suppress errors that would be generated from that expression.
• In Python 2.4 and up, it is used to decorate a function (wrap the function in another one at creation time).
• In Ruby, @ prefixes instance variables, and @@ prefixes class variables.
• In Scala, it is used to denote annotations (as in Java), and also to bind names to subpatterns in pattern-matching expressions.
• In Clipper, it is used to denote position on the screen. For example: @1,1 SAY “HELLO” to show the word “HELLO” in line 1, row 1.

With the advent of the Internet, it became ‘at’ again, best known as the middle bit of email addresses ‘name@host’, and more recently as the way in which people have managed to create threaded instant messages using Twitter, despite its initial lack of support for such a model.

So very good. But why does it belong in a gallery, even one about design rather than fine art? It’s not something we can attribute to a particular designer, like the recycle symbol. It doesn’t even have a single visual representation, like Harry Beck’s tube map, but changes according to the typeface used to show it.

MoMA disputes these objections, arguing that the use of the symbol for email by Ray Tomlinson in 1971, appropriating an ancient symbol for an ultramodern use is a deliberate and elegant act of design.

But to me, the American connection is a bit of a red herring. The history of the symbol is one of reinvention and cunning shorthand. It is also very interestingly international, with its meaning in other languages strikingly organic and affectionate:

The French and Italians have nicknamed it the “snail.” The Norwegians have plumped for “pig’s tail,” the Germans “monkey’s tail,” and the Chinese “little mouse.” The Russians think of it as a dog, and the Finns as a slumbering cat.

It’s also ‘little monkey’ in Macedonian and Slovenian; ‘dog’ in Russian; most beautifully, it is ‘moon’s ear’ in Kazakh.

English speakers seem rather unimaginative in comparison, don’t they? The international dimension uncovers a layer of poetry in our relationship to the symbol. Its etymology, translations and appropriations are all testament to human imagination and design. So, yes, I’m fine with it being in a gallery.

PS: finding an image to illustrate this post unearthed some truly horrendous clip-art. Thank heavens for Wikipedia, otherwise it would be one of this lot.

Because these images are machine-generated, there’s a temptation to believe that they are transparent. That they are mirrors of hard-and-fast facts. They are not. No image is unmediated nor undesigned. Someone decided to style the information in this way, with this scope and format, these colours and these dimensions. And there’s an agenda in that, whether overt or unrealised: this is how we visualise this stuff and how we want you to visualise it, too. They fulfil an ideological function.

For this post about data-visualisations, I’m going to focus on the visualisation part of the term (“You can picture it like this“), rather than the data part.

Why are these the images that are selected and why do they look the way they do?

The Connected Web

These types of images are especially popular. I think that when you sign the application for the International League of Social Media Consultants, you must pledge to include them in every slide deck.

This is what the web looks like, we’re told. The visualisation holds a nod to the Powers of Ten and the Mandelbrot Set, a web of terrifying complexity that will reveal infinitely more layers of complexity the closer you zoom in. This web is far bigger than you know, or can possibly know. They may remind you, too, of the molecular diagrams of complex carbohydrates that you never quite understood properly at school.

It looks like this because today’s web is about interconnectedness, not just in the sense of wires under the streets, but the connections of tribes of influence and ultimately of every individual on the web – each of which is subtly different (unless, of course, they are not). The colours are interesting, too. Note the preponderance of blue (unvisited links) and red (alert!) in these pictures.

Why do Web 2.0 presentations nearly always start with this image? Because they need to disabuse you of the notion that the web looks like this:

You don’t need a £1000-a-day consultant for a web with one input box and two buttons, one of which is almost never used. No; understanding the web requires science beyond your ken and difficult Maths.

The Tag Cloud

I’m actually a big fan of tag-clouds – as I’ve mentioned before. I think they encourage exploration, individual journeys and also give an instantly understood visual fingerprint to a site.

So two thumbs-up for ones like this:

The ones that I’m less keen on sometimes look a bit like this:

Or, even worse, like this:

The video shows CNN creating – and then seriously discussing – a ‘word cloud’ in its terminology, made from President Obama’s press conference on March 24. Not a brilliant starting point. Tag clouds do not provide a lot of analysis for documents. They flag up the main topics. They do nothing to establish sentiment or tone. If Obama’s speech had consisted entirely of questions, rather than statements, the tag cloud would look exactly the same.

By the way, UK’s Daily Telegraph immediately copied the idea, to our shame, in order to ‘analyse’ the Chancellor’s budget speech last month:

The Friend Wheel

The Friend Wheel became one of the enduring visual images to try to explain Facebook and the Social Graph – the network’s term for the interconnectedness of your friends in a social network – and why advertising on it will work (click for big).

What the hell does this show? Well, that my friends on Facebook sit in three broad groups: the green ones are the social media whores – they all know each other as well as me. I’ll probably see them at a London networking event once a month. The blue ones seem to know each other, but not the greens. They are perhaps specialists or old work colleagues. The pinks are less likely to know the greens and blues – maybe family and friends who came a little later to the network?

What you realise after a while, is that everybody’s friend wheel looks exactly the same. That’s what Facebook is like. People who don’t do the whole social media thing probably won’t have as much of a green crowd, but for them, school friends or people within a large corporation might take their place.

Again, it seems like over-complication and scientification of some common sense about what Facebook is like. This, more familiar, view of your friends doesn’t look like you need a specialist firm advising you:

But, oh!, the colours and so many lines!

Last Words

I am not remotely as cynical as this might imply. I remain an enormous fan of data visualisations, despite all of this, and advise a visit to Visual Complexity on a weekly basis to get your fix. But do be alert: don’t forget that this is an art as much as a science. ;-)

o AIG www.aiglondon.com

o Conchango www.conchango.com

o Digit www.digitlondon.com

o Digital Outlook www.digital-outlook.com

o Glue www.gluelondon.com

o Imagination www.imagination.com

o Kin www.kin-design.com

o Lateral www.lateral.net

o Moving Brands www.movingbrands.com

o Poke www.pokelondon.com

o Precendent www.precedent.co.uk

o Smoothe www.smoothe.com

o TribalDDB www.ddblondon.com/tribalddb

o Up the Resolution www.uptheresolution.co.uk

Should be an excellent session. It’s part of the conference package (book now), but you can get into this bit for free. More details here.

I’d be even more delighted if you were to: (a) book for the event; and (b) help us get the word out.

On getting the word out — grab this badge, stick it on your site and link to www.idesign-london.com — there is a pint in it for you*. I can do you a white version or different sizes if you like. Or — look — here’s the PSD File to *cough* mash-up your own!

The following might be loosely interpreted as marketing talk. You are free to go straight down to the blue button.

Early Bird Rates: Admission to the conference, the exhibition and portfolio clinic is currently available for just £60 (£50 for concessions). This price will rise in August, so don’t delay, book today. drinkapintamilkaday.

idesign 08 will showcase the best and most innovative work in the field and feature keynote speakers at the top of the profession. The programme is designed to be inspirational, informative and challenging. You will be a better interactive designer by the end of the day — or better able to understand the designers who work with you! You’ll also know about new opportunities and your pathway through this new digital world.

This conference is for you if:

• you want to be inspired with new ideas about web, 3D, interactive and mobile.
• you are a design professional who needs to keep abreast of the latest thinking and see best practice.
• you’re passionate about the future of the digital world.
• you want to share ideas and opportunities with like-minded creatives.

Speakers (more to come!):

· Brendan Dawes, Creative Director — MagneticNorth

· Ann Longley, Digital Strategy Director — Media Edge: CIA

· Adrian Shaughnessy, Consultant Creative Director — This is Real Art

· Colin Jenkinson, Design Director — Cogapp

· Ximo Peris, Creative Director — Smoothe

· Simon Waterfall, Creative Director of Poke and president of D&AD — Poke

· Michael Nutley, Editor-in-Chief, NMA — http://www.nma.co.uk

· More information about the speakers and the programme at http://www.idesign-london.com

The event will also host portfolio clinics from London’s top 10 digital agencies, and the digital design day exhibition and seminars.

Booking site:

Notes:

If you wish to make a group booking (five people or more) or believe you might be eligible for a press pass, email michelle.hardiman@nmk.co.uk for more information. Or just leave a comment, and I’ll get back to you.

Concessions are available for students, unemployed, freelancers, not-for-profit companies and charities. And other riff-raff, I expect. ;-)

*or simply great karma, for non-pint-drinkers.

Text attracts attention before graphics. Contrary to what you might think, the first thing users look at on a website isn’t the images. Most casual users will be coming to your site looking for information, not images, so make sure your website is designed so that the most important parts of your text are what is most prominent.

Virtual Hosting Blog » Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies

And I’m not just linking to this because the site’s authors made the mistake of including this blog in their Top 100 List of Social Media and Social Networking Blogs.

Here’s the US site:

And here’s the new Danish version:

As Ernst Poulsen points out, in the new design stories are simply ordered chronologically like a blog; each is presented in the same style, no matter what their relative importance, like a blog; they are all tagged, like a blog; there’s minimal navigation and any user can contribute, like err… a social network.

True, this isn’t a million miles away from the appearance of the front page of The Register (est’d 1994), though its stance on user-generated stuff seems to indicate that it’s unlikely that readers will be writing on the homepage any time soon. Perhaps more adventurously, ZDNet.co.uk has recently relaunched with user communities and blogs, some of which are on the front page, albeit beneath the fold.

Poulsen is concerned that computerworld.dk is throwing the baby out with the bathwater. Traditional news website design aids communication by drawing attention to the most important stories. Giving every story the same weighting and sorting them by time-stamp won’t help a busy reader with two minutes to spare digest the day’s key stories very well.

I think I agree. However, the old model of users’ interaction with an online publication relegated to a forum on a distant page, far away from the journalists’ stories, has clearly had its day. The half-way house between traditional editorial models and social media mayhem offered by ZDNet.co.uk doesn’t fall between stools, as you might expect, but combines some of the benefits of both approaches. It remains to be seen, of course, whether the enterprise IT types that the site aims at will embrace the read/write web.

[disclosure: my wife works for ZDNet UK]

Update: Very interesting riposte on the Poynter website to Ernst Poulsen by Claus Solvsteen, who worked on the Danish design. He says the design allows for quick scanning and that other display options will be made available in the future.