ホームページ作成

UXデザインと心理学の関係性とは?【フィッツの法則②】

「ユーザー」がホームページで目的を達成させるために

「ユーザー」である利用者様と「お客様」「調和」を目指して頑張っている株式会社ノーラッドの代表をしている柳栄年です。


この度は私のブログをご覧いただきありがとうございます。

今回の内容もUX(ユーザーエクスペリエンス)と心理学との関係性について話していきます
ユーザーがサイト上で目的を達成させるためにに大きく関係してくる内容となっていますのでぜひ最後までご覧ください^^(短いので”秒”で終わります。)

目次

1:少しだけ私の紹介
2: フィッツの法則その 2: ガイドライン
3:参考書籍についての簡単な情報

【少しだけ私の紹介】

担当はコンテンツデザインです。
ユーザーにとって良いコンテンツとは何か?

『どの様なカタチでユーザーにクライアントの強みをコンテンツを通じて表現すればよいのか』

『どのようなカタチでユーザーに体験してもらえると目的達成につながりやすいのか?』を考えています。

その過程でUI/UXにたどり着きました。恥ずかしながらただいま猛勉強中です。

このブログでは当社が提供する主なサービスを、『ホームページ制作』から『ホームページ運営』に方向転換する過程で学んだ内容の中で、私が担当して力を入れて取り組んでいる中から選んでブログを書いています。

その内容とは

現代のホームページ作成時に搭載するコンテンツには欠かすことができないといわれている「UI(ユーザーインターフェース)・UX(ユーザーエクスペリエンス)」です。


私が書籍などで学んだUI・UXについてのことをこのブログで出来るだけ分かりやすくお伝えしていきますので、ぜひともご参考にしていただき、より良いホームページを制作していただければ幸いです。

(私はこのブログで皆さんにお話しすることで復習勉強にしています。頑張ります!!)


ここでお話する「UX・UI」については、「心理学との関係性」をテーマにお話ししていく予定にしていますのでぜひご覧ください!(何回か続きます)


今までに書いたUI・UXの記事が気になる方は下記のリンクからご覧ください✨

・サイト集客で今後ますます重要になるUXとUIとは?【その1】

・サイト集客で今後ますます重要になるUXとUIとは?【その2】

・ユーザーエクスペリエンス(UX)デザインと心理学との関係性とは?

・ユーザーエクスペリエンス(UX)デザインと心理学の関係性とは?vol.2【ヤコブの法則】

今回は フィッツの法則 ②: 使い勝手を向上させるために決められている様々なルール

前回のブログでは「ターゲットに至るまでの時間は、ターゲットの大きさと近さで決まる。」

について少し書きましたね。今回は次の章である「フィッツの法則:」続編について勉強したのでザックリ書きますね。


「参考書籍」についての紹介はこのあとしていますのでご是非ご確認ください

前回は著者が「ターゲットに至るまでの時間は、ターゲットの大きさと近さで決まる」
という事を話していたのでそれについてアウトプットしました。

各コンテンツのCVR(コンバージョン率:成果達成率改善に)に大きく貢献するお話でした。



この章では、「タッチターゲット(コンテンツ自体やその入口ボタン等)の相応しいカタチ」について説明しているようですね。

  参考書籍から引用
フィッツの法則には3つの重要な学びがある
 ①タッチターゲットは十分に大きくなければならない
 ②タッチターゲット同士に十分な間隔がひつようだ。
 ③タッチターゲットはインターフェース内でユーザーが簡単に到達できる場所に置かれていなければならない。

UXデザインの法則

タッチターゲットの相応しいカタチ

タッチターゲットのサイズや感覚、場所というのはホームページ作成する上では当たり前に考えて置かれていると思います。

ですが、その『考えて』の部分に『決められたルール』が存在するホームページ作成会社は多くないと思います。

弊社ではやっと『タッチターゲットを配置する場合のルールの第一弾』が完成して作成するホームページへ盛り込まれるようになりました。

弊社の作成ルールに関してはテキストにおいても同様に作成していますが、それはまた別のお話でお伝えします。


少し紹介しますね。

世界をリードしているガイドライン

話は戻りますが、この『決められたルール』ですがアップルやグーグル等も『ガイドライン』として策定されています。
少し紹介しますね。


アップル:ヒューマンインターフェースガイドライン
グーグル:マテリアルデザインガイドライン
マイクロソフト:マイクロソフトデザイン



この世界的に超有名な企業ももちろん独自の理論で様々なルール=ガイドラインを示しています。

これらのルールはまさに”一日にしてならず”で何年もかけて研究されてきたのだと思います。

それはバックデータの解析はもちろん、様々な工学の観点から莫大な時間や経済的なリソースを費やして決められたものだと思います。

その理論を各社公開しています。

たとえば

  参考書籍から引用
当たり前だと思うかもしれないが、タッチターゲットの大きさは死活問題だ。
ターゲットが小さすぎると、ユーザーがそれに到達するのに時間がかかりすぎてしまう。
タッチターゲットの推奨サイズは三者三様だが[表2-1]大きさが重要だと主張している点ではどれも変わらない。

表2-1 タッチターゲットの推奨サイズ
ヒューマンインターフェースガイドライン(Apple) サイズ:44×44pt
マテリアルデザインガイドライン(Google) サイズ48×48dp
ウェブコンテンツアクセシビリティガイドライン(WCAG) 44×44CSSpx
Nielsen Norman Group1×1㎝

