Lecture 11 Universal Design

Universal design adapts to a variety of mediums and serves a diversity of users

Print design is fixed to a specific format, but web design can and should be adaptable *Icons from [The Noun Project](https://thenounproject.com/) by Alice Design (2), Andrew Doane, Adrien Coquet (3), Nick Bluth, Mike Rowe, Curve, Mourad Mokrane, M. Oki Orlando, Tamara

Universal design is adaptable to…

…a variety of mediums

Mobile
Various screen sizes
Print

…a diversity of users

Inclusive design
Accessibility
Low internet speeds

Responsive Web Design

Percentage of global web pages
served to mobile phones

“Mobile is a magnifying glass for your usability problems.”

Josh Brewer

Many usability problems that make a website unbearable to use on mobile are actually problems on desktop as well; just not as severe. Similarly, many websites developed with usability and adaptability in mind will be baseline usable on mobile even without any mobile-specific tweaks.

By default, smartphones render pages in a wider virtual viewport, then shrink the result down

Mobile-friendly websites need to opt-out of this handling


			<meta name="viewport" content="width=device-width">

Avoid absolute widths

Responsive Flexbox
with flex-wrap

flex-wrap allows your layout to become vertical if there's no space
flex is relative. Any positive flex value makes the element stretch

`flex-wrap` is your friend

Sometimes you need to adapt non-continuously


			@media (max-width: 300px) {
				body {
				background: yellow;
			}
			}

			@media (min-width: 600px) {
				body {
					background: red;
				}
			}

Media Queries are like conditionals about the viewing conditions.
They support a bunch of criteria, but the most commonly used ones are the width and height of the viewport.
You can put any number of rules inside them.
You can use and and not operators, and commas for OR


			@media (min-width: 300px) {
				body { background-color: deeppink; }

				@media (min-height: 500px) {
					body {
						background-image:
						  linear-gradient(
							to right,
							gold,
							transparent
						  );
					}
				}
			}

Note that if we had items placed at specific columns, we'd need to override that too

Size layout flexibly, use MQs to change grid template (or flex-flow)

Viewport units are your friend

vh vw vmin vmax

RWD Best Practices

Use media queries as a last resort
Do NOT optimize for specific devices, go for fluidity
Favor percentages and viewport units over px
Favor top-down instead of side by side on narrow viewports
Favor max-width over width
If multiple metrics change in the same way, use a variable and override only that

Do not optimize for specific devices

Hands-on time!

Visit this slide designftw.mit.edu/go/slides/#inclass
Open the next demo in a codepen, then write one or more MQs to make it work better on mobile
You may find the viewport meta useful too
Save your codepen and enter its URL in the Google Form (you can do this before time is up and keep updating your codepen)

<header>
				<h1>Sir Adam Catlace</h1>
				<p>An awesome cat</p>
			</header>
			<aside>
				<ul>
					<li><a href="https://facebook.com/adamcatlace">Follow Sir Adam on Facebook</a></li>
					<li><a href="https://twitter.com/adamcatlace">Follow Sir Adam on Twitter</a></li>
					<li><a href="https://instagram.com/adamcatlace">Follow Sir Adam on Instagram</a></li>
				</ul>
				<p>
				Fat baby cat best buddy little guy i'm going to lap some water out of my master's cup meow. Meoooow milk the cow and cough for when in doubt,
				</p>
			</aside>
			<main>
				<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
				<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
				<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
				<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			</main>
			<footer>
				Copyright ©2020 Sir Adam Catlace
			</footer>

Grid areas

With named areas, you just need to change the template to rearrange everything

Print-friendly CSS

Who prints webpages?

Many people find it easier to read long text if printed
Printing tickets or receipts
accessing information in an area with poor connectivity
using data in dangerous or dirty conditions — for example, a kitchen or factory

If you want to read more, these are some good resources on print-friendly CSS:

Conceptual shift Paged vs Continuous Media

Set page defaults


				@page {
					size: letter landscape;
					margin: .8in 1in;
				}

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Behind the couch i'm going to lap some water out of my master's cup meow. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose. Thinking longingly about tuna brine. Kitten is playing with dead mouse i show my fluffy belly but it's a trap!

Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

Set page defaults


				@page :left {
					margin-right: 2in;
				}

				@page :right {
					margin-left: 2in;
				}

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Behind the couch i'm going to lap some water out of my master's cup meow. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose. Thinking longingly about tuna brine.

Kitten is playing with dead mouse i show my fluffy belly but it's a trap!

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

Override styles in print


			@media print {
				body {
				font-size: 12pt;
			}
			}

You can also do the opposite, target screens only, via @media screen

What would we want to override?


			@media print {
				.ad, nav, footer {
					display: none;
				}
			}

Heading 1

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Behind the couch i'm going to lap some water out of my master's cup meow.

Heading 2

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).


			h2 {
				break-after: avoid-page;
			}

