WEBユーザーエクスペリエンスを向上させるためのいくつかの重要なポイント

アルゴリズムに精通し、豊富な経験を持つバックエンドエンジニアが、必ずしも優れたフロントエンドページを完成させられるとは限りません。ロジックの経験が豊富なプログラマーにとって、html/css は扱いにくく非効率的に思えます。SASS や LESS などのフレームワークでさえ、従来のプログラマーがフロントエンドエンジニアを理解するのは困難です。ほとんどの人の目には、フロントエンドはプログラミングとデザインの両方で構成される新しい職業です。特に、誰もがユーザーエクスペリエンスについて語るとき、フロントエンドはこれについて独自の理解を持っているべきだと感じさせます。実際、私の意見では、どの側面から見てもユーザー エクスペリエンスの正確な定義はありません。フロントエンドは経験を通じてそれをより理解できるかもしれませんし、Web ユーザー エクスペリエンスは人によって異なるかもしれませんが、方向性は同じです。

著者は、自身の経験から、WEB 上のユーザー エクスペリエンスの実用的な詳細もいくつかまとめています。もちろん、すべてを網羅することは不可能です。スペースの制限により、著者は重要な機能を含み、認識しやすいいくつかの詳細のみを共有します。

アヤックス

これを笑う人もいるかもしれません。確かにこれは新しい技術ではありません。しかし、ユーザーの観点から最もユーザーフレンドリーな Web サイト技術の変更を評価するとしたら、私は間違いなく AJAX を選びます。

インターネットの使用方法を学び始めたとき、登録ページとログインページの両方が私にとって最も厄介ではありませんでした。数秒間、「パスワード保護の質問」が同時に許可されていたことを促します初めてページのようなもので、少なくとも10分かかり、同じことを繰り返しています。ウェブサイト運営者の観点からも、これは煩わしいことです。10分以上繰り返しフォームに入力すると、多くの潜在的なユーザーを失うことになりかねません。

AJAX 非同期リクエストの出現後、この状況は大幅に改善され、ユーザー エクスペリエンスが最も顕著になりました。ユーザーは、リクエストがいつ送信されたかわかりません。たとえば、入力された各項目に対して現在のフォームの最後に特定のエラー タイプがプロンプト表示された場合 (リクエストは非同期に送信され、ユーザーがクリックする前に返されたデータで一部のページが更新されている場合)、これはユーザーに非常に直感的なプロンプトを提供します。この即時のインタラクションにより、訪問者は直感的にこれがフレンドリーな Web サイトであると感じられます。 (もちろん、一部のフォーム検証は JavaScript を使用して行うこともできますが、これは単なる例です)。ページ全体をリロードせずに、DOM を操作してデータの小さな部分を書き換えるだけでも、訪問者に大きなインタラクティブ感を与えることができます。人気の Weibo がその最たる例です。Weibo/コメント/リポストを送信した後、ユーザーはページを更新してページ全体が読み込まれるのを待つ必要がないことに気付きます。操作後、ページの小さな部分がすぐに変更されます。大したことではないように見えますが、訪問者にとってはこれで十分満足できるでしょう。

ウェブフォント

ウェブサイト上のすべてのテキストコンテンツはフォントを通じて表現されます。適切なフォントは間違いなくユーザーに優れたエクスペリエンスを提供します。業界では、Doubanはフォントについて最も研究したウェブサイトかもしれません。たとえば、Douban ReadingはHelveticaとArialという、違いがほとんどない2つのフォントを使用しています。このサンセリフフォントは一目で分かりやすく、テクノロジー感があります。Douban自体は写真と短い文章で構成されているため、デザインの目的は、フォントから焦点をすばやく見つけられるようにすることです。

テキストにサンセリフフォントを使用すると、読みやすさに影響が出るのではないかと心配する人もいます。実際、多くの海外の Web サイトがテキストにサンセリフフォントを使用していることはよくあります。もちろん、英語をより重視する可能性も否定できません。実は、私は今でもサンセリフ フォントがとても好きです。見た目が美しいからです。また、最近のインターネットでは大量のテキストは珍しいです。生き生きとしたモダンなサンセリフ フォントが徐々に認知され、より多くの開発者に使われるようになっています。

