SlideShare a Scribd company logo
Submit Search
Upload
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
Report
Share
Sanae Yamashita
Follow
•
4 likes
•
3,208 views
1
of
24
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
•
4 likes
•
3,208 views
Report
Share
Download Now
Download to read offline
Science
『UIデザインの心理学』5章 周辺視野 の紹介です。
Read more
Sanae Yamashita
Follow
Recommended
インタフェースデザインの心理学 まとめ by
インタフェースデザインの心理学 まとめ
akihiro_0228
55.8K views
•
141 slides
gitを使う準備をしよう - 初級編 by
gitを使う準備をしよう - 初級編
Sanae Yamashita
1.3K views
•
37 slides
2分木の演習問題[アルゴリズムとデータ構造] by
2分木の演習問題[アルゴリズムとデータ構造]
Hagihara Ryosuke
1.9K views
•
75 slides
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~ by
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
Sanae Yamashita
571 views
•
28 slides
高専の今 by
高専の今
Hagihara Ryosuke
2.9K views
•
48 slides
津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ー by
津山市オープンデータの活用 ー「津山市財政見守り隊」の作成と津山市オープンデータの課題と展望ー
Hagihara Ryosuke
2.4K views
•
55 slides
More Related Content
More from Sanae Yamashita
vivliostyle.orgではじめるCSS組版チュートリアル by
vivliostyle.orgではじめるCSS組版チュートリアル
Sanae Yamashita
368 views
•
20 slides
Vivliostyle Theme 開発ガイドラインの公開 by
Vivliostyle Theme 開発ガイドラインの公開
Sanae Yamashita
558 views
•
24 slides
Vivliostyle Themes のハンズオン by
Vivliostyle Themes のハンズオン
Sanae Yamashita
699 views
•
28 slides
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle by
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
Sanae Yamashita
1.6K views
•
16 slides
CSS組版やってみた! #Vivliostyle by
CSS組版やってみた! #Vivliostyle
Sanae Yamashita
784 views
•
17 slides
読解・QRコード(かんたんなやつ) #nitaclt by
読解・QRコード(かんたんなやつ) #nitaclt
Sanae Yamashita
448 views
•
37 slides
More from Sanae Yamashita
(20)
vivliostyle.orgではじめるCSS組版チュートリアル by Sanae Yamashita
vivliostyle.orgではじめるCSS組版チュートリアル
Sanae Yamashita
•
368 views
Vivliostyle Theme 開発ガイドラインの公開 by Sanae Yamashita
Vivliostyle Theme 開発ガイドラインの公開
Sanae Yamashita
•
558 views
Vivliostyle Themes のハンズオン by Sanae Yamashita
Vivliostyle Themes のハンズオン
Sanae Yamashita
•
699 views
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle by Sanae Yamashita
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
Sanae Yamashita
•
1.6K views
CSS組版やってみた! #Vivliostyle by Sanae Yamashita
CSS組版やってみた! #Vivliostyle
Sanae Yamashita
•
784 views
読解・QRコード(かんたんなやつ) #nitaclt by Sanae Yamashita
読解・QRコード(かんたんなやつ) #nitaclt
Sanae Yamashita
•
448 views
きみはPNGの仕様書を読んだか? by Sanae Yamashita
きみはPNGの仕様書を読んだか?
Sanae Yamashita
•
967 views
UIデザインの心理学 by Sanae Yamashita
UIデザインの心理学
Sanae Yamashita
•
2.5K views
軍歌でわかるドイツ語(わからない) by Sanae Yamashita
軍歌でわかるドイツ語(わからない)
Sanae Yamashita
•
563 views
この夏、絶対モテるフォント選びのコツ #nitaclt by Sanae Yamashita
この夏、絶対モテるフォント選びのコツ #nitaclt
Sanae Yamashita
•
561 views
Hello world! にときめかなかった僕が情報系を名乗るまで by Sanae Yamashita
Hello world! にときめかなかった僕が情報系を名乗るまで
Sanae Yamashita
•
369 views
Are you a Designer or an Engineer? by Sanae Yamashita
Are you a Designer or an Engineer?
Sanae Yamashita
•
4.9K views
Me and GitHub by Sanae Yamashita
Me and GitHub
Sanae Yamashita
•
756 views
CSSをさわってみよう by Sanae Yamashita
CSSをさわってみよう
Sanae Yamashita
•
2.4K views
HTMLをさわってみよう by Sanae Yamashita
HTMLをさわってみよう
Sanae Yamashita
•
1.7K views
gitを使う準備をしよう - 中級編 by Sanae Yamashita
gitを使う準備をしよう - 中級編
Sanae Yamashita
•
1.3K views
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう by Sanae Yamashita
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
Sanae Yamashita
•
1.6K views
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい by Sanae Yamashita
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Sanae Yamashita
•
3.6K views
git-followup @明石高専2E by Sanae Yamashita
git-followup @明石高専2E
Sanae Yamashita
•
567 views
Markdownがアツい by Sanae Yamashita
Markdownがアツい
Sanae Yamashita
•
1.2K views
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
1.
中心窩と周辺視野の空間分解能の違い
2.
網膜 角膜 黄斑・中心窩 人間の視野の空間分解能は「中心窩」が最も高い
3.
中心窩は「画素密度」が高い 光を感じ取る錐体細胞が片目だけでも 600 万〜700
万個 中心窩 周縁部 個 /mm2 個 /mm2 9000 158000
4.
周辺視野からのデータは「圧縮・損失」される 中心窩 周辺視野 ? 0110100... ! ...
5.
データ処理能力にも大差 面積 網膜 % %中心窩 99 1 網膜 % %中心窩 50 50 視覚野での処理
6.
人間の周辺視力は 0.1 程度 左右の目が絶えず素早く(約
3 回 /s)動き、 中心窩を周囲の物に選択的に向けて焦点を合わせている 視野の端より中央のほうが色の識別能力も高い
7.
脳は周囲の映像を高画質で保持する必要がない 脳が既知の情報と予測内容に基づき大雑把に補完 サッカード抑制で生じる知覚の隙間も脳が埋める 眼球が急速な運動を行う際、網膜から入力される刺激が遮断されるという、 視覚イメージのブレを防ぐための現象 ABCDEFGHIJKLMN...
8.
UI の例
9.
中心窩が向けられるのは直径 1〜2cm の範囲内
10.
似た色の要素は変化があっても気づきにくい 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.
11.
メッセージの可視性を高める手法
12.
メッセージはユーザーが見ている付近に表示する Mami TOMOE mami@ SUBMIT name email Mami TOMOE mami@ SUBMIT name email Email
is invalid.
13.
エラーは明示する Mami TOMOE mami@ SUBMIT name email Mami TOMOE mami@ SUBMIT name email Error:
Email is invalid.
14.
エラーマークを使う Mami TOMOE mami@ SUBMIT name email Mami TOMOE mami@ SUBMIT name email Email
is invalid.
15.
赤はエラーメッセージ専用に 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.
16.
エラーメッセージを入力ミスの直後に表示させる Mami TOMOE mami@ SUBMIT name email まだ入力フォームのその部分を直視している間にエラーメッセージを表示 Email is
invalid.
17.
目を引くためのさらに強力な手法
18.
ダイアログボックスを使う CANCEL Really? OK 些細な内容だとユーザーが不快に感じるおそれがある
19.
ビープ音などのサウンドを使う Mami TOMOE mami@ SUBMIT name email Email is
invalid.
20.
揺れや点滅などのエフェクトを瞬間的に使う Mami TOMOE mami@ SUBMIT name Open new
file Cut Copy email Email is invalid. ただし、使用時間を極短く(1/4〜1/2 s 以下に)。使い過ぎると「習慣化」し、脳が注意を払わなくなっていく Open new file Copy Cut
21.
視覚探索は直線上
22.
XBOCFWZGIPQYJM LRNSDETHUAKV 特定の文字を検出するまでの反応時間は、ほぼ線形 比例的
23.
XBOCFWZGIPQYJM LRNSDETHUAKV 太字になっている目標刺激の探索は非線形
24.
際立った特徴は、周辺視野で「浮き出て見える」 熱電対について 熱起電力の発生の原理 時定数は記号 τ 金属棒(または金属線)A の両端
P, Q に温度差を与えると、金属内の自由電子は熱拡散により平均的に高温側 から低温側に移動する。そのため、相対的に電子が減少する高温側が正電位、電子が増加する低温側が負電位と なる。この電位差(電圧)は熱起電力と呼ばれる。 熱電対温度計に用いられる金属としては、クロメル - アルメル、銅 - コンスタンタン、白金 - 白金ロジウムな どのほか、種々の金属の組み合わせがあり、測定温度範囲に適したものが用いられる。 ▶ タイトル ▶ 見出し ▶ 太字 ▶ 字下げ 1. まみ 2. まどか 3. なぎさ ・まほ ・みほ ・しほ ▶ 列挙 ▶ 太字