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

Designing Adaptive Components, Beyond Responsive Breakpoints

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. Stéphanie Walter 2020
    Designing Adaptive Components
    Beyond Responsive Breakpoints:

    View Slide

  2. UX & Product Designer
    Mobile expert. Pixel & CSS Lover
    stephaniewalter.design @WalterStephanie

    View Slide

  3. Beyond arbitrary mobile
    screen sizes

    View Slide

  4. Fluid grids + Flexible images + Media Queries to adapt layout
    Ethan Marcotte – Responsive Webdesign
    10 years!!!

    View Slide

  5. “320px? 768px ? 1024px?
    What breakpoints do you
    recommend?

    View Slide

  6. Don’t define your breakpoints on
    exact device widths that you are
    looking to target.
    Base them on your layout and content

    View Slide

  7. Primary
    Breakpoints
    Secondary
    Breakpoints

    View Slide

  8. Filter toggle button
    Content
    Header
    Foote
    r
    “Filter Sidebar” Content
    Header
    Header
    Footer
    From 1 to 2
    columns
    @media (min-width: 980px)

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  12. All good, right ?

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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)

    View Slide

  20. Content model
    and content priority

    View Slide

  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

    View Slide

  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

    View Slide

  23. How to decide?
    Do your homework:
    User Research!

    View Slide

  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

    View Slide

  25. Think wisely before not
    showing some content for
    specific sizes, do your
    research!

    View Slide

  26. How about we use those for
    different layouts as well?

    View Slide

  27. Towards Automagic* Ideal
    Condition Layouts
    * Not a typo

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  33. Smart
    e-commerce
    filters
    component

    View Slide

  34. How do we build those robust
    reusable components?

    View Slide

  35. Content model
    1.

    View Slide

  36. “Operation Link Item”content model
    Stéphanie Walter - 2019
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)

    View Slide

  37. Are they variations or
    other contents that could
    use the same component?
    2.

    View Slide

  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

    View Slide

  39. Identify where those
    components can be
    re-used
    3.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  43. Document it,
    somewhere,
    somehow

    View Slide

  44. From “ideal condition” in
    design tools to the browser

    View Slide

  45. Intrinsic Web Design in “Everything You Know About Web Design Just Changed” by Jen Simmons

    View Slide

  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

    View Slide

  47. As a designer, my job is to
    show my developers this
    “ideal” conditions.
    Then we discuss how it will adapt
    in the browser.

    View Slide


  48. Look Ma, no
    media
    queries!
    Demo by Adam Argyle

    View Slide

  49. Flexbox: 4 layouts for the price of 1
    1 2 3
    4

    View Slide

  50. Codepen Demo by Geoffrey Crofte

    View Slide

  51. Flexbox, Grid Layout and more to build responsive layouts without media queries

    View Slide

  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

    View Slide

  53. Container queries?
    Not yet…

    View Slide

  54. Faking
    container
    queries with
    ResizeObserver
    Container Queries by Philp Walton

    View Slide

  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!

    View Slide

  56. Beyond “Happy Paths and
    Perfect Content”

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

  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 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?

    View Slide

  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?

    View Slide

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

    View Slide

  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.

    View Slide

  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)

    View Slide

  69. Adaptive Systems towards
    User’s Context

    View Slide

  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

    View Slide

  71. Using device
    sensors to
    adapt to user
    environment

    View Slide

  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

    View Slide

  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.

    View Slide

  74. Allow users to
    manage adaptive
    features

    View Slide

  75. AGAIN, you need to deeply
    understand your users needs
    and behaviour to build those
    kind of adaptive experiences:
    User Research!!!

    View Slide

  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

    View Slide

  77. Predict user
    behaviour and
    needs with machine
    learning, big data
    Epidemiology
    Demography

    View Slide

  78. To sum it up…

    View Slide

  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!

    View Slide

  80. UX & Product Designer
    Mobile expert. Pixel & CSS Lover
    stephaniewalter.design @WalterStephanie

    View Slide