ユーザーインタラクションを促進するために、B2B業界のウェブサイトボタンを標準に従って設計します。

デザイナーの分析能力はデザイン技術そのものよりはるかに優れていると私は以前言いました。では、何を分析すべきでしょうか? この調査レポートでは、ユーザー行動分析こそがデザイナーが最も熟達すべき分野であると考えています。ボタンについては、実際のボタンであれ疑似ボタンであれ（疑似ボタンとは、このリンクがデータ送信に関係していることだけを示すもの、またはリンクを強調するためだけにボタンで表現されたもので、「疑似ボタン」と呼ばれます）、ボタンの形で表現する最大の目的は、このボタンをクリックするとデータを送信したり、Web サイトとやりとりしたりできること、またはクリックすると Web サイトやユーザーとやりとりするためのページが表示されることをユーザーに知らせることです。そうなると、デザインの成否を評価する基準は、ボタン自体の美しさではなく、ニーズのあるユーザーがこのボタンに気づき、クリックする意思があるかどうかになります。ユーザーは、「なぜこのボタンをクリックする必要があるのか​​？」「このボタンは重要なのか？」と考えます。なぜなら、中国人は物事を行う際に利益を重視しているからです。デザイナーは常にユーザーの利益に注意を払わなければなりません。

このセクションでは、ボタンの色、ボタンのサイズ、ボタンの形状、ボタン上およびボタンの横のテキスト、配置という 5 つの側面から、ボタンの設計と使用に関する一般的な基準について説明します。

1. ボタンの重要性を強調するために、コントラストが高く目を引く色を使用します。

ボタンに高コントラストの色と目を引く色を使用すると、ボタンの重要性を強調することができ、この 2 つが同時に使用されることがよくあります。ほとんどの場合、ボタンはその重要性を強調するために使われます。図(13)に示すように、意図的に補助的なボタンとして使用する場合など、重要性を強調する必要がないケースはごくわずかです。

図（13）Made-in-Chinaの検索ボタンは、コントラストが高く目を引く黄色のボタンを使用しています（スクリーンショット：2011-2-9）

図（13）の右側に示すように、ボタンは2つあります。右側のボタンの色は基本的に背景色と同じですが、左側のボタンの背景色は黄色で、周囲の色とはまったく異なります。フォントの色も異なり、フォントは太字になっています。これは、左側のボタンが重要であり、右側のボタン (これもボタンである) よりも重要であることを示しています。実際にクリックすると、このようになります。

2. 重要性を強調するために大きなボタンを使用する

Web ページでは、周囲の要素に対する要素のサイズがその重要性を示します。要素が大きいほど、その要素の重要性が増します。テキストやボタンも同様で、目立つものになります。この重要性は、ページの焦点に基づいて決定する必要があります。

図（14）アリババ中国の「衣料品セクション」の検索ボタンは非常に大きい（スクリーンショット：2011-2-9）

図（14）に示すように、これはアリババ中国の「衣料品欄」の検索ボタンです。図からわかるように、検索ボタンは非常に大きく、一般的なポータルサイトの検索ボックスよりも大きいです。これは、アリババが10年以上運営されており、膨大な情報量を持ち、総合的なB2Bサイトであるためです。どのユーザーがサイトにアクセスしても、直接閲覧したり、カテゴリ別に閲覧するだけでは、必要な情報を見つけるのに時間がかかり、困難です。そのため、検索は非常に重要になります。ウェブサイト運営者としては、購入者が検索を通じて情報を得て、ウェブサイトの真の価値を反映できるようにすることも望んでいます。ご覧のとおり、Alibaba の検索ボタンは一般的な B2B 業界ポータルの検索ボタンよりも大きいです。新しく立ち上げられた B2B ニッチ業界のウェブサイトの場合、検索を重視しすぎるのは間違いです。検索する情報が少なく、ウェブサイトの弱点が露呈することになるからです。デザインはウェブサイトの実際の状況にも関係します。

図（15）アリババ中国の「商品ページ」にある「保証契約書に署名」ボタン（スクリーンショット：2011-2-9）

