SlideShare ist ein Scribd-Unternehmen logo
1 von 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.

Weitere ähnliche Inhalte

Andere mochten auch

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
 

Andere mochten auch (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ı
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 

Kürzlich hochgeladen (20)

Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 

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.