注意してほしいのは、これらがあくまでも『最小』の大きさであることだ。タップの正確さを求めなくてもよいように、可能な限り上記以上のサイズにしよう。

UXデザインの法則

著書でガイドラインにおける共通点として『大きさが重要だ』と話していますね。

数多くのガイドライン項目の内で『タッチターゲットの大きさ』が重要ということに三者が共通しているのには興味が湧きますね。

なぜ大きさが重要?

私は著者が『タップの正確さを求めなくてもよいように』と話したところが核の部分ではないかと思います。


やはり、各社が策定している『ユーザビリティに関わるデザインイドライン』
これらはまさに、『使い勝手を高レベルで維持するため』に作られたルールだと思います。


これらのユーザビリティデザインガイドラインは今後もユーザーにフィットさせるために進化、更新していくと思います。まさにデフォルト機能ですね。

なので弊社でも『スマホでも使いやすい配置デザイン』をアウトラインの目標にして考えています。

フィッツの法則では3つの重要な学びがある。
と話しています。


①タッチターゲットは十分に大きくなければならない。
②タッチターゲット同士に十分な間隔がひつようだ。
③タッチターゲットはインターフェース内でユーザーが簡単に到達できる場所に置かれていなければならない。



この、①タッチターゲットは十分に大きくなければならない。は先ほどお話しましたね。

では、②タッチターゲ/ット同士に十分な間隔が必要だ。
についてはどうかというと。

参考書籍にはこう書かれています。

  参考書籍から引用
要素間の間隔について考えておきたい。感覚が小さすぎると、タッチターゲットの選択に失敗しやすくなる。MIT(マサチューセッツ工科大学)TouchLabが行った研究によれば、成人の指の腹の大きさは平均10~14mm、指先は平均8~10mmだった(P033参照)。

どうしてもタッチターゲットの外側に多少触れてしまうことになるため、他のタッチターゲットが近すぎるとそちらが誤って選択されてしまい、ユーザーはいらだちとともにユーザビリティの悪さを呪うことになる。

UXデザインの法則

と、このようにタッチターゲットの大きさに伴ってターゲット間の間隔について形容しています。

確かに間違って隣のボタンを押してしまうと『イラッ!!』とすることはあります。

それだけで済めばよいですが、ユーザーがそのホームページやアプリを運営している企業事態に嫌悪感を抱く可能性もあります。

それくらい『ユーザビリティは感情に直結している』といっても言い過ぎではないと思います。

怒りを感じるユーザーは少ないかもしれませんが、『なんかココわかんない、よそにいこう』と諦めるユーザーは非常に多く存在していると思います。

また、そのようなホームページやアプリケーションには二度と行かないのではないでしょうか。
(過去のことを忘れて訪れることはあると思いますが・・・)

ユーザーの誤った選択を防ぐための施策としてタッチターゲットの大きさとそれ同士の間隔は重要ということになります。

そして③タッチターゲットはインターフェース内でユーザーが簡単に到達できる場所に置かれていなければならない。

これに関しては『フィッツの法則①』でお話しましたね。

これも同様で、ユーザーが誤った選択をしないようにするための施策でしたね。

ユーザーが求めているターゲットに簡単に到達するために

フィッツの法則の事例はアクション完了ボタンに現れているようです。
入力フォームの最後にある『送信』ボタンが最後の項目に近い場所に設置されている場合は、

そのエリアはフィッツの法則にしたがったカタチになっている。と言えますね。

フィッツの法則が示していること

ユーザーが誤った選択をしないようにターゲットは大きく、そしてそれらの間隔はタップに神経をとがらせないでも実行できる間隔であること。

そしてそれは分かりやすく指が届きやすい場所に配置されるべき。

ということでしょう。

私たち当たり前のように接しているインターフェースにはちゃんとした法則があって、それらを管理して改善してくれていた人たちがいた。

なんとも人間味があって素晴らしいです。まさに『人間力が求めてられる技』だと思います。

みなさんも身近にある『フィッツの法則的インターフェース』を見つけたら『裏側にある人情』を少し感じてみてください。

次回は・・・・・

「ヒックの法則」についてお話しようと思います。



【参考書籍についての簡単な情報】

タイトル:UXデザインの法則
著 者:jon yablonski

訳 者:相島雅樹(あいじま まさき)

    磯谷拓也(いそがい たくや)

    反中望(たんなか のぞむ)

    松村草也(まつむら そうや)
発行所:株式会社オライリー・ジャパン
発行元・発売元:株式会社オーム社

興味が沸いた方は買って読んでみてください!

最後に!

岡山の企業様で
自社のホームページで集客を行いたいけどできていない

『やり方が分からない』といったお悩みをお持ちの方、ぜひ当社の無料診断をご使用ください!

ノーラッドでは毎月限定ですが無料でホームページの診断を行っております。

当社ではマーケティング思考で解析できる上級ウェブ解析士と実践的なデジタルマーケティング手法を提供できるマーケッターが在籍しております。

ホームページで集客するために当社が必要と考えている環境「クライアントとユーザーの調和状態」を叶えるには、何を行えば良いのかの診断を行なっております。

こちらもぜひご検討ください。
少しでも気になられた方は下記のURLをクリックまたはお問い合わせください!

https://www.norad.co.jp/
TEL:086-277-0333

今後もノーラッドのブログをよろしくお願いいたします。ありがとうございました。