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

情報製品の読書リストのインタラクティブなデザインに関する考えと経験の共有
情報製品の読書リストのインタラクティブデザイン思考 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 での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ

01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...

JavaScriptのプリコンパイルを見てみましょう(概要)

JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Vue プロジェクトに ECharts を導入する

目次1. インストール2. はじめに3. 使用4. 必要に応じてEChartsチャートとコンポーネン...

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...

MySQLのルートパスワードをリセットする最も簡単な方法

私の MySQL バージョンは MYSQL V5.7.9 です。古いバージョンを使用してください: ...

MySQL で数千万のテストデータを含むテストデータベースを作成する方法

場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...