モバイルデザインに役立つ7つのベストプラクティス

連載

エクスペリエンスデザインの基礎知識

優れたUXは、アプリの成功と失敗を分けるものです。ユーザー体験の良し悪しで、毎日のように顧客を得たり失ったりするでしょう。モバイルアプリをデザインするとき念頭に置くべき重要な点は、役に立ち、かつ直感的であるかどうかです。役に立たないアプリがユーザーにとって無価値なのは明らかです。役に立ってもわかりにくいアプリは、誰がわざわざ使い方を学ぼうとするでしょう？

良いアプリは、ユーザーの主要な目標の達成に明確に焦点を合わせ、明快なインターフェースによりユーザーの不安や迷いを取り除きます。この記事では、そうした優れたユーザー体験をつくるための鍵となる、7つのデザインのヒントを紹介します。

1. 明確で滑らかな操作フロー

ユーザーが欲しい物を得るためにしなければならない努力を削減する

ユーザーは、何らかの主要な機能（例: 支払いを済ませる、新しいメッセージを確認する）をすばやく完了したい状況にしばしば置かれます。目標に集中でき、途中の障害物を避ける助けになりそうな手段をいくつか挙げてみましょう。

ユーザーの目標に注目する

複雑なタスクを、小さな行為の集まりとして考えます。小さな行為の方が、ユーザーの目標に合致する場合もあるかもしれません。
Lyftを例にすると、ユーザーの目標は、移動のための車を捕まえることです。Lyftのアプリは、多くの情報を表示してユーザーを圧倒するようなことはありません。GPSを使って自動的にユーザーの位置を検知し、ユーザーに要求するのは、車を拾いたい場所を選択することだけです。

ログインの強制を避ける

ログインの壁は、ユーザーが次に進む前に、ログインまたは登録を要求するページのことです。アプリを最初に起動した時や、サイトへの最初のアクセス時によく表示されます。ここでは、登録の要求が早すぎると、85%以上のユーザーが利用を止めてしまうという点には注目すべきです。

下の画面では、SoundCloudがコンテンツにアクセスするためのログインを要求しています。

Android用SoundCloudアプリは、最初の起動時にログインするかアカウントを作成するよう要求する。ユーザーに他の選択肢はない

ログインの壁は、オンラインショップのチェックアウトで実によく見かけます。Eコマースのサイトやアプリのデザイナーは、ログインすることで、ユーザーは以前に保存された情報を利用できるようになり、配送先の住所やクレジットカード番号の入力が不要になると考えているようです。Amazonでもこの問題が存在しています。ゲストとしてチェックアウトするという選択は提供されていません。

Amazonは、ユーザーにチェックアウトする前のログインまたは登録を強制する

登録するという選択肢をゲストチェックアウトと置き換えても、おそらく大きな問題は起きないでしょう。ユーザーがチェックアウトする過程でゆっくりとデータを集め、購入後にクーポンなどの動機を添えてパスワードを尋ねれば良いのです。ちょうどSmashing Magazineがしているように。

Smashing Magazineのチェックアウト時のフォーム

情報過多を回避する

“情報過多”という用語は、ハンター大学の政治学教授Bertram Grossの1964年の著書”The Managing of Organizations”に始めて登場しました。Grossは情報過多を以下のように定義しています。

「情報過多は、システムへの入力の総量が、処理能力を超えたときに起こります。意思決定者の認知的処理能力は限られており、そのため、情報過多が起きると、意思決定の品質の低下が発生しやすくなります」

情報過多は深刻な問題で、ユーザーが消化し切れないほどの情報を感じることで、判断をしたり操作する障害につながります。情報過多を防ぐ簡単な方法がいくつかありますが、良く使われている手法のひとつは、「分割」です。チェックアウトのフォームを例に取ると、経験的には、一度に表示する入力フィールドはせいぜい5～7つにして、徐々に必要に応じてフィールドを開示するのがよい方法です。

特にユーザーから多くの情報を要求するときは、分割することでフォームがすこし軽く感じられる。 画像: Murat Mutlu

2. 見えないユーザーインターフェース

コンテンツをインターフェースとして使う

大抵のアプリの場合、価値を提供するのはコンテンツです。ソーシャルネットからのフィード、ニュースの更新、To-Doリスト、システムのダッシュボード、いずれも、コンテンツが人々がそれを見ようとする理由です。そのため、コンテンツに焦点を当て、ユーザーに不要な要素を削除することは重要です。注意を保てる時間の短さを考えると、すばやく、ユーザーを探しているコンテンツに誘導すべきです。コンテンツ自体がインターフェースになるべきなのです。

