【vol.5】Information Flexible-layout手法でUI改善

はじめに
この連載では弊社独自の制作手法であるIFl(Information Flexible-layout)手法を、実際のデザイン制作を題材にしてご紹介しています。前回はこちら

前回からの課題
今までに作ったデザインをBrain Step評価方法で評価するとユーザーは、
1：ボタンの操作方法を考える
2：設定したい温度を考える
3：カーソルをスライドまたは直接数値をタップする
4：操作が行われたか確認する
という４ステップを踏んでシートヒーターを使うことがわかりました。
前半の３つのステップに関しては、これまでのデザインで充分なわかりやすさを満たしたと思いますが、最後のステップがまだ不十分です。

シートヒーターはボタン操作を行ってから起動したことが確認されるまで時間がかかる機能です（じわじわと暖かくなっていくので実感するまでに数分かかる）。
そのため明確な操作フィードバックは「ちゃんと操作できたかな？」というストレスを減らす効果が期待出来ます。

今回はこの問題を解決していきます。

今回の成果

ポップアップの中央にCGの座席を配置しました。
シートヒーターをONにするとそれぞれの座席に色がつき、ドライバーは確実にシートヒーター が起動したことがわかります。
また、左右のスライダーがそれぞれ左右の座席の操作であることがより直感的にわかりやすくなりました。

新たに生まれた課題
これでデザインがほぼ完成形になりました。
しかし、カラーや文字サイズなどまだ検討すべき点が多いです。
現状のカラーだとシートヒーターの強弱は分かりやすいですが、1段階目は紫色なのであまり「暖かくなっている」というイメージは湧きません。CGに色がつくとそれが顕著にわかると思います。また、温度の数字も設定している数字と他の数字の違いが少ないので、選択している数字がわかりづらいという問題があります。
次回はこれらの課題を解決し、細かな部分のデザインをよりかっこいいものに仕上げていくブラッシュアップになります。

ここまでご覧頂きありがとうございました。次回も是非ご覧ください。

ブログ更新／イベント情報 配信登録