TP
Uploaded byTim Proffitt
PDF, PPTX156 views

Ui design-day2b

The document discusses the significance of visual perception in UI design, emphasizing the Gestalt principles that explain how humans interpret visual data. It covers various principles such as figure/ground, similarity, proximity, and closure, detailing their application in creating effective user interfaces. Additionally, the document highlights the importance of web accessibility and provides guidelines to accommodate users with disabilities, alongside semantic HTML for better communication with machines.

Technology◦
Related topics:
Web Design Insights•

Embed presentation

Download as PDF, PPTX
1 / 108
2 / 108
3 / 108
4 / 108
5 / 108
6 / 108
7 / 108
8 / 108
9 / 108
10 / 108
11 / 108
12 / 108
13 / 108
14 / 108
15 / 108
16 / 108
17 / 108
18 / 108
19 / 108
20 / 108
21 / 108
22 / 108
23 / 108
24 / 108
25 / 108
26 / 108
27 / 108
28 / 108
29 / 108
30 / 108
31 / 108
32 / 108
33 / 108
34 / 108
35 / 108
36 / 108
37 / 108
38 / 108
39 / 108
40 / 108
41 / 108
42 / 108
43 / 108
44 / 108
45 / 108
46 / 108
47 / 108
48 / 108
49 / 108
50 / 108
51 / 108
52 / 108
53 / 108
54 / 108
55 / 108
56 / 108
57 / 108
58 / 108
59 / 108
60 / 108
61 / 108
62 / 108
63 / 108
64 / 108
65 / 108
66 / 108
67 / 108
68 / 108
69 / 108
70 / 108
71 / 108
72 / 108
73 / 108
74 / 108
75 / 108
76 / 108
77 / 108
78 / 108
79 / 108
80 / 108
81 / 108
82 / 108
83 / 108
84 / 108
85 / 108
86 / 108
87 / 108
88 / 108
89 / 108
90 / 108
91 / 108
92 / 108
93 / 108
94 / 108
95 / 108
96 / 108
97 / 108
98 / 108
99 / 108
100 / 108
101 / 108
102 / 108
103 / 108
104 / 108
105 / 108
106 / 108
107 / 108
108 / 108
Utility | Meaning | Engagement UI Design Basics
Engagement M eaning Utility
Meaning UI Design Basics
4 Meaning for Humans Meaning for Robots Humans: How we as humans perceive and make sense of the world around us and how that impacts UI design Robots: How machines acting on behalf of humans interact with our interfaces.
Meaning for Humans
Set the stage 90% of all information going to your brain is visual Light bounces off surfaces Eyes take in the sense data - visual field Brain interprets makes sense of gives meaning to the sense data Part of interpreting involves clustering the sense data into groups The way the groups are formed - the principles by which the brain makes sense of these groups are known as the Gestalt Principles of Visual Perception The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
7 Gestalt Principles See lights “marching” around the rectangle? The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
7 Gestalt Principles See lights “marching” around the rectangle? The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
“The whole is other than the sum of the parts” -Kurt Koffka Stephen Bradley When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we’ll look to group them as some whole.
9 Figure/Ground “people interpret a stimulus in the context of its background.” A viewer tends to differentiate between the figure and ground (aka. an object and the area that surrounds it.) square sitting on a circle, or is it a circle with a square-shaped hole in the center?
10 Figure/Ground Blurred background photo: “ground” Text is the “figure”
11 Figure/Ground Admin form section jumps out as the “figure” Header and Menu read as background
12 Similarity things that are similar are perceived to be more related than things that are dissimilar unlikely that you would see similarity between these shapes
13 Similarity elements that are similar to each other tend to be grouped
14 Similarity we can strengthen the effect by varying the ways in which they are similar
15 Similarity Anomaly we can take advantage of similarity by introducing elements that are dissimilar to add emphasis called anomaly
16 Similarity If I can click on one i can probably click on any of them.
17 Similarity Payment information uniform Emphasis is given to my total balance through the inverse of similarity anomaly.
18 Proximity Items that are close together are perceived to be related
19 Proximity Items that are close together are perceived to be related
20 Proximity Proximity is the only thing associating an item with its detail text
21 Continuation elements arranged on a line or curve are perceived to be more related than elements not on the line or curve. oriented units or groups tend to be integrated into perceptual wholes if they are aligned with each other
22 Continuation proximity can balance or even override continuation
23 Continuation Continuation is used as a cue to scroll down. Especially when scrolling is so easy on handheld devices.
24 Common Fate “Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
24 Common Fate “Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
25 Common Fate actual motion is not necessary to perceive common fate
26 Common Regions Elements are perceived as part of a group if they are located within the same closed region. These circles are all the same but we see two distinct groups most common way to show common region is to with a box
27 Common Regions can also use a background color
28 Common Regions forms/field-set
29 Common Region Controls surrounded by a common region Workspace denoted by a common region
30 Closure When looking at a complex arrangement of individual elements, we tend to first look for a single, recognizable pattern.
31 Closure Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information
32 closure implies a common region that separates “Social links” from “Subscribe” separated from “recent articles”
33 Exercise Identify the gestalt principles at work create list
34 Figure/Ground Closure in logo Continuation in background
34 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Figure/Ground Closure in logo Continuation in background
35 Controls surrounded by a common region Workspace denoted by a common region Similarity in builder menu Continuity in horizontal menus
35 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Controls surrounded by a common region Workspace denoted by a common region Similarity in builder menu Continuity in horizontal menus
36 Similarity: headings are larger, orange links are underlined Proximity
36 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Similarity: headings are larger, orange links are underlined Proximity
37 Common region associates tabs above Dish details Options at the bottom
37 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Common region associates tabs above Dish details Options at the bottom
38 Similarity - Categories established with offset icon Proximity
38 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Similarity - Categories established with offset icon Proximity
39 Proximity associates navigation items Similarity - caps in menu Anomaly - bold on WORK Common Region - menu Continuity - scroll Figure Ground - image
39 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Proximity associates navigation items Similarity - caps in menu Anomaly - bold on WORK Common Region - menu Continuity - scroll Figure Ground - image
Accessibility Until now we’ve been talking meaning and visual perception. Let’s not forget though that the web is for everyone, and not all people have sight. In fact there are a number of disabilities we can and should account for when designing our applications, from mild disabilities like color vision deficiency (color blindness) to more severe motor, hearing, and vision disabilities.
41 Everyone, in descending order by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
41 Everyone, in descending order by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else Web/IT developers We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
42 Everyone, in descending order by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else Web/IT developers and Improving BAs We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
Do You Have Color Vision Deficiency? http://www.color-blindness.com/ishihara-38-plates-cvd-test/
44 Color Blindness Color blindness is the inability or decreased ability to distinguish between colors. It affects 7%-8% of all men and less than 1% all women total color blindness - “monochromia”
45 Deuteranopia deuteranopia (dooter-an-opia) - Green blindness
46 Protanopia Protanopia (pro-tan-opia) - red blindness
47 Tritanopia tritanopia - (try-tan-opia) difficulty distinguishing blue from green or yellow from violet very rare
48 Video: Keeping Web Accessibility in Mind Of course there are more severe disabilities, blindness motor disabilities hearing disabilities that we should keep in mind when designing our applications. youtu.be/yx7hdQqf8lE?t=1m15s
Accessibility 101 WCAG: Web Content Accessibility Guidelines Current spec is 2.0 from 2008 Defines 3 levels A - minimum level of conformance AA - AAA - cadillac What I’m going to go over will not get you to A, but it will make getting to A relatively painless.
50 Don’t Rely on Color Alone *REQUIRED FIELDS First Name Last Name *Telephone ( ) - this is referred to in broader terms in wcag: do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
51 Don’t Rely on Color Alone example of how a person with color vision deficiency might see this chat list.
52 Don’t Rely on Color Alone use both color and shape with icons
53 Don’t Rely on Color Alone
54 Don’t Rely on Color Alone
55 Keep Contrast High This is difficult for you to read because there is not enough contrast between the foreground and the background. Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG AA Minimum for regular text 4.5:1 56 Contrast Ratios WCAG AA Minimum for larger text 3:1 http://webaim.org/resources/contrastchecker/ Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
57 Keep Contrast High Be especially careful with text over images
58 Use Headings Appropriately Headings are not simply used for variations in font. They convey meaning - the hierarchy of the html document - to both viewers and to user agents, such as screen readers… they help create the document outline (more later)
59 Headings and Subheadings Many tags in HTML were developed not to assist with formatting, but to provide information on the structural hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit. Purpose of Headings For documents longer than 3-4 paragraphs, headings and subheadings are important usability and accessibility strategy to help readers both determine the overall outline of the document and to navigate to specific information that may need more of the reader's attention. How to Use Headings Appropriately Headings: Semantic vs. Formatted Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/ font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings and provide a list as a page or document table of contents (see image below). Heading provide information on the structural hierarchy of the document.
60 Headings and Subheadings Many tags in HTML were developed not to assist with formatting, but to provide information on the structural hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit. Purpose of Headings For documents longer than 3-4 paragraphs, headings and subheadings are important usability and accessibility strategy to help readers both determine the overall outline of the document and to navigate to specific information that may need more of the reader's attention. How to Use Headings Appropriately Headings: Semantic vs. Formatted Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/ font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings and provide a list as a page or document table of contents (see image below). <h1> <h2> <h3> <h3> H1 for the page title. Only 1 per page. H2 for major headings and H3 for major sub headings.
61 Support Keyboard Navigation Cycling through links when you press the tab key. By default, the natural tabbing order will match the source order in the markup. If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page. Make sure keyboard focus is obvious with a focus style in css To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
61 Support Keyboard Navigation Cycling through links when you press the tab key. By default, the natural tabbing order will match the source order in the markup. If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page. Make sure keyboard focus is obvious with a focus style in css To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
62 Include Alt Text with All Images
63 Include Alt Text with All Images < img src=“images/merc.jpg alt=“Mercurial Superfly Football Cleat” > Use alt text to convey the same information that the image would. Not simply describe the picture
64 Include Alt Text with All Images If the image has no information to convey, leave the alt tag blank - the screen reader will skip it.
65 Include Alt Text with All Images < img src=“images/bg.jpg alt=“” > If the image has no information to convey, leave the alt tag blank - the screen reader will skip it. Otherwise the screen reader will read the url. To Josh’s question: how do we keep from getting “too much” especially on a home page. If you wind up with lots of images that convey no information, you might have a smell.
66 Limit Flashing Elements < blink > Avoid flashing anything on the screen more than 3 times in one second. Can induce an epileptic seizure
66 Limit Flashing Elements < blink > Avoid flashing anything on the screen more than 3 times in one second. Can induce an epileptic seizure
67 Caption Audio/Video How To Caption Videos on YouTube Provide alternatives to time based media. Caption videos with either closed or open captioning.
68 Use ARIA Landmark Roles Aria Role HTML5 element banner <header role=“banner> navigation <nav role=“navigation”> main <main role=“main”> complimentary <aside role=“complimentary”> contentinfo <footer role=“contentinfo”> source: http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/ WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications Suite a technical spec that defines how to increase the accessibility of web pages banner - use only once per page on the “main” header element which may be a div or the html5 header equivalent. navigation - use on a section with navigational links main - the main content of a document
Video: How ARIA Landmark Roles Help Users Use ARIA Landmark Roles
70 More Information Level A Compliance Checklist:
 http://www.wuhcag.com/wcag-checklist/
