Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter

Adaptive Designs
Beyond Pixel Perfection
Stéphanie Walter - 2023

stephaniewalter.design @WalterStephanie
🦊
User Researcher & Product Designer
Mobile expert. Pixel & CSS Lover

We often design for the
“pixel perfect best case scenario”…
And then reality happens: real
content, different browsers, and of
course, real users.

Loading state
Has
loaded?
Y
N
Has
content?
Error State
Y
N Empty State
Loading State
Opens page
Loaded Page!

What is my
component or
page going to look
like while it loads?
Loading state

Has
loaded?
Y
N
Has
content?
Error State
Y
N Empty State
Loading State
Opens page
Loaded Page!
Error state

Make it
actionable
and useful to
users
Error state

em 04
There is a technical problem with the content of this page. If the problem persists,
please contact XXXXX technical support team by email (xxx@xxx.org) or phone
(Ext. 0000)
Tile title
Tile title
Tile title
Content goes here :)
Content goes here :)
Content
Content
Content error
at component
level
Error state

Has
loaded?
Y
N
Has
content?
Error State
Y
N Empty State
Loading State
Opens page
Loaded Page!
Empty state

Empty states
can be
interesting
design
opportunities
Empty state

First use empty
states can be
used for
onboarding
Empty state

Loading
My division
Label
Card title My division
Label
2019
Label
2019
Label
Data Population
Empty state - no data
Card title My division
Label
2019
Label
2019
Label
There are no [Elements Title] to display.
Error and warning
My division
Label
Card title
There is a technical problem with the content of this Tile. If the problem persists,
please contact Serapis technical support team by email (serapis_help@eib.org) or
phone (Ext. 54000)
My division
Label
2019
Label
2020
Label
States in the
design system +
state checklist
for stories
How To?

Has
loaded?
Y
N
Has
content?
Error State
Y
N Empty State
How much
content?
Too little
Ideal Situation
Too much
Loading State
Opens page
Conditional
Content
Content Amount

Ideal amount,
yeah!
Content Amount

Not enough
content?
Content Amount

Too much
content…
Content Amount

General Information
21,74 M EUR
EIB Authorised Amount (up to)
Normal
Workflow Type
Microfinance, Regufeers/Migration
Special Operation Characteristics
Ice cream donut gummies marzipan candy lollipop jujubes jelly. Gingerbread pudding sweet roll
bonbon candy cupcake gingerbread pie tiramisu. Chocolate cake marzipan candy canes macaroon
ice cream donut carrot cake chocolate.
Project Description
52,97 M EUR
Project Cost
In M EUR
Currency
Show more
General Information
21,74 M EUR
EIB Authorised Amount (up to)
Normal
Workflow Type
Microfinance, Regufeers/Migration
Special Operation Characteristics
Ice cream donut gummies marzipan candy lollipop jujubes jelly. Gingerbread pudding sweet roll
bonbon candy cupcake gingerbread pie tiramisu. Chocolate cake marzipan candy canes macaroon
ice cream donut carrot cake chocolate.Ice cream donut gummies marzipan candy lollipop jujubes
jelly. Gingerbread pudding sweet roll bonbon candy cupcake gingerbread pie tiramisu. Chocolate
cake marzipan candy canes macaroon ice cream donut carrot cake chocolate.Ice cream donut
gummies marzipan candy lollipop jujubes jelly. Gingerbread pudding sweet roll bonbon candy
cupcake gingerbread pie tiramisu. Chocolate cake marzipan candy canes macaroon ice cream
donut carrot cake chocolate.
Project Description
52,97 M EUR
Project Cost
In M EUR
Currency
Show less
40 words for the show more
Less than 61 caracters, we
show it as normal def list item
A Mandate Name Here 31.12.2023
Chocolate lollipop gummies topping cheesecake caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping
cheesecake caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping cheesecake caramels pie. Pie
cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping cheesecake caramels pie. Pie cupcake tart sesame snaps sweet
tootsie roll. Chocolate lollipop gummies topping cheesecake caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop
gummies topping cheesecake caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping cheesecake
caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping cheesecake caramels pie. Pie cupcake tart
sesame snaps sweet tootsie roll. Chocolate lollipop gummies topping cheesecake caramels pie. Pie cupcake tart sesame snaps sweet tootsie roll.
cupcake tart sesame snaps sweet tootsie roll.
Show less
Manage Holding Fund
A Mandate Name Here 31.12.2023
cupcake tart sesame snaps sweet tootsie roll.
Show more
Manage Holding Fund
Show more /
show less
mecanism
Content Amount

Scaling content
๏ Ask the devs for the limits of those
fields in the database, ask for min, max
and average content length.
๏ If you use “fake content”, make sure
the structured and length is close to
the real one.
๏ Always prepare for, mooooooore
How To?

Conditional
content: what
happens if there
is no image?
CSS has()

Ahmad Shadeed : CSS :has Parent Selector

Adapting
layout to
content
CSS flexbox

How does it
behave in a
gallery with
different
content length?
CSS min() max()

What happens
if there’s no
content value
(yet)?

Content scalability and conditional
content: I don’t need to “design” all
of them, just “decide” what will
happen and communicate this to /
with the dev team.
How To?

Our
components
often exist in
multiple “sizes”
M
L
S

Responsive
Web Design
M
S L L
CSS media queries

Re-use of the
component in
different
containers
CSS container queries

Container
queries
Media
queries

Contrainer
queries bookshop
— Max Böck
CSS container queries

Faking container/
media queries with
variables, min-max
and auto-layout
How To?

