ユーザーエクスペリエンス分析：Weiboコンポーネントの改訂

前面に書かれた

Weibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに Web サイトへのアクセスを実現できるように、Weibo オープン プラットフォームによって提供されるコンポーネント製品です。 Weibo コンテンツをサードパーティの Web サイトに出力します。ユーザーはそこで Weibo とやり取りしたり、コンテンツを共有したり、Weibo に情報を同期したりできるため、サードパーティの Web サイトでのユーザー アクティビティが増加します。この改訂には、友達セレクター、パブリッシャー、共有ウィンドウなどを含む 14 個の Weibo コンポーネントが含まれます。

設計プロセス

以前の製品改訂プロセスとは異なり、今回の改訂はUDCと製品のコラボレーションによって開始されました。インタラクションデザイナーは最大限の主体性を発揮し、デザインセンターの出力時間を制御して、ブランドビジョン、ページ構成、製品と開発の効率を伝達し、小さなステップを踏んでユーザーエクスペリエンスを向上させました。

設計準備

問題発見（ユーザー、携帯電話のフィードバックを観察し、整理する）（ユーザーターゲット：開発者とユーザー） - 分析（シナリオを組み合わせ、現象を通して本質を見極め、データ分析と製品を組み合わせる） - 問題解決（全体から詳細まで、ユーザーニーズと組み合わせて問題を解決する） - フォローアップを継続

設計プロセス中に従う最適化されたエクスペリエンス設計の原則

原則1: ユーザーに考えさせないこと

ユーザーの特定の「思考」または「タスク」の完了に影響を与えるノイズを減らし、フォークを減らし、複数選択の質問を減らし、ユーザーの操作を可能な限り減らします。無効になっている重要なコントロールに対応するプロンプトを提供します。

共有ウィンドウに示されているように、背景はテキストを直接プリセットし、現在のページの豊富なテキスト情報と高品質を優先するという原則に従ってデフォルトで選択し、ユーザーの操作数と複数選択の質問の数を可能な限り減らします。入力が空であるか、単語数制限を超えている場合、共有ボタンは無効になり、強制的にクリックすると対応するプロンプトが表示されます。

同時に、ユーザーにとって冗長な操作が多すぎることを避けるために、パーソナライズされたデフォルトを提供し、リピーターのユーザー向けにパーソナライズされたデフォルトの選択を設定して、ユーザーがフォームをより速く完了できるようにすることができます。これは、オプションが「固定」であることが多いため、ユーザーの以前の選択が保持されるからです。 要約すると、ユーザーの入力に価値があるなら、プログラムがそれを記憶する価値もあるということです。ユーザーが WeChat グループと Weibo を切り替えると、背景にはユーザーの以前の入力が保持され、記憶されます。

原則2: レベルをクリアにして視覚的なノイズを減らす

階層関係はロジックと情報構造に基づく必要があり、視覚的に反映される必要もあります。しかし、ワイヤーフレームや厚い背景を使いすぎると、眩しい感じになり、逆効果になります。実際、単純なインデントでも階層関係を示すことができます。

2つのピクセルの違い

リッチ テキスト領域と入力ボックスの間に 2 ピクセルのインデントがあることがわかります。リッチ テキストには多くの要素があるため、結局は 1 つの全体です。2 ピクセルだけで、視覚的な要素を追加してページを複雑にすることなく、階層モジュールを区別できます。

コメントボックスの構造

以前のコメント欄はフラットな構造で、コメントと返信が同じレベルにありました。当時は、複数の人が一緒にいるようなチャット記録が見られることが多く、閲覧ユーザーは誰がどのような問題について話しているのか理解するのが困難でした。分類後、コメントを 2 つのレベルに分けました。最初のレベルはページの内容に関するコメント、2 番目のレベルはコメントへの返信です。下図のように、コメントへの返信はデフォルトでは表示されません。展開後は50pxのインデントが入り、明確な階層関係が表現されます。

設定レベル

サードパーティコンポーネントは外部サイトで使用され、その使用シナリオや環境を個別に見積もることは通常困難です。しかし、共通点は、外部サイトのスペースが非常に大きいため、ヘルプと説明情報をオープン プラットフォームに配置することを選択していることです。開発者が当社の製品を使用したい場合、まず当社の製品がどのようなものであり、それが開発者に何をもたらすのかを理解する必要があります。このような基礎と興味が喚起されると、さらにそれをどのように使用するかを知りたいと思うようになります。そのため、ページ全体を説明、利点、設定の 3 つの部分に分割します。しかし、言葉だけでは人は興味を失ってしまいます。そこで、シンプルでわかりやすい絵を使って、生き生きと説明してみてはいかがでしょうか。

原則3: 習慣は良い助けとなる

習慣により、新しいインタラクションに慣れるために多大な学習コストをかけずに、Web サイトでのユーザー エクスペリエンスがより合理化されます。 Weiboにはこのようなインタラクションがあります。入力が空だったり、文字数がオーバーフローしたりすると、アクションボタンが強制的にクリックされ、入力ボックスの背景が点滅して、ユーザーに入力が間違っていることを知らせます。どちらもWeibo製品なので、同様のやり取りは完全に再利用できます。ユーザーは既に Web サイトのインタラクション モードをある程度理解しているため、コントロール インタラクションを適切に移植することは、インタラクションの一貫性を確保しながら労力を節約する良い方法です。そのため、マイクログループが選択されていない場合に点滅するエラープロンプトを移植し、ユーザーが次に何をすべきかを簡単に理解できるようにしました。

原則4: 即時検証

通常のコンテンツを報告するためにダイアログ ボックスを使用しないでください。ダイアログ ボックスは別の部屋なので、そこに行くには十分な理由が必要です。 同時に、フォームの完了後にエラーが発見され、不要な操作が追加されることを避けるために、入力したアカウントまたはパスワードのエラーをすぐに表示する必要があります。

原題: ユーザーエクスペリエンス分析: Weibo コンポーネントの改訂について

キーワード: ユーザー、経験スコア、Weibo グループ、改訂、それら、物事、フロント、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化