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

stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer 
 Mobile expert. Pixel & CSS Lover

https://www.mysuperwebsite.com

… … Loading the content … …

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

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

Decide and design your loading strategy. 2.

Building a loading flow

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

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

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

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 :)

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 :)

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

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

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

Banner Placeholder Banner Placeholder Reserve space for dynamically loaded content

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

Something went wrong while loading

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

Identify the error cases ๏ What might happen ๏ Why does it happen? ๏ Is it going to impact the users? ๏ Can users do something about this?

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

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

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)

Updating the loading flow, with errors

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

Wait, there’s no content to load!?

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!

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

Updating the loading flow with empty states

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

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

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

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

What if content, but, mooar?

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

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

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

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

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

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

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

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?

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?

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?

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.

Designing a seamless experience perceived as performant

Via Google Chrome Developers

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

Interactivity: UI feedback and micro interactions

FID & Interactivity: designing the “interactive” states

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

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?

Design with offline support (and local cache) in mind

Offline access anywhere, anytime thanks to Service Workers + 
 Cache API.

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”

Designing for different “network conditions”

Don’t waste users’ time and resources!

User Research, Mental Models, User Flow

Monitor usage to avoid cognitive load due to feature creep!

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.

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