ページリファクタリングエンジニアの視点から見た「ユーザーエクスペリエンス」

工業デザインが人々の生活に溶け込んでいる今日、ユーザーエクスペリエンスという言葉が人々の目に頻繁に現れています。インターネットのWeb2.0時代の到来とともに、あらゆる規模のウェブサイトデザインがユーザーエクスペリエンスに注目し始めました。ユーザーエクスペリエンスとは何かについては詳しく説明しません（Baiduのこの4つの単語は、私が書くどんな説明よりも優れています）。私よりもあなたの方がよく知っていると信じています。

ユーザーエクスペリエンスは、製品設計の段階から関わってきます。例えば、プロトタイプ設計におけるインタラクションモード設計や機能実装方法設計には、すべて設計者のユーザーに対する配慮が盛り込まれています。「ユーザーエクスペリエンスの良い製品は、インタラクション設計の豊富な経験を持つ製品設計者に依存するだけでなく、製品生産プロセスのすべてのリンクが優れたユーザーエクスペリエンス意識を持っているかどうかとも一定の関係がある」という格言を聞いたことがあります。

今日は、ページ再構築エンジニアの視点から、私の仕事におけるユーザーエクスペリエンスの理解と、ユーザーエクスペリエンスに関連して私が行ってきたことの2つの側面についてお話ししたいと思います。

1. 使いやすさから使いやすさまでの詳細

1. ボタン、リンク、ナビゲーションメニューのマウストリガーの状態、マウスの手の形など

ビジュアルデザインの発展により、ボタン、リンク、ナビゲーション メニューの表現は次のように非常に豊かになりました。

これらの画像は、マウスクリックの視覚表現を豊かにします。機能が利用可能であることを前提として、視覚的なレンダリングを通じて美化効果が徐々に達成されます。精巧な設計図が利用可能になった後、ページ再構築エンジニアはそれらをカットする必要があります。コーディングの過程では、通常、次の点を考慮します。

クリック可能な領域のサイズ。たとえば、(下の図を参照) ボタンのスタイルは 10 x 10 しかないように見えますが、実装する際には、ユーザーがアンカー ポイントを見つけるために何度もクリックするのではなく、簡単に見つけられるかどうかを考慮する必要があります。

マウス操作タイプのプロンプト、マウス入力プロンプト、手の形プロンプト、テキストエリアプロンプト、クリックできないプロンプト。ページ全体の視覚的なガイダンスの方が重要ですが、ユーザーが操作しているとき、彼らの目は常にマウスやキーボードの操作を追っています。正しいマウス操作プロンプトを添えることができれば、ガイダンス効果を高めることができます。これにより、インタラクティブなエクスペリエンスが向上します。

ボタン スタイルの一貫性、ボタンの現在の状態とクリック状態の一貫性、および機能に応じたボタンの一貫性。

デザイナーの豊かな想像力は彼らに創造性を与え、私たちは彼らの創造性を維持しながら、いくつかの共通機能を抽象化する必要があります。私の意見では、ボタンには3つのタイプがあります。それらを効果的に区別できれば、ウェブサイトの全体的なスタイルを確立し、インタラクティブな体験を強化する際に一定の一貫性が生まれます。同時に、それらはページ構築プロセス中に公開情報に抽出され、管理と保守が非常に簡単になります。

1) 確認、キャンセルなど、タイプを介して呼び出すことができます

2) 例えば、ログイン、注目の追加など、これは仕上げタッチ型と呼べます。この型は、実際の作業では視覚的にスルー型よりも少し強いことが多いため、デザイナーはスタイル、構造、さらにはサイズ比で統一することをお勧めします。

3) ブログやWeiboへの投稿などのボタンは、強化型と呼ぶことができます。通常、このタイプはデザイナーが標準タイプに従うことを制限しません。結果が珍しい形になったとしても、私たちはそれを理解する必要があります。

4) 最後に、どんなタイプであっても、マウスクリックのホバー状態があるかどうかに注意する必要があります。デザイナーが設計していなくても、ホバーインタラクティブ効果を作成するか、少なくとも予約する必要があります。私の場合、ホバー状態として、元のボタンの色に基づいて色の深さを調整します。ほとんどのボタンにインタラクティブ効果を作成することを検討します。もちろん、例外もあります。たとえば、アクティビティトピックのクリック領域は、通常、クリック後に過度に明白な効果を増加させません。何らかの効果を加えなければならない場合は、せいぜいテキスト自体の明るさを調整できます。 （私は少しうるさいと認めます）

2. 画像の代替説明情報

