React-Redux-Redux-Saga-Workshop04

From TIS internal workshop at 2019/8/13

Transcript

1. React + Redux + Redux-Saga 勉強会 ④ UI/UX編 2019/8/13 tashxii@tis https://fintan.jp/
2. React / Redux / Redux-Saga • React … UIライブラリ • Redux … React の状態管理ライブラリ • Redux-Saga … 非同期処理を扱うReduxのミドルウェア 2 https://ja.reactjs.org/ https://Redux-Saga.js.org/ https://redux.js.org/ Skip可：前回と同じスライド
3. 題材に使うアプリケーション • タスク管理アプリ • イメージ(gif) • 機能 • サインアップ • ログイン • ボード管理 • ユーザー管理 • タスク管理 • ドラッグ＆ドロップ • Push通知 3 Skip可：前回と同じスライド
4. 題材に使うアプリケーション • Websocketを使ったPush通知 • イメージ(gif) • 他のクライアントの 操作をサーバー 経由で伝達 4 Skip可：前回と同じスライド
5. 題材のアプリで使用しているライブラリ • Redux 状態管理ライブラリ • Redux-Saga 非同期処理用ライブラリ • styled-component コンポーネントのスタイル管理 • Ant design コンポーネントライブラリ • react-beautiful-dnd ドラッグ＆ドロップコンポーネント • react-router-dom ＵＲＬ遷移 • Font awesome アイコンライブラリ 5 Skip可：前回と同じスライド
6. ソースコード • Front-end (React) https://github.com/tashxii/taskboard-react • Back-end (Go) https://github.com/tashxii/taskboard-api-go git clone https://github.com/tashxii/taskboard-react.git cd taskboard-react yarn install git clone https://github.com/tashxii/taskboard-api-go.git cd taskboard-api-go dep ensure go build 6 Skip可：前回と同じスライド
7. ユーザビリティ 7
8. ユーザビリティとは？ • 一言でいうと「使いやすさ」 • 「ユーザビリティエンジニアリング原論」（Usability Engineering (Interactive Technologies) では Jakob Nielsen によって以下の5原則 が定義されている 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3. 記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) 8 学習しやすさ: システムは、ユーザがそれを使ってすぐ作業を始められるよう、簡単に学習でき るようにしなければならない。 効率性: システムは、一度ユーザがそれについて学習すれば、後は高い生産性を上げら れるよう、効率的な使用を可能にすべきである。 記憶しやすさ: システムは、不定期利用のユーザがしばらく使わなくても、再び使うときに覚え直 さないで使えるよう、覚えやすくしなければならない。 エラー: システムはエラー発生率を低くし、ユーザがシステム使用中にエラーを起こしにく く、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致 命的なエラーが起こってはいけない。 主観的満足度: システムは、ユーザが個人的に満足できるよう、また好きになるよう楽しく利用で きるようにしなければならない。
9. デザインの原則のまとめ 9 https://uxxinspiration.com/2014/ 02/design-principles/
10. たとえば、「視線、手の動き」の分析 • グーテンベルグ・ ダイアグラム （伝統的な分類法） • Zパターン （紙媒体、モバイルなど） • Fパターン （ブラウザなど） 10 https://www.domore.co.jp/mobilelab/design/visual_-guidance
11. F-パターン（Webコンテンツの視線分析） • Webコンテンツでは、縦の長さが不定となり、Fパターンの適用が多くなる 研究結果が出ている。 • 細部まで見てもらえないことを前提とすること 11 https://www.nngroup.com/articles/ f-shaped-pattern-reading-web-content/ https://www.genius-web.co.jp/ blog/cat-104/design_04.html
12. ベストプラクティス 12
13. ボタンやラベルの配置のプラクティス • ボタンのラベルや配置順序のベストプラクティスとは（日本語訳） • https://uxmilk.jp/56527 • Primary & Secondary Action Buttons（英語の原文） • http://babich.biz/primary-secondary-action-buttons/ 13 NG 色を 変える ラベルを 動詞にする 操作できないとき は無効にする Cancelでは 何が起こるか 分からない ラベルを 動詞にする
14. その他のベストプラクティス • サイトやアプリのユーザビリティを向上させる35のポイント • https://baigie.me/sogitani/2014/04/usability/ • Boosting Your UX With Usability Best Practices • https://uxtricks.design/blogs/ux-design/usability-tips/ • UIデザインにおけるナビゲーションのデザインパターンまとめ • https://baigie.me/sogitani/2014/08/navigation-design-type/ 14
15. サンプルでの取り組み 15
16. ボタン • 有効なボタンカラーの統一 • 無効な場合のグレーアウト • 実行中の際のハンドル 16 有効ボタンの 色の統一 実行中 操作有効 操作無効
17. ドラッグ＆ドロップ • ドラッグする領域でのマウスカーソル • ドラッグ可能であることを示す • ドロップ可能領域でのカラーリング • ドロップ可能であることを示す • ドロップ後の描画 • 半透明のカードを残す • スピナーを出す 17
18. フィードバック • ボタンのローディング • 描画領域のスピナー 18
19. ツールチップ・Popconfirm • 操作可能なアイコンのツールチップ表示 • 削除操作の確認 19
20. 覚えていてほしいこと • ユーザビリティの5原則 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3. 記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) • レイアウトの3パターン • グーテンベルクダイアグラム、Zパターン、Fパターン • 普遍性と個性のバランス • 他のアプリケーションとの差のない普遍性 • アプリケーション全体での統一性 • 視覚的フィードバック 20