毎日の通勤者
交通案内画面には洗練された路線図が表示されているが、次の発車時刻はその下に埋もれている。
発車時刻、運行への影響、次に取るべき行動を路線図より上に配置する。路線図は最初に見るものではなく、位置関係を把握するために残しておく。
小さな画面から考える
日常の使い方に合うモバイルアプリデザインのアイデア
優れたモバイルアプリデザインのアイデアは、ある状況で何かを一つしようとしている人から始まります。電車の時刻を確認する、食事を記録する、レシートを共有するなど、具体的な場面を選び、目的までの最短で分かりやすい操作の流れをデザインしましょう。
この利用シーンで実現すべきこと
役立つコンセプトには、主なタスク、その状況、制約が明確に示されています。こうした制約を意識することで、見栄えのよい画面を、実際に使えるモバイル体験と取り違えずに済みます。
1
操作性を検証したものではない
画面のコンセプトだけでは、ユーザーがジェスチャーを理解できるか、エラーに気づくか、操作に失敗した後に立て直せるかは分かりません。
代わりにすべきこと
タスクを短い手順に書き出し、そのコンセプトを知らない人に次はどこをタップするか尋ねましょう。
2
ネイティブアプリではない
視覚的なアプリデザインだけでは、インストールできるAndroidやiOSのソフトウェア、デバイスの権限設定、動作する通知は作れません。
代わりにすべきこと
想定する動作を別途文書化し、開発前にプラットフォームの要件を確認しましょう。
3
実際のコンテンツの代わりにはならない
整ったサンプル名や短いラベルだけでは、窮屈なレイアウト、データがない状態、極端に長い情報を見落とすことがあります。
代わりにすべきこと
レイアウトを決める前に、現実的な文章、データの欠落、エラーメッセージを試しましょう。
どのアイデアもタスクから始める
具体的な状況から、少数の画面へと落とし込みましょう。見た目を磨く前に、各ステップが必要な理由を明確にします。
-
1
場面を選ぶ
ユーザーが誰で、何をしたくて、どこにいるのかを説明しましょう。遅延している路線を確認する通勤者と、自宅で旅行を計画する人とでは、必要な最初の画面が異なります。
-
2
最短の操作の流れを描く
最初の画面、その画面でできる判断、結果を示す画面を書き出しましょう。任意の設定や補足情報は、その流れの外に置きます。
-
3
画面を厳しくチェックする
片手で操作が届くか、文字が読みやすいか、低速回線でも使えるか、結果がない場合にどうなるかを確認しましょう。色やイラストを調整する前に、操作の流れを見直します。
関連するデザインの方向性を見る
コンセプトを考えるうえで、より幅広い出発点、再利用できるレイアウト、プラットフォーム固有の確認事項が必要なら、次の判断に合う項目を選んでください。
品質基準
見栄えのよい最初のスケッチと、実践的なレビューにかけられるコンセプトを比較しましょう。各行には、確認できる具体的なポイントがあります。
| 最初のスケッチ | レビューに出せるコンセプト | |
|---|---|---|
| 主な操作 | 同じくらい目立つ複数のボタンに埋もれている。 | ユーザーが今達成したいことに対して、次に取るべき操作が1つ明確になっている。 |
| ナビゲーション | すべての機能が最初の画面に表示されている。 | 主なタスクは見える位置にあり、補助的な導線には分かりやすいラベルが付いている。 |
| テキスト | 短い仮のラベルを使っているため、すべてが収まっているように見える。 | 実際に使われるような名前、金額、説明文でも読みやすさが保たれている。 |
| フィードバック | 理想的な成功画面しか示されていない。 | 読み込み中、空、エラー、成功の各状態で、何が起きたかを伝える。 |
| タッチ操作 | 操作部品は、プレゼンテーション用のサイズでは精密に見える。 | 重要な操作部品は、スマートフォンでも無理なくタップできる。 |
| 利用状況 | ユーザーが常に集中でき、接続も安定していることを前提にしている。 | 操作の流れは中断されても続けられ、不確かなデータも明確に示す。 |
状況別によくある手直し
これらの例は、有望なモバイルアプリの構想でも、どこに見直しが必要になりやすいかを示しています。その手直しが主な課題になったら、リンク先をご覧ください。
家庭の予定・タスク管理
共有の買い物リストはすっきり見えるが、複数人が長い品名やメモを追加すると見づらくなる。
項目が多い行、購入済みの品目、編集の競合をテストする。カテゴリの管理よりも、品目の追加と購入済みへの変更を簡単にする。
地域のボランティア
イベントの受付用画面は、参加者全員の通信状態が良好で、屋外でも情報量の多いフォームを読めることを前提にしている。
参加者の受付状況をひと目で分かるようにし、情報を更新できないときに画面で何を伝えるかも決めておく。
個人クリエイター
ポートフォリオの構想はアニメーションを前面に出しているが、訪問者が主に求めているのは、作品を1つ見つけて連絡を取ることだ。
作品を見つけやすくし、連絡方法を明確にすることを優先する。視覚的な演出は、コンテンツの閲覧を遅らせず、それを引き立てるものにする。
1つのコンセプトをさらに掘り下げる
例から状況を1つ選ぶか、自分で考えた状況を1文で書きましょう。App Designは、ブラウザー上で始めるための道筋を示せます。特定の機能や成果物を期待する前に、リンク先で利用できるツールと利用規約を確認してください。
シナリオに関するよくある質問
見た目のスタイルではなく、繰り返し起こる状況から始めましょう。誰が、どのような制約のもとで、何をする必要があるのでしょうか？色を選んだり参考資料を集めたりする前に、最初の操作と、それによって得られる有用な結果を描き出しましょう。
スマートフォンは、選択肢を並べるスペースが限られた中で、短時間かつ中断を挟みながら使われることがよくあります。モバイル向けのコンセプトでは、今すぐ行うタスクを見つけやすくし、操作要素、テキスト、フィードバックがスマートフォンの画面サイズで機能するか確認する必要があります。
開始、意味のある判断、結果を示すのに十分な画面を含めましょう。何もない状態やエラー状態によってユーザーが取るべき行動が変わるなら、それらも加えます。大量の画面を集めるより、一貫した操作の流れを示すほうが役立ちます。
分かりにくいラベル、窮屈な画面、抜けている手順は見つけられますが、使いやすさを証明したり、ネイティブ機能を実装したりはできません。コンセプトを完成したアプリと見なす前に、実際の人にタスクを試してもらい、技術面とプラットフォーム面の要件を確認しましょう。