Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
  2. 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
  3. 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
  4. 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
  5. 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 :)
  6. 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 :)
  7. 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
  8. 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
  9. 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
  10. Identify the error cases ๏ What might happen ๏ Why

    does it happen? ๏ Is it going to impact the users? ๏ Can users do something about this?
  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) Example of error at whole page loading level
  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 ([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
  13. 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)
  14. 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
  15. 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!
  16. 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
  17. 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
  18. 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
  19. I don’t need to “design” all of them, just “decide”

    what will happen and communicate this to / with the dev team.
  20. 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
  21. How you are going to load and paginate content lists

    might impact design decisions (and vice versa)
  22. Filter by color Red Blue Purple Yellow Filter by size

    S M L XL XXL XXX Results Instant facet filters
  23. 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
  24. 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
  25. 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
  26. 1 2 3 Footer Load More Footer Load it all

    Pagination Infinite Scroll Load More
  27. 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?
  28. 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?
  29. 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?
  30. 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.
  31. Users don’t measure your page speed or your CLS score,

    they “perceive” the performance.
  32. 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
  33. 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 <keydown>: the next element is highlighted. <keyup>: the previous element is highlighted. If the user hits <enter>, 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 <enter> / <space> Interaction flow Interactions are not limited ta mouse: what about keyboard users?
  34. 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”
  35. 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.