使いやすいフォームとは、心理学の原則に基づいたユーザビリティの改善方法

Webサイトやスマホアプリでも、心理学はいたる所に存在します。
Facebookの通知に緊急のカラーであるレッドが使用されているのは、注意を必要としているのが理由です。また、Vogueのような雑誌ではロゴのタイポグラフィに十分な余白を備え、潜在意識に排他性を伝えます。

ユーザーのニーズ、習慣、行動、動機、感情を心理学の原則に基づき、ユーザビリティを重視したJotFormのフォーム設計について紹介します。

心理学の原則に基づいたユーザビリティの改善方法

Hacking Usability with Psychological Principles
この記事はJotForm Blogで公開されています。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

JotFormではフォームのユーザビリティを改善するにあたり、シンプルであること、即時性、美しさの3点に注目しました。

シンプルであること

認知心理学において、認知負荷とは作業記憶(ワーキングメモリ)で使用される知的努力の総量を指します。

認知負荷が高いタスクは複雑で、混乱してしまう傾向があります。それにより、ユーザーはタスクを途中であきらめてしまう可能性が高くなります。わたし達の注意力は平均して、8秒間しか持続しないと言われています(参考: Attention Span Than a Goldfish)。

もしタスクが最小限の認知負荷(シンプルで、簡単で、最小限の集中だけを必要とする)場合、わたし達はそれに固執する傾向があります。
JotFormでは、シンプルさを達成するために次の原則を使用しました。

1. オッカムの剃刀

オッカムの剃刀とは、問題解決の原則です。簡単に説明すると、必要以上に多くの選択肢を提示しないことです。UXにも適用することができ、デザインやコンテンツ、そしてインタラクションを過度に複雑にすることに対しての警告です。

この原則は「これ以上加えるべきものがなく、取り去るものも何もない時、デザインは完了していない」という格言に通じます。

ワンポイント アドバイス
Webの柔軟性と可能性に惑わされないでください。機能やコンテンツや情報が山のようにあるプロダクトは構築すること、使用すること、そして維持することが難しい可能性があります。
ユーザーはどこにいても、必要な場所にすぐ移動したいと思っています。

2. ヒックの法則

想像してみてください。もしあなたが入ったレストランの料理に、数十のアイテムとバリエーションがあったとします。あなたは料理を決めるために、メニューを凝視するでしょう。すると、ウェイターが側にきました。「もうしばらく時間をください」とあなたは言うでしょう。

ヒックの法則によると、利用可能な選択肢の数が増えるにつれて、意思決定に要する時間も労力も増えると言われています。

そのため、オプション数を少なくすることで負荷が大幅に軽減され、ユーザーは目の前の作業に集中できます。

サイトのキャプチャ

1ページあたりの質問数を少なくすることで、認知負荷は軽減されます。

ワンポイント アドバイス
可能な限り、選択肢の数は最小限に抑えてください。これはページ、リンク、ボタンなどの数も同じことが言えます。

3. チャンキング

複数のアイテムは長い文字列にするのではなく、短い文字数に分割した方が理解しやすいです。このように小さな断片に分割することをチャンキング・ダウンと言います。例えば、電話番号です。数桁ずつ区切ることで、一続きより容易に理解できます。

チャンキングは、記憶のメカニズムです。小規模なグループに情報を整理できる場合は、処理するのがはるかに簡単になります。

関連するフィールドを結合して、セクションにまとめています。

ワンポイント アドバイス
より小さいセクションに情報をチャンキング・ダウンすることで、ユーザーは目の前にあるコンテンツを簡単に処理することでき、多くの情報を保持することができます。

4. 柔軟性とユーザビリティのトレードオフ

可能性のあるすべてのシナリオの柔軟性を最大限に高めることは、魅力的に見えます。しかし、柔軟性が増えるにつれて、その複雑さも同様に増えてしまいます。その結果、ユーザビリティと効率が低下してしまいます。

多機能ナイフ、十徳ナイフで有名なスイスのアーミーナイフを思い浮かべてみてください。メーカーは時間の経過と共に、より多くのツールを加えてきました。もしあなたがヒマラヤ山脈の頂上にいるなら、ポケットの中にそのナイフを見つけて喜ぶでしょう。

しかし、もし紐を切るだけなら、あなたはアーミーナイフと普通のハサミのどちらを選びますか?

ワンポイント アドバイス
万が一の可能性のために、シンプルさを犠牲にしないでください。

即時性

