ボタンデザイン、6つの意識すること。
webやアプリのデザインをするうえで、ボタンはユーザーにアクションを促す重要な役割を果たしてくれています。
今回の記事では、より効果的なボタンが作成できるように、5つのポイントをまとめてみました。
既にご存知の方も、初めて知る方も、この機会に確認していきませんか☕
1.直感的にボタンだと認識できる
ユーザーにアクションを起こして欲しい的、「クリック可能」か、そうでないかを直ぐに認識する必要があります。認識するのに時間が長くなるほど、UIの評価は低くくなります。
では、ユーザーはどのようにボタンを認識しているでしょうか？
日常生活において身近なデザインは、ぱっと見て使用できるデザインになっています。それをそのままデジタルの世界にも応用できます。
つまり、先人たちが築いてきた経験と、視覚的記号に基づいて、サイズ、形、色、影などを使用する事が重要です。
独自のオリジナル性を出しすぎないように注意して、
自分以外の人間が見ても「ボタンだ！」と分かるものを作成しましょう。
2.余白と文字サイズの重要性
ボタンを構成する要素は、「テキスト、アイコン、囲み」です。
図形内に適切な空白を組み合わせて、情報を認識しやすくすると、ボタンのラベルを理解しやすくなります。
3.ボタンに優先順位をつける
「モノクロのボタン」と「カラフルなボタン」が並んでいると、「カラフルなボタン」の方が無意識に目に留まるので、優先順位が高く認識されます。ボタンには「非アクティブ」と「アクティブ」の対比関係になるものがいくつか配置されているので、それぞれの役割をデザインして上げることで、相対的に優先順位や行動の意思決定へと導く事ができます。
CTAボタンなど、より優先順位が高いものは、サイト内でも目立つように配置してあげる事がベストです。
4.トーンとユーザービリティを反映する
webサイトのデザインは、年齢や性別など、コンセプトやブランドイメージに合わせてデザインしていきますよね。
なので、それに合わせて、ボタンもポップだったりスタイリッシュだったりトーンを反映していきます。
そして、誰が、どんな状況で、何を目的に使うのか想定し、やりたいこと（目標）が効率よく実行できる(ユーザービリティ)かを、意識しましょう。適切な形で配置することができれば、ユーザーの満足度も達成することができます。
5.モバイルフレンドリーに対応する
モバイルユーザーにも、指で操作しやすいサイズに調節する必要があります。タイプミスに繋がりやすい、サイズや配置場所は避けましょう。
最小でも10mmx10mm以上が適切なサイズだと言われています。
ターゲットに合わせたサイズを心がけましょう。
6.ボタンの種類を増やしすぎない
アクションが同じボタンのデザインは統一しましょう。
整理されたボタンルールは、直感的なアクションに繋がります。
しかし、アクションが同じなのに、デザインの種類が多いと、
ユーザーは離脱しやすくなります。
結論
ボタンはユーザーとコミュニケーションするうえで、もっとも重要な要素だと再認識しました。細部に神が宿るとは良く言いますよね。
改めての自分の作成するデザインを見返してみては、いかがでしょうか。
参考にさせて頂いたもの↓
UXデザインをはじめる本
7 Basic Rules for Button Design
この記事が気に入ったらサポートをしてみませんか？