SlideShare a Scribd company logo
1 of 42
Download to read offline
WHAT IS GOOD DESIGN?
Saeid Zebardast
http://zebardast.ir
saeid@zebardast.ir
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 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.
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 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.
IMPORTANT CONTENT ON
THE LEFT OF A WEB PAGE
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)
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 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.
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.
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.
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.
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.
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 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.
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.
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.
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.
What is good design?
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 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.
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.
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 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.
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.
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 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.
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.
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.
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.
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.
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.
A GOOD DESIGN ENGAGES THROUGH
INTRINSIC MOTIVATION
A good design makes the user want to engage through
intrinsic rather than extrinsic motivation.
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.
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/

More Related Content

What's hot

Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Reviewsus22
 
Understanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignUnderstanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignHashem Zahran
 
Web based writing
Web based writingWeb based writing
Web based writingAwais Khan
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web4Good.org
 
Mobile Apps Design Principles
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design PrinciplesMohamad Sani
 
User research - a practical introduction
User research - a practical introductionUser research - a practical introduction
User research - a practical introductionClaudio Pires Franco
 
How you can use visual cues to increase conversions
How you can use visual cues to increase conversionsHow you can use visual cues to increase conversions
How you can use visual cues to increase conversionsConversion Fanatics
 
Denis Boudreau - 2017 Design Trends
Denis Boudreau - 2017 Design TrendsDenis Boudreau - 2017 Design Trends
Denis Boudreau - 2017 Design TrendsWeb à Québec
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 

What's hot (20)

Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Review
 
Understanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignUnderstanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web Design
 
Human memory
Human memoryHuman memory
Human memory
 
Web based writing
Web based writingWeb based writing
Web based writing
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
 
Survey results
Survey resultsSurvey results
Survey results
 
Mobile Apps Design Principles
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design Principles
 
User research - a practical introduction
User research - a practical introductionUser research - a practical introduction
User research - a practical introduction
 
guide3_webwork
guide3_webworkguide3_webwork
guide3_webwork
 
Final done Evaluation
Final done Evaluation Final done Evaluation
Final done Evaluation
 
FMP Evaluation Completed
FMP Evaluation CompletedFMP Evaluation Completed
FMP Evaluation Completed
 
Changed FMP Evaluation
Changed FMP EvaluationChanged FMP Evaluation
Changed FMP Evaluation
 
DONE EVALUATION
DONE EVALUATIONDONE EVALUATION
DONE EVALUATION
 
How you can use visual cues to increase conversions
How you can use visual cues to increase conversionsHow you can use visual cues to increase conversions
How you can use visual cues to increase conversions
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
 
Denis Boudreau - 2017 Design Trends
Denis Boudreau - 2017 Design TrendsDenis Boudreau - 2017 Design Trends
Denis Boudreau - 2017 Design Trends
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Writing for the web
Writing for the webWriting for the web
Writing for the web
 
Web design
Web designWeb design
Web design
 
FMP Evaluation Finished
FMP Evaluation FinishedFMP Evaluation Finished
FMP Evaluation Finished
 

Viewers also liked

معرفی سیستم‌های توکار در دانشگاه صنعتی شریف
معرفی سیستم‌های توکار در دانشگاه صنعتی شریفمعرفی سیستم‌های توکار در دانشگاه صنعتی شریف
معرفی سیستم‌های توکار در دانشگاه صنعتی شریفnumb95
 
مستندات رفتاری در انجمنهای نرم افزار های آزاد
مستندات رفتاری در انجمنهای نرم افزار های آزادمستندات رفتاری در انجمنهای نرم افزار های آزاد
مستندات رفتاری در انجمنهای نرم افزار های آزادnumb95
 
Web Components Revolution
Web Components RevolutionWeb Components Revolution
Web Components RevolutionSaeid Zebardast
 

Viewers also liked (8)

How to be different?
How to be different?How to be different?
How to be different?
 
What is REST?
What is REST?What is REST?
What is REST?
 
Introduction to Redis
Introduction to RedisIntroduction to Redis
Introduction to Redis
 
معرفی سیستم‌های توکار در دانشگاه صنعتی شریف
معرفی سیستم‌های توکار در دانشگاه صنعتی شریفمعرفی سیستم‌های توکار در دانشگاه صنعتی شریف
معرفی سیستم‌های توکار در دانشگاه صنعتی شریف
 
