Gluegent Blog

Gluegent Blog

UI/UXの基本について考えよう

  • 雑記

 こんにちは!
 たきたてはなびです。

 最近UI/UXについて考える機会がより増えたこともあり、改めてUI/UXの基本的な考えについてまとめるブログを書こうと思います。

UI/UXの基本について考えよう
 目次

はじめに

 はじめにUI/UXとはそもそもなにか、という話をしたいと思います。UI/UXについて以下のように簡単にまとめてみました。

  • UI:見た目やデザイン。使う人がさわるところ(画面のデザイン、ボタン、配置など)
  • UX:ユーザー体験。使った人が感じること(「便利」「わかりやすい」「ワクワクする」など)

 景色に溶け込んだ消火栓などがたまに話題に上がりますが、見た目がおしゃれでいいものが必ずしも使いやすいものとは限らないようにウェブアプリのUIを検討する際にはUXを考慮することが非常に重要となっています。

 今回はUXにも注目してUIを検討する上で重要なポイントについていくつかまとめていきたいと思います。

説明の必要がない直観性

 アプリを使うときにやりたいことをやるボタンが見つからないこと、ありますよね。日常的に触れる機能については特に一目でわかりやすいこと、利用しやすいことなどが重要となります。

 ボタンの場合はまず、一目でクリックできることが伝わる必要があります。 例えば、画像を利用した場合などにはそれがクリックできるのかわかりにくいケースもあるので注意が必要ですね。そして日常的に押すボタンの場合には押しやすさも重要になります。よく押すボタンが小さすぎると毎回少しずつ利用者にストレスが溜まってしまいますよね。よく利用するUIはその画面の中で目立つこと、そして一定の大きさがあり利用するときにストレスを与えないことが重要となります。

 そして直観性の観点から、見た目から何をする機能なのかがわかるということが非常に重要となります。多機能なアプリを利用する際にこの機能がきっとあるはずなのにどこにあるのかわからない、並んでいるボタンを押したときに何が起きるのかがわからないといった困った経験は誰しもあると思います。

 これらはUXを大きく下げてしまう、UI/UXを考えるにあたって最も避けたい事象の一つです。そのため、わかりやすいアイコンを利用し同種の機能についてはサービス内で統一することや利用用途などに合わせて配置を整えることが重要となります。連続して利用する機能や同じ対象に対して動作する機能などは近くに配置することでわかりやすくなるでしょう。このグルーピングも非常に重要な要素の一つとなります。どのUI /UXにも共通して言えることですが、利用者が利用しているシーンを想像しながら考えていくことでよりよいUI/UXを検討することができるでしょう。

迷わないためのサービス全体の統一感

 前述した内容と重複する部分もあるのですが、やはりサービス全体の統一感も重要な要素の一つとなります。

 まず、色がサービス全体で統一感があることでまとまって見えると思いますが、色をまとめる効果はそれだけではありません。例えば赤色のUIを見たときに利用者は何を感じるでしょうか。多くの利用者が「中止」や「キャンセル」などのネガティブな操作や「危険」や「エラー」などのマイナスなイメージ、そして「目立っていて重要度が高い」などの印象を受けると思います。このように色には様々な印象や、役割のイメージがあります。サービス内でそれぞれの色の役割を定義して統一することで、利用者が未知の要素に対しても色から機能をイメージすることができるメリットがあります。

 そして、前述したアイコンの統一も重要です。こちらもアイコンから機能を推測することができるようになります。アイコンのパワーは強力ですが同時にリスクも存在します。同じアイコンや似たアイコンを別の機能に使ってしまうと利用者が機能を勘違いしてしまうリスクが高くなります。そのため、アイコンもサービス内で統一し管理していく必要があります。

 また、表記の統一も重要です。例えば「更新」と「リフレッシュ」がどちらも使われていたりすると、アイコンと同様に同じ機能なのか全く別の機能なのかわかりにくくなってしまいます。もちろんわかりやすい言葉選びも重要となりますね。

 このようにサービス内で様々な要素に統一感を持たせていくことで、たとえ新機能を実装した際などにも利用者が迷わなくなるでしょう。

最後に

 今回はUI/UXの基本的な話を簡単にまとめさせていただきました!

 最近は新機能のUI提案だけでなく、既存機能のUI/UX改善についても考えています。 
 今後もグルージェントフローを中心にGluegentシリーズのUI/UXを改善していき、より使いやすいサービスにアップデートしていく予定です!ぜひ利用しているときに気になる点や引っかかった点などありましたらお気軽にご意見いただけましたら幸いです…!