UXチェックリストシリーズ：ボタンのデザイン| Seer Interactive

ボタンは、ユーザーがコンテンツを便利に操作するための便利なタッチポイントです。 小さいながらもすばらしいボタンは、設計が不十分な場合、Webサイトでのユーザーエクスペリエンスを左右する可能性があるため、ボタンを設計するときは、オペレーティングシステムのベストプラクティスに従うことが重要です。

ボタンを押すことは満足です。 ボタンは、大きく輝く赤いボタンから、電話の小さな印刷可能なアイコンまでのアクションを示します。 ネガティブな体験をするまで、毎日タップまたはクリックするボタンの数に気付かないことがよくあります。 小さすぎてタップできない迷惑なボタンや、クリックしても何も起こらないボタンは、ユーザーエクスペリエンスを損なう可能性があります。

この投稿では、サイトのボタンを使用して確実に使いやすくする方法について説明します。 次の手順に従って、コンテンツとユーザーの両方に最適なボタンのタイプを決定します。

5つのボタンタイプ

固定ボタン

固定ボタンは、ユーザーアクションの視覚的な手がかりとしてページを分離することにより、ユーザーが実行できる主要なアクションを指します。 ボタンを使用すると、ユーザーはコンテンツに受動的に関与するのではなく、選択を行うことができます。 したがって、固定ボタン機能を最も重要な機能アイテムにする必要があります。これは、詳細情報を登録するためのアクションの呼び出しであろうと、ユーザーを別のコンテンツページにリダイレクトするための呼び出しであろうと関係ありません。

固定ボタンの例

ライン/ゴーストボタン

これらのボタンは二次機能用であり、画面から目立たなくなります。 シンプルなカラーラインで、ユーザーの注目を集めませんが、ページの他の部分からは目立ちます。 ユーザーがテーブルボタンの上にマウスを置くと、塗りつぶしが「ゴースト」してインタラクティブ性が向上します。

ライン/ゴーストボタンの例

FAB（フローティング機能ボタン）

人気になりました Googleマテリアルデザイン、FABは、ディスプレイ上の主要なアクティビティを表します。これは通常、単一の機能アイコンを介して送信されます。 ボタンの後ろの影が光学的にボタンを画面から引き離し、FABを自然な人目を引くものにします。 それらの丸い形は通常、他の目に見えるコンテンツとは異なり、UXの調査ではこれが示されています 丸みを帯びた角は目に優しい。

FABの例

アイコンボタン

多くの場合、アイコンボタンは、アクションを伝えるためにラベルに関連付けられています。 ステッカーのないアイコンボタンは、コンピューターのスキルが低い人にはお勧めできません。そのため、アイコンとボタンのテキストを常に組み合わせるのが確実です。

アイコン+ステッカー（左）とアイコンボタン（右）

テキストリンク

大事なことを言い忘れましたが、テキストリンクは色（多くの場合青）、下線付き、および/または「フォローする“、”続きを読む“、 等々。

これらのボタンはテキストの内側または外側に配置でき、通常は機能にとってそれほど重要ではありません。

ボタンの寸法

フォローするには MITタッチラボの結果 タッチスクリーンに使用される指の面積を測定するときの良い目安は（赤みが意図されています）、ボタンの最小サイズは10 mm x 10mmまたは37x 37 x37です。このサイズのボタンの最小要件はタッチ精度が低いことです。

裏側では、72 x 72ピクセルより大きいボタンもタッチ解像度が低いため、ボタンサイズのスイートスポットは携帯電話で約42〜72ピクセルです。

モバイルデバイスではなくデスクトップのボタンのサイズを変更する場合、カーソルは指よりも小さく、設計者をだまして小さなボタンを作成できると思わせることがよくあります。 コンピューターのモニターはタブレットやモバイルのモニターよりもはるかに大きく、ボタンが小さすぎるとページに簡単に消えてしまう可能性があります。

ボタンの寸法を決めることに加えて、ボタン間のスペースを考慮することも重要です。 ボタンを近づけすぎると、誤って間違ったボタンをクリックしてしまう恐れがありますが、離しすぎると、ユーザーインターフェースが外れたように見えたり、必要なときにタップしづらくなったりすることがあります。

ボタンの一貫性

意識しているかどうかにかかわらず、ユーザーはインターフェースの詳細を覚えています。 特定の要素の形状を、フロッピーディスクアイコンの[保存]ボタンやデバイスからファイルを削除するためのリサイクルビンアイコンなどの機能やボタンに関連付けます。 一貫性のあるデザインは、全体的なデザインを強化するだけでなく、ユーザーにとってなじみのある、よりシームレスなエクスペリエンスを作成します。

ボタンはユーザーのアクションポイントであるため、ボタンのテキストも機能する必要があります。 乞うご期待 （完了、開始/停止、検索）またはボタンの単純な動詞と名詞の組み合わせ（次のページ、メッセージを送信、 もっと詳しく知る）。 選択したマーキング方法を使用して、すべてのボタンの一貫性を維持します。

動詞+名詞（左）と動詞（右）

視覚化に関しては、ボタンのテキストにすべて小文字、大文字、大文字のいずれを含めるかを選択します。 カラー言語を検討してください。ユーザーは、「保存」という赤いボタンで混乱する可能性があります。

同時に、色を選択するときは読みやすさを保ちます。 視覚障害のあるユーザーは、サイトのボタンを読んだり使用したりするのが難しい場合があるため、これを使用してみてください 便利な道具 あなたの色がアクセシビリティ要件を満たしていることを確認します。 アクセシビリティ設計のベストプラクティスについては、UXチェックリストを参照してください。

小文字（左）、大文字（中央）、見出し（右）

ボタンデザインの色言語

一貫したボタンの形状とサイズを使用してください。 ボタンの角度はさまざまですが、通常、ハードライン、丸みを帯びたエッジ、丸薬の3つのカテゴリに分類されます。 丸みを帯びた角は通常、シンプルさと透明性を示しますが、ハードエッジはより滑らかでフォーマルです。 どちらのスタイルを選択しても、すべてのボタンが同じように見えるようにします。

硬い線（左）、丸みを帯びたエッジ（中央）、丸薬のような（右）

これを読んだ後は、ボタンで成功しすぎないでください。 ワイルドカードを過度に使用すると、ユーザーは何もせずにサイトを離れます。 ボタンは、ユーザーに実行してもらいたい重要なアクティビティのほんの一握りのために予約する必要があります。 このガイドを使用して、サイトのボタンを確認および確認し、ボタンが一貫していて、視覚的なブランドアイデンティティに適していることを確認します。

ニュースレターを購読して、このようなメッセージをさらに受信してください。受信トレイに直接配信されます。