デザイン

優れたUIを実現するために確認しておくべき51のポイント

「Good UI」という海外サイトの画像を利用して、UI設計時に考慮するポイントを確認していきます。
avator
Misaki Akimoto
2018-11-12

優れたアイデアで素晴らしい体験設計ができたとしても、ノンストレスで楽しめるUIでなければユーザーは途中で離脱してしまいます。 それでは、我々が本当に提供したい価値をユーザーが享受することができずに終わってしまいます。

そのような結果を招かないよう、ワイヤーフレームやUIデザインを行う前段階でデザインの考慮漏れを防げるようにしたいですね。

今回は「Good UI」という海外サイトの画像を利用して、UI設計時に考慮するポイントを確認していきます。

マルチカラムではなく、ワンカラム

カラムが複数あると、ユーザーの目線が左右に散ってしまうため

まずは無料で提供してみる

プレゼントはユーザーを喜ばせるだけでなく、その後の購入につながる有効な手段となるため

似た機能は一つにまとめる

ユーザーにとっての使いやすさを重視するため

お客様の声を載せる

あなたの提供するサービスの信頼性が高まり、使ってくれるユーザーが増えるため

ユーザーにして欲しいことは繰り返し載せる

ユーザー導線を最適化するため。また、繰り返すことで何のためのサイトなのかを認知させるため

クリックできる部分と、クリックされている部分をはっきりと区別する

ユーザーが、今何を見ていて、これから何が見れるのか、を把握しやすくするため

すべての選択肢を均等にではなく、おすすめを強く伝える

サービスについて詳しく分かっているあなたがおすすめしてあげることで、ユーザーが選びやすくなり、購入率も上昇するため

確認画面を挟むのではなく、やり直し機能を用意する

確認画面でなくやり直し機能を用意することは、ユーザーに自由な印象を与えられるため

誰のためのサービスか、を伝える

「みんなのため」と言われるより「あなたのため」と言われる方が信用できるため

疑問系ではなく、言い切り型で伝える

疑問系は頼りない印象を与えてしまうため

コントラストを高める

Call to Actionなど、ユーザーにアクションを促すものを目立たせるため

”どこで”作られたものかを明確に

どこで作られたかを明かすことで、ユーザーに安心感を与えられるため

フォームの入力項目を減らす

フォームが長いと記入する意欲を失ってしまうため。可能な限り減らす

選択肢は最初から表示しておく

クリックして選択肢を表示するデザインはシンプルに見えるかもしれないが、ユーザーは1クリック分余計に行動しないといけないため離脱が増える可能性があるため

コンテンツが続いていることを明示する

一定の間隔でコンテンツを記載することで、読み進めやすくするため

余計なリンクを載せない

ユーザーが目移りすることを防ぐため

ユーザー自身の状況が分かるように

自分が今どういう状況になっているのかを知ることができると安心感に繋がるため

ユーザーが何ができるようになるか知らせる文言を使う

何ができるようになるかイメージさせることが重要なため

何をするとどこが変更できるかを明確に

何が起こるか分からない状況は、ユーザーにストレスを与えてしまうため

登録フォームをコンテンツと同一ページに置く

別ページに移動することは、手間でしかないため

アニメーション・トランジションを取り入れる

動きをつけることで目線を集めることができるため

登録前にサービスを体験してもらう

サービスの一部を体験することで、ユーザーにサービスの良さを伝えられるため

枠線を減らす

枠線が多すぎるとどこを見ていいのか分からなくなるため

機能ではなくメリットを宣伝する

機能の説明も大事だが、ユーザーは”どのような体験ができるか”の方に興味があることを忘れてはならない

サービスのファーストユーザーのことを考える

サービスを利用開始した時はデータも0。フレンドも0。その状態で如何に利用を促すかが大事

始めから了承ボタンにチェックを

ユーザーに意思の確認をすることも大事だが、時には強引にオファーすることも重要

一性を大事にする

全体が統一されているとユーザーに余計な学習コストをかけさせる必要がなく、手間をかけさせないため

あらかじめ入力されるであろう内容を記入しておいてあげる

ターゲットユーザーが分かっている場合、分かっている部分は入力しておいてあげることで、ユーザーが感じる面倒くささを半減できるため

代表的なUIを採用する

ボタンの右左など、当たり前とされているインターフェースを採用することでユーザーのミス防止につながる。逆に、して欲しくない行動はあえて通常のUIと逆にすることで、利用率を下げることも可能。

しないことによるデメリットを強調する

心理学で損失回避性という言葉があるように、人は得られる利益より失うことの方を大きく評価する。することによるメリットよりもしないことによるデメリットを強調したい(怖がらせすぎない程度に)

デザインで階層構造を表現する

