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
UIデザインを行う際に知っておきたい、情報設計とインタラクションデザインの基礎
Search
Rikiya Ihara / magi
January 31, 2019
1
120
UIデザインを行う際に知っておきたい、情報設計とインタラクションデザインの基礎
Rikiya Ihara / magi
January 31, 2019
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
CMS管理画面のアクセシビリティ
magi1125
5
1.7k
AIで加速するアクセシビリティのこれから
magi1125
3
520
アクセシビリティの社内浸透
magi1125
0
31
信念を持つ方法
magi1125
0
20
スマホのアクセシビリティ機能お試し大会
magi1125
0
25
『モバイルアプリアクセシビリティ入門』入門
magi1125
0
11
最速[要出典]アクセシビリティチェック
magi1125
3
310
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
14
9.8k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
8.3k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
650
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.1k
How to Ace a Technical Interview
jacobian
277
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Gamification - CAS2011
davidbonilla
81
5.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Transcript
UIデザインを行う際に知っておきたい、 情報設計とインタラクションデザインの基礎 伊原 力也 テクトモ #8|2019.01.31 1
自己紹介
伊原 力也 3 • freee株式会社 プロダクトマネジャー • HCD-Net 評議委員 /
認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員
https://www.hcdnet.org 4
https://waic.jp 5
6
本日の流れ • WebデザインとUIデザインの違い • UIデザインの進め方? • ペルソナとUIの間にある3つのギャップ • 理想シナリオ •
情報構造設計 • インタラクションデザイン
WebデザインとUIデザインの違い
アプリケーションはプラットフォームがある • iOS・Android • プラットフォームのお作法に乗りつつ、独自の機能性を考える • Webなら同じ?
Webサイトなのかアプリケーションなのか • WebサイトデザインをやっているからUIデザインできるわけではない • 同じ木から出来ていても、新聞と椅子ぐらい違う • 閲覧ベースかインタラクションベースかで重視するポイントは異なる
アプリケーションは目的を設定しやすい • 例:ターゲットを絞らずに広く閲覧してもらうサイト • 例:特定のユーザーがゴールに向かうことを支援するアプリ • 提供側の意図を適切に伝えるのか、ユーザーをゴールに向かわせるのか
Webサイトを作っていても、その素養は磨ける • フォーム最適化:業務アプリのグロースやUI改善に活きる • ECサイトやシミュレーター案件:Webサイトとアプリの境界線 • CMSの入出力の設計:エンドユーザーではない人のタスクを支援する • いずれにしてもユーザーのゴールがある案件に携わるのが重要
UIデザインの進め方?
よくある話 • よさそうなサイトやアプリを日々ウォッチする • デザイン写経でパターンを身につける • なるべくいろんなものを使ってみる • そうすると構成やUIが思いつく……?
よくある実務の進行 • いきなりサイトマップを書く • いきなりワイヤーフレームを書く • いきなりUIをデザインする • いきなりプロトタイプを作る
None
基礎を知るとより近道ができる • UIデザインには根幹となる概念がある • それを知った上で学習や実務を行うのが合理的 • 文法を知ったうえで用例を学ぼう
None
http://www.jjg.net/elements/translations/elements_jp.pdf
http://www.jjg.net/elements/translations/elements_jp.pdf
https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf
https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf
https://jasonfurnell.wordpress.com/2011/08/02/workshop-capture-templates-for-customer-journeys-content-workflows-business-model-canvas-and-more/
よくある実務の進行:その2 • ペルソナとジャーニーマップを作る • いきなりサイトマップを書く • いきなりワイヤーフレームを書く • いきなりUIをデザインする •
いきなりプロトタイプを作る
ペルソナやジャーニーマップから どうやってUIにするのか?
None
None
ペルソナとUIの間にある3つのギャップ 1. 理想シナリオ 2. 情報構造設計 3. インタラクションデザイン
1. 理想シナリオ
http://www.jjg.net/elements/translations/elements_jp.pdf
None
https://www.coop-takuhai.jp/takuhai/about
None
None
None
None
None
None
None
None
http://www.jjg.net/elements/translations/elements_jp.pdf
2. 情報構造設計
None
None
None
None
https://reras-factory.com/iphone-10year/
None
None
None
None
https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
None
ユーザーニーズと コンテンツの属性をもとに、 構造パターンを選択し 分類方針を定める
トップダウン・アプローチと ボトムアップ・アプローチ
トップダウン・アプローチ ユーザーがどんなふうに見つけたり探したりするのだろうか? ペルソナやシナリオをもとに: • その人がどんな分野には明るくて、どんな分野には詳しくないか • ウェブやアプリをどのくらい使っているか • どんなサイトやアプリを使っていて、どのくらい類推できそうか •
このアプリにおいては、何をどういうくくりで探しているのか
None
構造のパターン
ツリー
ファセット
ウェブ
ハブ&スポーク
リニア
トピック、オーディエンス、タスク
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
ボトムアップ・アプローチ コンテンツが持つ属性(メタデータ)にはどんなものがあるのか? • 名前、重さ、サイズ、色、大きさ、型番、などなど… • 取り扱うコンテンツ自体が持ちうる属性を洗い出す • それらにまとまりを与える • そこから、ユーザーがものを探し出すための切り口を見出す
None
None
None
None
LATCH
Location:場所 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
Alphabet:アルファベット/五十音 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
Time:時間 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
Category:カテゴリ https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
Hierarchy:連続量 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
ポイント:独自のことをやらない
None
None
None
None
ヒント:ネットスーパーなどを参考に
None
None
ヒント:アパレルや価格.comなどを参考に 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級
人気度
None
3. インタラクションデザイン
None
ユーザーがサイト上の各種機能にどう反応するかを定義し、 タスクの実行を促進するアプリケーションフローを開発すること
ポイント • OOUI • 4つのパターン • 画面で考えない
None
?
ユーザーの興味関心の対象はこちらにある 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級
人気度
ユーザーの興味関心の対象はこちらにある
None
None
None
None
OOUI タスクベースUI • 何をするか(動詞)を決めて、もの(名詞)を選ぶ オブジェクトベースUI • もの(名詞)を選んで、何をするか(動詞)決める
None
None
Modal
Modeless
Webやアプリを司る4つのパターン • 一覧:複数のもの:コレクション • 詳細:個別のもの:シングル • 入力や設定:フォームなど:タスク支援 • ツール提供:写真の編集ツールなど
UI Flows http://www.standardinc.jp/reflection/article/ui-flows/
一覧:商品 商品名称 グラム数/数量 価格 詳細:商品 商品番号 商品名称 グラム数/数量 価格 税込価格
一覧:カテゴリ カテゴリ名称 詳しく見る 検索する 並び替える 詳しく見る 絞り込む ソートする ブックマークする 注文する 検索する
「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。 振り下ろしてからハンマーを持つ人はいないのです」 https://www.sociomedia.co.jp/7279
画面のことは後で考える • 画面の大きさ • 表示すべき内容の量 • ユーザーのリテラシーの想定 • ユーザーの利用状況の想定 •
ユーザーの学習度合いの想定
None
None
None
None
None
http://modelessdesign.com/
オマケ:モードレスの知見を深めるコーナー • 2018年のオブジェクトベース UI • Modeless and Modal • ユーザー理解に合わせたユーザーインターフェイスデザイン
• アプリケーションのイディオムデザイン (ページ下の方) • モードレス・ユーザーインターフェース • アナーキー・イン・ザ・ UX • OOUX - オブジェクトベースの UIモデリング • モードレスインタラクション • SEのためのUIデザインの教科書 • 複雑なアプリケーションにオブジェクト指向 UIで立ち向かう • ユーザーインターフェース解剖学・改訂版
そしてUIデザインへ
ここまで来ると、これが活きる • よさそうなサイトやアプリを日々ウォッチする • デザイン写経でパターンを身につける • なるべくいろんなものを使ってみる • シナリオを考え、情報構造設計を行い、インタラクションを考える •
そうすると、適用すべきUIパターンが思いつく
None
本日の流れ • WebデザインとUIデザインの違い • UIデザインの進め方? • ペルソナとUIの間にある3つのギャップ • 理想シナリオ •
情報構造設計 • インタラクションデザイン • そしてUIデザインへ
None
None
None
None
ありがとうございました 引き続きQ&Aコーナーへ! @magi1125 124