マップ

Googleマップは素晴らしい例です。デザイン変更の際に、Googleは、地図自身がインターフェースであると言って、不要なパネルとボタンをすべて取り除きました。

カード

インターフェースとして使用できるもう1つのパターンは、カード型のデザインです。カードは、操作可能なコンテンツを表示する際に優れた方法です。なぜなら、カードはその性質上、ごく自然にコンテンツのまとまりを表現するからです。

カードはコンテンツの調査を促す。画像: Ramotion

良くある使い方の例として、Swiss Airのアプリが挙げられるでしょう。運賃表は、全ての行が折りたたまれた状態で、必要に応じて開くことができます。

Flipboardは、カード型インターフェースの別の好例です。Flipboardはパーソナライズされた雑誌で、ニュースフィードやSNSからコンテンツを集約し、ストーリーの発見や共有ができます。

それぞれのカードは、関連付けられた情報の分かりやすい部分を表しています。

3. 隙間を与える

重要なコンテンツに注意を引くため、空白を使用する

空白は、要素の間あるいは周囲の何もない領域で、普段あまり気に留めることはありません。デザイナーによっては、貴重なスペースを無駄にしていると考えるかもしれませんが、モバイルデザインにとっては本質的な要素です。Jan Tschicholdは以下のように言っています。

「空白は、能動的な働きを持つ要素とみなされるべきです。受動的な役割の背景ではありません」

詰め込み過ぎを回避する

情報が多すぎるインターフェースは過負荷の状態です。ボタン、画像、テキストを追加するたびに、画面はどんどん複雑になります。

詰め込み過ぎはデスクトップ上でも悪い選択だが、モバイルではその100倍悪い。 画像: ftrain

サンテグジュペリの有名な言葉があります。

「完璧さが達成されるのは、取り除く物が何も無くなったときである」

本当に必要でない物はとにかくモバイルデザインからは取り払いましょう。詰込みが軽減されれば、理解しやすさが増します。一般的なルールは、ひとつの画面にひとつの主要な操作です。デザインするアプリの全ての画面が、利用者に価値のあるひとつの操作をサポートするようにします。すると、学びやすく使いやすく、必要な場合の追加や構築がしやすくなります。

コンテンツの優先順位付け

空白は、可読性だけでなく、コンテンツの優先順位付けにも大きく影響します。UIを簡素化し、UXを向上できるのです。

「より少ないはより多い」の原則に従う。 画像: Material Design

4. シンプルな ナビゲーション

ナビゲーションは、ユーザーがコンテンツを見て操作したくなるよう促すもの

ユーザーの操作を助けることは、すべてのアプリにとっての優先事項です。モバイルのナビゲーションは、見つけやすく、わかりやすく、画面領域をできるだけ占有しないもので無ければなりません。しかし、モバイルのナビゲーションをわかりやすくするのは難題です。画面サイズによる制限と、コンテンツを優先する必要があるからです。

モバイルアプリ用ナビゲーションシステムの設計には、いくつかのルールを考慮しましょう。

これらのルールのすべてに精通しているデザイナーでも、わかりにくく、操作しにくく、見つけにくいメニューを作ることはあるかもしれません。ナビゲーションのUIパターンは、優れたユーザビリティへの近道です。いくつかの例を見てみましょう。

トグルメニュー

特に小さな画面では、インターフェースの簡素化は魅力的な選択です。しかし、メニュー内にアプリの重要な要素が隠れると、利用率を損ないます。見えないナビゲーション項目は利用者を減らし、ユーザーを手間取らせ、混乱させます。

トグルメニューを持つインターフェース (右) は、左よりもすっきりとした見た目だが、ユーザーの獲得数は減少した。 画像: Luke Wroblewski

タブバー

タブバーとナビゲーションバーは、ナビゲーションの項目が比較的少ないアプリに適しています。iOSとAndroid両方で、このパターンは採用されています。タブバーのすばらしい点は、すべての主要なナビゲーション項目を予め表示していることで、単純に一度タップするだけで、ユーザーは即座に別のビューに移動できます。この種類のナビゲーションでは、それぞれの項目にラベルの併記を強くお勧めします。ナビゲーションを推理ゲームにはしないように。

