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

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

推薦する

Linux nohup コマンドの原理と例の分析

nohup コマンドUnix/Linux を使用する場合、通常はプログラムをバックグラウンドで実行す...

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

LinuxでPythonの組み込みバージョンを削除する手順の詳細な説明

大きな落とし穴、Linuxシステムに付属するPythonのバージョンを簡単に削除しないでください1....

画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

あなたのウェブサイトはIE8に適していますか?

オリンピック期間中にIE8ベータ2がリリースされ、英語版のリリースに合わせて中国語版も第一波でリリー...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

Vue.jsフレームワークはショッピングカート機能を実装します

この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...

Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する

1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...

ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装

1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...

CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)

animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

Django プロジェクトを作成して MySQL に接続する方法

1: django-admin.py startproject プロジェクト名2: cd プロジェク...

Tomcatがセッションを管理する方法の例

ConcurrentHashMapを学習しましたが、どのように適用すればよいかわかりませんか? To...

Docker デプロイメント Consul 構成プロセスの分析

コマンドを実行docker run -d --name consul -p 8500:8500 co...