ユーザーにストレスなくより良いユーザー体験を提供するためには、細部のUIデザインにも気をつけなければいけません。
今回はこれだけは押さえておきたいUIデザインを紹介します。
1. エラー時は問題の解決方法も載せる
たとえば、ネットワークエラー時などには「ネットワークに接続できませんでした」と表示するだけでなく、「ネットワークに接続できませんでした。Wi-fiの設定を確認のうえ、もう一度お試しください」というようにエラーの解決につながる方法を明示した方がより親切です。
2. 画面をスワイプで戻れるようにする
iPhone6, iPhone6 Plusがリリースされ、最近では大画面のデバイスが増えてきました。片手操作の場合、画面上部にあるボタンに届かないといったことがよくあります。iOSの場合は物理ボタンがないので、戻るボタンの位置を下に配置することを検討するか、画面をスワイプで戻れる機能を実装すべきです。
ただスワイプで戻るという機能はユーザーに気づかれにくい機能であるため、初回操作時にはチュートリアルを追加するといいでしょう。iOSで実装する場合はSloppySwiperというライブラリが非常に便利です。
3. スクロールできる場合は要素の端を見せる
初期状態のときにきっちりコンテンツを画面内に収めるのではなく、あえてスクロールできる要素の端を画面内に見えるようにすることで、スクロールできるということをユーザーが理解しやすくなります。
以下の例のようにSmartNewsのUIでは記事のリストとメニュー両方とも端が表示されていることがわかります。
4. 次の入力フォームに自動的にフォーカスする
ユーザーログイン画面などでは、メールアドレス入力やパスワード入力などが複数段に連なったフォームを実装することがよくあります。そういったときはソフトウェアキーボードでエンター（改行）を押した際に次のフォームへ遷移させてあげるとユーザーの入力が楽になります。また、最後まで入力した後はエンター（改行）後に次のステップへ移行できるようにしましょう。
5. 情報がないことを伝える
アプリの初期状態では表示するコンテンツが何も存在しない場合があります。このときユーザーにきちんと「何もない」という状態であることを伝えましょう。また、「何もない」空の状態を解消するためには、どうすればいいのか示してあげるとより親切です。初回にコンテンツを追加する体験をさせてあげるといった方法もあります。
6. ボタンのタップ領域を44×44ポイント以上にする
誤ったオブジェクトをユーザーにタップさせないためにもタップ領域を44×44ポイント以上にしましょう。この場合、見た目のボタンの領域は必ずしもこのサイズ以上である必要はありません。44ポイントという数値はアップルのiOSヒューマンインターフェイスガイドラインで推奨されているサイズでもあります。
7. ボタンのフィードバックをすぐに返す
ユーザーにボタンを押したことがわかるように何かしらのフィードバックをすぐに返すようにしましょう。これはサーバーとの通信が伴う場合も、できるだけフィードバックをすぐに返した方がユーザーにストレスを感じさせずにすみます。
例えば、Twitterの「いいね」ボタンはサーバーへの通信が行われているにも関らず、サーバーからのレスポンスが返ってくる前にすぐにUIのフィードバックが返ってきます。Twitterではオフラインでも同様にフィードバックが返ってきます。
8. ボタンにはラベルを付ける
検索でよく使われる「虫眼鏡アイコン」やブックマークを表す「本アイコン」など定番のアイコンとして使用されているものはありますが、すべての人が理解できるアイコンというものは実はほとんど存在しません。特に議論となるのが、メニューでよく使われている「ハンバーガーアイコン」です。最近でこそ様々なアプリで使用されていますが、ユーザーによってはそのアイコンをボタンと認識できない場合もあります。そういった場合、ボタンに「メニュー」などのラベルを加えてあげるといいでしょう。
また、アイコンを四角で囲って「ボタンらしく」することでタップ率をあげることができます。ボタンのUIを考えるときは想定されるユーザーのリテラシーを考慮して設計することが大切です。
9. テーブルビューのセルは戻るまでハイライトさせておく
ニュースアプリなどで詳細画面に遷移する際に、テーブルビュー（リストビュー）から遷移させるUIはよくあります。タップ時にセルをハイライトさせますが、指を離したときにハイライトを解除させるのではなく、詳細画面から戻ってきたときにセルのハイライトを解除した方がユーザーがどのセルを押したか一目でわかりやすくなります。iOSの実装方法はこちらが参考になります。
10. 読み込み中にインジケーターを表示する
読み込み中には空白のままでなくローディングのインジケーターを表示するようにしましょう。当然のことですが、ローディングを表示することでアプリが停止しているのではなく、動作しているということを示すことができるので、ユーザーに安心感を与えることができます。
ただし、ローディングのインジケーターは多発させてしまうとユーザーにストレスを与えてしまうことがあります。読み込み中のオブジェクトの枠組みだけを表示するといった手法もあります。以下の右の例では記事が出る部分を枠組みだけで表現しています。最近ではFacebookやSlackなど、例のようなUIを取り入れているアプリも増えてきました。こちらの記事も非常に参考になりますので、ぜひ読んでみてください。
まとめ
アプリのユーザーは千差万別です。自分がこれくらいはわかるだろうと思ってデザインしたUIでも意外とユーザーは理解してくれないものです。より良いユーザー体験を提供するには、思いやりをもったUIをデザインすることが大切だと思います。
今回紹介した手法が、みなさまのアプリデザインのお役に立てれば幸いです。
