情報製品の読書リストのインタラクティブなデザインに関する考えと経験の共有

情報製品の読書リストのインタラクティブなデザインに関する考えと経験の共有
情報製品の読書リストのインタラクティブデザイン思考 123WORDPRESS.COM
リストは、テーブルをコンテナーとして使用するテキストまたはグラフの形式として定義されます。商品の種類に応じて、ほとんどの商品には独自のスタイルのリストがあり、その一部は商品の本体となり、その他は他のページの補助となります。リスト設計の主な目的は、ユーザーが素早く閲覧してスキャンし、「手間をかけて」クリックし、「時間をかけて」注意深く読みたいコンテンツを選択できるようにすることです。
従来の読書プラットフォームと比較すると、読書リストは物理的な本の目次のようなものです。小説の目次は簡潔で、タイトル+ページ番号です。一方、雑誌の目次は比較的充実しており、タイトル、サブタイトル、写真、概要、ページ番号、絶妙なレイアウトで、広告が掲載されているものもあります。コンテンツの種類ごとに、その表示に適したリスト形式があります。情報製品の読書リストを設計する際には、次の点を考慮する必要があります。
1. 視覚中枢
製品がユーザーに見てもらいたいコンテンツを強調し、主要な推奨コンテンツを読むようにユーザーを誘導します。
情報を読むとき、周囲の文字や画像に邪魔され、スムーズに読めないことがよくあります。人間の目の視覚心理学によると、視覚の動きの方向を簡単に誘導したり妨げたりする特性がいくつかあります。
1) 視線誘導 a. 一般的に、暖色系は寒色系よりも注目を集めやすく、明るい色は暗い色よりも注目を集めやすいと言われています。
読むとき、視線は通常左から右、上から下へと動きますが、色の誘導により視線の順序が変わります。適切な使用によりリストに重点を置くことができますが、そうでない場合はユーザーの心理的期待を破壊し、読む際の負担を生み出し、認知効率に影響を与えます。
色の誘導は視覚の順序を変える
b. 写真は言葉よりも魅力的です。
画像は、視覚的なコミュニケーションにおいてテキストを補助し、理解を助け、レイアウトを立体的でリアルなものにします。
画像は視覚的なコミュニケーションにおいてテキストを補助することができる
ほとんどのニュースリストには記事の画像のサムネイルが含まれています。サムネイルの配置は商品の位置によって異なります。
より安定した情報そのものに重点を置く製品では、ニュースの見出しの後にサムネイルを配置する傾向があります。このタイプの情報コンテンツの画像品質は平均的であることが多いです。同時に、ユーザーは比較的安定した精神状態で各タイトルを読み、好きなコンテンツを選択できます。画像はタイトルの補助としてのみ機能することが期待されています。
エンターテイメント性や断片的な情報商品の場合、タイトルの前にサムネイルを配置することで、コンテンツの意味をより直感的に伝えることができ、ユーザーがテキストタイトルを理解するのにかかる時間が短縮され、右側の画像を素早く閲覧できるようになり、迅速なスクリーニングの目的を達成できます。
サムネイルの配置は商品の位置付けによって異なります。
c. リングは視線を集中させることができる
リングは視界を集中させる
d. 目は矢印、数字、またはコードに従って動きます。
矢印や数字を規則的に並べると、ページの片側が重くなりすぎたり、ヒントが強くなりすぎたりしやすくなります。ページの安定性に注意してください。
視線は矢印、数字、コードに沿って進みます
2) ハイライト ユーザーが興味を持ちそうな記事や、デザインに多くの時間を費やして注目を集めた部分がある場合は、その部分を「ハイライト」する方法を見つける必要があります。
最も簡単な方法は、明るいスタイルを使用するか、アイテムの背景色を変更することです。また、タイトルの前にサムネイルを配置するなど、この記事を他のレベルよりも目立たせる場所を見つけることもできます。しかし、ページ全体の視覚効果も考慮する必要があります。 1 つの原則は、「強調しすぎると、強調しなくなる」ということです。
ユーザーが興味を持ちそうなコンテンツを強調する
3) フィードバック 読んだコンテンツに対して適切な視覚的なフィードバックを提供し、コンテンツの「ハイライト」とは異なるインタラクティブな方法を使用します。たとえば、重要なコンテンツや一般的なコンテンツを区別するためにすでに異なる色のドットを使用している場合は、コンテンツが既読であることを示すためにドットを使用しないでください。同じスタイルは人々の心の中で同じ内容を意味しますが、未読と既読は同じ内容の 2 つの状態です。
2. 混乱を招かない 1) 長いリストは、効率的にスキャンできれば煩わしいものではありません。少なくとも、閲覧の労力が減り、コスト効率が高くなります。
情報リストが長い場合、次の理由により、標準のページ番号を使用する必要はありません。
a. コンテンツを読む世界からナビゲーションの世界へ。
ユーザーは、さらにコンテンツを表示するためにページを選択するたびに、コンテンツを読む世界から抜け出して、ナビゲーションの世界に身を置く必要があります。ユーザーは、どのようなコンテンツを読みたいかを考えるのではなく、もっと読むものを見つける方法を考えるようになりました。ページ番号を選択すると、自然な一時停止時間が追加され、ユーザーは読み続けるか、それとも読み終えるかを判断する機会が得られます。
b. それ以外の場合、ページ番号には本質的な意味はありません。
ユーザーは、2 ページ目またはそれ以前のページで読みたいコンテンツを簡単に見つけられるように、ページ番号のみで選択します。ページ番号よりもはるかに効果的な、週、月、年、カテゴリ、タグ、その他の属性によるフィルタリングなど、より優れた方法を提案してください。ページングインジケーターコントロールを使用しているモバイル端末も多くありますが、ページ番号を削除するのは良いアイデアです。
2) 広告閲覧の焦点はコンテンツにあり、ユーザーはコンテンツに関係のない広告やリスト閲覧に影響しない広告を見ることを気にしません。
ブラウザや無料アプリケーションを頻繁に使用するユーザーは、通常の閲覧を妨げない限り、広告の存在に慣れており、製品に対する広告の重要性を理解しているはずです。
a. 広告が面白いコンテンツであるかのように見せかけないでください。
そうすることで広告のクリック数は増えるかもしれませんが、ユーザーは「騙された」と感じてイライラし、悪い体験につながります。
b. コンテンツに関連する広告を提供します。
データによれば、ユーザーは自動車関連の広告をクリックする傾向があることが分かります。ユーザーが車のモデルを探しているとき、対応するストアの推奨により、購入や価格比較のチャネルが提供されるため、ユーザーは当然喜んで利用します。
c. 無視されやすい。
リストをすっきりと見せ、商品を美しく見せるために、デザイン上、リストの間に広告を挿入し、リスト内のアイテムであるかのように見せかけることがあります。ただし、広告の視覚効果は最小限に抑えて目立たないようにし、気付かれずに簡単にスキップできるようにする必要があります。
一部の製品では、ページ上部に広告を配置しています。位置は明らかですが、ボタンで閉じたり、下に引っ張ったときにのみ表示されたりするため、これも妥協点です。
ユーザーは、コンテンツに関連しない広告やリストの表示に影響を与えない広告が表示されることを気にしません。
3. すっきりとした反復的な読書リズムの形式と、「最初の画面」を簡単に把握するという製品の戦略により、読書リストをスクリーニングするプロセスが「ホワイトノイズ」に似た遮蔽効果を生み出します。どれだけ良いものであっても、「美的疲労」を引き起こします。しばらく読んでいると、ユーザーはコンテンツが比較的平凡であると感じ、リストから離脱することがよくあります。
読書媒体としてのWeiboの利点は、時折ハイライトを紹介し、読むペースを保ちながら驚きを与えてくれることです。
呼吸のリズムを保つことで体を動かすことができ、コンテンツのリズムを保つことで読書を長く続けることができます。楽しさと退屈が交互に訪れることで、ユーザーは休憩して興味を取り戻す時間ができ、また次のちょっとしたサプライズへの期待も持てるようになります。その結果、楽しさと退屈さが平均的に重なるのではなく、全体的に快適な製品体験が生まれます。
読みやすいペースと驚きを与える
4. リスト内の項目 ほとんどの製品には、タイトル、概要、リリース日、アクション (クリックすると詳細が表示され、さらに表示されます) などの項目が含まれます。
共通項目: カテゴリ、サムネイル、コメント数、写真数、作成者。

<<:  HTML で色を表すには、6 桁の 16 進コード、RGB、またはキーワードを使用します。

>>:  Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

推薦する

MySQLの分離レベルとロックメカニズムの詳細な説明

目次簡単な説明: 1. 取引の4つの特徴2. 複数の同時トランザクションによって発生する問題3. ト...

Vueライフサイクルカメラの8つのフック関数

目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...

MySQL最適化ソリューション: スロークエリログを有効にする

目次序文スロークエリログの設定テスト付録: ログ解析ツール mysqldumpslow要約する序文こ...

反応ループデータの実装(リスト)

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...

Pythonの関数知識についての簡単な説明

目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...

この記事ではCSSボーダーの使い方を説明します

境界線のスタイルborder-style プロパティは、表示する境界線の種類を指定します。 bord...

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください

問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...

Ubuntu 18.04 に Nvidia グラフィック カード ドライバーをインストールするチュートリアル (画像とテキスト付き)

0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

MySQL データ型 DECIMAL(N,M) における N と M の意味の詳細な説明

同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...

Linuxオンラインソフトウェアgccをオンラインでインストールする方法

Linux オンラインインストール関連コマンド: yum install: すべてインストールyum...