We need to stop obsessing over pixel perfection
and embrace the fluid flexible nature of the web:
Design in tools,
Decide in the browser!
How To?

Dark vs Light
mode
CSS prefers-color-scheme

Higher
contrast mode
if needs need it
CSS prefers-contrast

(Windows) Detect
if the user is in the
limited color
palette mode
CSS forced-colors

Some
animations can
make people
sick: prefers-
reduced-motion
CSS prefers-reduced-motion

More modes
๏ inverted-colors: test if the operating
system has inverted all colors
๏ prefers-reduced-transparency (no
support): checks if users request the
system to have less transparent effects
๏ prefers-reduced-data (no experimental):
detect if the user has requested the web
content that consumes less internet
traffic.

Design/dev peer
reviewing to fine tune the
details in the browser
How To?

User’s Environment & Journey

Design with
offline support
(and local
cache) in mind
JS service workers, etc.

Design for
“periodically
synchronized
data in the
background”
JS Background Synchronisation API

Vehicledropoffdetails
Close
100%
9:41 AM
XXX
Follow the steps to drop off your vehicle
Get the rental car keys and drop your vehicle keys in
a safe. Further instructions will be available.
5 Pickup rental & Drop keys
Open gate
Use the code to open the parking gate
Show gate code
Enter the parking space and park your vehicle in an
available spot
Vehicle is parked
2 Park vehicle
You asked for a category 1 rental. Your car is ready
for pick-up, we just need you to sign a few
documents.
3 Sign documents
Fill in rental car damage report. Further instructions
will be available.
4 Rental damage report
Close
100%
9:41 AM
XXX
Open gate
Gate was opened
Vehicle was parked
Park vehicle
You asked for a category 1 rental. Your car is ready
for pick-up, we just need you to sign a few
documents.
Sign the documents
3 Sign documents
Fill in rental car damage report. Further instructions
will be available.
Close
100%
9:41 AM
XXX
Open gate
Gate was opened
Vehicle was parked
Park vehicle
ID card and Driving Licence uploaded and confirmed,
rental car contract and general rental conditions
signed.
Sign documents
Please go around the vehicle and fill in the rental car
damage report.
Start rental damage report
Tesla
Model 3
Close
100%
9:41 AM
XXX
Pickup rental & Drop keys
Rental car picked up and keys were droped in the
safe.
Get safe information
5
Open gate
Gate was opened
Vehicle was parked
Park vehicle
Rental damage report was done and signed
Rental damage report
signed.
Sign documents
Close
100%
9:41 AM
XXX
Pickup rental & Drop keys
Rental car picked up and keys were droped in the
safe.
Show gate code
Open gate
Gate was opened
Vehicle was parked
Park vehicle
Rental damage report was done and signed
Rental damage report
signed.
Sign documents
I finished the drop off
Adapting to
different steps
in a user
journey process

You need to understand
content and how people
will use your products,
beyond the interface:
User Research!!!
How To?

Also: reach out to developers for
technical capabilities, you might
be surprised and discover nice
features that make sense for
your users.
How To?

Providing
different
interaction states
for components

How will user
interact with this
component with
a mouse?
Interactive States

What about
keyboard
users?
Interactive States

Services
Portfolio Services FAQ Blog Contact us
What about
touch users?
Interactive States

Documenting
interactions,
steps and cases
to bridge the gap
with dev teams User / task flow
How To? Interaction flow

Beyond Happy Path and
Assumptions

Why do we ask
for this? Do we
need that
data?
Is this the
right way to
ask for this?
(No)
Gender *
Male Female

Putting
validation gates
on top of wrong
assumptions…
Via dcousineau

Bad design, bad
copy here:
my name is correct,
your system is the
issue here.

Is it going to
stress / irritate
some users?

Is my default
the “right”
assumption for
everyone?
Your timeline
Congratulation you lost
2kg in the last month!
!
What if… I’m
sick, and weight
loss means I’m
getting worse?

Might this
cause harm or
distress to our
users?
Algorithmically
generated
memories going
wrong

Challenge your assumptions.
This means: build more
diverse teams!
How To?

Act instead of
react: the bad
actors
workshop
How To?

And we need more
diverse teams who seek to
understand real users,
beyond the “happy path”
that, again might not exist.

We need more designer/
dev collaboration to go
beyond pixel perfect
mockups that don’t
reflect real product.

User's Situation
Has
loaded?
Y
N
Has
content?
Error State
Y
N Empty State
How much
content?
Too little
Ideal Situation
Too much
Loading State
How do users
interact with
the content?
Mouse
Keybard
Touch
Loading State Error State Empty State Different Content Amounts / Scalable Content Different Interactive States
Offline State
Has
connection
Y
N
Dark mode Prefers (more) contrast Contrast theme (Windows) Prefers reduced motion Inverted color
Background Sync
Offline State
Prefers reduced transparency Prefers reduced data
Beyond Assumptions
Is it okay to ask for this information? Am I asking / displaying this the right way? Does my default work for everyone? How might this get misused? Abused?
Adaptive Layouts
Responsive: how will this adapt to
different screen size?
Container: how will the component adapt in
different layout situations
Conditional
Content
Stage of the User Journey
Will this annoy, stress or irritate users?
What are my assumptions about this?
What happens if they are wrong?
Does this work with Assistive Technologies?
bit.ly/dbhp23

Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter

Recommended

Recommended

More Related Content

Similar to Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter

Similar to Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter (20)

More from Wey Wey Web

More from Wey Wey Web (20)

Recently uploaded

Recently uploaded (20)

Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter