最初にまとめると…
- ボタンはインタラクティブデザインにおける主要なUI要素の1つであり、ほとんどのビジネスではボタンのクリック数でその成功が測られます。
- Wixの優れたボタンデザインの原則を紹介します。
- ボタンを明確にする
- ボタンを見つけやすくする
- ボタンを識別しやすくする
- 明確で予測可能なシンプルなテキストを維持する
- シングルアイコンボタンの使用には注意が必要
- 階層と強調を意識する
優れたボタンの秘訣とは
ボタンは、インタラクティブデザインにおける主要なUI要素の1つです。複雑なインターフェースでは、1つのWebサイトに数百のボタンが配置されることもあります。ほとんどのビジネスでは、ボタンのクリック数でその成功を判断します。そのため、ボタンがどのように機能し、どこに導かれるのかをユーザーに伝えることが非常に重要です。私たちは、長年にわたり、デザインシステムによってボタンの技術を微調整してきました。
ボタンがあれば、ユーザーはプロダクトを操作し、目的を達成することができます。インターフェイスの操作、コンテンツの変更、またはその両方をサポートします。
原則
Googleが説明するように、優れたボタンデザインは3つの原則に従っています。識別可能であること、見つけやすいこと、明確であることです。Wixでは、これらの原則に忠実であることを心がけています。
ボタンを明確にする
ボタンは、何をするものかを明確に伝え、解釈の余地を残さないようにしなければなりません。テキストは、意図を説明するための主要な要素です。
もちろん、コンテキストを特定し理解するのに役立つアイコンを含めることもできます。しかし、テキストがなければ、完全な意味を持ちません。テキストは、そのボタンがクリックされたときに何が起こるかを約束するものです。
ボタンには複数のメッセージが必要な場合があり、テキストとアイコンは異なる意味を持つこともあります。
この例では、「More Actions ▾」で、テキストはここでその他のアクションが見つかることを示し、アイコンは、矢印をクリックするとその他のアクションのメニューがドロップダウンで表示されることを示しています。
ケーススタディ
2019年、WixのOSチームは、ボタンの階層を変更することを決定しました。ローンチ当初、当社のデザインシステムでは、主要なCTAにはテキストのみのボタンがありました。ページ上にある二次的なCTAはすべて、テキストなしのボタンだけで表示されていました。更新後、アイコンのみのボタンをすべてテキストまたはテキスト＋アイコンのボタンに変更しました。この小さな変更により、「新しいフォルダーを作成する」のクリック率が大幅に向上しました。また、主要なCTAの隣にある上部バーのアクションも、より多くの露出を得ることができました。
この視覚的な比較から、上部のレイアウトが下部のレイアウトに対していかに勝利したかがわかります。
「新しいフォルダーを作成」のクリック率は、主要な目標を損なうことなく、大幅に増加しました。
変更前、「新しいフォルダーを作成」ボタンがアイコンのみを表示していた時は、サイトをフォルダーで管理している人はほとんどいませんでした。
見つけやすいボタンにする
アクションは、ユーザーが見つけたいと思う場所に配置する必要があります。メインのアクションは常に目につき、一番上のエリアに配置する必要があります。ナビゲーションアクションは、ニュートラルに見せることもできますが、見えるようにする必要があります。メインパスに影響を与えない重要度の低いアクション（「削除」など）だけは、ポップオーバーで隠すことができます。
ツールアクションとナビゲートボタンを同じリストに配置することは避けてください。ユーザーは、コンテキストから外れているボタンを見つけることを期待しないかもしれません。
この例では、「カテゴリーマネージャー」ボタンはコンテキストから外れています。「その他のアクション」は、メニューがアクションを提供することを伝えますが、ナビゲーションボタンがあることは伝えません。
ボタンを識別できるようにする
ユーザーは、どのインターフェイス部分が静的で、どれがクリック可能かを簡単に理解する必要があります。Wixは、すべての主要なアクションに青色を使用しています。より明るい青色は、ボタンの背景色としてのみ使用することができます。
色のついた背景の場合など、コントラストの関係で青色を使用できないこともあります。そして、テキスト、コントラスト、形状が、ボタンを認識しやすく、他の環境と区別できるようにするために大きな役割を果たします。ウェブコンテンツ・アクセシビリティ・ガイドラインに従うと、テキストのコントラストがよくなり、大多数のユーザーが読むことができるようになります。
カラフルな背景には、黒のアクションが効果的です。下線付きのテキストは、それがアクションであることを明確にします。
テキスト
テキストは、ボタンの意図を説明する主要な要素です。明確で、予測可能な、シンプルなものでなければなりません。動詞で始めると、行動を促します。動詞は、ボタンがクリックされると何が起こるかをユーザーに伝え、次のステップを予測させるものでなければなりません。どの年齢層にも受け入れられるような、シンプルな言葉を使いましょう。
ケーススタディ
Wixのフォトスタジオチームは、A/Bテストを実施し、ボタンがテキストで表示されている場合、ユーザーのエンゲージメントが高まることを示しました。このアプリケーションでは、アイコンのみ、アイコンの下のテキスト、サイドのテキストの3つのレイアウトをテストしました。その結果、テキストが表示されているバージョンが勝利しました。
テストに失敗した後、レイアウトは元に戻されました。
このバージョンは、Photo Studioが採用した最終的な解決策です。当初の問題を解決し、タブの使用頻度も若干増加した。 この調査から、ボタンをわかりやすく、操作しやすくするために、テキストが重要な役割を果たすことがわかりました。
コンテキストに応じたテキスト
ボタンのテキストは、コンテキストを反映する必要があります。どのようなアクションが可能かをユーザーが認識できるようにします。例えば、アラートモダルは高速で表示され、レイアウトを変更します。したがって、可能性のあるアクションは非常に明確でなければなりません。
両方のボタンが何をするのか明確であることを示す良い例です。メインボタンはコンテンツのタイトルを反映し、正確なアラートメッセージを作成します。
悪い例では、ボタンがクリックされた場合に何が起こるのかが説明されていません。ユーザーはコンテキストを理解するために、以前の行動を覚えておく必要があります。 成功」または「2人のユーザーは同時に編集できません」のように、事実を述べるだけのモーダルでは、「わかりました、ありがとう」のように、あまり説明的でないボタンを使用してもかまいません。
アイコン
アイコンは、ユーザーがコンテキストを理解するのに役立ちます。しかし、アイコンはしばしば誤解を招くことがあります。アイコンは、テキストと同じようにユーザーにアクションを促すものではありません。このため、アイコンボタンを単独で使用する場合は、注意が必要です。
アイコンボタンは、ユーザーが定期的にボタンをクリックし、それを記憶しているようなプロフェッショナルなツールに最適です。テキストを含むボタンの隣にアイコンを配置することで、ユーザーの目に留まる可能性が高まります。
"Edit "ボタンは、ユーザーの注意をこのボタン群に引き付けます。アイコンボタンをマウスでクリックすると、ラベルがツールチップに表示され、そのアイコンボタンが何をするものなのかが一目瞭然になります。
ケーススタディ
サイドナビゲーションテストでは、Wixユーザーは、矢印アイコンを持つドリルインボタンにより興味を示すことがわかりました。
この研究は、テキストとアイコンを一緒に使用することで、どのように追加のコンテキストを与えることができるかを示しています。これにより、ユーザーは、どのボタンがページを離れ、どのボタンがより多くの選択肢を表示するかを理解することができます。
階層化
アプリケーションは、複数のアクションを持つ傾向があります。常に使用されるアクションもあれば、たまにしか使用されないアクションもあります。すべてのボタンに注意を払う必要はありませんが、すべてのボタンが発見可能である必要があります。良い階層は、すべてのアクションが必要なときに簡単に発見されることを意味します。良い階層を作成する方法には、複数のテクニックがあります。
配置
最も重要なアクションは、最も目につきやすい場所に配置する必要があります。Wixでは、ページの上部、右側のコーナーに配置します。ボタンが下にあればあるほど、発見されにくくなります。
左から右に記述される言語では、ユーザーは左から読み始めます。そのため、メインのコールトゥアクションを最後に右側に表示するのがよいでしょう。ユーザーは、すべての選択肢がすでに提示された後で、行動を起こすことができます。心理学者のハーマン・エビングハウスによると、一連の流れの中で最初と最後の要素は、最も記憶しやすいとされています。この傾向は直列配置効果と呼ばれ、UXデザインに利用されています。
最も重要なアクションである「保存」と「キャンセル」は右上に配置され、常に目に入るようになっています。
強調
すべてのボタンは、認識可能なアクションでなければなりません。そのためには、強調表示を使用します。ただし、すべてのボタンが同じレベルで強調されている必要はありません。1つのページには、メインのアクションを1つだけ表示します。他のアクションは二次的、三次的なものであるべきです。
スタイル
各ボタンは、それ自身の意図に基づいたスタイルを持つことができます。一連のスタイルは、顧客がアプリケーションで作業するときに使用するデザイン言語を作成します。一般的なボタン、ナビゲーションボタン、ソーシャルシェアボタン、アップロードボタンには、それぞれ異なるスタイルを設定することができます。各ブランドのプロダクトは、独自のボタンスタイルのセットを持つことができます。
サイズ
ボタンは、複数のサイズで表示することができます。大きなボタンは大きく広々としたレイアウトに表示し、小さなボタンは小さく混雑したスペースで使用します。
まとめ
アクション間の階層がうまく整理されていると、ページ上に調和が生まれ、ユーザーにとって読みやすく、理解しやすいものになります。例えば、Wix Seatings Map Builderでは、ボタンの異なるプロパティが、プライマリー、セカンダリー、最下位というアクション間の明確なヒエラルキーを作っていることが分かります。
- プライマリー：最もコントラストが高く、主な目的にとって重要。
- セカンダリー：クリックしなくても画面上で認識でき、メインゴールをアシストする。
- 最下位：アイコンボタンの下に隠れていて、メインゴールにあまり関係しないもの。「チケットの編集」。
各アクションには明確なテキストラベルがあり、ユーザーが一目見ただけでそのボタンを理解できるようになっています。ボタン内のアイコンは、業界標準の無地で認識しやすいものです。
この記事は、多くのチームの複数のデザイナーが経験したことをまとめたものです。ケーススタディ、洞察、フィードバックを共有してくれた皆さん、あるいは単にこの記事のインスピレーションとなった素晴らしいプロダクトをデザインしてくれた皆さんに、心から感謝します。
