今回は、失敗するアプリが陥りがちなデザイナーがやりがちな5つのモバイルUXデザインの事例を見ていきましょう。
App Annieによると、2017年10月の1カ月間にリリースされた新作アプリは、iOS App Storeで約5万本、Google Playで15万本を超えています。一方、年内にリリースされたアプリがサービス終了していることも珍しくありません。
収益をあげれているアプリはわずが1%程度だというデータもありますから、競争は大変激しいのです。
とはいえ、アプリ市場は右肩上がりに向上しています。アプリのダウンロード数は2014年から2016年にかけておよそ20%アップしました。
出典:App Annie
失敗するモバイルアプリのUXにはこんな特徴がある!
1. ナビゲーションバーを隠す
モバイル機器での表示に対応しているサイトやスマートフォンアプリでは、シンプルなハンバーガーメニューが多く使われる傾向があります。
小さな画面で見たときにメニューが場所を取らないため便利な点もあるのですが、これではどんな機能があるのか、このアプリで何が見られるのかを一目で知ることができません。
そこで解決策として挙げられるのは、モバイル表示では特に見せたい数個の項目だけを下の画像のようにわかりやすくアイコンとして置いておくこと、そして選択したら詳細が見られるというオーバーレイメニューにしておくことです。
Googleのプロダクトディレクターであるルーク・ロブルースキーは、ナビゲーションがすぐ目に見える位置にあることでエンゲージメント率やユーザー満足度、そして収益につながるコンバージョン率が上がるのだといいます。
デザインはただシンプルにすればいいというわけではなく、ユーザーが一番理解しやすいレベルにしておくのがいいでしょう。
2. 複雑・抽象的なアイコンの使用
アイコンはテキストほどスペースを取らず、言語の壁もないためユーザーにも意味が理解されやすいというメリットがあり、さまざまなアプリで多用されています。
しかし一方で、デザイナーの意図が伝わらないアイコンも存在するのです。
試しにインスタグラムの図を見てみましょう。インスタグラムをはじめて使うユーザーが、右上のアイコンを押すことで他ユーザーにダイレクトメッセージが送ることができると一瞬で理解できるでしょうか。
Google翻訳で使われいているアイコンも同様です。右のボタンで翻訳できる、というのは実際に押してみるからわかることで、アイコンを見ただけでは何の機能かわからないでしょう。
デザイナーがよくやる2つの勘違として、ユーザーが抽象的なイメージを見て自分と同じように理解できると思うこと、そしてアプリの使用の上でわからないことがあっても理解しようと何度も試行錯誤してくれると思うことが挙げられます。
残念ながらユーザーは使いづらいと思ったらすぐに離脱するし、アプリも使われることはないでしょう。
ユーザーにとって使いやすく、ということを考えると下の画像の”Check In”のようなポップオーバーも必要ありません。
アイコンを使うなということではなく、アイコンでオリジナリティを出そうとしなくてもいいということです。
下の画像の電話や検索、お問い合わせや設定など、ユーザーに古くから親しまれているアイコンを使うという手もあります。こういったアイコンは世界中のユーザーが共通の認識を持っているので、受け入れられやすいでしょう。
どんな機能をもつのかわかりにくい抽象的なアイコンに関しては、文字で補足する必要があります。簡単な説明をするだけで意味が伝わりますし、アイコンのキャッチーな魅力を引き出せるのです。
アイコンは、一般的に理解されやすいものであれば使うメリットは十分ありますが、意味の伝わりにくいものであれば、文字を使うことを考えた方がいいでしょう。ユーザビリティのテストもお忘れなく。
3. タップやスワイプなどの操作が多い
iPhoneが流行しだしてから、携帯はタッチして操作することが増えました。タップやズーム、スワイプなどが多くのアプリで使われています。
指ひとつで操作できるのはたしかに便利ですが、ここでも先ほどのナビゲーションバーやアイコンと同じ問題が出てきます。
まずひとつは、ハンバーガーメニューと同じで機能が目に見えない場所に隠れていること。実際に操作をするまでは、アプリを使ってどのようなことができるのか知ることができません。知られないということは、使われないということです。
そしてもうひとつは、同じようなタッチ操作はだいぶ浸透してきているものの、アプリによっては違うタッチ操作で動作するように設定されているため理解するまでに時間を要し、ユーザー自身が使い慣れるまでに試行錯誤する必要が出てきてしまうことです。
このように同じ操作でもアプリによって違う反応をもたらすため、アプリごとの操作を覚える必要があります。
ユーザーには手間をできるだけかけさせず、快適なアプリの使用体験を届けるのがデザイナーの役目です。
4. 不要なチュートリアル
初回利用者に対し、体験の質を向上することによって、また戻ってきたくなるようにする必要があります。そこで、はじめて使う人にもわかりやすいように操作のチュートリアルを作るデザイナーもいるのですが、ここにも欠点があるのです。
多くのユーザーはデザイナーが思うほどチュートリアルには興味がなく、飛ばしてしまう可能性があるからです。
チュートリアルを完了させた場合でも、情報量が多すぎると大半の内容をすぐに忘れてしまいます。そして、結局使いだしてからようやく操作がわかってくることもあり、インターフェースにひとつひとつコーチマークを入れることが良いとも限りません。
オンボーディングは、見せ方によっては効果的にうつります。ビジネス向けチャットツールのSlackでは、画面を最初に開いたときに機能の説明や使い方を見せるのではなく、Slackを使うことによるメリットを表示しています。
他にも、ユーザーがまた使いたくなるような革新的なオンボーディングを提供しているアプリが、無料語学レッスンができるDuolingoです。Duolingoを開くと、登録の前に選択した言語の簡単なレベルチェックテストを行えます。
ユーザーがアプリの価値を知るには、説明ではなく実際に操作してもらうことが一番効果的なのです。
先ほどの「タッチ操作」の項目で、GmailとApple Mailでは同じスワイプでも機能が変わってしまうということをお伝えしましたね。
タッチするとどんなことが起こるのか、アプリは使いやすいのか否か、ユーザーはオンボーディングの段階で知られたらベストでしょう。
大切なのは、アプリのことを知らないユーザーがまず何をしたらいいのかを明確にさせ、適切な見せ方で良い第一印象を与えることです。
5. クリエイティブだが意味のないエンプティーステート
デザイナーが見落としがちなUXデザインのポイントとして、ファイルが空の状態で特に表示するものがないないときの「エンプティステート」があります。
これはエラーが出たときの「エラーステート」と同様、見せ方によってユーザーが離脱してしまうか次の行動に移れるかをわけるものですので、しっかりと意識しておかなければなりません。
具体的に説明するために、ここではGoogleフォトのエンプティーステートを見ていきましょう。
一見とても整っていて無駄がなく、良いエンプティーステートに見えます。
- 何も表示するものがないのに、検索ボタンがある
- 真ん中の画像は特にタップできない
- 「追加する」機能が真ん中やもっと目立つ場所にない
- “collection”の意味が不可解
見ればみるほど、疑問が浮かんできませんか。クリエイティブなUXデザインをするために、必要なものと必要でないものをしっかり見極めておく必要があります。
LOOTSYのエンプティーステートがいい例でしょう。
さきほどの例と比べ、こちらはユーザーがとるべき行動が明確になっています。