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

Design & Performance: the forgotten cases

Stéphanie Walter
January 28, 2021

Design & Performance: the forgotten cases

What happens during those few milliseconds (or seconds) of loading between the white browser and the “perfectly loaded” page? What happens if a data is missing, if a server takes time to respond, responds to an error, a missing resource, etc.? Designing these "forgotten cases" greatly improves designer/developer collaboration on performance topics. Avoiding errors, empty screens or components with layout shifts also greatly improves user experience. Let’s talk about how to design for performance, perceived performance, for those forgotten cases and beyond, like for offline, background sync, etc.

Stéphanie Walter

January 28, 2021
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Top Menu Top Menu Top Menu Top Menu
    Design & Performance: the forgotten cases
    Stéphanie Walter - 2021

    View Slide

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



    Mobile expert. Pixel & CSS Lover

    View Slide

  3. https://www.mysuperwebsite.com

    View Slide

  4. … … Loading the content … …

    View Slide

  5. Content
    priority: do your
    user research!
    https://www.mysuperwebsite.com
    1
    2
    4
    3
    5

    View Slide

  6. Identify with dev teams
    how it works and what
    may take time.
    1.

    View Slide

  7. Decide and design your
    loading strategy.
    2.

    View Slide

  8. Building a
    loading flow

    View Slide

  9. 1. Display the
    shell &“static”
    assets (logo).
    1. Display the shell &“static” assets
    (navigation)


    2. Display title & text that is fast to load


    3. Load tiles, as soon as we have the first
    one, show it and switch the other ones
    to “loading state”
    Logo

    View Slide

  10. 2. Display
    “static” content
    (navigation).
    1. Display the shell &“static” assets
    (navigation)


    2. Display title & text that is fast to load


    3. Load tiles, as soon as we have the first
    one, show it and switch the other ones
    to “loading state”
    Navigation item 01
    Top Menu Top Menu Top Menu Top Menu
    Navigation item 02
    Navigation item 03
    Navigation item 04
    Logo Search

    View Slide

  11. 3. Display
    page and
    section titles.
    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

    View Slide

  12. 4. Display the
    tiles according
    to our technical
    constrains.
    Navigation item 01
    Top Menu Top Menu Top Menu Top Menu
    Navigation item 02
    Navigation item 03
    Navigation item 04
    Page title
    Section Title
    Tile title
    Tile title
    Tile title
    Tile title
    Tile title
    Logo Search
    Content goes here :) Content goes here :)
    Content goes here :)

    View Slide

  13. 5. Display the
    rest of the tiles
    when the
    content arrives.
    Navigation item 01
    Top Menu Top Menu Top Menu Top Menu
    Navigation item 02
    Navigation item 03
    Navigation item 04
    Page title
    Section Title
    Tile title
    Tile title
    Tile title
    Tile title
    Tile title
    Logo Search
    Content goes here :)
    Content goes here :)
    Content goes here :)
    Content goes here :)
    Content goes here :)

    View Slide

  14. You have metrics? Good,
    document them.
    2. Bis

    View Slide

  15. Loading Flow — list
    The whole screen with all the content should be loaded within 3 seconds maximum.
    For screens with lists, the first 10 items of the list should to be loaded almost immediatly (2sec). Then other items can be lazy loaded on scroll.
    Following Apple’s guidelines, we start by
    showing anything that is not dynamic:
    header bar, tabar, etc. in order to not have
    a blank screen.
    Tasks Manager
    9 41
    Settings
    History
    Tasks Once the backend sent the information
    about how many tasks we have, we
    display the notification with the number.
    We also try to display quickly the static
    content like the heading title “owned by
    me”
    We display the first item as soon as they arrive on the screen.
    The items are displayed with a fade in animation from opacity 0 to opacity 1.
    Ideally we should display the items that will be at the top of the screen first to avoid having
    some content jump when the next items arrive.
    When user scrolls over the 10 items
    displayed, we lazy load the next items
    with the same philosophy: items are
    displayed with a fade in animation when
    they arrive on the screen
    The final loaded view: we load the 10 first
    items in the list.
    0 sec
    1 sec
    3 sec
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    5
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    (3)
    Owned by me
    Pick Up
    No owner
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    5
    Owned by me
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    5
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    (3)
    Owned by me
    Pick Up
    No owner
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Firstname Lastname
    Owned by
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Firstname Lastname
    Owned by
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    (2)
    Delegated to me
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    5
    Firstname Lastname
    Assigned to
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    (2)
    Delegated to me
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    Pick Up
    No owner
    30.04.2020 17:44
    Activated on
    Workflow type here
    LOREM IPSUM SUBJECT OF THE TASK GOES
    HERE (90618) - OPERATION 2019-1190
    (3)
    Owned by me
    Tasks Manager
    9 41
    Settings
    History
    Tasks
    5
    Loading flow
    with metrics

    View Slide

  16. Placeholders to
    avoid CLS if the
    image takes time
    to load…
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person

    View Slide

  17. Banner Placeholder
    Banner Placeholder
    Reserve space
    for dynamically
    loaded content

    View Slide

  18. Test it (real browsers, real
    apps, different network
    conditions) and fine tune it.
    3.

    View Slide

  19. Something went wrong while
    loading

    View Slide

  20. https://www.mysuperwebsite.com
    Bad Request
    Error 404
    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

    View Slide

  21. Identify the error cases
    ๏ What might happen


    ๏ Why does it happen?


    ๏ Is it going to impact the users?


    ๏ Can users do something about this?

    View Slide

  22. 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)
    Example of error
    at whole page
    loading level

    View Slide

  23. 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 :)
    Example of error
    at component
    loading level

    View Slide

  24. Error messages best practices
    ๏ Tell users how to recover from the error (if
    possible, not always the case)


    ๏ Be consistent in language used (UX
    writing)


    ๏ Don’t blame users. EVER. It’s not their fault,
    it’s the system’s fault. (Voice and Tone)

    View Slide

  25. Updating the
    loading flow,
    with errors

    View Slide

  26. Document the
    “error” states in
    the style guide
    Loading
    My division
    Label
    Card title My division
    Label
    2019
    Label
    2019
    Label
    Data Population
    Technical 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

    View Slide

  27. Wait, there’s no content to
    load!?

    View Slide

  28. Empty states can
    be interesting
    design
    opportunities
    Settings
    History
    Tasks
    3
    Tasks Manager
    9 41
    It looks like you don’t have any
    tasks to validate at the moment.
    All caught up!

    View Slide

  29. Launch a search with different criteria and click the “Save to My Dashboard” button to see your saved search here.
    There are no saved searches yet.
    Search a content by keyword
    All
    Search a content by name, id, etc.
    My Dashboard My Saved Searches
    1
    First use empty
    states can be
    used for
    onboarding

    View Slide

  30. Updating the
    loading flow with
    empty states

    View Slide

  31. What happens if
    there is no
    image?
    It really is possible to make excellent gluten free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    My Grand’ Ma’s Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person

    View Slide

  32. What happens
    if there’s no
    value for some
    contents?
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (0 votes)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (No Rating available)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons

    View Slide

  33. I don’t need to “design” all of
    them, just “decide” what will
    happen and communicate
    this to / with the dev team.

    View Slide

  34. A checklist helps
    “not forget” about
    different states
    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

    View Slide

  35. What if content, but, mooar?

    View Slide

  36. How you are going to load and
    paginate content lists might
    impact design decisions (and
    vice versa)

    View Slide

  37. Filter by color
    Red
    Blue
    Purple
    Yellow
    Filter by size
    S
    M
    L
    XL
    XXL
    XXX Results
    Instant facet
    filters

    View Slide

  38. Filter by color
    Red (10)
    Blue (2)
    Purple (5)
    Yellow (0)
    Filter by size
    S (5)
    M (0)
    L (10)
    XL (20)
    XXL (3)
    XXX Results
    Instant facet filters
    with prediction

    View Slide

  39. XXX Results
    By Color (1)
    Apply
    Red (10)
    Blue (2)
    Purple (5)
    By Size (0) By Brand (0) All filters
    Filter:
    Apply button
    on each section

    View Slide

  40. XXX Results
    Filter by color
    Apply
    Red (10)
    Blue (2)
    Purple (5)
    Filter by size
    S (5)
    L (10)
    XL (20)
    XXL (3)
    Filter by brand
    AAAAAbrand (5)
    BBBBbrand (10)
    AnotherBrand (20)
    This is a Brand (3)
    Filter by XXX
    Another filter here (5)
    Another filter here (5)
    Another filter here (3)
    One apply button
    for all filters

    View Slide

  41. Which is better? It depends
    on user needs and how you
    can implement this :)

    View Slide

  42. 1 2 3
    Footer
    Load More
    Footer
    Load it all Pagination Infinite Scroll Load More

    View Slide

  43. Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    Card title
    1-5 of 15
    5
    Row per tile
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    COUNTERPART NAME SOMETHING SA
    What happens
    for 5 items + ?
    Pagination?
    Scroll?

    View Slide

  44. It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    What happens
    if the title needs

    2 lines or more?

    View Slide

  45. It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    How does it behave
    in a gallery with
    different content
    length?

    View Slide

  46. Component content tips
    ๏ If you use “fake content”, make sure the
    structure is close to the real one.


    ๏ If you are a designer: ask the devs for the limits
    of those fields in the database, ask for min, max
    and average content length.


    ๏ If you are a developer: if something is missing,
    ask the designer how it should behave.

    View Slide

  47. Designing a seamless experience
    perceived as performant

    View Slide

  48. Via Google Chrome Developers

    View Slide

  49. Users don’t measure your
    page speed or your CLS
    score, they “perceive” the
    performance.

    View Slide

  50. Interactivity:
    UI feedback
    and micro
    interactions

    View Slide

  51. FID & Interactivity:
    designing the
    “interactive” states

    View Slide

  52. Email adress
    stephaniemydomain.com
    Email adress
    Your email is missing a @
    |
    Email adress
    [email protected]
    Email adress
    Email adress
    [email protected]
    Email adress
    [email protected]
    Email adress
    Email verified
    [email protected]
    Email adress
    This email is already used
    [email protected]
    Email adress
    Verification...
    [email protected]
    Email adress
    Empty
    Default Default
    Error
    Hover Hover
    Warning
    Focus/Active Focus/Active
    Success
    Information
    Filled Validation
    [email protected]
    Email adress
    Placeholder
    Email adress
    Placeholder Disabled Not just
    buttons, any
    “interactive”
    element

    View Slide

  53. All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    All
    All
    Item 01
    Item 01
    All
    By default the current
    item is highlighted
    : the next element is highlighted.
    : the previous element is
    highlighted.
    If the user hits , this element
    becomes the active one and the dropdown
    closes
    When user hovers another element, we
    apply the default “dropdown hover” style.
    If the user clicks on an element, this
    element becomes the active one and the
    dropdown closes.
    User open the dropdown menu when:
    - they click on it
    - they put the keyboard focus on it
    and hit /
    Interaction flow
    Interactions are
    not limited ta
    mouse: what about
    keyboard users?

    View Slide

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

    View Slide

  55. Offline access anywhere,
    anytime thanks to
    Service Workers +

    Cache API.

    View Slide

  56. You are offline. Your email(s) will be sent
    once you are online again
    1 unsent messsage in mailbox Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    “Ideal” state
    “Synchronization fail” state
    “Synchronizing” state
    “Synchronization success” state
    Design for
    “periodically
    synchronized
    data in the
    background”

    View Slide

  57. Designing for
    different
    “network
    conditions”

    View Slide

  58. Don’t waste users’
    time and resources!

    View Slide

  59. User Research,
    Mental Models,
    User Flow

    View Slide

  60. Monitor usage to avoid
    cognitive load due to
    feature creep!

    View Slide

  61. Designing for performance is about
    designing the whole experience for
    users. It goes way beyond the “ideal
    screen” condition and it’s a
    collaborative effort between
    designers, developers and the rest
    of the teams.

    View Slide

  62. https://stephaniewalter.design/blog/mind-over-matter-optimize-performance-without-code-csscamp-2019/

    View Slide