通常、デザイン要件を受け取ったら、アイコンを整理するようデザイナーに依頼します。アイコンは通常、機能用と注釈用の 2 つのカテゴリに分けられます。同時に、2 種類の画像のピクセル範囲は一貫している必要があります。このように、デザイナーは分類プロセス中に、一部のテキストに画像で注釈を付ける必要がないこと、一部の機能と注釈の種類のサイズとスタイルが一致していない可能性があることに気付きます。デザイナーは分類プロセス中に調整を行い、クリエイティブ プロセスにいくつかのルールを浸透させます。

1 行目と 2 行目はコメント、3 行目は関数です。

3. デザインやレイアウトにより完全に表示されないテキスト情報のタイトルヒント

製品やユーザーから「後ろのテキストが見えない、何なの？」という苦情がよく寄せられます。その主な理由は、テキスト情報が表示される場所とその時点のテキストの重要性を考慮していないためです。画像ウォーターフォールフローの場合、テキスト情報はインデックスとしてのみ機能します。記事一覧ページやビデオ一覧ページ、さらにはテキストページなどの最終ページであっても、タイトル名はフルネームで表示する必要があります。したがって、ユーザーを苦しめないようにするためには、表示される不完全な情報にタイトルを付けて、欠陥がある場合にユーザーが安心できるようにする必要があります。そうしないと、ユーザーの感情を傷つけすぎてしまいます。

4. ウェブサイトのロゴのウェイトはH1、ウェブサイトのメインタイトルのウェイトはH2～H6、stong、em、bなどに設定されている（検索エンジンにとって読みやすい）

あらゆるレベルでのユーザーエクスペリエンスを考慮することは、ユーザーが可能な限り包括的にWebページの境界のないブラウジングを体験できるようにすることです。視覚とインタラクションの完全な発揮の背後にあるのは、コードタグの選択であり、ユーザーが特定のレベルからよりよく使用できるかどうかも決定します。Google、Baiduなどの現在の一部の検索エンジンには、Webページ情報をフィルタリングするプロセス中にWebページのメインコンテンツを見つけるメカニズムがあります。検索エンジンに優しいタグは、ページ情報のクロールにより役立ちます。ユーザー検索のプロセスでは、企業間の戦略的協力に関係なく、比較的前方の位置に表示されます（もちろん、検索エンジンの広告効果が非常に高い場合は、最初の画面に表示されない場合もありますが、これは...ご存知のとおりです）。

5. ウェブサイトのフォント色、リンク色、プロンプト色、コンテンツのフォント色などの一貫性（学習コストを削減し、ユーザーの習慣を養う）

インタラクティブな製品 (ブログ、ビデオ、電子メール) やユーザー機能製品 (消費者向け製品、情報製品など) を設計する場合も、ユーザーの習慣という同じ問題に直面します。人々はルールがあると安全で快適だと感じる可能性が高くなります。したがって、Web ページの設計プロセスでは、統一された視覚体験によって、ユーザーは安心して快適に画像、テキスト、音楽、マルチメディアなどの情報を閲覧できるだけでなく、ユーザーの認知も向上します。

したがって、デザイナーの抑えきれない創造性に対して、私は常に規範と論理の擁護者として彼らの前に立ちます。デザイナーが想像力豊かで独創的な場合は、私は決して邪魔をしませんし、そうするつもりもありませんが、スタイルが決まっていると言われた場合は、立ち上がってデザイナーに次のような完全なデザイン仕様を作成するように求めます。

• リンクの色は、プライマリリンク色とセカンダリリンク色に分かれています。機能領域を追加する場合を除き、2 色以上使用しないことをお勧めします。

• テキストの色はプライマリとセカンダリの 2​​ 色にし、2 色以下にします (実際には好きなだけ色を使用できますが、ユーザーがさまざまな色に慣れるのにどれくらいの時間がかかるかを考慮する必要があります)

• プロンプト情報は、一般プロンプト、正しいプロンプト、エラープロンプト、空の状態プロンプトなどに分かれています。

• 機能アイコンと注釈アイコンに分けられるアイコンの種類は何ですか?

6. 各種コンテンツの読み込みに時間のかかるモジュールについては、コンテンツが正常に読み込まれていない場合は、まず画像一覧ページまたはビデオスクリーンショット一覧ページを表示し、画像が読み込まれていない場合は初期画像を表示して位置を固定し、画像が画面全体に流れないようにします。

7. プロンプトテキストの位置がユーザーの操作を妨げていない。プロンプトの位置を固定したり、操作に影響を与えないカラープロンプトを使用するなど、インタラクションの一貫性が非常に重要です。

