コンテンツウェブページの画像プレビューのデザイン

コンテンツウェブページの画像プレビューのデザイン
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナビゲーションの分析」という2つの記事を書きました。ここで説明したいのは、プレビュー機能がユーザーの頭の中で大きな割合を占めているということです。リンクのタイトルとして連番の列だけを与えると、ユーザーは不安を感じてしまいます。
連番の列をリンクとして提供するというのは、インターネット全体のページングリンクのほぼデフォルトのモードですが、これによってもユーザーの心理的な安心感は無視され、通常であれば無視できる隠れた要素となります。しかし、これらの隠れた要因が、特定の状況下で特定の事柄によって引き起こされた場合、被害は拡大し、最終的には激しい闘争に発展する可能性があります。
この数字だけのナビゲーションにプレビュー機能が追加されれば、ユーザーは次にどんなコンテンツがポップアップするかを推測する必要がなく、心理的にも自然と安心感を覚えるでしょう。プレビューにより、ユーザーは次に見るページの大まかな内容を事前に知ることができます。特に写真ニュースの場合、ページネーションリンク上の写真プレビュー機能は、ユーザーに優れたユーザーエクスペリエンスをもたらします。ユーザーはプレビューナビゲーションを通じてニュース写真セット全体のおおよその内容を知ることができ、読むのをスキップするか、直接読むのを終了するかを選択できるからです。そうすることで、ウェブサイトのPVが多少失われる可能性はありますが、長期的なユーザーを育成する上で、間違いなくより有益です。
これでは神秘性が失われるという人もいるかもしれないが、私が言いたいのは、安心感に比べれば神秘性がユーザーの心の中で占める割合は小さいということだ。特にニュース情報コンテンツの場合、神秘性がユーザーの心の中で占める割合はさらに小さい。ニュースコンテンツは情報の関連性を追求します。コンテンツが長すぎてページ数が多い場合は、情報の一貫性も追求します。 1ページ目で都市の人々の暮らしについて取り上げ、2ページ目で突然豚の体重がどのくらい増えるかを取り上げているニュースは見たことがありません。これらはまったく異なる2つの情報トピックです。一緒に取り上げなければならないとしたら、それは誤認の良い例です。なぜなら、「張」と「李」はどちらも百姓姓であり、「人」と「豚」はどちらも動物だからです。

多くのウェブサイトでは、コンテンツページが長く、ページ分けが必要な画像があります。このように、画像に次のページへのリンクを追加します。これにより、大量のコンテンツから次のページへのリンクを探す手間が省けるだけでなく、「次のページ」リンクがクリックされる可能性も高まります。
エンターテイメント ニュースには、テキスト情報よりも多くの画像が含まれます。エンターテイメント ニュースがまず行うべきことは、テキストを使用してユーザーに衝撃を与えるのではなく、視覚的にユーザーの目にインパクトを与えることです。複数の写真が含まれることが多い芸能ニュースの場合、ページ分割表示は当然ながら良い方法です。ページの読み込み速度が速くなり、ページのクリック数も増えます。一石二鳥なのは間違いありません。
テンセントエンターテインメントのニュースコンテンツページでは、常に画像をクリックして次のページに進む方式を採用しています。数字をクリックして次のページに進むよりも優れたユーザーエクスペリエンスをもたらしますが、使用中に後悔することは避けられません。たとえば、あるニュースのタイトルが「新華社のスターがXYZ賞授賞式で注目を集める」なので、タイトルをクリックしてコンテンツページに移動しましたが、最初のページの写真はその「新華社のスター」ではなく、ニュースコンテンツ全体が10ページ以上に分かれていることがわかりました。この「新華社のスター」の写真がどのページにあるかを知るにはどうすればよいでしょうか。 「ある星」が目に入ったので入りました。他の星には興味がありません。どうすればいいですか?私にはページを1ページずつめくるしか選択肢がありませんでした。運が良ければ最初の数ページで見つけられるかもしれませんが、運が悪ければ、欲しい写真を見るために最後から2番目のページまでめくらなければならないかもしれません。最終的に自分の望んでいた目標を達成しましたが、それを達成する過程で後悔したことはありますか?
今日、テンセント エンターテインメントの写真ニュース コンテンツ ページの一部が変更されたことに気付きました。写真をクリックして次のページに進むだけではなく、ニュース コンテンツ ページに写真プレビュー ナビゲーションが追加されました。これで、前述の後悔は解消されました。数十ページの中から気に入ったコンテンツ ページを見つけるために、ページごとに目を通す必要がなくなりました。
ただし、この画像プレビュー ナビゲーションは完璧ではありません。画像をクリックするたびに、ページにジャンプしてしまうからです。現在の画像グループにまだ見たいコンテンツがない場合は、次のグループをクリックして、必要なコンテンツがあるかどうかを確認する必要があります。
このコンテンツページの画像プレビューナビゲーションをアルバムと同じプレビューナビゲーションにできれば、さらに完璧になります。

<<:  MySQLデータベースに中国語の文字を保存するときに発生するエラーを解決する方法を教えます

>>:  CSS ロリポップを描くサンプルコード

推薦する

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

CSSをインポートする方法に関する詳細な洞察の要約

CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Windows で MySQL 5.6 を 5.7 にアップグレードする方法

前面に書かれたMySQL をアップグレードする方法には、インプレース アップグレードと論理アップグレ...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです

数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...

Expressプロジェクトファイルディレクトリの説明と詳細な機能の説明

app.js: スタートアップファイル、またはエントリファイルpackage.json: プロジェク...

LinuxでIPアドレスが表示されない問題の解決方法

目次序文解決:ステップ1ステップ2序文環境: VMware Workstation 上に Linux...

Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...