国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェブサイトの登録コンバージョン率を向上させるための優れた設計原則を皆さんと共有したいと考えています。
一般的に、ユーザー登録変換プロセスは次の部分で構成されます。
1. ユーザーを登録に誘導できるホームページコンテンツ
2. シンプルで迅速な登録プロセス。
3. 友人を見つけて招待するための効果的なメカニズム
4. 新規ユーザーの注目を集めるためのガイド。
この記事では、最初の部分である「ユーザーを登録に誘うホームページコンテンツ」について説明します。例として、次の 11 のソーシャル ネットワーキング サイトを分析します。
1. ソーシャルネットワーク: Google+、Facebook、LinkedIn
2. ブログ: Blogger、Tumblr
3. 新しいメディア ソーシャル ネットワーキング サイト: Flickr、YouTube、Sina Weibo、Tencent Weibo、Twitter、Yahoo Answers
ホームページコンテンツの価値とは何でしょうか?
最大の価値は、新規ユーザーに参加する理由を与えることだと私は思います。心理学と経済理論によれば、人間は普遍的にコストを最小限に抑え、利益を最大化することを目指しています。新規ユーザーに登録を促すには、サイトは加入コストを下げながら、認識される価値を高めることに重点を置く必要があります。では具体的に何ができるのでしょうか?
1. サービスの簡単な説明を添えたブランド価値ステートメントを使用する
機能: ブランド スローガンは通常、Web サイトの目的を説明するために使用されます。ユーザーが簡単にスキャンして、ブランドが提供するサービスをすぐに理解できるように、目立つキーワードを選択します。提供されるサービスの概要により、製品を使用する説得力のある理由がさらに提供されます。
例: Google+
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
フェイスブック:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
設計ガイドライン:
• ユーザーにとって価値のあるものに焦点を当てます。コピーライティングは別の観点からも変えることができます。ユーザーにここで何ができるかを伝えるのではなく、ユーザーがここで行動したい理由を推測することです。
• レイアウトで太字のキーワード、改行、または並列構造を使用すると、スローガンがスキャンしやすくなり、情報が読みやすくなります。
• 登録ボタンをスローガンやロゴと視覚的に密接に関連付けて、後続のアクションを簡単にトリガーできるようにします。
• サービスを説明するときは、機能指向ではなく価値指向で、ユーザーの目標に焦点を当てます。
• また、アイコンやインフォグラフィックを使用して、コピーのスキャン可能性を高めます (例: Google.com)。
反射:
ブランド ステートメントを提供すると、確かに親しみやすくなりますが、実際の登録エクスペリエンスに関しては、ユーザーにフォームに記入してもらうだけです。この時点で、ユーザーはページに無駄なものをあまり必要としません。デザインがどれだけ凝っていても、ユーザーはこの登録ページを気に入らず、二度と見たいとは思わないでしょう。登録する際、私が視覚的に集中し、頭の中で考えていたのは、必要な項目を素早く入力し、イライラしながら送信ボタンを押すことでした。
以下はTumblrの最新の登録ページです。大胆にスローガンを削除したことで、タスクがより明確かつ直接的になり、登録処理が本当に簡単なことだと感じられ、ユーザーの不安や習慣的な反抗的な感情が和らぎました。
Tumblr の最新のサインアップ ページ:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
Tumblrの古い登録ページ:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
その他の例:
リンクトイン:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
ツイッター:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
Twitter のコピーにおけるキーワードの選択は、一般の人々にとって最も理解しやすく、サービスの特徴を正確に伝えます。
新浪微博:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
テンセントWeibo:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
テンセントWeiboのスローガンとアクションは密接に結びついており、改善が必要なのは、製品がターゲットとするユーザーグループに関連するスローガンコピーの認識と共鳴です。
2. 登録方法は?
登録プロセスがより複雑な場合は、「1-2-3 ステップ」形式が使用されるか、例が示されることがよくあります。
効果:
• ユーザーが期待される操作プロセスに従うのがどれだけ簡単か。
• やり取りの手順を要約します。
Sina Weibo Enterprise Edition 登録ガイドページ:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
Sina Weibo Enterprise Edition 登録ページ:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
設計ガイドライン:
• 視覚的には、進行状況がプレビューと一致し、ガイドインジケーターのスタイルが一貫している必要があります。
• シンプルでポジティブな導入文を使用します。
3. コンテキストに応じた登録オンボーディングを活用する
ユーザーに特定の行動動機がある場合は、後続の操作を実行するために必要な登録ショートカットを提供します。
機能: ユーザーが参加する理由を自分で発見できるようにします。ユーザーは内発的に行動を起こす動機を持っているため、サインアップを完了する可能性が高くなります。
たとえば、次の画像: Sina Weibo ホームページ (http://weibo.com/) の「興味深い人々」セクション
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
設計ガイドライン:
• 文脈的な手がかりを使用し、説得力のある理由を示し、ユーザーに丁寧に伝えます。 (例:もっと見るには登録してください)
• コンテキスト登録プロンプトがエラーアラートのように感じられないようにします (たとえば、赤い警告アイコンを使用したり、「これを行うにはログインする必要があります」という感情を伝えるテキストを使用したりします)。これにより、ユーザーが壁に遭遇したという感覚を軽減できます。
その他の例:
テンセント微博では、ユーザーがログインせずに有名人の微博ホームページを閲覧すると、登録プロンプトが表示される。 Sina Weibo では、ログインしていないユーザーでも著名人のマイクロブログを閲覧できます (ただし、一般ユーザー向けのおすすめページの閲覧は許可されておらず、拡張読み取り操作なしで「みんなのコメント」セクションが提供されます)。また、アカウント関連の「再投稿」や「コメント」の動作には登録プロンプトが表示されます。
テンセントWeibo:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
これは、同じページの異なるセクションであっても、魅力的なサインアップの決定ポイントを作成することの重要性を示しています。情報開示の重みもリズミカルでなければなりません。ユーザーが実行したい特定の活動を妨げるのは不合理かもしれませんが、常識に基づいてほとんどの人が受け入れることができるものもあります。
新浪微博ログイン/登録ホームページの「みんなが言っていること」セクションは、「人」ではなく「コンテンツ」を推し進めている。ユーザーの拡張探索心理は、特定のコンテンツに対する読解を拡張することでもあるが、このセクションの登録決定ポイントはアバターアカウントに設定されており、ユーザーの心理的期待からある程度逸脱している。
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
4. ログイン/登録ページのコンテンツを選択する
提供されるコンテンツは簡潔で、焦点が絞られており、人気があり、興味深いものでなければなりません。
効果:
• このページは、実際にこのサービスを利用する人々とコミュニケーションをとる必要があります。このユーザーセグメントがあなたのサービスにどのような共感を示す可能性があるかを理解します。
• 一部のページでは、サイトの使用方法に関する情報が提供されています(たとえば、Yahoo Answers の「質問、回答、発見」エリア)。
一部のページでは、鮮明なビデオを使用して Web サイトのサービスを案内しています。 (例:Dropbox)
Yahoo!アンサー:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
Yahoo Answers ページのもう 1 つのハイライトは、優れた回答を強調表示する領域です (スライド モードを使用すると、ユーザーは自由に前後に移動できるため、高品質の情報を体験できます)。その下には、最近の質問と人気のある質問の簡潔でわかりやすいリストが表示されます。
設計ガイドライン:
• 量を蓄積するのではなく、高品質のコンテンツを配置して、ページを新鮮で興味深い状態に保ちます。ページに表示されるコンテンツが多くなるほど、コンテンツ自体の独自性やハイライトが目立たなくなります。すべてのコンテンツが公開されると、ユーザーにとって読みにくくなり、意味が失われます。
• 何が取り上げられているのかをできるだけ具体的に説明してください。 (ユーザーが最も興味を持ちそうなコンテンツを考慮する必要があります。「最新の」コンテンツが最も興味深いとは限りません)。
例:
フリッカー:
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
国内ソーシャル ネットワーキング サイトのホームページの比較分析から得た考察、PS チュートリアル、123WORDPRESS.COM
要約:このことから、優れたホームページ デザインは、新規ユーザーに Web サイトに参加するさまざまな理由を提供し、Web サイトの登録コンバージョン率の向上に最初に貢献できることがわかります。その後の「登録プロセス」では、デザイナーはユーザーに提供されるエクスペリエンスが簡単かつ迅速であることも確認する必要があります。そうすることで、ユーザーはより詳細なサービスを試してみようと思うようになります(どのようなメリットが得られるか分からない場合でも)。
登録コンバージョン率の向上は、1 つや 2 つのステップで済む作業ではありません。新規ユーザーが登録したらそれで終わりではありません。見慣れないページや、次のステップの指示がないページでユーザーを放置すると、ユーザーは混乱してしまいます。ソーシャル ネットワーキング サイトの新規ユーザーにとって、最大の障害は、独自のソーシャル ネットワークをどのように構築するかです (友人がいなければ、コミュニティのサービスの価値は大幅に低下します)。したがって、ユーザーが友達をすばやく見つけて追加できるようにすることが、ユーザーを維持するための鍵となります。

<<:  HTML ページに画像を挿入し、マップ インデックスを追加する方法の例

>>:  Podmanはコンテナを自動的に起動し、Dockerと比較します

推薦する

Vueプロジェクトでページジャンプを実装する方法

目次1. vue-cli デフォルト プロジェクトを作成する (babel のみを含む) 2. 作成...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

MySQL フィールドで NOT NULL を使用する必要があるのはなぜですか?

私は最近新しい会社に入社したのですが、データベース設計にいくつか小さな問題があることに気付きました。...

MySQLが間違ったインデックスを選択する理由と解決策

MySQL では、テーブルに複数のインデックスを指定できますが、ステートメントの実行時に、使用するイ...

Vue3.0 は虫眼鏡効果のケーススタディを実装します

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

vue.js ルーターのネストされたルートの実例

目次序文Vue CLI での設定基本コードVueルーターの登場ネストされたルートの設定要約する序文V...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...

純粋な CSS3 マインドマップ スタイルの例

マインドマップ彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js...

MySQL8.0.18 複数マスターと 1 スレーブの構成

目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...

MySQL 面接でよく聞かれる質問への回答

序文:さまざまな技術職の面接では、MySQL 関連の質問がよくされるようです。開発職の面接でも運用職...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 2

デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...

JavaScript の基本: ループと配列

目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...

MySQL水平および垂直テーブル変換操作の実装方法

この記事では、例を使用して、MySQL の水平テーブルと垂直テーブル間の変換操作を実装する方法を説明...