フォームを処理する際には、デフォルトのプロンプト、エラープロンプト、正しいプロンプトなど、プロンプト情報の場所が考慮されます。プロンプトのスタイルが統一されていないと、ユーザーの行動が中断されます。ページのフォーム入力プロセスの流暢さは非常に重要です。なぜこれを言及するのでしょうか。実際の作業では、インタラクティブなデザインの経験がない場合、製品とデザイナーの両方がフォーム関連のさまざまなプロンプト情報を見逃すことがよくありますが、これはページ構築プロセス中にHTMLの構造に影響を与えます。したがって、製品のドキュメントや設計案に関連するコンテンツが表示されていないことが早い段階で見つかった場合は、後でページ構造を調整するという冗長な作業負荷を軽減するために、考慮して追加するようにリマインドしたほうがよいでしょう。

これらはページの範囲外だと言う人も多いでしょうが、ではページはどの範囲に属するのでしょうか? この知識は、製品範囲、デザイン範囲、ユーザーリサーチ範囲、インタラクション範囲に属します。 私見では、これらを知ることの最大のメリットは、作業負荷が軽減されることです。 これらはすべて非常に基本的な知識だと思います。 習得する必要はありませんが、理解しておくのがベストです。 これらを理解することのメリットは非常に明白です。 信頼できない要求に直面したときに、ターゲットを絞った提案をすることで、やり直しや断片的な体験の増加を減らすことができます。

2. ゆっくりと待つことから、喜びに満ちたクリックへの変化

1. ページモジュールのオンデマンド読み込み

インターネット製品が大規模化と形式化に向けてますます発展するにつれて、初期のサイト全体に 1 つの共通スタイルのみをロードする時代は終わりました。代わりに、パフォーマンスが向上したモジュール式のオンデマンド ロード モードに置き換えられました。上の図に示すように、モジュール化の明らかな利点は、コードの冗長性が比較的低く、コードの量も少ないことです。さらに、モジュール化の利点としては、構造が明確で使いやすい、製品要件が頻繁に変更される場合でもメンテナンスと開発が迅速、ローカル モジュールを迅速にオフラインにできる、ページ モジュールの読み込み優先度を動的に調整するときにコードを削除する必要がない、複数人で共同開発しやすい、複数人で共同開発する場合にコードが上書きされるリスクが軽減される、大規模な製品の開発に適している、などが挙げられます。これは、ユーザーにとっても、保守および開発にとっても非常に有益です。

2. ページ上の共通要素の再利用

いわゆる共通要素とは、主に以下のものを指します。

リセットタイプ

さまざまなテキストカラー

さまざまなリンクの色

フローティングフレーム

ページのメインフレーム

このサイトに適用可能な、再利用性の高いパッチタイプ

3. ファイル呼び出しのレベルを減らし、必要に応じてファイル名を短くする

たとえば、image/index/module1/limoumou/icon/fabiaopinglun.jpg ディレクトリ階層を適宜最適化します

たとえば、fabiaopinglun_default.jpg、.CommentListContent_linedot{} ファイル名の長さを適宜最適化します

4. リクエスト数と背景サイズのバランスをとる

画像リクエスト数に関しては、背景の数を減らすためにCSSスプライトステッチングを考慮する必要がある場合があります。同時に、ステッチ画像のK数が大きすぎないように注意し、ステッチ画像のアスペクト比にも注意する必要があります。縦向きの画像をステッチすることをお勧めします（実験では、同じ内容の横向きの画像のボリュームは縦向きの画像のボリュームよりも大きいことが示されています）

背景画像をタイル状に並べる必要がある場合は、背景画像のサイズを適切に考慮してください。たとえば、高さ 1px の点線の場合、1*10、1*50 などの 1*2 の小さな画像を切り取らないでください。主な考慮事項は、1*2 の小さな画像をタイル状に並べることができる回数です。

ハック、位置、テーブルの使用など、ページのパフォーマンスに影響を与える要因は多数あります。重要なのは、テクノロジーを最新の状態に保ち、知識を豊かにすることです。

上記の記事は、私が過去にページ再構築作業から学んだユーザー エクスペリエンスの要約です。これは少し表面的なことのように思われるかもしれませんし、ページを書いている人がアイコンステータスを追加したり、ローカルエフェクトを自分で変更したりする必要があるのはなぜかと疑問に思う人もいるかもしれません。インターネットの初期の頃は、分業は現在ほど専門化されていなかったことを知っておく必要があります。せいぜい、フロントエンド、バックエンド、製品に分かれていました。もちろん、当時は今日ほど専門的な内容ではなかったかもしれませんが、その範囲は確かに今日よりも広かったのです。そのため、数年前からWebページ制作に携わり始めた人は、デザインや制作についてそれほど明確な定義を持っておらず、グラフィックや画像処理についても一定の理解と操作能力を持っています。自慢するわけではありませんが、知識の深さと広さは同等に重要だと考えています。

元のタイトル: ページ リファクタリング エンジニアから見た「ユーザー エクスペリエンス」

キーワード: 1、ページの重さ、建設、エンジニアの目、ユーザー エクスペリエンス、業界、デザイン、金融、人々、生活、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化