Image credits: teamtreehouse
アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。
モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。
ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。
この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。
スプラッシュスクリーン
ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順を最適化することが不可能な場合はどうでしょうか？
ユーザーに待ってもらうようお願いしなければなりません。そして、待たなくてはならないのであれば、ユーザーの集中を保つ方法を見つけ出す必要があります。
スプラッシュスクリーンはそんな待ち時間の問題を解決し、ユーザーを引き込むための短くとも不可欠なスクリーンです。
Image credits: mobile-patterns
ここで、スプラッシュスクリーンをデザインするときに心に留めておくべきヒントをいくつかご紹介します。
【ヒント1】
GoogleおよびAppleのガイドラインは共に、起動画面を使用して読み込み時間をより早く見せることによって、ユーザー体験を改善することをすすめています。
スプラッシュスクリーンは、アプリが開始され読み込み中であることをユーザーに対して知らせてくれます。待っている間にユーザーが退屈しないよう、気晴らしとなるものを提供しましょう。例えば、なにか面白いものや、予想できないようなもの、またはユーザーの目を引きアプリを読み込むのに十分な長さであるものなどです。
Image credits: Cuberto
【ヒント２】
初期セットアップに10秒以上かかるアプリの場合は、読み込みが進んでいることを知らせるため、プログレスバーの使用を検討しましょう。
待ち時間がわからないと、終わりが見える待ち時間よりも長く感じられることを覚えておかなければなりません。したがって、どのくらい待つ必要があるのか、ユーザーに明確な指標を与えるべきです。
プログレスバーを使用して、読み込みを自然に感じられるものにしましょう。Image credits: de_martin
エンプティステート
私たちは、要素の多いインターフェイスを完璧なレイアウトに沿った素晴らしい見た目にデザインすることが多いです。ですが、ユーザーの操作を保留中の画面では、どのようなデザインを行うべきでしょうか？
そこで、これからエンプティステート（空の状態）について話しましょう。エンプティステートのデザインは非常に重要です。なぜなら、エンプティステートは一時的な状態ではあるもののアプリ内の自然にある一部であり、ユーザーのために役立つはずだからです。
エンプティステートは、ただの飾りだけではありません。エンプティステートは次にどのようなコンテンツが来るかをユーザに知らせるほかに、ある種のオンボーディング（アプリ機能の紹介）としても機能します。また、なにかうまくいかない時にはユーザーへのヘルプになります。両方のケースにおいて、画面の中身が空にならないよう、ユーザーに何かをさせなければなりません。
Image credits: inspired-ui
ここで、エンプティステートをデザインするときに心に留めておくべきヒントをいくつかご紹介します。
【ヒント１】
新規ユーザーのためエンプティステートでは、新規ユーザーの体験を重視するべきです。新規ユーザーのためにエンプティステートをデザインするときには、できるかぎりシンプルに保ちましょう。ユーザーの一番の目的に焦点をあて、インタラクティブなデザインにしましょう。必要となるものは、明確なメッセージ、的確なイメージ、そしてアクションボタンです。
Khaylo Workoutはエンプティステートの素晴らしい例です。この例では、なぜユーザーがその画面を見ることになったのか、そしてそれを修正する方法（「＋」のアイコンをタップする）を教えます。Image credits: emptystat.es
【ヒント２】
システムまたはユーザーの操作によるエラーが原因となるエンプティステートは、親しみやすさと有用性のバランスをとらなければなりません。ちょっとしたユーモアを散りばめることは、エラーに対するイライラをなくす素晴らしい方法です。しかし、より大切なことは、問題を解決する手順を明確に説明することです。
Azendooの例です。Image credits: emptystat.es
スケルトンスクリーン
通常、コンテンツに対して異なる読み込み速度を想定することはありません。つまり、コンテンツは瞬時に、もしくは非常に速く読み込まれるものだと考えています。そのため大抵の場合は、ユーザーがコンテンツの表示を待つ瞬間をデザインすることはありません。
ですが、インターネットの接続スピードはいつも保証されているわけではなく、予想よりも時間がかかる可能性があります。これは、画像などの重いコンテンツをダウンロードしている場合は特に当てはまります。もし待ち時間を短くすることができない場合は、待ち時間がユーザーにとってより快適になるようにするべきです。
スケルトンスクリーンやプレースホルダ画像（仮の画像）など一時的な情報を使用することは、ユーザーの集中を維持するのに役立ちます。読み込み中のスピナーを表示するよりも、スケルトンスクリーンは次に表示されるものに対する予測を与え、認識における負荷を低減します。
ここで、スケルトンスクリーンをデザインをするためのヒントをいくつかご紹介します。
【ヒント１】
読み込み中の画面が目を引くものである必要はありません。セクション構造のように、必要な情報のみを目立たせるべきです。Facebookの灰色のプレースホルダが良い例です。コンテンツを読み込むときにテンプレート要素を使用し、読み込まれるコンテンツの全体的な構造をユーザーが理解できるようにします。スケルトンスクリーンに使用されている画像は、ワイヤーフレームと大きく異なっていないことに気づきましょう。
【ヒント２】
読み込み中の画像に対しては、その画像に使われている色で塗りつぶされたプレースホルダを使用することができます。Mediumは、素晴らしい画像の読み込み効果を採用しています。まず、小さくぼんやりとした画像を読み込み、その後大きな画像に移行します。
画像が表示される前に、ぼやけた画像を代わりに見ることができます。Image credits: jmperezperez
アニメーションフィードバック
優れたインタラクションデザインは、フィードバックを提供します。物理的な世界では、ボタンのようなオブジェクトは、インタラクションに応じて反応を返します。ユーザーは、アプリでも同じようなレベルでの反応を期待しています。
視覚的なフィードバックは、ユーザーに操作できている感を与えます。
つまり、
- 視覚的なフィードバックは、あらゆるインタラクションの結果を伝えて、可視化し、理解できるようにします。
- 視覚的なフィードバックは、ユーザーにその操作が成功したか失敗したかについてシグナルをを送ります。
アニメーションフィードバックは、ユーザーを退屈させたり気を散らしたりしないように、即座に情報を伝え時間を節約するべきです。アニメーションフィードバックのもっとも基本的な使用方法は、次のようなトランジションに見られます。
クリックやタップを行うことで反応するアニメーションフィードバックを見ると、ユーザーはすぐにそのアクションが受け入れられたことがわかります。Image credits: Ryan Duffy
ユーザーがタスクが完了したことを示すためにボックスにチェックすると、そのタスクを含むブロックのサイズが縮まり緑色に変わります。Image credits: Vitaly Rubtsov
しかし、アニメーションが一般的なアクションの領域を超えて使われる時こそ、アプリは本当にユーザーを満足させることができます。
ここで、アニメーションフィードバックのために覚えておくべきヒントをいくつかご紹介します。
【ヒント１】
アニメーションフィードバックは、長期間にわたる使用に耐えられるものでなければなりません。最初は楽しく思えるものでも、100回使うとうっとうしくなる可能性があります。
Image credits: Rachel Nabors
【ヒント２】
アニメーションは、訪問者の気を紛らし、長い読み込み時間を無視させることができます。
Image credits: xjw
【ヒント３】
アニメーションは、ユーザー体験を楽しく記憶に残るものにします。
Image credits: Tubik
まとめ
丁寧にデザインをしましょう。アプリのそれぞれのUIにおける細かいディテールには、細心の注意を払う価値があります。
なぜなら、UXは細部の積み重ねによるものだからです。そのため、本当に素晴らしいユーザー体験を生み出すためには、UIを隅から隅まで磨きあげましょう。
