SlideShare a Scribd company logo
Approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information
Usability  and the  utility , not the visual design, determine the success or failure of a web-site.  Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior. How do users think?
Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.
Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click.  If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site.
Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.
Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money.
Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one.  Instead users  satisfice ; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked.
Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided.  According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them…”
Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site.
1. Don’t make users think
Let’s take a look at an example.  Beyondis.co.uk   claims to be “beyond channels, beyond products, beyond distribution”. What does it mean?
ExpressionEngine  uses the very same structure like Beyondis, but avoids unnecessary question marks.
2. Don’t squander users’ patience
Stikkit  is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting.
3. Manage to focus users’ attention
Humanized.com  perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative.
Dibusoft.com  combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance.
5. Make use of effective writing
Eleven2.com  gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.
6. Strive for simplicity
Finch  clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.
7. Don’t be afraid of the white space
White space is good.  Cameron.io  uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.
8. Communicate effectively with a “visible language”
In his papers on effective visual communication, Aaron Marcus states  three fundamental principles  involved in the use of the so-called “visible language” — the content users see on a screen.  ORGANIZE ECONOMIZE COMMUNICATE
Organize:  provide the user with a clear and consistent conceptual structure.  Consistency , screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
Economize:  do the most with the least amount of cues and visual elements. Four major points to be considered:  Simplicity Clarity Distinctiveness Emphasis.
Communicate:  match the presentation to the capabilities of the user. The user interface must keep in  balance legibility, readability, typography, symbolism, multiple views, and color or texture  in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.
9. Conventions are our friends
With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s  Usability  Alertbox  for more information)
10. Test early, test often
Some important points to keep in mind: according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end  testing is an iterative process.  usability tests always produce useful results.  according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well.  Bottom line: if you want a great site, you’ve got to test.
REFERENCES http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Designing Effective User Interfaces  by Suzanne Martin Summary on Web Design UID presentation (Flash) Research-Based Web Design & Usability Guidelines “ The psychology of computer programming” by Gerald Weinberg “ Designing Web Usability” by Jakob Nielsen [JN / DWU] “ Prioritizing Web Usability” by Jakob Nielsen “ Don’t Make Me Think” by Steve Krug “ Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood A Summary of Principles for User-Interface Design

More Related Content

PPTX
Web Development
PDF
Website Development Process
PPTX
Domain and hosting
PPT
Website Introduction
PPTX
Presentation of web designing
PPTX
Difference between-web-designing-and-web-development
KEY
Web Design 101
PPTX
Web designing
Web Development
Website Development Process
Domain and hosting
Website Introduction
Presentation of web designing
Difference between-web-designing-and-web-development
Web Design 101
Web designing

What's hot (20)

PPTX
website planning and creation for beginners
PDF
WEB I - 01 - Introduction to Web Development
PPT
Introduction to Web Hosting.
PPTX
Web Designing
PPTX
Basic WordPress for Beginner ppt
PPS
Web Site Design Principles
PPTX
Different types of websites
PPTX
Website design with Wordpress ppt
PPT
Seo Presentation for Beginners, Complete SEO ppt,
PPTX
Wordpress ppt
PPT
Lecture 1 intro to web designing
PPT
Web Development Ppt
PDF
Web Development Presentation
PDF
Web designing chapter 01
PDF
Introduction to Dreamweaver
PPT
Chapter16 - the internet and its tools
PDF
Web development ppt
PDF
Web Designing Presentation
PPTX
Web server
PPTX
Introduction to web page
website planning and creation for beginners
WEB I - 01 - Introduction to Web Development
Introduction to Web Hosting.
Web Designing
Basic WordPress for Beginner ppt
Web Site Design Principles
Different types of websites
Website design with Wordpress ppt
Seo Presentation for Beginners, Complete SEO ppt,
Wordpress ppt
Lecture 1 intro to web designing
Web Development Ppt
Web Development Presentation
Web designing chapter 01
Introduction to Dreamweaver
Chapter16 - the internet and its tools
Web development ppt
Web Designing Presentation
Web server
Introduction to web page
Ad

Viewers also liked (20)

PDF
Introduction to Web Design
PDF
10 principles of effective web design
PDF
Effective Website Design
PDF
web design & web development
PPTX
Emerging technologies - Evolution of web design
PPTX
Redesign - evolution or revolution?
PPTX
Evolution of instructional materials
PPTX
Evolution of instructional materials
PPT
Introduction to web design
PDF
Adent.io - Adult Tube Master Class Program - Course 2 Blueprint
PDF
Adent.io - Adult Tube Master Class Program - Course 1 Blueprint
PDF
Web Site Optimization for Beginners
PPT
Introduction To Web Design
PPTX
Graphic Design - History of Graphic Design
PPTX
Principles of Design: Proximity and Unity
PDF
Hedge Funds 101
PPTX
Graphic and Web Design Principles
PDF
History Of Graphic Design
PDF
A Brief History of Graphic Design
PPTX
10 Design & Layout Principles Guaranteed To Improve
Introduction to Web Design
10 principles of effective web design
Effective Website Design
web design & web development
Emerging technologies - Evolution of web design
Redesign - evolution or revolution?
Evolution of instructional materials
Evolution of instructional materials
Introduction to web design
Adent.io - Adult Tube Master Class Program - Course 2 Blueprint
Adent.io - Adult Tube Master Class Program - Course 1 Blueprint
Web Site Optimization for Beginners
Introduction To Web Design
Graphic Design - History of Graphic Design
Principles of Design: Proximity and Unity
Hedge Funds 101
Graphic and Web Design Principles
History Of Graphic Design
A Brief History of Graphic Design
10 Design & Layout Principles Guaranteed To Improve
Ad

