ウェブサイトのユーザーエクスペリエンスデザイン: 効率的なデザインの視覚化

人々は日々、情報の海に溺れています。能動的な獲得と受動的な受容のプロセスにおいて、ユーザーは常に「効率性」の要求を避けます。この情報の海の中で、ユーザーは現在どのようなジレンマに直面しているのでしょうか?

いくつかのデザイン詳細の「隠された」、「折りたたみ可能な」、「進歩的な」デザインは、ユーザーの急速な認知要求を消費します。

複雑で大規模な機能はインターフェースの表示に負担をかけ、ユーザーの操作マッピングの混乱を悪化させ、ユーザーの理解を曖昧にします。

操作クリックを多すぎる数に設計すると、ユーザーは手の筋肉を絶えず動かし、別のページに移動して表示することになります。

⋯⋯

情報コミュニケーションのデザイナーとして、いかに情報をより直感的かつ明確に伝え、理解の不確実性を排除するかが仕事の最優先事項です。 「視覚化」は、情報を効率的に伝達する手段のひとつです。情報の視覚化、ビジュアライゼーション、グラフィックスは、デザイン界で人気の視点や研究方向となっています。

製品のビジュアル デザインの主な目的は、グラフィックなどの直感的な手段を利用して情報を明確かつ効果的に伝達し、効率的な機能と使用方法のマッピングを形成し、ユーザーのタスク目標を達成することです。ユーザーが完了したいタスクに適したインターフェース要素を選択し、すぐに理解でき、使いやすい方法でページ上に提示し、ユーザーの認知的および身体的負担を軽減します。大まかに機能の可視化、構造の可視化、操作の可視化、制御の可視化の4つのレベルに分けられます。

機能の可視化：つまり、要件の優先順位を決定することを前提として、優先度の高い機能がユーザーに表示され、ユーザーが簡単に識別して見つけられるようにし、設計が正しい階層構造を持つようにします。ユーザーが情報階層を理解するには、まず素早い把握、次に特定のコンテンツのより詳細な理解という 2 つのプロセスが必要です。迅速なキャプチャ段階では、時間の範囲が短く、色、コントラスト、配置などを使用して製品の主な機能ポイントが強調されます。例えば、図 1 の韓国の有名なポータル/検索エンジン サイトである Naver が所有する Naver Shopping は、商品検索サービスとして位置付けられています。商品名を検索すると、ほぼすべての韓国の大手電子商取引サイトが提供する商品リンクを商品カテゴリ別に一覧表示できます。そのため、インターフェースでは、検索機能とナビゲーション領域を強調するために、強いコントラストのトーンが使用されています。視覚的な誘導により、ユーザーはコアコンテンツに集中でき、視覚の焦点を合わせることができます。白をメインカラーとしたページでは、目はまず強い色の部分を見ることになるため、強い色を使ってコアコンテンツを強調し、ユーザーの視覚をそこに集中させることもできます。

構造的視覚化: つまり、ユーザーが理解しやすい構造を使用して、ユーザーがインターフェース要素間の関係を明確に理解できるようにします。例えば、百度統計3.0の検索促進効果を確認する場合、構造は漏斗のようなグラフィック方式を採用し、真のチャート意味を実現し、コンバージョン率の概念を表現し、鮮明で直感的です。

プロセスの視覚化: ユーザーが操作中に迷子になるのを防ぎ、自分の位置を特定しやすくし、不明瞭な操作による高コストを回避することを意味します。アメリカのパズルゲームサイトである Lumosity は、カスタマイズされた脳トレーニングプランを作成する際に、上部のグラフィカルなステップ軸を使用しています。ユーザーの位置を示すために「赤い丸」アイコンを使用するだけでなく、ユーザーが完了したステップを示すために「チェックマーク」アイコンも使用して、ユーザーがプロセス全体を把握できるようにしています。

コントロールの視覚化: コントロールは製品の最小のインターフェース要素であり、製品の品質の基礎となるため、この記事では基本的なコントロールの視覚化事例をいくつか紹介することに重点を置いています。

コントロールは、インターフェイスを作成するための主要な構成要素であり、ユーザーがデータを入力または操作するために対話できる最も直接的なオブジェクトです。コントロールには、ユーザーの多くの注意とマウス操作が必要です。視覚的な観点から、次の 4 つの要素は異なるデザインになっています。

コントロール要素 1: ラジオボタン

ラジオ ボタンは、オプション ボタンまたはラジオ ボタンとも呼ばれ、ユーザーがオプションのグループから 1 つのオプションのみを選択できるコントロール フォームであり、オプションは相互に排他的です。

図 4 は、ラジオ ボタンが誤って使用されている製品インターフェイスを示しています。ユーザーは、頭の中で空間的な位置を想像し、それを対応するテキストに変換し、2 回クリックして、2 回入力してタスクを完了する必要があります。

