Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React-Redux-Redux-Saga-Workshop04
Search
tashxii
August 13, 2019
Programming
0
47
React-Redux-Redux-Saga-Workshop04
From TIS internal workshop at 2019/8/13
tashxii
August 13, 2019
Tweet
Share
More Decks by tashxii
See All by tashxii
React-Redux-Redux-Saga-Workshop03
tashxii
0
170
React-Redux-Redux-Saga-Workshop02
tashxii
0
120
React-Redux-Redux-Saga-Workshop01
tashxii
0
100
Other Decks in Programming
See All in Programming
NEWT Backend Evolution
xpromx
1
140
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Deep Dive into ~/.claude/projects
hiragram
14
14k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
240
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
It's Worth the Effort
3n
185
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A designer walks into a library…
pauljervisheath
207
24k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Ace a Technical Interview
jacobian
278
23k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Code Reviewing Like a Champion
maltzj
524
40k
We Have a Design System, Now What?
morganepeng
53
7.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
React + Redux + Redux-Saga 勉強会 ④ UI/UX編 2019/8/13 tashxii@tis
https://fintan.jp/
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可:前回と同じスライド
題材に使うアプリケーション • タスク管理アプリ • イメージ(gif) • 機能 • サインアップ •
ログイン • ボード管理 • ユーザー管理 • タスク管理 • ドラッグ&ドロップ • Push通知 3 Skip可:前回と同じスライド
題材に使うアプリケーション • Websocketを使ったPush通知 • イメージ(gif) • 他のクライアントの 操作をサーバー 経由で伝達 4
Skip可:前回と同じスライド
題材のアプリで使用しているライブラリ • Redux 状態管理ライブラリ • Redux-Saga 非同期処理用ライブラリ • styled-component コンポーネントのスタイル管理
• Ant design コンポーネントライブラリ • react-beautiful-dnd ドラッグ&ドロップコンポーネント • react-router-dom URL遷移 • Font awesome アイコンライブラリ 5 Skip可:前回と同じスライド
ソースコード • 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
ユーザビリティとは? • 一言でいうと「使いやすさ」 • 「ユーザビリティエンジニアリング原論」(Usability Engineering (Interactive Technologies) では Jakob
Nielsen によって以下の5原則 が定義されている 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3. 記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) 8 学習しやすさ: システムは、ユーザがそれを使ってすぐ作業を始められるよう、簡単に学習でき るようにしなければならない。 効率性: システムは、一度ユーザがそれについて学習すれば、後は高い生産性を上げら れるよう、効率的な使用を可能にすべきである。 記憶しやすさ: システムは、不定期利用のユーザがしばらく使わなくても、再び使うときに覚え直 さないで使えるよう、覚えやすくしなければならない。 エラー: システムはエラー発生率を低くし、ユーザがシステム使用中にエラーを起こしにく く、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致 命的なエラーが起こってはいけない。 主観的満足度: システムは、ユーザが個人的に満足できるよう、また好きになるよう楽しく利用で きるようにしなければならない。
デザインの原則のまとめ 9 https://uxxinspiration.com/2014/ 02/design-principles/
たとえば、「視線、手の動き」の分析 • グーテンベルグ・ ダイアグラム (伝統的な分類法) • Zパターン (紙媒体、モバイルなど) • Fパターン
(ブラウザなど) 10 https://www.domore.co.jp/mobilelab/design/visual_-guidance
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
ボタンやラベルの配置のプラクティス • ボタンのラベルや配置順序のベストプラクティスとは(日本語訳) • https://uxmilk.jp/56527 • Primary & Secondary Action
Buttons(英語の原文) • http://babich.biz/primary-secondary-action-buttons/ 13 NG 色を 変える ラベルを 動詞にする 操作できないとき は無効にする Cancelでは 何が起こるか 分からない ラベルを 動詞にする
その他のベストプラクティス • サイトやアプリのユーザビリティを向上させる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
ボタン • 有効なボタンカラーの統一 • 無効な場合のグレーアウト • 実行中の際のハンドル 16 有効ボタンの 色の統一
実行中 操作有効 操作無効
ドラッグ&ドロップ • ドラッグする領域でのマウスカーソル • ドラッグ可能であることを示す • ドロップ可能領域でのカラーリング • ドロップ可能であることを示す •
ドロップ後の描画 • 半透明のカードを残す • スピナーを出す 17
フィードバック • ボタンのローディング • 描画領域のスピナー 18
ツールチップ・Popconfirm • 操作可能なアイコンのツールチップ表示 • 削除操作の確認 19
覚えていてほしいこと • ユーザビリティの5原則 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3.
記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) • レイアウトの3パターン • グーテンベルクダイアグラム、Zパターン、Fパターン • 普遍性と個性のバランス • 他のアプリケーションとの差のない普遍性 • アプリケーション全体での統一性 • 視覚的フィードバック 20