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

Transcript

1. How to get away from bad UX: Micro-frontend Arc
2. What’s wrong with “Follow the Design” ?
3. Micro-frontend OA Plus Platform
5. Fragment Fragment Fragment Fragment Layout
6. △ ⚪︎ □
7. △ ⚪︎ □ REDUNDANCY Components implemented separately in each fragment 1
8. △ ⚪︎ □ REDUNDANCY 1 STYLE OUT OF SYNC We have no clue when changes happened in the design 2
9. * based on true story
10. △ ⚪︎ □ REDUNDANCY 1 STYLE OUT OF SYNC We have no clue when changes happened in the design 2
11. ?????
12. △ ⚪︎ □ REDUNDANCY 1 STYLE OUT OF SYNC 2 HIGH COMPLEXITY Sometimes “Following the design” is just toooo hard 3
13. Why not “Follow the Design” ? Inconsistency
14. Fantastic UI and Where to Find Them
15. Design System
16. นี่ คื อ ปุ ่ ม Fonts size, line height, weight, style, etc. CTA: Call to Action
17. นี่คือ ปุ ่ ม นี่ คือ ปุ ่ ม นี่ คือปุ ่ ม
18. นี่คือ ปุ ่ ม หัว ข้ อ โอเซลทามิเวีย ร์ สกาย เทรลเ ล่ อ ร์ เอ็ก ซ์ โปคอนโทรล ดีไซ น์ แบรน ด์ ไพรเมตดิกชันนารีวอ ร์ รูมเช็ก ป๊ อกแตงโมลีกคอรัปชันสเ ปิร์ ม พันธกิจสตา ร์ นรีแพท ย์ โลโ ก้ ซากุระ สเต็มเฉิ่มแพน ด้ า คอนเทนเนอ ร์ ควีน ลาเ ต้ ตุ ๋ ยเฟอ ร์ รี่บอก ซ์ ตู ้ เซฟสแตนเลส ซันตาคลอสเวกเตอ ร์ แบนเนอ ร์ ลิมิต ยนตรกรรม อันเดอ ร์ คอลเล็กชั่น แพทเทิ ร์ นไบเบิลเพนกวิน เลกเชอ ร์ มุมมองแฟรนไช ส์ ซูเปอ ร์ หลวงพี่ บอก ซ์ ไฮดรอกไซ ด์ เพอ ร์ ออกไซ ด์ มอบตัวคาแรคเตอ ร์ * disclaimer: font sizing in this slide is not accurate โมเมนตัมฟลุคยูริกเทฟลอนจิตพิสัย โอเซลทามิเวีย ร์ เ ฟิ ร์ มไอ ซ์ ออโร ร่ า ฟิ วชัน แซม บ้ าทิปไน ท์ เซมิครัวซอง ต์ ไวอาก ร้ าเอทานอลพฤหัส ท ำ งา นบ็อก ซ์ แครกเกอ ร์ อินทิเกรต สเ ปิร์ มทิป คลาสสิกแฟรี่ ว้ อย วันเว ย์ เทฟลอนแคนูฮา ร์ ดอะซีติก ไฟเบอ ร์ ฟาส ต์ ฟู ้ ด ฟยอ ร์ ด โปสเตอ ร์ กุมภา พัน ธ์ เมเ ปิ ลดาว น์ แยมโรลเอ็ก ซ์ โพเนนเชียล คอนโทรล ไททันท็อปบูต Fonts
19. นี่คือ ปุ ่ ม Typography Fonts
20. นี่คือ ปุ ่ ม Typography Color
21. นี่คือ ปุ ่ ม นี่คือ ปุ ่ ม Color Palette Basic Color System Color Secondary Success Danger Primary
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
23. นี่คือ ปุ ่ ม Color Palette Basic Color System Color Secondary Success Danger
24. นี่คือ ปุ ่ ม Typography Color Palette Spacing
25. * disclaimer: sizing in this slide is not accurate 8px 12px 16px 24px 32px 40px 64px Spacing 4px
26. นี่คือ ปุ ่ ม Typography Color Palette Spacing Iconography Animation Vertical Order (z-order) Accessibility Sound
27. Foundations
28. UI Components Foundations Documentation | Rules | Connections Best Practices Product-Specific Components
29. UI Components Foundations Documentation | Rules | Connections Best Practices Product-Specific Components Design System
30. Design System in Actions
31. REDUNDANCY 1 STYLE OUT OF SYNC 2 HIGH COMPLEXITY 3
32. UI Components Shared Components 
 or 
 Pattern Library
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 <Button variant=“primary” size=“regular” icon=“gear” > นี่คือ ปุ่ ม < /Button> …
34. Pattern Library or component library, or else
35. REDUNDANCY 1 STYLE OUT OF SYNC 2 HIGH COMPLEXITY 3 Pattern Library
36. Versioned Package
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
38. Update your package! or “Did you update your package?”
39. REDUNDANCY 1 STYLE OUT OF SYNC 2 HIGH COMPLEXITY 3 Pattern Library Update your package ?
40. <QuestionBuilder> <ImageUploader> <IconButton> <Toggle> <Select> <Field> <Field> <NumberInput> <Panel>
41. <Card> <div class=“header”> <Select / > <IconButton / > < /div> <Field> <Input / > <ImageUploader / > < /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
42. <TextLink>
43. REDUNDANCY 1 STYLE OUT OF SYNC 2 HIGH COMPLEXITY 3 Pattern Library Update your package Reduce construction cost
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 } … }
47. the power of platform and community