ユーザーインターフェースデザイン

ユーザーインタフェースとは、何らかの操作を行う際の、見た目や操作感を指します。「UI」と略される場合もあります。

• ユーザーインタフェース
• リンク
• フォーム
• 選択操作
• まとめ

 

リンク

リンクとは「クリックすると他ページやファイルを開く」という仕組みのことです。省略して「リンク」と呼ばれることが多いです。このリンクのユーザーインタフェースについて考えていきましょう。

デザイン

テキストリンクやボタン型リンクなど様々ありますが、どのタイプのリンクでも「ユーザーが即座にリンクであると認識できるか」が重要です。たとえば、テキストリンクを見てみましょう。

リンク

リンク

上記のどちらもリンクであるとしましょう。下は、様々なwebサイトのテキストリンクで採用されている「青」と「下線」を使用しています。ですので、一目でリンクであると認識してもらえそうですね。しかし、上はリンクなのか只のテキストなのかわかりにくいです。

テキストをリンクと勘違いし、クリックしてしまったり。または、リンクだと思わず触れてしまいページ移動してしまったり。このようなことが起これば、ユーザーは不快感を感じ、サイトから離脱してしまいます。

では、ユーザーインターフェースが考えられたリンクとはどのようなものでしょうか。たとえば、「ホバー」などで普通のテキストとの差をつけるというのがあります。マウスを動かし、ポインタを対象に載せるとリンクである要素のデザインが変化します。以下は「トヨタ自動車」のサイトです。

https://toyota.jp/

テキストリンクと、画像リンクの例です。テキストリンクは、マウスオーバーで色が変化します。画像リンクは、画像の明度が暗くなります。

スマートフォン

ここまで、マウスオーバーにでデザインを変化させ「リンクである事をユーザーに伝える」というお話しをしました。では、スマートフォンではどうでしょうか。スマホは、パソコンと違いマウスオーバーというものがありません。

つまり、他の方法でリンクである事を伝えなくてはいけないという事です。最初に取り上げた「リンク」のように青文字+下線も、そのひとつですね。以下は、方法の一覧です。

本文との色を明確に変える(テキストリンク)

文章の中にリンクがある例です。「特別割引券」という文言のみ、明確に本文と色を変えています。しかし、１番上はリンクであるとは気づいてもらえないかもしれません。

次の例は「下線」を加えています。しかし、文章の中だと下線をつけても分かりにくいですね。やはり、文章の中のリンクであれば「青文字+下線」が１番分かりやすいのではないでしょうか。

また、下の二つは独立したテキストリンクです。矢印等をつけたり、文言を工夫するなどが大切です。

ボタン型にする

下の例のようにシャドウなどをつけると、より分かりやすくなるのではないでしょうか。また、ボタン型リンクを使うのであれば、他の部分でボタンを使わないようにしましょう。

案内テキストをつける(例：クリックでジャンプ)

写真などは、ホバーがなければリンクだと認識されずらいでしょう。案内テキストがあれば、リンクであると分かりますね。また、枠内に画像とテキストを置く「カード型」としてしまうのも良いかもしれません。

フォーム

「予約」や「購入」などの際は、フォームを使いますね。このフォーム内での操作についても、ユーザー目線で使いやすいものにしなければなりません。では、以下は美容室の予約フォームの簡単な例です。

問題点がいくつもあります。では、１つづつ見ていきましょう。

名前欄が姓名で分かれている

入力項目は出来るだけ少なくするべきです。項目が多いと、ユーザーは面倒に感じ離脱してしまいます。

全てが必須項目とされている

メールアドレスや郵便番号(住所)は、予約自体には必要でしょうか。たとえば、ＤＭ等を送る為に登録してほしいとしましょう。しかし、入力項目が多いのは面倒です。

そうなると、ＤＭどころか肝心の予約自体してもらえなくなります。ＤＭの為に入力してほしいのであれば、任意入力とし「入力するとどのような得があるのか」を載せましょう。

全て手入力である

生年月日の欄はプルダウンを使うと良いのではないでしょうか。プルダウンを使う際は、デフォルト値をユーザーに合わせておくことも大切です。また、生まれ年を入力すると自動で次の項目を入力出来るというのも、スムーズに入力出来てよいですね。以下は、上記例を改善したものです。

少し、簡潔になりましたね。このように、「本当に必要な情報か」「入力するメリットが分かりやすいか(入力したくなるか)」「入力に手間がかからないか」などに注意しデザインする事が大切です。

選択操作

入力フォームなどもそうですが、サイト内で「ユーザーに何らかの選択肢を選ばせる」場合があります。ユーザーが容易に選ぶためには、様々な方法が存在します。

ラジオボタン

ラジオボタンは、「選択できるのが１つ」である時に使われます。

チェックボックス

チェックボックスは、「複数選択する事が出来る」時に使われるものです。

セレクトボックス

選択肢が多い場合、見ずらさがあったり、場所をとってしまうという問題があります。その場合は、セレクトボックスを使うと良いでしょう。

ドロップダウン

ナビゲーション部分などでは、よくドロップダウンが使われています。以下は「トイザらス」のグローバルナビゲーション部分です。

https://www.toysrus.co.jp/

ドロップダウンでメニューを表示する事で、何度もページを移動したりすることなく目的のページへ進むことが出来ます。

これらの方法では、必ずテキスト部分もクリック可能範囲に含めましょう。小さなボタン部分だけでは、スマホは特に押しずらいですよね。

まとめ

今回は、ユーザーインタフェースについて学びました。ユーザーインタフェースとは、何らかの操作を行う際の、見た目や操作感を指します。「UI」と略される場合もあります。

リンクは「ユーザーが即座にリンクであると認識できるか」が重要です。そして、フォームの項目は少なく、入力したくなる情報を載せ、任意入力欄に入力してもらうようにしましょう。

入力の手間を減らすということですね。また、選択操作の為のものを設置する際は、テキスト部分もクリックできるようにするとよいでしょう。