UI再考 - ボタン編

ボタンとはなんなのか

ボタンはアクションを起こす「押せるもの」である。押されていない状態と押し続けている状態を持ち、押し続けている場合と押してから指を離す場合のそれぞれでアクションが実行できる。

だからボタンは「押せるということ」と「押した後に何が起きるか」がわからなければいけない。
ボタンがボタンに見えるために必要な要素は、立体感と丸みのいずれかである。立体感は奥に押せることを視覚的に認識させ、丸みはボタンの性質、手が触れることを考慮されていることが多いという知識によってボタンだと認識される。

例えばMUIでは以下のようなボタンを定義している。

このボタンは形状とhoverやactive時の色の変化によって「押せるということ」を示し、テキストによって「押した後に何が起きるか」を示している。
左の例では一見したただけでボタンであると認識するのは難しい一方、中央や右の例ではボタンであるように認識できる。
右の例では必ずしも立体である必要がないことを示している。

Web上のボタンの新しい可能性

工業デザインではラベルのないボタンは多い。ボタンの位置が不変であって、かつ押せるということが明確なのでそれが可能になっている。
iPhoneでは電源ボタンと音量ボタンのサイズが異なったり、音量ボタンを並べることで意味を覚えやすくしている。
Web上であっても、ボタンの位置形状を最適化すれば、テキストやアイコンなしでも可能かもしれない。ただしユーザは多数のWebページを閲覧するし、各Webページの構造を記憶したりはしないから、意味が明確である位置をもつボタンは稀だろう。