イラストマップのユーザーエクスペリエンスを向上させる方法
イラスト付きマップの相互作用コストを改善するための推奨される提案はありますか？より正確には、ユーザーが「関心のあるポイント」をクリックしてマップに戻ると、すべてのアイテムが再度読み込まれます。また、ユーザビリティテストや分析の記録を見ると、ユーザーが最後までクリックしているのではなく、地図上のイラストに "ホバリング"しているように見えます。ユーザーが地図のコンテンツにもっと興味を持てるようにするための提案はありますか？これについて良い前例を作った他のサイトはありますか？
ここにマップへのリンク： http://thebambergergroup.com/map/murray-hill/nyc
これが私の2セントです。この質問で同僚からのアドバイスを探しているとのことですが、私の最大のアドバイスは、「ユーザーエクスペリエンス」でユーザーを思い出すことです。ユーザーに同じ質問をして、ユーザーが何を必要としているかを確認します。
まず、プログラミングと画質については、これまでのほとんどのコメントに同意します。次に、ユーザーの観点から説明します。
- 会話のプロンプトをズームコントロールから遠ざけます。それが最初にロードされたとき、それはズームコントロール上にあり、それを閉じる方法を私に1、2、2、2桁でとらえました。 （スクリーンショットのために2度目にポップアップするようにできませんでした）
- 2つ目は、詳細な会話の制御をもう少しわかりやすくすることです。
- プロパティの詳細にフライアウトを使用する代わりに、オーバーレイまたはモーダルウィンドウを使用することを検討します。フライアウトの現在の動作は、ホバリングよりも少ない情報しか提供しません。したがって、目標がクリックスルーの場合は、ホバーに関する情報をユーザーに提供しないことを検討してください。
- また、ユーザーがプロンプトからクリックスルーできるようにすることも検討してください。フライアウトは、クリーンで明確なユーザーエクスペリエンスではありません。トグルは私にとって追加のステップです。最初に使用可能なプロパティを確認します。建物情報のプロパティページに移動するプロンプトをそこに置くことができる場合があります。
- また、プロパティのリストは写真と完全な詳細を必要としないようです。この情報をより多くのリスト形式に要約し、価格と部屋数を表示するだけで必要な情報が得られます。さらに詳しく知りたい場合は、詳細をクリックして写真や建物情報などを表示できます。（また、クリックスルー率も向上します）このアプローチでは、フライアウトは存続可能です。
- トピックとは別に、アイコンをgoogleロケーションマーカーからより関連性の高いもの（バス停のバスや他の興味深いスポットの一般的な記念碑マーカーなど）に変更することも検討します。ロケーションマーカーは、最初は興味をそそられる領域ではないので、私を驚かせました。視覚的な密度が心配な場合でも、不透明度を下げることができます。
具体的にはクリックスルーの質問に対する答えではなく、マップ上のコメントです。
モバイルには読み込まれません。ブラウザを「デスクトップモード」に切り替えると、少し遅くなりますが、サイトは問題なく動作します。そのため、サイトは、フラッシュのような機能やプラグインではなく、ブラウザのユーザーエージェントに基づいて意図的に私をブロックしています。これはトラフィックを失う確実な方法です。
遅延のあるページをロードするのは素晴らしいUXではありませんが（ページを大幅に最適化できると思います）、何もしないよりはましです。特に、「サポートされていないモバイル」ポップアップを「モバイル向けに最適化されていません」という免責事項と交換した場合。
フィルターが好きです。不動産の価格帯のように。プロパティの上にドル記号が付いたフィルターは、販売可能なものが存在することを示しています。値下げを示す赤いドル記号か、値上げを示す緑色と、価格に変化がない場合は別の色。エリアを丸めて検索できるZillowの機能が気に入っています。最初は使い方のツールチップが必要でしたが、あまりレイヤーを重ねずにマップのビューを覆い隠すことなく使用できる楽しい機能でした。
「ピン」をクリックしなくてもアドレスは実際に表示されているはずです。ポップアップはいいですが、私があなたのテキストを読むまで、私は建物をクリックすることができると思いませんでした、そして何かが起こるでしょう。そのための簡単な説明を提供する必要があります。
正直なところ、クリックするだけではありません。
- 建物はホバー時にジャンプして影を落とさないようにする必要があります-これは迷惑です。
- テキストの傾きが正しくありません（間違った方法）。
- フォントは快適ではありません。 （ 快適なフォント ）
- スムーズなズームのために、建物はSVGである必要があります。
- 左マウスボタンを押したままにすると、これは発生しません）：
![enter image description here]()
お役に立てれば。
まず、とてもいい仕事です。私の唯一の問題は、地面の「質感」の欠如です。灰色の代わりに、おそらくそれは色分けされているでしょうか？おそらくフィールドにとってグリーンですか？ほんの少しの提案ですが、ユーザーエクスペリエンスを大幅に向上させると思います！これがお役に立てば幸いです。LeoCornelius-CorneliusイノベーションのCEO。
イヴァンの推薦は良いと思います。私のアイデアを追加したいと思います：
マップ全体の再読み込みはナンセンスです。コーディングを改善し、ブラウザのキャッシュにページをロードしたままにしてください。クエリ全体を再実行してサーバーからの応答を待つ必要はありません。これは単純な技術的改善です。
Airbnbマップのようなマップを使用したいと思います。最小限の情報が表示され、クリック/タップして詳細情報にリンクが横のタブに表示されます。
この側面のタブは常に開いたままにしておきます。私はそれがより明確に設計されていると思います。
右上隅にあるチャットメッセージポップアップを移動します。+ /-ボタンの上に表示され、迷惑です。
私にとって地図は非常に豪華ですが、あまり使い道がありません。非常に多くのPOIは、より深いレベルのズーム、上からのビュー（等角投影ではなく）、そして少し少ない色と詳細が必要です。私は建物をあまり変形的ではない方法で設計します。