ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーションバーのことだけではありません。道路標識、ショッピングモールの標識などもナビゲーションの一種です。ナビゲーションは生活のあらゆるところにあると言えます。これらのナビゲーションがなければ、私たちは迷子になります。インターネット情報の海で迷子になり、交差する道路で迷子になり、まばゆいばかりの商品棚の中で迷子になります。
いわゆるWEB2.0の流行が海外から中国に猛烈に吹き荒れていたとき、いくつかの成功した海外ウェブサイトの成功モデルが、国内の模倣者の目にも猛烈に吹き荒れていた。 Yupoo は現在、中国で最も優れたオンラインフォトアルバム会社、またはもっと流行っている言葉で言えば、WEB2.0 オンラインフォトアルバム会社です。また、中国で Flickr モデルに最も類似し、最も成功した模倣者でもあります。実際、yupoo はほぼ別の言語の Flickr バージョンです。営業活動などの他の要素はさておき、写真プレビューナビゲーションシステム（正しい名前がわからないので勝手に名付けました）の点、あるいはユーザーの使い方に対する認識の違いについて、両者を比較してみましょう。
出典:

上の写真から、Flickr アルバムの写真プレビューナビゲーションシステムは非常にシンプルであることがわかります。「前」と「次」の写真のサムネイルリンク、現在のアルバムの写真の総数、およびスライドショーを再生するためのボタンのみがあります。現在の写真のサムネイルは、プレビューナビゲーションでは利用できません。下の Yupoo のスクリーンショットをご覧ください。プレビューナビゲーションには、現在の写真のサムネイルが追加されていますが、現在のアルバムにある写真の総数は表示されていません。
ゆーぷー.jpg

現在の写真のサムネイルがプレビューナビゲーションに表示されるべきかどうかという問題はさておき、Yupoo がプレビューナビゲーションに現在のアルバム内の写真の総数を表示しないという事実は、その失敗を示しています。
すべてのユーザーは、現在のアルバムを見るときに、必然的にアルバムに何枚の写真があるか知りたいと思うでしょう。これは実は人間の心理に関係しています。人は生まれながらにそのような欲求を持っています。ある物事についてより多くの情報があればあるほど良いのです。十分な情報があって初めて、人は安心したり安全を感じたりするのです。これは生まれながらの本能的な欲求です。
しかし、Yupoo は現在のアルバムにある写真の総数を表示しません。これは、ユーザーが答えを探すのを待つ質問を残しているようなものです。一部の人々の好奇心を刺激し、クリックし続けるかもしれませんが、結局、このアルバムに何枚の写真があるかはわかりません。
現在の写真のサムネイルをプレビューナビゲーションに表示しますか?
Yupoo の写真プレビューナビゲーションシステムは、ウェブサイトのナビゲーションシステムに合わせて完全に設計されています。ウェブサイトのナビゲーションシステムでは、ユーザーは現在どこにいるのか、どの列にいるのかを知る必要があります。このとき、ナビゲーションシステムは、この場所または列をマークしてユーザーに通知する必要があります。そうすることで、ユーザーはウェブサイトの複雑な情報に迷うことがなくなります。
しかし、写真プレビューナビゲーションシステムのような比較的シンプルなナビゲーションシステムの場合、Web サイトのナビゲーションシステムに合わせて設計するのは少し複雑に思えます。
まず、写真プレビューナビゲーションは現在の位置を示す必要はありません。これは、下位またはサブレベルのナビゲーションを持つ可能性のあるWebサイトのナビゲーションシステムとは異なります。写真プレビューには1枚の写真のみが表示されます。つまり、このプレビューナビゲーションのすべての列は同じです。従属関係やより深い関係はありません。ユーザーはこのようなページで迷うことはありません。
第二に、ナビゲーションシステムの実際の機能は、ユーザーをガイドして場所をマークすることです。写真プレビューナビゲーションでは場所をマークする必要がないため、写真プレビューナビゲーションシステムの残りの機能は、ユーザーをガイドすることです。つまり、ユーザーがナビゲーションシステムのサムネイルをクリックして写真を表示するようにガイドします。このとき、問題が発生します。プレビューナビゲーションのサムネイルをよく見ずにマウスを直接クリックすると、現在の写真のサムネイルをクリックする可能性が高くなります。クリックした後、ユーザーはそれがまだ現在の写真であることに気付きます。理由を確認すると、ユーザーは中央のサムネイルが現在の写真のサムネイルであることに気付きます。クリックした後もまだ現在の写真であるため、このサムネイルは役に立たないことを意味します。役に立たないなら、なぜ存在するのでしょうか?
最後に、同じスペースに多くのアイテムを配置すると、各アイテムが占めるスペースは自然に少なくなります。写真プレビューナビゲーションの最も優れた点は、テキストの代わりに写真のサムネイルが表示されるため、ユーザーは 2 枚の類似写真のおおよその形状を明確に把握できることです。したがって、サムネイルの明瞭さをどのように確保するかが、プレビューナビゲーションの真の鍵となります。写真のサイズが大きいと、サムネイルの鮮明度が低下し、最終的にはぼやけてしまうこともあります。このとき、サムネイルのサイズを大きくする必要がありますが、プレビューナビゲーションのサイズには制限があるため、現在の写真のサムネイルを削除すると、隣接する 2 枚の写真のサムネイルがより鮮明になります。
細部までユーザーを考慮することが製品成功の鍵です!

<<: Vue要素ヘッダーにスラッシュを追加するための実装コード

>>: CSSはスクロールを許可しながらスクロールバーを非表示にするためにオーバーフローを設定します