Meaning for Robots What robots? Web crawlers assistive technology
Semantics Semantic - of or relating to meaning. On the web, it is used to suggest the meaning of the content enclosed by html tags. examples: table, ul, dl, h1-h6, p
73 Document Outline When a robot (search engine spider) looks at your webpage, it does not see the decoration or necessarily the layout, it sees the structure of your page and the information you tell it is meaningful, using semantic markup. The main purpose of semantic HTML is the automated extraction of meaning from content automated document processing In it's simplest form automated document processing would be the ranking of websites. The web-crawler grabs the content and tries to analyze it in order to rank the site according to it's over-all quality and relevance regarding you search-term
74 Document Outline <h1> <h2> <h3> <h4> <h4> <h3> <h3> <h3> <h3> <h3> <h3> <h3> It uses the headings, forms titles, table titles, and any other appropriate landmarks to map out the document and generate a document outline.
75 Document Outline Chrome extension called html5 outliner
76 Document Outline <h1> <h2> <h3> <h4> } looks like a table of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results. Here you can see how nested headings are used to give this web page a hierarchy.
looks like a table of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results. Here you can see how nested headings are used to give this web page a hierarchy.
no document outline dallas pawn shops does not return ca :(
79 The H1-H6 elements are labels for sections that follow The CAPTION element is a label for TABLE The LABEL element is a label for the form element The LEGEND element is a label for a set of form elements The TH element is a label for a row/column of table cells. The TITLE element is a label for the document. The title attribute is a label for many elements e.g. INPUT source: http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view Anything you want in your document outline needs a “label” http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view
80 (Some) HTML5 Elements <section> <article> <aside> <nav> <header> <footer> <main> <video> <audio> HTML5 gives us some new elements to use for better semantics most of or all these used to be represented by the <div> tag. section - Defines a section in a document. header - Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content. footer - Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback. nav - defines a section that contains only navigation links article - Defines self-contained content that could exist independently of the rest of the content. aside - Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense. main - Defines the main or important content in the document. There is only one <main> element in the document. video - represents a video file and it’s associated audio files and captions audio - represents a sound or an audio stream
Which Tag to Use? 81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
Which Tag to Use? 81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
The Future of the Web aka the “Semantic” Web
 Semantic Web Video Video: 2007 by Manu Sporny - contributor to W3C chair of the W3C’s rdfa Working Group
Microformats RDFa Microdata Oh My! Sporny mentioned Microformats and RDFa as attributes we can add to markup to make interfaces more semantic - to tell robots about ‘things’ instead of documents. Few changes since this video. Rise and apparent fall of micro data - dropped by blink and webkit MIA Microformats ?
RDFa Lite Does everything important that Microdata does, it’s an official standard, and has the strongest deployment of the two. RDFa Lite became a W3C Recommendation in 2012 Quick example of how to tell a robot about a ‘thing’.
85 Specify Vocabulary Typically when we talk about a thing, we use a particular vocabulary to talk about it. So, if you wanted to talk about People, the vocabulary that you might use would specify terms like name and telephone number. When we want to mark up things on the Web, we need to specify which vocabulary that we are going to be using. There are many vocabularies, some are domain specific. In this example we have specified that we are going to be using the vocabulary that can be found at http://schema.org/.
86 Schema.org a vocabulary that has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes, and Events.
87 Specify Type Once we have specified the vocabulary, we need to specify the type of the thing that we're talking about. In this particular case we are talking about a Person, so we add an attribute of typeof=“Person” This on-page markup helps search engines understand the information on webpages and provide richer results.
88 Schema.org a vocabulary that has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes, and Events.
89 Specify Properties Now all we need to do is specify which properties of that person we want to point out to the search engine. Here we mark up the person's name, phone number and web page, highlighted in blue.
90
90
91 Specify Properties Now all we need to do is specify which properties of that person we want to point out to the search engine. Here we mark up the person's name, phone number and web page, highlighted in blue.
92 Semantics Make the Web Better Has anyone worked on a project where microformats, micro data, or rdfa was a requirement?
93 Resources 1 Color Vision Deficiency Test http://www.color-blindness.com/ishihara-38-plates-cvd-test/ 2 Video: Keeping Web Accessibility in Mind youtu.be/yx7hdQqf8lE?t=1m15s 3 Accessibility Compliance Checklist: http://www.wuhcag.com/wcag-checklist/ 4 Color Contrast Checker http://webaim.org/resources/contrastchecker/ 5 How to caption vids in youtube youtu.be/qbUcv3Bc61g?t=58s 6 Video: How ARIA Landmark Roles Help Users youtu.be/IhWMou12_Vk 7 ARIA Landmark Roles http://www.nomensa.com/blog/2010/wai-aria-document- landmark-roles/ 8 HTML5 Outliner Chrome Extension https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo?hl=en 9 HTML5 Flowchart html5doctor.com/downloads/h5d-sectioning-flowchart.pdf 10 Future of the Web youtu.be/OGg8A2zfWKg?t=2m25s https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en html5doctor.com/downloads/h5d-sectioning-flowchart.pdf youtu.be/OGg8A2zfWKg?t=2m25s
94 Resources 11 schema.org www.schema.org 12 A primer on RDFa-Lite http://www.w3.org/TR/rdfa-lite/#bib-RDFA-PRIMER https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en html5doctor.com/downloads/h5d-sectioning-flowchart.pdf youtu.be/OGg8A2zfWKg?t=2m25s

More Related Content

PPTX
Gestalt Principles
byLee Irwin
 
PDF
Design Principles
byUniversity of Calgary, School of Creative and Performing Arts
 
PDF
Topic 4 Multimedia Development Process
bynur ezzaty
 
PPTX
Gestalt principles of form perception
byLotlot Abellanosa
 
PDF
Responsive Web Design Basics
byAustin Walker
 
PDF
Responsive web design
byRuss Weakley
 
PDF
Responsive Webdesign
byAntonio De Pasquale
 
KEY
Web Design 101
byT.S. Lim
 
Gestalt Principles
byLee Irwin
 
Design Principles
byUniversity of Calgary, School of Creative and Performing Arts
 
Topic 4 Multimedia Development Process
bynur ezzaty
 
Gestalt principles of form perception
byLotlot Abellanosa
 
Responsive Web Design Basics
byAustin Walker
 
Responsive web design
byRuss Weakley
 
Responsive Webdesign
byAntonio De Pasquale
 
Web Design 101
byT.S. Lim
 

Similar to Ui design-day2b

PDF
Beginners Guide to Accessibility
byTarik (Rick) Dzekman
 
PDF
User Experience 2: Psychology Concepts
byMarc Miquel
 
PPTX
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
byUXPA International
 
PDF
Designing with the Mind in Mind: the Psychological Basis of UI Design Rules
byUXPA International
 
KEY
Web Accessibility and Design
bycolinbdclark
 
PPT
Gestalt Principles of Design
byGayle Christopher
 
PPTX
visual perception ppt2.pptx
byJaydeepPrajapati33
 
PPTX
Sayed-Minhal-Principles of Beautiful Design
bySayed Minhal
 
PPTX
Ud 4 web, classroom, curriculum
byHoward Kramer
 
PPTX
Ud 4 web, classroom, curriculum
byHoward Kramer
 
PPTX
Integrating universal design, best practices, & accessibility atia 2013
byHoward Kramer
 
PPTX
Integrating universal design, best practices, & accessibility atia 2013 - (...
byHoward Kramer
 
PPT
Visual Perception
bysajid rao
 
PDF
Visual Principles of Experience Design: Blending Art and Science
byDan Berlin
 
PPTX
Designing and evaluating web sites using universal design principles (hands on)
byHoward Kramer
 
PPTX
visual perception ppt2.pptx
byVatsal Garasia
 
PDF
Four Principles of Accessibility UK Version
byHomer Gaines
 
PDF
Is accessibility the new black?
byGeorge Otoiu
 
PPTX
What is ud demographics-w-notes - adopted for dis stud class
byHoward Kramer
 
PPTX
Role of Design in Accessibility — VilniusJS Meet-up
byAdrian Roselli
 
Beginners Guide to Accessibility
byTarik (Rick) Dzekman
 
User Experience 2: Psychology Concepts
byMarc Miquel
 
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
byUXPA International
 
Designing with the Mind in Mind: the Psychological Basis of UI Design Rules
byUXPA International
 
Web Accessibility and Design
bycolinbdclark
 
Gestalt Principles of Design
byGayle Christopher
 
visual perception ppt2.pptx
byJaydeepPrajapati33
 
Sayed-Minhal-Principles of Beautiful Design
bySayed Minhal
 
Ud 4 web, classroom, curriculum
byHoward Kramer
 
Ud 4 web, classroom, curriculum
byHoward Kramer
 
Integrating universal design, best practices, & accessibility atia 2013
byHoward Kramer
 
Integrating universal design, best practices, & accessibility atia 2013 - (...
byHoward Kramer
 
Visual Perception
bysajid rao
 
Visual Principles of Experience Design: Blending Art and Science
byDan Berlin
 
Designing and evaluating web sites using universal design principles (hands on)
byHoward Kramer
 
visual perception ppt2.pptx
byVatsal Garasia
 
Four Principles of Accessibility UK Version
byHomer Gaines
 
Is accessibility the new black?
byGeorge Otoiu
 
What is ud demographics-w-notes - adopted for dis stud class
byHoward Kramer
 
Role of Design in Accessibility — VilniusJS Meet-up
byAdrian Roselli
 

Recently uploaded

PDF
Guided Substation Engineering with CoMPAS: Simplifying IEC 61850
byDanBrown980551
 
PDF
The year in review - MarvelClient in 2025
bypanagenda
 
PDF
Top Cybersecurity Threats 2025 Guide by Sureshdas
byPrintersassist
 
PDF
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
byTrustArc
 
PDF
TPPmark2025 Kenta Inoue's answer 12/04/2025
byKenta Inoue
 
PDF
Digit Expo 2025 - EICC Edinburgh 27th November
byRay Bugg
 
PPTX
The Future of IT Service Management AI Automation & Beyond.pptx
byChetu
 
PDF
Security Technologys: Access Control, Firewall, VPN
byShielaLasala
 
DOCX
Introduction to the World of Computers (Hardware & Software)
byALIABBAS ABASOV
 
PPTX
THIS IS CYBER SECURITY NOTES USED IN CLASS ON VARIOUS TOPICS USED IN CYBERSEC...
byMelissaGblinwon
 
PDF
December Patch Tuesday
byIvanti
 
PPTX
Ethics in AI - Artificial Intelligence Fundamentals.pptx
byemenyiblessing
 
PDF
Agentic Automation for Testers – A Hands-On Deep Dive
byUiPathCommunity
 
PDF
Recursive Self Improvement vs Continuous Learning
byBob Marcus
 
PDF
Making Sense of Raster: From Bit Depth to Better Workflows
bySafe Software
 
PPTX
The Landscape of Computer Software Development Companies
byYash Singh
 
PPTX
Combining Induction and Transduction for Abstract Reasoning.pptx
byallen578468
 
PDF
Incident Response Planning with a Foundation Model
byKim Hammar
 
PDF
Igniting the Future: Copilot trends, agentic transformation and product roadm...
byUni Systems S.M.S.A.
 
PDF
AI and Computer Architecture: 200 Years Together
byDmitry Zinoviev
 
Guided Substation Engineering with CoMPAS: Simplifying IEC 61850
byDanBrown980551
 
The year in review - MarvelClient in 2025
bypanagenda
 
Top Cybersecurity Threats 2025 Guide by Sureshdas
byPrintersassist
 
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
byTrustArc
 
TPPmark2025 Kenta Inoue's answer 12/04/2025
byKenta Inoue
 
Digit Expo 2025 - EICC Edinburgh 27th November
byRay Bugg
 
The Future of IT Service Management AI Automation & Beyond.pptx
byChetu
 
Security Technologys: Access Control, Firewall, VPN
byShielaLasala
 
Introduction to the World of Computers (Hardware & Software)
byALIABBAS ABASOV
 
THIS IS CYBER SECURITY NOTES USED IN CLASS ON VARIOUS TOPICS USED IN CYBERSEC...
byMelissaGblinwon
 
December Patch Tuesday
byIvanti
 
Ethics in AI - Artificial Intelligence Fundamentals.pptx
byemenyiblessing
 
Agentic Automation for Testers – A Hands-On Deep Dive
byUiPathCommunity
 
Recursive Self Improvement vs Continuous Learning
byBob Marcus
 
Making Sense of Raster: From Bit Depth to Better Workflows
bySafe Software
 
The Landscape of Computer Software Development Companies
byYash Singh
 
Combining Induction and Transduction for Abstract Reasoning.pptx
byallen578468
 
Incident Response Planning with a Foundation Model
byKim Hammar
 
Igniting the Future: Copilot trends, agentic transformation and product roadm...
byUni Systems S.M.S.A.
 
AI and Computer Architecture: 200 Years Together
byDmitry Zinoviev
 

Ui design-day2b

  • 1.
    Utility | Meaning| Engagement UI Design Basics
  • 3.
  • 4.
  • 5.
    4 Meaning for Humans Meaningfor Robots Humans: How we as humans perceive and make sense of the world around us and how that impacts UI design Robots: How machines acting on behalf of humans interact with our interfaces.
  • 6.
  • 7.
    Set the stage 90%of all information going to your brain is visual Light bounces off surfaces Eyes take in the sense data - visual field Brain interprets makes sense of gives meaning to the sense data Part of interpreting involves clustering the sense data into groups The way the groups are formed - the principles by which the brain makes sense of these groups are known as the Gestalt Principles of Visual Perception The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
  • 8.
    7 Gestalt Principles See lights“marching” around the rectangle? The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
  • 9.
    7 Gestalt Principles See lights“marching” around the rectangle? The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s. Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
  • 10.
    “The whole isother than the sum of the parts” -Kurt Koffka Stephen Bradley When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we’ll look to group them as some whole.
  • 11.
    9 Figure/Ground “people interpret astimulus in the context of its background.” A viewer tends to differentiate between the figure and ground (aka. an object and the area that surrounds it.) square sitting on a circle, or is it a circle with a square-shaped hole in the center?
  • 12.
    10 Figure/Ground Blurred background photo:“ground” Text is the “figure”
  • 13.
    11 Figure/Ground Admin form sectionjumps out as the “figure” Header and Menu read as background
  • 14.
    12 Similarity things that aresimilar are perceived to be more related than things that are dissimilar unlikely that you would see similarity between these shapes
  • 15.
    13 Similarity elements that aresimilar to each other tend to be grouped
  • 16.
    14 Similarity we can strengthenthe effect by varying the ways in which they are similar
  • 17.
    15 Similarity Anomaly we can takeadvantage of similarity by introducing elements that are dissimilar to add emphasis called anomaly
  • 18.
    16 Similarity If I canclick on one i can probably click on any of them.
  • 19.
    17 Similarity Payment information uniform Emphasisis given to my total balance through the inverse of similarity anomaly.
  • 20.
    18 Proximity Items that areclose together are perceived to be related
  • 21.
    19 Proximity Items that areclose together are perceived to be related
  • 22.
    20 Proximity Proximity is theonly thing associating an item with its detail text
  • 23.
    21 Continuation elements arranged ona line or curve are perceived to be more related than elements not on the line or curve. oriented units or groups tend to be integrated into perceptual wholes if they are aligned with each other
  • 24.
    22 Continuation proximity can balanceor even override continuation
  • 25.
    23 Continuation Continuation is usedas a cue to scroll down. Especially when scrolling is so easy on handheld devices.
  • 26.
    24 Common Fate “Elements thatmove in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
  • 27.
    24 Common Fate “Elements thatmove in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
  • 28.
    25 Common Fate actual motionis not necessary to perceive common fate
  • 29.
    26 Common Regions Elements areperceived as part of a group if they are located within the same closed region. These circles are all the same but we see two distinct groups most common way to show common region is to with a box
  • 30.
    27 Common Regions can alsouse a background color
  • 31.
  • 32.
    29 Common Region Controls surroundedby a common region Workspace denoted by a common region
  • 33.
    30 Closure When looking ata complex arrangement of individual elements, we tend to first look for a single, recognizable pattern.
  • 34.
    31 Closure Closure occurs whenan object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information
  • 35.
    32 closure implies acommon region that separates “Social links” from “Subscribe” separated from “recent articles”
  • 36.
    33 Exercise Identify the gestaltprinciples at work create list
  • 37.
  • 38.
  • 39.
    35 Controls surrounded bya common region Workspace denoted by a common region Similarity in builder menu Continuity in horizontal menus
  • 40.
    35 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Controlssurrounded by a common region Workspace denoted by a common region Similarity in builder menu Continuity in horizontal menus
  • 41.
    36 Similarity: headings are larger,orange links are underlined Proximity
  • 42.
  • 43.
    37 Common region associates tabsabove Dish details Options at the bottom
  • 44.
    37 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Commonregion associates tabs above Dish details Options at the bottom
  • 45.
    38 Similarity - Categoriesestablished with offset icon Proximity
  • 46.
  • 47.
    39 Proximity associates navigationitems Similarity - caps in menu Anomaly - bold on WORK Common Region - menu Continuity - scroll Figure Ground - image
  • 48.
    39 Figure/Ground Similarity Proximity Continuation Common Fate Common Region Closure Proximityassociates navigation items Similarity - caps in menu Anomaly - bold on WORK Common Region - menu Continuity - scroll Figure Ground - image
  • 49.
    Accessibility Until now we’vebeen talking meaning and visual perception. Let’s not forget though that the web is for everyone, and not all people have sight. In fact there are a number of disabilities we can and should account for when designing our applications, from mild disabilities like color vision deficiency (color blindness) to more severe motor, hearing, and vision disabilities.
  • 50.
    41 Everyone, in descendingorder by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
  • 51.
    41 Everyone, in descendingorder by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else Web/IT developers We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
  • 52.
    42 Everyone, in descendingorder by how much they should know about web accessibility 1. Web/IT accessibility specialists
 2. Web/IT developers
 3. Web/IT managers, administrators
 4. Support staff for content authors
 5. Content authors
 6. Everyone else Web/IT developers and Improving BAs We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is. Everyone needs to know That users are incredibly diverse A few basic practices that make their online documents more accessible
  • 53.
    Do You HaveColor Vision Deficiency? http://www.color-blindness.com/ishihara-38-plates-cvd-test/
  • 54.
    44 Color Blindness Color blindnessis the inability or decreased ability to distinguish between colors. It affects 7%-8% of all men and less than 1% all women total color blindness - “monochromia”
  • 55.
  • 56.
  • 57.
    47 Tritanopia tritanopia - (try-tan-opia)difficulty distinguishing blue from green or yellow from violet very rare
  • 58.
    48 Video: Keeping Web Accessibilityin Mind Of course there are more severe disabilities, blindness motor disabilities hearing disabilities that we should keep in mind when designing our applications. youtu.be/yx7hdQqf8lE?t=1m15s
  • 59.
    Accessibility 101 WCAG: WebContent Accessibility Guidelines Current spec is 2.0 from 2008 Defines 3 levels A - minimum level of conformance AA - AAA - cadillac What I’m going to go over will not get you to A, but it will make getting to A relatively painless.
  • 60.
    50 Don’t Rely onColor Alone *REQUIRED FIELDS First Name Last Name *Telephone ( ) - this is referred to in broader terms in wcag: do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
  • 61.
    51 Don’t Rely onColor Alone example of how a person with color vision deficiency might see this chat list.
  • 62.
    52 Don’t Rely onColor Alone use both color and shape with icons
  • 63.
    53 Don’t Rely onColor Alone
  • 64.
    54 Don’t Rely onColor Alone
  • 65.
    55 Keep Contrast High Thisis difficult for you to read because there is not enough contrast between the foreground and the background. Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • 66.
    WCAG AA Minimumfor regular text 4.5:1 56 Contrast Ratios WCAG AA Minimum for larger text 3:1 http://webaim.org/resources/contrastchecker/ Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • 67.
    57 Keep Contrast High Beespecially careful with text over images
  • 68.
    58 Use Headings Appropriately Headings arenot simply used for variations in font. They convey meaning - the hierarchy of the html document - to both viewers and to user agents, such as screen readers… they help create the document outline (more later)
  • 69.
    59 Headings and Subheadings Manytags in HTML were developed not to assist with formatting, but to provide information on the structural hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit. Purpose of Headings For documents longer than 3-4 paragraphs, headings and subheadings are important usability and accessibility strategy to help readers both determine the overall outline of the document and to navigate to specific information that may need more of the reader's attention. How to Use Headings Appropriately Headings: Semantic vs. Formatted Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/ font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings and provide a list as a page or document table of contents (see image below). Heading provide information on the structural hierarchy of the document.
  • 70.
    60 Headings and Subheadings Manytags in HTML were developed not to assist with formatting, but to provide information on the structural hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit. Purpose of Headings For documents longer than 3-4 paragraphs, headings and subheadings are important usability and accessibility strategy to help readers both determine the overall outline of the document and to navigate to specific information that may need more of the reader's attention. How to Use Headings Appropriately Headings: Semantic vs. Formatted Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/ font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings and provide a list as a page or document table of contents (see image below). <h1> <h2> <h3> <h3> H1 for the page title. Only 1 per page. H2 for major headings and H3 for major sub headings.
  • 71.
    61 Support Keyboard Navigation Cycling throughlinks when you press the tab key. By default, the natural tabbing order will match the source order in the markup. If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page. Make sure keyboard focus is obvious with a focus style in css To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
  • 72.
    61 Support Keyboard Navigation Cycling throughlinks when you press the tab key. By default, the natural tabbing order will match the source order in the markup. If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page. Make sure keyboard focus is obvious with a focus style in css To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
  • 73.
  • 74.
    63 Include Alt Text withAll Images < img src=“images/merc.jpg alt=“Mercurial Superfly Football Cleat” > Use alt text to convey the same information that the image would. Not simply describe the picture
  • 75.
    64 Include Alt Text withAll Images If the image has no information to convey, leave the alt tag blank - the screen reader will skip it.
  • 76.
    65 Include Alt Text withAll Images < img src=“images/bg.jpg alt=“” > If the image has no information to convey, leave the alt tag blank - the screen reader will skip it. Otherwise the screen reader will read the url. To Josh’s question: how do we keep from getting “too much” especially on a home page. If you wind up with lots of images that convey no information, you might have a smell.
  • 77.
    66 Limit Flashing Elements <blink > Avoid flashing anything on the screen more than 3 times in one second. Can induce an epileptic seizure
  • 78.
    66 Limit Flashing Elements <blink > Avoid flashing anything on the screen more than 3 times in one second. Can induce an epileptic seizure
  • 79.
    67 Caption Audio/Video How ToCaption Videos on YouTube Provide alternatives to time based media. Caption videos with either closed or open captioning.
  • 80.
    68 Use ARIA Landmark Roles AriaRole HTML5 element banner <header role=“banner> navigation <nav role=“navigation”> main <main role=“main”> complimentary <aside role=“complimentary”> contentinfo <footer role=“contentinfo”> source: http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/ WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications Suite a technical spec that defines how to increase the accessibility of web pages banner - use only once per page on the “main” header element which may be a div or the html5 header equivalent. navigation - use on a section with navigational links main - the main content of a document
  • 81.
    Video: How ARIALandmark Roles Help Users Use ARIA Landmark Roles
  • 82.
    70 More Information Level ACompliance Checklist:
 http://www.wuhcag.com/wcag-checklist/
  • 83.
    Meaning for Robots Whatrobots? Web crawlers assistive technology
  • 84.
    Semantics Semantic - ofor relating to meaning. On the web, it is used to suggest the meaning of the content enclosed by html tags. examples: table, ul, dl, h1-h6, p
  • 85.
    73 Document Outline When arobot (search engine spider) looks at your webpage, it does not see the decoration or necessarily the layout, it sees the structure of your page and the information you tell it is meaningful, using semantic markup. The main purpose of semantic HTML is the automated extraction of meaning from content automated document processing In it's simplest form automated document processing would be the ranking of websites. The web-crawler grabs the content and tries to analyze it in order to rank the site according to it's over-all quality and relevance regarding you search-term
  • 86.
    74 Document Outline <h1> <h2> <h3> <h4> <h4> <h3> <h3> <h3> <h3> <h3> <h3> <h3> Ituses the headings, forms titles, table titles, and any other appropriate landmarks to map out the document and generate a document outline.
  • 87.
  • 88.
    76 Document Outline <h1> <h2> <h3> <h4> } looks likea table of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results. Here you can see how nested headings are used to give this web page a hierarchy.
  • 89.
    looks like atable of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results. Here you can see how nested headings are used to give this web page a hierarchy.
  • 90.
    no document outline dallaspawn shops does not return ca :(
  • 91.
    79 The H1-H6 elementsare labels for sections that follow The CAPTION element is a label for TABLE The LABEL element is a label for the form element The LEGEND element is a label for a set of form elements The TH element is a label for a row/column of table cells. The TITLE element is a label for the document. The title attribute is a label for many elements e.g. INPUT source: http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view Anything you want in your document outline needs a “label” http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view
  • 92.
    80 (Some) HTML5 Elements <section> <article> <aside> <nav> <header> <footer> <main> <video> <audio> HTML5gives us some new elements to use for better semantics most of or all these used to be represented by the <div> tag. section - Defines a section in a document. header - Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content. footer - Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback. nav - defines a section that contains only navigation links article - Defines self-contained content that could exist independently of the rest of the content. aside - Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense. main - Defines the main or important content in the document. There is only one <main> element in the document. video - represents a video file and it’s associated audio files and captions audio - represents a sound or an audio stream
  • 93.
    Which Tag toUse? 81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
  • 94.
    Which Tag toUse? 81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
  • 95.
    The Future ofthe Web aka the “Semantic” Web
 Semantic Web Video Video: 2007 by Manu Sporny - contributor to W3C chair of the W3C’s rdfa Working Group
  • 96.
    Microformats RDFa Microdata Oh My! Sporny mentionedMicroformats and RDFa as attributes we can add to markup to make interfaces more semantic - to tell robots about ‘things’ instead of documents. Few changes since this video. Rise and apparent fall of micro data - dropped by blink and webkit MIA Microformats ?
  • 97.
    RDFa Lite Does everythingimportant that Microdata does, it’s an official standard, and has the strongest deployment of the two. RDFa Lite became a W3C Recommendation in 2012 Quick example of how to tell a robot about a ‘thing’.
  • 98.
    85 Specify Vocabulary Typically whenwe talk about a thing, we use a particular vocabulary to talk about it. So, if you wanted to talk about People, the vocabulary that you might use would specify terms like name and telephone number. When we want to mark up things on the Web, we need to specify which vocabulary that we are going to be using. There are many vocabularies, some are domain specific. In this example we have specified that we are going to be using the vocabulary that can be found at http://schema.org/.
  • 99.
    86 Schema.org a vocabularythat has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes, and Events.
  • 100.
    87 Specify Type Once wehave specified the vocabulary, we need to specify the type of the thing that we're talking about. In this particular case we are talking about a Person, so we add an attribute of typeof=“Person” This on-page markup helps search engines understand the information on webpages and provide richer results.
  • 101.
    88 Schema.org a vocabularythat has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes, and Events.
  • 102.
    89 Specify Properties Now allwe need to do is specify which properties of that person we want to point out to the search engine. Here we mark up the person's name, phone number and web page, highlighted in blue.
  • 103.
  • 104.
  • 105.
    91 Specify Properties Now allwe need to do is specify which properties of that person we want to point out to the search engine. Here we mark up the person's name, phone number and web page, highlighted in blue.
  • 106.
    92 Semantics Make the WebBetter Has anyone worked on a project where microformats, micro data, or rdfa was a requirement?
  • 107.
    93 Resources 1 Color Vision Deficiency Test http://www.color-blindness.com/ishihara-38-plates-cvd-test/ 2 Video:Keeping Web Accessibility in Mind youtu.be/yx7hdQqf8lE?t=1m15s 3 Accessibility Compliance Checklist: http://www.wuhcag.com/wcag-checklist/ 4 Color Contrast Checker http://webaim.org/resources/contrastchecker/ 5 How to caption vids in youtube youtu.be/qbUcv3Bc61g?t=58s 6 Video: How ARIA Landmark Roles Help Users youtu.be/IhWMou12_Vk 7 ARIA Landmark Roles http://www.nomensa.com/blog/2010/wai-aria-document- landmark-roles/ 8 HTML5 Outliner Chrome Extension https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo?hl=en 9 HTML5 Flowchart html5doctor.com/downloads/h5d-sectioning-flowchart.pdf 10 Future of the Web youtu.be/OGg8A2zfWKg?t=2m25s https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en html5doctor.com/downloads/h5d-sectioning-flowchart.pdf youtu.be/OGg8A2zfWKg?t=2m25s
  • 108.
    94 Resources 11 schema.org www.schema.org 12A primer on RDFa-Lite http://www.w3.org/TR/rdfa-lite/#bib-RDFA-PRIMER https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en html5doctor.com/downloads/h5d-sectioning-flowchart.pdf youtu.be/OGg8A2zfWKg?t=2m25s