Sina Weiboを例に挙げて：ウェブサイトのインタラクションデザインの最初の経験

9月の初めに、私はSina WeiboのUDC部門でインタラクティブデザインのインターンシップをしました。約 4 か月間の勉強を通じて、インタラクション デザイン業界に対する理解が深まり、インタラクション デザイナーの具体的な責任も認識することができました。これまで私が学んできた知識のほとんどは本やインターネットの記事から得たものであり、学生時代にプロジェクトに参加する機会もあまりなかったことを考慮して、このインターンシップについていくつかまとめました。一方では、将来の仕事で進歩するために自分自身を奮い立たせたいと考えており、他方では、インタラクティブ デザイン業界に入ったばかりの学生が仕事に早く適応し、インタラクティブ デザインをよりよく学べるように支援したいと考えています。

個人的には、インタラクティブデザイン業界に参入したばかりのデザイナーにとって、仕事や勉強の過程で効果的な方法は、次の 4 つに分けられると考えています。

パート1: 製品を知る

プロジェクトの開始方法、終了方法、中間の段階、プロセス全体におけるインタラクション デザイン作業の位置と役割など、プロジェクトの詳細はすべて、製品を理解することから始まります。自社製品を理解するにはどうすればよいでしょうか? 以下の側面から理解できます。

1. 複数の役割やアイデンティティで製品を使用する

例えば、初心者としてWeibaを試す場合、表示されるガイダンスとプロンプトは最も基本的で包括的なものです。アカウント登録から3〜6か月のユーザーとして製品を使用すると、表示されるガイダンスとテキストプロンプトは初心者とは異なります。操作権限に関するプロンプトレイヤーの違いはさらに顕著です。バーのオーナーやエキスパート向けの操作プロンプトは、一般ユーザー向けのものとは内容も形式も異なります。複数の役割で同じ製品を使用すると、製品をすばやく理解するのに役立ちます。

2. 製品ロジックを整理し、製品アーキテクチャを理解し、製品の内部ロジックと製品間の関係をマクロ的に理解する

成熟した製品には多くのコンテンツと豊富なレベルがあります。新しいユーザーは、使用時に単一のページの構造とコンポーネントの詳細を個別に理解する傾向があり、製品について全体的かつ詳細な検討が不足しています。製品構造を徹底的に調べることで、製品全体を理解して習得し、最適化計画を提案する準備ができます。

Weibo ヘルプセンター 製品構成

Weiboヘルプ製品に出会ったとき、ヘルプセンター製品のサイト構造と製品ロジックを整理し、サービスガイドのページ階層の重要性を疑問視しました。「サービスガイド製品の構造は比較的シンプルで、コンテンツも比較的少ないです。製品の階層を下げることを検討できます。」この観点は必ずしも正確ではないかもしれません。この例は、製品構造を整理することで、初心者が製品ロジックをより早く把握し、一見複雑に見える製品をマクロの観点から理解できることを示しているだけです。

3. 経験の欠点をまとめる

インターネット製品の特徴の 1 つは、迅速な反復です。オンラインでリリースされるすべての製品には、意思決定、時間、その他の理由により、エクスペリエンスに何らかの欠点があります。前の 2 つのステップを経ると、製品自体に対する理解が深まります。参加ページで問題を確認すると、理解不足によって生じるいくつかの質問を回避し、製品体験の欠点を正確に見つけることができます。さらに、オンライン製品の問題調査では、一貫性、シンプルさ、流暢さ、タイムリーなフィードバックなど、対応するインタラクション設計の原則に従う必要があります。 「エクスペリエンスの一貫性」インタラクション原則を例に挙げてみましょう。優れた製品の一貫性は、ユーザーの学習コストを削減し、ユーザーの良好な使用習慣を育むことができます。一方では、製品内のエクスペリエンスの一貫性、およびシステム内のコンポーネント フォームと他のコンポーネント フォームとの一貫性に表れ、製品とユーザーの間に信頼が確立されます。他方では、製品間のエクスペリエンスの一貫性に表れ、一貫したエクスペリエンスを複数の独立したシステムに拡張し、共通の設計標準に従い、ユーザーの不快感や不慣れさを回避します。