Similar to 10 Principles Of Effective Web Design (20)

PDF
Usability 101
PDF
Web Usability July 2011
DOC
The Web Design Summary.doc.doc
PPTX
Creative software
PPTX
Creative Software
PDF
Designing the user experience
PDF
Web Usability and Conversion
PDF
Website Usability Tutorial For Online Marketers
PPT
Designing With Usability In Mind
PPTX
Website Design Part 1
PPTX
Website Design2
PPS
Presentation Ux
PPTX
Don’t make me think
PPTX
Web usability MKS
PDF
NYU Web Intensive - Week 3 Class 1
ODP
Usability and UX
ZIP
Usability, User Experience and the Internet in the 21st Century
PPT
Principles of Web Design
PDF
Website Usability & User Experience: Veel bezoekers, weinig klanten?
PPTX
Don’t make me think
Usability 101
Web Usability July 2011
The Web Design Summary.doc.doc
Creative software
Creative Software
Designing the user experience
Web Usability and Conversion
Website Usability Tutorial For Online Marketers
Designing With Usability In Mind
Website Design Part 1
Website Design2
Presentation Ux
Don’t make me think
Web usability MKS
NYU Web Intensive - Week 3 Class 1
Usability and UX
Usability, User Experience and the Internet in the 21st Century
Principles of Web Design
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Don’t make me think

Recently uploaded (20)

PDF
Insiders guide to clinical Medicine.pdf
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
Basic Mud Logging Guide for educational purpose
PPTX
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPTX
GDM (1) (1).pptx small presentation for students
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
Cell Types and Its function , kingdom of life
PDF
Classroom Observation Tools for Teachers
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
Cell Structure & Organelles in detailed.
PPTX
PPH.pptx obstetrics and gynecology in nursing
PDF
01-Introduction-to-Information-Management.pdf
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PPTX
Microbial diseases, their pathogenesis and prophylaxis
Insiders guide to clinical Medicine.pdf
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Basic Mud Logging Guide for educational purpose
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
GDM (1) (1).pptx small presentation for students
Abdominal Access Techniques with Prof. Dr. R K Mishra
Cell Types and Its function , kingdom of life
Classroom Observation Tools for Teachers
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Cell Structure & Organelles in detailed.
PPH.pptx obstetrics and gynecology in nursing
01-Introduction-to-Information-Management.pdf
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
Final Presentation General Medicine 03-08-2024.pptx
102 student loan defaulters named and shamed – Is someone you know on the list?
Microbial diseases, their pathogenesis and prophylaxis

10 Principles Of Effective Web Design

  • 1. Approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information
  • 2. Usability and the utility , not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
  • 3. In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior. How do users think?
  • 4. Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.
  • 5. Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
  • 6. Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site.
  • 7. Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.
  • 8. Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money.
  • 9. Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice ; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked.
  • 10. Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them…”
  • 11. Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site.
  • 12. 1. Don’t make users think
  • 13. Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean?
  • 14. ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks.
  • 15. 2. Don’t squander users’ patience
  • 16. Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting.
  • 17. 3. Manage to focus users’ attention
  • 18. Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative.
  • 19. Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance.
  • 20. 5. Make use of effective writing
  • 21. Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.
  • 22. 6. Strive for simplicity
  • 23. Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.
  • 24. 7. Don’t be afraid of the white space
  • 25. White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.
  • 26. 8. Communicate effectively with a “visible language”
  • 27. In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen. ORGANIZE ECONOMIZE COMMUNICATE
  • 28. Organize: provide the user with a clear and consistent conceptual structure. Consistency , screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
  • 29. Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: Simplicity Clarity Distinctiveness Emphasis.
  • 30. Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.
  • 31. 9. Conventions are our friends
  • 32. With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)
  • 33. 10. Test early, test often
  • 34. Some important points to keep in mind: according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end testing is an iterative process. usability tests always produce useful results. according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. Bottom line: if you want a great site, you’ve got to test.
  • 35. REFERENCES http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Designing Effective User Interfaces by Suzanne Martin Summary on Web Design UID presentation (Flash) Research-Based Web Design & Usability Guidelines “ The psychology of computer programming” by Gerald Weinberg “ Designing Web Usability” by Jakob Nielsen [JN / DWU] “ Prioritizing Web Usability” by Jakob Nielsen “ Don’t Make Me Think” by Steve Krug “ Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood A Summary of Principles for User-Interface Design