ベイジでは社内でフィードバックを盛んに行う仕組みがある。デザイナーの私は、デザインのアウトプットに対してフィードバックをもらう機会が多い。その一環として「リードデザイナーチェック」というフローがある。ここでは、デザインがベイジが目指す品質を満たしているかをリードデザイナーまたは代表の枌谷さんにチェックしてもらう。
今回、私がメインでデザインしたサイトをリードデザイナーの池田さんにチェックしてもらった。今まで見落としていたり、自分では気が付かなかった観点からのフィードバックをもらい学びがあった。今後のデザイン制作や、自分がデザインチェックをする側になった際にも活かせる点が多そうだったので、覚えておくためにいくつか紹介したい。
①ユーザーの操作への反応は十分か
タグなどの絞り込み機能を使う際に、絞り込みが完了したことをユーザーに分かりやすく伝える処理があった方がいいと教えてもらった。
私のデザインでは、ユーザーが絞り込みのタグを押すとすぐに表示結果が変わる仕様にしていた。タグを押す動作が完了していることをユーザーが認識しやすくするためにこのようにしたつもりだった。
しかし、実際はファーストビューで見えている範囲の項目全てに「A」のタグが振られていた。そのため「A」で絞り込んでも、「すべて」が表示された状態からファーストビューが変わらない状態になっていた。これでは、ユーザーは絞り込みの動作が完了しているのか、エラーなのか分からずに迷ってしまうだろう。別の方法で、絞り込みが完了したことをユーザーに伝える処理をすべきだった。
②フォームはスムーズに入力できるか
次に、入力フォームについて、ユーザーが入力するときの視点からフィードバックをもらった。例えば、以下のような点がチェック項目として挙げられる。
- 最大入力文字数が認識しやすいか
- 極端に長い文章を入力した時、デザインが崩れないか
- 指定外の種類の文字の入力は制限できているか
ユーザーは、必ずしもこちらの想定通りにフォーム入力をしてくれるとは限らない。電話番号の欄に数字以外の記号や文字を入力することもあるし、長い住所を入力することもあるだろう。「一般的な」動き以外も予想してデザインしなければならない。
①の視点とも重なるが、自分から見えている範囲だけではなく、ユーザーが実際に使う場面を想定して、使いやすいかどうかを確認できるようにしたい。その上で、コンポーネントごとに確認すべき箇所を覚えていきたい。
③サイト更新は簡単にできるか
3つ目は、サイトの閲覧者としてのユーザーではなく、サイトの更新担当者の視点からのフィードバックだった。
今回のサイト内には、社員数など年度ごとに替わる可能性のある数字が数多く出てくるページがあった。それらの数字データを画像で表現していたのだが、もし毎年更新するのであればクライアントは毎年画像を作り変えなければならず、手間がかかってしまう。手間を減らすためには、可能であればHTMLで実装するのが良いだろう。
サイトを作って終わりではなく、サイト制作後の運用まで意識して、実装方法も検討しなければならないと学んだ。
まとめ
池田さんにチェックしてもらったことで、自分の中には無かった視点でサイトを見直すことができた。ビジュアルの美しさはもちろんのこと、サイトの閲覧者も更新者も含めたユーザーの体験を意識したデザインをしたい。
また、エンジニアさんが実装してくれたサイトを自分で見直してみると、XDでデザインしていた時には考えられていなかった部分で、気になるところも出てきた。例えば、「幅の大きい画面で表示されるときの見え方」や「ページ同士のデザインの整合性」などだ。
視点を変えてみると、改善できるところが次々に出てくる。リードデザイナーチェックで教えてもらったことも活かしながら、サイトを見る視点を養っていきたい。
