SlideShare a Scribd company logo
1 of 11
For better audience-driven website design for ALL. Web Design principles of usability and accessibility
usability We want to make our portfolios as easy to use as possible.
Understand and meet user expectations Ensure that your portfolio format meets user expectations, especially related to navigation, content, and organization. Users define 'usability' as their perception of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within a system.
DESIGN for common browsers Designers should attempt to accommodate ninety-five percent of all users. Ensure that all testing of a Web site is done using the most popular browsers. Design for Commonly Used Screen Resolutions Design for monitors with the screen resolution set at 1024x768 pixels. By designing for 1024x768, you will accommodate this resolution, as well as those at any higher resolution.
Enable Access to the Homepage Enable users to access the homepage from any other page on the Web site. Limit Prose Text on the Homepage Requiring users to read large amounts of prose text can slow them considerably, or they may avoid reading it altogether.
Avoid Cluttered Displays Clutter is when excess items on a page lead to a degradation of performance when trying to find certain information. Establish Level of Importance Establish a hierarchy of importance for images and information and infuse this approach throughout each page on the Web site.
Ensure Visual Consistency Visual consistency includes the size and spacing of characters; the colors used for labels, fonts and backgrounds; and the locations of labels, text and pictures. Use Bold Text Sparingly Use bold text only when it is important to draw the user’s attention to a specific piece of information.
Use Simple Background Images Background images can make it difficult for users to read foreground text.  A single, large, complex background image (including a picture) can substantially slow page download rates. Ensure that Images Do Not Slow Downloads User frustration increases as the length of time spent interacting with a system increases. One study reported that users rated latencies of up to five seconds as ’good.’ Delays over ten seconds were rated as ’poor.’
Accessibility Web sites should be designed to ensure that EVERYONE can use them.
Do Not Use Color Alone to Convey Information About eight percent of males and about one-half of one percent of females have difficulty discriminating colors.  Provide Text Equivalents for Non-Text Elements Text equivalents should be used for all non-text elements, including images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand-alone audio files, audio tracks of video, and video.
AvoidScreenFlicker Five percent of people with epilepsy are photosensitive, and may have seizures triggered by certain screen flicker frequencies.

More Related Content

Viewers also liked

Toc photoshoot plan
Toc photoshoot planToc photoshoot plan
Toc photoshoot planjessiekeegan
 
Dazed and confused toc analysis
Dazed and confused toc analysisDazed and confused toc analysis
Dazed and confused toc analysisjessiekeegan
 
Unit plan measurement
Unit plan measurementUnit plan measurement
Unit plan measurementLalaine Son
 
Κεφάλαιο 9
Κεφάλαιο 9Κεφάλαιο 9
Κεφάλαιο 9fgousios
 
Grade 8 Parent Night - 2013
Grade 8 Parent Night - 2013Grade 8 Parent Night - 2013
Grade 8 Parent Night - 2013derekoei
 
Event Management 111117ieu
Event Management 111117ieuEvent Management 111117ieu
Event Management 111117ieuHakan Turkkusu
 
Regional & sub regional frame
Regional & sub regional frameRegional & sub regional frame
Regional & sub regional frameKapil Prashant
 
المجلة السودانية لدراسات الراي العام
المجلة السودانية لدراسات الراي العامالمجلة السودانية لدراسات الراي العام
المجلة السودانية لدراسات الراي العامHamza Omer
 
Xxx relative clause
Xxx relative clauseXxx relative clause
Xxx relative clauseUNIVERSITY
 
Apresentação TDC2015
Apresentação TDC2015Apresentação TDC2015
Apresentação TDC2015Bruno Murawski
 
Sosyal Medya ve Yeni Kariyer Fırsatları
Sosyal Medya ve Yeni Kariyer FırsatlarıSosyal Medya ve Yeni Kariyer Fırsatları
Sosyal Medya ve Yeni Kariyer FırsatlarıBaturay Özden
 

Viewers also liked (17)

News item text
News item text News item text
News item text
 
Toc photoshoot plan
Toc photoshoot planToc photoshoot plan
Toc photoshoot plan
 
Dazed and confused toc analysis
Dazed and confused toc analysisDazed and confused toc analysis
Dazed and confused toc analysis
 
Avto weburistprezentation
Avto weburistprezentationAvto weburistprezentation
Avto weburistprezentation
 
Unit plan measurement
Unit plan measurementUnit plan measurement
Unit plan measurement
 
Catalogue ecobuild 2012
Catalogue ecobuild 2012Catalogue ecobuild 2012
Catalogue ecobuild 2012
 
Κεφάλαιο 9
Κεφάλαιο 9Κεφάλαιο 9
Κεφάλαιο 9
 
