デザイン

Webサイトのボタンデザインにおける基本的な6つのルール

UXを考慮した説得力のあるボタンデザインのルールと役立つツールを紹介します。
読了目安:13分
avator-kameyama
Kota Kameyama
2019-1-21

SNSで記事をシェア

※当記事の著者について この記事は、Justinmindからの翻訳転載です。UX Planet経由で配信元または著者の許可を得て配信しています。


本当に多くのデザイナーが、ユーザーから好かれる製品を提供したいと考えています。優れたボタンデザインがなければ、それは不可能です。

ボタンは、インタラクションデザインに大きく影響する基本的なUI要素です。ボタンには、アクションの実行をユーザーに強く促す力があります。ユーザーと製品の仲介者であり、人と機械の会話を継続させる役割を担っています。では、クリエイティビティに溢れた画面にしつつ、優れたユーザビリティも実現するボタンはどうやってデザインすれば良いのでしょうか?この記事を読んで、答えを見つけましょう。

ボタンデザインの基本的なルール

人生の全てに、考慮すべきいくつかの基本的なルールがあります。ボタンのデザインは非常に簡単に見えますが、デザイナーが考慮しなければならない一見小さな要素がたくさんあるという意味でその典型です。これはより高いレベルのUXを実現するために従うべきガイドラインです。

1. クリック可能に見せる

ユーザーは製品を使用するときは、インターフェースの1つ1つの要素の背後にある意味や機能をいつも読み解く必要があります。読み解くのに長い時間をかけて欲しくないですよね?時間がかかればかかるほど、ユーザビリティは悪化します。

Design by Jan Van Echelpoel.

そのボタンが実際にクリック可能に見えるかどうかを、一旦立ち止まって考える必要がある理由がここにあります。デザイナーとして、あなたは自分が作ったものを熟知しています。あらゆる小さなインタラクション、あらゆるリンクを知っています。一方、ユーザーはあなたの製品を見たことがなく、それが何をするのか、どのように機能するのかも知りません。そのボタンに素晴らしいリンクが紐づいていると認識する保証はありません。彼らの心から疑いの余地を無くせるかどうかはあなた次第です。

だから、私達全員が慣れ親しんでいるボタンの形やスタイル を使うようにしてください。それは正方形のボタンや丸みを帯びた正方形のボタン、または他の一般的なインターフェースで見つけることができるボタンを含みます。全てのデザイナーが自分の作品を独創的にしたいと思っていることを理解していますが、人々がそれを使うことができなければ本当に独創的なものを提供しても役に立ちません。

影付きの丸みを帯びた四角形をお勧めします。私達はボタンに影を追加するのが好きです。奥行き感があることで、ボタンをクリックできることをユーザーに示せるからです。また、マイクロインタラクションを追加 して、カーソルがボタン上に移動したときに何らかの反応があるようにすることもできます。色のわずかな変化や上向きの小さな動きかもしれません - 重要なのはユーザーが要素をクリックできることを知っているということです。

2. 見つけやすく、予測しやすくする

私達が特定の形状のボタンに慣れているのと同じように、ユーザーはボタンを押すとどんな画面に行くべきかについての考えも持っています。私達はWebページを開いてすぐにボタンを見つけることを期待しています - ボタンがどこにあるか探し回るのを楽しむユーザーはいません。

これは、どのWebサイトに対しても事前に形成される予測であり、戦わないのが一番です。その代わり、まずは出発点としてあなたのデザインにその予測を適用し、その後あなたのスタイルに合うようにブラッシュアップする方法を見つけましょう。

ボタンがどこに行くべきかという人々の考えと争いたくないのは、ボタンも含めて、ユーザビリティには予測可能なデザインが必要だからです。あなたは見つけやすさ学習しやすさを確実なものにしながら、製品をユーザーにとって意味のあるものにしたいと望んでいると思います。つまり、人々の期待をあなたのデザインに反映させることで、初めて製品を扱いやすくし、それがどのように機能するのか、または何ができるのかを理解させやすくなります。

Design by Alexander Bykhovsky.

