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

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

前回からの課題
誰もが使いやすいHMIを目標にポップアップ形式のシートヒーター UIの製作が始まりました。
今回からIFlの考え方に沿って具体的なデザインを作っていきます。

今回の成果
企画のアイディアから初期デザインを数点製作しました。

A案
温度の段階がわかりやすいように温度表示バーに数字を表示しました。操作は数字部分をタップして直接変更する操作と、カーソルをスライドして変更する操作の２つが可能です。直接設定したい温度に変更ができることで操作の手間を省くことができました。

B案
スライド操作だけだと理解する案も作成しました。丸いカーソルを左右にスライドさせることで温度を変更できます。カーソルに温度の数字が表示されるので設定中の温度もひと目でわかるデザインです。ただし操作中は指で数字が隠れるのが、タッチデバイスのデザインとしては少し残念なところです。

C案
B案同様スライド操作の案になりますが、他の案に比べ操作カーソルをリアルなデザインにしてみました。立体感のある表現やリアルで見たことのある表現に近づけることで、ユーザーが操作に迷いづらくなるメリットがあります。

D案
他の３つの案と違って温度のスライダーを縦向きに配置しました。こうすることで左右のシートがどちらのスライダーなのか、直感的にわかりやすいデザインになりました。また、スライダーが上下方向の操作になったことで、温度の上げ下げの概念と操作がマッチして、さらに直感的に使いやすくなっています。

評価
今回製作した案を評価し、D案を最適なデザインとして選びました。
選定理由は、どちらが左右のシートなのかがひと目で分かる、温度の上げ下げが直感的に感じられる点でした。

新たに生まれた課題
D案の温度調整バーはとても細く、表示も極限までシンプルにしているので、見た目はスタイリッシュですが実際に自動車に組み込まれた時に操作がしづらいという点が問題となりました。
カーソルもバーの細さに合わせてかなり小さくしてしまっていたので、大きな画面で見ている分には格好いいですが、指で操作するのが難しいと思われます。
次回はこれら問題を解決するデザインの製作になります。

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

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