What is good design?

WHAT IS GOOD DESIGN?

Saeid Zebardast

http://[email protected]

THE HIERARCHY OF WEBSITE USER NEEDS

Accessibility: The website can be found and used by all people.

Stability: The website is consistent and trustworthy.

Usability: The website is user-friendly.

Reliability: The website is consistently available, without downtime.

Functionality: The website offers content, tools and services users value.

Flexibility: The website adapts to needs and wants of users.

SERIAL POSITIONING EFFECT

The serial positioning effect, proposed by Hermann Ebbinghaus, proposes that the ability of people to remember something accurately varies with the item’s position in a list. In web design, this most closely relates to visual hierarchy.

When people browse the web, looking through pages and pages of information, they typically commit less than 10% to memory (and only 1% if they are looking for a key phrase or definition). Find helpful ways to present your information, and you might make your website and its content memorable.

FITTS'S LAW

Fitts’s Law models human interaction with computers. It states that the time and effort required to reach a target depends on the distance and size of the target.

Certain layout structures can become an obstruction. classic example of an obstruction is a clickable element that is so small that it requires precise movements and targeting to click (such as a small hyperlink text viewed on a mobile device).

COGNITIVE LOAD

The amount of time it takes to accomplish a task increases with the amount of tasks given to a person. Cognitive load is a term that describes how our learning performance is reduced when we have many things we have to do at once.

To put it simply: the more tasks we give users, the slower they are able to finish a task and the more confused they will become.

Keep things quick and easy to follow and your visitors will get what they want faster.

THE ZOMBIE BROWSING EFFECT

Zombie visitors target what they seek and don’t get distracted by other items on display at a store or on a website.

As people get used to a website, the zombie effect becomes more likely; as in a supermarket, once you know what goods you want and their location, you don’t spend much time looking elsewhere. This explains why stores sometimes change their layouts; it exposes existing customers to new goods.

Zombies avoid exploration by ignoring their surroundings and merely following their primal instincts.

CONDITIONING MODELS

In psychology, the term conditioning refers to the process of instilling predictable behavior.

Classical conditioning becomes relevant to web design when we think about visitors closing pop-up windows or turning the volume down on a website’s background music. Some reactions are natural, but many of them are conditioned by experience. These are called learned behaviors.

For example the learned behavior to a "Page not found" error message is to click the "Back" button.

Instead of trying to override natural behavior, streamline your website by adapting to them.

PEOPLE SEE BUTDON'T WATCH

Something to bear in mind - Just because a person looked at something on a page, it doesn't mean they've taken it in or that they understand what they've seen.

Often in eye tracking studies it has been shown people have looked at something, but they haven't taken it in.

PEOPLE DON'T READ

When online, people read very differently than when they're reading a book or magazine.

People don't read introductory text, instruction text, navigation options... almost anything if they can avoid it. This must be taken into account during website design, and content creation.

There are several ways to try and reduce the problem:

Reduce the word count of each page (ideally by half)

Try to remove / minimize instruction text

Highlight keywords

Use lists / bullet points where possible

Break up text using clear sub-headings

Try to start each page / paragraph with the conclusion, so that users can decide whether to read the page / paragraph early

Use images instead of words where possible.

READING BEHAVIORSOF PEOPLE

Internet users don’t really read content online, at least according to a study by Dr. Nielsen on reading behaviors of people on his website. His analysis shows that people only read 28% of the text on a web page and decreased the more text there is on the page.

IMPORTANT CONTENT ONTHE LEFT OF A WEB PAGE

PEOPLE FOLLOWTHE "F" PATTERN

People look all over the place when they first land on a page.

After an initial view, people pay more attention on the areas they feel will be most useful to them (usually the navigation across the top and down the left hand side, which encourages the "F" pattern to form).

an article in the "about us" section of a corporate website (left)

a product page on an e-commerce site (center)

a search engine results page (right)

THE PATH OF THE “Z”

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end.

TOO MANY OPTIONSENSURE NONE WILL BE CHOSEN

Choice is demotivating.

Social psychologists have noted that when people are presented with many options, they often have a very similar reaction: they choose to do nothing instead.

This is said to be the human brains ‘safety choice’, and you need to be mindful of it.

Think about your websites end goal (what needs to be accomplished?) and focus on it relentlessly, cut out the excess until you are down with the essentials, and your visitors will feel more invited to stay and click.

VISITORS READ LONG WIDTHS OF TEXT FASTER

BUT PREFER SHORTER WIDTHS

The reason that people prefer to SEE shorter text widths is because it’s more inviting.

After they actually get reading though, they tend to read faster with long widths of text, and will prefer these wider traits since their reading becomes more fluid.

•The right aligned image is being used to shorten the line length of the first few sentences.•This is because additional analytic & eye-tracking studies have shown that people are much more likely to read content if they can get past the first few lines.•After getting people hooked, the line length goes back to normal (somewhere around 600px or more) so people can read faster.

P E O P L E F O L L O W T H E “ L I N E O F S I G H T ” O F O T H E R P E O P L E