タブバーでは、1回のタップで主要なナビゲーション項目を利用できる。 画像: Ramotion

トグルボタン

メニュー項目が少ない場合は、トグルボタンを利用できます。タブバー同様すべてのオプションが表示されていて、1回のタップでアクセスできます。

フルスクリーンのナビゲーション

これまでに書いたことと矛盾するように聞こえるかもしれませんが、フルスクリーンのナビゲーションは良い選択肢かもしれません。これは、すべてのナビゲーションの選択肢を一覧表示するページ (通常はホームページ) のことを指しています。コンテンツを全く表示することはできませんが、フルスクリーンのナビゲーションは、シンプルさと一貫性に優れています。ユーザーが目的を選択したら、その後に画面一杯にコンテンツを表示できます。このナビゲーションが適している場合のひとつは、ユーザーが特定のタスクの達成だけに集中するWebやアプリ（例：フライトの確認、デバイスの設定の変更）です。もうひとつは、ナビゲーションのある階層だけにユーザーの行動が制限されるセッション中（例：特定のサービスや製品が興味の対象になっている）です。

Cooklyは、画像を使ったフルスクリーンメニューを使用し、雰囲気を作り、ユーザーのアプリに対する関心を高めている。 画像: Patrick Wong

このナビゲーションは、、ツリー構造のナビゲーションに便利です。例えば、トップの階層に7つの選択肢を持ち、それぞれの選択肢がサブカテゴリを下の階層にもつ場合です。

画像: Dennis Kardys

検索ボックス

検索がアプリの主要な機能であれば、ユーザーの目の前に置く必要があります。隠してはいけません。画面上部に表示するか、検索モードを起動することが見ればわかる要素 (虫眼鏡のアイコン) を表示します。

検索がアプリの第一の機能である場合は、表示するだけでなく目立たせ、ユーザーが最短で辿り着けるようにする。 画像: Think With Google

5. 片手での操作

デザインを大きな画面にも適合させる

iPhone 6や6 Plusが登場し、画面サイズが拡大傾向にあることが明らかになってきました。

これは、人々が自分のモバイルデバイスを使用する3つの基本的な方法です。

人々が携帯を手にする基本的な方法。 研究: Steven Hoober

Steven Hooberの研究によると、85%のユーザーが片手で電話を使用しています。下のヒートマップは、2007年以降のすべてのiphoneのディスプレイで、親指が届く領域を示しています。ディスプレイが大きいほど、操作しにくい領域が増えることがわかります。

右利きの人の親指操作が可能な領域。 研究: Steven Hoober

ユーザー体験を向上させるために、デザインを適応させましょう。大きなスクリーン（iPhone 6やなど）でも、アプリが簡単に（そして完全に）片手で操作できることを確認しましょう。

良く使われるアクションとナビゲーションは緑の領域に

頻繁に使用されるメニューや、一般的な操作項目は、親指ひとつで会的に届くように、緑色の領域に配置します。

iOS用Pocketアプリでは、すべてのナビゲーション項目がフッターにあり、普通に握っている状態では、簡単に触ることができる。 画像: Dmitry Kovalenko

注意が必要な行為は赤い領域に

やり直しのきかない操作（削除や消去など）は、届きにくい赤い領域に置きましょう。ユーザーが誤ってタップしにくいようにするためです。

Appleのメールアプリの「編集」ボタンは、届きにくい領域にある

6. コンテンツ出現の速度

ユーザーにコンテンツを待たせない

いつも即座に反応できれば最高ですが、アプリが速度のガイドラインを満たせない場合もあるでしょう。インターネットへのアクセス状態が悪かったり、OSの更新のようにそもそも重い処理もあります。できるだけ、アプリを速く、応答性を良くします。

枠組みから表示する

時間がかかってユーザーを待たせるときは、進行状況を示しましょう。プログレスバーは、その目的は良くても、結果はよくないことがあります。Luke Wroblewskiの言葉のように、プログレスバーは待たされるという事実も提示します。残り時間のカウントダウンを見ているようなもので、だんだん進行が遅くなったように感じられてくるのです。プログレスバーの良い代替案はスケルトン画面です。コンテンツを配置する枠組みを空の常態で表示し、情報を読み込んだ順に枠内に表示していきます。プログレスバーの代わりに、スケルトンが面を使うと、実際に読み込んだ情報を表示でき、次への期待もつくりだせます。アプリケーションが動いていることが目に見えるため、待たされているユーザーに、処理が進行しているような感覚を与えます。

