『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -

中心窩と周辺視野の空間分解能の違い
網膜
角膜
黄斑・中心窩
人間の視野の空間分解能は「中心窩」が最も高い
中心窩は「画素密度」が高い
光を感じ取る錐体細胞が片目だけでも 600 万〜700 万個
中心窩
周縁部 個 /mm2
個 /mm2
9000
158000
周辺視野からのデータは「圧縮・損失」される
中心窩
周辺視野 ?
0110100...
!
...
データ処理能力にも大差
面積
網膜 %
%中心窩
99
1
網膜 %
%中心窩
50
50
視覚野での処理
人間の周辺視力は 0.1 程度
左右の目が絶えず素早く(約 3 回 /s)動き、
中心窩を周囲の物に選択的に向けて焦点を合わせている
視野の端より中央のほうが色の識別能力も高い
脳は周囲の映像を高画質で保持する必要がない
脳が既知の情報と予測内容に基づき大雑把に補完
サッカード抑制で生じる知覚の隙間も脳が埋める
眼球が急速な運動を行う際、網膜から入力される刺激が遮断されるという、
視覚イメージのブレを防ぐための現象
ABCDEFGHIJKLMN...
UI の例
中心窩が向けられるのは直径 1〜2cm の範囲内
似た色の要素は変化があっても気づきにくい
Mami TOMOE
mami@ mami@
SUBMIT
name
email
Please read user policy
before you click SUBMIT
button.
Mami TOMOE
SUBMIT
name
email
Please read user policy
before you click SUBMIT
button.
Email is invalid.
メッセージの可視性を高める手法
メッセージはユーザーが見ている付近に表示する
Mami TOMOE
mami@
SUBMIT
name
email
Mami TOMOE
mami@
SUBMIT
name
email
Email is invalid.
エラーは明示する
Mami TOMOE
mami@
SUBMIT
name
email
Mami TOMOE
mami@
SUBMIT
name
email
Error: Email is invalid.
エラーマークを使う
Mami TOMOE
mami@
SUBMIT
name
email
Mami TOMOE
mami@
SUBMIT
name
email
Email is invalid.
赤はエラーメッセージ専用に
Mami TOMOE
mami@
SUBMIT
name
email
Mami TOMOE
mami@
SUBMIT
name
email
Email is invalid.
どうしても赤をデザインに使いたいときはエラーに別の色を使い、さらにエラーマークもつける
Please read user policy
before you click SUBMIT
button.
Please read user policy
before you click SUBMIT
button.
エラーメッセージを入力ミスの直後に表示させる
Mami TOMOE
mami@
SUBMIT
name
email
まだ入力フォームのその部分を直視している間にエラーメッセージを表示
Email is invalid.
目を引くためのさらに強力な手法
ダイアログボックスを使う
CANCEL
Really?
OK
些細な内容だとユーザーが不快に感じるおそれがある
ビープ音などのサウンドを使う
Mami TOMOE
mami@
SUBMIT
name
email
Email is invalid. 
揺れや点滅などのエフェクトを瞬間的に使う
Mami TOMOE
mami@
SUBMIT
name
Open new file
Cut
Copy
email
Email is invalid.
ただし、使用時間を極短く(1/4〜1/2 s 以下に)。使い過ぎると「習慣化」し、脳が注意を払わなくなっていく
Open new file
Copy
Cut
視覚探索は直線上
XBOCFWZGIPQYJM
LRNSDETHUAKV
特定の文字を検出するまでの反応時間は、ほぼ線形
比例的
XBOCFWZGIPQYJM
LRNSDETHUAKV
太字になっている目標刺激の探索は非線形
際立った特徴は、周辺視野で「浮き出て見える」
熱電対について
熱起電力の発生の原理
時定数は記号 τ
 金属棒(または金属線)A の両端 P, Q に温度差を与えると、金属内の自由電子は熱拡散により平均的に高温側
から低温側に移動する。そのため、相対的に電子が減少する高温側が正電位、電子が増加する低温側が負電位と
なる。この電位差(電圧)は熱起電力と呼ばれる。
 熱電対温度計に用いられる金属としては、クロメル - アルメル、銅 - コンスタンタン、白金 - 白金ロジウムな