上記 3 つのポイントを通じて、製品の位置付けとフレームワークのロジックをよりスムーズに理解し、最適化できるポイントを見つけて、製品エクスペリエンスを完成させることができます。適切な導入と要約を行った後、製品の 2 回目の反復に備えて完全な体験レポートをまとめることもできます。

パート2: 要件の伝達に参加する

要求を出すプロダクトマネージャーとは異なり、インタラクション デザイナーは製品の使いやすさ、流暢さ、操作感に重点を置いています。要件ドキュメントから判断すると、製品側はマクロな観点から製品設計コンセプトを提案する傾向が強く、一方、インタラクション デザイナーは製品のユーザー エクスペリエンスを向上させるために、より詳細なところから始めます。 2 つの異なる出発点により、製品マネージャーとインタラクション デザイナーがうまく協力し、友好的にコミュニケーションをとる場合にのみ、製品戦略を製品プロトタイプに正確に変換でき、それによって後続の作業に正確な参照を提供できることが決定されます。したがって、要求の伝達はインタラクション デザイナーにとって不可欠なスキルです。初心者は、自分のニーズを伝える際に次の点に注意する必要があります。

1. 自分自身に関係するプロジェクトに積極的に参加し、コミュニケーションと議論を促します。インターンの場合、職場でのコミュニケーションは、要件を理解することから始め、プロトタイプやビジュアルプランの繰り返しの変更による作業負荷の増加を避けるために、製品マネージャーと同じ要件を理解していることを確認する必要があります。

2. ニーズについては自分自身で判断する必要があります。ニーズを専門的に理解することに加えて、製品マネージャーがアイデアを明確にし、さまざまな役割とシナリオを識別し、情報アーキテクチャとタスクプロセスを正確に整理するのにも役立ちます。たとえば、製品戦略やマーケティング計画の要件がユーザー エクスペリエンスと矛盾する場合、デザイナーはより優れたデザイン ソリューションを考え出す責任があります。

3. すべてのコミュニケーションは効果的かつ実行可能でなければなりません。ニーズとソリューションを伝える際に、意見の相違が生じた場合は、タイムリーに解決する必要があります。そのためには、両者がニーズの真の目的を理解し、コミュニケーションの問題の本質であるニーズとユーザー エクスペリエンスを把握し、最終的に対応するソリューションを提供する必要があります。

パート3：「完全な」設計ソリューションの提供

「優秀」ではなく「完全」としたのは、優れたインタラクション デザイン ソリューションの出力には長いプロセスが必要だからです。そのためには、常に設計理論を蓄積し、常に優れた設計事例に触れ、常に実際のプロジェクトに参加し、何度も基本要件を満たす必要があります。業界に入ったばかりのインターン生にとって、完璧な設計プランを提供することは、優れた設計プランを提案するための基礎となります。良い習慣を身につけることは、何倍もの効果をもたらします。

1. デザインはニーズの解決から始まる

インタラクションデザインの初心者として、要件を受け取って計画を立てた後、自分の計画にいくつかの機能を追加しました。特に、競合他社がまだそれをやっていないと思ったときは、とても興奮しました。しかし、要件の本質を無視していました。設計された計画は、要件を解決できなかっただけでなく、要件自体に不必要な面倒な操作をもたらしました。誰かに電子レンジを販売しているとき、実際に買いたいのはただの温かい蒸しパンであるようなものです。さらに、良いと思った機能が製品に組み込むと悪いユーザーエクスペリエンスをもたらすという現象がよく発生します。

2. インタラクティブドキュメントの仕様を正しく記述する習慣を身につける

完全なインタラクティブ ドキュメントには、ドキュメントの命名、ドキュメントの内容、ドキュメントの説明、配信が含まれている必要があります。ドキュメントの内容は、主に更新記録、サイト マップ、主要なタスク プロセス、ワイヤーフレームと説明、インタラクション仕様の 5 つの部分で構成されます。インタラクティブなドキュメントを正確に記述することで、デザインを考える力が強化され、需要側がプロトタイプを素早く理解して議論に参加しやすくなるだけでなく、プロジェクトの進捗状況や最終的な出力結果を他の人が確認しやすくなります。

