UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2014.09.10

UI DESIGN

優れたUIを実現するために確認しておくべき51のチェックリスト

デザインをしていると、後になって「こっちの方が良かった…」ということがあるかと思います。

それらのミス・改善点はいつも早い段階で見つかるわけではありません。

そこで今回は、Good UIという海外サイトの画像を利用して、改善ポイントを解説していきます。

(参考:http://www.goodui.org/index_v4.html

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

idea001

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

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

idea002

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

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

idea003

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

お客様の声を載せる

idea004

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

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

idea005

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

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

idea006

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

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

idea007

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

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

idea008

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

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

idea009

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

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

idea010

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

コントラストを高める

idea011

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

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

idea012

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

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

idea013

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

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

idea014

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

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

idea015

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

余計なリンクを載せない

idea016

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

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

idea017

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

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

idea018

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

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

idea019

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

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

idea020

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

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

idea021

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

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

idea022

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

枠線を減らす

idea023

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

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

idea024

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

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

idea025

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

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

idea026

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

統一性を大事にする

idea027

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

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

idea028

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

代表的なUIを採用する

idea029

ボタンの右左など、当たり前とされているインターフェースを採用することでユーザーのミス防止につながります。

逆に、して欲しくない行動はあえて通常のUIと逆にすることで、利用率を下げることもできます。

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

idea030

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

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

idea031

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

関連項目をまとめる

idea032

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

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

idea033

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

複数書式に対応する

idea034

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

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

idea035

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

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

idea036

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

選択肢を用意する

idea037

一から記入することより、選択肢があるほうが明らかに記入する際の労力が少なくてすむ。

アンケートの場合は、誘導にならないよう注意する必要がある

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

idea038

特にスマホを考えた際、狭すぎるクリックエリアは押すことができず、離脱してしまう可能性がある。

と同時に、クリックエリア同士の間隔も十分取る必要がある

ローディングを早くする

idea039

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

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

idea040

例えば、次の項目にフォーカスするにはJを、前の項目にフォーカスする場合にはKを、などのショートカットがあれば内容を読み進めやすくなる

重要なのは、いかに少ない動作でユーザーが目的を達成できるか、という視点

アンカリングに気を払う

idea041

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

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

idea042

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

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

idea043

特にフォームにおいて有効で、前の項目を記入すると次の項目が出てくる形。

項目が多すぎる際に、全部見せるのではなく小出しにすることでファーストビューの不快感を軽減するため

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

idea044

最初から高いハードルを掲げてしまうと、ユーザーは参加するのにしり込みしてしまうため。

何かを始めること自体がユーザーに負荷をかけていることを認識しましょう。

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

idea045

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

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

単機能のものを大量に並べるより、多機能なものを配置することで、全体をシンプルに分かりやすくできるため。

何ができるか分かりづらくなる側面もあるため、いつでも多機能、というわけではない

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

 idea047

 

アイコンを使うことは文字での説明より分かりやすいこともありますが、反対に意味が伝わらないこともあります。

それだとユーザーが困ってしまうため、文字による説明を入れることを検討してみましょう。

文章で説明しよう

idea048

ユーザーはシンプルなデザインを見に来たのではなく、シンプルなデザインはユーザーの目的を達成させるためにあるものだから。

その箇条書きで、意味は伝わるか考えましょう。

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

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

idea049

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

idea050

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

価格を小さく見せる

idea051

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

 

まとめ

リストアップしておきながらこんなことを言うのもどうかと思いますが、ここにあげたことさえやっていれば完璧だ、とは言えません。ユーザーごとに良いUIは異なるからです。

ただ、このリストを使って確認することは、あなたに多くの気付きを与えてくれるでしょう。

 

サイト掲載・UI/UXのご相談に関して

UI/UX JAPANではアプリデベロッパーさんのアプリのレビュー・インタビューを企画および、UI/UXに関する悩み相談・改善提案を行っています。

「インタビューを受けてみたい!」や「改善提案をお願いしたい」など、興味のある方は下記お問い合わせより”お気軽に”ご相談ください!

EDITOR'S PROFILE

admin_ohako

菊地 涼太

代表取締役CEO & UI Designer

  • Facebook
  • Twitter

神奈川県生まれ、神奈川県育ち。慶應義塾大学時代より大手企業内でWebデザインの仕事に携わり、フリーランスとして新規事業立案〜UX設計・UIデザインまでを主な担当分野としているうちに、デザイン領域全体に可能性を感じて株式会社オハコを設立。

RELATED POSTS
top

2016.11.11

来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え…

はじめまして! 株式会社オハコのアシスタントUIデザイナーの吉川、サーバサイドエンジニアの有馬です。 11月を迎え、本格的に寒い季節になってきましたね。 少し前のことです...

UI DESIGN

wearabledevice

2015.04.10

AppleWatchでどう変わる?ウェアラブルデバイスUXテ…

いよいよ本日、AppleWatchの予約が日本時間16時01分より開始されました。 これまで様々な企業が研究開発を行ってきたウェアラブルデバイスの分野に、ついにAppleが参...

UI DESIGN

dashboard

2015.03.04

ダッシュボードのUI/UXを考える際に重要な3つの視点

「The laws of shitty dashboards(ひどいダッシュボードの法則)」を読んで 成功例を目にすることは多いが、実際にはトライアンドエラーをした軌跡を追う事の...

UI DESIGN

uidesign

2014.10.28

UX思考を学ぶ。UIデザインパターン全28選

はじめに-UIデザインパターンの使い方- なぜUIデザインパターンを確認するのか、しっかり目的意識を持って確認作業を行っているだろうか。 以下にあげるUIデザインパターンを...

UI DESIGN

mobileuipatterns

2014.10.10

用途・デバイス別!スマホサイト、アプリのUIデザインパターン17選

弊社でも参考にしているUIパターンサイトを使いやすいようにデバイス別・用途別に分類してみました。 UIデザインで詰まってしまった際や、修正を指示したいんだけど参考になるデザイ...

UI DESIGN

Top

2014.09.30

心地よいUIデザインをする際に考えるべき7つのポイント

多くの人が毎日3時間以上オンラインサービスを利用しています。1,000,000,000,000以上のWebページと数百万件のアプリがリリースされ、それらがユーザーの時間を奪い合って...

UI DESIGN