ボタンは、相互作用のための最もシンプルな日常のデザイン要素です。 ボタンは単純なUI要素のように見えますが、そのデザインは過去数十年で大きく変わりました。 しかし、常に改善された認識と明確さを目指して。
この記事では、ボタンの進化を見て、効果的なボタンを作成するのに最も適した例を決定します。
スタイルの進化
3Dボタン
初期の頃から、オペレーティングシステムのボタンは、地形と影をエミュレートして周囲の要素と区別することに基づいていました。 この設計上の決定は、単純な原理に基づいていました-エッジ、グラデーション、シャドウの使用は、要素を背景から分離し、それを押すことをサポートする要素として認識しやすくします。
Windows 95のダイアログボックスでは、太い影とハイライトを使用して、視覚的な階層を定義し、インタラクティブな要素を認識するのに役立つ3次元効果を作成しました。
変形ボタン
設計では、スキューモーフィズムは、UI要素を実際のオブジェクトの形で作成する手法として理解されています。UI要素は、実際のテクスチャをコピーするか、ボタンが実際のボタンのように見えるかを問わない。 Skeuomorphismは、ユーザーが既存のエクスペリエンスを適用して新しいインターフェイスを使用する方法を理解するのに役立ちます。 計算機の例は、ユーザーが物理計算機の既存の知識をデジタル環境に移行するのに役立ちます。
フラットボタン
モダンなデザインの主な変更点の1つは、スケモルフィズムからフラット要素への脱却です。 フラットなデザインは、物理的なものを模倣することなく、デジタルの世界を探索します。 その結果、彼は、この要素をクリックまたはクリックできるヒントとして伝統的に使用されている太いヒントを削除します。
しかし、すべてがフラットである場合、ボタンがどこにあるかを理解する方法は？
ユーザーは、クリックまたはクリックできる場所を認識するために視覚的な詳細が必要です。 その結果、フラットボタンを使用する場合、色はインタラクティブな要素の主要な機能の1つになるため、色はフラットなデザインで大きな役割を果たします。
ほぼフラットなデザインとフローティングボタン
ほぼフラットなデザインは、ウルトラフラットの開発です。 ほとんどすべてフラットですが、微妙な影、ハイライト、レイヤーを使用して、デザインに深みを与えます。 Googleのマテリアルデザイン言語は、デザインが正しく優先順位付けされたほぼフラットなデザインの例であり、新しいタイプのボタン-フローティングアクティブボタンを導入しています。 これらは、メインインターフェイスの上部にあるレイヤーにあり、推奨されるアクションまたはメインのアクションに注意を引きます。
GoogleのMapsアプリケーションは、PAKの正しいアプリケーションの一例です。 基本的に、ユーザーはカードからルートを取得するため、PACがそれを行うのは理にかなっています。
UIでPAKを使用する別の例はEvernoteです。 ほぼフラットなデザインにもかかわらず、アプリケーションはナビゲーションバーとフローティングボタンに微妙な影を使用します。
ゴーストボタン
2014年、最も影響力のあるデザイントレンドの1つはゴーストボタンでした。 これらは、長方形または正方形の単純な形状の透明な空白ボタンです。 また、「空」、「裸」、「中空」とも呼ばれていました。 それらは非常に細い線で囲まれていることが多く、その中にはテキストのみが含まれています。
それらのルーツはフラットなデザインの革命から成長し、iOS 7のリリースで人気を博しました。このデザインの多くのボタンは幽霊のようなものです。 シンプルな長方形の形状は、優れたフォントと相まって、フラットなデザインで見栄えがします。
ほとんどの場合、これらのボタンには行動を促すフレーズが含まれています。 鏡面反射光サイトは、そのようなボタンを使用する良い例です。
ボタンを作成するための最も簡単なガイドライン
独自のボタンで作業を開始する前に、デザインがユーザーをどのように操作するよう招待するかを考える必要があります。 ユーザーは、アイテムがボタンであることをどのように理解しますか？ ほとんどの場合、次のことが必要です。
•ボタンをボタン（フォーム）のように見せるため。
•ユーザーが簡単に操作できるようにする（サイズとインデント）。
•署名ボタン（ショートカット）。
•カラーコントラストを使用して、行動を促す（色）。
ユーザーがアプリケーションまたはサイトの要素を認識できるように、一定のインターフェイスを維持することを忘れないでください。
形
サイトまたはアプリケーションのスタイルに応じて、ボタンを長方形にし、角を丸くするのが最も効果的です。 長方形のボタンは長い間デジタルの世界に登場しており、ユーザーはそれらに精通しています。
一部の研究では、角の丸みが情報処理を改善し、要素の中心に目を引くことを示唆しています。
創造性を有効にし、他のフォーム（円、三角形、または独自のフォーム）を使用できますが、後者のオプションの方がリスクが高くなります。
サイズとインデント
ボタンのサイズも、ユーザーを支援する上で重要な役割を果たします。 ボタンのサイズとクリック可能な要素間のギャップに注意する必要があります。
サイズ 通常、タッチスクリーンを使用してインターフェイスを操作する場合、MIT Touch Labの調査に頼って正しいボタンサイズを選択できます。 この研究では、平均して、指先のサイズは10〜14 mmであり、先端は8〜10であることがわかりました。この点で、10x10が適切な最小ターゲットサイズです。
これは、マークを逃さないことを保証するものではありませんが、他の重要な特性（画面の情報密度など）とのバランスを維持しながら、エラーの数をほぼ許容できるレベルに最小化できます。
マウスとキーボードが主要な入力方法である場合、ボタンのサイズは、より高密度のUIに依存して小さくすることができます。
インデント 。 ボタン間の距離はコントロールを分離し、それらが「呼吸」できるようにします。
ショートカット
ボタンの正しい名前を選択する必要があります。 言葉は最小限の驚きの原則に従って選択されます：ボタンの名前が驚きを引き起こす場合、それは変更されるべきです。 シンプルなルール-ボタンのアクションを示す単語を呼び出します。 クリック後に何が起こるかについて簡単な説明を追加するか、アクティブな動詞を使用してそのアクションを反映します。
この例では、ユーザーがWebアプリケーションを介してDropboxにファイルをアップロードしたときに表示されるダイアログボックスを見ることができます。 メッセージには、「素晴らしい！」というボタンが1つあります。 そして、この名前をクリックするとユーザーが混乱する可能性があります。
色
パレットを選択するときは、色がユーザーがアクションをナビゲートして理解するのにどのように役立つかを覚えておいてください。
- 色とコントラストを使用して、ユーザーがアプリケーションの内容を確認して理解し、必要な要素と対話し、アクションの意味を理解できるようにします。 この例では、破壊的なアクションを引き起こす可能性のあるボタンに赤を使用しています。
- 最も重要なボタンを最も重要な外観にします。 たとえば、Amazonは対照的な黄色のボタンを使用して、ユーザーを目的のアクションに引き付けます。
おわりに
各ボタンにより、ユーザーは必要なアクションをユーザーに実行させる必要があります。 ウェブサイトやアプリケーションが忙しいユーザーとの会話だと想像してください。 ボタンは会話で重要な役割を果たします-トラブルのない対話が会話をサポートし、グリッチ（たとえば、正しいボタンが見つからないなど）が障害を引き起こします。
みんなありがとう！