Tortoise Shell

デザイン、システム開発、ライフハックについてゆるく書きます

シグニファイアとは何か

日々使っているスマートフォン。各々、好きなアプリをダウンロードして、当たり前のように使っている。

そして毎日、膨大な数のアプリがアップロードされている。

にもかかわらず、新しいアプリでも、大抵の場合はすぐに使いこなせるのはなぜだろう。

理由のひとつとして、「シグニファイア」がデザインに反映されていることが挙げられる。

シグニファイアを一言で表すと、「ユーザーを適切な行動に導くためのサイン」という意味になる。

シグニファイア

上の画像では、緑色の2つのボタンが並んでいる。いずれも、フラットデザインやマテリアルデザインが浸透した昨今、よく見られるボタンではないだろうか。

あなたは、いずれのボタンも「これはクリックできるものだ(ボタン)」とすぐに認識することができるだろうか? 

残念ながら、上のボタンは誤解されてしまう可能性が高い。

ただ背景に色がついているだけでは、「背景色がついた文章」か「ラベル」という風にも取れる。

ボタンの目的はクリックさせることなので、「クリックできる」をユーザーに分かってもらえるビジュアルにしなければならない。

そこで、「これはクリックできる」シグニファイアを実際に与えたものが下のボタンである。下のボタンでは、2つの工夫が与えられている。

ボタンの下に影をつけて、「盛り上がっている = 押せる」というヒントを示している。

また角を丸くして、現実世界での人口的に設計されるボタン(人を傷つけないように、操作部は角が丸くなっている)のメタファーであると意識に働きかけられる。

シグニファイアを考えるうえで、専門的な知識や技術は必須ではない。本当に大切なのは、ユーザー目線改善する意識を持つことだ。

ちなみに、上のボタンを悪い例のように書いているが、実際にはユーザーは操作していくなかで学習していく。

だから、サービス全体の中で、定義付けが行われてさえいれば問題ない。

最悪なのは、見た目が同じなのに、あるページではクリックできるボタンであり、あるページではただの装飾(背景に色をつけたかっただけ)であるというパターンだ。