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減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

MySQL データ型の完全分析

データ型: 列に格納できるデータとそのデータが実際にどのように格納されるかを定義する基本ルール。デー...

22 Vue 最適化のヒント (プロジェクトの実践)

目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...

CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル

ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

入力テキストボックスの入力実装プロパティを無効にする

今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

MySQLの暗黙的な変換問題の解決

1. 問題の説明 root@mysqldb 22:12: [xucl]> テーブル t1\G ...

MySQL プロジェクトでトランザクション分離レベルを選択する方法

導入コンテンツから始めましょう。誰もが次のような面接のシナリオに遭遇したことがあると思います。インタ...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...

パフォーマンスの最適化を教える 52 個の SQL 文

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

Linux での SSH パスワードフリーログイン設定の詳細な説明

Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...