2005-11-21 00:24:52

「使いやすいホームページ;50企業」ジェイコブ・ニールセン(2002年)

テーマ:心理学 (ウェブ、表記)
ウェブ・デザインのお勧めの本。
Jakob Nielsen, Marie Tahir (こちらは英語版。2002年)
Homepage Usability: 50 Websites Deconstructed
(日本語版)
ヤコブ ニールセン, Jakob Nielsen, Malie Tahir, 風工舎
ホームページ・ユーザビリティ ~顧客をつかむ勝ち組サイト32の決定的法則

この本はウェブ・デザインの世界ではかなり有名。


ウェブ・デザインは心理学でもとても大きな分野になってきている。それも当然で、ウェブを訪れた人が何を最初に見て何を理解するかというのは思いっきり認知心理学ヤ知覚心理学の分野だ。それに何を感じるか、などは社会心理学や性格心理学も大きく関わってくる。そんな学術的な話は全くこの本には出てこないけれど、でもこの本は実際にウェブをどうすれば見やすくできるかということに集中して書かれているのでとても使い勝手がよい。


まず本の冒頭には100ほどのガイドラインが載っている。この大原則に従ってウェブを改良すれば確実にウェブは見やすくなる。

例えば原則その1.会社のロゴや名前をはっきりと示せ。

あっ、ちなみにこの本は会社のホームページを見やすくするのが目的なんで、個人向けやブログでは違う場面があるかも。


この本の次の章は推薦事項。例えばダウンロードの時間はとても重要な要素なので一般回線で10秒以内、50キロバイト以内が良い。などが書かれている。繰り返すけどこれは(大)企業のホームページ向け。大抵のブログは存在を認知されていないので、検索エンジンに引っ掛かりやすいように一ページが重くなってでも関連する単語を詰め込む方が僕は良いと思っている。ま、単語は重さにはほとんど影響を与えないかもしれないけれど。


この本のメインの内容は大企業の実際のホームページなどの分析だ。例えばアマゾン(amazon.com)。

amazoncom

この本によると、アマゾンのホームページの評価はとても高い。それでも細かい点でいくつも改良できる点はある、というかあった。この本で指摘されている点(2002年時)を今見てみると、ほとんどが改良されている(2005年)。例えば上図の①の「ユアー・アカウント」はここだけ違う字体になっていた。それは意味が無いよ、という指摘だったんだけれど直っている。②の「カート」は昔は「カート見る(view cart)」で、言葉の改良が必要だと指摘されていた。それも、まぁ、改善されている。③の「ヘルプ」が右上にあるのはとても良い、と評価されている。まぁ、そんなことがこの本ではこのホームページについて27箇所の指摘を挙げていて、計50ほどの企業のホームページの分析が行われている。


企業のホームページをデザインする人にはかなりお勧めの本です。


----------------------------

検索キーワード:jakob Nielsen,ヤコブ・ニールセン、ジェーコブ・ニールセン、ジェイコブ・ニールセン

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-11-15 00:01:52

「人間と機械の情報交換ハンドブック」ジュリー・ジャコー(2003年)

テーマ:心理学 (ウェブ、表記)
インターフェース・デザインの本の紹介。
Julie A. Jacko, Andrew Sears (英語版のみ。2003年)
The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications (Human Factors and Ergonomics)

人と機械の情報交換をするデザイン、つまりインターフェースの本でとても有名な本。今年いくつかの学会に出たけれど、インターフェースやウェブの話になると頻出する本。あまりに有名なんで借りてみたけれど確かにこれはすごいね。分厚い本(1277ページ)で、この分野の最新動向を網羅。64の章を執筆しているのはそれぞれの分野の第一人者。例えば人間の情報処理の章ではあのロバート・プロクター博士(Robert W. Proctor)!老人のためのデザインの章ではサラ・サジャ(Sara J. Czaja)、ユーザビリティー・ライフ・サイクルの章ではデボラ・メイヒュー(Deborah J. Mayhew)などとそうそうたる顔ぶれが執筆者として名を連ねている。


ま、内容もそれなりに難しいんで、この分野の予備知識なしで読むにはきついかも。ウェブ・デザインの専門家などが論文を書く時に参考にするのに最適。

AD
いいね!した人  |  コメント(1)  |  リブログ(0)
2005-10-18 00:45:21

見やすい色の組み合わせ

テーマ:心理学 (ウェブ、表記)

color of print and background1

見やすい色の組み合わせというのがある。この研究者は11の組み合わせについて、読みやすさ、読者の好みなどを調査した。結果、白い背景に黒い文字が一番良い組み合わせだった。