これらに加えて、フォントの選択はさらに細分化できます。異なるフォントは、サイトの信頼性に対するユーザーの信頼に影響を与えるという統計を読んだことを覚えています。たとえば、会社のウェブサイトでYouyuanやCursiveなどのフォントを大量に使用している場合、訪問者はウェブサイトに簡単に不信感を抱くでしょう。もちろん、ウェブサイトが主に娯楽を目的としている場合、あまり真面目でシンプルであってはなりません。使用するときは、一般大衆の受容を考慮し、ウェブサイトの位置付けを知る必要があります。もちろん、技術的な問題を無視することはできません。たとえば、FirefoxはIEよりもサンセリフを曖昧に区別します。一部のフォント「O」と「0」、「L」と「1」は区別が困難です（コードが多いサイトではこれを考慮する必要があります）など。総合的に比較してフォントを選択すると、間違いなくウェブサイトの魅力が高まり、より多くのユーザーを維持できます。

ちなみに、フォントを使用する際には著作権に注意してください。

読み込み速度

多くのユーザーは、Web サイトの読み込みに時間がかかりすぎて訪問者が我慢できなくなるため、優れたデザインとコンテンツを見る前にページを離れてしまいます。実際、多くの訪問者はスクリプトや画像が読み込まれる順序を気にしません。ウェブサイトの全体的な構造がすぐに読み込まれることがわかれば、閲覧を開始します。他の要素が徐々に読み込まれる場合でも、許容されます。これに基づいて、ユーザーがページをより速く表示できるように、さまざまな遅延読み込み方法を使用できます。さらに、読み込み速度に影響を与える可能性のある要因は他にもたくさんあり、それらを一つずつ最適化する方法があります。私はこの問題を解決するために2つの関連記事を書いています（ウェブサイトの読み込み速度を上げるための解決策はいくつありますか）。そのため、詳細には触れません。

構造設計

最近、多くのウェブサイトがメニューを上部に固定していることに気付いているかどうかはわかりません (Witt のブログがその一例です)。メニュー オプションが多すぎない限り、訪問者はこのような固定メニューを非常に受け入れやすいです。これは、デザインにおけるほんの一例です。フォームの各行を明るい色と暗い色で分割して読みやすさを向上させる、ウィンドウをアクティブにするときに現在のコントロールに境界線を追加して、ユーザーが操作しているウィンドウをより簡単に区別できるようにするなど、同様の例はたくさんあります。多くのデザインやレイアウト方法は一般に認知されており、Web サイトを設計する際の参考にすることができます。

ウェブサイトの構造デザインの見た目は訪問者に影響を与えますが、訪問者がすぐに離れる原因にはなりません。また、ページが非常に洗練されていてもユーザーフレンドリーでない場合、訪問したい人は多くないでしょう。

たとえば、Haosou（360検索）を使用したとき、GoogleとBaiduのように便利ではなく、Haosouの検索ボックスはBaiduとGoogleまでの距離が286pxですOUは画面の中央にあり、Googleは長年にわたって慣れているユーザーのために、この習慣を変えることはHAOSOUに適応することはやや困難です。もう1つは、意図的に異なっており、独自のユーザー習慣を育みたいと考えていることです。 （私の意見ではあまり成功していない）

細部が成功と失敗を決める

ジョブズの父親は大工で、たとえユーザーからは見えなくても、キャビネットの裏側も丁寧に加工し、滑らかに磨くべきだという考えをジョブズに教えたことがある。偉大な理想主義の実験「マッキントッシュ」の誕生後、回路基板上の回路図さえも芸術作品とみなせると嘆く人もいました。実際、ジョブズは回路図の美的デザインに不満を持った従業員を解雇したことがあります。素晴らしい製品は一夜にして生まれるものではありません。長い沈殿、蓄積、そして洗練の期間を経なければなりません。しかし、これだけでは素晴らしいとは言えず、成功としか考えられません。製品の細部への最後の仕上げがその価値を決定する鍵となる場合があります。これは特に WEB 開発者に当てはまります。

多くの場合、ユーザー エクスペリエンスは「少ないほど良い」という原則に従う必要があります。大量のスパムは役に立たないだけでなく、全体的なユーザー エクスペリエンスを台無しにします。これが、成功と失敗を決定する設計の詳細と呼ばれるものです。

WEB ユーザー エクスペリエンスについて詳しく話すと、1 日 1 晩話しても終わりません。注意を払う必要のある細かい点が多すぎて、どれか 1 つをうまく行うことは簡単ではありません。開発者にとって、ユーザー エクスペリエンスをより深く、より実践的に理解するには、自分自身をユーザーとして捉えることです。開発者自身の細部へのこだわりを徐々に満たしながら、サイトのユーザー エクスペリエンスも充実させていきます。

出典: Witt のブログ投稿、オリジナル リンク。

元のタイトル: WEB ユーザー エクスペリエンスを向上させるための重要なポイント

キーワード: ウェブ