リストビュー画面UX改善の振り返り

Muddy_Web_#11_Cybozu_proteinmochi

Transcript

1. リストビュー画面UX改善の 振り返り
3. 話す内容 • 「リストビュー画面」(一覧画面)のUXの改善タスクを振り返る • 一覧画面を一目に収める対応 • 微妙に伸びる横幅の対応 *主に実装レベルで振り返る(UXの概念はあまり触れません)
4. before
5. after
7. 前提：一覧画面の構成
8. ヘッダー & グローバル ナビゲーション メインコンテンツ (utility) メインコンテンツ (table)
9. 横にスクロールすると..
11. 一覧画面を一目に収める対応
12. 実装方法の検討 1. スクロール対象をテーブルに変更 2. 1.の変更に加えて、外側に偽スクロールを作って同期させる 3. テーブルコンポーネント以外をviewportに固定する
13. 1. スクロール対象テーブルに変更
15. 採用できなかった理由 • 横スクロールバーがviewportの最下部に表示されない → 横スクロールバーを探すために毎度下まで下がらないといけない → UX よくないと判断
17. 2. 1.の変更に加えて、 外側に偽スクロールを作って同期させる
18. 内側スクロールバー 外側スクロールバー (に見えるやつ)
19. 採用できなかった理由 • ゴリ押しすぎる (偽スクロールバーってなに？) → React の DOM update の自然な流れに反する bad practice → コードの可読性＆メンテ性＆拡張性などにおいて NG
20. 3. テーブルコンポーネント以外をviewportに固定する
21. ラッパーコンポーネント用意
22. ラッパーコンポーネントの css 指定
24. 絶妙に伸びる横幅の対応
25. 横幅が伸びたとは？
26. 横幅が伸びた原因 • `width: 100vw` → 現状 css 仕様的には、縦スクロールバーを考慮しない
27. 解決策の検討 1. 別の width property 単位 → `dvw` を活用 2. 別の width property 単位 → `%` を活用 3. JS 活用
28. 1. 別の width property 単位 → `dvw` を活用
29. ％ に変更 from web.dev vw = dvw
30. 解決できなかった理由 dvhはモバイルの viewport では意味あるけど、 dvwは = vw なので、 スクロールバー分を考慮してくれるわけではない
31. 2. 別の width property 単位 → `%` を活用
32. ％ に変更
33. Viewportに固定したい コンポーネント テーブル コンポーネント root コンポーネント Viewport
34. Viewportに固定したい コンポーネント テーブル コンポーネント root コンポーネント Viewport
35. 解決できなかった理由 伸ばしたくないコンポーネントの幅を伸ばしてしまう。 kintoneの構造上無理だった。
36. 3. JS 活用
37. 1. グローバル resize イベント → ブラウザー window 自体のサイズを観察 → 画面自体のレイアウト変更は観察しない 2. MutationObserver API → DOM 変更を観察 → DOM追加・削除に使えそう 3. IntersectionObserver API → viewport範囲内で見えるか否かを観察 → lazy loading, scroll tracking などで使えそう 4. ResizeObserver API → 要素のサイズの変化を観察 → 縦スクロールバーによる width 変更に反応してくれそう 使えそうなJS pick-up
38. ResizeObserver API は幅広く使われてる！
39. ％ に変更
40. ％ に変更
41. 解決！
42. あとがき
43. source • Scrollbar problem source • `dvh` explanation source • Can I use source • resize event source • MutationObserver source • IntersectionObserver source • ResizeObserver source