Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UIデザインの常識を改める「認知学から学ぶUIの基本」
1. 人間はそもそも見える範囲に限界がある
何かに集中しているほど回りが見えていない!
人間が見ることができる有効な視野
適当な眼球
運動の範囲
色、輝度が変化する場合の
色の弁別限界
数、文字の語(ワード)の
意識限界
シンボルの
認識限界
中心視の
範囲
15°
15°
62°
62°
94°
94°
30~60°
30~60...
ユーザビリティの世界では著名なヤコブ・ニールセン博士
ナビゲーションは宝探しではない。
行き先が曖昧なリンクを次々にクリックしながら
「ああでもない、こうでもない」と
気長につきあってくれるユーザはまずいない。
ユーザがサイトの構造を
積極的に...
ヤコブ・ニールセン博士が提唱したF型の視線移動
ヘッダー情報 ヘッダー情報 ヘッダー情報
ナビゲーション情報ナビゲーション情報
Nielsen Norman Group F-Shaped Pattern For Reading Web Cont...
よ
り
重
要
顧
客
別
の
情
報
誰にで伝わる太い導線
特定ユーザー向け導線
リピーター限定導線
死角サイトロゴサイトロゴ直下の
もっとも
視線を引く場所
視線の移動距離が短いほど
太い導線として価値が高い
死角
視線移動の方向
ファース...
画面 左側 画面 右側
今見ている視野
視線の先
進行方向
よく見えている
エリア
注視視野から遠くなるほど
見えにくい場所
濃度差など
コントラストが強い情報に
気づきやすい
(視線を引っ張りやすい)
視線の移動と逆になるため、
情報に気づき...
3. 短期記憶がカギになるWEB閲覧
ガトーショコラ チョコブラウニー
ティラミス
ミルクレープ チョコパイ
マカロン
クッキー
プリンアイスバーガー
ムース
アイスクリーム
▼お菓子のレシピ
11
チャンク
3
チャンク
チョコパイ
マカロン
クッキー
▼焼き菓子レシピ
3チャン...
使わないナビゲーションを減らす
トップページ
製品情報
ニュース
リリース
企業情報
株主投資家向け
情報
採用情報
製品
ジャンル
製品
ジャンル
製品
ジャンル
製品
ジャンル
製品
ジャンル
頻繁に利用される
ローカルナビの移動
特定のデ...
ユーザー行動とナビゲーション
★目的の情報以外、能動的に他の情報は見ない
★画面の上だけにあるナビゲーションは使いにくい
★ローカルナビゲーションの役割が重要になるほど、
グローバルナビゲーションが不要になっていく
★ページ内でボタンが多数あっ...
5. 男性と女性の意識の違い
客観的 主観的
男性的な脳と女性的な脳では、根本的に考え方が違う
男性的な脳の考え方 女性的な脳の考え方
♥
自分を中心にして
捉える
主観的、
感情的に捉える
自分を俯瞰して
みられる
論理的、
客観的に捉える
女性を意識した表現の自動車メーカーWEBサイト
日産 デイズ トップページ
女性を意識した表現の自動車メーカーWEBサイト
日産 デイズ トップページ
6. 誰でも使えるわけではない検索機能
記録に残らないアクセスを見極めて、潜在的なニーズ探る
Webサイト
ターゲットユーザー
サイト利用者
サイトに辿り着いた
ユーザー
検索でヒット
しなかったユーザー
検索すら
しない
ユーザー
知りたい情報に
辿り着いたユーザー
内容がわからな...
シンプルだからといって、すべての人が使えるわけではない。
02:Uiデザインの常識を改める「認知学から学ぶuiの基本」サンプル
Upcoming SlideShare
Loading in …5
×

02:Uiデザインの常識を改める「認知学から学ぶuiの基本」サンプル

8,211 views

Published on

今まで常識だと思っていた『いつも目にするWEBデザイン』は、人間本来がもつ知覚能力の限界や、認知心理学などのデータを用いて検証していくと、実は使いにくい・わかりにくいデザインだったことに気づかされることでしょう。
UIデザインの基本の基を改めて学び直す、論理的で理に適った「表現」とは何かがわかる2時間です。
キレイなデザインやカッコいいデザインだけじゃない、本当にユーザーの役に立つWEBデザインの仕掛けを理解できます。

毎月、東京神田で開催中!詳しくはこちらをご覧下さい。
東京開催:http://www.continue.jp/lectures/seminar20170121/
大阪開催:http://www.continue.jp/lectures/seminar20170218osaka/

Published in: Education
  • Be the first to comment

