Image credit: Segue technologies

モバイル向けデザインのあるべき姿

ユーザーの求めるモバイルアプリを生み出す7つのTips

Ray Yamazaki
9 min readDec 17, 2016

--

by Nick Babich

アプリは今やコンテンツやサービスを届ける主流の確実なやり方です。しかし、飽和状態のマーケットでユーザーの関心を上手に得て彼らを新規に取り込むには、どれだけ価値のあるアプリを作らなければならないのでしょう?

以下にご紹介するのは、素晴らしいモバイルのユーザー体験を作り上げるカギだと私が考えるUXデザインの7つのtipsについてです。

1.ひとつのスクリーンにタスクはひとつだけにする

ユーザーが何かをする時に手間がかからないようにしましょう。

あなたがデザインするアプリのどのスクリーンについても、使う人にとって本当に意味のある行動が何かをしっかりと吟味して1つに絞り、それをサポートするものにしなければなりません。それぞれのスクリーンはたったひとつのタスクのためだけにデザインします。CTAは1回で済ますようにしましょう。これは使い馴れるのが簡単で、必要に応じて楽に機能を付加したり、新たなスクリーンを構築したり出来ます。

例としてUberを挙げてみましょう。彼らはアプリを使うユーザーの目的がタクシーを捕まえることにあると分かっています。そのため多過ぎる情報を詰め込んでユーザーを圧倒したりはしません。GEOデータに基づいてユーザーの場所は自動的に特定されるため、ユーザーが唯一しなければならないのはタクシーを拾う場所を選ぶことくらいです。

2.存在を感じさせないインターフェースを目指す

コンテンツそのものがインターフェースになります。

コンテンツにフォーカスして、ユーザーのタスク処理に役立たない不必要な要素はスクリーンから全て取り除きましょう。注意を逸らすものが減ると、ユーザーは素早く、探しているコンテンツに辿り着けます。

コンテンツそのものがインターフェースになるのです。Google マップが良い例です。リデザインの際、Googleは不必要なパネルやボタンを全て取り除きました。Googleの考えでは「マップそのものがインターフェース」になるのです。

3.息抜き出来るスペースを作る

重要なコンテンツに注意を向けてもらうには、コンテンツを何も置かないスペースを活用しましょう。

デザインやページ レイアウトで各要素の間の何もないスペースのことを「ホワイトスペース」とか「ネガティヴスペース」と呼びますが、これらは重要性が見落とされたり、無視されがちです。多くのデザイナーは貴重なスクリーンのスペースの無駄遣いだと考えるかもしれませんが、「ホワイトスペース」はモバイル向けデザインにとって不可欠な要素なのです。

「ホワイトスペース」は何でもない背景ではなく、積極的な意味を持つ空間的要素だ。

ー ヤン・チヒョルト

「ホワイトスペース」を上手く取り入れれば、コンテンツの読みやすさや優先順位付けだけでなく、レイアウトも見やすくなります。こうしてUIを単純化したりUXを改善出来るのです。

「より少ないことは、より豊かなこと」というデザイン原則を参考にしてみましょう。 Image credit: Material Design

4.ナビゲーションはシンプルにする

ナビゲーションは分かりやすくしましょう。

ユーザーが使いやすいナビゲーションにするのは、あらゆるアプリにとってやらなければならない事の上位に入ります。モバイル機器でのナビゲーションというものは本来見つけやすく、アクセスしやすく、しかもほとんどスクリーン上にスペースを取らないはずです。しかし、モバイル機器でアクセスしやすいナビゲーションを実現するのは優しくありません。なぜなら、画面サイズそのものに制限があったり、Chromeではコンテンツに優先付けをする必要があるからです。

タブ・バーやナビゲーション・バーは、ナビゲーション・オプションがさほどないアプリにちょうど良いでしょう。これらは極めて優れています。なぜなら必要なナビゲーション・オプションはほぼ全て表示出来るだけでなく、たった1回タップするだけで、ユーザーはあるページから別のへとすぐに移れるからです。

AppleのAppStoreに見るタブ・バー・ナビゲーション

5.UIは片手で操作出来るようにデザインする

より大きなスクリーンにデザインを合わせましょう。

iPhone 6、iPhone 6 Plusの登場でスクリーンサイズは拡大の一途を辿るだろうということがハッキリしました。

スマホの持ち方は大雑把に言って3種類あります。

スティーブン・フーバーによるスマホの持ち方調査

調査によると85%のユーザーは片手でスマホを使います。下のヒートマップは2007年以降のiPhoneのディスプレイ・サイズと親指の届く範囲を示しています。これを見るとディスプレイが大きくなるにつれ、簡単に指が届く範囲が狭まっているのが分かります。

スコット・ハーフによる「親指ゾーン」

ユーザー体験を充実したものにするためにデザインを重視するのは大切なことです。あなたのアプリがiPhone 6や7の大きなスクリーンでも片手でたやすく完全に使えるようにしましょう。親指が届く範囲にナビゲーション・オプションを置くようにして下さい。

iOSバージョンのPocketでは全てのナビゲーション・コントロールはフッター部分に置かれています。普通の持ち方でどこでも指が届きます。Image credit: Dmitry Kovalenko

6.アプリの表示を高速化する

コンテンツ表示に時間がかかってユーザーを待たせないようにしましょう。

アプリを高速化し素早く反応するように出来るだけのことをしましょう。バックグラウンドでの処理を行い、アクションを素早く見せるのも1つです。バックグラウンド・オペレーションでのアクションには2つのメリットがあります。ひとつはユーザーの目には見えないことで、もうひとつはユーザーのアクションより一足先に処理を始められることです。この良い例はInstagramに写真をアップすることです。シェアする写真をユーザーが選ぶや否や、アップロードが始まります。

Instagramはバックグラウンドで写真をアップロードする際、ユーザーがタグ付けをするようにデザインされています。ユーザーがシェアボタンを押す準備が出来るまでには、アップロードは完了し、すぐに写真をシェア出来るようになっています。

7.プッシュ通知を賢くつかう

メッセージを送る前に見直しましょう。

毎日毎日、ユーザーはゴミ同然の通知を大量に送りつけられ、やるべき事から気を逸らされています。もうこれは迷惑以外の何物でもありません。

迷惑な通知はユーザーがアプリをアンインストールする理由の第1位です(71%の回答者が選択)。

モバイルでは1つ1つのメッセージが大切です。「ユーザーの関心を引くため」にメッセージを送るのはやめましょう。ユーザーにとって価値があると思える時だけ送りましょう。

ティップス:モバイルアプリのメッセージング戦略として最良なのは、様々な種類のメッセージを併用することでしょう。プッシュ通知、電子メール、アプリ内通知、それにニュースフィード。メッセージの送り方に多様性を持たせると、それぞれが完璧に調和して素晴らしいユーザー体験が生じます。

内容と重要性に応じて適切な通知を選びましょう。Source: Appboy

結論

モバイルアプリをデザインする際に心に留めて置くべき1番大切なことは、「役に立つこと」と「直感的であること」です。役に立たなければユーザーにとって何の価値もなく、それを使う理由など何もないのです。

その一方で、役に立っても慣れるまで時間と労力が余りにも必要とされるようなら、ユーザーは面倒くさがって使い方を学んだりしないでしょう。

優れたUIやUXのデザインはこの2つの問題に正面から取り組んでいます。

最後まで読んで頂いて有難うございました!

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz

--

--