優れたユーザーインタフェース(UI)を実現するために確認しておきたい36項目

User interface 【img via tabletop assistant by MattHurst

優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。

GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく!

1.マルチカラムではなく、シングルカラム

複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。

idea001

2.まずはギフトを渡してみる

最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。

idea002

3.似た機能や項目は1つにまとめて表示する

似た機能を分散させる必要はない。

idea003

4.ユーザーからの反応を載せる

実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない。

idea004

5.ユーザーに実行してほしいことを複数箇所に表示する

ユーザーがどこでクリックするかは分からない。動線を複数用意することによって、同じ項目が何度も目に入ると気になる。

idea005

6.クリック可能な領域とクリックされた領域を明確に分ける

自分が何を既に見ていてこれから何を見たいのか、操作に迷いがないのはユーザーにとっても嬉しい。

idea006

7.選択肢を与えるのではなく、イチオシを伝える

ただでさえ悩んでいる人をさらに選択肢を与えて悩ませるよりも最初から選択肢を与えた方が良心的。

idea007

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

「本当にそれでいいの?!」と言われると気になってしまうがそのような確認をあえてなくし、明らかに間違えた時のためにアンドゥ機能を用意した方が良い。

idea008

9.全員に向けてではなく、特定の人に向ける

「みんなのため」ではなく「あなたのため」。

idea009

10.直接的な表現を使用する

ユーザーは迷いがち。直接的な表現で取るべき行動を誘導してみましょう。

idea010

11.コントラストを高める

もやっとしているよりもコントラストを上げて見やすく。

idea011

12.どこで作られた物であるかを明確にする

ユーザーは知らない商品やサービスを使い始めるためには安心感が必要。原産地やどこで作られたかなどを書いておくのは安心感に繋がる。

idea012

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

フォームが長いと見ただけでやる気をなくすのは人類共通。

idea013

14.オプションは最初から表示しておく

クリックないとオプションが見えないようにするのはデザイン上シンプルで良いかもしれないが、ユーザーはクリックするという動作が増えるためコンバージョンは下がる可能性がある。

idea014

15.続きがあることが分かるようにする

続きがあるということを知らせることは大事。

idea015

16.余計なリンクを徹底的に排除する

リンクがあると目移りしてしまう。ユーザーに実行してもらいたいものだけを明確に。

idea016

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

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

idea017

18.ユーザーがお得であることを知らせる文言を使う

自分のとってメリットがあることを伝えることは重要。

idea018

19.操作内容と操作対象を明確にする

何をクリックするとどこが変更できるのか分からないというユーザーインタフェースはユーザーには優しくない。

idea019

20.登録フォームを別ページではなく、ランディングページ(LP)に置く

ページ遷移は少ない方が良い。

idea020

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

突然表示されるよりもアニメーションなどで視覚的に分かりやすくすることも効果的。

idea021

22.ユーザーに商品を体験してもらい本登録に導くフローにする

ユーザーに体験型チュートリアルのような形で少しずつ商品やサービスに触れさせることによって愛着が湧き、使い方も覚えるのでコンバージョンする可能性が上がる。

idea022

23.枠線(ボーダー)を減らす

何でもかんでも枠線をつければ良いというものではない。ありすぎるとしつこくなる。

idea023

24.機能を宣伝のではなく、メリットを宣伝する

サービスの持つ機能も大事だが、それを利用することによって得られるメリットの方が重要。AppleがiPhoneを発売した時はまさにこの利用することによって得られるメリットを強調した結果、今の人気があると言っても過言ではない。

idea024

25.サービスを初めて使う人のことを考慮する

サービスを利用開始した時はデータも0。フレンドも0。情報も0。その時にどのようにしてサービスの利用を促すかが重要。

idea025

26.オプトインではなく、オプトアウトを意識する

ユーザーに確認をすることも大事だが、多少強引に誘導することも効果的である場合もある。

idea026

27.一貫性や統一性を大事にする

統一しないことに対するメリットもあるが、統一されていた方がユーザーが操作を覚えやすい。

idea027

28.予め入力されることが想定される内容を記入しておく

おおよそターゲットとしているユーザーが分かっているのであれば、予め入力されるであろう内容をデフォルトで入力しておくのは便利。入力する量が減れば減るほど、良い。

idea028

29.直感的なユーザーインタフェースを採用する

当たり前とされているユーザーインタフェースが採用されているか、確認しましょう。

idea029

30.得られることを強調するよりも、失われることを強調する

人は何か新たに得ることよりも、今あるものを失うことの方が恐れる傾向にある。

idea030

31.ビジュアルヒエラルキーを意識する

ユーザーに目を留めて欲しい箇所を強調してみましょう。

idea031

32.関連する項目をまとめる

一箇所でユーザーの求めている情報やコンテンツが閲覧できるようにしましょう。

idea032

33.未記入や誤入力などを書きながら推敲する

全て書き終わってから間違いを指摘されるよりはその場で指摘された方が良い。

idea033

34.複数の書式に対応する

全角でも半角でも受け付けるようにするとユーザーのストレスが減る。

idea034

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

テスト前夜になって本気出す人が多いのと同じように、時間が迫っていることを意識させるのは効果的。

idea035

36.在庫が限られていること、残りわずかであることを強調してみる

在庫が残っているものであれば「後でまた考えればいいや」となるが、「残り数個限定!」と言われると少しでも欲しければしまうのと同じ心理。

idea036
GoodUI


モバイルデザインパターン― ユーザーインタフェースのためのパターン集
Theresa Neil
オライリージャパン
売り上げランキング: 132,737

ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ
エリック・ライス
ビー・エヌ・エヌ新社
売り上げランキング: 21,560

この記事に関連するまとめ

サイト内を検索して記事を探す

user-interface.jpg

gori.meの最新情報をチェック!!

9件のコメント

この記事にコメントする

投稿内容を確認し、問題がなければ下記の「コメントを投稿する」ボタンを押してください。