Posted in: Web 2.0 Design Guide
by: admin
Simplicity
“Use as few features as are necessary to achieve what you need to achieve”
Web design is simpler than ever, and that’s a good thing.
2.0 design means focused, clean and simple.
That doesn’t necessarily mean minimalist, as I’ll explain later.
I really believe in simplicity. That’s not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.
I’ve written elsewhere about Occam’s Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.
Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?
The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don’t mind – it’s easy, and you get just what you came for.
Why simplicity is good
- Web sites have goals and all web pages have purposes.
- Users’ attention is a finite resource.
- It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice)
- Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
- So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.
When & how to make your designs simple
When?
Always!
How?
There are two important aspects to achieving success with simplicity:
- Remove unnecessary components, without sacrificing effectiveness.
- Try out alternative solutions that achieve the same result more simply.
“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”
Antoine de Saint-Exupéry,
Terre des hommes, 1939
Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual elements.
Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.
Use visual detail – whether lines, words, shapes, colour – to communicate the relevant information, not just to decorate.
Here’s an example of a design that suffers from not enough simplicity.
Yaxay’s interface uses a lot of pixels, but the vast majority of them are decorative, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.
See how much “stuff” there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.
Edward Tufte is the boss when it comes to the design of information. He uses the terms “data ink” (i.e. detail that enables information transfer) and “non-data ink” (i.e. detail that’s just detail) to describe this phenomenon.
One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.
Taking the Yaxay detail above, there’s a lot of what I call “busyness”, i.e. a lot of edges, tonal changes, colour variations, shapes, lines… a lot of stuff to look at. But, in this detail, the only useful features are:
- The site logo, and
- the label on the nav button (which reads “art gallery”)
All the rest of the “busyness”: the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients… all this is noise, it’s all “non-data ink”, because it’s not enabling communication.
I’m not against richness, complexity or beauty in web design
Simplicity means:
Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.
Of course, often what you’re communicating isn’t hard data, but soft information.
Hard data
means facts, like news, stock prices, train times, or how much money is in your bank account…
Soft information
covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!
Whether what you’re communicating is hard or soft, your pixels count, so use them consciously and with care.
Take the example below:
Alex Dukal’s site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex’s work.
But it’s also simple, because it uses its pixels/ink/busyness with care and sensitivity. It’s not gratuitous, it’s economical and rich.
Whatever you’re saying, choose wisely where you use your ink/pixels. Use it to communicate, first and foremost. Then, ask whether you can communicate just as effectively with less. If so, do it.
source: http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php
I want to thank the blogger very much not only for this post but also for his all previous efforts. I found http://www.vergecreation.com to be extremely interesting. I will be coming back to http://www.vergecreation.com for more information.
Not bad article, but I really miss that you didn’t express your opinion, but ok you just have different approach
Your post is number “1″ in my book!
Hello…
My life,vist it http://xiangcaidress.i.ph/blogs/xiangcaidress/ ,Thanks….
Hello…
My life,vist it http://deborahr11.wordpress.com/ ,Thanks….
Great One…
Ok. Is there anything I could possibly hook up to my piano or even a type of microphone or any type of technology out there where I can record my music I play on my piano and then it will convert it to music notes on music sheet paper through my laptop…