マップビューで複数のアイテムを選択するためのベストプラクティス

Question

1つ以上の項目を選択できるはずのアプリ（タッチ入力）に取り組んでいます。グーグルマップについて考えてみましょう。「レストラン」を検索すると、地図にいくつかのレストランが表示されます。ここで、そのうち3つを選択します。

今私は考えています

• 押すと1つのアイテムが表示されます
• 押し続けて>ユーザーにフィードバックを提供>を押して複数のアイテムを選択> CTAでアイテムを表示.

これは理想的な解決策ではないので、最初の使用時にユーザーにこのやり取りを説明する必要があります。

誰かがもっとユーザーフレンドリーで直感的な別のアイデアや提案を持っているかどうか疑問に思っていますか？

Answer 1

相互作用パターンを複雑にしないでください。覚えやすく使いやすい既存の一般的なパターンを使用してください。

可能な解決策（以下の配線）

1. 画像はいくつかのピンを示しています-特別なものはありません
2. ユーザーがピンをタップ-サイドパネルがスライドして、選択した場所の情報が表示されます
3. ユーザーが他のピンをタップ-選択した場所がサイドパネルに追加されます

注：ユーザーはピンを「タップ」して選択できます。2番目の「タップ」で選択を解除できます。

ユーザーが1つまたは複数の場所を選択した後に必要なCTAの種類がわからない場合、および大量のCTAが必要な場合は、これがあなたがやろうとしていることに近づくことを願っています。

Answer 2

地図のピンは場所を示します。ユーザーが「はい、この場所に興味がある」と判断するために、その場所が何であるかについての情報は提供されません。

このようなものは理にかなっているかもしれません

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

ユーザーがピンをクリックまたはタップすると、場所に関する詳細と場所を選択または選択解除するためのトグルボタンを含むポップオーバーが表示されます。

また、ユーザーが選択した場所の数と簡単に選択できるオプションを確認できるように、ショッピングカートの保持領域のように機能する領域（地図の隣の右側の列など）を用意することもお勧めします。それらの選択を解除します。

Answer 3

おそらく、ピンをチェックボックスと組み合わせて、ピンに2つの明確に区別可能な状態を与えることができます（チェック済み、チェックなし、そしておそらく色でも区別できます。画像を参照）。これにより、ユーザーは1つのビューでさまざまな場所/アイテムを選択できます。選択したアイテムで何ができるかは明らかであり、ユーザーが選択したアイテムを表示できるボタンが画面のどこかにあると思います。また、選択したアイテムの数をボタンのラベルに配置します（Webショップのバスケットのようなものです）。