はじめに

こんにちは!
キャスレーコンサルティングLS(リーディングサービス)部の筒井です。

今回は、“ユーザーフレンドリーとは実際どんなものなのか?”という視点から、
UIについてを学んでいこうと思います。

最後には、実際に使える小技もご紹介いたしますのでお楽しみに!

UIとUXの違い

よく聞く「UI」「UX」というワードですが、あまりよく知らないよ~という方のために
ご説明したいと思います。

UX(ユーザーエクスペリエンス)とは、ユーザーが得る「体験」のこと。
UI(ユーザーインターフェース)とは、UXを提供するための「手段」のこと。

…なんのこっちゃって感じですよね。

つまり、
・新聞という紙(UI)から、情報を得る(UX)こと。
・テレビという画面(UI)から、情報を得る(UX)こと。
・スマートフォンという画面(UI)から、情報を得る(UX)こと。

なんとなく伝わったでしょうか?

UIは、体験を得るための手段なのです。
Webサイトで何か情報を得たいとき、そのサイトの操作性が、良いUIか否かを決めます。
Webサイトを操作して得られる体験までの道のりが、良いUXか否かを決めます。

では、どんなUIが「良い」UIなのかを学んでいきましょう!

良いUI・悪いUI

いきなりですが… 2枚の画面を見てください。
仮想の企業の社内で使用しているポータルサイトです。

2つの画面で、どちらのほうが印象に残りましたか?

一枚目のほうが、華やかできれいな画面でしたね。

では、「良いUI」だと思うのは?

二枚目のほうが、良いUIだといえるでしょう。

見た目だけで見たら、一枚目のほうが使ってみたい!という感じはあるかもしれませんが
文字の多さ・読みづらさから、どこがリンクになっているのかわかりづらく、
実際に操作してみたときに、違和感を感じそうな印象です。

一方二枚目は、かなりシンプルで印象には残らなさそうですが
どこに何があって、どういった操作ができるのか、一目でわかります。

良いUIというのは、直感的に操作ができて違和感の感じないものといえるでしょう。

では、具体的にどんなことを意識していけばいいのかを学んでいきます!

画面を作るときに意識するべきこと

1.色を意識する

色の持つ力というものは、私たちが意識していないと
あまり感じられませんが「カラーセラピー」というものがあるように、想像以上に大きいものです。

は落ち着きを与える、リフレッシュさせる。

黄色はインパクトを与える、注意を惹く。

は高級感や落ち着きを与える。

…などなど。

誰に見て欲しいのか、何を伝えたいのかによって意識して色を使い分けていくとよいでしょう。

2.直感で操作できる・説明のいらないシンプルな画面を目指す

あれやこれやと機能を詰め込んだ画面は、誤操作を生みやすくなります。
また、操作を習得するまでに時間もかかります。
必要な機能以外の情報は、隠しておくなどの配慮が必要です。

その画面が何を意味するのか、ユーザーに何をさせたいのかをまとめて、
情報を絞り込んで画面を作ることが大切です。

3.誰でもわかるアイコンの活用

スマホやタブレットなど、限られた画面でサービスを提供しなければならないときなどは特に、
アイコンひとつで、何を意味するのかを伝えられるととっても便利です。

また、2でも紹介したように、直感で操作できるようにするためには、ひと目でわかる必要があります。

文字をいちいち読んでいては、時間がかかってしまいますよね。
そこで、アイコンをうまく活用することが大切になってきます。

      

これらのアイコンを見たときに、考えなくとも、押したら何が得られるかということがわかると思います。

日本語を母国語としない社員を雇用している企業や、グローバルに展開している企業も増えてきています。
システムの多言語対応を行う際にも、文字を多く使用している場合、翻訳する対象が増え、かなりの手間となります。

アイコンを使用することによって、イメージだけで操作ができるということになるため、
良いUIにアイコンは必要不可欠であると言っても良いのではないでしょうか。

また、「アイコンで伝える」ということがより一層重要になってくると私は思います。

4.余白を大切にする

何かの説明文や紹介文は文字が多くなります。

画面を見たときに、文字が密集していると
読みづらさだけでなく、読むことをやめかねません。

余白をうまく利用していくことで、格段と見やすさが変わります。

縦、横、行間に余白をプラスするだけでこんなに印象が違うんですね!

【実践編】小技紹介

1.ボタンはボタンらしく

画面を操作していて、クリックしたら何も起こらなかった(ボタンでもリンクでもなかった)…
という経験はありませんか?

思い当たる方もいらっしゃると思います。

クリックすることなんて0.〇秒の世界ですが、なんだかがっかりしますよね???

ユーザーにそうさせないためにも、
ボタンは「ボタンらしく」あるべきです。

ボタンらしくとは…

 ・輪郭がある(囲ってある)
 ・ボタンにグラデーションを付け、いかにも押せそうなデザイン
 ・カーソルを当てたときに色が変化する
 ・画面内でリンクのある文字の色を統一する
 ・押したときにへこむ

これは押せるんだ!という感覚が、自然と伝わってくるものがよさそうです。

2.ユーザーに「待たせない」工夫を

何かをダウンロードしたり、アップロードしたときに、何もアクションがないまま待っていると、
ユーザーは操作ができていなかったのか、途中で止まってしまっているのかがわからず不安になってしまいます。

時間がかかる可能性のある操作をしたときは、読み込んでいることを知らせる合図やインジケーターを表示させ、
ちゃんと操作できているのか、あとどれくらいで完了するのかということを知らせる必要があります。

より時間がかかる場合は、%が表示されるようなバータイプのほうがユーザーには優しいでしょう。

待っているけど待った気持ちにさせないようなデザインなら、なお良しですね!

3.アニメーションで伝える

説明もアイコンもなしに、ユーザーに正確に使ってもらうには、
アニメーションで誘導するのも一つの手です。

iPhoneのロック画面がいい例です。

iPhoneを触ったことのある方はわかると思いますが、「slide to unlock」の文字の上で左から右に光が流れてきます。
いかにもなぞったら次へ進めそうな感じがしますね。

画面に文字こそ書いてありますが、これなら動きだけで何ができるかということが伝わります。

アニメーションによって、しっかりとユーザーにどういう操作をしてほしいかを
伝えることができたら、シンプルでかっこいいデザインのUIができそうですね!

まとめ

いかがでしたでしょうか。
さまざまなコツや小技をご紹介しましたが、
言われてみればそうかも!と思うことがあったのではないでしょうか。

長々と書いてきましたが、つまり、
ユーザーフレンドリーなUIを作るためには、ユーザーに「何も感じさせない」という必要があるということです。

シンプルでかっこいい!とかカラフルでかわいい!とか
見た目の話ではなく、UIとはあくまで「ユーザーが使いやすいかどうか」、ということです。
どんなにデザインがきれいでも使う時、操作に悩んでしまったら意味がないのです。

普段画面を見ていて、何気なく操作していることが多いと思います。
また、自然に、迷わず操作をして目的を達成できることもあると思います。
それは良いUIといえるでしょう。

もし、画面のデザインやレイアウトを考える機会があれば、是非これらのことを意識してみてください!
私も勉強を続けていきます!

以上です。
最後までご覧いただきありがとうございました!

筒井ひかる
LS(リーディングサービス)部 筒井ひかる
2018年新卒入社のエンジニア。UI/UXのデザインに興味を持ち、絶賛勉強中。