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

Designing Adaptive Components, Beyond Responsiv...

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!

Stéphanie Walter

July 19, 2020
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie
  2. Fluid grids + Flexible images + Media Queries to adapt

    layout Ethan Marcotte – Responsive Webdesign 10 years!!!
  3. Don’t define your breakpoints on exact device widths that you

    are looking to target. Base them on your layout and content
  4. Filter toggle button Content Header Foote r “Filter Sidebar” Content

    Header Header Footer From 1 to 2 columns @media (min-width: 980px)
  5. 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)
  6. 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
  7. “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
  8. 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
  9. 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.
  10. (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
  11. 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
  12. 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)
  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) 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
  14. “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)
  15. 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
  16. ๏ 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
  17. 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
  18. 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.
  19. 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
  20. 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
  21. 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
  22. 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
  23. “Operation Link Item”content model Stéphanie Walter - 2019 1234- 4321

    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. As a designer, my job is to show my developers

    this “ideal” conditions. Then we discuss how it will adapt in the browser.
  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) 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
  31. We need to stop obsessing over pixel perfection and embrace

    the fluid intrinsic nature of the web: Design in tools, Decide in the browser!
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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.
  38. 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 Don’t forget interactive states
  39. 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 protected]) 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?
  40. 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?
  41. I don’t need to “design” all of them, just “decide”

    what will happen and communicate this to / with the dev team.
  42. 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.
  43. 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)
  44. 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
  45. 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
  46. 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.
  47. AGAIN, you need to deeply understand your users needs and

    behaviour to build those kind of adaptive experiences: User Research!!!
  48. 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
  49. ๏ 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!
  50. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie