こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。
今回は、アプリを作成する際、最適なUIを選定する4つの指針について書きたいと思います。
UIは、人間の心理や認知に深く関わり、アプリへの信頼性を左右する重大な要素ですが、我々がアプリを作成するとき、ほとんどの場合直感的にUIを選択しています。経験豊富なUIデザイナーなら、その直感は間違っていないことが多いでしょう。
ただ、そうはいってもUIはUIデザイナーだけで決定できるわけではないので、直感を言語化して共有することがプロジェクトを前進させる力になります。本文は、学術的な内容ではなく、数多くのUIを実装してきた「現場」からのひとつの私見として書きたいと思います。
UIって？
UIがユーザーインターフェイスの略であることは言うまでもないですが、そもそもUIがアプリで果たしている役割とは何でしょうか。
よくあるUIであるモーダルを例にして考えてみましょう。モーダル型のUIは、ユーザーがボタンをクリックすることで小さなウインドウが展開されて新しい情報が出現します。当たり前のことを言うようですが、UIには、このように隠されていた情報を出現させる役割があります。
では、なぜ予め情報を隠すのでしょうか。
それは、あらゆる情報が整理されず一挙にユーザーに提供されれば、ユーザーの認知的負荷が上昇しアプリに対する信頼性を低下させるからです。アプリの信頼性が下がれば、自ずと利用率は下がるでしょうしコンバージョンも低下していくでしょう。
見方を変えるなら、UIを作成する作業は情報を整理して隠す作業であると言えます。
1.情報の量と質
UIを決定する主な要因は、情報の量と質です。
ツイッターなどで採用されているタイムライン型のUIを思い浮かべてください。
あのような情報が流れるタイプのUIが採用されているのは、ユーザーが接する情報が膨大でかつ個々の情報を見逃したとしてもクリティカルではないからです。
ツールチップは、少ない情報を付加する際に有効でしょうし、バリデーションのアラートは、情報としては少量ですが、質としては確実に視認させなければなりません。
ただし、情報の質と量が変わらなかったとしても、ユーザー環境の変化で、UIの流行り廃りはあります。
例えば、スマートフォンが普及したことで、Webサイトは縦型になり、スクロールさせるUIやトグル型のUIでコンテンツを折りたたむことが増えました。また、iPhoneでflashが動かないので、その代わりとして、パララックス型やカルーセル型のUIが流行しました。
2.優先度
情報の質のなかでも、その情報がどれぐらい優先度の高い情報であるのかもUIを決定する上で無視できません。優先度によって、情報を表示する場所やタイミングが決まってくるからです。
優先度の高い情報は、アクセス時に画面を専有させたUIで表示させたり、headerの直下など視認性の高い場所に表示します。
情報の優先度は、ビジネスサイドの判断が不可欠なことが多く、UIデザイナーやフロントエンドエンジニアだけで決められるわけではありません。 もっとも、問題になるのはビジネスサイドも情報の優先度を知っているとは限らない点です。
行政のサイトなどでよくある、注意喚起のメッセージが画面のほとんどを専有して、眉をひそめるようなファーストビューになっているサイトを見たことがあるかもしれませんが、これは情報の優先度の決定がうまく機能していないからです。注意喚起やalertメッセージを羅列しても、ユーザーの認知負荷が高まり離脱してしまえば、注意喚起は注意喚起として機能しません。
いらぬ詮索かもしれませんが、行政のサイトを運営している公務員の言い分を忖度するなら、彼らとしては、ある市民にとっては重要な情報であるけれどある市民にとっては重要でないという、多様なユーザーを相手にする行政組織の特殊性や、また公務員の人事評価が減点主義なので、注意喚起のメッセージを表示させないリスクの方が、情報を整理して埋もれてしまうリスクより大きいのかもしれません。
なんにしろ、UIがそれを運営している組織のロジックに影響されるのは、妙なことですがありえることです。
UIの優先度は、ビジネスサイドとのコミュニケーションで解決することが多いですが、解決しない場合は、コストはかかりますがA／Bテストを提案してUIをユーザーに決めてもらうのも一案です。
(なおA／Bテストの限界については、過去私が書いたこのエントリーが参考になるかもしれません)
3.学習済みUI
UIを選定するうえで、そのUIの使い方について想定しているユーザーが学習済みであるかどうかも考慮するポイントです。
ハンバーガーメニューは、一般的な学習済みのユーザーであるなら、メンタルモデルが出来上がっているのでサイトを回遊するためのメニューが隠されていると認知できます。
一方、ITに疎いユーザーにとっては、ハンバーガーメニューは三本線の謎の模様に過ぎず、何ができるのかすぐには把握できないでしょう。だからハンバガーメニューを使うべきではないと言いたいわけではなく、UIの選定に想定ユーザーのリテラシーを考慮すべきだと言いたいのです。
UIデザイナーやフロントエンドエンジニアは、なまじ自分がUIについてよく知っているだけに盲点になりがちです。
ITに疎いユーザーを対象にアプリを作成するなら、ハンバガーメニューを使うとしても下に文字で「メニュー」と情報を付加するような対応が考えられます。
ヤフーのiPhoneアプリでは、様々なユーザーが使うことを想定してか、画面下部のナビゲーションには、アイコンと文字が並べて表示されています。こういったことが参考になるでしょう。
また、優れたUIは新規につくるというより既にあるものなので、デバイスに標準的に備わっているUIかBootstrapのような広く使われているUIライブラリを優先的に使用したほうが、ユーザーの負荷だけではなく実装の負荷も低くなります。
4.考えさせない
ユーザーに考えさせないでという観点も重要です。
単にスムーズに使えて認知的負荷がかからないというだけではなく、人間が意識していない「無意識」にアプローチする手法です。
例えば、アプリの最上部と最下部は、コンテンツの両端にあるので人間の認知として注目しやすい場所です。無意識に目が行きやすい場所なので、コンバージョンポイントやナビゲーションが設置されることが多いはずです。UIの設置場所や目線の導線を適切に設計するなら、ユーザーの意識に顕在化させる前に意図した行動を促せるでしょう。
また、UIに没入させることを少し考えてみても良いかもしれません。ボタンをクリックしてスッと画面が切りかわり、それがなんとなく心地よいので気がつくと登録フォームを完了していたということがあります。
正直言って胸を張って言えることではないですが、ユーザーが熟慮の末、慎重にボタンを押さなければならないUIは良いUIではなく、（適切なマーケティングで集めた対象ユーザーを）軽率に登録させるUIの方が良いUIと言えます。
あるいは、バナーデザインでよくある、人間が美男美女を無意識に信頼してしまう傾向を利用し、美男美女の画像を掲載してサイトの信頼性と混同させる手法がありますが、UIデザインにおいてもこの手法が使えるでしょう。
例えば、信頼性の高いデータを心地よいUIで見せることで、サイトへの信頼性と混同させ・・・
人相が悪くなってきた気がするので、今日はこのあたりで終わりたいと思います。
アスタミューゼでは、エンジニア・デザイナー・PM・コンサルタントを募集中です。ご興味のある方は遠慮なく採用サイトからご応募ください。お待ちしています。