ボタンにユーザーの注意を向け、それが重要であることを伝えるためにコントラストの強い色を付けます。ユーザーがコンテンツを噛み砕いて理解してからボタンを明確に認識するのとは対照的に、目線がボタンにまっすぐ向くように、ネガティブスペースを最大限に活用してください。

ボタンのデザインが製品の使いやすさにどんな影響を与えるかを考えるときは、製品の一貫性を考慮することが重要です。たとえ、あなたがボタンを人々が期待するように見せ、それらをスクリーン上の共通の場所に置いたとしても - 全てのボタンが異なって見えるなら、人々はそれらが同じ機能を果たすか、他のものと同じように振る舞うかについて混乱します。

どんな機能のボタンでも、ウェブサイトの各画面で首尾一貫したデザインを持つ必要があります。全てのボタンに対して複製できるスタイルができたら、各ボタンの標準的な場所を設定します。このとき、ロジックと一般的なユーザーの期待に従います。たとえば、「前へ」または「次へ」ボタンに直面したとき、ほとんどのユーザーは「前へ」が左側にあり、「次へ」が右側にあると予想します。

3. ユーザーにボタンが何をするか伝える、推測させない

マイクロコピー(細かい言葉の表現) は重要ではないと誰かが言っても、絶対に信じないでください。確かに、ライターはメッセージを伝えるにあたってあらゆる単語は影響するが、それはさほど重要なことではないと主張するでしょう。しかし、ボタンのデザインはそれに合った正しいマイクロコピーがなければ完成しません。

Design by Anton Avilov.

ボタンに含むテキストは、「OK」と「キャンセル」に制限される必要はありません。実際には、これらの一般的な用語を無視して各ボタンの動作に焦点を合わせることで使いやすさが向上します。「完全に削除」または「予約をキャンセル」と表示されているボタンを使用すると、ユーザーが各ボタンを確実に理解できるようになり、間違いを犯す可能性が減り、使い勝手が向上します。

もう1つの便利なボタンデザインのヒントは、従来の「続行」または「キャンセル」ボタンしかないポップアップボックスを禁止することです。代わりに、どのようなアクションが実行されていて、それがユーザーにとって何を意味するのかを説明する、少なくとも1行のテキストを含むボックス を作成してみてください。

4. サイズが重要:実際にクリックできるボタンを用意する

ボタンのデザインは、各ボタンの大きさを決めることも意味します。細かなディテールのように見えますが、実際大きさは表面的な話ではありません。

ボタンのサイズは、モバイルデザインにとって特に重要です。 ボタンを大きくしすぎると視覚的に満たされた画面になりますが、ボタンが小さすぎると普通の指でクリックすることはできません。MITのTouch Labは2003年に、ほとんどの指先の幅が8〜10mmであるとの調査結果を発表しました。ユーザーが非常に小さな指を持っている可能性に賭けてデザインの使い勝手を損なうことを望まない限り、あなたはボタンを10mmより小さくしたいと思わないはずです。

Design by Alex Lauderdale.

ボタンの視覚的な階層を確立することを目指しましょう。つまり、最も重要な機能、つまり最も押して欲しいボタンが、視界の中で最も大きなボタンになるはずです。反対の性質を持つ2つのボタンに対しても同様です。良い結果をもたらすボタンをもう一つのボタンよりも少し大きくすることによって、重要そうに見えるようにします。

今日では、ボタンのデザインに関してさえも、デザイナーはレスポンシブデザインを心配せずに自分たちの仕事を進めることはできません。あなたのデザインを見たり触ったりするときは、複数のデバイスで使用される可能性を考慮する必要があります。これは、ユーザーが希望する画面サイズに応じて、定義されたサイズへの変更を考慮することで実現できます。

5. 全てに対してボタンを作らない

同じ画面で全ての機能をユーザーに提供することは良い考えのように思えるかもしれませんが、それは罠です。全ての選択肢を手に入れたいという気持ちがありますが、実際には、私達は同時にたくさんの決断を下すことを有難いと思いません。選択のパラドックスHickの法則の両方で指摘されているように、あまりにも多くの選択肢をユーザーに与えると、彼らは圧倒されてフリーズすることになります。