MySQL for beginners
MySQL for beginnersMySQL for beginners
MySQL for beginners
 
مستندات رفتاری در انجمنهای نرم افزار های آزاد
مستندات رفتاری در انجمنهای نرم افزار های آزادمستندات رفتاری در انجمنهای نرم افزار های آزاد
مستندات رفتاری در انجمنهای نرم افزار های آزاد
 
Web Components Revolution
Web Components RevolutionWeb Components Revolution
Web Components Revolution
 
Java for beginners
Java for beginnersJava for beginners
Java for beginners
 

Similar to What is good design?

The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Designolindgallet
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me thinkJason White
 
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Adam Guerguis
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me thinkJason White
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignChristy Van Heugten
 
Content Strategy: Do It For Your Users
Content Strategy: Do It For Your UsersContent Strategy: Do It For Your Users
Content Strategy: Do It For Your UsersAndrea Sarther
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015Katelyn Caillouet
 
Top 10 prospects of good navigation design
Top 10 prospects of good navigation designTop 10 prospects of good navigation design
Top 10 prospects of good navigation designStanleyMaddox
 
Visual hierarchy
Visual hierarchyVisual hierarchy
Visual hierarchyveuser98
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User InterfaceBeth Case
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Designsirferds
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web designananda gunadharma
 
Website Design2
Website Design2Website Design2
Website Design2Eric Legg
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1Eric Legg
 
Possible Website Credibility
Possible Website CredibilityPossible Website Credibility
Possible Website CredibilityMaria Campanita
 

Similar to What is good design? (20)

The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Design
 
UX Tools, Tips, and Tricks
UX Tools, Tips, and TricksUX Tools, Tips, and Tricks
UX Tools, Tips, and Tricks
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
 
Content Strategy: Do It For Your Users
Content Strategy: Do It For Your UsersContent Strategy: Do It For Your Users
Content Strategy: Do It For Your Users
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
Top 10 prospects of good navigation design
Top 10 prospects of good navigation designTop 10 prospects of good navigation design
Top 10 prospects of good navigation design
 
Visual hierarchy
Visual hierarchyVisual hierarchy
Visual hierarchy
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Web design Prasantation
Web design PrasantationWeb design Prasantation
Web design Prasantation
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
 
Website Design2
Website Design2Website Design2
Website Design2
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
 
Possible Website Credibility
Possible Website CredibilityPossible Website Credibility
Possible Website Credibility
 

More from Saeid Zebardast

An Introduction to Apache Cassandra
An Introduction to Apache CassandraAn Introduction to Apache Cassandra
An Introduction to Apache CassandraSaeid Zebardast
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endSaeid Zebardast
 
Developing Applications with MySQL and Java for beginners
Developing Applications with MySQL and Java for beginnersDeveloping Applications with MySQL and Java for beginners
Developing Applications with MySQL and Java for beginnersSaeid Zebardast
 
هفده اصل افراد موثر در تیم
هفده اصل افراد موثر در تیمهفده اصل افراد موثر در تیم
هفده اصل افراد موثر در تیمSaeid Zebardast
 
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزاد
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزادمعرفی گنو/لینوکس و سیستم عامل های متن باز و آزاد
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزادSaeid Zebardast
 

More from Saeid Zebardast (7)

An Introduction to Apache Cassandra
An Introduction to Apache CassandraAn Introduction to Apache Cassandra
An Introduction to Apache Cassandra
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-end
 
MySQL Cheat Sheet
MySQL Cheat SheetMySQL Cheat Sheet
MySQL Cheat Sheet
 
Java Cheat Sheet
Java Cheat SheetJava Cheat Sheet
Java Cheat Sheet
 
Developing Applications with MySQL and Java for beginners
Developing Applications with MySQL and Java for beginnersDeveloping Applications with MySQL and Java for beginners
Developing Applications with MySQL and Java for beginners
 
هفده اصل افراد موثر در تیم
هفده اصل افراد موثر در تیمهفده اصل افراد موثر در تیم
هفده اصل افراد موثر در تیم
 
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزاد
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزادمعرفی گنو/لینوکس و سیستم عامل های متن باز و آزاد
معرفی گنو/لینوکس و سیستم عامل های متن باز و آزاد
 

Recently uploaded

SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 

Recently uploaded (20)

SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 

What is good design?

  • 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.
  • 11. IMPORTANT CONTENT ON THE LEFT OF A WEB 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.