Designing Adaptive Components, beyond responsive breakpoints

How can we design components that are re-usable and not only adapt to different viewport size (responsive web design) but also to different context of use in the browser? What about designing for scale, beyond the “default" state & content? About adapting components towards user's context or point in a journey?

Transcript

1. Stéphanie Walter 2022 Designing reusable adaptive components for design systems
2. stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer 
 Mobile expert. Pixel & CSS Lover
3. Designing reusable components
4. It all starts with a strong information architecture
5. Overview List of Overviews Overview Overview Overview Overview Details
6. Example on existing content: the “Link Item” component
7. My Bookmarks 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 12345-01 Counterpart name Something SA DOCUMENT NAME List of Overviews Overview Overview Overview Overview
8. 1. Start with the content model
9. Current content analysis Content Audit - Inventory on current interface + Database sometimes
10. Content model: what will this type of content consist of?
11. Revisit the model based on research ๏ Does it still fit business needs? ๏ Does it still fit user needs
12. 2. Rank and prioritize elements
13. The whole “detail” model Priority for the “Entity List Item” Component “Entity List Item” 1967 - 7024 OPERATION NAME HERE (AROUND 52 CHAR)
14. How to decide? 
 Do your homework: 
 User Research!
15. 3. Identify variations and similar components
16. 1967 - 7024 OPERATION NAME HERE (AROUND 52 CHAR) 12345 CONTRACT NAME HERE (AROUND 72 CHAR) 12345-01 COUNTERPART NAME SOMETHING SA 24.10.2019 Date: DOCUMENT NAME
17. 4. Identify different context where this could be re-used
18. Advanced search 123 All Search a content by keyword View All Results (1000+) 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) 12345-01 COUNTERPART NAME SOMETHING SA 24.10.2019 Date: DOCUMENT NAME 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) My Bookmarks 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 12345 CONTRACT NAME HERE AROUND 72 CHAR 12345-01 COUNTERPART NAME SOMETHING SA 2 Hi Alexandre More My Portfolio My Planning My Dashboard Search a content by name, id, etc. All 1234- 4321 OPERATION NAME HERE 1967 - 7024 OPERATION NAME HERE THAT IS TOO LONG AND NEEDS 2 LINES 12345 CONTRACT NAME 12345-01 COUNTERPART NAME SA 12345-01 COUNTERPART NAME SA View All Results (1000+) Bookmarks link Quick Search (homepage) Quick Search (header)
19. 1967 - 7024 OPERATION NAME HERE (AROUND 52 CHAR) 12345 CONTRACT NAME HERE (AROUND 72 CHAR) 12345-01 COUNTERPART NAME SOMETHING SA 24.10.2019 Date: DOCUMENT NAME 24.10.2019 Date: DOCUMENT NAME 12345-01 COUNTERPART NAME SA 12345 CONTRACT NAME 1234- 4321 OPERATION NAME HERE Entity Link Default — Medium Entity Link Default — Small
20. Variations & similar components : 
 same player, play again !
