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.

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 (xxx@xxx.org)
    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 (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 :)
    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 (serapis_help@eib.org) 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 (serapis_help@eib.org) 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
    stephanie@mydomain.com
    Email adress
    Email adress
    stephanie@mydomain.com
    Email adress
    stephanie@mydomain.com
    Email adress
    Email verified
    stephanie@mydomain.com
    Email adress
    This email is already used
    stephanie@mydomain.com
    Email adress
    Verification...
    stephanie@mydomain.com
    Email adress
    Empty
    Default Default
    Error
    Hover Hover
    Warning
    Focus/Active Focus/Active
    Success
    Information
    Filled Validation
    stephanie@mydomain.com
    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