•People love big, bold pictures of other humans.•Human faces draw the most attention of nearly any image type on the web.•People will follow the line of sight of other people•Whenever you have the option to use the image of a human face, be sure to note where it’s looking at.

COLOR THEORYCONTRAST

Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background and text color.

COLOR THEORYVIBRANCY

Not to sound silly, but vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things.

CNN’s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website).

COLOR THEORYEFFECTIVE COLOR SCHEME

Triadic Color Scheme

By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

COLOR THEORYEFFECTIVE COLOR SCHEME

Compound Color Scheme (aka Split Complimentary)

The Compound color scheme is based on providing a range of Complementary Colors: two colors are chosen from opposite ends of the color spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colors.

COLOR THEORYEFFECTIVE COLOR SCHEME

Analogous

An Analogous color scheme is based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other.

COLOR THEORYCONCLUSION

Choosing colors on opposite ends of the spectrum creates a visual harmony for the eyes.

A high contrast between elements makes text easily readable, and guides your reader’s attention.

The brighter the colors, the more mental energy they will consume.

BREATHING ROOM

That brings us to the concept of white space and breathing room. If a visitor arrives on a cluttered page filled with every possible thing imaginable, they’re going to feel overwhelmed and claustrophobic.

It’s likely the page will feel haphazzard and chaotic. This leaves visitors feeling like they don’t know where to start, which means they might just skip your site entirely and move on to one where they have some breathing room.

Allow the negative space on your site to direct your visitors to the areas you want them to focus on. By combining empty space and properly styled and proportioned elements, you can encourage your visitors to look at a certain thing and take a desired action.

GOOD DESIGN IS NOT JUST WHAT LOOKS GOOD.IT ALSO NEEDS TO PERFORM, CONVERT, ASTONISH, AND FULFILL ITS PURPOSE.

IT CAN BE INNOVATIVE

OR

IT MIGHT JUST GET THE JOB DONE.

GOOD DESIGN ISINNOVATIVE

Innovative design can both be a break-through product or service, and a redesign of an existing product or service. A breakthrough product adds a before unseen value and function to the market and the user, while a redesign improves an existing product.

Innovative design always develops in tandem with innovative technology, and can never be an end in itself.

GOOD DESIGN ISFUNCTIONAL

Useful design fills its intended function – and likely both a primary and secondary function. A useful design solves problems and through its design it optimizes a given functionality.

GOOD DESIGN MAKES A PRODUCT USEFUL

It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.

GOOD DESIGN ISAESTHETIC

An aesthetic product has an inherent power of being able to fascinate and immediately appeals to its users senses.

Only well-executed objects can be beautiful. The aesthetic quality of a product is integral to its usefulness because products used every day have an effect on people and their well-being.

GOOD DESIGN ISINTUITIVE

Intuitive design explains itself and makes a user manual unnecessary. A design makes how to use, perceive, and understand a product obvious. A good design explains its function.

It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.

A GOOD BUSINESS

Assuming a product is designed to sell, a good design does well in the competition and stands out in a competitive market. A good business means a positive profit, why a good design sells well.

A GOOD DESIGN ISHONEST

An honest design communicates solely the functions and values it offers. It does not attempt to manipulate buyers and users with promises it cannot keep.

A GOOD DESIGN ISLONG-LASTING

In a society of over-consumption, a good design has an important objective. It builds on sustainability in the sense that design and materials are durable and not just a trend. Waste and over-consumption is not a part of good design.

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.

A GOOD DESIGN ISUSER-ORIENTED

Good design is based on its use and designed to improve a given situation for its user. User-oriented design adds value both intellectual and material value to its product and in turn increases satisfaction and the life situation of its user.

A GOOD DESIGN ISUNOBTRUSIVE

Products and their design should be both neutral and restrained, to leave room for the user’s self-expression. Products fulfilling a purpose are like tools and are neither decorative objects nor works of art.

A GOOD DESIGN ISTHOROUGH–DOWN TO THE LAST DETAIL

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.

A GOOD DESIGN ISAS LITTLE DESIGN AS POSSIBLE

The distinction between the common “Less is more” and “Less, but better” highlighting the fact that this approach focuses on the essential aspects thus, the products are not burdened with non-essentials. The desirable result would then be purer and simpler.

A GOOD DESIGN ENGAGES THROUGHINTRINSIC MOTIVATION

A good design makes the user want to engage through intrinsic rather than extrinsic motivation.

A GOOD DESIGN ISFOCUSED

A good design is effective and efficient in fulfilling its purpose. It relies on as few external factors and inputs as possible, and these are easy to measure and manipulate to achieve an expected other output. A good design is always the simplest possible working solution.

MORE RESOURCES

https://www.vitsoe.com/gb/about/good-design

http://ui-patterns.com/blog/What-is-good-design

http://sixrevisions.com/usabilityaccessibility/human-behavior-theories-that-can-be-applied-to-web-design/

http://www.webdesignerdepot.com/2010/05/the-psychology-of-web-design/

http://inspiredm.com/5-psychology-studies-for-smarter-web-design/