図（15）のボタンからわかるように、これらの優れたウェブサイトのプロダクトマネージャーは皆、サプライヤーが購入者に関するより多くの情報を入手し、問い合わせを増やし、より多くの購入を達成できるように、購入者が1ページで行動を起こし、契約に署名し、価格についてすぐに問い合わせるように促す必要があることを理解しています。これらのボタンは非常に大きくて目立つため、美観の観点から見ても大きすぎます。しかし、実用的な観点から見ると、これがボタンの価値を最大化する唯一の方法です。そのため、「B2B業界ポータルWebサイト設計および開発実践研究レポート」では、デザイナーはWebページの各要素のデザインを、美観の観点からだけでなく、「製品を作成する」という観点から扱う必要があると考えています。多くの場合、「実用性」のために美しさを犠牲にする必要があります。

3. ボタンの形状は、規則的で目立つ、真面目なものにする必要があります。漫画風、娯楽的、目立ちすぎ、または控えめすぎたものは避けてください。

前の章で述べたように、「ページのフレームは正方形で規則的である可能性が高い」。同様に、Web ページのボタンも正方形で規則的である必要があります。ボタンの角は少し丸くすることができますが、丸い角は大きすぎてはいけません。丸い角が大きすぎると、真剣さが足りず、商業的ではない印象を与えてしまいます。 「B2B業界ポータルサイト企画の実践研究レポート」でも述べたように、B2B業界のサイトは、結局のところ、20歳以上の働くプロフェッショナルを相手にしています。仕事は真剣であるべきであり、娯楽であるべきではありません。

以下の 6 つのボタンは、さまざまな B2B 総合サイトや業界サイトから収集したログイン ボタンと登録ボタンです。ここから、B2B 業界サイトのボタンのほとんどは長方形で、角が小さく丸くなっていることがわかります。 2 つのボタンを一緒に配置する場合、それが主要なアクションなのか二次的なアクションなのかを区別する必要があります。最後のボタンは Alibaba から引用したもので、こちらの方が優れています。色を使用して主要なアクションと二次的なアクションを区別しています。

図（16）各種B2B総合サイトや業界サイト上のログイン・登録ボタン

図（17）は、Alibaba（左）とHuicong.com（右）でキャプチャされたユーザー登録ボタンを示しています。2つのWebサイトのデザイナースキルの違いがわかります。左側のAlibabaは明らかに目を引くものであり、右側のボタンは目立ちません。多くのWebサイトが同様のデザインをしており、すべて修正する必要があると思います。左ボタンと右ボタンは、実際には直接使用されるシステムボタンであり、どちらも画像として設計されていません。違いは、Alibaba のボタンには CSS スタイルが追加されており、見栄えが良くなり、目を引くようになっていることです。この詳細から、Alibaba の製品の方が優れていることがわかります。

図（17）アリババと匯崇の登録送信ボタンの比較

図（18）の1番目と2番目のボタンについては、最初のボタンは丸すぎて軽薄に見え、商用ウェブサイトには適していないと思います。2番目のボタンは目立ちすぎて、ページ上のパッチのように見えます。ボタンは大きくすることができますが、あまり突き出るべきではありません。 3 番目のログイン ボタンが大きすぎます。特大のボタンは左右揃えのためだけに使用されており、ページの見た目が非常に粗くなっています。これらのケースはすべて、B2B 業界の Web サイトから選択されています。このレポートでは、このデザインは失敗であると考えています。

図（18）B2B業界のウェブサイトデザインの標準に準拠していないボタン

4. ボタン上およびボタンの横のテキストを使用して、ユーザーに何を期待するかを伝えたり、質問があれば説明したりします。

ボタンを設計するときは、ユーザーの行動を分析する必要があります。色が目を引く、比較的大きいなど、すべてユーザーがボタンをより頻繁に見るようにするためです。しかし、ボタンを見た後の行動はどうでしょうか。ユーザーは、なぜこのボタンをクリックする必要があるのか​​、それが私にどのようなメリットをもたらすのか、クリックすると何か害があるのか​​、疑問に思うでしょう。あるいは、ボタン上の言葉を理解していない、または慣れていないため、クリックしたくないかもしれません。デザイナーとして、ボタン上のテキストを通じてユーザーに伝える必要があります。さらに言葉やコメントが必要な場合は、ボタンの上、下、または右に配置して、ユーザーが次のステップに進むように誘導する必要があります。もちろん、「ログイン」や「送信」など、誰もがよく知っているボタンについては詳しく説明する必要はありません。