左側はコンテンツが段階的に読み込まれ、UIが徐々に埋められていく。 画像: Tandem Seven

視覚的な気晴らし

認知は、実際の速度と同じくらい重要です。待たされている間、アプリが何か見て楽しい物をユーザーに与えれば、待っているということをあまり気にしなくなるでしょう。従って、何か起きるまで待たせている間は、退屈させないような気晴らしを提供しましょう。

進行状況を示す気のきいた表現は、ユーザーの待ち時間に対する知覚を減らす。 画像: Creative Dash

バックグラウンド処理

差し迫った操作から先に表示されるよう、バックグラウンド処理を利用しましょう。バックグラウンドでの処理には2つの利点があります。ユーザーから隠せることと、ユーザーからの要求の前に開始できることです。

この手法の良い例としては、Instagramの画像アップロード処理があります。ユーザーが共有したい画像を選択した時点でアプリはアップロードを開始し、ユーザーが共有ボタンを押そうとする頃にはアップロードが完了します。するとユーザーは即座に画像を共有できるのです。

Instagramは、画像をバックグラウンドでアップロードしている最中に、ユーザーにタグを追加するよう求める

7. タイミングよくプッシュ通知

メッセージを送信する前によく考える

毎日のように、ユーザーは無意味な通知を大量に目にして、まさに迷惑しています。迷惑な通知は、人々がモバイルアプリをアンインストールする理由の第1位です。（調査の回答の71%）

以下は、ユーザーに嫌われない通知のために覚えておくべき4つの原則です。

すべてのメッセージ意味を持たせる

通知をユーザーにプッシュするとき、最も一般的で、長期的に最も有害な過ちは、ユーザーが処理できない程の通知を送ることです。大量の通知でユーザーを困らせれば、行きつく先は、アプリの完全な削除かもしれません。

すべての通知を同時にプッシュしない

プッシュする価値のある通知

ユーザーがアプリを使い始めたら、通知による中断よりも十分に価値がある限り、ユーザーは通知を受け取ることを嫌がりません。ですが、ユーザーを引き込むためだけに通知を送信するのは避けましょう。例えば、Facebookは、定期的にランダムに選んだ人とつながるように、ユーザーへの招待を送信します。これは、ユーザーをアプリから遠ざけるだけの貧弱な試みでしょう。また、これは無意味な通知による割り込みでもあります。

軽率にユーザーをアプリから引き離さない

パーソナライズしたコンテンツで、ユーザーを刺激し喜ばせることは重要です。Netflixは、注意深く視聴データを使って、テーラーメードのおすすめ項目を表示します。

Netflixは、プッシュ通知をパーソナライズし、ユーザーの好きな番組が視聴可能になると表示する

通知の時間

通知をユーザーにあわせて仕立てるなら、何を伝えるかだけでなく、いつ伝えるかも気にかけましょう。奇妙な時間に贈ってはいけません。深夜12時から朝6時の通知は、ユーザーを起こしてしまうかもしれません。

もちろん、ユーザーは寝ている間、通知を無効にすることができます。しかし、これは良い解決策ではありません。本当の解決策は、即座に通知することが決定的な状況でない限り、ユーザーに都合の良い時間に通知することです。comScoreによれば、午後6時から午後10時は通知に適した時間です。もちろん、ユーザーの所在地による時差は常に考慮しましょう。

数多くのプッシュ通知が誤った時間、誤った場所に送信される 画像: Pomegranate

多様なメッセージ手段の利用

最も効果的なモバイルメッセージ戦略は、プッシュ通知、電子メール、アプリ内通知、ニュースフィードの更新など、異なる種類のメッセージを使用することです。メッセージ手段を多様化するときは、それぞれのメッセージが連携して、全体として優れたユーザー体験を実現するようにするべきです。

緊急性と内容に基づいて適切な通知手段を選択する。 出典: Appboy

まとめ

他のデザイントピックと同様に、この記事で共有したヒントは単なるスタートです。最高の結果を求めるには、自身のアイデアに、これらの考え方を取り入れてまとめあげることです。デザインは、ユーザーのためということを忘れずに。アプリを継続的に進化するプロジェクトとして捉え、データ解析やユーザーからのフィードバックを使用して、定期的に体験を向上させましょう。

※ この記事はMobile Design Best Practices（著者:Nick Babich）の抄訳です