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

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

IFl制作手法開発の経緯
「最近の自動車は機能がたくさんありすぎて、どこを操作すればいいのかわからない！」
普段自動車に乗っていてそう思ったことのある方も多いと思います。
実際に今の自動車には沢山の機能が搭載されており、いざ使おうと思っても操作に迷うことも多いですよね。
ドライバーのデジタルリテラシーや身体的な違い（視力の低下など）を無視して1つのUIになっているのも不親切ですし、安心安全を脅かす恐れもあります。
そこでInformation（機能を理解し、迷い無く操作できる情報）を提供し、誰にとっても使いやすいLayoutになるようにFlexibleに変化するUIが必要だと考え、そのための制作手法を開発しました。

まずは優れたUIを調査してみる
IFlデザイン開発手法の手法を使ってUIデザインをしてみたいと思います。今回は冬しか使わないので翌年には使い方を忘れやすい「シートヒーター」を題材にしてみました。

そこでまずは既存の優れたUIを調査してみました。複数の車両を調査した結果、かなりしっかりと作られていて、操作性とわかりやすさが最も優れていたTESLA3は二箇所からシートヒーターの操作ができるようになっていました。

1：固定タブで操作
操作画面下にある固定タブから操作できます。アイコンが小さくて文字がないので、シートヒーターの操作ボタンかどうか分かりづらく、操作フィードバック（ON/OFFや温度の段階）が見えづらいのが問題に感じました。

2：エアコン画面からシートヒーター操作画面に切り替えて操作
一旦エアコンの操作画面を開き、右側にあるタブを開くとシートヒーターの操作画面に行けました。この画面を開くまでに2タップ必要なことと、とても気づきづらいタブが問題に感じました。

2つの操作画面に共通の問題として、温度設定を変更したり、OFFしたりするには何度もタップしないといけない煩わしさがあります。

必要なInformationを提示できるUIを考える
TESLA3に限らず固定タブだけの操作では情報が足りず、操作方法をしっかりと覚えている人で無ければ使いづらいので改善が必要です。
冬、車に乗り込んだとき「シートが冷たくて寒くてたまらない」となったときにシートヒーターはとても嬉しい機能ですが、1年も使っていないと操作方法を思い出せないどころか、シートヒーターが搭載されていることを忘れてしまう人もいると思います。
なので、久しぶりに操作しても問題なく操作が可能な情報を提示できるUIにしたいと思いました。

そこで1つの方法として検討したのが、ポップアップウィンドウです。
ポップアップウィンドウ内に必要な情報を提示し、操作しやすいボタンや、操作フィードバックを明確にするデザインを工夫しました。

次回から完成形(当記事冒頭の動画)ができるまでの具体的なデザイン開発の工程を紹介していきたいと思います。vol.2はこちら

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