確かに、ホーム画面に全てのボタンを配置してもかっこいいようです - あなたの製品が飛行機のフライトデッキなのであれば。ユーザーに数回クリックさせるのを躊躇って、製品の使い勝手を犠牲にする必要はありません。ボタンデザインをツールとして使用して、ロジカルな方法でユーザーが目的の結果に到達できる方法を見つけましょう。Imformation Architectureの適切な枠組みに一定の時間を費やすことは、良い出発点です。

ボタンのデザインは、ボタンがどう見えるかや何をするかだけではなく、また、ユーザーにどのように提示するかについてでもありません。ロジカルになり、人々を急がせないでください - 人々が容易に辿ることができる道を作り、製品の全ての重要なポイントにつながる道路の枠組みを設計してください。

6. 常にフィードバックを提供する、さもなくばユーザーの怒りを買うリスクがある

Nielsenが「ユーザビリティに関する10の原則」にシステムステータスの可視性を含めたのは、冗談を言っていたわけではありません。本物の人間とは異なり、コンピュータはあなたがそうしない限りフィードバックをユーザーに返しません。実際の会話では、人々のボディランゲージが相手の話を聞いていることや理解していることを常に私達に知らせてくれます。これにより会話がはるかに簡単になります - そしてそれが、ユーザーが製品を使うときにすることなのです。人とソフトウェアの会話のようなものです。

Design by Brett Bertola.

あなたの製品は、コマンドが登録されたことをユーザーに常にタイムリーに知らせるべきです。フィードバックがユーザーに渡されるまでに時間がかかり過ぎると、ユーザーはそのフィードバックが何に関連しているのか分からなくなる可能性があります。フィードバックの意図が何も失われないようにするには、ボタンの状態を定義することをお勧めします。

ユーザーがボタンを操作するたびに、状態が変わり、行動の結果として何かが起こっていることを知らせることができます。彼らはコンピュータからの反応が返ってくることを知る必要があります。

これに関連して、マイクロインタラクションは、前回のブログ記事で説明したように、システムの状態をユーザーに伝えるための優れた方法でもあります。スマートなマイクロインタラクションを使用すると、ユーザーとソフトウェア間のコミュニケーションをスムーズにすることができます。これらをデザインするのはとても楽しいことです。

ボタンデザインを次のレベルに引き上げるUIキット

ここに異なるスタイルのボタンデザインを含む複数のUIキットがあります - たぶん、あなたの最新プロジェクトに完璧なマッチするような、あるいは次のデザインから取り組めるしっかりした基盤を見つけることができます。

Web Wireframing Library

このUIキットは、鋭いエッジで角張ったシンプルなボタンを含み、ほとんどのプロジェクトにおいて完璧な出発点です。シンプルでクラシックなボタンを使って、あなたのスタイルとプロジェクトのスタイル両方に合うように調整してください。ボタン以外にも、UXデザイナーが着想を得るために必要な全ての基本的な構成要素があります。これら全てが1つのUIキットにまとめられています。

Bootstrap

より多様で楽しいUIキット、Bootstrapは丸いエッジを持つ様々な色のボタンが含まれています。ボタンのデザインは若々しく、ちょっとポップな色を探している人に多くの選択肢を提供しています。ボタンには、全てのクラシカルなデザインと複数のドロップダウンが含まれています。

Kendo

このUIキットは自由に使える楽しいツールです。プライマリとセカンダリ両方の、あらゆるサイズのボタンが含まれています。複数のサイズオプションがあるので、Kendoを使えばはるかに簡単に、早く次のレベルのUXデザインを作成できます。言うまでもありませんが、私達はこのボタングループのデザインが大好きです。

まとめ

ボタンは、ユーザーが製品を操作するのに役立つだけでなく、ユーザーが任意の結果を得ることを強く促せるため、そのデザインは重要です。ユーザーがボタンの位置を即座に知ることができ、同時にそのボタンについて考えることを一度もやめないように、慎重に計画する必要があります。ボタンを華やかに、便利にしてください - そして、ユーザーにあなたの製品を最大限に楽しんでもらってください。

トレンド
ツール
グラフィックデザイン
UIデザイン
ボタン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator-kameyama
Kota Kameyama
Designer というより Artist でいたい。