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

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

前回からの課題
前回から始まったポップアップ式シートヒーター UIの制作では、初期デザインの中から縦向きに温度スライダーを配置したデザインを選びました。
そのデザインの課題点として、温度調整バーがとても細く、表示も極限までシンプルにしているので、見た目はスタイリッシュですが実際に自動車に組み込まれた時に操作がしづらいという点が挙がりました。
カーソルもバーの細さに合わせてかなり小さくしてしまっていたので、大きい画面で見ている分には格好いいですが、指で操作するのが難しいと思われます。
今回はこれら問題を解決するデザインの製作になります。

今回の成果
前回の課題を踏まえてデザインを２点製作しました。

A案
前回の課題であった具体的な温度表示がなくてわかりづらい・小さすぎて操作できないという点を修正しました。中央に温度表示を加え、バーのドットと関連付けることで設定可能な温度と現在の温度が分かりやすくなりました。また、スライダーとカーソルのデザインはそのままに、操作可能な大きさに変更しました。

B案
初期デザイン案で出ていた、数字部分をタップして直接変更する操作と、カーソルをスライドして変更する操作の２つが可能な温度表示バーを使ったデザインです。
温度や操作がわかりやすいデザインと縦向きの配置の組み合わせによって、操作しやすく、操作によって何が起こるかも分かりやすいデザインになりました。

評価
今回製作した案を評価し、B案を最適なデザインとして選びました。
選定理由は、操作方法と操作によって起こる機能が分かりやすく、ドライバーがよりストレスなく使うことができるという点でした。

新たに生まれた課題
今回の検討でだいぶ良いデザインに近づきました。しかし、ドライバーのストレスをなくし迅速で間違えのない操作ができるデザインにする必要があります。
次回はデザイン製作で用いたBrain Step評価方法をご紹介します。

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

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