Designing beyond the pixel-perfect idealistic case

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