時間を無駄に浪費することを好む人はいません。無駄にすべき時間がある人もいません。日常や仕事が絶え間なく続いているこの忙しい時に、ユーザーは気を散らさずにどこにいる必要があるのか​​を知りたいと考えています。

このことを念頭に置いて、JotFormのデザイン戦略は以下の原則に従います。

1. エラーの許容誤差

人は間違いを犯し、間違いはコストがかかることがあります。ユーザーが意図しない(潜在的に否定的な)結果をもたらすかもしれないキーストロークを実行しようとしている場合、何が起きるでしょうか? キーストロークが間違ったまま、ユーザーが戸惑っているのをあなたは見ているだけですか?

ユーザーになんらかの注意や警告を促すのも一つの手でしょう。

もう一つ素晴らしい解決方法があります。
それはエラーの許容誤差を含めておくことです。潜在的なエラーや思いがけない結果を予測して、ユーザーがそれらを回避するのを助けるために用意しておきます。

サイトのキャプチャ

エラーのフィードバックとオートコンプリート機能。

ワンポイント アドバイス
潜在的なエラーを最小限に抑えるような方法で情報を整理し(例えば、一般的に使用されている要素をアクセス可能にすることによって)、ユーザーが間違いを犯そうとしている時に前もって警告してください。

2. フィッツの法則

フィッツの法則は人間の行動をモデル化したもので、ターゲットに移動するのに必要な時間はターゲットまでの距離と大きさに関係します。

スクリーン上のターゲットが小さくて遠いほど、カーソルをターゲットに移動する時間は長くなります。迅速かつ指向的な動きに適用されるフィッツの法則は、運動の効率を予測するために使用されます。

サイトのキャプチャ

カーソルの移動距離の減少と目標サイズの拡大

ワンポイント アドバイス
UI要素とWebサイトのレイアウトのサイズと配置は慎重に検討してください。小さな変更でも大きな効果を生み出すことがあります。

3. アフォーダンス

オブジェクトの形や構成から、どのように使用できるか手がかりを与えます。例えば、注ぎ口のある容器は液体を注ぐことができ、長い紐がついた袋は肩から提げることができます。それがアフォーダンスです。

わたし達は何をすべきかを理解するために、オブジェクトを詳しく調べる必要はありません。オブジェクトの形が、わたし達に伝えます。そして、オブジェクトがうまく伝えることができたなら、アフォーダンスは成功です。

デザインで考えると、アフォーダンスはそのディテールが重要です。ぱっと見ですぐ分かるようにデザインします。

ワンポイント アドバイス
ユーザー視点でアフォーダンスを念頭に置いてデザインしてください。これにより透過性が向上するため、エラーを減らしつつ、簡単かつ素早くなります。

美しさ

人は、人間味に溢れています。それは、人は常に理性的に判断するものではないということです。だからこそ、すべての良いデザインは魅力や錯覚にある程度依存する理由になります。

1. 審美的ユーザビリティの効果

もちろん、わたし達は美しいものが好きです。しかも、好きであるかどうかにかかわらず、美しいデザインが良いと感じます。

そうです、デザインは機能する必要があります。思慮深い必要があり、魅力的である必要もあります。

美しい背景を備えたフォーム

美しいデザインはポジティブな印象を与えるだけでなく、インターフェイスをユーザーに使いやすくし、デザイン上の問題に対してより寛大になるという印象を与えます。デザインの役割の一部は、愛情、忠誠、忍耐の感情を呼び起こすことです。プロダクトの長期的なユーザビリティと成功のための重要な要素です。

ワンポイント アドバイス
美しさがあなたを成功に導きます。

2. 進捗状況の提供

好きなコーヒーは何ですか? スターバックスでも地元のカフェでも、あなたはポイントカードを持っている可能性が高いです。ポイントカードとは進捗を反映するもので、コーヒーを飲む度にポイントが貯まっていきます。あなたは意識していないかもしれませんが、このポイントが貯まることによって、次もそこでコーヒーを飲もうという気持ちが高まります。

進捗状況の提供は、人々がゴールに達するための労力をより少なく見せる効果があります。わたし達はそのゴールに近づくほど、持続する可能性が高くなります。

サイトのキャプチャ

プログレスバーで、進捗状況を提供

ワンポイント アドバイス
ユーザーに幸先の良いスタートを提供してください。進捗状況を目に見えるようにし、どこに向かっているかを示し、ゴールにより近くなっていることを伝えてください。

sponsors

top of page

©2018 coliss