$30 off During Our Annual Pro Sale. View Details »

Adaptive Designs, Beyond Pixel Perfection

Stéphanie Walter
September 06, 2023

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.

Stéphanie Walter

September 06, 2023
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. We often design for the “pixel perfect best case scenario”…

    And then reality happens: real content, different browsers, and of course, real users.
  2. Loading state Has loaded? Y N Has content? Error State

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

    Empty State Loading State Opens page Loaded Page! Error state
  4. 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
  5. 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
  6. 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
  7. Has loaded? Y N Has content? Error State Y N

    Empty State Loading State Opens page Loaded Page! Empty state
  8. 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?
  9. 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
  10. 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
  11. 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?
  12. 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?
  13. 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?
  14. Documenting interactions, steps and cases to bridge the gap with

    dev teams User / task flow How To? Interaction flow
  15. 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.
  16. You need to understand content and how people will use

    your products, beyond the interface: User Research!!! How To?
  17. Also: reach out to developers for technical capabilities, you might

    be surprised and discover nice features that make sense for your users. How To?
  18. 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
  19. 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
  20. 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.
  21. Why do we ask for this? Do we need that

    data? Is this the right way to ask for this? (No) Gender * Male Female
  22. 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?
  23. And we need more diverse teams who seek to understand

    real users, beyond the “happy path” that, again might not exist.
  24. We need more designer/ dev collaboration to go beyond pixel

    perfect mockups that don’t reflect real product.