上の図がその結果だ。上から順番に総合ランキングが高い組み合わせ。総合ランキングは読む速度や読者の好みを考慮して付けられた。1番目の白地に黒文字が読む速度が一番速く、最も好まれた。11番目の緑の背景に赤い文字が読む速度が遅く、最も嫌われた。

右の列に記したパーセントは読む速度。白地に黒文字が最も速く、これを100%とした場合、上位9位までは読む速度の違いが20%減くらいなので、まぁ受け入れられる速度だが、10位と11位の組み合わせは読む速度が半分くらいに落ちている。この組み合わせは読者に嫌われる組み合わせでもあるので避けたい。


ちなみにこれは40年前の印刷物での研究結果。現在の研究では、色よりも濃淡の違いの方が、読む速度に影響するといわれている。それに緑色といっても色の幅は大きいし、印刷の状況にもよるし、文字の大きさも関わってくるので一概には言えない。

もちろん、最近はコンピューターの画面上での色の研究もされている。この辺はそのうちに紹介します。


仕事募集: こういった心理学の研究を元に、ウェブのデザインや印刷物のデザインのアルバイトをしています。仕事のご依頼はメール(アドレスは左欄)にてお願いします。

-----------------------

元の本:

Tinker, M. (1963). Legibility of Print. Ames: Iowa State University Press.

Tinker, M. (1965)Bases of Effective Reading.


検索キーワード:心理学、デザイン心理学、ウェブ心理学、ソフトウェア心理学、認知心理学、色彩心理、読みやすさ、ユーザビィティ

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-10-15 00:08:47

読みやすさを測るための心理学の試験項目:視力

テーマ:心理学 (ウェブ、表記)

eyedominance

今日の自分用メモ。


ウェブや印刷物が見やすいかを計測する前に被験者の能力を知る試験。主に視覚に関する能力の試験。


1.視力の試験。(vision screening)

2.交錯視界の試験。(skeffington string test, overconvergence, esophoria, underconvergence, exophoria, vertical imbalance, hyperphoria)

3.物体追跡の試験。(Pursuits test)

4.両眼視の試験。(binocular test)

5.点から点への深視力試験。(point-to-point test)

6.利き目の選出。(Cover test, eye dominance test)

7.極近距離の視力。(near acuity, pencil test)


文章が理解されたかの試験として

単語埋めの読解力試験。(クローズ試験、cloze procedure)


上の試験は全て下記の本から。でも、ウェブなどの見易さを測るのに利き目の選出とかは大きな影響は無いと思うけどね。それよりも過去記事 で書いたとおり、背景色と文字の濃淡とかを認識できるかの試験(コントラスト感度の試験)などの方が大事だろう。


関連ウェブ:2005年 ウェブ・デザインの間違いトップ10

ここの一番目の項目にコントラストの問題が挙げられている。

Charles H. Hargis (1999年。英語版のみ)
Teaching and Testing in Reading: A Practical Guide for Teachers and Parents

-----------------------

検索キーワード:心理学、認知心理学、ウェブ心理学、ソフトウェア心理学、ユーザビリティー、使いやすさ、ジェイコブ・ニールセン、ヤコブ・ニールセン、Jakob Nielsen博士、識字障害、dyslexia, 失読症、難読症、

いいね!した人  |  コメント(0)  |  リブログ(0)
2005-10-13 08:43:38

「ウェブ・デザインの黄金則」(デボラ・メイヒュー)

テーマ:心理学 (ウェブ、表記)

本の紹介。

ウェブサイトのデザインをする時に気を付ける点などの原則とガイドライン。

Deborah J. Mayhew (1992年。英語版のみ)
Principles and Guidelines in Software User Interface Design

mayhew

この本で説明されている主な原則。


1.ユーザーのことを知れ。(User compatibility)

2.ユーザーの親しんでる操作で動くようにしろ。(Product compatibility)

3.製品内で一貫した作業ができるようにしろ。(within-product consistency)

4.簡潔にしろ。(simplicity)

など、100点以上の原則を挙げている。


ウェブやソフトウェアのデザインをする時に頼りになる本。デザイン界の大物であるジェイコブ・ニールセンやドナルド・ノーマンが論文でよく引用している本。絵やダイアグラムが多用してあって理解しやすい本。


デザインの原則って言葉にしにくいのにこの本はよくまとめているよな。デザインとかアートとかって経験則で作っていくからそれを文字に書き表そうと思ってもうまく言葉にできないんだよね。その点でこの本はすごいと思うよ。


--------------------

検索キーワード:心理学、デザイン心理学、ソフトウェア心理学、ウェブ心理学、mantra, know thy user, know the user, know your user,

いいね!した人  |  コメント(0)  |  リブログ(0)
2005-05-07 23:37:08

25%脂肪と75%無脂肪

テーマ:心理学 (ウェブ、表記)

