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

Transcript

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

   View Slide

2. What’s wrong with
   
   
   “Follow the Design” ?
   

   View Slide

3. Micro-frontend
   OA Plus Platform
   

   View Slide

4. View Slide

5. Fragment
   Fragment
   Fragment
   Fragment
   Layout
   

   View Slide

6. △
   ⚪︎
   □
   

   View Slide

7. △
   ⚪︎
   □
   REDUNDANCY
   Components implemented separately in
   each fragment
   1
   

   View Slide

8. △
   ⚪︎
   □
   REDUNDANCY
   1
   STYLE OUT OF SYNC
   We have no clue when changes
   happened in the design
   2
   

   View Slide

9. * based on true story
   

   View Slide

10. △
    ⚪︎
    □
    REDUNDANCY
    1
    STYLE OUT OF SYNC
    We have no clue when changes
    happened in the design
    2
    

    View Slide

11. ?????
    

    View Slide

12. △
    ⚪︎
    □
    REDUNDANCY
    1
    STYLE OUT OF SYNC
    2
    HIGH COMPLEXITY
    Sometimes “Following the design” is
    just toooo hard
    3
    

    View Slide

13. Why not “Follow the Design” ?
    Inconsistency
    

    View Slide

14. Fantastic UI and Where to Find
    Them
    

    View Slide

15. Design System
    

    View Slide

16. นี่
    คื
    อ
    ปุ ่
    ม
    Fonts
    size, line height, weight, style, etc.
    CTA: Call to Action
    

    View Slide

17. นี่คือ
    ปุ
    ่
    ม
    นี่
    คือ
    ปุ ่
    ม
    นี่
    คือปุ
    ่ ม
    

    View Slide

18. นี่คือ
    ปุ
    ่
    ม
    หัว
    ข้
    อ
    โอเซลทามิเวีย
    ร์
    สกาย เทรลเ
    ล่
    อ
    ร์
    เอ็ก
    ซ์
    โปคอนโทรล ดีไซ
    น์
    แบรน
    ด์
    ไพรเมตดิกชันนารีวอ
    ร์
    รูมเช็ก
    ป๊
    อกแตงโมลีกคอรัปชันสเ
    ปิร์
    ม พันธกิจสตา
    ร์
    นรีแพท
    ย์
    โลโ
    ก้
    ซากุระ สเต็มเฉิ่มแพน
    ด้
    า
    คอนเทนเนอ
    ร์
    ควีน ลาเ
    ต้
    ตุ ๋
    ยเฟอ
    ร์
    รี่บอก
    ซ์ ตู
    ้
    เซฟสแตนเลส ซันตาคลอสเวกเตอ
    ร์
    แบนเนอ
    ร์
    ลิมิต
    ยนตรกรรม อันเดอ
    ร์
    คอลเล็กชั่น แพทเทิ
    ร์
    นไบเบิลเพนกวิน เลกเชอ
    ร์
    มุมมองแฟรนไช
    ส์
    ซูเปอ
    ร์
    หลวงพี่ บอก
    ซ์
    ไฮดรอกไซ
    ด์
    เพอ
    ร์
    ออกไซ
    ด์
    มอบตัวคาแรคเตอ
    ร์
    * disclaimer: font sizing in this slide is not accurate
    โมเมนตัมฟลุคยูริกเทฟลอนจิตพิสัย โอเซลทามิเวีย
    ร์
    เ
    ฟิ
    ร์
    มไอ
    ซ์
    ออโร
    ร่
    า
    ฟิ
    วชัน แซม
    บ้
    าทิปไน
    ท์
    เซมิครัวซอง
    ต์
    ไวอาก
    ร้
    าเอทานอลพฤหัส ท
    ำ
    งา
    นบ็อก
    ซ์
    แครกเกอ
    ร์
    อินทิเกรต สเ
    ปิร์
    มทิป คลาสสิกแฟรี่
    ว้
    อย วันเว
    ย์
    เทฟลอนแคนูฮา
    ร์
    ดอะซีติก ไฟเบอ
    ร์
    ฟาส
    ต์
    ฟู ้
    ด ฟยอ
    ร์
    ด โปสเตอ
    ร์
    กุมภา
    พัน
    ธ์
    เมเ
    ปิ
    ลดาว
    น์
    แยมโรลเอ็ก
    ซ์
    โพเนนเชียล คอนโทรล ไททันท็อปบูต
    Fonts
    

    View Slide

19. นี่คือ
    ปุ
    ่
    ม
    Typography
    Fonts
    

    View Slide

20. นี่คือ
    ปุ
    ่
    ม
    Typography
    Color
    

    View Slide

21. นี่คือ
    ปุ
    ่
    ม
    นี่คือ
    ปุ
    ่
    ม
    Color Palette
    Basic Color
    System Color
    Secondary
    Success
    Danger
    Primary
    

    View Slide

22. นี่คือ
    ปุ
    ่
    ม นี่คือ
    ปุ
    ่
    ม นี่คือ
    ปุ
    ่
    ม
    นี่คือ
    ปุ
    ่
    ม
    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 Slide

23. นี่คือ
    ปุ
    ่
    ม
    Color Palette
    Basic Color
    System Color
    Secondary
    Success
    Danger
    

    View Slide

24. นี่คือ
    ปุ
    ่
    ม
    Typography
    Color Palette
    Spacing
    

    View Slide

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

    View Slide

26. นี่คือ
    ปุ ่
    ม
    Typography
    Color Palette
    Spacing
    Iconography Animation
    Vertical Order (z-order)
    Accessibility
    Sound
    

    View Slide

27. Foundations
    

    View Slide

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

    View Slide

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

    View Slide

30. Design System in Actions
    

    View Slide

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

    View Slide

32. UI Components
    Shared Components
    

    or
    

    Pattern Library
    

    View Slide

33. นี่คือ
    ปุ ่
    ม
    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 Slide

34. Pattern Library
    or component library, or else
    

    View Slide

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

    View Slide

36. Versioned Package
    

    View Slide

37. 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 Slide

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

    View Slide

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

    View Slide

40. 
    
    
    
    
    
    
    
    
    

    View Slide

41. 
    
    
    
    
    
    
    
    
    
    
    
    < /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 Slide

42. 
    

    View Slide

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

    View Slide

44. นี่คือ
    ปุ ่
    ม
    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 Slide

45. View Slide

46. View Slide

47. the power of platform
    and community
    

    View Slide