21. Expand the content priority for more variations
22. Entity Link Default — Medium 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) Fully Signed Active Expected 29.04.2019 Signature: 12345 CONTRACT NAME HERE AROUND 72 CHAR Active 12345-01 COUNTERPART NAME GOES HERE Another Document Type KnC 01.10.2020 Date: DOCUMENT NAME GOES HERE Entity Link Search Results — Medium 1967 - 7024 OPERATION NAME HERE (AROUND 52 CHAR) 12345 CONTRACT NAME HERE (AROUND 72 CHAR) 12345-01 COUNTERPART NAME SOMETHING SA 24.10.2019 Date: DOCUMENT NAME
23. Content Model Low Fidelity Wireframe Component 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) Fully Signed Active Expected 29.04.2019 Signature: 12345 CONTRACT NAME HERE AROUND 72 CHAR Active 12345-01 COUNTERPART NAME GOES HERE Another Document Type KnC 01.10.2020 Date: DOCUMENT NAME GOES HERE
24. 5. Documentation and the design-dev collaboration
25. That component has some variations from the default one. Here’s the content model so far. For the measures please refere to the individual component specs. Entity Link Items — All the variations Variations Contracts 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 12345 CONTRACT NAME HERE AROUND 72 CHAR 1967 - 7024 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO IT NEEDS 2 LINES TO DISPLAY CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) WITH A LITTLE BIT 29.04.2019 BoD: 1967 - 7024 OPERATION NAME AROUND 52 CHAR MC PIN 29.04.2019 BoD: 1967 - 7024 OPERATION NAME AROUND 52 CHAR MC AFS Overdue 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) Fully Signed Active 1234- 4321 OPERATION NAME HERE 1967 - 7024 OPERATION NAME HERE THAT IS TOO LONG AND NEEDS 2 LINES 12345 CONTRACT NAME Small (<= 450px) CONTRACT NAME THAT IS WAY LONGER HERE AND NEEDS 2 LINES Entity Link — Next Deadlines Entity Link — Default Entity Link — Default Entity Link — Search Results Operations Fully Signed Active 1234- 4321 OPERATION NAME HERE Fully Signed Active 1234- 4321 OPERATION NAME HERE WITH MORE CONTENT ON 2 LINES 29.04.2019 BoD: 1967 - 7024 OPERATION NAME AROUND 52 CHAR MC PIN 29.04.2019 BoD: 1967 - 7024 OPERATION NAME AROUND 52 CHAR MC AFS Overdue Small (<= 450px) Entity link items are used to display a clickable list of interactive entities (operations, contracts, counterparts). Each entity type has its own specifications Those are used in different places in the interface including Dashboard Tiles, search auto-complete, and other places where a list of clickable entities is required Entity Link Items Anatomy Border rgba(204,204,204,1); #cccccc palette.divider Icon hover rgba(181,67,0,1); #B54300 palette.primary.dark Background hover rgba(252,246,242,1); #FCF6F2 palette.primary.contra stText Icon default rgba(115,115,115,1); #737373 palette.text.secondary 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 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) 12345-01 COUNTERPART NAME SOMETHING SA 24.10.2019 Date: DOCUMENT NAME 16px 16px 16px 16px 24px 8px 24px 24px 40px 4px 1234- 4321 24.10.2019 Typography Date: TITLES OF ENTITY color: #303030 100% font-size: 18px font-face: Roboto Medium color: #303030 100% font-size: 14px font-face: Roboto color: #303030 100% font-size: 14px font-face: Roboto color: #737373 100% font-size: 14px font-face: Roboto Entity link default — Medium (> 450px) Items hover Items hover Entity link default — Small (<= 450px) We have 4 items type: operation, contract, counterpart and documents. Each use the corresponding entity item. 1234- 4321 OPERATION NAME HERE 4px 12px 24px 1967 - 7024 OPERATION NAME HERE THAT IS TOO LONG AND NEEDS 2 LINES 12345 CONTRACT NAME 12345-01 COUNTERPART NAME SA 24.10.2019 Date: DOCUMENT NAME Typography 24.10.2019 1234- 4321 Date: TITLE GOES HERE color: #303030 100% font-size: 16px font-face: Roboto Medium color: #303030 100% font-size: 12px font-face: Roboto color: #303030 100% font-size: 12px font-face: Roboto color: #737373 100% font-size: 12px font-face: Roboto 8px 12px 12px 12px 12px 8px Border Icon hover Background hover Icon default We have 4 items type: operation, contract, counterpart and documents. Each use the corresponding entity item. Documenting the content model in deliverables helps dev teams understand variations
27. Example on a new project: The “cooking recipe thumbnail” component
28. Content model: what will this type of content consist of?
29. Content priority 
 (based on user research)
33. Auto-layout and Variants for responsive component in Figma
34. Adapt to different layout contraints as well
35. Container queries Media queries
36. Container Queries? Soooooon
37. Faking container queries with ResizeObserver Container Queries by Philp Walton
38. Flexbox, Grid Layout, clamp() and more to build responsive layouts without media queries
39. Codepen Demo by Geoffrey Crofte
40. We need to stop obsessing over pixel perfection and embrace the fluid intrinsic nature of the web: 
 
 Design in tools, 
 Decide in the browser!