fat-free-milk 同じ意味の言葉でも表現の仕方で人の受け止め方は大きく変わる。商品の宣伝では消費者により受け入れられる表現を使って、商品を良いイメージとして受け止められようとしている。これはそんなことに関わる論文。

この研究者は、ある食品を説明するのに同じことを意味する2つの表記の受け取られ方の違いを調べた。Aは25%脂肪と表記し、Bは75%無脂肪と表記した。両方とも同じ意味のはずなのだが、消費者(この場合は被験者)の感じ方は違った。Bの75%無脂肪の方がより健康的だと感じたのだ。この食べ物がどのくらい健康的かを48人の被験者に聞いたところ、Aの25%脂肪という表記の場合、感受健康指数(0から1.0の評価)はたったの0.36だった。Bの75%無脂肪ではぐんと上がって感受健康指数は0.64だった。

このことから脂肪などの否定的に受け止められやすいものに関しては「無い」という表現で打ち消す方が効果的なことが予想される。

同じことを5%脂肪と95%無脂肪で比べたが、同様の結果が出た。感受健康指数は5%脂肪の表記では0.89だったが、95%無脂肪では更に上がり0.97だった。この研究者はこの結果を裏付けるために別の方法で同じ内容を実験した:つまり健康を意味する言葉と不健康を意味する言葉とそれぞれの条件(25%脂肪、75%無脂肪など)がどのくらい関連しているかを反応時間の実験で調べた。こちらの実験でも同様の結果が出た。同じ内容を意味するものでも、脂肪と書かれている物は不健康な言葉との関連付けが速く、無脂肪とかかれているものは健康的な言葉との関連付けが速かった。

ふーん、面白い実験だな。でもこれって結局、消費者は欺かれるだけだよな、表記方法に。こんな実験がアメリカ人を肥満にさせていくんだろうか、なんてことをふと考えてしまったよ。

元の論文:Anthony J. Sanford, Nicolas Fay, Andrew Stewart, and Linda Moxey (University of Glasgow, Scotland) Perspective in statements of quantity, with implications for consumer psychology. Psychological Science. Vol. 13 (2). March 2002.

いいね!した人  |  コメント(5)  |  リブログ(0)
2005-04-04 11:10:21

しゃ○ってはいけない-処理の深度

テーマ:心理学 (ウェブ、表記)

cant 我ながら上記のタイトルはかなり無理のある翻訳だな。僕がタイトルにしたかったのは「You c_nt say that」という言葉(左の画像を参照)。これはある新聞の見出しだったんだけど最高にうまい見出しだと思う。 心理学的に見て、この見出しは処理の深度が深いので読者に考えさせるし、記憶にも残る。ただしこの見出しは世に出ることは無かったらしい。

「You c_nt say that」を英語の分かる人が読めばこれが意味する2つの言葉と全体としての意味は明らかだ。c_ntの伏字がポイントだ。第一の言葉はcan't。つまり「あなたは言ってはいけない」。第二の言葉はcunt(カント)だ。これはアメリカでは放送禁止用語。なので文全体の意味としては、放送禁止用語のカントという言葉は言ってはいけない、と取れる。

アメリカでは7つの放送禁止用語がある。Fワード、Cワード、Sワードの3つが最も有名で上に示しているカントというのはそのうちの一つだ。アメリカではこれらの放送禁止用語はよく議論の対象になる:禁止にしておくべきか?なぜ7つの言葉が対象なのか?卑猥な意味を含まない使われ方なら放送で使っても良いのか?など。そんな現状を受けてこの新聞紙の見出しは良く考えられている。

この見出しが心理学的に良い点として、刺激的な言葉を暗示させているので人目を惹きやすいというのもあるが、今日は処理の深度というのに集中して話そうと思う。

処理の深度というのは人の記憶を説明する心理学の理論だ。単語を読むときに単に繰り返しその単語を唱えるよりも、その単語と意味的な関連があることを考えた方が後でその単語をより覚えている、という実験結果から来ている。似た実験で伏字を埋める作業というのも記憶の保持を手伝うというのもある。どちらの実験結果にしても、言葉を処理する時に浅い処理(読み流す)より深い処理(より考える)を促す文や単語の方が記憶により残るということだ。

処理の深度という理論は広告や商品名なんかにも使われている。ただこれがいつも成功するとは限らない。僕のブログの名前は「しんりの手」で、敢えて平仮名にしている。願わくば、なぜ平仮名なのかと処理の深い読みをして記憶に留められると良いと姑息に考えていた。だけど平仮名を使ったためにタイトルだけを見ると心理学系のブログなのかが分からなくなってしまったよ。僕の中では「Psych note」という副題で心理学だと伝わると考えてたんだけれど、psych(心理という意味)は一般の人にはあまり馴染みが無い単語だったようだな。今日の教訓:なので心理学の実験を応用するときは他人の意見も聞いてみましょう。