Heading 1

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Behind the couch i'm going to lap some water out of my master's cup meow.

Heading 2

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

Title

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Annoy the old grumpy cat, start a fight and then retreat to wash

Behind the couch i'm going to lap some water
out of my master's cup meow.
I haven't decided whether or

not i wanna go out stare at owner accusingly then wink.
I'm going to lap some water out of my master's cup meow skid on floor, crash into wall and crash

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).


			li {
				break-inside: avoid-page;
			}

Title

Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on.

I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

Annoy the old grumpy cat, start a fight and then retreat to wash

Behind the couch i'm going to lap some water
out of my master's cup meow.

I haven't decided whether or not i wanna go out stare at owner accusingly then wink.
I'm going to lap some water out of my master's cup meow skid on floor, crash into wall and crash

Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

Best Practices

Lengths in physical measurements (cm, in, mm etc)
Remove unneeded cruft (ads, navigation, footers, sidebars etc)
Remove ink-heavy visual effects
Display essential hidden info, e.g. URLs

Display URLs


			@media print {
				a[href^="http"]::after {
					content: "(" attr(href) ")";
				}
			}

Inclusive Design

What is inclusive design?

Design that does not exclude on the basis of:

Disability
Race
Ethnicity
Religion
Language
Pronunciation
Gender identity
Sexual orientation
Age


			@media (prefers-reduced-motion) {
				.fancy {
					animation: none;
				}
			}

Gender diversity

Now I'm imagining a skirt-clad Rafael Viñoly traversing the catwalks of the architecture school he designed for @CityCollegeNY pic.twitter.com/F6Kw9dStDo
— John Hill (@archidose) June 27, 2018

Gender*: Male Female

What about now?

Make that field optional as much as you can. This is part of the previous recommendation — the user may know better than you if it’s safe or appropriate to disclose the information based on the context. It may even warm them up to answer the question accurately rather than skipping it.
“Prefer not to say” is always good to have. On a side note, the word “Other” may make people feel like an after-thought, particularly when the form doesn’t ask for more detail on what “Other” means.
This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion
Besides inclusivity, what other problems can you spot here?

What about this?

You can allow the inclusion of any combination of options the user wants to input. As in the Facebook interface below, the type-ahead interaction is a good option. It solves for a long list that, if just displayed, might either imply a hierarchy or order or make it harder to fill. Letting users pick as many labels as they want is also desirable. Lists like this need some keeping up, as new labels are created while others fall out of favor, and internationalization needs to be considered.
Lots of labels constantly being updated, a type-ahead search that doesn’t imply a hierarchy of genders, ability to enter more than one label, a free text field, privacy controls, ability to change the content whenever the user wants, increasingly localized labels — all make this a pretty inclusive design meant for the purpose of self-expression.
This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion

Could asking for pronouns suffice?

Instead of gender, consider asking for people’s preferred pronouns, and including the gender-neutral “They/their/theirs” as a singular pronoun. While some perceive this to be bad grammar, it was actually used this way until the Victorian era. “They” was even the word of the year in 2016 and was also adopted in 2015 by the Washington Post style guide and more recently by the AP styleguide. If you’re worried this will confuse your cis audience, explain the question as an attempt at inclusiveness, and include a sample sentence.
The notes on this slide are from the excellent UX Collective article Designing forms for gender diversity and inclusion

Another take on pronoun input UI

Facebook also allows people to choose their own pronouns. It includes examples to make the question and the intended use bit clearer. Additionally, it prominently warns users that, unlike gender, this information will be public.
This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion

Test with users across a variety of gender identities

What if you need to ask about assigned sex at birth for medical reasons?

Best Practices

