【デザインする前に知っておきたい!】よくあるUXのトラップを避ける方法とは

デザイナーが陥りやすいUXにおける4つの典型的なトラップとその回避方法を紹介しています。Webサイトやスマホアプリにおいて「UX」は欠かせません。デザインする前にどうしたらユーザーに好まれるサイトになるのか知っておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

本稿は、Web Designerdepotブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。

本記事は、Webデザイナー・グラフィックデザイナーのJames George氏によって投稿されました。

Webサイトを訪問したときに、あなたもフラストレーションやストレスを感じた経験がありませんか。特にウェブサイトがUXの実践原則を無視している場合には、よく起こり得ることです。

Webサイトの構築に携わる場合、ユーザーに好まれるサイトを作ろうと考えたら、UXの問題は避けて通ることができないでしょう。ここではデザイナーが陥りやすいUXにおける4つの典型的なトラップとその回避方法を紹介します。

 

1. フォーム

フォームは、ユーザー、クライアント、カスタマーの情報を収集するために不可欠です。フォームの利用は避けて通れないものであり、ユーザーが入力しやすいフォームでなければなりません。

フォームでの質問の数は、Webサイトにとって必要なだけの少ない範囲に絞るべきです。オンラインフォームの最大の問題の1つは、入力についての説明がユーザーに与えられていないケースです。

 

フォームの作成

具体的な情報の入力を求めるときには、何の入力を求めているのか強調しましょう。日付、時刻など形式的な情報を入力するフォームには、その入力例が示されているべきです。入力後にエラーメッセージを受信することほど、ユーザーにとってイライラすることはありません。

スクリーンショット 2016-07-19 11.25.50

 

プレースホルダーテキスト

さらに、フォームのフィールドにプレースホルダーテキストを設定して入力例を示しておけば(画像では赤い矢印の先)、ユーザーが情報入力するときのヒントとして役立ちます。

ただし、ユーザーがフォームに入力を開始した時に、プレースホルダーテキストが消えない設計は良くありません。ユーザーは入力を止めて、プレースホルダーテキストをコピー&削除して、最初から入力し直すことになるためフラストレーションの原因となります。

ユーザーが入力フィールドをセレクトした時に、プレースホルダーテキストが消えるか確認しましょう。

 

エラーメッセージ

Webサイトで、説明も何もないエラーメッセージを受信することほど、イライラするものはありません。ユーザーへのエラーメッセージには、エラーの原因についての説明とその解決策が添えられているべきです。

例えば、ユーザー名とパスワードによるログインをユーザーが試みたときに、一方を間違えたことが原因でログインに失敗した場合、どちらがエラーの原因となったのか説明が必要です。

世界中のウェブサイトで数多くのログインが行われているため、ユーザー名とパスワードの組合せは日々蓄積されていきます。私自身、いつも使っていたユーザー名とパスワードの組合せを、Webサイトが求める条件(使用するアルファベット、数字、文字、句読点、記号などについて)を満たしていなかったという理由で、変更しなければならなかったことが何度かあります。

 

他にも次のような例があります。

登録のプロセスでは、入力されたパスワードのペアが一致しないときや、ユーザー名がすでに登録されているときには、ユーザーが情報を送信する前にエラーメッセージを表示するべきです。

十分な説明が与えられないまま何度もやり直しをするのは、誰でもイヤなものです。ユーザーのために、1回で正しい情報を送信できるような工夫ができれば、あなたは貢献度の高い仕事をしたことになります。

 

2. 大きなヘッダーがナビゲーションに使われている

この設計は最近は人気なのかわかりませんが、多くのWebサイトで見かけます。大きなサイズのヘッダーなどがナビゲーションの要素として使われていると、ユーザーがページをスクロールダウンするときに、多くのコンテンツが見えなくなります。

読みたいコンテンツに進みにくいときや、コンテンツがナビゲーションの要素で隠されてしまうとき、ユーザーにとってとくにフラストレーションとなるでしょう。

 

モバイル対応サイトではとくに注意

さらに悪いケースでは、サイトがモバイル対応の小さなサイズに設計されているのに、大きなサイズのヘッダーはそのままです。スマートフォンの画面は余白のスペースが限定されているため、これではユーザーエクスペリエンスの質が下がってしまいます。ナビゲーションの要素を表示するとしたら、小さなサイズのアイコンに変えるか、邪魔にならない場所に配置しましょう。

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

3. コントラストが低い

私は視力が良いほうですが、チャコールグレーのテキストを黒の背景上で読むのは、好きではありません。おそらく誰でもそう思うでしょう。Webデザインにおいてはコントラストが重要です。

tumblr_o05i9k2pBL1ul8y65o1_1280

 

テキスト

テキストは、文字のウェイト(太さ)も考えて、読みやすくするべきです。ウェイト(太さ)の値が100のフォントは、特殊なケースを除いてWeb上での利用には適していません。極細の文字をスマートフォンに使うのも良くありません。字形がよく見えるように、コントラストは十分高くしておくべきです。

 

Webサイトの全ての要素について、色同士のコントラストを十分高くしておくと見やすくなります。とくにテキストと背景は高いコントラストにしておくべきです。リンク、ナビゲーションの要素、アイコンについても同様です。ユーザーがコンテンツを探すのが難しくなるような、低いコントラストは良くありません。

 

CTA(CALLS TO ACTIONS 、コールトゥアクション)

リンクやナビゲーションの要素と同様に、CTA(コールトゥアクション:ユーザーにアクションを促す要素)もコントラストを高くするべきです。サイトの訪問者にアクションを期待するときには、この要素を目立たせて、読みやすくロードしやすいデザインにします。

効果的ではないCTAの例として、背景に同化して目立たないボタン要素、さらにひどい場合には、ホワイトスペースで囲まれたテキストのみでボタンのない要素があります。

 

4. モバイルサイトのタッチターゲット

モバイルサイトでよく見かけますが、これは最もフラストレーションとなる要素の1つです。

クリックできるボタンやリンクを作るときには、ユーザーが間違って他の要素をクリックしないように、十分なスペースを設けます。スマートフォンの場合には、ボタンやリンクをタップしやすくなるよう、画面の端から十分な距離を離しましょう。

ボタンが画面の4隅のいずれかに寄りすぎているときには、正確にタップすることが物理的に難しくなります。ユーザーの指が大きめの場合、スマートフォンがユーザーのアクションを認識できないおそれもあります。このときユーザーは機能を使うために何度もタップしなければなりません。これらの要素にはスペースを設けることが大変重要です。

tumblr_o1p2sciT2x1ul8y65o1_1280

画像:要素が私のスマートフォンの画面では端に寄りすぎています。スクリーンにタッチして設定するのに、5~6回も試さなければならないこともあります。

 

結論

UXの典型的な問題は、あらかじめよく考え、少しの手間をかけることで容易に回避できます。もしサイト訪問者に、利用を楽しんでもらいたいと思うなら、このプロセスをシンプルで柔軟にしておくことが大切です。

ユーザーにアクションを繰り返し要求することを回避できれば、フラストレーションを減らすことができます。

また、良くデザインされたサイトに誰もが期待するようなユーザーエクスペリエンスを、提供できるでしょう。

[お知らせ]TechAcademyでは初心者でもアプリのデザインができるようになるアプリUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。