NukeA4beginning of war
NukeA4beginning of warNukeA4beginning of war
NukeA4beginning of war
 
Grade 8 Parent Night - 2013
Grade 8 Parent Night - 2013Grade 8 Parent Night - 2013
Grade 8 Parent Night - 2013
 
Event Management 111117ieu
Event Management 111117ieuEvent Management 111117ieu
Event Management 111117ieu
 
Regional & sub regional frame
Regional & sub regional frameRegional & sub regional frame
Regional & sub regional frame
 
المجلة السودانية لدراسات الراي العام
المجلة السودانية لدراسات الراي العامالمجلة السودانية لدراسات الراي العام
المجلة السودانية لدراسات الراي العام
 
Tarea:2
Tarea:2Tarea:2
Tarea:2
 
Xxx relative clause
Xxx relative clauseXxx relative clause
Xxx relative clause
 
Meek and gentle
Meek and gentleMeek and gentle
Meek and gentle
 
Apresentação TDC2015
Apresentação TDC2015Apresentação TDC2015
Apresentação TDC2015
 
Sosyal Medya ve Yeni Kariyer Fırsatları
Sosyal Medya ve Yeni Kariyer FırsatlarıSosyal Medya ve Yeni Kariyer Fırsatları
Sosyal Medya ve Yeni Kariyer Fırsatları
 

Similar to Usability and Accessiblity

Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignataroJohn Coonen
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 
"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin EvansUXPA UK
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignChiheb Chebbi
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI DesignersRavi Bhadauria
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Design.doc
Design.docDesign.doc
Design.docbutest
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal ThemesHeather Wozniak
 
some notes on web designing
some notes on web designingsome notes on web designing
some notes on web designingleonilitabadillo
 
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
 

Similar to Usability and Accessiblity (20)

Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans
 
Website design2
Website design2Website design2
Website design2
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Web Disigning
Web DisigningWeb Disigning
Web Disigning
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
DJNF 2015 Mobile Presentation
DJNF 2015 Mobile PresentationDJNF 2015 Mobile Presentation
DJNF 2015 Mobile Presentation
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Design.doc
Design.docDesign.doc
Design.doc
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal Themes
 
Usability
UsabilityUsability
Usability
 
Web site design
Web site designWeb site design
Web site design
 
some notes on web designing
some notes on web designingsome notes on web designing
some notes on web designing
 
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
 

Recently uploaded

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 

Recently uploaded (20)

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

Usability and Accessiblity

  • 1. For better audience-driven website design for ALL. Web Design principles of usability and accessibility
  • 2. usability We want to make our portfolios as easy to use as possible.
  • 3. Understand and meet user expectations Ensure that your portfolio format meets user expectations, especially related to navigation, content, and organization. Users define 'usability' as their perception of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within a system.
  • 4. DESIGN for common browsers Designers should attempt to accommodate ninety-five percent of all users. Ensure that all testing of a Web site is done using the most popular browsers. Design for Commonly Used Screen Resolutions Design for monitors with the screen resolution set at 1024x768 pixels. By designing for 1024x768, you will accommodate this resolution, as well as those at any higher resolution.
  • 5. Enable Access to the Homepage Enable users to access the homepage from any other page on the Web site. Limit Prose Text on the Homepage Requiring users to read large amounts of prose text can slow them considerably, or they may avoid reading it altogether.
  • 6. Avoid Cluttered Displays Clutter is when excess items on a page lead to a degradation of performance when trying to find certain information. Establish Level of Importance Establish a hierarchy of importance for images and information and infuse this approach throughout each page on the Web site.
  • 7. Ensure Visual Consistency Visual consistency includes the size and spacing of characters; the colors used for labels, fonts and backgrounds; and the locations of labels, text and pictures. Use Bold Text Sparingly Use bold text only when it is important to draw the user’s attention to a specific piece of information.
  • 8. Use Simple Background Images Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates. Ensure that Images Do Not Slow Downloads User frustration increases as the length of time spent interacting with a system increases. One study reported that users rated latencies of up to five seconds as ’good.’ Delays over ten seconds were rated as ’poor.’
  • 9. Accessibility Web sites should be designed to ensure that EVERYONE can use them.
  • 10. Do Not Use Color Alone to Convey Information About eight percent of males and about one-half of one percent of females have difficulty discriminating colors. Provide Text Equivalents for Non-Text Elements Text equivalents should be used for all non-text elements, including images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand-alone audio files, audio tracks of video, and video.
  • 11. AvoidScreenFlicker Five percent of people with epilepsy are photosensitive, and may have seizures triggered by certain screen flicker frequencies.