UIデザイン: 視覚的な 「共通言語」を意識しないとユーザーには伝わらない
先日、てんまにちやそさんが以下のポストを投稿されていました。
GUI開発者たちが80年代から頑張って生み出したUI共通原則をぶっ壊すフラットUIははやく死すべき。
— てんまにちやそ(美味しくなって新登場) (@tchan65534) December 6, 2024
このUIで「ここが押せる」って初見で気づく奴いるか？
お前ら40年間なにやってきたんだ？ pic.twitter.com/yvRKJIXfRR
添付されたキャプチャ画面を見てみると、指摘されている箇所は、たしかに、実際に押してみるまで、「押せること」が分かりづらいデザインとなっています。
改めて、今回の事例はプロダクトのUIをデザインするうえで作り手が忘れてはならない基本を改めて思い出させてくれるものではないでしょうか。
視覚的なデザインにも「言語」がある
Webページなりアプリ画面にインタラクティブな要素を盛り込む以上は、ユーザーに実行してほしい操作を、必ず何らかの方法で伝える必要があります。
いちばん原始的かつ確実な方法は、言葉で伝えることです。
「ここはリンクです。興味があればクリックしてください」
「ここをクリックするとメニューが開きます。興味があればクリックしてください」
「この四角は入力フォームです。あなたの氏名を入力してください」
日本語で書けば、日本人には間違いなく伝わります。
ただ、いちいち説明を載せていたら、画面がゴチャゴチャして見づらくなってしまいますよね。
そこで登場するのが、視覚デザインです。
言葉ではなく、視覚的なデザイン要素を用いて、ユーザーとコミュニケーションを取るわけです。
で、ここが大切なところなのですが…
視覚デザインにも、「言語」があります。
そして、言語である以上は、ユーザーが知っている言語を使わない限り、ユーザーには絶対に伝わりません。
てんにちやそさんのポストに添付されていた画面のデザインで考えてみましょう。
件の囲みの部分は、実際には「（選択するために）押せる」要素なのに、押せることが分かりづらい状態となっていました。なぜ分かりづらいかというと、「ここは押せますよ」をユーザーがパッと見て理解できる視覚的な共通言語が使われていないからです。
「ここは押せますよ」を伝える視覚的な共通言語には、例えば次のようなものがあります。
・ラジオボタンを置く
・矢印など、「押す」操作を想起させるメタファー的なアイコンを添える
・立体的なボタン形状にする
（本職のデザイナーの方なら、もっと気の利いた案を挙げていただけると思います💦）
ここで大切なのは、見た目がオシャレとかカッコいいとかいう以前に、多くのユーザーが学習済みのデザイン言語を使うこと。そして、ユーザーが推測しなくても直感的に理解できる言語でなければなりません。
見た目がオシャレでも、伝わらなければ意味がない
ここ10年ほどのUIデザインのトレンドとして、間違いなくフラットデザインが主流になっています。
フラットデザインはマルチデバイス対応の観点で効率的な手法だし、ミニマルな表現手法で目に優しいのは間違いないのですが…ややもすると、淡白になりすぎて、ユーザーとコミュニケーションを取るための共通言語まで削ぎ落とされてしまっている事例をたまに見かけます。
いくらデザイナー本人が満足しても、ユーザビリティを犠牲にしてしまっては、本末転倒です。
例えばリンクであれば、リンクであることをユーザーに確実に伝える。
ユーザーに伝わってはじめて、UI として機能するのです。