Googleウェブサイトオプティマイザーで効果的なデザインを提供する方法

デザインは最終的には好みの問題になってしまうので、クライアントの意向などで、なかなかデザイナーが提案したものに仕上がらない事もよくあります。

クライアント側の意見を後から後から追加されてしまい、結果的にはハチャメチャなデザインになってしまう事も…。

しかし、クライアントへ、きっちりと提案したデザインが効果的であるという事を提示できれば、納得してくれるのではないでしょうか?

Googleから提供されているウェブサイトオプティマイザーを利用すれば、簡単にデザインの効果測定(A/Bテスト)ができるので、なかなか使えるツールになるのでは?

Googleウェブサイトオプティマイザーは、同時に複数のデザインを公開してクリック率やコンバージョン率などを測定し、どちらのデザインがより効果的なのかを比較できるツールです。

クライアントの予算にもよりますが…。クライアントが主張するデザインと、デザイナーが提案するデザインに大きな溝がある場合、2つのデザインを同時に公開し、ランダムに訪問するユーザーを振り分け、効果を測定し効果の高いデザインを採用すれば、両者が納得してサイト制作を進めていく事が出来るでしょう。

今回は、Googleウェブサイトオプティマイザーなどのツールを使って、実際にデザインの比較テストをしている事例をピックアップしてみました。

Googleウェブサイトオプティマイザー

Googleウェブサイトオプティマイザーのページはこのような感じ。数字やグラフで一目で効果的なページがわかります。

Googleウェブサイトオプティマイザー

Make sense of your site: tips for webpage design

もちろんGoogle社内でもこのツールは活用されていました。Googleのデザイナーの人たちは、以下の2パターンのデザインを比較し、多くのデザイナーが上のスクリーンショット付きのデザインに決定するだろうと予測していたようですが…。

なんと、結果は下のシンプルなデザインの方が30%もダウンロード数が多かったという結果がでたようです。Googleのデザイナーでもどちらのデザインがユーザーの心をつかむのかは、わからなかったという事ですね…。

画像を使ってインパクトを高める事と、コンバージョンをアップさせる事は必ずしもイコールではないという事ですね。

Make sense of your site: tips for webpage design

How Obama’s team used A/B testing to improve fund raising

アメリカ大統領選挙を制したオバマ大統領のウェブサイトでもしっかりとA/Bテストを行っているようです。サイトに掲載するTシャツのデザインを比較し、より効果的なデザインと配置を検証しているようです。

How Obama’s team used A/B testing to improve fund raising

How Obama’s team used A/B testing to improve fund raising

Google Website Optimizer Test: We Didn’t Implement the Winner

こちらもA/Bテストを行って、コンバージョン率を大幅にアップさせる事に成功した事例です。しかしながら、クライアントと話しあい、将来的なプランも見据えて2番めにアップしたデザインを採用したようです。クライアントとより深い関係を築く事が出来るのもA/Bテストの利点ではないでしょうか?

Google Website Optimizer Test: We Didn't Implement the Winner

Sparkt Studio

数パターンのデザインを比較検証した結果、最も効果的だったデザインを採用した事例です。

Sparkt Studio

Sparkt Studio

Sparkt Studio

最終的には、以下のデザインが採用されたようです。

Sparkt Studio

Writing Decisions: Headline tests on the Highrise signup page

こちらの事例は、デザインというよりは、キャッチコピーのA/Bテストの例です。上がオリジナルのコピー、下が30%コンバージョン率をアップさせたコピーだそうです。他にも様々なコピーの組み合わせが比較されています。少しの違いのように見えますが、結果には大きな違いがでるのですね…。

Writing Decisions: Headline tests on the Highrise signup page

Writing Decisions: Headline tests on the Highrise signup page

Should Retail Email Sell or Inform? An A/B Split Test Case Study

フォントやサイズ、コピーを変える事で、クリック率を7%、コンバージョン率を6%、売り上げを15%もアップさせた事例です。

Should Retail Email Sell or Inform? An A/B Split Test Case Study

Experiment or Go Home!

お花屋さんのサイトで、花の写真だけでなく、女性の写真をくわえる事でアップさせた事例です。

Experiment or Go Home!

Experimentando con el Test A/B

こちらは、スペイン語で書かれているのですが…。アイコンを上に配置する、吹き出しの色を変えてみるなど、デザインのマイナーチェンジで比較する事例です。

Experimentando con el Test A/B

Demo Club A/B test results

こちらは、お問い合わせフォームのA/Bテストです。上か下か、結局どちらが採用されたかわかりますか?正解はこちら

Demo Club A/B test results

デザインblogランキング

コメント 6 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



6 Responses to “Googleウェブサイトオプティマイザーで効果的なデザインを提供する方法”

  1. iPhone アプリ » Blog Archive » 「Googleウェブサイトオプティマイザー」 Says:

    […] 参考サイト http://www.designwalker.com/2009/05/ab-test.html […]

  2. SEO SEM チラシの裏 Says:

    ウェブサイトオプティマイザーで簡単A/Bテスト…

    サイトのデザインやレイアウトで複数候補が出たときに簡単にコンバージョン率などがテストできるウェブサイトオプティマイザー こちらに詳しい »Googleウェブサイトオプティマ…

  3. 生井(Namai)ストレス科学研究所 研究員の日常 Says:

    グーグル ウェブサイトオプティマイザー…

    ツイッター経由で仕入れた気になる情報。

    グーグルウェブサイトオプティマイザーというWebマーケ用のツールです。

    どういうものかというと、専門用語でいうと、
    「WebサイトのLPO…

  4. 僕の周辺のお気に入りを拾ってみる。 « attrip Says:

    […] Googleウェブサイトオプティマイザーで効果的なデザインを提供する方法 | … アクセス解析, […]

  5. links for 2009-10-04 « 個人的な雑記 Says:

    […] Googleウェブサイトオプティマイザーで効果的なデザインを提供する方法 | D… (tags: webdesign) […]

  6. カフェ関連サイトのシステム開発日記 Says:

    Googleウェブサイトオプティマイザーの仕組み【GWOの使い方】…

    最近はLPO(といっていいのかわからないのですが。。。)、
    及びCVR向上に興味があっていろいろ調べていました。
    するとGoogleウェブサイトオプティマイザーというツールを見つけました。
    ※USではGWOと略されていることも多いみたいです。
     
    これはGoogleが提供する無料ツールで、
    ABテストをするためのツールとして提供されています。
    ABテストだけでなく多変量テストもでき、かなり多機能です。
    ※以下、便宜上す…

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