Allow non-binary genders
Make gender optional
Explain why you're asking
Consider asking for pronouns instead
Don't use masculine as the default

If you have ever had a problem grasping the importance of diversity in tech and its impact on society, watch this video pic.twitter.com/ZJ1Je1C4NW
— Chukwuemeka Afigbo (@nke_ise) August 16, 2017

Ethnicity*: White Hispanic Asian Black/African-American

Never make ethnicity fields mandatory
Never make ethnicity fields mutually exclusive — multiple may apply!
These four categories are not only insufficient, but also refer to different axes, and are very US-centric
Excellent article on this:

Test with users across a variety of racial/ethnic identities

Nextdoor reduced racial profiling by 75% with good UI (re)design

Test auto-translation

Ensure your UI is translatable

Avoid text in images
Avoid explicit dimensions
Use logical instead of physical properties (e.g. margin-inline-start instead of margin-left)
Test, test, test!

The `translate` attribute

Original English text

German translation

The translate attribute is meant for literal text that should not be translated.
More examples at

Test voice UIs with a variety of accents

First name: Last name:

Full name:

Um, my name may be weird but it IS valid! Can't we have a better #ErrorMessage here? #Apostrophes ARE valid. #UX #UXfail #IrishDiaspora pic.twitter.com/7h2kSGKqIa
— LeslieO (@LeslieO) February 7, 2017

Dropdown for last name? That's a new one. #uxfail pic.twitter.com/gLrCb3uX3b
— Jane Marusaik (@janemarusaik) November 10, 2018

Dear @DHSgov there is nothing invalid about spelling cities and regions by their actual name. Ever heard of Unicode? #uxfail pic.twitter.com/T18ersQCox
— Joackim Pennerup (@JoackimPennerup) November 11, 2019

Wow, in 2022 @sittercity assumes all members of a family have the same surname. Wow.

Um no, we are not the “Verou family”, because my spouse has a last name of his own, and our child has both, thank you very much. pic.twitter.com/flmCSqbKMG
— Lea Verou (@LeaVerou) March 8, 2022

At my kids school, they only allow two parental accounts. I’m a stepdad so I simply can’t create an account
— Jon Stuebe (@jonstuebe) March 8, 2022

Avoid imposing Western restrictions on international info
safe bet: skip validation altogether for names

Learn more:

Hours of work to afford entry-level mobile data package

“If your bloated images are eating up people’s data plan, then you are literally making them work more hours — and that it is hugely discourteous.”

Bruce Lawson

What can you do?

Be mindful of page weight.
Avoid using larger media than you need
Avoid including bloated libraries that you don't need
<img loading="lazy"> (although support is limited)
Test with simulated slow speeds
Test on cheap devices

It's World Wide Web not Wealthy Western Web

Universal design adapts to a variety of mediums and serves a diversity of users

Universal design is adaptable to…

…a variety of mediums

…a diversity of users

Percentage of global web pages served to mobile phones

By default, smartphones render pages in a wider virtual viewport, then shrink the result down

Mobile-friendly websites need to opt-out of this handling

Avoid absolute widths

flex-wrap is your friend

Sometimes you need to adapt non-continuously

Size layout flexibly, use MQs to change grid template (or flex-flow)

Viewport units are your friend

RWD Best Practices

Do not optimize for specific devices

Hands-on time!

Who prints webpages?

Conceptual shift Paged vs Continuous Media

Set page defaults

Set page defaults

Override styles in print

What would we want to override?

Best Practices

Display URLs

What is inclusive design?

What about now?

What about this?

Could asking for pronouns suffice?

Another take on pronoun input UI

Test with users across a variety of gender identities

What if you need to ask about assigned sex at birth for medical reasons?

Best Practices

Test with users across a variety of racial/ethnic identities

Nextdoor reduced racial profiling by 75% with good UI (re)design

Test auto-translation

Test auto-translation

Ensure your UI is translatable

The translate attribute

Original English text

German translation

Test voice UIs with a variety of accents

Avoid imposing Western restrictions on international info safe bet: skip validation altogether for names

Hours of work to afford entry-level mobile data package

What can you do?

It's World Wide Web not Wealthy Western Web

Percentage of global web pages
served to mobile phones

`flex-wrap` is your friend

The `translate` attribute

Avoid imposing Western restrictions on international info
safe bet: skip validation altogether for names