41. Design/dev peer reviewing to fine tune the details
42. Designing for scale, beyond the “default" state & content
43. 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
44. What happens if there’s no content value (yet)? 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
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) 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?
46. 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?
47. Does my design still work with other languages? Stef Geoff
48. Scaling components based on 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. ๏ For translations: try to know upfront if you need other languages, which ones, and the ratio of those.
49. Language ratio after translation from English
50. What about loading, data population, errors and no data? 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
51. 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 How does the component scale?
52. I don’t need to “design” all of them, just “decide” what will happen and communicate this to / with the dev team.
53. Designing for component interactivity
54. Providing different interaction states for button components Action Verb Focus Action Verb Disabled Focus Action Verb Active Action Verb Default Action Verb Hover Action Verb Disabled
55. 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 There might be more…
56. 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 What about keyboard users?
57. Documenting interactions, steps and cases to bridge the gap with dev teams User Flow Screen flow
58. Show don’t tell: interactive prototypes
59. Adaptive Components towards User’s Context
60. 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 Adapting to user’s network condition and connection loses
61. Vehicle drop off details Close 100% 9 41 AM XXX Follow the steps to drop off your vehicle Get the rental car keys and drop your vehicle keys in a safe. Further instructions will be available. 5 Pickup rental & Drop keys Open gate Use the code to open the parking gate Show gate code Enter the parking space and park your vehicle in an available spot Vehicle is parked 2 Park vehicle You asked for a category 1 rental. Your car is ready for pick-up, we just need you to sign a few documents. 3 Sign documents Fill in rental car damage report. Further instructions will be available. 4 Rental damage report Vehicle drop off details Close 100% 9 41 AM XXX Follow the steps to drop off your vehicle Get the rental car keys and drop your vehicle keys in a safe. Further instructions will be available. 5 Pickup rental & Drop keys Open gate Gate was opened Vehicle was parked Park vehicle You asked for a category 1 rental. Your car is ready for pick-up, we just need you to sign a few documents. Sign the documents 3 Sign documents Fill in rental car damage report. Further instructions will be available. 4 Rental damage report Vehicle drop off details Close 100% 9 41 AM XXX Follow the steps to drop off your vehicle Get the rental car keys and drop your vehicle keys in a safe. Further instructions will be available. 5 Pickup rental & Drop keys Open gate Gate was opened Vehicle was parked Park vehicle ID card and Driving Licence uploaded and confirmed, rental car contract and general rental conditions signed. Sign documents Please go around the vehicle and fill in the rental car damage report. Start rental damage report Tesla Model 3 4 Rental damage report Vehicle drop off details Close 100% 9 41 AM XXX Follow the steps to drop off your vehicle Pickup rental & Drop keys Rental car picked up and keys were droped in the safe. Get safe information 5 Open gate Gate was opened Vehicle was parked Park vehicle Rental damage report was done and signed Rental damage report ID card and Driving Licence uploaded and confirmed, rental car contract and general rental conditions signed. Sign documents Vehicle drop off details Close 100% 9 41 AM XXX Follow the steps to drop off your vehicle Pickup rental & Drop keys Rental car picked up and keys were droped in the safe. Show gate code Open gate Gate was opened Vehicle was parked Park vehicle Rental damage report was done and signed Rental damage report ID card and Driving Licence uploaded and confirmed, rental car contract and general rental conditions signed. Sign documents I finished the drop off Adapting to different steps in a process
62. WAW Warsaw LUX Luxembourg Passenger Seat Terminal Gate Boarding Date Class Stéphanie Walter 13D - - 12:55 10:55 XZ- 9019 10:30 28/06/2020 Eco D - 2 H - 1 Adapting to user needs and expectations across the journey WAW Warsaw 12:55 LUX Luxembourg 10:55 XZ- 9019 Date: 28/06/2020 Passenger Seat Terminal Gate Boarding 13D D A12 10:30 Class Stéphanie Walter Eco XZ- 9019 WAW LUX 28/06/2020 Gate Terminal Boarding A12 A12 Seat 13D 10:30
63. This last part is more “experimental” and I would be careful with it and heavily test it because it might go against the “predictability of the interface”. So be careful.
64. Dark vs Light mode: prefers- color-scheme
65. Adapting to user environment, like ambiant light or geolocation
66. Allow users to manage adaptive features
67. AGAIN, you need to deeply understand your users needs and behaviour to build those kind of adaptive experiences: User Research!!!
68. Going beyond what happens in the app/site, understanding user behaviour and journeys Phases PHASE 1 PHASE 2 PHASE 3 Touchpoints & channels Emotions and pain points Actions / Tasks Opportunities for features and improvements User, goal, scope
69. Predict user behaviour and needs with machine learning, big data Epidemiology Demography
70. ๏ Do you User Research upfront ๏ Start with the content model, build a solid information architecture ๏ Identify variants and similar components ๏ Anticipate flexibility by providing different states, beyond the “perfect” content scenario ๏ Anticipate different interactions, different interaction devices ๏ Test the components, adapt, iterate ๏ It’s a big collaborative process with between design and development team
71. stephaniewalter.design @WalterStephanie 🦊 User Researcher & Product Designer 
 Mobile expert. Pixel & CSS Lover