修正後、図 5 ではグラフィカルな表現が採用され、直感的になり、ユーザーのクリック回数 (1 回) が減ります。ユーザーが余白に入ると、グラフィック内の対応する余白に動的な三角形が表示され、ユーザーをガイドして、ユーザーの間違いを防ぎます。

コントロール要素 2: ドロップダウン リスト コントロール

ラジオ ボタンと比較すると、ドロップダウン リストは相互に排他的な値のリストからオプションを選択するために使用されます。違いは、ドロップダウン リストには通常、より多くのボタンがあることです。

図 6 は、新しい医薬品検索システムのドロップダウン リスト フィルター コントロールです。医薬品の形状、色、種類などでフィルターします。ユーザーにとっては、認知コストが高く、視覚的に十分ではありません。

図7 ネイバーの医薬品検索およびフィルタリングコントロールは、ブランド、医薬品の形状、色、医薬品の材質、医薬品の表面の質感などをグラフィックで表現し、情報をより直感的で興味深いものにし、ユーザーの認知能力を高め、操作効率を向上させ、楽しさと実用性を兼ね備えています。一枚の写真は千の言葉に値しますが、スペースの使用量やページの読み込みコストなどの要素のバランスを取る必要があります。

制御要素 3: ツリー制御

ツリー コントロールは、ユーザーが階層的に配置されたコンテンツを参照し、コンテンツを操作し、単一または複数の選択を行うことができるコントロールです。

図 8: Taobao Mall のキッチン用品の 2 次ページのツリー フィルター コントロール。たとえば、ユーザーが圧力鍋を見つけたい場合、初心者ユーザーはキッチン/ダイニング用品のサブカテゴリを前後にクリックし、サブカテゴリを展開して、テキストの各行をスキャンして圧力鍋があるかどうかを確認し、圧力鍋を見つけます。ツリー コントロールに含まれる情報が多くなるほど、認知的負担が大きくなり、参照や検索が難しくなります。初心者のユーザーはツリーのレイアウトを完全に理解していない可能性があり、しばらくツリーを操作した後にのみツリーの関係のメンタルモデルを形成できますが、これにはコストがかかります。

図9：Naver Shopping_Kitchen Utensilsの2番目のページのカテゴリフィルターは、アイコンとテキストを使用しています。圧力鍋も検索しています。韓国語ですが、具体的なアイコンを適切に使用することで、ユーザーは基本的に理解でき、ユーザーの操作時間が短縮され、ユーザーはターゲットリンクをより早く見つけることができます。中級者や上級者の場合、サイトに慣れてくるとアイコンがより便利になります。

主に中級ユーザー向けに設計されたソフトウェアとは異なり、Web インターフェースの設計は初心者やエントリーレベルのユーザーをターゲットにする必要があります。ユーザーはウェブサイト上での学習コストを低く抑え、忍耐力も低いため、ユーザーの認知プロセスを短縮するには、ウェブ インターフェースをより直接的にする必要があります。しかし、テキスト自体には視覚的なコミュニケーション機能はありません。アイコンを適切に使用することで、ユーザーに表現したい機能を視覚化することができ、ユーザーの操作時間を短縮し、より良い結果が得られる場合が多くあります。しかし、ユーザーの効率性も考慮する必要があります。そうでないと役に立たなくなってしまいます。

コントロール要素 4: リスト ビュー

リスト ビューは、アイテムのコレクションを表示する拡張リスト ボックス コントロールです。単一選択または複数選択によってデータ オブジェクトのコレクションを表示および操作するために使用されます。

図10 SNSでよく使われる友達のグループ化と管理はリスト方式を採用しています。リストディレクトリは明確ですが、ユーザーの選択と管理のコストが少し高く、特に複雑なバッチ管理の場合は高くなります。

図 11 Google+ の「サークル」は、より直感的に表示でき、一括管理も簡単です。ドラッグ アンド ドロップでユーザーをグループ化できるため、友達の低レベルの管理が強調され、ページのシンプルさが確保され、エクスペリエンスが面白くてかわいらしく、ユーザーの心理モデルに沿ったものになっています。

つまり、「高速、明確、効率的」という情報伝達の位置付けを中心に、機能モジュール、タスクプロセス、インターフェース制御要素、情報伝達などの側面から、エクスペリエンスの有効性と合理性を向上させる必要があります。設計では、対象ユーザーのニーズと行動に応じて視覚化手法を合理的に使用して、製品を使いやすくし、ユーザーエクスペリエンスを向上させる必要があります。

出典: UEO

オリジナル: http://ueo.baidu.com/?p=1126

元のタイトル: ウェブサイトのユーザー エクスペリエンス デザイン: 効率的なデザインの視覚化

キーワード: ウェブサイト、ユーザー、エクスペリエンス、効率的、計算、視覚化、ある日、人々、情報であふれかえる、ウェブマスター、ウェブサイトのプロモーション、収益化