図（19）に示すように、最初のボタンのテキストは「無料登録」です。これは、登録には料金がかかると思い込んでクリックしないようにするためです。マーケティングの観点から見ると、無料カードを使って、より多くの人々に会社情報や連絡先情報を提出するよう促しています。そうして初めて、ウェブサイトにはユーザーとコンテンツがあり、ウェブサイトの営業担当者にはより多くの潜在顧客がいます。これについては、「B2B業界ポータルサイトの宣伝に関する実用的なヒント」で詳しく説明しました。 3 番目のボタンの「今すぐログイン」は、会員がすぐにログインするように促すためのものです。ログインすることで、情報の投稿、問い合わせの確認、Web サイトへの理解を深めるなどの操作を実行できるようになります。Web サイトに毎日ログインする会員数は、毎日登録する会員数と同様に、Web サイトの運営の重要な評価指標です。 3 番目のボタンの右側にあるテキストは、ユーザーが遭遇する可能性のある問題を解決することを目的としています。たとえば、ログイン ボタンをクリックしようとすると、パスワードを忘れたことを思い出し、ボタンの横にパスワード取得リンクが表示されます。同時に、まだメンバーではないかもしれません。この時点で、まだ無料で登録できることをユーザーに思い出させる必要があります。

図（19）ボタンの意味とプロンプト

図（20）には6つのボタンがあり、すべて会員ができることを表しています。会員でない方は、迷わず今すぐ行動しましょう！テレビショッピング番組のように、この商品を購入するとどんな特典があり、割引はいくつあるのかを伝え、すぐに電話を取り、特定の番号に電話をかけるように伝えます。ユーザーがリンクをクリックして考える手間を省くために、これらの励ましのテキストにはできるだけリンクを少なくするか、まったくリンクを追加しないようにしてください。

図（20）ボタンは何ができるかを示している

ボタンにテキストを追加するだけでなく、ボタンにアイコンを追加することもできます。これにより、ボタンの外観がより洗練されることが多く、小さなアイコンは、形式を通じて意味を表現する役割を果たすことがよくあります。図（21）に示すように、1列目の4つのボタンにはすべて小さなアイコンが付いています。テキストと合わせて、ユーザーはボタンの意味とクリック後の操作を、考えなくても知ることができます。

ボタン上のテキストは簡潔で簡潔なものにしてください。ボタン上に不要なテキストを多く追加しないでください。ユーザーの思考時間が増加します。たとえば、図 (21) の 5 番目のボタンにある「Click to enter」という 4 つの単語は完全に冗長です。通常、ボタンは、ページ上の他のインタラクションや情報の構成と組み合わされて、「クリックすると何が起こるか」という完全な文章に適切にまとめられる必要があり、「クリックして入力」という 4 つの単語はユーザーとマウスの間にあるため、Web ページに表示される必要はありません。最後のボタンは、一般的なプレーヤーのボタンです。誰もがよく知っているボタンです。テレビのリモコンのボタンでもあります。したがって、言葉を使うのは冗長です。形状で直接表現されており、シンプルで明確です。もちろん、マウスを置いたときにテキストプロンプトを表示することもできます。これにより、より優れたユーザーエクスペリエンスが提供されます。この観点から、言葉で表現するにはスペースが小さすぎるとも言えるかもしれません。

図（21）ボタンに小さなアイコンが追加され、見やすくなりました

5. ボタンの位置とその周囲に空白があるかどうかは、このボタンの重要性に関係します。

ボタンの配置も非常に重要です。ボタンの位置によって重要性が変わります。同時に、その周囲に空白を残すことで、このウェブサイト ボタンが重要であることも示されます。

図（22）に示すように、2つのボタンの上、下、左、右には多くの空白があります。たとえば、最初のボタンと2番目のボタンは、下と上から非常に離れています。これは、ボタンが上下に近すぎると目立たなくなるため、デザイナーが意図的に行ったものです。テキスト内に埋もれてしまうため、周囲に適切な空白を残すことが目立つための最良の方法の 1 つです。

図（22）ボタンの周りのスペースは比較的広い

このセクションはこれで終わりです。小さなボタンですが、多くの知識も含まれています。経営陣、製品マネージャー、デザイナーは、Web サイトを設計する際に慎重に考える必要があります。製品の詳細に注意を払うことによってのみ、ユーザーに良い体験を提供し、成功する製品を作成することができます。

この記事の原著者：Li Xuejiang、通信QQ：1580658565。

元のタイトル: ユーザーインタラクションを促進するために、標準に従って B2B 業界の Web サイト ボタンを設計する

キーワード: 標準、B2B、業界、ウェブサイト、ボタン、宣伝、ユーザー、インタラクション、私が言った、ウェブマスター、ウェブサイトの宣伝、お金を稼ぐ