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.

Going beyond the “default” perfect state

Perfect Page User Clicks Perfect idealistic case

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

Logo Loading state: How is my page going to load? 1 2 3 4 5 Loading state

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

What is my component 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

https://www.mysuperwebsite.com Bad Request Error 1337 Your browser sent a request that this server could not understand (have you tried Kligon?) Size of a request field exceed the total weight of the moon. Apache Server wathever that means here We kind of want to avoid this… Error state

Navigation item 01 Top Menu Top Menu Top Menu Top Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Logo Search There is a technical problem with the content of this page. If the problem persists, please contact XXXXX technical support team by email ([email protected]) or phone (Ext. 0000) Tile title Tile title Tile title Tile title Tile title Content goes here :) Content goes here :) Content goes here :) Content goes here :) Content error at component level 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 ([email protected]) 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

Make it actionable and useful to users Error 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 ([email protected]) or phone (Ext. 54000) My division Label 2019 Label 2020 Label Design system + checklist helps “not forget” about different states How To?

Adapting to Content Density

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. 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. Show less Manage Holding Fund 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. 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?

Adaptive Layouts

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

Responsive Web Design M S L L

Used as teasers on season thematic recipes pages

Re-use of the component in different containers

Used as “Related recipes” slider item on a recipe details page

Container queries Media queries

Contrainer queries bookshop — Max Böck

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

Kudos to Christine for the little pink blocs ideas for documenting this

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?

Adapting to User's Situation

User’s Interactions

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

User’s Preferences

Respect user’s zoom level and make sure no content is missing

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

Using multiple device sensors to adapt to user’s light environment?

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

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?

User’s Journey

Vehicle drop off details 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 Vehicle drop off details 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 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. 4 Rental damage report Vehicle drop off details 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 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 4 Rental damage report Vehicle drop off details Close 100% 9:41 AM XXX Follow the steps to drop off your vehicle 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 ID card and Driving Licence uploaded and confirmed, rental car contract and general rental conditions signed. Sign documents Vehicle drop off details Close 100% 9:41 AM XXX Follow the steps to drop off your vehicle 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 ID card and Driving Licence uploaded and confirmed, rental car contract and general rental conditions signed. Sign documents I finished the drop off Adapting to different steps in a user journey process

WAW Warsaw LUX Luxembourg Passenger Seat Terminal Gate Boarding Date Class Stéphanie Walter 13D - - 12:55 10:55 XZ- 9019 10:30 28/06/2020 Eco D - 2 H - 1 Adapting to user needs and expectations across the journey WAW Warsaw 12:55 LUX Luxembourg 10:55 XZ- 9019 Date: 28/06/2020 Passenger Seat Terminal Gate Boarding 13D D A12 10:30 Class Stéphanie Walter Eco XZ- 9019 WAW LUX 28/06/2020 Gate Terminal Boarding A12 A12 Seat 13D 10:30

This last part is more “experimental” and I would be careful with it and heavily test it because it might go against the “predictability of the interface”. So be careful.

Going beyond what happens in the app/site, understanding user behaviour and journeys How To?

Going 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

Why do we assume names can’t have less than 3 characters? Via dcousineau

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

How many bad assumptions lead to deciding to prevent users from copy pasting on mobile?

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?

Is it going to stress / irritate some users?

How might this get abused?

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

database.platformabuse.org

No content

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.

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