SlideShare a Scribd company logo
Improving Web Usability
in the Search for a Cure
INTRODUCTION
Example websites in this presentation:
1. Novian Health - laser therapy for breast cancer
2. StemCultures - stem cell e-commerce store (via The Neural Stem Cell Institute)
3. The Stem Cell Podcast - podcast about stem cells (also via NSCI)
MINIMALISM
"Above the fold" is becoming less and less of a "rule."
• Use whitespace generously around the outside.
• Use padding generously between elements. Give them "breathing room."
• Use the following sparingly: top-level navigation items, social sharing buttons,
ads, form fields. The more clutter you have, the more things there are to distract
your visitors from your website's goal.
CONTRAST: BLACK AND WHITE
Avoid using 100% black (#000) for text or backgrounds.
Instead: dark gray (#222 or #333).
Consider using off-white instead of 100% white (#fff).
Instead: light gray (#eee) or "clouds" (#ecf0f1).
COLOR
Adobe Color CC: https://color.adobe.com/create/color-wheel/
Tool for finding complementary colors, analogous colors, color shades, etc.
Color Theory for Designers: http://www.smashingmagazine.com/2010/01/28/color-
theory-for-designers-part-1-the-meaning-of-color/
3-part series explaining color theory in web design.
READABILITY
• Color. There should be high contrast between text and background colors.
• Font sizes. The text should be easy to read at a distance.
• Font weight. There's more than just normal and bold.
• Letter spacing. This can make a big difference, especially in headings.
• Line height. Recommended ratio: 1.6. (Golden Ratio: 1.618)
• Paragraph and heading margins. This is the space below paragraphs and
headings. Recommended: at least as tall as one line of body text.
FONTS
• The font should be easily legible. Avoid script fonts, except in logos.
• Default web fonts (Arial, Times New Roman, etc) make your site look old.
• Google Web Fonts are high quality and (relatively) easy to set up.
• Some of my favorites: Dosis, Lato, Montserrat, Nobile, Noto Sans, Open Sans,
Oswald, Oxygen, PT Sans, Questrial, Raleway, Roboto, Ubuntu, Yellowtail.
• Absolutely do not use: Comic Sans, Lobster, or Papyrus.
How a Web Design Goes to Hell: http://theoatmeal.com/comics/design_hell
CALLS TO ACTION
• Use a large button with a strong, high-contrast color. It should stand out from
your content and design.
• Don't use too many different calls to action. Ideally, just one per page (maybe
repeated).
• The text you use is important. Use "Send" instead of "Submit", use "Join" instead
of "Subscribe", etc.
HEADINGS: H1, H2, H3, ...
Heading tags show importance and establish a hierarchy for your content.
• Heading tags are important for SEO.
• H1 should be bigger than H2, H2 bigger than H3, etc.
• There should be noticeable visual differences between heading levels. Usually
this is done with font size, but other attributes can work too.
• Example: Your body (paragraph) text has a font-size of 1.6rem. You might have
your H1 font-size as 4.8rem, H2 as 3.6rem, and H3 as 2.4rem.
• Every page should have one (and only one) H1 tag, preferably at the top. Don't
make your site title the H1 (except for the home page, in some cases).
PARAGRAPHS
Most people don't want to read a "wall of text." Add some variation.
• Never center large blocks of text, and try to avoid them in the first place.
Generally, don't center any text that wraps on to more than one line.
• Justified text (where both sides of paragraphs line up) rarely looks good on the
web. It's best for newspapers with multiple columns of text.
• Golden Ratio Typography Calculator: http://www.pearsonified.com/
typography/. As a general rule, don't go past 800px wide for body text.
• "Walls of text" can be broken up with headings, bulleted lists, bold, links,
images, highlighted boxes, etc.
CONTRAST AND CONSISTENCY
• Use contrast in shape, size, and color for distinct elements.
• Use consistency in shape, size, and color for related elements.
• Group and align related elements.
• Don't use too many different colors, fonts, and font sizes.
• GoodUI: http://goodui.org
RESPONSIVE DESIGN
• A website design that adjusts to any screen width: desktop, mobile, and
everything in between (there are a lot of different sizes to accommodate).
• You should not have to scroll horizontally or zoom in to read the content, you just
scroll vertically down the page.
• Large navigation menus are often replaced with a "hamburger menu" that you
click on to open up the navigation items.
THANKS!
Doug Yuen
Email: doug@efficientwp.com
Twitter: @Doug_Yuen
Website: EfficientWP.com
Podcast: WPcast.fm
http://efficientwp.com/wcpdx2015

More Related Content

Similar to Improving Web Usability in the Search for a Cure

J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web Design
Chris Snider
 
Capturing and Retaining Users Interest
Capturing and Retaining Users InterestCapturing and Retaining Users Interest
Capturing and Retaining Users Interest
Lisa Colton
 
How To Design Your Content Marketing Hub
How To Design Your Content Marketing HubHow To Design Your Content Marketing Hub
How To Design Your Content Marketing Hub
Michael Brenner
 
Webdesign(updated)
Webdesign(updated)Webdesign(updated)
Web Content Standards
Web Content StandardsWeb Content Standards
Web Content Standards
David Rajah Selvaraj
 
HTML Email Best Practice
HTML Email Best PracticeHTML Email Best Practice
HTML Email Best Practice
Amit Jain
 
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
D'arce Hess
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
Mindy McAdams
 
Before you build a website 2015
Before you build a website 2015Before you build a website 2015
Before you build a website 2015
mwfordesigns
 
seoChecklist
seoChecklistseoChecklist
seoChecklist
Minh Phạm
 
HTML Email: How not to feel 'boxed in'
HTML Email: How not to feel 'boxed in'HTML Email: How not to feel 'boxed in'
HTML Email: How not to feel 'boxed in'
Julia Anderson
 
Print design checklist landscape view
Print design checklist landscape viewPrint design checklist landscape view
Print design checklist landscape view
Elaine Humpleby
 
Habits of Effective Designers
Habits of Effective DesignersHabits of Effective Designers
Habits of Effective Designers
DUSPviz
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
Hanna-Liisa Pender
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen
 
The future of typography in Web design
The future of typography in Web designThe future of typography in Web design
The future of typography in Web design
elfinsilhouette83
 
Bootstrap UI Library Introduction
Bootstrap UI Library IntroductionBootstrap UI Library Introduction
Bootstrap UI Library Introduction
Vardot
 
Online platform for ict content development
 Online platform for ict content development Online platform for ict content development
Online platform for ict content development
Immaeviorge
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
Adrian Roselli
 
Design.doc
Design.docDesign.doc
Design.doc
butest
 

Similar to Improving Web Usability in the Search for a Cure (20)

J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web Design
 
Capturing and Retaining Users Interest
Capturing and Retaining Users InterestCapturing and Retaining Users Interest
Capturing and Retaining Users Interest
 
How To Design Your Content Marketing Hub
How To Design Your Content Marketing HubHow To Design Your Content Marketing Hub
How To Design Your Content Marketing Hub
 
Webdesign(updated)
Webdesign(updated)Webdesign(updated)
Webdesign(updated)
 
Web Content Standards
Web Content StandardsWeb Content Standards
Web Content Standards
 
HTML Email Best Practice
HTML Email Best PracticeHTML Email Best Practice
HTML Email Best Practice
 
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
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
Before you build a website 2015
Before you build a website 2015Before you build a website 2015
Before you build a website 2015
 
seoChecklist
seoChecklistseoChecklist
seoChecklist
 
HTML Email: How not to feel 'boxed in'
HTML Email: How not to feel 'boxed in'HTML Email: How not to feel 'boxed in'
HTML Email: How not to feel 'boxed in'
 
Print design checklist landscape view
Print design checklist landscape viewPrint design checklist landscape view
Print design checklist landscape view
 
Habits of Effective Designers
Habits of Effective DesignersHabits of Effective Designers
Habits of Effective Designers
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
The future of typography in Web design
The future of typography in Web designThe future of typography in Web design
The future of typography in Web design
 
Bootstrap UI Library Introduction
Bootstrap UI Library IntroductionBootstrap UI Library Introduction
Bootstrap UI Library Introduction
 
Online platform for ict content development
 Online platform for ict content development Online platform for ict content development
Online platform for ict content development
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Design.doc
Design.docDesign.doc
Design.doc
 

Recently uploaded

Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 

Recently uploaded (12)

Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 

Improving Web Usability in the Search for a Cure

  • 2. INTRODUCTION Example websites in this presentation: 1. Novian Health - laser therapy for breast cancer 2. StemCultures - stem cell e-commerce store (via The Neural Stem Cell Institute) 3. The Stem Cell Podcast - podcast about stem cells (also via NSCI)
  • 3. MINIMALISM "Above the fold" is becoming less and less of a "rule." • Use whitespace generously around the outside. • Use padding generously between elements. Give them "breathing room." • Use the following sparingly: top-level navigation items, social sharing buttons, ads, form fields. The more clutter you have, the more things there are to distract your visitors from your website's goal.
  • 4. CONTRAST: BLACK AND WHITE Avoid using 100% black (#000) for text or backgrounds. Instead: dark gray (#222 or #333). Consider using off-white instead of 100% white (#fff). Instead: light gray (#eee) or "clouds" (#ecf0f1).
  • 5. COLOR Adobe Color CC: https://color.adobe.com/create/color-wheel/ Tool for finding complementary colors, analogous colors, color shades, etc. Color Theory for Designers: http://www.smashingmagazine.com/2010/01/28/color- theory-for-designers-part-1-the-meaning-of-color/ 3-part series explaining color theory in web design.
  • 6.
  • 7. READABILITY • Color. There should be high contrast between text and background colors. • Font sizes. The text should be easy to read at a distance. • Font weight. There's more than just normal and bold. • Letter spacing. This can make a big difference, especially in headings. • Line height. Recommended ratio: 1.6. (Golden Ratio: 1.618) • Paragraph and heading margins. This is the space below paragraphs and headings. Recommended: at least as tall as one line of body text.
  • 8. FONTS • The font should be easily legible. Avoid script fonts, except in logos. • Default web fonts (Arial, Times New Roman, etc) make your site look old. • Google Web Fonts are high quality and (relatively) easy to set up. • Some of my favorites: Dosis, Lato, Montserrat, Nobile, Noto Sans, Open Sans, Oswald, Oxygen, PT Sans, Questrial, Raleway, Roboto, Ubuntu, Yellowtail. • Absolutely do not use: Comic Sans, Lobster, or Papyrus. How a Web Design Goes to Hell: http://theoatmeal.com/comics/design_hell
  • 9. CALLS TO ACTION • Use a large button with a strong, high-contrast color. It should stand out from your content and design. • Don't use too many different calls to action. Ideally, just one per page (maybe repeated). • The text you use is important. Use "Send" instead of "Submit", use "Join" instead of "Subscribe", etc.
  • 10.
  • 11.
  • 12. HEADINGS: H1, H2, H3, ... Heading tags show importance and establish a hierarchy for your content. • Heading tags are important for SEO. • H1 should be bigger than H2, H2 bigger than H3, etc. • There should be noticeable visual differences between heading levels. Usually this is done with font size, but other attributes can work too. • Example: Your body (paragraph) text has a font-size of 1.6rem. You might have your H1 font-size as 4.8rem, H2 as 3.6rem, and H3 as 2.4rem. • Every page should have one (and only one) H1 tag, preferably at the top. Don't make your site title the H1 (except for the home page, in some cases).
  • 13. PARAGRAPHS Most people don't want to read a "wall of text." Add some variation. • Never center large blocks of text, and try to avoid them in the first place. Generally, don't center any text that wraps on to more than one line. • Justified text (where both sides of paragraphs line up) rarely looks good on the web. It's best for newspapers with multiple columns of text. • Golden Ratio Typography Calculator: http://www.pearsonified.com/ typography/. As a general rule, don't go past 800px wide for body text. • "Walls of text" can be broken up with headings, bulleted lists, bold, links, images, highlighted boxes, etc.
  • 14.
  • 15. CONTRAST AND CONSISTENCY • Use contrast in shape, size, and color for distinct elements. • Use consistency in shape, size, and color for related elements. • Group and align related elements. • Don't use too many different colors, fonts, and font sizes. • GoodUI: http://goodui.org
  • 16.
  • 17. RESPONSIVE DESIGN • A website design that adjusts to any screen width: desktop, mobile, and everything in between (there are a lot of different sizes to accommodate). • You should not have to scroll horizontally or zoom in to read the content, you just scroll vertically down the page. • Large navigation menus are often replaced with a "hamburger menu" that you click on to open up the navigation items.
  • 18.
  • 19. THANKS! Doug Yuen Email: doug@efficientwp.com Twitter: @Doug_Yuen Website: EfficientWP.com Podcast: WPcast.fm http://efficientwp.com/wcpdx2015