ウェブサイトのユーザーエクスペリエンスデザイン(UE)

ウェブサイトのユーザーエクスペリエンスデザイン(UE)
Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見ました。これは Gtalk の連絡先を通じて共有されました。彼は、Movable Type のデザイナーである Jim Ramsey による記事「Designing for Flow」を簡単に紹介しています。
チクセントミハイのフロー理論(Wikipedia のフローの項目はこちら)は、「流れ」と訳されることもありますし、「フロー」と訳されることもありますし、「至福の経験」と訳されることもあります。小龍さんは「幸福体験」という翻訳を好みます。チクセントミハイ氏の個人ホームページはこちらです。
チクセントミハイの著書「フロー:最適な体験の心理学」の紹介はAmazonでご覧いただけます。この本の中国語版はDoubanでは見つかりません。 2001年、上海翻訳出版社は『創造性:フローと発見と発明の心理学』の中国語版を出版しました(ダニーはこの本についての読書メモをいくつか書いており、こちら1、2でご覧いただけます)。
ウェブサイトのユーザー エクスペリエンス デザイン (UE) は、いくつかの異なる領域に分けられます。
1. 基本的なバリアフリー体験 優れた UE では、ユーザーが障害を感じたり、迷ったり、誤解したり、ぎこちなく感じたりすることなく、Web サイトを使用できる必要があります。 UE デザイナーは、間違いを避け、ユーザーに考えさせる必要をできるだけ避けるようにする必要があります (考えさせないでください)。
2. タスクを効率的に完了する。基本的なミスを避けた後、優れた UE では、ユーザーが Web サイトを使用しながら最短時間でやりたいことを完了できるように、ユーザーがタスクを効率的に完了できるようにする必要があります。ユーザーが効率的にタスクを完了できる Web サイトでは、ユーザーはより多くの時間を投資できるようになります。 (例: Google.com)
3. 良い、楽しい体験を提供する UE を作成します。最高レベルは、ユーザーが Web サイトを使用するときに幸せを感じ、ユーザーが Web サイトに集中して、日常のパフォーマンスを超えるパフォーマンスを生み出し、潜在能力を活性化できるようにすることです。
この状態を目指して努力したらどうなるでしょうか? Jim Ramsey 氏の記事「Designing for Flow」にいくつかの答えがあります。以下はJunChenが翻訳したテキストの一部です。
1. 最初のステップは、ユーザーに対して明確な目標を設定し、製品で何を達成できるかを伝えることです。
2. すぐにフィードバックを提供します。ウェブサイトは、ユーザーが目標の達成度と目標からの距離を実感できるように、ユーザーを段階的にガイドする必要があります。
3. より効率的な設計。ユーザーが初心者から中級者、上級者にアップグレードすると、製品をより効果的に使用したいと思うようになります。
4. 検出を許可します。ユーザーが最高の効率で作業を開始すると、エンゲージメントが低下し、退屈が増加します。このような状況を回避するには、一部のコンテンツ、機能、特徴を非表示にして、ユーザーがそれらを見つけるのを待つ必要があります。ユーザーが学習と改善を継続できるようにし、常に新しいものがあることをユーザーに知らせます。

<<:  MySQLのSeconds_Behind_Masterの詳細な説明

>>:  よく理解しましたかタグ 定義方法 使用方法

推薦する

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...

収集する価値のある Linux ドキュメント編集コマンド 27 個

Linux col コマンドLinux の col コマンドは制御文字をフィルタリングするために使用...

MySql が常に mySqlInstallerConsole ウィンドウをポップアップする問題の解決策

MySql は常に MySQLInstallerConsole.exe ウィンドウを定期的にポップア...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

XMLとCSSスタイルの組み合わせ

学生.xml <?xml バージョン="1.0" エンコーディング=&qu...

Docker-compose チュートリアルのインストールとクイックスタート

目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

js は丸で囲まれた数字のリストのサンプルコードを動的に追加します

1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

HTML印刷関連の操作と実装の詳細な説明

原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...