処理の深度について:クレイクとロックハート(1972) Levels of processing : a framework for memory research.

画像元:Design Journal No.93. Winter 2004.

見出しの新聞:Chicago Tribune. October 2004.

検索キーワード: 心理学 認知心理学 記憶 再生 再認 処理の深度 

いいね!した人  |  コメント(0)  |  リブログ(0)
2005-04-01 18:44:56

新しいアメブロのデザイン

テーマ:心理学 (ウェブ、表記)

ameblo アメブロの述べ3日に渡る大リニューアルがやっと終わった。僕も大学院の方が忙しく記事を書く時間が無かったのでリニューアル工事は無縁のことだったけど、デザインまで一新されたのにはちょっと驚いたよ。良い機会なんでデザイン論の概略なんかを語っちゃおうかな。

まず、広告スペースを左上に持ってきたね。アメブロもどっかで知識を仕入れてきたな。左上というのは一番目立つ位置だ。というのは日本語や英語の読者は視線を左上から右下に移す傾向がある。いままでは広告スペースが右上だったんで、視線からは漏れていた。広告の内容が変わろうが誰も気付かず、読者にとっては人畜無害状態だった。広告主としては痛かっただろうけれど。でも今回、アメブロの運営会社は一番良い位置を広告主に献上したよ。僕にとっては邪魔だけど。近日中に変えさせてもらうよ。

次に自己紹介の画像が下の方に行ってしまったのが嫌だ。ブログを訪れた時に最初に確認するのが、そのブログが目的のブログかということだ。自己紹介の画像が最初に視界に入ることによって、ああここは「しんりの手」だ、と分かる。画像の力は強いので、プログ・タイトルの表示よりもまずは、僕のブログ固有の画像を見せたい。できれば一番上の青背景のところに自己紹介画像を入れられれば問題は全て解決するのにな。

あとは段組みが縦に3つに分かれているけれど、そのコラム割りが浮き出ていない。広告スペース以外には縦の線が使われていないので、縦の列の分化がわかりにくい。脇の列の文字を小さくしていることにより、真ん中の列を浮き立たせようとしているらしいけれど、僕は小さい文字を使うのには反対。囲い線や縦線を使って欲しいところだ。

それとは対照的に広告スペースだけが線で囲まれて目立っている。この辺にもアメブロの広告主一番主義が出ているな。その主義は良いけれど、それと同時にブログの読みやすさも追求してくれ。ブログの読者あっての広告効果なんだから。

そんな訳で近々より読みやすいデザインを模索する予定。アメブロの運営者は広告主と同様にブログの読者や作者も大事にして欲しいところだよ。

関連記事:しんりの手:グーグル検索結果で無視される広告(2005年7月30日):


検索キーワード: 心理学 認知心理学 デザイン心理 ウェブ・デザイン

いいね!した人  |  コメント(2)  |  リブログ(0)
2005-03-14 08:24:29

視神経的に見やすいブログ1:明暗感度

テーマ:心理学 (ウェブ、表記)

薄い色の文字は読みにくい。背景色に比べて文字が見にくいブログなどは僕は速攻で読むのを諦める。基本的に良いのは白地の背景に黒の文字。

左図は人間が読める文字を2つの観点から表にしたもの。2つの観点とは文字の大きさと明暗度。青い線より下側が見える文字で、青い線より上は見えない文字。ウェブなどの文字の大きさに関係するのは青い線の右側半分くらいに相当する。左側半分はややこしいので無視しよう。これは人によって変わるけれど平均値がこのくらい。それと文字の大きさや色などは厳密にこの図の通りではなく、これは概念を伝える図式ということも断っておこう。

これによると明暗のはっきりしない文字というのは小さい文字と同等に読みにくい。つまり明暗のはっきりしない文字を認識させるためにはある程度文字を大きくする必要がある。

ブロガーの皆さん、文字と背景色は明暗をハッキリさせるとよりたくさんの人が読める環境になりますよ。あ、アメブロに文字の明暗を選べるように提案しておこう。

----------------
仕事募集:
ウェブや印刷物などを読者が読みやすい環境にするのを手伝います。視神経や心理学のデータに裏付けされたアドバイスができます。
----------------
関連する記事

老人向けには大きな文字を。 (しんりの手)



図の引用元:
http://www.bsrs2000.fsnet.co.uk/new_page_13.htm

検索キーワード: 心理 心理学 認知心理 知覚 視覚 コントラスト感度 contrast sensitivity spatial frequency 色弱 空間周波数 老化 若者 一般 

いいね!した人  |  コメント(7)  |  リブログ(0)

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。