02:Uiデザインの常識を改める「認知学から学ぶuiの基本」サンプル

  1. 1. UIデザインの常識を改める「認知学から学ぶUIの基本」
  2. 2. 1. 人間はそもそも見える範囲に限界がある
  3. 3. 何かに集中しているほど回りが見えていない!
  4. 4. 人間が見ることができる有効な視野 適当な眼球 運動の範囲 色、輝度が変化する場合の 色の弁別限界 数、文字の語(ワード)の 意識限界 シンボルの 認識限界 中心視の 範囲 15° 15° 62° 62° 94° 94° 30~60° 30~60° 5~30° 5~30° 5~10° 0° 1° 1° 5~10° 700mm500mm 10° 15° 立体時差方向 座位時差方向 45°以上からの 直射光は気にならない 30° 40° 30° 45° 適当な眼球 運動の範囲 色が弁別 できる限界 視覚表示器の 最適視認範囲 70~80° 視野の下限 視野の上限 50~55° 特定非営利活動法人 人間中心設計推進機構「視野角と弁別能力」 http://www.hcdnet.org/hcd/course_01/04.php?page=2
  5. 5. ユーザビリティの世界では著名なヤコブ・ニールセン博士 ナビゲーションは宝探しではない。 行き先が曖昧なリンクを次々にクリックしながら 「ああでもない、こうでもない」と 気長につきあってくれるユーザはまずいない。 ユーザがサイトの構造を 積極的に理解してくれることはほとんどない。 また、こんなフレーズもある。 Jakob Nielsen(ヤコブ・ニールセン) コペンハーゲンに生まれ、デンマーク工科大学を卒業。ベル研究所やIBMでの研究を経て、 1994年から1998年までサン・マイクロシステムズに勤め、ユーザビリティの分野で発明を行う。 1995年から自身のウェブサイト「useit.com」にてユーザビリティについてのコラム「Alertbox」を公開した。 1998年、ドナルド・ノーマンと共にニールセン・ノーマン・グループを設立。代表となる。 ユーザビリティのガイドラインとして、「ヤコブ・ニールセンの10ヒューリスティック」はあまりにも有名。 ヤコブ・ニールセン博士の主な邦訳著書
  6. 6. ヤコブ・ニールセン博士が提唱したF型の視線移動 ヘッダー情報 ヘッダー情報 ヘッダー情報 ナビゲーション情報ナビゲーション情報 Nielsen Norman Group F-Shaped Pattern For Reading Web Content https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
  7. 7. よ り 重 要 顧 客 別 の 情 報 誰にで伝わる太い導線 特定ユーザー向け導線 リピーター限定導線 死角サイトロゴサイトロゴ直下の もっとも 視線を引く場所 視線の移動距離が短いほど 太い導線として価値が高い 死角 視線移動の方向 ファースト ビューの境界 凡例 メイン情報 画面の中心 関連情報 ヤコブ・ニールセン博士のアイトラッキング調査による57,453回もの視線の滞留の分析結果 http://u-site.jp/alertbox/page-fold-manifesto ファースト ビューの境界 セカンド ビューの境界 スクロールの先でも注目される 視線移動と情報の見つけやすい場所
  8. 8. 画面 左側 画面 右側 今見ている視野 視線の先 進行方向 よく見えている エリア 注視視野から遠くなるほど 見えにくい場所 濃度差など コントラストが強い情報に 気づきやすい (視線を引っ張りやすい) 視線の移動と逆になるため、 情報に気づきにくい (死角になりやすい) 視線の移動方向周辺であれば、視線を誘導できる
  9. 9. 3. 短期記憶がカギになるWEB閲覧
  10. 10. ガトーショコラ チョコブラウニー ティラミス ミルクレープ チョコパイ マカロン クッキー プリンアイスバーガー ムース アイスクリーム ▼お菓子のレシピ 11 チャンク 3 チャンク チョコパイ マカロン クッキー ▼焼き菓子レシピ 3チャンク プリン アイスバーガー ムース ▼アイス菓子レシピ 3チャンク ガトーショコラ チョコブラウニー ティラミス ミルクレープ ▼ケーキレシピ 4チャンク マジカルナンバー(5±2)
  11. 11. 使わないナビゲーションを減らす トップページ 製品情報 ニュース リリース 企業情報 株主投資家向け 情報 採用情報 製品 ジャンル 製品 ジャンル 製品 ジャンル 製品 ジャンル 製品 ジャンル 頻繁に利用される ローカルナビの移動 特定のディレクトリ間でしか 利用されないグローバルナビ 製品情報 トップページ 製品 ジャンル1 製品 ジャンル2 製品 ジャンル3 製品 ジャンル4 製品 ジャンル5 ニュース リリース 企業情報 株主投資 家情報 採用 情報 一部ユーザーが利用する カテゴリー移動ナビ 実際カテゴリー間を移動する 利用シーンは少ない 現実的なグローバルナビの 想定移動目的
  12. 12. ユーザー行動とナビゲーション ★目的の情報以外、能動的に他の情報は見ない ★画面の上だけにあるナビゲーションは使いにくい ★ローカルナビゲーションの役割が重要になるほど、 グローバルナビゲーションが不要になっていく ★ページ内でボタンが多数あっても、 その時、情報として不要なボタンは押されにくく 結果としてユーザーの混乱を招くだけになる ★もっともいい場所にあるナビゲーションを もっとも利用頻度の高いツールにして上げる事が ユーザーのわかりやすさに繋がる
  13. 13. 5. 男性と女性の意識の違い
  14. 14. 客観的 主観的 男性的な脳と女性的な脳では、根本的に考え方が違う 男性的な脳の考え方 女性的な脳の考え方 ♥ 自分を中心にして 捉える 主観的、 感情的に捉える 自分を俯瞰して みられる 論理的、 客観的に捉える
  15. 15. 女性を意識した表現の自動車メーカーWEBサイト 日産 デイズ トップページ
  16. 16. 女性を意識した表現の自動車メーカーWEBサイト 日産 デイズ トップページ
  17. 17. 6. 誰でも使えるわけではない検索機能
  18. 18. 記録に残らないアクセスを見極めて、潜在的なニーズ探る Webサイト ターゲットユーザー サイト利用者 サイトに辿り着いた ユーザー 検索でヒット しなかったユーザー 検索すら しない ユーザー 知りたい情報に 辿り着いたユーザー 内容がわからない ユーザー 知りたいことが 見つけられない ユーザー 表面的な利用方法に惑わされない
  19. 19. シンプルだからといって、すべての人が使えるわけではない。

×