Designing Adaptive Components, Beyond Responsive Breakpoints

I'm often asked "320px? 768px? 1024px? What breakpoints do you recommend for responsive design". Trust me, if there was a magic number, we would all use it by now! But designers still work around the concept of "screen (or browser) size". How about we start thinking about "context of use" instead, to build more flexible components?
I will show you how I design systems of components that go beyond screen size and can also be used in different layout and container contexts. I try to make sure that my components work beyond the perfect “content situation”: what happens with super long text, missing images/content for example? And how about adapting components to user needs across specific points in their journey?
I will address, among other things, the concepts of content model, content priority, information architecture and user journeys to help you design adaptive components. Your developers will thank you!

Transcript

1. Stéphanie Walter 2020 Designing Adaptive Components Beyond Responsive Breakpoints:
2. UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie
3. Beyond arbitrary mobile screen sizes
4. Fluid grids + Flexible images + Media Queries to adapt layout Ethan Marcotte – Responsive Webdesign 10 years!!!
5. “320px? 768px ? 1024px? What breakpoints do you recommend?
6. Don’t define your breakpoints on exact device widths that you are looking to target. Base them on your layout and content
7. Primary Breakpoints Secondary Breakpoints
8. Filter toggle button Content Header Foote r “Filter Sidebar” Content Header Header Footer From 1 to 2 columns @media (min-width: 980px)
9. The primary breakpoints ๏ Your grid and content choreography will define Primary CSS media queries breakpoints ๏ They trigger major changes in your layout (like the content changing from 1 to 2 column)
10. Most designers provide a “mobile” and a “desktop” version of the page / component 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 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
11. “Filter Sidebar” Header Header Footer 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 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 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 @media (min-width: 980px) Header Footer Filter toggle button 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
12. All good, right ?
13. Header Filter toggle button Footer 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 What about those “in-betweens”? 979px “viewport” Header Footer Filter toggle button 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
14. Secondary breakpoints ๏ Secondary breakpoints are used to adapt the design at component level. ๏ It’s easier to decide those in the browser when the content “breaks” in the component.
15. (12 votes) 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 Save 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) 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) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH Adapting the component to 3 different “viewport” sizes M L S
16. Header Footer Filter toggle button 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 S
17. Header Filter toggle button Footer (12 votes) 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 Save GLUTEN FREE MAIN DISH (12 votes) 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 Save GLUTEN FREE MAIN DISH (12 votes) 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 Save GLUTEN FREE MAIN DISH Header Footer Filter toggle button 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 S M @media (min-width: 650px)
18. Header Filter toggle button Footer 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 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 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 Header Filter toggle button Footer (12 votes) 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 Save GLUTEN FREE MAIN DISH (12 votes) 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 Save GLUTEN FREE MAIN DISH (12 votes) 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 Save GLUTEN FREE MAIN DISH @media (min-width: 650px) Header Footer Filter toggle button 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 @media (min-width: 820px) M S L
19. “Filter Sidebar” Header Header Footer 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 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 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 Both primary and secondary breakpoints @media (min-width: 980px) @media (min-width: 820px)
20. Content model and content priority
21. Recipe teaser content model Stéphanie Walter - 2019 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
22. ๏ Does this content belong to my hand bag under my seat? ๏ Does it belong to the cabine luggage? ๏ Does it go in the checked luggage, directly to the hold? Setting Content Priorities Image from undraw.co
23. How to decide? Do your homework: User Research!
24. 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 * based on user research!!! Under my seat!* To the hold!* 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
25. Think wisely before not showing some content for specific sizes, do your research!
26. How about we use those for different layouts as well?
27. Towards Automagic* Ideal Condition Layouts * Not a typo
28. The concept of “modular” Instead of designing whole pages in 1 - 2 different sizes, today we design systems of reusable modular components working together in Design Systems.
29. Could we re-use this elsewhere? 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 S
30. 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 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 Used as teasers on season thematic recipes pages
31. 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 Used in a sidebar on a blog post
32. 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 Used as “Related recipes” slider item on a recipe details page
33. Smart e-commerce filters component
34. How do we build those robust reusable components?
35. Content model 1.
36. “Operation Link Item”content model Stéphanie Walter - 2019 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
37. Are they variations or other contents that could use the same component? 2.
38. One component, 3 content variations Stéphanie Walter - 2019 1967 - 7024 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) 08937-04 COUNTERPART NAME SOMETHING SA
39. Identify where those components can be re-used 3.
40. Re-using them across the interface Stéphanie Walter - 2019 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 12345-01 COUNTERPART NAME SOMETHING SA 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 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
41. Re-using them across the interface Stéphanie Walter - 2019 2 Hi Alexandre More My Portfolio My Planning My Dashboard 1234 Operation Serapis 1234- 4321 OPERATION NAME HERE 12345 CONTRACT NAME 12345-01 COUNTERPART NAME SA 12345-01 COUNTERPART NAME SA 1234- 4321 OPERATION NAME HERE THAT IS TOO LONG AND NEEDS 2 LINES View All Results (1000+) 360px container
42. 1 component, 3 variations, 2 sizes, different uses Stéphanie Walter - 2019 1967 - 7024 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) 08937-04 COUNTERPART NAME SOMETHING SA 1234- 4321 OPERATION NAME HERE 12345 CONTRACT NAME 12345-01 COUNTERPART NAME SA
43. Document it, somewhere, somehow
44. From “ideal condition” in design tools to the browser
45. Intrinsic Web Design in “Everything You Know About Web Design Just Changed” by Jen Simmons
46. Intrinsic Web Design Instead of changing styles based on the size of a viewport (or how big the screen of the device is), components automatically lay themselves out based on their own ‘ideal’ conditions.” Definition by Jay Frestone
47. As a designer, my job is to show my developers this “ideal” conditions. Then we discuss how it will adapt in the browser.
48. Look Ma, no media queries! Demo by Adam Argyle
49. Flexbox: 4 layouts for the price of 1 1 2 3 4
50. Codepen Demo by Geoffrey Crofte
51. Flexbox, Grid Layout and more to build responsive layouts without media queries
52. 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 (12 votes) 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 Save 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) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH (12 votes) 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 Save GLUTEN FREE MAIN DISH Save 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 GLUTEN FREE MAIN DISH
53. Container queries? Not yet…
54. Faking container queries with ResizeObserver Container Queries by Philp Walton
55. We need to stop obsessing over pixel perfection and embrace the fluid intrinsic nature of the web: Design in tools, Decide in the browser!
56. Beyond “Happy Paths and Perfect Content”
57. The “happy perfect content” Here you go, Okay thanks BYEEEEEEEE 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
58. What happens if the title needs 2 lines? 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
59. How does it behave in a gallery with different content length? 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
60. What happens if some content is missing? 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
61. What happens if we don’t have 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 3 hours Cooking tim 25 min Serving: 4-6 person 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 Preparatio 3 hours Cooking ti 25 min Serving: 4-6 perso 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 t 3 hours Cooking time 25 min Serving: 4-6 persons
62. Content tips ๏ Don’t use Lorem ipsum. 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.
63. 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 Don’t forget interactive states
64. My division Label Card title There is a technical problem with the content of this tile. If the problem persists, please contact technical support team by email (email@email.org) or phone ( 0000000000) Card title There are no [Elements Title] to display. My division Label Card title Loading No Data to Load Data Population Problem / Error 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 Data Population Data Successfully Loaded What about data population?
65. 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?
66. I don’t need to “design” all of them, just “decide” what will happen and communicate this to / with the dev team.
67. Thinking beyond the “happy path” ๏ Know where the data/content comes from (ask devs). ๏ Investigate the amount of data that might get displayed. ๏ Investigate what might go wrong with this data.
68. Mapping the steps to think beyond the “happy path” 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 12345-01 COUNTERPART NAME SOMETHING SA 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
69. Adaptive Systems towards User’s Context
70. 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
71. Using device sensors to adapt to user environment
72. 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 J - 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
73. 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.
74. Allow users to manage adaptive features
75. AGAIN, you need to deeply understand your users needs and behaviour to build those kind of adaptive experiences: User Research!!!
76. Understand 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 https://inpx.it/ujmap
77. Predict user behaviour and needs with machine learning, big data Epidemiology Demography
78. To sum it up…
79. ๏ Think beyond screen size ๏ Build re-usable components that can lay themselves out based on their own “ideal” conditions ๏ Design beyond happy path/content ๏ Conduct user research and use content model and information architecture to take design decisions ๏ It’s a collaborative process with your development team!
80. UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie