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

推薦する

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

入力のsize属性とmaxlength属性の違い

最近、プロジェクトで input size 属性と maxlength 属性を使用しました。以前は、...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

Google Web Fonts でウェブサイトに無制限のフォントを追加

長い間、リソースの制約により、使用できるフォントが限られていたため、Web サイトの開発は妨げられて...

Docker ベースの Redis マスタースレーブ クラスタの実装

目次1. Redisイメージを取得する2. 6つのRedisコンテナを作成する3. Redisコンテ...

実践的な経験を共有するためのコードチェックツールstylelintの紹介

目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...

ピクセルを包括的なブランド体験に変えるヒント

編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...

React+Typescriptはカウントダウンフックメソッドを実装します

まず、setIntervalはフックとしてカプセル化されます👇 'react' から...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

mysql5.7.17.msi インストール グラフィック チュートリアル

mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

nginx + php の「入力ファイルが指定されていません」の解決策

本日、ローカル開発環境で突然「入力ファイルが指定されていません」というエラーが発生してしまいました。...

HTML テーブルタグチュートリアル (44): テーブルヘッダータグ

<br />ソース コード内で表の構造を明確に区別するために、HTML 言語では、表のヘ...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...