Adaptive Designs, Beyond Pixel Perfection

Mockups reflect an idealized version of the product: the perfect text size, faultless content, taken during a perfect user journey. They fall apart once confronted with real content, technical limitations, and the vast diversity of user need. We call those scenarios “edge cases”. However, these aren't exceptions but an essential part of the user experience.
This talk aims to redefine our approach to design by incorporating these 'edge cases' in the design process from the start. Doing so, we can build more robust, inclusive and scalable products.

Transcript

1. Adaptive Designs Beyond Pixel Perfection Stéphanie Walter - 2023
2. stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer Mobile expert. Pixel & CSS Lover
3. We often design for the “pixel perfect best case scenario”… And then reality happens: real content, different browsers, and of course, real users.
4. Going beyond the “default” perfect state
5. Perfect Page User Clicks Perfect idealistic case
6. Loading state Has loaded? Y N Has content? Error State Y N Empty State Loading State Opens page Loaded Page!
7. Logo Loading state: How is my page going to load? 1 2 3 4 5 Loading state
8. What is my component going to look like while it loads? Loading state
9. What is my component going to look like while it loads? Loading state
10. Has loaded? Y N Has content? Error State Y N Empty State Loading State Opens page Loaded Page! Error state
11. 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
12. 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 (xxx@xxx.org) 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
13. 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
14. Has loaded? Y N Has content? Error State Y N Empty State Loading State Opens page Loaded Page! Empty state
15. Make it actionable and useful to users Error state
16. Empty states can be interesting design opportunities Empty state
17. First use empty states can be used for onboarding Empty state
18. 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 Design system + checklist helps “not forget” about different states How To?
19. Adapting to Content Density
20. 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
21. Ideal amount, yeah! Content Amount
22. Not enough content? Content Amount
23. Too much content… Content Amount
24. 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
25. 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?
26. Conditional content: what happens if there is no image? CSS has()
27. Ahmad Shadeed : CSS :has Parent Selector
28. Adapting layout to content CSS flexbox
29. How does it behave in a gallery with different content length? CSS min() max()
30. What happens if there’s no content value (yet)?
31. 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?
32. Adaptive Layouts
33. Our components often exist in multiple “sizes” M L S
34. Responsive Web Design M S L L
35. Used as teasers on season thematic recipes pages
36. Re-use of the component in different containers
37. Used as “Related recipes” slider item on a recipe details page
38. Container queries Media queries
39. Contrainer queries bookshop — Max Böck
40. Faking container/ media queries with variables, min-max and auto-layout How To?
41. Kudos to Christine for the little pink blocs ideas for documenting this
42. 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?
43. Adapting to User's Situation
44. User’s Interactions
45. Providing different interaction states for components
46. How will user interact with this component with a mouse? Interactive States
47. What about keyboard users? Interactive States
48. Services Portfolio Services FAQ Blog Contact us What about touch users? Interactive States
49. Documenting interactions, steps and cases to bridge the gap with dev teams User / task flow How To? Interaction flow
50. User’s Preferences
51. Respect user’s zoom level and make sure no content is missing
52. Dark vs Light mode CSS prefers-color-scheme
53. Higher contrast mode if needs need it CSS prefers-contrast
54. (Windows) Detect if the user is in the limited color palette mode CSS forced-colors
55. Some animations can make people sick: prefers- reduced-motion CSS prefers-reduced-motion
56. 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.
57. Design/dev peer reviewing to fine tune the details in the browser How To?
58. User’s Environment & Journey
59. Using multiple device sensors to adapt to user’s light environment?
60. Design with offline support (and local cache) in mind JS service workers, etc.
61. Design for “periodically synchronized data in the background” JS Background Synchronisation API
62. You need to understand content and how people will use your products, beyond the interface: User Research!!! How To?
63. Also: reach out to developers for technical capabilities, you might be surprised and discover nice features that make sense for your users. How To?
64. User’s Journey
65. 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
66. 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
67. 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.
68. Going beyond what happens in the app/site, understanding user behaviour and journeys How To?
69. Going beyond happy path and assumptions
70. Why do we ask for this? Do we need that data? Is this the right way to ask for this? (No) Gender * Male Female
71. Why do we assume names can’t have less than 3 characters? Via dcousineau
72. Bad design, bad copy here: my name is correct, your system is the issue here.
73. How many bad assumptions lead to deciding to prevent users from copy pasting on mobile?
74. 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?
75. Might this cause harm or distress to our users? Algorithmically generated memories going wrong
76. Challenge your assumptions. This means: build more diverse teams! How To?
77. Is it going to stress / irritate some users?
78. How might this get abused?
79. Act instead of react: the bad actors workshop How To?
80. database.platformabuse.org
82. And we need more diverse teams who seek to understand real users, beyond the “happy path” that, again might not exist.
83. We need more designer/ dev collaboration to go beyond pixel perfect mockups that don’t reflect real product.
84. stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer Mobile expert. Pixel & CSS Lover