Wantedly の Dropdown UI カイゼンの道(調査・設計編)

https://wantedly.connpass.com/event/300025/
にて発表した内容です。

Transcript

1. © 2023 Wantedly, Inc. Wantedly の Dropdown UI カイゼンの道(調査・設計編) Wantedly x Qiita Meetup #1 Nov. 24 2023 - Shintaro Kawabe
2. © 2023 Wantedly, Inc. 自己紹介 shintaro sh1ntaro_dev s-kawabe 所属 ウォンテッドリー株式会社 ・Visit Growth Squad ・Frontend Chapter ・Design System Guild React / TypeScript / Figma / DesignSystem 好きな技 術 ダーツ / カラオケ / お酒 / 派手髪 / ずっと真夜中でいいのに。 趣味 s_kawabe
3. 技術書店で書きました © 2023 Wantedly, Inc. https://techbookfest.org/product/h7dbA2JgvZJZteH84rfk4P? productVariantID=kepLaewLt8EqAmrRFA1UyT > 第5章 Design System を見据えた Select UI 設計ガイド ・ウォンテッドリーのデザインシステム ・フロントエンドのコンポーネント課題感 ・課題解決のための新しい設計 もう少し具体的に話します󰳕
4. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
5. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
6. Select, Dropdown UIの課題感 © 2023 Wantedly, Inc. 考える前にまず、そもそも Select, Dropdown系 UIとは何か？
7. Select, Dropdown UIの課題感 © 2023 Wantedly, Inc. ⭐ ⭐
8. Select, Dropdown系UIの実装 1. UI要件がバラバラ (複雑なUIも) 2. メンテナンス & 標準化不足 a. 実装方法が統一されていない b. 実装の難易度が高い Select, Dropdown UIの課題感 © 2023 Wantedly, Inc. 具体的に何が起きている？ なぜそうなっている？ 解決すべき課題なの？
9. 1. UI要件がバラバラ - WantedlyのUIにおけるSelect, Dropdownは各所でデザインが異なる - １箇所のみに特化した UIがちらほら存在する 2. 実装方法が統一されていない - Select, Dropdownを実現するためのライブラリが複数導入されていて、それぞれの実 装方法が存在する 3. 実装の難易度が高い - 新しく実装する際、どのライブラリを使って実装すればいいかわからない - 毎回低レイヤを触って実装を組み立てないといけない Select, Dropdown UIの課題感 © 2023 Wantedly, Inc. 具体的に何が起きているか？
10. Select, Dropdown UIの課題感 © 2023 Wantedly, Inc. なぜそうなっているのか？ 1. UI要件がバラバラ - デザインシステムの UIコンポーネントセットに実装がなく、標準化が進まない状態で次々 に新しいUIデザインが生まれていった影響 2. 実装方法が統一されていない - デザインシステムの UIコンポーネントセットに実装がなく、都度対応するエンジニアが技 術選定を行った - 既存のライブラリ実装では実現できない要件が現れた - より良い開発体験のため、新しいライブラリを導入した 3. 実装の難易度が高い - 低レイヤの処理を扱いやすく抽象化したモジュールがない - 一定のユーザー体験とアクセシビリティ品質を担保するのが難しい
11. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
12. ＞ 1.UI要件がバラバラ ユースケースを分析する © 2023 Wantedly, Inc.
13. ユースケースを分析する © 2023 Wantedly, Inc.
14. ユースケースを分析する © 2023 Wantedly, Inc. 気づいたこと ・確かに見た目の時点で相当ばらつきがあった ・世に見ない特徴的なUIのものもあった ・振る舞いとしてはPopoverだが、Dropdownという名前になって いるものも あった ・デザインシステムがない環境で次々とデザインが作成されていった影響による ものという雰囲気はやはり感じた …etc
15. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
16. ＞ 2.実装方法が統一されていない ＞ 3.実装の難易度が高い 実装方法を分析する © 2023 Wantedly, Inc.
17. 実装方法を分析する © 2023 Wantedly, Inc. 現状の実装パターン ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) ・popper.js (react-popper) ・ライブラリを使わず実装
18. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
19. 解くべき課題を整理 © 2023 Wantedly, Inc. 1. UI要件がバラバラ - NO それが必要なデザインであるならば複数の UI要件があること自体は許容すべきこと 🤔 その代わり、ある程度のパターン化やグルーピングは必要。 2. 実装方法が統一されていない 3. 実装の難易度が高い - YES メンテナンス性や開発スピードの観点で開発者に明らかに負担を与えている問題 である。迷わずに開発ができてメンテナンスも容易に行える仕組みづくりが必要。
20. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
21. 新たな設計を考える © 2023 Wantedly, Inc.
22. 新たな設計を考える © 2023 Wantedly, Inc. は、すでに一部実装されていた👀
23. 新たな設計を考える © 2023 Wantedly, Inc.
24. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定 ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) ・popper.js (react-popper) ・ライブラリを使わず実装 ・zag.js ・Headless UI ・Radix UI ・Mantine
25. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定 ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) ・popper.js (react-popper) ・ライブラリを使わず実装 ・zag.js ・Headless UI ・Radix UI ・Mantine ・a11yの品質担保が難しい ・時間がかかる ・PoC実装と修正 ・メンテナンス
26. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定 ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) ・popper.js (react-popper) ・ライブラリを使わず実装 ・zag.js ・Headless UI ・Radix UI ・Mantine ・HeadlessなUIライブラリの中でも高レイヤを担保 するもののため ・先にあげたUI要件を全て達成するのが難しい
27. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定 ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) ・popper.js (react-popper) ・ライブラリを使わず実装 ・zag.js ・Headless UI ・Radix UI ・Mantine ・popper.jsはまだ保守が続けられているものの floating-uiに力を入れている。 あえてこっちを採用するメリットは薄そう
28. a11y Star カスタマイズ 性 APIの わかりやすさ latest version spectrum ◦ 9.9k 中 ▲ 3.19.0 floating-ui ◦ 27.2k 高 ◦ 0.26.2 downshift ◦ 11.6k 中 ▲ 8.2.3 zag.js ◦ 3.3k 中 ▲ 0.30.0 新たな実装を考える © 2023 Wantedly, Inc. 技術選定
29. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定
30. 新たな実装を考える © 2023 Wantedly, Inc. 技術選定 ・react-spectrum (react-aria, react-stately) ・downshift ・floating-ui (@floating-ui/react) 🏆 ・popper.js (react-popper) ・ライブラリを使わず実装 ・zag.js ・Headless UI ・Radix UI ・Mantine
31. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
32. PoCをつくる © 2023 Wantedly, Inc. まにあわず！！ （尺的にも） 実装編としてブログか別の 登壇の際に発表します ...
33. 1. Select,Dropdown UI の課題感 a. ユースケースを分析する b. 実装方法を分析する 2. 解くべき課題を整理 3. 新たな設計を考える 4. PoCをつくる 5. TODO - この先やること © 2023 Wantedly, Inc. 目次
34. 1. ベース実装のPoCを作る a. サンプルでこれを使ったSelectやComboboxなどの 具体コンポーネントをつくる 2. ユースケースをもとにUIを正しくパターン化する a. Figmaで絵にする b. デザイナーと相談する 3. パターンごとにデザインシステムに具体コンポーネントを追加していく 4. アプリケーションに少しずつ反映する TODO - この先やること © 2023 Wantedly, Inc.
35. - JavaScript無しでも機能を実現できるように - <dialog> - <datalist> - <menu> 🚨 - <selectlist> 🚨 - <combobox> 🚨 TODO - この先やること © 2023 Wantedly, Inc.
36. 細部までUIと向き合っていきましょう Thank you © 2023 Wantedly, Inc.
37. ありがとうございました。 Thank you © 2023 Wantedly, Inc.
38. Welcome!! © 2023 Wantedly, Inc. https://www.wantedly.com/projects/761812 カジュアルに話しましょう🤝