ウェブサイトのインタラクション詳細分析 - 登録とログイン

登録とログインはウェブサイトのポータルであり、その設計姿勢は顧客に対する姿勢です。ユーザーが登録とログインのやり取りに費やす時間は毎回ほんのわずかかもしれませんが、この「瞬間」は非常に重要です。ユーザーと登録とログインのやり取りは、前のやり取りと次のやり取りをつなぐノードです。登録とログインのすべての詳細は、製品の戦略的ポジショニングによって設定された最も基本的なタスクを完了して、目的のユーザーを引き付けることができるかどうかに影響します。インタラクションデザインの多くの先人たちの研究に基づいて、いくつかの詳細な分析が行われました。助けてくれた友達に感謝します。

1. 登録プロセスの分析と比較:

1.1. 登録およびログインのユーザーエクスペリエンスは、次の点に重点を置いています。

：登録情報のセキュリティ確保（長期）

1.2. 登録プロセスの分析と比較

① Tenpay: 登録方法を選択 > アカウント詳細を入力 > メール認証 > 登録完了（使用可能）

TenpayはQQのような巨大なユーザーベースのサポートを受けており、大量の情報トラフィックを処理する経験があります。ユーザー登録プロセスがスムーズか失敗するかについては自信があり、心配していません。そのためには、大量のユーザーを迅速に獲得することが最優先事項であり、登録プロセスを 1 ページで完了することが最も効率的です。

②百富宝：基本登録情報を入力＞登録完了（利用不可）＞メール認証＞口座詳細（連携銀行カード）を入力＞利用可能

Baifubao にアカウントを登録するには、ユーザー名、パスワード、パスワードの確認、メールアドレス、確認コードを入力するだけで済みますが、すぐに支払いを利用できません。支払い機能を実際に使用するには、一連の検証とアカウントのバインドが必要です。これは、製品が市場に投入されたばかりのときに大量の新規ユーザーが登録したときにトラフィックを分散させ、ユーザー登録プロセスがスムーズに行われなかったり失敗したりするケースを減らすための一時的な戦略です。ただし、複数の異なるパーティションの操作はユーザーにとって少し複雑です。

③Alipay：基本登録情報を入力＞携帯電話認証＋メール認証＞口座詳細を入力＞銀行カードをリンク＞登録完了（使用可能）

Alipay のプロセス セキュリティ レベルは、ユーザー ベースが非常に大きく、ユーザーを製品に引き付けることに全力を注ぐことができるため、特に厳格です。 Alipay は、ユーザーの長期的な情報セキュリティ体験に重点を置いていることに自信を持っています。

④Tumblr: メールアドレス、パスワード、ドメイン名を入力 > 認証コード、パスワードの確認 > メール認証 > 登録完了（使用可能）

Tumblrのマイクロブログの位置づけ自体は比較的垂直的であり、登録ユーザーが将来的にもっと長く使いたいと本当に望んでいることを望んでいます。そのため、その登録プロセスの特徴は、パスワードの確認と検証コードを2番目の登録ページに一緒に配置し、ユーザーがパスワードを確認する前にしばらく待つことができるようにすることで、アカウントのパスワードをより深く記憶できるようにすることです。

⑤招待コードが必要な場合：アカウント、メールアドレス、個人情報を入力 > 招待コードを待つ > 招待コードを確認する > 登録完了

招待コードを必要とする Web サイトの多くは、以前の Lehuo.com のように、初期の内部テスト段階にあるものです。また、Pinterest、Snowball など、非常に垂直的なコミュニティ Web サイトもあります。これらの Web サイトでは、ユーザー タイプが期待どおりであることを確認するために、招待コードを使用してユーザー グループをスクリーニングする必要があります。

⑥SNSアカウントで登録：SNSポータルを選択＞SNSアカウントログイン＞接続を確認＞登録完了

SNSアカウントを利用して登録すると、多くのSNSユーザーを素早く登録に誘導することができます。これは、製品の初期段階で市場を素早く獲得する上で大きな効果を発揮しますが、長期的には独自のユーザー基盤を育成することにはつながりません。

⑦ Sina Weibo/Thunder Network/Huawei Cloud Disk：基本的な登録情報を入力（情報要件は異なります）>登録完了>（メール認証）

特別な要件がない場合は、基本的な情報を入力してメールアドレスを確認するだけで登録が完了するのが最も一般的な登録プロセスであり、1回でスムーズかつ確実に登録できます。利用者数自体もかなり多いと思われます。

要約: 対話型プロセスに関連する要素は多数あります。登録とログインは、自分自身と環境に合わせて、時間とともに調整する必要があります。

2. 登録およびログインフォームの全体的なフレームワーク分析:

2.1. 登録およびログインフォームエリアの分析:

登録フォームは 7 つの部分で構成されています。

①視覚的なフォーカス。ユーザーに情報を入力させるようにガイドします。

②ラベル。入力フィールドに入力する情報。

③プロンプトを入力します。入力フィールドの情報を入力する方法を指示します。

④入力欄。テキスト入力ボックス、パスワード入力ボックス、複数選択ボックス、ドロップダウン リスト、ラジオ ボタン、スライダーなどが含まれます。

⑤操作エリア。これには、リンク、ボタン、キャプチャ、拡張プロンプト、または契約が含まれます。

⑥検証。判断と推奨事項に関する入力情報とフィードバックをユーザーに提供できます。

⑦プロセス指示。ユーザーにインタラクションの期待を知らせます。

ログインボックスのパーティションは似ていますが、一般的なプロセスは1つのステップのみを必要とするため、「⑦プロセスの説明」はありません。

2.2 ビジュアルインターフェース:

2.2.1. 視覚フォーカスガイドの階層関係:

最初のレベルは必須のオプションであり、ブラウザへの適応に注意する必要があります。一部のブラウザでは独自に実装できる場合もありますが、そうでない場合は CSS が必要です。2 番目のレベルはオプションのオプションです。テキスト プロンプトのコンテンツが比較的大きい場合、これを使用すると、ユーザーの視覚的な焦点が明らかに集約され、より全体的なエクスペリエンスが提供されます。

2.2.2、ガイドビジュアルハイライト：

視覚的な手段を使用して、特定の部分を強調し、ユーザーの注意を引き、ユーザーに何かを行うように誘導および促します。

知乎の登録チャンネルの入り口ボタンエリアは、新規ユーザーの登録を促すために特に大きく作られています。ただし、色は周囲の環境に完全に合うように調整されており、視覚的にはボタンが強調表示されすぎてログイン ボックス全体に干渉することはありません。

2.2.3、モデリングセマンティクス:

運用上のやり取りに加えて、無視してはならないのが感情的なやり取りです。

「設計」のユニークな性質は、「モデリングセマンティクス」という手段を通じて、論理操作では解決できない特定の問題を解決することです。

たとえば、Sina の電子メール登録フォームの右上隅では、マスコットの Xiaolang が大きな目の前で指を立てており、「シーッ... データのセキュリティに注意してください!」と言っているかのようです。

ログインボックスは「Weibo」を意味するスカーフに埋め込まれており、温かみのある雰囲気を醸し出しています。

2.3、反応作用モードの分析：

2.3.1、エラーまたは確認プロンプト方法: