1. WHAT IS GOOD DESIGN?
Saeid Zebardast
http://zebardast.ir
saeid@zebardast.ir
2. 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.
3. 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.
4. 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).
5. 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.
6. 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.
7. 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.
8. PEOPLE SEE BUT
DON'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.
9. 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.
10. READING BEHAVIORS
OF 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.
12. PEOPLE FOLLOW
THE "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)
13. 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.
14. TOO MANY OPTIONS
ENSURE 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.
15. 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.
16. •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.
17. PEOPLE FOLLOW THE “LINE OF SIGHT” OF OTHER PEOPLE
•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.
18. COLOR THEORY
CONTRAST
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.
19. COLOR THEORY
VIBRANCY
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.
20. 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).
21. COLOR THEORY
EFFECTIVE COLOR SCHEME
Triadic Color Scheme
By using an
Equilateral Triangle,
you can ensure the
colors have equal
vibrancy and
compliment each
other properly.
22. COLOR THEORY
EFFECTIVE 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.
23. COLOR THEORY
EFFECTIVE 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.
24. COLOR THEORY
CONCLUSION
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.
26. 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.
27. 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.
28. GOOD DESIGN IS
INNOVATIVE
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.
29. GOOD DESIGN IS
FUNCTIONAL
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.
30. 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.
31. GOOD DESIGN IS
AESTHETIC
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.
32. GOOD DESIGN IS
INTUITIVE
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.
33. 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.
34. A GOOD DESIGN IS
HONEST
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.
35. A GOOD DESIGN IS
LONG-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.
36. A GOOD DESIGN IS
USER-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.
37. A GOOD DESIGN IS
UNOBTRUSIVE
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.
38. A GOOD DESIGN IS
THOROUGH–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.
39. A GOOD DESIGN IS
AS 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.
40. A GOOD DESIGN ENGAGES THROUGH
INTRINSIC MOTIVATION
A good design makes the user want to engage through
intrinsic rather than extrinsic motivation.
41. A GOOD DESIGN IS
FOCUSED
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.