ui design-day2b
TRANSCRIPT
![Page 1: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/1.jpg)
Utility | Meaning | Engagement
UI Design Basics
![Page 2: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/2.jpg)
![Page 3: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/3.jpg)
Engagement
MeaningUtility
![Page 4: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/4.jpg)
Meaning
UI Design Basics
![Page 5: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/5.jpg)
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 designRobots: How machines acting on behalf of humans interact with our interfaces.
![Page 6: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/6.jpg)
Meaning for Humans
![Page 7: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/7.jpg)
Set the stage 90% of all information going to your brain is visualLight bounces off surfaces Eyes take in the sense data - visual field
Brain interprets makes sense ofgives meaning to the sense dataPart of interpreting involves clustering the sense data into groupsThe 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
![Page 8: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/8.jpg)
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
![Page 9: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/9.jpg)
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
![Page 10: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/10.jpg)
“The whole is other than the sum of the parts”-Kurt Koffka
Stephen BradleyWhen 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.
![Page 11: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/11.jpg)
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?
![Page 12: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/12.jpg)
10
Figure/Ground
Blurred background photo: “ground”Text is the “figure”
![Page 13: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/13.jpg)
11
Figure/Ground
Admin form section jumps out as the “figure”Header and Menu read as background
![Page 14: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/14.jpg)
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
![Page 15: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/15.jpg)
13
Similarity
elements that are similar to each other tend to be grouped
![Page 16: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/16.jpg)
14
Similarity
we can strengthen the effect by varying the ways in which they are similar
![Page 17: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/17.jpg)
15
Similarity
Anomaly
we can take advantage of similarity by introducing elements that are dissimilar to add emphasiscalled anomaly
![Page 18: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/18.jpg)
16
Similarity
If I can click on one i can probably click on any of them.
![Page 19: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/19.jpg)
17
Similarity
Payment information uniformEmphasis is given to my total balance through the inverse of similarity anomaly.
![Page 20: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/20.jpg)
18
Proximity
Items that are close together are perceived to be related
![Page 21: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/21.jpg)
19
Proximity
Items that are close together are perceived to be related
![Page 22: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/22.jpg)
20
Proximity
Proximity is the only thing associating an item with its detail text
![Page 23: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/23.jpg)
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
![Page 24: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/24.jpg)
22
Continuation
proximity can balance or even override continuation
![Page 25: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/25.jpg)
23
Continuation
Continuation is used as a cue to scroll down.Especially when scrolling is so easy on handheld devices.
![Page 26: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/26.jpg)
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.”
![Page 27: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/27.jpg)
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.”
![Page 28: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/28.jpg)
25
Common Fate
actual motion is not necessary to perceive common fate
![Page 29: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/29.jpg)
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
![Page 30: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/30.jpg)
27
Common Regions
can also use a background color
![Page 31: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/31.jpg)
28
Common Regions
forms/field-set
![Page 32: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/32.jpg)
29
Common Region
Controls surrounded by a common regionWorkspace denoted by a common region
![Page 33: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/33.jpg)
30
Closure
When looking at a complex arrangement of individual elements, we tend to first look for a single, recognizable pattern.
![Page 34: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/34.jpg)
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
![Page 35: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/35.jpg)
32
closure implies a common region that separates “Social links” from “Subscribe” separated from “recent articles”
![Page 36: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/36.jpg)
33
ExerciseIdentify the gestalt principles at work
create list
![Page 37: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/37.jpg)
34
Figure/GroundClosure in logoContinuation in background
![Page 38: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/38.jpg)
34
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Figure/GroundClosure in logoContinuation in background
![Page 39: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/39.jpg)
35
Controls surrounded by a common regionWorkspace denoted by a common regionSimilarity in builder menuContinuity in horizontal menus
![Page 40: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/40.jpg)
35
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Controls surrounded by a common regionWorkspace denoted by a common regionSimilarity in builder menuContinuity in horizontal menus
![Page 41: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/41.jpg)
36
Similarity:headings are larger, orangelinks are underlinedProximity
![Page 42: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/42.jpg)
36
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Similarity:headings are larger, orangelinks are underlinedProximity
![Page 43: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/43.jpg)
37
Common region associates tabs aboveDish detailsOptions at the bottom
![Page 44: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/44.jpg)
37
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Common region associates tabs aboveDish detailsOptions at the bottom
![Page 45: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/45.jpg)
38
Similarity - Categories established with offset iconProximity
![Page 46: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/46.jpg)
38
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Similarity - Categories established with offset iconProximity
![Page 47: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/47.jpg)
39
Proximity associates navigation items
Similarity - caps in menuAnomaly - bold on WORKCommon Region - menuContinuity - scrollFigure Ground - image
![Page 48: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/48.jpg)
39
Figure/GroundSimilarity
ProximityContinuationCommon Fate
Common RegionClosure
Proximity associates navigation items
Similarity - caps in menuAnomaly - bold on WORKCommon Region - menuContinuity - scrollFigure Ground - image
![Page 49: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/49.jpg)
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.
![Page 50: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/50.jpg)
41
Everyone, in descending order by how much they should know about web accessibility
1. Web/IT accessibility specialists2. Web/IT developers3. Web/IT managers, administrators4. Support staff for content authors5. Content authors6. 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 knowThat users are incredibly diverseA few basic practices that make their online documents more accessible
![Page 51: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/51.jpg)
41
Everyone, in descending order by how much they should know about web accessibility
1. Web/IT accessibility specialists2. Web/IT developers3. Web/IT managers, administrators4. Support staff for content authors5. Content authors6. 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 knowThat users are incredibly diverseA few basic practices that make their online documents more accessible
![Page 52: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/52.jpg)
42
Everyone, in descending order by how much they should know about web accessibility
1. Web/IT accessibility specialists2. Web/IT developers3. Web/IT managers, administrators4. Support staff for content authors5. Content authors6. 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 knowThat users are incredibly diverseA few basic practices that make their online documents more accessible
![Page 53: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/53.jpg)
Do You Have Color Vision Deficiency?
http://www.color-blindness.com/ishihara-38-plates-cvd-test/
![Page 54: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/54.jpg)
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”
![Page 55: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/55.jpg)
45
Deuteranopia
deuteranopia (dooter-an-opia) - Green blindness
![Page 56: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/56.jpg)
46
Protanopia
Protanopia (pro-tan-opia) - red blindness
![Page 57: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/57.jpg)
47
Tritanopia
tritanopia - (try-tan-opia) difficulty distinguishing blue from green or yellow from violetvery rare
![Page 58: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/58.jpg)
48
Video: Keeping Web Accessibility in Mind
Of course there are more severe disabilities,blindnessmotor disabilitieshearing disabilitiesthat we should keep in mind when designing our applications.
youtu.be/yx7hdQqf8lE?t=1m15s
![Page 59: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/59.jpg)
Accessibility 101
WCAG: Web Content Accessibility GuidelinesCurrent spec is 2.0 from 2008Defines 3 levelsA - minimum level of conformanceAA - AAA - cadillacWhat I’m going to go over will not get you to A, but it will make getting to A relatively painless.
![Page 60: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/60.jpg)
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.
![Page 61: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/61.jpg)
51
Don’t Rely on Color Alone
example of how a person with color vision deficiency might see this chat list.
![Page 62: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/62.jpg)
52
Don’t Rely on Color Alone
use both color and shape with icons
![Page 63: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/63.jpg)
53
Don’t Rely on Color Alone
![Page 64: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/64.jpg)
54
Don’t Rely on Color Alone
![Page 65: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/65.jpg)
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.
![Page 66: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/66.jpg)
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.
![Page 67: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/67.jpg)
57
Keep Contrast High
Be especially careful with text over images
![Page 68: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/68.jpg)
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)
![Page 69: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/69.jpg)
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.
![Page 70: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/70.jpg)
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.
![Page 71: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/71.jpg)
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.
![Page 72: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/72.jpg)
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.
![Page 73: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/73.jpg)
62
Include Alt Text with All Images
![Page 74: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/74.jpg)
63
Include Alt Text with All Images
<imgsrc=“images/merc.jpgalt=“MercurialSuperflyFootballCleat”>
Use alt text to convey the same information that the image would.
Not simply describe the picture
![Page 75: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/75.jpg)
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.
![Page 76: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/76.jpg)
65
Include Alt Text with All Images
<imgsrc=“images/bg.jpgalt=“”>
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.
![Page 77: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/77.jpg)
66
Limit Flashing Elements
< blink >
Avoid flashing anything on the screen more than 3 times in one second.Can induce an epileptic seizure
![Page 78: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/78.jpg)
66
Limit Flashing Elements
< blink >
Avoid flashing anything on the screen more than 3 times in one second.Can induce an epileptic seizure
![Page 79: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/79.jpg)
67
Caption Audio/Video
How To Caption Videos on YouTube
Provide alternatives to time based media.Caption videos with either closed or open captioning.
![Page 80: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/80.jpg)
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 Suitea 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
![Page 82: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/82.jpg)
70
More Information
Level A Compliance Checklist:http://www.wuhcag.com/wcag-checklist/
![Page 83: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/83.jpg)
Meaning for Robots
What robots?
Web crawlersassistive technology
![Page 84: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/84.jpg)
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
![Page 85: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/85.jpg)
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
![Page 86: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/86.jpg)
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.
![Page 87: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/87.jpg)
75
Document Outline
Chrome extension called html5 outliner
![Page 88: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/88.jpg)
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.
![Page 89: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/89.jpg)
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.
![Page 90: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/90.jpg)
no document outline
dallas pawn shops does not return ca :(
![Page 91: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/91.jpg)
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
![Page 92: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/92.jpg)
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
![Page 93: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/93.jpg)
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.
![Page 94: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/94.jpg)
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.
![Page 95: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/95.jpg)
The Future of the Webaka the “Semantic” Web
Semantic Web Video
Video: 2007 by Manu Sporny - contributor to W3Cchair of the W3C’s rdfa Working Group
![Page 96: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/96.jpg)
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 webkitMIA Microformats ?
![Page 97: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/97.jpg)
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’.
![Page 98: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/98.jpg)
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/.
![Page 99: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/99.jpg)
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.
![Page 100: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/100.jpg)
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.
![Page 101: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/101.jpg)
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.
![Page 102: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/102.jpg)
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.
![Page 103: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/103.jpg)
90
![Page 104: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/104.jpg)
90
![Page 105: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/105.jpg)
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.
![Page 106: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/106.jpg)
92
Semantics Make the Web Better
Has anyone worked on a project where microformats, micro data, or rdfa was a requirement?
![Page 107: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/107.jpg)
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
![Page 108: Ui design-day2b](https://reader035.vdocuments.us/reader035/viewer/2022062503/58e7e8841a28abbc0b8b51d7/html5/thumbnails/108.jpg)
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