Page Comparison

2 min

Elevation documentation

Gabriel Weinberg

Elevation and Shadows
Levels 0 - 5
Offline discussion to happen re: hover states on cards that have multiple actions
JW: So there’s no objection to using shadow change as a focus indicator?
GW: For a card, we handle that on the card level, but how we handle focus is up to individual components. If it’s entirely clickable, it may also need something else to indicate a focus state.
JW: I encourage you not to “move” the element when changing the shadow on it (to lift it off the page), because it’s grating for some people.
GW: I don’t love the way that looks anyway, so doesn’t seem to fit what we’re doing brand-wise.

2 min

Spacing docs

Eugene Kang

Spacing and grid

• Use terms “Horizontal “ and “Vertical” spacing rather than stack margin

• Adam Butterworth (Deactivated) to work on translating these numbers to Bootstrap css utility classes

• Ben is pleased.

2 min

Border radius / fills review

Eugene Kang

Goal: Decide to move forward as designed unless there is blocking feedback

Borders, Fills, Radiuses

The edges of controls must be 3:1 contrast. Discernability requirement of buttons is satisfied by the text in a button borders on button don’t need to be 3:1 contrast

•  Eugene Kang Check that we need Warning border. if so make sure it is 3:1 contrast

Fills: Semantic background should always be paired with icon or a 3:1 border

Should we use the word that conveys the icon?

If we don’t use text, warning icon needs to be higher contrast
For color blind people (and others) yellow-500 is more readable as a warning than our yellow-700

Questions about Alerts (we need to revisit next week).

It should be obvious that it’s something that needs attention.
Maybe a black exclamation point for the warning, to make it pop more.

•  Eugene Kang Follow up with warning icon color. It’s not 3:1 contrast, how can we pair with black or some other solution.

Radiuses: large, medium, and small

BW: Small is no radius, which feels weird
AB: One of the thoughts around naming is that if you wanted a theme, you could theme it, where our buttons are square, they’d use this
MM: Maybe we have documentation that explains this
BW: There may be people who want no radius, though
MM: Maybe we do 2 border radiuses and see if someone wants a third?
AB: Maybe we have for our purposes buttons have no border radius, and we have radius-1 radius-2 radius-3
BW: If someone wants to add r3 that would
EK: I can make that update

Attitudinal Metrics via Hotjar

Gabriel Weinberg

A new metric for benchmarking our product over time. May evolve and be tweaked over time.
GW: In four different locations, we’re showing this survey. Getting an idea of what learners think about these affirmative statements over time. We may reveal areas we want to focus deeper on or pivots in design.
We’ll see these over time as a stacked bar graph either globally or per page.
BW: I like that it integrates with the experience. I think we’ll get better info that way.
(This idea meets with general approval)
GW: You can step through or tell it not to bother you again. Picks up our branding, etc. There are deeper things we can do, ask individual people to do deeper dives or 1:1s. There’s lots of possibilities.
BW: I’d love for that drawer to be more obvious. If there’s a way to make it pop a bit more (maybe an icon), that would be great.

Will cover next week

10 min

Cards design review

Adam Butterworth (Deactivated)

Goal: Decide to move forward as designed unless there is blocking feedback

20 min

Form fields design feedback

Bronwyn Hawkins (Deactivated)