この記事を書いた人

ユーザーインターフェースデザインにおけるボタンのスタイル変遷と7つの基本原則

 

 

Image: Gal Shir

 

はじめに

ユーザーインターフェース内において、ボタンはかなりの頻度で使用する要素であることは間違いないのですが、ともするとあまりに身近すぎて深く考える対象からはずれがちかもしれません。
ですがUIデザインをやっていると「ボタンとはなんぞや?」という哲学的な問いに直面することもあると思うので、調べて見ました。

するとボタンデザインは、過去数十年で大きく変容してきたそうです。
デザインがいかにして進化してきたのか、その概観を理解することで、効果的なボタンを作成するためのベストプラクティスが得られるかもしれません。

 

参照先

 

 

ボタンデザインの変遷

 

スタイル進化

 

立体ボタン

初期の頃から、オペレーティングシステムのボタンは、周囲の状況と区別するために、エンボスとシャドウの外観を利用してきました。
このデザインソリューションは単純な原則に基づいていました。
境界線、グラデーション、ドロップシャドウを使用すると、要素は背景やコンテンツに対して目立ち、クリック可能な要素として簡単に識別できます。

Windows 95ダイアログボックスは、ユーザーが視覚的な階層を解釈し、どの要素がインタラクティブであるかを理解するのに役立つ3D効果を作成するために、濃い影とハイライトを利用しました。

history-and-principle-of-buttons-in-ui

 

フラットデザインボタン

UIにおいて大きな変化の一つに、3D要素を取り除き、より平坦な印象を主軸にデザインされたフラットデザインがあります。
フラットデザインは、物理的な世界の外観を再現してユーザーへのアフォーダンス(体験)と学習をなめらかにする試みであるスキューモーフィズムから脱却して、デジタルな媒体をナビゲートする方法として考案されました。
結果的に、それはクリック可能性やタップ可能性をユーザーに伝達するために伝統的に仕様されていた重みのある伝統的な視覚的な装飾を取り除きました。

 

すべてがフラットになったとき、ユーザーはどの部分がボタンであるかをどのようにして知るのでしょうか?

ユーザーは、依然としてページ内でどの場所がタップ/クリック可能なのかを知ることができなければなりませんし、ユーザーインターフェースはその手がかりを有している必要があります。
フラットデザインにおいて、これらを達成するための重要な要素は色です。
色は、ユーザーがそれら操作可能性を認識するのを助ける主な識別子の一つになり得る要素だと言えます。

 

セミフラットデザイン(フラットデザイン2.0)とフローティングボタン

セミフラットデザインは、もとのフラットデザインの進化でした。
このスタイルはほとんどフラットですが、微妙な影、ハイライト、レイヤーを仕様してUIに深みを与えます。
GoogleのMaterialDesign言語は、定義化されたレイヤー構造を持つセミフラットデザインの一例であり、新しいタイプのボタン――つまりフローティングアクションボタンをもたらしました。
これらのボタンはインターフェイス上に重ねられており、注目させたいアクションや主要なアクションにユーザーの意識を集める要素として働きます。

例としてGoogleMapが挙げられています。
ユーザーがMapアプリで実行する操作は道筋を取得することであり、このFAB(フローティングアクションボタン)は、それを実行するためのボタンとして機能します。

 

ゴーストボタン

2014年に、UIデザインの世界に到来した主なデザイントレンドの一つが、ゴーストボタンでした。
ゴーストボタンは、長方形や四角形などの基本的な形状を持つ透明で空のボタンです。
一般的にかなり細めのボーダーで囲まれており、内部要素はプレーンテキストで構成されています。

history-and-principle-of-buttons-in-ui

 

ゴーストボタンの期限はフラットデザイン革命から来たといいます。
AppleがiOS7をリリースしたときに流行になりました。
iOSのUI上の多くは、ユーザーインターフェースデザイン界でゴーストボタンと呼ばれる要素に分類されます。

history-and-principle-of-buttons-in-ui

 

ゴーストボタンはCall to Action(CTA)ボタンとしても表示され、見た目がきれいにデザインできます。
以下はゴーストボタンのいい例です。

history-and-principle-of-buttons-in-ui
「今すぐ購入」アクションの主ボタンとしてフラットボタンがあり、副ボタンとして「ツアーに参加」ボタンがあります。

 

 

ボタンデザインの7つの基本原則

  1. ボタンをボタンのように見せる
  2. ユーザーが見つけられる場所にボタンを配置する
  3. ボタンのラベルを得られる結果内容が明瞭に理解できるものにする
  4. ボタンのサイズを正しく設定する
  5. 順序に注意を払う
  6. ボタンが多すぎないようにする
  7. 相互作用に関する視覚的または音声的フィードバックを提供する

 

▼ボタンデザインの基本的なベストプラクティス

デザインがアフォーダンス(体験)をどのように伝達するかを考えてみましょう。
ユーザーはその要素をボタンとしてどのように理解するのか?という視点で立つといいデザインができるはずです。

また、ユーザーが各ページのボタンとしてアプリやサイトのUI要素を識別して認識できるように、インターフェイスコントロール全体で一貫性を保つようにしましょう!

 

ボタンをボタンのように見せる

ユーザーインターフェイスと対話することになると、ユーザーは「クリック可能」なものとそうでないものを即座に知る必要があります。
一般に、ユーザーがUIを解釈するのに必要な時間が長くなるほど、ユーザーにとって使い勝手が悪くなります。

ユーザーが「クリック可能」なものとそうでないものに苦労しないように、デザインを考慮する時間はじつに有益な時間となるでしょう。
そのようなクリック可能性のデザイン提示が強いか、あるいはそうでないかは、モバイルユーザーにとってさらに重要な問題です。
個々の要素が対話式であるかどうかを理解するために、デスクトップユーザーは要素上でカーソルを移動し、カーソルの状態が変わるかどうかを確認できます。
モバイルユーザーにはそのような機会はありません。要素がインタラクティブであるかどうかを理解するためにユーザーがそれをタップする必要がありま。
インタラクティブ性をチェックする他の方法はありません。

 

