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

How to get away from bad UX: Micro-frontend Arc

How to get away from bad UX: Micro-frontend Arc

LINE Developers Thailand

September 12, 2022
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

Transcript

  1. How to get away from bad UX:
    Micro-frontend Arc

    View full-size slide

  2. What’s wrong with


    “Follow the Design” ?

    View full-size slide

  3. Micro-frontend
    OA Plus Platform

    View full-size slide

  4. Fragment
    Fragment
    Fragment
    Fragment
    Layout

    View full-size slide


  5. ⚪︎

    View full-size slide


  6. ⚪︎

    REDUNDANCY
    Components implemented separately in
    each fragment
    1

    View full-size slide


  7. ⚪︎

    REDUNDANCY
    1
    STYLE OUT OF SYNC
    We have no clue when changes
    happened in the design
    2

    View full-size slide

  8. * based on true story

    View full-size slide


  9. ⚪︎

    REDUNDANCY
    1
    STYLE OUT OF SYNC
    We have no clue when changes
    happened in the design
    2

    View full-size slide


  10. ⚪︎

    REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    Sometimes “Following the design” is
    just toooo hard
    3

    View full-size slide

  11. Why not “Follow the Design” ?
    Inconsistency

    View full-size slide

  12. Fantastic UI and Where to Find
    Them

    View full-size slide

  13. Design System

    View full-size slide

  14. นี่
    คื

    ปุ ่

    Fonts
    size, line height, weight, style, etc.
    CTA: Call to Action

    View full-size slide

  15. นี่คือ
    ปุ


    นี่
    คือ
    ปุ ่

    นี่
    คือปุ
    ่ ม

    View full-size slide

  16. นี่คือ
    ปุ


    หัว
    ข้

    โอเซลทามิเวีย
    ร์
    สกาย เทรลเ
    ล่

    ร์
    เอ็ก
    ซ์
    โปคอนโทรล ดีไซ
    น์
    แบรน
    ด์
    ไพรเมตดิกชันนารีวอ
    ร์
    รูมเช็ก
    ป๊
    อกแตงโมลีกคอรัปชันสเ
    ปิร์
    ม พันธกิจสตา
    ร์
    นรีแพท
    ย์
    โลโ
    ก้
    ซากุระ สเต็มเฉิ่มแพน
    ด้

    คอนเทนเนอ
    ร์
    ควีน ลาเ
    ต้
    ตุ ๋
    ยเฟอ
    ร์
    รี่บอก
    ซ์ ตู

    เซฟสแตนเลส ซันตาคลอสเวกเตอ
    ร์
    แบนเนอ
    ร์
    ลิมิต
    ยนตรกรรม อันเดอ
    ร์
    คอลเล็กชั่น แพทเทิ
    ร์
    นไบเบิลเพนกวิน เลกเชอ
    ร์
    มุมมองแฟรนไช
    ส์
    ซูเปอ
    ร์
    หลวงพี่ บอก
    ซ์
    ไฮดรอกไซ
    ด์
    เพอ
    ร์
    ออกไซ
    ด์
    มอบตัวคาแรคเตอ
    ร์
    * disclaimer: font sizing in this slide is not accurate
    โมเมนตัมฟลุคยูริกเทฟลอนจิตพิสัย โอเซลทามิเวีย
    ร์

    ฟิ
    ร์
    มไอ
    ซ์
    ออโร
    ร่

    ฟิ
    วชัน แซม
    บ้
    าทิปไน
    ท์
    เซมิครัวซอง
    ต์
    ไวอาก
    ร้
    าเอทานอลพฤหัส ท

    งา
    นบ็อก
    ซ์
    แครกเกอ
    ร์
    อินทิเกรต สเ
    ปิร์
    มทิป คลาสสิกแฟรี่
    ว้
    อย วันเว
    ย์
    เทฟลอนแคนูฮา
    ร์
    ดอะซีติก ไฟเบอ
    ร์
    ฟาส
    ต์
    ฟู ้
    ด ฟยอ
    ร์
    ด โปสเตอ
    ร์
    กุมภา
    พัน
    ธ์
    เมเ
    ปิ
    ลดาว
    น์
    แยมโรลเอ็ก
    ซ์
    โพเนนเชียล คอนโทรล ไททันท็อปบูต
    Fonts

    View full-size slide

  17. นี่คือ
    ปุ


    Typography
    Fonts

    View full-size slide

  18. นี่คือ
    ปุ


    Typography
    Color

    View full-size slide

  19. นี่คือ
    ปุ


    นี่คือ
    ปุ


    Color Palette
    Basic Color
    System Color
    Secondary
    Success
    Danger
    Primary

    View full-size slide

  20. นี่คือ
    ปุ

    ม นี่คือ
    ปุ

    ม นี่คือ
    ปุ


    นี่คือ
    ปุ


    Normal Hovered Active Disabled
    State (Accessibility)
    Using Multiple Colors
    นี่คือ
    ปุ

    ม นี่คือ
    ปุ


    นี่คือ
    ปุ

    ม นี่คือ
    ปุ


    Normal Hovered Active Disabled
    + filter opacity 30% + filter opacity 50%
    Using Filters
    * disclaimer: coloring in this slide is not accurate

    View full-size slide

  21. นี่คือ
    ปุ


    Color Palette
    Basic Color
    System Color
    Secondary
    Success
    Danger

    View full-size slide

  22. นี่คือ
    ปุ


    Typography
    Color Palette
    Spacing

    View full-size slide

  23. * disclaimer: sizing in this slide is not accurate
    8px 12px 16px 24px 32px 40px 64px
    Spacing
    4px

    View full-size slide

  24. นี่คือ
    ปุ ่

    Typography
    Color Palette
    Spacing
    Iconography Animation
    Vertical Order (z-order)
    Accessibility
    Sound

    View full-size slide

  25. UI Components
    Foundations
    Documentation | Rules | Connections Best Practices
    Product-Specific
    Components

    View full-size slide

  26. UI Components
    Foundations
    Documentation | Rules | Connections Best Practices
    Product-Specific
    Components
    Design System

    View full-size slide

  27. Design System in Actions

    View full-size slide

  28. REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    3

    View full-size slide

  29. UI Components
    Shared Components

    or

    Pattern Library

    View full-size slide

  30. นี่คือ
    ปุ ่

    Component


    Interface
    Typography
    font-family


    font-size


    font-weight


    line-height


    Color
    background-color


    color

    border


    :hover { }

    :active { }

    :disabled { }


    Spacing
    margin


    padding


    width


    height




    variant=“primary”


    size=“regular”


    icon=“gear”


    >


    นี่คือ
    ปุ่



    < /Button>

    View full-size slide

  31. Pattern Library
    or component library, or else

    View full-size slide

  32. REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    3
    Pattern Library

    View full-size slide

  33. Versioned Package

    View full-size slide

  34. Is this the latest design?
    Did you update Button font?
    Please change dropdown icon
    Fix tooltip bug
    Reduce icon size
    Fix scrollbar issue
    Revise pagination design

    View full-size slide

  35. Update your package!
    or “Did you update your package?”

    View full-size slide

  36. REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    3
    Pattern Library
    Update your package
    ?

    View full-size slide













  37. < /div>











    < /Field>





    < /Card>


    .builder-wrapper {


    background-color: $gray;


    border-radius: 8px;


    padding: 24px;


    }


    .builder-type-select {


    display: block;


    z-index: 10000;


    min-width: 144px;


    .trigger {


    width: 100%;


    }


    &--open {


    .trigger {


    opacity: .8;


    }


    }


    &-inner {


    background-color: $white;


    color: black;


    padding: 8px;


    (…continue)
    before after

    View full-size slide

  38. REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    3
    Pattern Library
    Update your package
    Reduce construction cost

    View full-size slide

  39. นี่คือ
    ปุ ่

    Further & Beyond:
    Utility-First .jv-btn {


    @apply jsn-text-500-16 jsn-bg-blue-500 jsn-align-middle
    jsn-inline-
    fl
    ex jsn-justify-center jsn-items-center jsn-
    my-0 jsn-rounded jsn-cursor-pointer jsn-text-white jsn-
    border jsn-border-solid jsn-border-blue-500


    &:active, &-active {


    @apply jsn-border-blue-700 jsn-bg-blue-700


    }





    }

    View full-size slide

  40. the power of platform
    and community

    View full-size slide