ユーザーに「どこで何をすることを目的としているページなのか」を伝えるため

関連項目をまとめる

ユーザーが都度項目を探す必要をなくすため

未記入や誤入力をその場で指摘する

記入して送信した後にエラーが帰ってくるより、記入中に指摘してもらえたほうがユーザーにとって楽であるため

複数書式に対応する

半角・全角や、ふりがなのカタカナ・ひらがななど、どちらにも対応することでユーザビリティを向上できるため

時間がないことを強調する

人はぎりぎりまで決断できないことが多いため、ぎりぎりであることを強調する

在庫が残りわずかなことを強調する

時間がないことの強調と同様に、判断力を向上させることと、申し込まないともったいないという気持ちにさせるため

選択肢を用意する

一から記入することより、選択肢があるほうが明らかに記入する際の労力が少なくてすむ。アンケートの場合は、誘導にならないよう注意する必要がある

クリック可能エリアは大きくする

特にスマホを考えた際、狭すぎるクリックエリアは押すことができず、離脱してしまう可能性がある。と同時に、クリックエリア同士の間隔も十分取る必要がある

ローディングを早くする

サイト表示が2秒遅いだけで離脱率が50%上昇した事例もあるように、待ち時間の見せ方を工夫する前にローディングを早くする努力をする

キーボードショートカットを設定する

例えば、次の項目にフォーカスするにはJを、前の項目にフォーカスする場合にはKを、などのショートカットがあれば内容を読み進めやすくなる。 重要なのは、いかに少ない動作でユーザーが目的を達成できるか、という視点。

アンカリングに気を払う

人は最初に見た数値に判断を引っ張られるため(認知バイアスのひとつ)、実際の価格の前に値引き前の価格などを強調するほうが良い

ゴールに近づいていることをうまく表記する

サインアップの後に10項目の行動リストがあるのなら、終了項目を「0/10」と表示するのではなく、「2/12」のようにゴールに近づいているように表記する。ユーザーのモチベーション維持のため

コンテンツをすべて表示しておくのではなく、順番に表示していく

特にフォームにおいて有効で、前の項目を記入すると次の項目が出てくる形。 項目が多すぎる際に、全部見せるのではなく小出しにすることでファーストビューの不快感を軽減するため

ユーザーの参入障壁は小さく

最初から高いハードルを掲げてしまうと、ユーザーは参加するのにしり込みしてしまうため。 何かを始めること自体がユーザーに負荷をかけていることを認識する。

ポップアップでの主張は慎重に

ポップアップはユーザーの意思にかかわらず見ることを強制する。ユーザーは自分で必要な情報は探してくれるため、どうしてもの場合以外はポップアップを使わないようにしたい。

多機能にして、要素を減らす

単機能のものを大量に並べるより、多機能なものを配置することで、全体をシンプルに分かりやすくできるため。 何ができるか分かりづらくなる側面もあるため、いつでも多機能、というわけではない

アイコンに説明文を付け加えることを考慮しよう

アイコンを使うことは文字での説明より分かりやすいこともありますが、反対に意味が伝わらないこともある。 それだとユーザーが困ってしまうため、文字による説明を入れることを検討してみたい。

文章で説明しよう

ユーザーはシンプルなデザインを見に来たのではなく、シンプルなデザインはユーザーの目的を達成させるためにあるもの。箇条書きで、意味は伝わるか考える。

内容を一部公開することで、好奇心を誘う

テレビの次回予告をイメージしてください。ちょっとだけ見せられると続きが気になりませんか?

コンバージョン部分で、保障を再度掲載する

ユーザーは、直前で自分の決定が正しいかを考えます。そこの後押しをしてあげるため、リスクフリーということを再びうたう。

価格を小さく見せる

ユーザーは大きな価格を見せられるとしり込みしてしまうため、要素を細かくして一要素あたりの価格を訴求したり、”たった”などの修飾語句を使う。

結論

チェックリストの内容は場合により、推奨しているUIがベストでないこともあります。 それは、ユーザー個人の属性や置かれている状況によって使いやすいUIが異なるためです。 あなたが現在取り組むサービスのペルソナの年齢層やサービスの利用方法にはどのような特徴がありますか? 彼らをイメージしながら「Good UI」を目指してチェック項目を取捨選択していただけると幸いです。

また、ノンデザイナーからデザイナーへUIについてのリクエストをしてみても、ことばで伝えることが難しいケースもあるかと思います。 そんな時にこのチェックリストを活用していただき、実現したいUIのイメージを視覚的に伝えることもおすすめです。

今回のチェックリストによって、あなたのユーザーがサービスのバリューに気づくまでサイトに滞在することを祈っています。

UIデザイン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator
Misaki Akimoto
プロダクトマネージャー/ Product Huntをチェックするのが日課です^^