はじめに
こんにちは！ピクトリンク事業部開発部の今川です。
こちらの記事はフロントエンジニアがUI/UX設計をするときに考えている10のこと（※個人の感想です）：前半の続きになります。
前半ではUI設計の際に気をつけていることを5つまとめました。後半では、フロントエンジニアがどんなことを考えながらUX設計をしているかを言語化してみようと思います。
大量の情報をいかに見やすく、限られた画面に収めるか
最近はリモート業務が増えてノートPCなどの小さい画面で業務をする人も多いですよね。
限られた画面サイズの中でいかに必要な情報を見やすく配置するかも、よく悩むポイントです。
6. 情報の整理・取捨選択
まずは
この情報は今表示されていないといけないものか？
というところから棚卸ししていきます。
- この情報とこの情報は、同時に見れなくてもいい
- この情報は常に表示されていないと業務が滞る
- この情報は一瞬表示できれば良い
このように情報が必要なケースを整理することで、
情報の表示場所やタイミング・表示方法を絞れます🙌
7. 情報の表示の仕方
情報の整理・取捨選択ができると表示の仕方も考えやすくなります。
例えば、
- 同時に見れなくてもいい情報
→ 別々に表示スペースを確保しなくてもいい - 常に表示されていないと業務が滞る情報
→ 大きなスペースを確保して見やすくした方がよさそう - 数秒間表示できれば良い情報
→ 他の要素に被る形の表示でもOK
といった具合です。
たまに見る情報は折り畳めるUI（アコーディオンやタブ）にするなど、
ユーザーが見る情報を選べる状態を作るのもスペースの有効活用につながります。
8. 文字じゃないと表現できない？
どうしても文章は場所を取ります。
もちろん文字で説明するのが一番確実ではあるのですが、デザインのルールが利用者にしっかり伝わっていればアイコンや色だけで意味が伝わるケースも多いです。
他にも、UIフィードバック（ボタンが押されたら注目させたいところを光らせるなど）を丁寧にすることで伝えられる場合もあります。
文章を入れるスペースがない！というときは「この情報、他の伝え方はないかな？」とよく自問しています。
判断や迷いを減らせているか
9. ユーザーが「今どの状態にいるか」を把握できるか
UI上で今何をしていて、次に何が起こるのかが分かることもとても重要だと感じています。
- 処理中なのか
- 完了したのか
- エラーが起きているのか
が曖昧だとユーザーは不安になります。
特に社内ツールは急ぎの業務で使われることも多く、
操作しても見た目上の反応がないとユーザは不安になってしまいます😰
開発者が意図しない操作（API実行中のボタン連打やリロードなど）を防ぐためにも、
ローディング表示や完了メッセージなどを使って状態がきちんと伝わるUIにするようにしています。
10. 操作や判断でユーザーを迷わせないUIになっているか
実装しやすさだけを理由にUIパーツを選ぶと、ユーザーの操作感が犠牲になってしまうことがあります。
今回は、パーツを選ぶときにどんな観点を意識しているのかを具体例を2つ挙げて紹介してみます。
必要な情報が一目でわかるか
モーダルは簡単な情報表示やボタン操作を促すときにとても便利なパーツです。
ですが、入力項目が多く縦に長い機能をモーダルで作ると小さい領域をスクロールしながら入力することになり、操作の全体像が把握しづらくなります。
なので縦に長いコンテンツを表示させたい場合はモーダルではなく別の表示方法を採用した方が良さそうです🙂↕️
このように必要な情報を一目で見られるか・必要になる操作がすぐに分かるかを考えながら、UIパーツを選ぶようにしています。
操作回数・考える回数を減らせるか
一つの目的のために必要になる操作回数や考える回数も操作性に直結します。
例えば、何かの並び順を変更する機能を実装するときなどは
数値を入力して保存 よりも 上下矢印ボタンで変更
の方が数値の大小や重複を考えなくて済みます。
他にも、選択肢が大量にあるプルダウンはスクロールしながら目当ての選択肢を探す必要があり、それだけでストレスになります。
一部の文字を入力すると選択肢が絞り込まれるという仕様にするだけでも、スクロールして目視する回数はかなり減らせます。
UIパーツの選定や操作方法の違いは、ただの実装差というよりユーザーの認知負荷にかなり影響する設計判断だと感じています💪
おわりに
社内ツールのUI/UX設計は、お客様が見るページに比べるとどうしても地味です。
ですが、丁寧なUI/UX設計の積み重ねが日々の業務効率や安心感につながるはずです。
フロントエンジニアとして、
「ただ必要な機能を実装する人」ではなく、
「毎日使う人の気持ちを想像しながら設計できる人」でいたいなと思っています🥰
少しでも社内ツール開発やUI/UX設計の参考になれば嬉しいです！
