B2C ウェブサイトのユーザー エクスペリエンスの詳細設計リファレンス

B2C ウェブサイトのユーザー エクスペリエンスの詳細設計リファレンス

最近、Apple.com/Ebay.com/Amazon.com/shopping.yahoo.com を使用した際に、ユーザーの詳細にいくつかの小さな問題が見つかりました。これらの問題を解決するために、123WORDPRESS.COM は上記 4 つの Web サイトの処理方法を試しましたが、まだ学べる点があると感じました。

提案のための感情的なデザインの詳細:

EBAY.COM

イーベイ1

ユーザーが提案を利用したくない場合、または提案が邪魔になると思われる場合は、提案をオフにすることができます。(提案は、ユーザーの流れを遮断し、ユーザーのメンタルモデルに影響を与える場合があります)

イーベイ2

ユーザーが再度サジェスト機能を使用したい場合、検索ボックスの右側にあるボタンをクリックすることで、サジェスト機能を復元することができます。このとき、マウスを復元ボタンの上に移動すると、ボタンの意味がわからないことを防ぐために、ボタンの機能を示すヒントが表示されます。

ヤフーショッピング

ヤフーショッピング

YAHOOショッピングのオレンジボックスでは、自由にオフにできるサジェスト機能も発見しました。

要約:表面的には、これらの機能は単なるおまけのように思えますが、ユーザーの感情的なデザインの観点から見ると、これらの機能は、ユーザーが新しい検索機能を大胆に試し、頻繁に使用する自信を高めることもできます。

検索ボックスのコンテンツの詳細をワンクリックでクリア:

APPLE.COM

Apple はまさにユーザー エクスペリエンス デザインに細心の注意を払っている企業であり、そのことは同社の公式サイトの検索機能の詳細からも明らかです。

りんご

ユーザーが検索ボックスにキーワードを入力すると、検索ボックスの下に商品カテゴリーの候補が表示され、検索ボックスの右側(画像のオレンジ色のボックス内)に検索キーワードをクリアするボタンが表示されます。
ユーザーがキーワードを入力するときに間違いを犯したり、入力したキーワードを削除したりした場合、再度検索するときにバックスペースキーを使用する必要があります。しかし、「ワンクリッククリア」機能が追加されると、キーボードのバックスペースキーを繰り返し使用する面倒な操作が、マウスをクリックするだけで解決されます。この細かい設計は、ユーザーに大きな利便性をもたらします。

写真の緑色のボックスのデザインは非常に巧妙で、Appleデザイナーの特徴を十分に反映しています。検索ボックスの近くに確認ボタンがないことに気付くでしょう(視覚的な美しさとバランスのため)。しかし、ユーザーはEnterキーを使用するか、緑色のボックス内のテキストリンクをクリックして、検索ボタンの機能を実現できます。このデザインは視覚的なバランスを満たすだけでなく、機能的なニーズも満たしています。完璧です!

<<:  HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります

>>:  CSSで制御可能な点線を実装する方法

推薦する

HTML+CSS+JavaScript でシンプルな三目並べゲームを作成する

目次HTMLの実装CSSを追加Javascript部分の実装デモアドレス HTMLの実装まず、hea...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

Reactはルーティングを使用してログインインターフェースにリダイレクトします

前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...

Vueナンバープレート入力コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...

Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

目次序文1.1 機能1.2 要素の可視性を制御する方法1.3 初期レンダリングの比較1.4 スイッチ...

ネイティブ JavaScript でショッピングカートを実装する

この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

ページを更新せずにフォームを送信するには iframe を使用します

そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

Nest.js のハッシュと暗号化の例の詳細な説明

0x0 はじめにまず、ハッシュアルゴリズムとは何でしょうか?メッセージやセッション項目など、一部のデ...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...

LNMP と phpMyAdmin を Docker にデプロイする方法

環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...