どのほか、種々の金属の組み合わせがあり、測定温度範囲に適したものが用いられる。
▶ タイトル
▶ 見出し
▶ 太字
▶ 字下げ
1. まみ
2. まどか
3. なぎさ
・まほ
・みほ
・しほ
▶ 列挙
▶ 太字
1 of 24

Recommended

インタフェースデザインの心理学 まとめ by
インタフェースデザインの心理学 まとめインタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめakihiro_0228
55.8K views141 slides
gitを使う準備をしよう - 初級編 by
gitを使う準備をしよう - 初級編gitを使う準備をしよう - 初級編
gitを使う準備をしよう - 初級編Sanae Yamashita
1.3K views37 slides
2分木の演習問題[アルゴリズムとデータ構造] by
2分木の演習問題[アルゴリズムとデータ構造]2分木の演習問題[アルゴリズムとデータ構造]
2分木の演習問題[アルゴリズムとデータ構造]Hagihara Ryosuke
1.9K views75 slides
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~ by
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~Sanae Yamashita
571 views28 slides
高専の今 by
高専の今高専の今
高専の今Hagihara Ryosuke
2.9K views48 slides
津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ー by
津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ー津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ー
津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ーHagihara Ryosuke
2.4K views55 slides

More Related Content

More from Sanae Yamashita

vivliostyle.orgではじめるCSS組版チュートリアル by
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルSanae Yamashita
368 views20 slides
Vivliostyle Theme 開発ガイドラインの公開 by
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Sanae Yamashita
558 views24 slides
Vivliostyle Themes のハンズオン by
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンSanae Yamashita
699 views28 slides
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle by
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleSanae Yamashita
1.6K views16 slides
CSS組版やってみた! #Vivliostyle by
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleSanae Yamashita
784 views17 slides
読解・QRコード(かんたんなやつ) #nitaclt by
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitacltSanae Yamashita
448 views37 slides

More from Sanae Yamashita(20)

vivliostyle.orgではじめるCSS組版チュートリアル by Sanae Yamashita
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアル
Sanae Yamashita368 views
Vivliostyle Theme 開発ガイドラインの公開 by Sanae Yamashita
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
Sanae Yamashita558 views
Vivliostyle Themes のハンズオン by Sanae Yamashita
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオン
Sanae Yamashita699 views
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle by Sanae Yamashita
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
Sanae Yamashita1.6K views
CSS組版やってみた! #Vivliostyle by Sanae Yamashita
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #Vivliostyle
Sanae Yamashita784 views
読解・QRコード(かんたんなやつ) #nitaclt by Sanae Yamashita
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt
Sanae Yamashita448 views
きみはPNGの仕様書を読んだか? by Sanae Yamashita
きみはPNGの仕様書を読んだか?きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?
Sanae Yamashita967 views
軍歌でわかるドイツ語(わからない) by Sanae Yamashita
軍歌でわかるドイツ語(わからない)軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)
Sanae Yamashita563 views
この夏、絶対モテるフォント選びのコツ #nitaclt by Sanae Yamashita
この夏、絶対モテるフォント選びのコツ #nitacltこの夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitaclt
Sanae Yamashita561 views
Hello world! にときめかなかった僕が情報系を名乗るまで by Sanae Yamashita
Hello world! にときめかなかった僕が情報系を名乗るまでHello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまで
Sanae Yamashita369 views
Are you a Designer or an Engineer? by Sanae Yamashita
Are you a Designer or an Engineer?Are you a Designer or an Engineer?
Are you a Designer or an Engineer?
Sanae Yamashita4.9K views
gitを使う準備をしよう - 中級編 by Sanae Yamashita
gitを使う準備をしよう - 中級編gitを使う準備をしよう - 中級編
gitを使う準備をしよう - 中級編
Sanae Yamashita1.3K views
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう by Sanae Yamashita
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
Sanae Yamashita1.6K views
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい by Sanae Yamashita
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいRubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Sanae Yamashita3.6K views

『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -