Design principles

The following is a scrapbook of design principles that I have collected over time. I find them good to reference when trying to advocate good design and user experiences:


Web [design] dogma 06 – by Eric Reiss (and friends)

  1. Anything that exists only to satisfy the internal politics of the site owner must be eliminated.
  2. Anything that exists only to satisfy the ego of the designer must be eliminated.
  3. Anything that is irrelevant within the context of the page must be eliminated.
  4. Any feature or technique that reduces the visitor’s ability to navigate freely must be reworked or eliminated.
  5. Any interactive object that forces the visitor to guess its meaning must be reworked or eliminated.
  6. No software, apart from the browser itself, must be required to get the site to work correctly.
  7. Content must be readable first, printable second, downloadable third.
  8. Usability must never be sacrificed for the sake of a style guide.
  9. No visitor must be forced to register or surrender personal data unless the site owner is unable to provide a service or complete a transaction without it.
  10. Break any of these rules sooner than do anything outright barbarous.

MetaDesign Interaction design principles

1. A gram of research is worth a kilo of code

Good design starts by discovering what motivates your intended audience, what their goals and behaviours are. Technology enables good design

2. Usefulness must precede usability

It doesn’t matter how usable something is if nobody needs it. Validate your concepts usefulness before you start designing

3. Don’t make users think

Transactional design is no place for subtlety or distraction. Make it easy for users to find what they need.

4. Obvious is sexy

Beauty without depth is just decoration. Users like knowing what’s a click deeper – without having to click.

5. Less instruction, more cues

Users rarely read instructions – they are looking for something to click on until they feel they are at their intended destination.


Edward Tufte’s critique of the iPhone

Thanks to Brett Collinson for the heads up on this one.

  1. To clarify, add detail,
  2. Clutter and overload are not an attribute of information, they are failures of design. If the information is in chaos, don’t start throwing out information, fix the design, and
  3. Strive to eliminate the admin debris and as much as possible let the information be the interface

http://www.edwardtufte.com/bboard/iphone-video.adp


“I didn’t have time to write a short letter, so I wrote a long one instead.” – Mark Twain

I like this quote as it sums up how hard it is to get a communication (be it copy, a button label or an email etc) right. That condensing the communication to convey the right meaning in the right tone is a difficult process. It also conveys that he is considerate of his audience which is nice too. I’ve often found myself re-writing an email to get the tone and message conveyed in a constructive manner so this quote resonates with me.

Kudos to Greg Ralph for passing on another pearl of his wisdom.

And more on the same theme: More time = shorter letter.


The End-User Manifesto

From Gaping Void

Things that need to be in the mind of anyone building software, particularly for the Web.

  1. Don’t waste my time.
  2. Help me do the right thing.
  3. Respect my decisions.
  4. Design well, and guide me to make the right decisions by that design.
  5. Don’t lie to me – if I see something in front of me, then I should be able to act on it unless the interface tells me I can’t.
    1. If I see a text area, I expect to be able to type as much as that text area holds. Scrollbars indicate to me that it is bigger than can be displayed in the space available, and I’m ok with that up to a point.
    2. If there’s a character limit, show me that by stopping me from typing past a certain point.mIf there are limits on the types of characters I can enter, tell me that before I move on to something else.
  6. Keep your pop-ups to yourself. The only thing that’s helpful in a pop-up format is your help system, where I can learn something without losing my place.
  7. Advertising.
    1. I have music, thanks. No sound effects or music with your advertisements, if you must have them.
    2. No flashing colors, mini-videos, strobing effects, blinking idiot cartoons, or anything else that’s the equivalent of yelling at me.
    3. Don’t confuse loud with appropriate. Google appears to understand context and content, and shows things that are SOMEHOW RELATED to what I’m doing. No, I will never want a mortgage from you.
  8. Get to the point. Put the focus of your page on what I’m looking there to learn, not on someone else’s advertising with your information hidden below the flashing duck.
  9. I can print things without your assistance. When I click on “Printer-friendly”, I really just want a page of the text I’m interested in saving to my computer without the blinking advertisements.
  10. W3C standards compliance. How I get to your site is my decision. No, I’m not buying a specific type of computer just to fill out your form because you decided that ActiveX components were the quick way out of the development cycle. If you’re going to be Web-based, then attempt to understand that the Web is not yours.
  11. Test your stuff. I’m not your employee, and you’re not paying me to test your site or your software. Please re-read 1-4 above.
  12. Please also proof-read what you’ve written, or have someone else do so.
  13. Keep the noise level lower by not using animated graphics to illustrate your mood, or plug you into social networks. Yes, kids in junior high think it’s cute, but it gets very old very quickly.
  14. Tell me a compelling story. This applies to weblogs, corporate sites, fan sites, any site. I’m visiting you to learn something, even if it’s just a good story about something you’re selling or the day you had. Good stories inspire conversations, and markets are built on those.

Google’s Philosophy

Not all design principles but I like them all the same, particularly point 9:

  1. Focus on the user and all else will follow.
  2. It’s best to do one thing really, really well.
  3. Fast is better than slow.
  4. Democracy on the web works.
  5. You don’t need to be at your desk to need an answer.
  6. You can make money without doing evil.
  7. There’s always more information out there.
  8. The need for information crosses all borders.
  9. You can be serious without a suit.
  10. Great just isn’t good enough.

Taken from, and more info at, http://www.google.com.au/intl/en/corporate/tenthings.html.


Attention to detail

