モバイルのUXデザインにおけるベストプラクティス

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

Mobile Design Best Practices (2016-11-14)

アプリはコンテンツやサービスを提供するための、今日(こんにち)の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。

この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための7つのヒントをご紹介します。

1. 一つの画面につき、一つの操作

ユーザーが情報を取得する際の努力を軽減する

皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action(行動喚起)は一つに留めましょう。こうすることで、ユーザーはアプリを理解・使用しやすくなり、また必要なときに簡単に要素を追加することができます。

Uberを例に挙げてみましょう。Uberは、アプリを使用する人の目的がタクシーに乗ることだということをよく理解しています。Uberのアプリには、ユーザーを圧倒してしまうような多くの情報がありません。ジオデータに基づき自動的にユーザーの位置を検出するので、ユーザーがやらなければならないことはタクシーを拾う場所を選択するだけです。

2. 目に見えないUI

コンテンツはインターフェイスそのもの

コンテンツに焦点を当て、ユーザーのタスクと関係ない不要な要素を取り除きましょう。残念ながらユーザーの集中力は低下するので、彼らが探しているコンテンツに素早く案内する必要があります。

コンテンツは一種のインターフェイスになるのです。Google Mapsはその素晴らしい例です。Googleはデザインを見直す中で、不要なパネルやボタンを全て取り払いました。Googleはこれに対し「マップそのものがインターフェイスなのです」と述べました。

3. 十分な余白

ネガティブスペースを使用して、重要なコンテンツに注目を集める

ホワイトスペース、もしくは「ネガティブスペース」と呼ばれる余白は、デザインやページレイアウトの要素の間や周囲にある空白部分のことを指し、しばしば見落とされたり軽視されがちです。多くのデザイナーは貴重な画面領域の無駄遣いだと考えるかもしれませんが、ホワイトスペースはモバイルデザインにおける重要な要素です。

ホワイトスペースは立派な能動的要素であり、受動的なただの背景要素などとみなすべきではありません―Jan Tschichold氏

ホワイトスペースは文字の読みやすさとコンテンツの優先順位付けだけではなく、視覚的なレイアウトにおいても重要な役割を果たしています。そのためUIを簡素化し、UXを向上させることができるのです。

デザインにおいては、「Less is More」の原則に従いましょう。画像著作権:Material Design

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

ナビゲーションは自明であるべき

全てのアプリにおいて、アプリ内の回遊を支援することに高い優先度を置くべきです。モバイルナビゲーションは見つけやすく、アクセス可能で、小さな画面スペースに収まらなければなりません。しかし、ナビゲーションをアクセス可能にすることはモバイルにおいては課題となります。画面の大きさの制限から、単なる見た目よりもコンテンツなどの機能を優先させる必要があるためです。

タブバーやナビゲーションバーは、ナビゲーションの選択肢が比較的少ないアプリに良く適しています。これは、すべての主要な選択肢を一度に表示し、ユーザーがたった1回タップするだけで瞬間的に複数のページを行き来することができるという点で、大変優れています。

AppleのAppStoreにおける、タブバーによるナビゲーション

5. ワンハンドオペレーション(片手操作)

デザインをより大きな画面に適応させる

iPhone 6とiPhone 6 Plusのリリースにより、画面サイズの大型化に拍車がかかりました。

携帯電話を手に持つときの基本的な方法は、次の3通りです。

Steven Hoober氏の研究による、携帯電話の基本的な持ち方

調査したユーザーのうち85%が、片手で携帯電話を操作しています。次のヒートマップは、2007年以降のiPhoneすべての画面サイズに対し、親指が使用される範囲の種類を示しています。画面が大きくなるほど、親指の届きやすい範囲は狭くなることがわかります。

Scott Hurff氏の観測から導き出された親指ゾーン

UXを向上させるためには、これらにデザインを適応させることが必要です。アプリが、大きな画面(iPhone 6や7など)でも片手で簡単に(かつ完全に)使用できることを確認するようにしましょう。親指の届く範囲内にナビゲーションオプションを配置しましょう。

iOS向けのPocketのアプリ。すべてのナビゲーションコントロールはフッターにあり、ユーザーがいつも通り携帯電話を手に持っている状態で簡単に届きます。画像著作権:Dmitry Kovalenko

6. アプリが早く起動するようにする

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

可能な限り高速で応答性の良いアプリにしましょう。動作が速く見えるように、バックグラウンドで処理を行いましょう。

バックグラウンドでの処理に組み込まれる動作には、2つの利点があります。目に見えないということと、ユーザーが指示をする前に開始されるということです。Instagramへの写真のアップロードが良い例です。ユーザがシェアする写真を選択するとすぐに、アプリはアップロードを開始します。

Instagramは、バックグラウンドで写真をアップロードしている間にタグを追加するようユーザーを導きます。そしてシェアボタンを押す準備が整う頃までにアップロードが完了して、即座に写真をシェアすることが可能です。

7. プッシュ通知を賢く利用する

メッセージの利用は計画的に

ユーザーは日々、自分たちの活動の邪魔をする役に立たない通知攻めに遭い、非常に迷惑しています。迷惑な通知は、モバイルアプリをアンインストールする原因となる一番の理由です(回答者の71%)。

モバイルであるからには、すべてのメッセージに意義があるべきです。興味を引く目的で通知を送らないようにしましょう。ユーザーにとって価値があると思う場合にのみ、通知を行いましょう。

ヒント:効果的なモバイルアプリのメッセージング戦略を確立する最も良い方法は、異なるタイプのメッセージを使用することです。例えば、プッシュ通知や、メール、アプリ内通知、そしてニュースフィードのメッセージなどです。メッセージを多様化しましょう。優れたUXを作るため、メッセージは完璧に調和して連携する必要があります。

緊急性やコンテンツに基づいて、適切な通知方法を選択しましょう。出典:Appboy

まとめ

モバイルアプリをデザインするとき心に留めておくべき最も重要なことは、確実に有用でありかつ直感的であるようにすることです。

アプリが有用でない場合は、ユーザにとって実用的な価値がないため、使用する理由はありません。有用だとしても多くの時間と労力を必要とする場合、誰もその使い方をわざわざ学ぼうとはしないでしょう。良いUI及びUXデザインは、この2つのデザイン上の問題どちらにも対処できるものです。


イベント

2017/12/05(火)
Design Thinking Square