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で制御可能な点線を実装する方法

推薦する

Dockerでnginxを実行し、ローカルディレクトリをイメージにマウントする方法

1 hupからイメージを取得する docker プル nginx 2 マウントするディレクトリを作成...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

HTML テーブルのオーバーフローの解決方法

テーブルが広い場合は、あふれてしまう可能性があります。たとえば、左と右の 2 つの div がありま...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

bash のスクリプトデバッグメカニズムの詳細な説明

スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...

Jenkins の紹介と Docker で Jenkins をデプロイする方法

1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

よく使うLinuxコマンドのまとめ

私は2年間運用保守に携わり、多くのコマンドを使用しました。特定のLinuxコマンドを習得すると、どれ...

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...

バックアップ データをインポートするときに innodb_index_stats がエラーを報告する場合の主キー競合の解決方法

障害の説明percona5.6、mysqldump フルバックアップ、バックアップデータのインポート...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Linuxの一般的なコマンドでLinuxのmoreコマンドを使用する方法

more は、最もよく使用されるツールの 1 つです。最も一般的な使用方法は、出力コンテンツを表示し...