ユーザーとデザイナーとの情報非対称性も重要な要素です。
ボタンはあまりにも存在が明白であるため、インタラクティブな要素としてわざわざ認識することが少ない。
インターフェイスを設計するときは、常に次の規則に留意してください。

 

あなたはあなた自身のデザインの各要素がどのような働きをするのかを完全に知っていますが、ユーザーがクリック可能性の意味を解釈する能力は、あなたと同じであるとは限りません。

 

形状

クリック可能性を明示的にデザインするには、おなじみのデザインを使用する方法をとることが簡単です。
ベーシックなデザイン戦略の一つは、ボタンを正方形または角の丸い正方形にすることです。長方形のボタンは昔からデジタルの世界に導入されてきた実績があり、ユーザーはこれらに精通しています。

丸みを帯びた角は情報処理を強化し、要素の中心に私達の目を引くことをいくつかの研究は示唆しています。

history-and-principle-of-buttons-in-ui
角のとれたボタンデザインは装飾的意味合いだけでなく、認知的補佐に役立つ

 

他のオプションとして、円などを使うこともできます。

 

ユーザーが見つけられる場所にボタンを配置する

ボタンは、ユーザーが簡単に見つけたり見たりできる場所に配置する必要があります。
ユーザーにボタンを探しさせないでください。
ユーザーがボタンを見つけられない場合は、ボタンは存在していないに等しいです。

 

ボタンのラベルを得られる結果内容が明瞭に理解できるものにする

一般的なラベルや誤解を招くようなラベルの付いたボタンは、ユーザーにとってフラストレーションの大きな原因になる可能性があります。各ボタンの機能を明確に説明するボタンラベルを書きます。理想的には、ボタンのラベルはその動作を明確に記述するべきです。

ユーザーはボタンをクリックしたときに何が起こるかを明確に理解する必要があります。簡単な例を挙げましょう。誤って削除アクションを起動したところ、次のエラーメッセージが表示されたとします。

history-and-principle-of-buttons-in-ui

 

「OK」と「キャンセル」が何を表しているのかは明確ではありません。

[OK]と[キャンセル]の2つのボタンだけで構成されるダイアログボックスやフォームを設計しないでください。

この場合、OKではなく「削除」を使用することが望ましいと考えられます。
これにより、このボタンがユーザーにどのような結果を返すのかが明確になります。

ボタンのサイズを正しく設定する

プライマリアクションボタン

 

最も重要なボタンを最も重要なボタンのように見せる。

タップが容易なボタンサイズにする

MIT Touch Labの調査によると、フィンガーパッドの平均は10〜14mm、指先の平均は8〜10mmです。
これにより、10 mm x 10 mmが最小のタッチターゲットサイズとして適切になります。

この提案は、エラーを起こしやすいタッチ対象を完璧にするためのものではなく、他の重要な特性(画面情報密度など)のバランスを取りながら、エラーの数を実用的なレベルまで最小限に抑えるためのものです。

history-and-principle-of-buttons-in-ui
ボタンサイズとタッチ対象ミスの発生率の相関

 

順序に注意を払う

ボタンの順序は、ユーザーとシステム間の会話の性質を反映する必要があります。
論理的には、前方に移動するボタンは右側に、後方に移動するボタンは左側にあるはずです。

 

ボタンが多すぎないようにする

これは多くのアプリやWebサイトで共通の問題です。
あまりにも多くのオプションを提供すると、ユーザーは何もしなくなります。
アプリやWebサイトでページをデザインするときには、ユーザーに最も重要な行動を考えてもらいます。

 

相互作用に関する視覚的または音声的フィードバックを提供する

ユーザーはボタンをクリックまたはタップすると、ユーザーインターフェイスが適切なフィードバックで応答することを期待しています。
操作の種類に基づいて、これは視覚的または音声的フィードバックのいずれかです。
ユーザーが何もフィードバックを得ていない場合は、システムがコマンドを受け取らなかったと考えてアクションを繰り返すことになります。
そのような振る舞いはしばしば複数の不必要な操作を引き起こします。

人間として、私たちは物と対話した後にいくらかのフィードバックを期待します。
それは視覚的、聴覚的または触覚的なフィードバックであるかもしれません。

history-and-principle-of-buttons-in-ui history-and-principle-of-buttons-in-ui

 

 

おわりに

 

ということでボタンデザインの変遷と基本原則をみてきました。
進化するにつれて、なにもなくなっていくのはおもしろいですね。
特にゴーストボタンに関しては、モダンなランディングページだったりアパレルのサイトだったり、クリエイティブ系ソフトのUIで多く採用されているように感じます。
ボタンが必要十分に機能して、かつ主張しすぎないで配置できることが、コンテンツファーストな時代性に合っているのではないかなと感じました。

あとは

丸みを帯びた角は情報処理を強化し、要素の中心に私達の目を引くことをいくつかの研究は示唆しています。

このような「角丸ボタンはなんかイケてる」、という感覚的なものから、その効用の仕組みをきちんと把握できたのはよかったです。

 

 

この記事を書いた人

伊澄 理夢

伊澄 理夢 / イズミ リム / IZUMI Rhime
2017年3月からブロックチェーンに興味を持って以来、デザインの面から、"NEM"を通じて技術の普及に貢献できる道を探しています。
児童文学と純文学、哲学と現代思想、仏教と禅、黒い服と民族衣装が好きなINTROVERT(内向型)です。
大学ではデザインを学ぶ。