Webクリエイターの為のデザイン行動学というセミナーに行ってきました

jillaさん主宰のセミナーに行ってきました。
「行動学」というところに興味があって申し込みました。

行動学とか心理学とか勉強したいな〜と思っていたので
行ってみました。

講師の方は北村崇さん
schooで一度授業を受けていて知っていました。

学んだことをアウトプットというこのブログのコンセプトですが、
アウトプットできてなかったので記録。

行動心理とは

調べてみました。

人間の行動を観察することにより、

人間の心理を研究していく学問です。

う〜んそうだったのか!!
なんとな〜くわかります。

ドランゴンボールなど漫画の話

こんな話がでました。
ドラゴンボールなどの漫画で
左向いてる時は、未来
右向いてる時は、過去

というのを聞いてへ〜と思ったのですが、
時間が経つと詳細を忘れてしまいますね・・

アウトプットを早くしようっていうのはこういうことなんですね。

あ、思い出しました。

人間は考えるとき、
未来・過去

右を向くとき、

未来・想像

左を向くと、

過去・経験

を考えているという話でのドランゴンボールの話でした。

そうなんですかね〜

デザインの理由をちゃんと説明しよう

クライアントにここ
「スペースあいてるからこれ入れてくれ」と言われることがあるとします。

そんな時、あえてスペースを空けてる場合があります。
ですが、そんなのクライアントにはわかりません。

「スペースあいてるからこれ入れてくれ」←こんなことを言われる前に、
説明しましょうという話。

「こういう流れでスペース取ってるんです」

説明してもわかってくれなかったら、
予算とか時間とかを考慮して考えましょうと言ってました。

なるほどな〜と思いましたが、
ちょっとの修正で直せる場合はどうなんでしょ・・

かなりの「理由」がないかぎりは折れたほうがいいのか、、

正当な理由があればわかってくれるはず!

デザインは「人の心を読む」

安心感

人の形でも大人・子供・赤ちゃんだと赤ちゃんのほうが安心感がある。

人間は本能に忠実

顔・性・食べ物・動き・危険

病院のサイトはあまり写真は使わないほうがいい・・・「自閉症の人」
人の目が気になってしまうから

ペットボトルの形も人の形、例えば
ボディラインに近づけると売れるとか。

飲食店のメニューに写真が載っているメニューのほうが売れる。

メニューに「サクサク」「さっくさく」などの擬音のあるメニューは売れるらしい。

「できそう」と思わせる(意味と機能の調和)

ユーザーに
押せそう、回せそうと思わせる。

最近のトレンド、マテリアルデザイン = シンプルの中に「質感」を入れる

PCでもタップを想定して。

さて問題です。

バス
このバスはどちらに進むでしょうか。

「見た目」と「機能」を考えればわかります。

答えは・・・

扉がこちらがわにないから、
右へ進むです。

万人向け(アクセシビリティー)

ECサイトの検索で、
例えば色で探す時があります。

color検索

いかがですか?
ちょっとどの色なのか迷ってしまいますよね。
色盲の方は色が違って見えるので適切ではありません。

こちらだとどうでしょうか。

color検索2

さっきよりわかりやすくなったと思います。
テキストを入れたほうがアクセシビリティ的にもいいですね。

コーディングはどこからしてる?

コーディングの話がありました。
体の不自由な人はTabだけで操作しているという話を聞いて、
コーディングの順番がめちゃくちゃだと
目的の場所(ボタンや、リンク)にたどりつかないのです。

Yahooに行くとカーソルが既に検索窓に行きます。

yahooヘッダー
気にしてませんでしたが、気づくと
ちゃんと設定されてるんだなと思いますね。

さすがYahoo!

カーソルを検索バーから外し、
Tabを押すと、一番はじめにロゴに行きます。

これが本来の正しいコーディングの順番です。
ちゃんと上から順番に移動していきます。

コーディングする時そのへん意識したことなかったので、
これから気をつけようと思いました。

あとはお客様の意図がないデザインとか
こういうことを知っていれば、
アドバイスができるなと思いますね。

知識として頭の片隅にあるのと、
ないのではかなり違いますね。

画像認証は使わないほうがいい

よくアカウント作るときに画像の文字を
入力させるのがあると思います。

画像認証

こちらはGmailのアカウント登録の時に出る
画像認証です。

ちょ〜っと見にくいですね。
色盲の人は難しいとか言ってました。(確か)

なのでよほどの理由がない限りは
画像認証はやめたほうがいいでしの

人は飽きっぽい

【Webの良い所、良くない所】

  • 興味は惹かせられる
  • 集中力は落ちる

【紙の良い所、良くない所】

  • 手にとってみないと見てもらえない
  • 集中力が上がる

選択できる様にする

多くて10個まで。
それ以上だと多すぎて迷って、選べなくなって、
買ってくれなくなる。

ある程度のカテゴリーで絞る

フォームの選択のデフォルト値

ターゲットとしている年齢・性別などに
最初からデフォルト値として設定しておく。

Appleの戦略の話

AppleのPC購入ページを見たことがあるでしょうか?
Macbook Pro
Macbook Air

などのベースがあって、
そこに自分が欲しいパーツなどのオプションを足していける。

自分仕様のPCができて満足感が上がる。

商品を増やしすぎてもよくない。
なるべく減らす方向へ。

デザインは「人の為」

ストレスを減らす。
気持よく使ってもらう。

まとめ

デザインは =「人の為」これが、
まとめですねw

人のために考えて、
使いやすいデザインを心がけようという行動心理学の話でした!

ad