Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Adaptive Designs
    Beyond Pixel Perfection
    Stéphanie Walter - 2023

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Going beyond the “default”
    perfect state

    View full-size slide

  5. Perfect Page
    User Clicks
    Perfect idealistic case

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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 ([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

    View full-size slide

  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 ([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

    View full-size slide

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

    View full-size slide

  15. Make it
    actionable
    and useful to
    users
    Error state

    View full-size slide

  16. Empty states
    can be
    interesting
    design
    opportunities
    Empty state

    View full-size slide

  17. First use empty
    states can be
    used for
    onboarding
    Empty state

    View full-size slide

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

    View full-size slide

  19. Adapting to Content Density

    View full-size slide

  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

    View full-size slide

  21. Ideal amount,
    yeah!
    Content Amount

    View full-size slide

  22. Not enough
    content?
    Content Amount

    View full-size slide

  23. Too much
    content…
    Content Amount

    View full-size slide

  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

    View full-size slide

  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?

    View full-size slide

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

    View full-size slide

  27. Ahmad Shadeed : CSS :has Parent Selector

    View full-size slide

  28. Adapting
    layout to
    content
    CSS flexbox

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

  32. Adaptive Layouts

    View full-size slide

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

    View full-size slide

  34. Responsive
    Web Design
    M
    S L L

    View full-size slide

  35. Used as teasers
    on season
    thematic
    recipes pages

    View full-size slide

  36. Re-use of the
    component in
    different
    containers

    View full-size slide

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

    View full-size slide

  38. Container
    queries
    Media
    queries

    View full-size slide

  39. Contrainer
    queries bookshop
    — Max Böck

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

  43. Adapting to User's Situation

    View full-size slide

  44. User’s Interactions

    View full-size slide

  45. Providing
    different
    interaction states
    for components

    View full-size slide

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

    View full-size slide

  47. What about
    keyboard
    users?
    Interactive States

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. User’s Preferences

    View full-size slide

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

    View full-size slide

  52. Dark vs Light
    mode
    CSS prefers-color-scheme

    View full-size slide

  53. Higher
    contrast mode
    if needs need it
    CSS prefers-contrast

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  58. User’s Environment & Journey

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

  64. User’s Journey

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  69. Going beyond happy path and
    assumptions

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. Is it going to
    stress / irritate
    some users?

    View full-size slide

  78. How might
    this get
    abused?

    View full-size slide

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

    View full-size slide

  80. database.platformabuse.org

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide