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

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

 

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

 

今回の成果
前回の課題を踏まえてデザイン修正しました。
デザイン修正の過程をご紹介します。

第1段修正
前回色をつけただけであったCGの座席に波模様を追加しました。
ON状態ではこの波模様がゆらゆらと揺れるアニメーションをつけることで、起動中ということがよりわかりやすくなると思います。

 

第2段修正
バーの色を青〜黄〜赤のグラデーションに変更しました。
暖かくなるというイメージに近い色になりました。右の座席のシートヒーター温度1のカラーも紫の時より暖かくなっていることが伝わってきます。

 

第3段修正
まず、CGが大きくなりポップアップウィンドウも横に大きくなりました。横長になることで、ドライバー席や助手席から操作ボタンまでの距離が縮まりました。
CGの部分では座席の上に表示されるエフェクトがあまり目立たなかったので、設定温度のカラーと同じ色の円が広がるエフェクトに変更しました。シートがじんわりと暖かくなっている様子がよりイメージできます。アニメーションの動きが大きくなることで、操作フィードバックが確実にわかるようになりました。
そして、第二段のグラデーションの青をなくしてOFFの部分をグレーに変更しました。ONとOFFの区別がはっきりつくことで、OFFにした時の「ちゃんと切れているかな?」という不安をなくすことができます。
また小さな改良ですが、選択されている数字は太く大きくなることで、現在の設定値がわかりやすくなりました。

 

第4段修正
画面下部のメニューボタンは機能がオンになった時に青く色づきます。それに合わせてポップアップの背景の色も青に揃えました。そうすることでポップアップとボタンがよりリンクされ、ON状態の色の変化が感覚的に理解できるようになっています。
また、中央に配置していたポップアップウィンドウを、より頻繁に使用するであろう運転席側に寄せることで利便性を高めました。

 

評価
最後に微調整をして、ついにデザインが完成しました。
「久しぶりに操作しても問題なく操作が可能な情報を提示できるUI」を目標に既存のUIデザインの改善点を解決するデザインを制作してきました。
既存デザインの改善点をもとに完成デザインを評価しました。

評価をすると全ての改善点がしっかり解決できていることがわかりました。よって、目標としていた「久しぶりに操作しても問題なく操作が可能な情報を提示できるUI」という目標は達成できたと思います。

評価
今回ポップアップウィンドウのデザインで目標を達成するUIを制作することができました。
しかし、今回ターゲットに選んだ、シートヒーターが搭載されていることを忘れてしまった人やそもそも知らない人はこのポップアップを開かないかもしれません。
ドライバーが知らない機能を使ってもらうことができないという、UI制作における新たな問題も浮かびました。
今回までの連載ではIFl(Information Flexible-layout)のInformationである「機能を理解していなくても迷いなく操作できる情報を提供するUI」の制作を中心にご紹介しました。
次回からはFlexible-layoutの部分である「誰にとっても使いやすいレイアウトになるように柔軟に変化するUI」の制作を中心に、今回新たに生まれた問題も解決できるデザインの制作をご紹介します。

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

 

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

 

関連記事一覧

関連記事はありません。