【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。
初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。
デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。
具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。
と言うわけでそんな例を紹介していきます。
今後も思いついたら追加する可能性が無きにしも非ず。
ローディングを出そう
こう言うクルクルするやつとか
こんな感じでシュインシュインするやつがあります。
基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。
ローディングなどがないまま待たせてしまうと、ユーザにはなんのフィードバックもないためボタンを押せたのかどうかが分かりません。そうなって連打させてしまったり他のページに遷移させてしまってはストレスですよね。
トーストを出そう
Snackbar とか呼ばれたりもしますが、とにかくこういう感じのニュッと出てサッと消えてくやつです。
これらは基本的にユーザのアクションによって何か画面に出ない状態が変わった時などに表示するといいです。ローディングが終わったらなんとなく処理が終わったんだなと感じますが、画面上の変化が何もないと不安になります。
他にもエラーが出た時なんかにも表示されますね。
先程のローディングもそうなのですが、ユーザが何かアクションをしたらしっかりフィードバックしましょう。不安にさせてはいけません。
トーストはアニメーション付きでユーザにしっかりとフィードバックを伝えられる手段なので活用していきましょう。
スケルトンローディングを表示させよう
こういうやつですね。
ページ全体でなく一部のコンテンツだけ読み込み中の時に使います。これを表示することによってユーザが何が表示されるかを予期することができるというのと、データを読み込んだ後に表示する内容分の高さを保持するためガクンガクンしないなどのメリットがあります。
大抵何かしらのライブラリがあるのでそれを使うか、しっかり作りたいという場合は div の高さとかを固定させたものをいい感じに並べて、アニメーションでバックグラウンドをシュインシュインさせれば自作可能です。
エラーの表示はユーザが入力し終わってからにしよう
こんな感じで入力途中なのにエラー表示をしてくる Form、たまに見かけます。
率直に言います。
「イラッときます！」
まあ実装者目線ではこれが楽ってのは分かるんですよ…。
分かるんですがユーザ目線では「いや今入力しようとしとるやん…」という感じでイラっときます。
どうすればいいかというと、いわゆる submitted などの一度 Form が送信されたかどうかを表す状態を持って、まだ送信されていない場合は非表示にするなどの制御をすればいいかと思います。
もしくはデザイン自体を変えてしまうのもアリだと思います。私はいつも「Cocoda方式」として人に紹介するのですが、インプットの側に「どんな条件を満たしたらOKなのか」を記述するデザインです。
これだとユーザとしても何を満たせばいいのか事前に分かるのでそもそも不正な値を送ることはないし、実装としても上述したような状態に頼る必要はありません。
Partially Persistent Headers
何のことやねんと思うかもしれないですが次のように下にスクロールしている時は消え、上にスクロールした時に出現してくるヘッダーです。
こうすることによってスペースを増やすことができ、画面の小さいモバイルでは重要な対応となります。
ヘッダーを消すかが有効なのは場合によりけりだと思いますが、個人的にはボトムにある CTA とかは隠した方がスペース増えていいんじゃないかと思うことがよくあります。
Empty の状態をしっかり作ろう
Empty とは何か、名前の通り「データが何もない状態」を指します。
これがないとユーザはそもそもデータ取得に失敗しているのか、ない場合取れるネクストアクションはなんなのかが分かりません。ユーザを迷子にさせてしまいます。
なので、Empty がないと気づいたらデザイナーに相談しつつ
- 何がないのかを伝える
- Next Action
を含んだ画面を作りましょう。
ボタンが小さ過ぎる場合は当たり判定を大きくしよう
たまに 20px x 20px のアイコンがボタンとして機能するみたいなデザイン上がってくることがあるのですが、これは人間がスマホからタップするには小さすぎます。
Apple のデザインガイドラインなどでは 44px x 44px が最低限と推奨されています。
ただ、画像はそのままのサイズでないといけないので、次のような工夫をして当たり判定を大きくして見てください。ユーザのイライラも減るはずです。
// button を 44px x 44px にして img を中央揃えにする
<button>
<img src="hoge" alt="hoge" />
</button>
マイクロインタラクションのアニメーションを入れよう！
何を言っているかというとこんな感じのボタンを押した時にパラパラしたりするやつを指します。
あとは Twitter のいいねとか
これはフィードバックという目的もありますが、気持ち良さなどを与える手段としても有効です。
結構エンジニアが勝手に遊び心を詰められる場所なのでいい感じのマイクロインタラクションを入れていきましょう。ただし調子乗ったりあまりにプロダクトのテイストと違うアニメーションを入れると怒られが発生します。
おわりに
実装している人だからこそ気付ける部分というのは思ったよりたくさんあります。
こういった細部の積み重ねがユーザのストレスを無くすので気を抜かずに頑張って実装していきましょう💪
それでは！
Discussion