ユーザーを混乱させないUIとは

Pocket

アプリを使用するとき、皆さんは操作に関してストレスなく使用できていますか?あえて説明を聞かなくても、「これは押せる」「これを押せば戻る」など理解できていますか?
普段アプリを使用している方なら、チュートリアルを確認したり説明を聞かずとも「これは押せるな」と、“ある程度予想ができ”スムーズな操作ができるはずです。
実はこの“ある程度予想できる”というのはユーザーの使用経験が豊富というだけではなく“ある程度予想できる”ように設計されているからなのです。
UIでユーザーが混乱してしまう場面は様々です。目的の機能が見つからない、操作方法がわからない、表示されているアイコンの意味がわからないなど、書き出したらキリがないほどあります。
今回は色使い、エフェクト、位置でユーザーを混乱させないための方法をご紹介いたします。

ユーザーを混乱させないためには…

UIでユーザーを混乱させないためには、デザインのルールを決めサービス内で統一する事が必要です。UIデザインでは、色使い、エフェクト、レイアウトなどサービスを通して統一させる必要があります。

UIではタップできる色・強調する色などを統一する必要があります。例えばユーザーが最初に目にするアプリTOP画面でテキストリンクが青だった場合、ユーザーは「青が押せる」と認識します。しかしTOP以外のページでテキストリンクが赤だった場合、ユーザーは「押せるのか?」「強調しているだけなのか?」「押せるようだが特別な意味があるのだろうか?」と、青から赤に変わるだけでこれからの動作やこの後に起きる出来事について余計なイメージが広がり混乱してしまいます。また、見落としてしまうかもしれません。少し大げさな言い方をしましたが、たとえ混乱が一瞬だとしても、これをページ遷移する度に繰り返すとストレスになります。

エフェクト

TOPで押したボタンは立体感のない角丸ボタンだったのに、別ページでは立体的だった。このように、ページ毎に知らない形のボタンに出会うとユーザーは遷移前のページとは関係のないページに来てしまったような違和感を覚えてしまいます。
エフェクトなどのあしらいは統一することが望ましいです。

位置、構成

目的は同じでもページ毎に構成が違う、そのような場合もユーザーは混乱します。

アイコンや操作方法を
OSのガイドラインや定番のものにそろえる

こちらはとても重要なことです、ユーザーはOSの操作に慣れています。ですので見慣れたOSと同じアイコンや操作法でUIを設計すれば当然利用しやすくなります。アプリを設計する際はまず、OSごとに用意されているデザインガイドラインを確認する事をオススメします。
また、アイコンや検索ボックスなどを頻繁に利用されている定番のデザインにすることで、ユーザーがアイコンの意味や操作法を調べる手間が無くなるめ、利用しやすくなります。

_

同じ位置・同じサイズ・同じ色で作られていれば、ページが変わろうともユーザーはこれまでの経験からすぐに意味を理解します。
UIは皆さんの意識しないところで使いやすくなるよう様々な気配りがされています。また、レイアウトが統一されているほうが作りやすいという製作者側のメリットもあります。
他の表現については、機会があればまたご紹介いたします。では。

Pocket