category
サイト構築 -ユーザビリティ

ユーザーにクリックされやすいボタンデザインの5つのポイント

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。

サイトのキャプチャ

Web Design Trends: Call To Action Buttons

先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。
以下は、各ポイントを意訳したものです。

はじめに

サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。
ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。

行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

1. ボタンのカラー

サイトのキャプチャ

ボタンのカラーはページの他の箇所より際立ったものを使用します。通常は、より明るく、コントラストがあるカラーです。

2. ボタンの配置

サイトのキャプチャ

ボタンのページ内での配置は、ユーザーが簡単にみつけだせる場所に配置します。
商品画像の横、ヘッダ、ナビゲーションの側など明白な場所に配置し、決して見つけにくい配置はしないでください。

3. ボタンの文言

サイトのキャプチャ

ユーザーとのコミュニケートで重要なのは言葉です。それは簡潔で、ポイントをついたものにし、「サインアップ」や「ダウンロード」などユーザーの行動をあらわすものにします。
ユーザーに響く言葉の一つに「フリー」「無料」があります。ユーザーが行動への呼びかけボタンをクリックする理由を考えてみてください。

4. ボタンのサイズ

サイトのキャプチャ

最も重要なボタンは、ユーザーがボタンをクリックしやすいように他のボタンよりも大きくしします。その際は可能な限り大きなエリアを確保してください。

5. ボタンのスペース

サイトのキャプチャ

ボタンの周りは他のエレメントで混雑させるべきではありません。充分な余白を確保します。そして可読性のために、テキストには充分なパディングも設定します。

Post on:2010年2月17日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

links for 2010-02-17 | SHIGEKAZU OSHARE blog
on 2010年2月17日

[...] ユーザーにクリックされやすいボタンデザインの5つのポイント | コリス (tags: usability button ui) CREAMU – web2.0を紹介するデザイナーブログ (tags: wordpress webservice webdesign web2.0) 探しあ [...]

ページの先頭へ




© coliss

RSS