インタラクティブドキュメント仕様

3. 細部に注意を払い、主にインタラクションレベルの詳細とワイヤーフレーム描画レベルの詳細に注意を払う

たとえば、インタラクション レベルでは、さまざまなホバー状態のテキストにマウスを置いたときに、さまざまな状態が適切なシナリオと一致しているかどうか、特定の場所のプロンプトが背景マスク ポップアップ レイヤーなのかバブル タイプのリマインダー レイヤーなのか、ボタンのテキストにキャンセルと終了のどちらを使用するのか、マウスをホバーしたときに表示される効果フィードバックがクリック後に表示されるかどうかなど、これらはすべて考慮する必要があるインタラクションの詳細です。ワイヤーフレームレベルでは、行間隔、フォントサイズの均一性、プライマリリンクカラーとセカンダリリンクカラーの明確な区別、モジュール間の間隔の妥当性、境界線の色の深さと太さの一貫性など、すべてデザイナーの厳密な論理的思考を反映する側面です。細部に注意を払う良い習慣を身につけることが、対話スキルを向上させる基礎であることは、容易に理解できます。

ボタンのホバー状態

4. 一貫したユーザーエクスペリエンスを維持する

需要に応えるソリューションを設計する際には、自社製品を初めて理解したときと同じように、オンライン製品エクスペリエンスの一貫性に重点を置く必要があります。異常の発生を避けるために、同じブランドのサブ製品間のエクスペリエンスの差別化を効果的に制御する必要があります。もちろん、新しい機能の追加、製品設計戦略の調整など、既存の製品を最適化することが求められているだけではありません。需要に基づいて革新を進めると同時に、プロンプト レイヤー、ボタン フォーム、右モジュール スタイルなど、設計プロセスにおけるコンポーネント スタイルと既存の製品エクスペリエンスの一貫性にも注意を払う必要があります。一貫性を可能な限り維持する必要があります。

もちろん、設計能力が向上するにつれて、私たちは自ら考え、最も適切かつ効率的な方法で合理的で完全な、さらには優れた設計プランを作成できるようになります。

パート4: 製品要件のいくつかの側面をフォローアップする

有能なインタラクション デザイナーは、製品マネージャーと協力して、製品要件のいくつかの側面をフォローアップする必要があります。要件の入力段階では、デザイナーはユーザー リサーチャーと協力して、ユーザーの特性と使用行動を理解することができます。要件の確認段階では、デザイナーは自発的に質問を提起し、要件を合理的に作り直すことができます。要件の設計段階では、さまざまな機能のデザイナーが設計計画を変更または改善します。インタラクション デザイナーは、計画のコミュニケーションと設計をフォローアップし、ビジュアル、フロントエンド、構造エンジニアとの技術的なコミュニケーションを維持し、計画が実行可能であることを確認する必要があります。同時に、計画が最高のユーザー エクスペリエンスを実現し、計画を実際に復元することも確認する必要があります。さらに、製品の発売後、デザイナーはオンライン製品のテストに参加し、次のイテレーションに備える必要もあります...

結論

インターンシップの期間は長くありませんでした。インターンシップ中に私が経験したいくつかの回り道を思い浮かべながら、これらの内容を要約し、デザインにおいて自分自身をよりよく抑制し、導くことを願っています。また、将来的には、より実用的な問題を解決するために、完全で優れたソリューションを作成することを楽しみにしています。

(元のWeibo UDCブログ投稿、再投稿の際は出典を明記してください、購読を歓迎します)

原題: Sina Weibo を例に: ウェブサイトのインタラクション デザイン初体験

キーワード: Sina Weibo、ケース、ウェブサイト、インタラクション、Jichu、経験、9月上旬、UDC、ウェブマスター、ウェブサイトのプロモーション、収益化