1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="Xfgmw23o9D"><a href="https://uxdaystokyo.com/articles/300million-button-html/">300億円を売り上げるボタン</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/300million-button-html/embed/#?secret=Xfgmw23o9D" width="600" height="338" title="“300億円を売り上げるボタン” — UX TIMES" data-secret="Xfgmw23o9D" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/vol4.png154154この記事は、出典：The $300 Million Button を翻訳しております。 テキストボックスが2つ、ボタンが2つ、そして、リンクが1つのフォームがあります。これよりもシンプルなフォームというのも、なかなか思いつきそうにありません。 しかし、このフォームが、とある巨大ECサイトにおいて、年間300億円分もの売上を逃す要因となっていました。さらに悪いことに、この企業のデザイナーは、問題があるという認識さえ持ち合わせていませんでした。 フォームはいたってシンプルです。 テキストボックスは「メールアドレス」と「パスワード」。 ボタンは「ログイン」と「登録」。 リンクは「パスワードをお忘れですか」。 サイトへのログインフォームです。 誰もがよく目にするフォームです。一体、何の問題があるのでしょうか？ フォームの問題点は表示のタイミングだった 問題点は、フォームのレイアウトではなく、フォームが表示されるタイミングでした。 このフォームが表示されるタイミングは、ショッピングカートが購入したい商品を入れて、チェックアウト（購入）ボタンを押した後、商品を購入するための個人情報を入力する前でした。 デザインチームは、リピートユーザーがより手早く商品を購入できるようにと考え、新規購入者は、登録という余計な手間についてはあまり気にしないだろうと考えていました。 なぜなら、新規購入者も今後も利用するだろうし、2度目以降の購入の利便性の方を重視するだろうと考えていました。 だから、誰も損はしないだろう、というわけです。 会員登録するために来たわけではない （著者は）このサイトで商品を購入したいという人を対象に、ユーザ調査を行いました。被験者には、買いたい商品のリストを書き出してもらい、購入するためのお金を渡しました。被験者は、購入の手続きを済ませるというタスクしかありません。 ユーザ調査の結果、次のような事がわかりました。その企業のデザイナー達は、完全に新規購入者のことを見誤っていました。 被験者は会員登録にかなりの抵抗を感じていて、ログインフォームが表示されると、登録が必要なことに腹を立ていました。ある被験者の１人は「わたしは、会員登録するためにサイトを訪れたわけではない。買いたい物があったからサイトに来ただけだ。」と言ったのです。 ユーザーの中には、自分が新規利用者だったかどうかを覚えていない人もいました。そういう人は、いつも使っているメールアドレスとパスワードの組み合わせが使えずに腹を立てました。 被験者がいかに会員登録を嫌がるかを知って、私をはじめデザインチームはすごく驚きました。ユーザーからすると、一体何を登録させられているのかも分からないまま登録させられるのは、すごく不安になり、面倒だとも感じてしまいました。ユーザーにとっては、登録自体がうんざりしてしまう行為だったのです。 ユーザ調査の中で多く聞かれた声は、販売者が登録情報を記入させるのは、ひとえに必要の無い営業メールをしつこく送りつけるためではないか？と、疑問を持っていることでした。 実際、このフォームでは、名前・送り先住所・請求先住所・支払い情報を求めることは無かったのですが、プライバシーを侵害するような悪質な目的があったケースを経験し、ユーザーのメンタルモデル的に悪い印象しか残っていないことがわかりました。 リピート客にもほとんどメリットが無い リピート客にとって喜ばしいフォームだと思っていたデザインですが、実は、リピート客にとっても良いとは言いがたいものでした。 ログイン情報を覚えているほんの一握りの利用者を除いて、ほとんどこのフォームのせいで足踏み状態になってしまうからです。サイトごとに、登録したメールアドレスやパスワードなど覚えていられません。 どのメールアドレスを登録したのか、分からなくなってしまうで「パスワードをお忘れの方」の機能もうまく使えません。多くの人は、複数のメールアドレスを所有していますし、年月が経てば、メールアドレスが変わっていることもあるのです。 メールアドレスとパスワードを忘れてしまった利用者は、何度か考えうる組み合わせを試しますが、何度も繰り返してもめったに成功しません。結果、諦めて新規登録する羽目になったります。その場合ではなんとか購入できても、何度も同じことを繰り返す訳にはいきません。 本質の問題は、初めにどのメールアドレスを登録したのか思い出せないケースがあるということです。 ものすごい数のユーザーがパスワード請求している 次に調査したことは、販売サイトのデータベースを分析です。この結果、全購入者の45%が、システム内で複数の登録をしており、その数が10個以上に上る購入者もありました。また、パスワードを請求したユーザー数も分析しました。 その数は、なんと！1日に160,000人にもなることが分かりました。そのうちの75%は、パスワードを要求しますが、購入手続きを完了せずに離脱しているのです。 フォームは、買い物を簡単にするためにデザインされたものでしたが、このフォームのデザインの恩恵を受けている人はほとんどいないことが明らかになりました。 多くの利用者は恩恵を受けていないだけでなく、逆に間違った情報を修正する労力を強いられていました。例えば住所の変更や新しいクレジットカードの情報などです。このフォームは利用者を助けるどころか、購入から遠ざけていたのです。これらの損失は、相当なものでした。 300億円ボタンの誕生 この問題は、いたってシンプルな修正で解決しました。「登録」ボタンを取りやめたのです。 その代わりに、「次へ」ボタンを設置し、簡単な文章を付け加えました。「当サイトでの購入に、アカウントの作成は必要ありません。「次へ」ボタンをクリックし、チェックアウトへ進んでください。 次回からの購入をさらにスムーズにするために、チェックアウト時にアカウントを作成することもできます」と明記しました。 その結果、購入者数は45%増加しました。それに伴い、初めの1月で15億円の売上げが伸び、1年でサイトの売上げが300億円に増加したのです。 ある日、留守番電話に1件のメッセージが届いていました。このサイト（3兆円の販売サイト）のCEOからです。 彼がフォーム修正後の売上げを目の当たりにした最初の週のことです。メッセージは一言、「スプール! 君には脱帽だ!」。長ったらしいメッセージはいりません。私たちはボタンを変えただけですから。