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

Design & Performance: the forgotten cases

F383c6a4dc55e331bbe2987b622cee6b?s=47 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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

January 28, 2021
Tweet

Transcript

  1. Top Menu Top Menu Top Menu Top Menu Design &

    Performance: the forgotten cases Stéphanie Walter - 2021
  2. stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer Mobile expert.

    Pixel & CSS Lover
  3. https://www.mysuperwebsite.com

  4. … … Loading the content … …

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

    3 5
  6. Identify with dev teams how it works and what may

    take time. 1.
  7. Decide and design your loading strategy. 2.

  8. Building a loading flow

  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
  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
  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
  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 :)
  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 :)
  14. You have metrics? Good, document them. 2. Bis

  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
  16. Test it (real browsers, real apps, different network conditions) and

    fine tune it. 3.
  17. Something went wrong while loading

  18. 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
  19. Identify the error cases ๏ What might happen ๏ Why

    does it happen? ๏ Is it going to impact the users? ๏ Can users do something about this?
  20. 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
  21. 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
  22. 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)
  23. Updating the loading flow, with errors

  24. 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
  25. Wait, there’s no content to load!

  26. 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!
  27. 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
  28. Updating the loading flow with empty states

  29. Content missing at component level: 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
  30. 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
  31. I don’t need to “design” all of them, just “decide”

    what will happen and communicate this to / with the dev team.
  32. A checklist helps “not forget” about different states Loading My

    division Label Card title My division Label 2019 Label 2019 Label Data Population No data information Card title My division Label 2019 Label 2019 Label There are no [Elements Title] to display. 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
  33. What if content, but, mooar?

  34. 1 2 3 Footer Load More Footer Load it all

    Pagination Infinite Scroll Load More
  35. 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?
  36. 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?
  37. 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?
  38. 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.
  39. Designing a seamless experience perceived as performant

  40. Via Google Chrome Developers

  41. Users don’t monitor your page speed or your LPC score,

    they “perceive” the performance.
  42. 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 FID & Interactivity: designing the “interactive” states
  43. 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
  44. Design with offline support (and local cache) in mind

  45. 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”
  46. Designing for different “network conditions”

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

  48. User Research, Mental Models, User Flow

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

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