デザインの基本原則

UI/UXデザイナーのモリです。

今回はプロダクトのUI/UXをデザインする時に、僕が常に心がけている「3つの基本原理」を、普段愛用しているセブンカフェのコーヒーメーカーを例に紹介したいと思います。

※例に出しているコーヒーメーカーですが、実際はブランドや様々な体験を考慮して制作されたプロダクトです。今回はインターフェースのレイアウトやスタイルみにフォーカスした提案として参照していただければ幸いです。

3つの基本原則とは

僕がプロダクトのUI/UXを考慮するに当たって常に意識してる基本原則とは「シグニファイア・対応づけ・フィードバック」の3つです。

因みにこれは「誰のためのデザイン」という本に登場する「7つの基本原理」から、特に重要だと思うもの3つを抜粋しています。ご興味ある方はぜひ一度手にとってみてください。

それではそれぞれについて解説していきます。

シグニファイア

シグニファイアとは人が対象物とどうインタラクションするかを指し示す手がかりのことです。

ここでコーヒーメーカーで考えてみましょう。
まずコーヒーメーカーの利用者のゴールはなんでしょう?利用者のゴールは目的のコーヒー(ラテかドリップか、アイスかホットか等)が購入したカップに注がれることですね。
このゴールに向かうための手がかりがシグニファイアです。「ヘンゼルとグレーテル」のパンくずみたいなものです。

では実際のコーヒーメーカーを見てみましょう。

コーヒーメーカーの写真

ちょっとわかりずらいので抽象化したのもをイラストにしてみました。

このコーヒーメーカーを利用する上でパッと見て取れるシグニファイアは以下の箇所です。

  • カップを置く場所
  • ボタンを押すとコーヒーが出てくるという操作

「カップ」を指定の場所におき「ボタン」を押せばコーヒーが出てくるというのは明確です。これは「カップを置く」という行為と「ボタンを押す」という行為のシグニファイアが適切ということです。

逆にアイスとホットの選択、コーヒーのサイズ選択、これはちょっとわかりづらいですね、
ではシグニファイアを適切にデザインし直してみましょう。

変更後

アイスとホットはよりシグニファイアが強くなるようにテキストと合わせて色でも表現しました。
またボタンに表記してあるR(レギュラー)とL(ラージ)を一瞬で理解するには熟練の技が必要でしょう。そこでカップのアイコンにして大きさを表現してみました。

このようなインタラクションの手がかりをシグニファイアと呼びます。

対応づけ

対応づけとは操作すべき対象との関係です。

水道の蛇口とバルブのように操作すべき対象との関係が明白であることが「良い対応づけ」の条件です。

コーヒーマシンはどうでしょう?

カフェラテとドリップコーヒーの対応づけは良さそうです、それぞれの排出口の上部にそれぞれのボタンがあります。
アイスとホットはどうでしょう?これは少し対応づけが弱いようですね、
アイスとホットは並列の関係ですが配置としては上下の関係になっています。
逆にカップサイズの対応づけは「普通・大きい」と序列がありますが並列(左から右という弱い順列とも言えます)に並んでいます。

ではこれを上記の概念モデルに照らし合わせて適切な対応づけの関係に配置し直してみましょう。

アイスとホットを並列に、サイズの「普通」と「大きい」を上下の関係に配置し直しました。
またこの対応づけにしたことで、「普通」のボタンを小さくするデザインが可能になりました。また、これによってシグニファイアを強くすることもできました。

フィードバック

フィードバックとは要求したことに対してシステムが動いているかどうか知らせる手段です。

例えばエレベーターのボタンを押した時にボタンにランプが点灯するのも、エレベーターが何階に留まっているか知らせるのもフィードバックです。
コーヒーメーカーのフィードバックはどうでしょう?

まずは自分の選択したサイズと種類が摘出されているか、そして摘出はいつ終わるのか
この2点が重要なフィードバックだと思われます。

この2点がわかるようなフィードバックを加えてみましょう。

2箇所にフィードバックシグナルを加えました。

  • 自分が押したボタンの背景の色が変わる
  • 押したボタンの下部にプログレスバーを配置し、コーヒーの摘出が完了するまでの進捗を可視化

今どの種類のどのサイズのコーヒーがどのくらいの進捗であるかがわかりやすくなりました。また対応づけとシグニファイアを適切にすることで適切なフィードバックが送れるようになったと思います。

まとめ

僕が普段デザインしているデジタルプロダクであれコーヒマシンのようなリアルプロダクトであれ基本は同じです。

皆さんもプロダクトのUIに何か違和感があったり、どこか使いづらいんだけどどこを直したら良いかわからない!なんてことがあると思います。
そんな時はこの基本原則に照らし合わせて考えてみると改善点が明確に浮かび上がってくるので試してみてください!

Koki Mori
  • Koki Mori
  • キャディのUI/UXデザイナー