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
   

   View Slide

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

   View 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 Slide

4. Going beyond the “default”
   perfect state
   

   View Slide

5. Perfect Page
   User Clicks
   Perfect idealistic case
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

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

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

    View Slide

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

    View Slide

15. Make it
    actionable
    and useful to
    users
    Error state
    

    View Slide

16. Empty states
    can be
    interesting
    design
    opportunities
    Empty state
    

    View Slide

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

    View 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 (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?
    

    View Slide

19. Adapting to Content Density
    

    View 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 Slide

21. Ideal amount,
    yeah!
    Content Amount
    

    View Slide

22. Not enough
    content?
    Content Amount
    

    View Slide

23. Too much
    content…
    Content Amount
    

    View 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 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 Slide

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

    View Slide

27. Ahmad Shadeed : CSS :has Parent Selector
    

    View Slide

28. Adapting
    layout to
    content
    CSS flexbox
    

    View Slide

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

    View Slide

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

    View 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 Slide

32. Adaptive Layouts
    

    View Slide

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

    View Slide

34. Responsive
    Web Design
    M
    S L L
    

    View Slide

35. Used as teasers
    on season
    thematic
    recipes pages
    

    View Slide

36. Re-use of the
    component in
    different
    containers
    

    View Slide

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

    View Slide

38. Container
    queries
    Media
    queries
    

    View Slide

39. Contrainer
    queries bookshop
    — Max Böck
    

    View Slide

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

    View Slide

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

    View 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 Slide

43. Adapting to User's Situation
    

    View Slide

44. User’s Interactions
    

    View Slide

45. Providing
    different
    interaction states
    for components
    

    View Slide

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

    View Slide

47. What about
    keyboard
    users?
    Interactive States
    

    View Slide

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

    View Slide

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

    View Slide

50. User’s Preferences
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

58. User’s Environment & Journey
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

64. User’s Journey
    

    View 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 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 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 Slide

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

    View Slide

69. Going beyond happy path and
    assumptions
    

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. How might
    this get
    abused?
    

    View Slide

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

    View Slide

80. database.platformabuse.org
    

    View Slide

81. View Slide

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

    View Slide

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

    View Slide

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

    View Slide