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

Designing beyond the pixel-perfect idealistic case

Stéphanie Walter
September 06, 2023

Designing beyond the pixel-perfect idealistic case

I face a challenge as a designer: how do I help bridge the gaps between that idealistic pixel perfect image of a site and the real deal? Between design and dev teams? How to design flexible and modular systems that work with real content, real diverse users with different needs, beyond pixel perfect mockups

Replay here: https://www.youtube.com/watch?v=WOByIUL-_7I

Stéphanie Walter

September 06, 2023
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Designing Beyond
    The Happy Path
    Stéphanie Walter - 2023

    View Slide

  2. stephaniewalter.design @WalterStephanie
    🦊
    User Researcher & Product Designer



    Mobile expert. Pixel & CSS Lover

    View Slide

  3. Going beyond the “default”
    perfect state

    View Slide

  4. Perfect Page
    User Clicks
    Perfect idealistic case

    View Slide

  5. Reality
    Has
    loaded?
    Y
    N
    Has
    content?
    Error State
    Y
    N Empty State
    How much
    content?
    Too little
    Ideal Situation
    Too much
    Loading State
    User Clicks
    User Interacts
    with the
    Content?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Reality
    Has
    loaded?
    Y
    N
    Has
    content?
    Error State
    Y
    N Empty State
    How much
    content?
    Too little
    Ideal Situation
    Too much
    Loading State
    User Clicks
    User Interacts
    with the
    Content?

    View Slide

  10. 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

  11. 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 Slide

  12. 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 Slide

  13. Reality
    Has
    loaded?
    Y
    N
    Has
    content?
    Error State
    Y
    N Empty State
    How much
    content?
    Too little
    Ideal Situation
    Too much
    Loading State
    User Clicks
    User Interacts
    with the
    Content?

    View Slide

  14. Make it
    actionable
    and useful to
    users
    Error state

    View Slide

  15. Empty states
    can be
    interesting
    design
    opportunities
    Empty state

    View Slide

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

    View Slide

  17. 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 Slide

  18. Reality
    Has
    loaded?
    Y
    N
    Has
    content?
    Error State
    Y
    N Empty State
    How much
    content?
    Too little
    Ideal Situation
    Too much
    Loading State
    User Clicks
    User Interacts
    with the
    Content?

    View Slide

  19. Ideal amount,
    yeah!
    Content Amount

    View Slide

  20. Not enough
    content?
    Content Amount

    View Slide

  21. Too much
    content…
    Content Amount

    View Slide

  22. Reality
    Has
    loaded?
    Y
    N
    Has
    content?
    Error State
    Y
    N Empty State
    How much
    content?
    Too little
    Ideal Situation
    Too much
    Loading State
    User Clicks
    User Interacts
    with the
    Content?

    View Slide

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

    View Slide

  24. What about
    keyboard
    users?
    Interactive States

    View Slide

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

    View Slide

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

    View Slide

  27. Preparing for scalable &
    conditional content

    View Slide

  28. Adapting to content
    length: what happens
    if the title needs

    2 lines or more?

    View Slide

  29. How does it
    behave in a
    gallery with
    different
    content length?

    View Slide

  30. 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

  31. Does my design
    still work with
    other
    languages?
    Stef

    View Slide

  32. 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.


    ๏ For translations: try to know upfront if you
    need other languages, which ones, and the
    ratio of those.


    ๏ Always prepare for, mooooooore
    How To?

    View Slide

  33. Conditional
    Content: what
    happens if there
    is no image?

    View Slide

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

    View Slide

  35. 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

  36. Design/dev peer
    reviewing to fine tune
    the details
    How To?

    View Slide

  37. Flexible & adapting layout
    components

    View Slide

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

    View Slide

  39. Responsive
    Web Design
    M
    S L L

    View Slide

  40. Used as teasers
    on season
    thematic
    recipes pages

    View Slide

  41. Re-use of the
    component in
    different
    containers

    View Slide

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

    View Slide

  43. Container
    queries
    Media
    queries

    View Slide

  44. Contrainer
    queries bookshop
    — Max Böck

    View Slide

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

    View Slide

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

    View Slide

  47. 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

  48. Designing and adapting to
    user's situation

    View Slide

  49. User’s Preferences &
    Environment

    View Slide

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

    View Slide

  51. Dark vs Light
    mode: prefers-
    color-scheme

    View Slide

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

    View Slide

  53. Allow users to
    manage
    preferences
    and adaptive
    features

    View Slide

  54. Higher contrast:
    prefers-contrast

    View Slide

  55. forced-colors:
    detect if the
    user is in the
    limited color
    palette mode

    View Slide

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

    View Slide

  57. More modes
    ๏ inverted-colors: test if the operating
    system has inverted all colors


    ๏ prefers-reduced-data (no
    experimental): detect if the user has
    requested the web content that
    consumes less internet traffic.


    ๏ prefers-reduced-transparency (no
    support): checks if users request the
    system to have less transparent effects

    View Slide

  58. Design with
    offline support
    (and local
    cache) in mind

    View Slide

  59. Design for
    “periodically
    synchronized
    data in the
    background”

    View Slide

  60. You need to understand content on
    how people will use your products,
    beyond the interface: User
    Research!!!


    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

  61. Designing for
    different
    “network
    conditions”

    View Slide

  62. User’s Journey

    View Slide

  63. 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

  64. 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

  65. 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

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

    View Slide

  67. Going beyond happy path and
    assumptions

    View Slide

  68. Why do we ask
    for this?
    Is this the
    right way to
    ask for this?
    Gender *
    Male Female

    View Slide

  69. Is my default
    the “right”
    assumption for
    everyone?
    Your timeline
    Congratulation you lost
    2kg in the last month!
    !

    View Slide

  70. Putting
    validation
    gates on top of
    wrong
    assumptions…
    Via dcousineau

    View Slide

  71. Bad design, bad
    copy here:


    my name is correct,
    your system is the
    issue here.

    View Slide

  72. Challenge your assumptions.

    This means: build more
    diverse teams!

    View Slide

  73. How might
    this get
    abused?

    View Slide

  74. database.platformabuse.org

    View Slide

  75. Act instead of
    react: the bad
    actors
    workshop

    View Slide

  76. View Slide

  77. You need to deeply
    understand your users needs
    and behaviour.


    ALL of them (not just the ones
    looking and acting like you…)

    View Slide

  78. In the end, it all comes
    down to the balance of

    building the right thing vs.
    building the thing right


    (Laura Klein)

    View Slide

  79. And I think we can have both:
    building, designing the right
    thing, the right flexible way,
    together.

    View Slide

  80. stephaniewalter.design @WalterStephanie
    🦊
    User Researcher & Product Designer



    Mobile expert. Pixel & CSS Lover

    View Slide