web-dev-qa-db-ja.com

モバイルデバイスでユーザーフレンドリーな屋内ナビゲーションマップはどのように見えるべきですか?

2014年、AppleはiOSデバイスに屋内ナビゲーションを導入するイニシアチブに着手しました。空港、病院、美術館などの主要な会場では近い将来、屋内ナビゲーションが提供される予定です。

これを念頭に置いて、多くの小さな会場は既存の資産を変換するタスクに直面します:

  • 間取り図
  • 避難計画
  • アーキテクチャマップ

屋内ナビゲーション用のユーザーフレンドリーなマップに。

「ユーザーフレンドリー」な屋内ナビゲーションマップがどのように見えるかについて、標準化された形式があるかどうかを尋ねています(そのベースとして何が使用されているかに関係なく)

私が直面している問題は、上記のような多くのドキュメントには、ナビゲーションに必要のない多くの追加情報が含まれていることです。特に、次の提案を探しています。

  • 地図に残すべき情報は?
  • 何を簡略化すべきか(部屋は一般的な領域に集約されています)
  • どのように色を選ぶべきですか?
  • そのようなマップから期待される対話性のレベル(タップ可能とは何ですか?)

例:避難計画には多くの追加情報があります。

enter image description here

屋内の会場マップは通常、マップの領域(衣料品、靴、デパートなど)を分割するために、細部が少なく、色が多用されていますか?

enter image description here

これは、現在屋内ナビゲーションに使用されている別の例です。

enter image description here

7
Alex Stone

電話は「スマート」デバイスであるため、静的な紙/デジタルマップを電話形式にマッピングするよりも優れたUXがあると思います。目標主導の観点からデザインに取り組みます。

  • 火災が発生した場合の避難計画には重要な情報がありますbutこの情報は単なる補助的なものです。 goalは、安全かつ迅速に建物から抜け出すためのものです。

  • ショッピングに行く場合は、同等の店舗(衣服など)を試すことをお勧めします。そのため、すべての衣料品店を通る効率的なルートが望ましい目標になる場合があります。

  • 一番近いトイレ[男性|女性]、お願い!

すべての目標が明確になったら、インタラクティブデザインから始めることができます。制約に応じて、さまざまなソリューションで目標を達成できます

簡単な実装の例は、切り替え可能なマップオーバーレイです。トイレが必要な場合は、性別を尋ねて(次回も忘れないでください)、「トイレ」オーバーレイを持ち込み、ユーザーと最も近い適切な性別トイレとの間の強調表示されたルートを自動ズームします。

重要なのは視覚的なデザインに関係なく「紙」のレプリカに基づくアプローチは、弱いUXだと思います。

1
Jason A.

すばらしい質問です。これは決して決定的な答えにはなりませんが、ここで、覚えておきたいいくつかの重要な点を示します。これからお話しする内容のいくつかは、次の2つの記事ですでに十分にカバーされています。

モバイルサイトとデスクトップサイトはどのように違うべきですか?

Your Content、Now Mobile


地図に残すべき情報はどれですか?

短い答え:すべてです。モバイルデバイスのユーザーは、非モバイルデバイスのユーザーと同じ情報にアクセスする必要があります(また、そうすることを期待することがよくあります)。

しかしながら...

長い答え:画面の「フル」バージョンが乱雑であるか、さもなければ小型のデバイスで使用できないことが判明する場合は、ユーザーが切り替えられる設定メニュー(多くの場合、右上隅にある歯車アイコンを介して)を提供することをお勧めしますオンまたはオフのさまざまなカテゴリの情報。これは、最後の例のレイヤーアイコンの機能に似ています(Googleマップ、と思います)。

どの建物でも、トイレと非常口はデフォルトで常にオンになっている必要があります。


何を簡略化する必要がありますか(部屋が一般的な領域に折りたたまれています)?

もう一度Googleマップの例を見ると、ここでの良いアプローチは、ユーザーが高ズームレベルのときに高レベルの詳細を表示することです(たとえば、モール内の主要なデパートの名前、またはマップ上の主要な都市と道路)。 、ただし、ユーザーがズームインすると、下位レベルの詳細情報が提供されます(たとえば、モール内の小さな店名、または地図上の小さな都市と道路)。

この解像度とズームレベルでユーザーは何をはっきりと見ることができますか?このアプローチでは、最も応答性の高い設計のように、さまざまな解像度またはズームレベルでブレークポイントを使用できます。ウェブページはそうします。また、「大きなテキスト」モードも提供できる場合(ラベルが占める余分なスペースを考慮して、わずかに異なるブレークポイントを使用)、視力が悪いユーザーにとって大きなメリットになります。


どのように色を選ぶべきですか?

モニターとモバイルデバイスの画面のカラーディスプレイに大きな違いがあることは知りません。通常の美学とUXデザインの要素は両方に適用されます。ただし、以下のリソースを使用して、色覚障害者があなたの地図をどのように見るかを考慮に入れることができます。 (もちろん、これはモバイルマップと非モバイルマップの両方に適用されます。)

画像ファイルでVischeckを試してください

Colorblind Webページフィルター


そのようなマップから期待される対話性のレベル(タップ可能とは何ですか?)

この動作の側面は、モバイルデバイスと非モバイルデバイスの両方で同じレベルの対話性を提供する必要があるという点で、上記の動作とある程度似ています。また、行う選択は、デバイスよりも一般的なUXアプローチに依存します。固有のガイドライン。

そうは言っても、過去に私にとってうまくいった「デスクトップからモバイル」への変換のヒントをいくつか紹介します。

  • デスクトップアプリで右クリックアクションがある場合は、モバイルデバイスで長押し(別名「押し続ける」)で同じアクションをトリガーします。
  • タップ可能な領域がタッチスクリーンを簡単に叩くのに十分な大きさであり、ユーザーが代わりに近くのタップ可能な領域を誤って叩かないように十分なサイズまたは間隔があることを確認してください。 (これが必要とする正確なサイズと間隔については、さまざまな矛盾するガイドラインがあります。さまざまなデバイスで手動でテストすると、特定のアプリに最適なサイズと間隔を特定するのに役立ちます。)
  • 必要に応じて、ダブルタップ(または2本の指をタッチして広げる)でズームインする必要があります。タップした場所を表示したままにしてください(たとえば、マップのエッジの近くでダブルタップした場合、ズームインするときに同じ中心点を維持しないでください。そうしないと、タップした場所が表示されなくなります)。
  • 該当する場合は、2本の指でつまんでズームアウトします。

Parting Note

巨人の肩の上に立つ!提供する必要のある機能と同様の機能を提供する優れた機能を備えたモバイルアプリをいくつか見つけ、そのアプローチをエミュレートします。より人気の高い組み込みのiPhoneアプリの多くとAndroidアプリは通常、フォローするのに適した例です。さらに、これらのアプリとあなたのアプリの類似点は、ユーザーがすでに知っているため、すぐにUXの勝利になります。ヘルプセクションを参照せずにアプリを操作する方法(そうですね、間違いなくそれらの1つも提供しているので、ユーザーはアプリが提供するすべての機能と、それぞれにアクセスする方法を簡単に見つけることができます)。

1
Troy Gizzi