画面の状態をデザインする

面接ではこう答える 読み上げ

1つの画面にも、読み込み中・空・一部だけ・多すぎる・エラー・オフライン・権限なしといった多くの状態があります。デザインで決めていない状態は、実装の都合で作られがちなので、画面に出るデータを1つずつ挙げて、まだ届いていない・ない・多い・失敗した、の4つを考えて一覧にします。ボタンなどの操作にも、押せない・処理中・完了・失敗があります。この一覧に「デザイン済みか」の欄をつけて、エンジニアとの確認にそのまま使っています。

面接ではこう答える 読み上げ

読み込み中の表示は、待ち時間の長さで使い分けます。1秒程度までなら何も出さないほうが、ちらつかずに速く感じられます。数秒かかる画面で、表示する内容の形が決まっているならスケルトンという灰色の仮の枠を出すと、どこに何が出るか先に分かり、表示されたときのずれも減ります。形のない処理の待ちにはスピナー、10秒を超えるような長い処理には進み具合や残りの見込みを出すようにしています。

面接ではこう答える 読み上げ

空の状態は、一覧などのデータが0件のときの画面です。同じ0件でも、初めて使って何もないのか、検索の条件で0件になったのか、タスクを全部終えたのかで、ユーザーに伝えることが違います。初めてなら何ができる場所かと最初の操作、検索なら条件の見直し、完了なら次にできることを出します。実装では理由を見分ける条件が必要なので、どの条件でどの表示かをエンジニアと確かめておきます。

面接ではこう答える 読み上げ

エラーの表示では、何が起きたか、ユーザーがどうすればよいか、やり直しの操作、の3つをセットで出すようにしています。エラーには、入力の誤り、通信の失敗、サーバーの不具合、権限の不足などの種類があり、ユーザーが直せるものかどうかで文言が変わります。入力の誤りなら該当の欄のそばに、通信の失敗なら画面の上部やその部品の中に出し、入力した内容は消さないようにします。エラーの種類と出す場所の対応をエンジニアと決めておくと、実装で英語のメッセージがそのまま出る事故を防げます。

面接ではこう答える 読み上げ

フォームの検証は、いつ誤りを知らせるかが使いやすさを大きく左右します。1文字ごとに知らせると入力の途中で邪魔になるので、欄を離れたときに知らせ、送信時にはまとめて確かめて最初の誤りの欄へ移動する、という組み合わせがよく使われます。誤りを直している間は、直った時点ですぐ消します。ラベルは入力欄の外に常に見せ、必須かどうか、入力の形の例も先に示しておくと、そもそもの誤りが減ります。

面接ではこう答える 読み上げ

入力欄には、メールアドレス・電話番号・数字などの種類を指定でき、スマホではそれに合ったキーボードが出ます。さらに autocomplete という指定で、名前や住所、パスワード、SMS で届くワンタイムコードなどを OS やブラウザが自動で入れられるようになります。デザインの段階で各入力欄が何の情報かを注釈に書いておくと、エンジニアが正しい指定を選べ、入力の手間と誤りが大きく減ります。

面接ではこう答える 読み上げ

楽観的 UI は、サーバーの返事を待たずに、成功したものとして先に画面を変える作り方です。「いいね」を押した瞬間にハートが赤くなるのが代表例で、操作がとても軽く感じられます。ただし通信に失敗することもあるので、元に戻して「保存できませんでした」と伝える表示を必ずデザインします。送金や購入のように、失敗すると困る、取り消せない操作には使わず、処理中であることをはっきり見せます。

面接ではこう答える 読み上げ

スマホは、地下や移動中に電波がなくなったり、とても遅くなったりします。オフラインのときに何が見られて、どの操作ができて、できない操作はどう伝えるかをデザインで決めておきます。アプリによっては、オフラインでも操作を受け付けてためておき、回復したら送る作り方もあり、その場合は送信待ちの印や、他の端末の変更とぶつかったときの扱いも必要です。どこまでオフラインに対応するかは工数が大きく変わるので、早めにエンジニアと決めます。