Attention to design details implies that the same care and attention has been spent on other (less visible) parts of the product – which implies that this is a trustworthy product.

Taken from ALA: In Defense of Eye Candy.


Ten principles for good design from Vitsoe

Taken from http://www.vitsoe.com/en/gb/about/gooddesign

Thanks to Mathew Sarah for sharing this find.

1. Good design is innovation

It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product. The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.

2. Good design makes a product useful

A product is bought in order to be used. It must serve a defined purpose – in both primary and secondary functions. The most important task of design is to optimise the utility of a product.

3. Good design is aesthetic

The aesthetic quality of a product – and the fascination it inspires – is an integral part of its utility. Without doubt, it is uncomfortable and tiring to have to put up with products that are confusing, that get on your nerves, that you are unable to relate to. However, it has always been a hard task to argue about aesthetic quality, for two reasons.

Firstly, it is difficult to talk about anything visual, since words have a different meaning for different people.

Secondly, aesthetic quality deals with details, subtle shades, harmony and the equilibrium of a whole variety of visual elements. A good eye is required, schooled by years and years of experience, in order to be able to draw the right conclusion.

4. Good design helps a product to be understood

It clarifies the structure of the product. Better still, it can make the product talk. At best, it is self-explanatory and saves you the long, tedious perusal of the operating manual.

5. Good design is unobtrusive

Products that satisfy this principle are tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained leaving room for the user’s self-expression.

6. Good design is honest

An honestly-designed product must not claim features – more innovative, more efficient, higher value – it does not have. It must not influence or manipulate buyers and users.

7. Good design is durable

It is nothing trendy that might be out-of-date tomorrow. This is one of the major differences between well-designed products and trivial objects for a waste-producing society. Waste must no longer be tolerated.

8. Good design is thorough – to the last detail

A truly integral product must be good in all aspects and form a complete and convincing unity. Superficiality and sloppiness in details indicate that the designer hardly values the product, its function and the people who use it. Mediocre work is the more annoying and frustrating the longer and more intensely you use the product.

The details of a design must be meticulous, even though, unfortunately, many people do not perceive them.

9. Good design is concerned with the environment

Design must contribute towards a sustainable environment and a sensible use of raw materials and energy. This means considering not only actual pollution, but also the visual pollution and destruction of our environment.

Visual environmental pollution causes a similar strain on, and impairment of, of our living quality as the pollution of the air, the earth or water.

10. Good design is as little design as possible

Back to purity, back to simplicity.

Our one and only chance is the return to simplicity. One of the most significant principles is to omit the unimportant in order to emphasise the important. Reduction in every respect.

A simple form is generally more difficult to develop, and as little design as possible is often more expensive in production. But the effort is worth it. Shapes become placid, pleasant, understandable and long-lived.

One of the most important duties of designers today is to help clear up the chaos in which we live. Now is the time for us to discover our environment anew and to return to the simpler more basic aspects of life.


Facebook Design Principles

Taken from http://www.thomascrampton.com/social-media/facebook-china-asia-social-media-design-user-interface/

Thanks to Mathew Sarah for sharing this find.

Universal

Our mission is to make the entire world more open, and this means reaching every corner, every person. So our design needs to work for everyone, every culture, every language, every device, every stage of life. This is why we build products that work for 90% of users and cut away features that only work for just a minority, even if we step back in the short term.

Human

Users return to our site to be surrounded by friends and other people near to them. This is a central promise of our product, that the people you care about are all in one place. This is why our voice and visual style stay in the background, behind people’s voices, people’s faces, and people’s expression.

Clean

Our visual style is clean and understated, to create a blank canvas on which our users live. A minimal, well-lit space encourages participation and honest transparent communication. Clean is the not the easiest approach to visual style. To the contrary, margins and type scale, washes and color become more important as we reduce the number of styles we rely on.

Consistent

We invest our time wisely, by embracing patterns, recognizing that our usability is greatly improved when similar parts are expressed in similar ways. Our interactions speak to users with a single voice, building trust. Reduce, reuse, don’t redesign.

Useful

Our product is more utility than entertainment, meant for repeated daily use, providing value efficiently. This is why our core interactions, the ones users engage daily, are streamlined, purged of unnecessary clicks and wasted space.

Fast

We value our users time more than our own. We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.

Transparent

Users trust us with their identity, their photos, their thoughts and conversation. We reciprocate with the utmost honesty and transparency. We are clear and up front about what’s happening and why.


Jacob Nielsen

Taken from 10 Heuristic for user interface design.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.


Why Wesabe Lost to Mint

Taken from this blog post.

“Mint focused on making the user do almost no work at all, by automatically editing and categorizing their data, reducing the number of fields in their signup form, and giving them immediate gratification as soon as they possibly could; we completely sucked at all of that…I was focused on trying to make the usability of editing data as easy and functional as it could be; Mint was focused on making it so you never had to do that at all. Their approach completely kicked our approach’s ass.”


Steve Jobs quotes

“Simple can be harder than complex. You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end, because once you get there, you can move mountains.”

“Innovation is saying no to 1,000 things”

“When you first start off trying to solve a problem, the first solutions you com dup with are very complex, and most people stop there. But if you keep going, and live with the problem and peel more layers of the onion off, you can often times arrive at some vert elegant and simple solutions. Most people just don’t put in the time or energy to get there.”

“When you’re a carpenter making a beautiful chest of drawers, you;re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. YOu’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

“Quality is more important than quantity. One home run is much better than two doubles.”