より使いやすいサービスを作るために意識したいTipsをまとめてみた
はじめに
サービスを作る際、わかりやすさ・使いやすさを意識することはとてもに重要だと思います。
私はこれまでのアプリ開発でUIを作成する過程で、『ここは忘れがちだな』『もう少し意識すればよかった』と感じたことが何度もありました。
開発を進める中で気づいた点や、書籍などからUI/UXに関する情報を取り入れ、案件や個人開発ですぐに試せるようなTipsをまとめました。
タップ領域を考慮する
タップ領域について（左：最低でも48x48dpが推奨・右：8dp以上の間隔が必要）
アプリは指で操作するため、タップ領域を考慮する必要があります。Material Designによるとアイコンのサイズに関わらず最低でも48x48dpが推奨されています。また、ボタンが並ぶ際は誤ってタップしないように8dp以上の間隔が必要です。
普段Simulatorで確認しながら開発しているのですが、いざ実機で触ってみたら上手くタップできなかった・違うボタンを押してしまったことがあったので、タップ領域の考慮はとても大事だなと思います。
リスクの高いアクションに確認 or やり直し機能をつける
「入力内容を確認せず登録してしまった...🥺」「間違って投稿を削除してしまった...🥺」など、意図しないアクションをしないように事前に確認できるようにしたり、やり直しできるようにしてあげるとユーザーに不安を与えず安心してサービスを使えるのかなと思います。
例えば確認画面に遷移して内容を確認できる様にしてあげたり、
確認画面を表示
ダイアログを表示してアクションする前に確認できるようにしてあげたり、
ダイアログを表示
確認機能をつけない場合はアクション後に取り消し機能をつけてあげると良さそうです。
やり直し機能
アクションに成功・失敗したかわかるようにする
アクション完了後に成功したのか失敗したのかわからないとユーザーに不安を与えてしまうので、一目で成功・失敗をわかるようにしてあげたほうが親切です。
例えば完了画面に遷移したり、
SnackBar（Toast）を表示してあげるとわかりやすいのかなと思います。また、成功と失敗でアイコンや色を変えてあげると、テキストを読まなくても成功したのか失敗したのか一目で理解できるようになります。
待ち時間中のユーザーに配慮する
待ち時間が発生した時に今待ち時間であることをちゃんと伝え、できる限りユーザーのストレスを軽減する必要があります。
伝える方法は大きく分けて2つあります。スピナーは待ち時間が短い場合に用いられることが多く、プログレスバーは待ち時間が長い場合に用いられることが多いです。ユーザーが待ち時間がわからない状態で待てる時間は最大で4秒と言われているので、それよりも長くなりそうならプログレスバーを使うようにしましょう。
待ち時間が発生したことを伝えるのも大事ですが、実際の待ち時間よりも短く感じる様に工夫することも大事なのかなと思います。下記にいくつか例を書きました。
1つ目は「スケルトンスクリーン」です。
左：X・右：YouTube
スケルトンスクリーンはコンテンツが表示されるまでに少し時間がかかる場合に、中身の無い空のコンテンツを表示させることによってコンテンツの表示が遅いと感じにくくする方法です。XやYoutubeなど色々なサービスで使われています。
2つ目は「処理中に別の操作をできるようにする」です。
画像をアップロードしている間に他の画像を見たりなど別の作業できるようにする
画像のアップロードなど重い処理をしている間に別の操作をできることによって、待ち時間を感じることなく自然にサービスを使うことができます。
3つ目は読み込み中のアニメーションを工夫するなど、「手間をかけた表現」にするです。
アニメーションに注目させることによって、退屈な時間を過ごさないようになります。
コンテンツがない状態(Empty State)を考慮する
コンテンツが無い状態を考慮できていないと、コンテンツが無いのか取得に失敗しているのかわからなかったり、空の画面が表示されていると次にどのような行動をすればいいのかわからずユーザーが迷子になってしまいます。
この画面が何のための画面で、コンテンツが無い場合はその状態を明示し、どうすればコンテンツが表示されるのかを具体的に示してあげるとユーザーも迷子にならないのかなと思います。
入力フォームを1画面にまとめるか分割するかを考える
左：1画面にまとめる・右：分割する
会員登録など入力フォームを1画面にまとめるか分割するかは悩ましいと思います。
コンバージョンを重視するならなるべく1画面にまとめるのが良いですが、だからといって1画面にたくさん入力項目があると完了までの道のりが長いと感じてユーザーが離脱する可能性が高くなってしまいます。項目数を少なくして画面を一つにすることが最善ですが、項目数が多い場合は画面を分割する方が良いかもしれません。
ステッパーを設置して進捗状況を把握できるようにする
特にモバイルアプリに関してはフォームに入力する時にキーボードが出現して入力範囲が限られたりスクロールの負担があるため、分割する方が良さそうです。
画面を分割する際は入力項目を種類で分ける、必須項目を最初に入力し任意の項目を別画面で入力するようにするもしくはスキップできるようにする、ステッパーを設置して進捗状況を把握できるようにするなど工夫をしてあげると画面を分割してもユーザーに負担がかかりづらくなるのかなと思います。
Fincの初期登録フロー
画面を分割しない場合の工夫としては、Fincの初期登録フローのように、チャットUIで受動的に入力を完了させる方法だと、スクロールしてユーザー自身が能動的に入力する必要が無く聞かれる質問に回答すれば完了するようになっているため、煩わしさや入力しづらさを感じないようになります。
ユーザーが読んで理解できる言葉を使う
これは基本的なことですが、プログラム目線ではなく具体的でユーザーが読んで理解できる言葉を使うようにしましょう。
例えばフォームに入力した内容でエラーは表示された場合、「入力内容が不正です」だと何が原因なのかわかりません。「半角英数字6文字以上で入力してください」など具体的に説明し操作をストップさせないようにしましょう。
また、ボタン・リンクの文言は「押すと何が起きるのか」を明示しましょう。
入力・選択に適したUIにする
入力・選択に適したUIになっているかもサービスの使いやすさに繋がると思います。
1.プレースホルダーで記入例を明示する
そのフォームが何を入力するフォームでどのように入力すればいいのか（例えば電話番号はハイフンがいるかなど）わかるようにしましょう。また、入力中はプレースホルダーが消えてしまうので、ラベルとして使うことは避けたほうが良いです。
2.手動入力の機会を減らす
個数入力や音量調整など入力可能な要素に制限がある場合や、住所など間違った内容を入力したことで対応コストが増えてしまうものについてはユーザーによる手動入力を避けましょう。
スライダーやドロップダウンメニューなどを使用して入力内容を制限したり、
住所などは自動入力できるようにすることでエラーを未然に防げるようになります。
3.価値のあるデフォルト値にする
ユーザーにとって価値のあるデフォルト値を設定して操作負荷を減らしましょう。
例えばサービスのターゲットが20代〜30代の場合、左のように生年月日で1920年を選択するユーザーはほとんどいないと思われます。ターゲットによって適切なデフォルト値を設定するのが望ましいです。
4.選択肢が少ない場合はプルダウンではなくラジオボタンを使う
プルダウンは選択肢を展開する手間がかかり一目で全ての選択肢を俯瞰できないため、選択肢が少ない場合（3、4個）はラジオボタンを使うのが望ましいと思います。
まとめ
ユーザーにとって使いやすくより良いサービスを提供するとは何かを考え、継続的に改善することが重要だと思います。
デザイナーだけでなく私たちエンジニアだからこそ気付ける部分はあると思うので、単にコードを書くだけでなくUI/UXに関する理解を深め今後の開発に活かせるように努力したいなと思いました！
参考サイト・書籍
Discussion
UI/UXデザインの情報がまとまった良いidia記事でした🎉
最近デザインや画面遷移、ユーザー体験の向上はどうすればいいか考えていましたがとても参考になる記事です。
ありがとうございます！
そう言っていただけてうれしいです😊