7

In 2014, Apple has undertaken an initiative to bring indoor navigation to iOS devices. It is expected that major venues, like airports,hospitals and museums will have indoor navigation at some point in the near future.

With this in mind, many smaller venues will be faced with a task of converting their existing assets:

  • Floor plans
  • Fire escape plans
  • Architecture maps

Into a user-friendly maps for indoor navigation.

I'm asking if there is a standardized format of what a "User Friendly" indoor navigation map should look like? (regardless of what is used as a base for that)

The issue that I'm facing is that a lot of documents like ones above have a lot of extra information that is not needed for navigation. In particular, I'm looking for suggestions on:

  • Which information should be left on the map?
  • What should be simplified (rooms collapsed into general areas)
  • How should colors be picked?
  • What level of interactivity is expected from such map (what is tappable?)

An example: A fire escape plan has a lot of extra information:

enter image description here

While indoor venue maps typically have less detail and more use of colors to segment areas of the map (clothing, shoes, department stores, etc)?

enter image description here

Here's another example, which is currently used for indoor navigation:

enter image description here

Improve this question
1

2 Answers 2

Reset to default
1

As a phone is an "smart" device I would expect that there would be a better UX than mapping a static paper/digital map into phone format. I would approach design from a goal driven point of view e.g.

  • A fire escape plan has key information if there is fire, but this information is just ancillary. The goal is to get out of building safely and as quickly as possible.

  • If going shopping you may want to try comparable stores (e.g. clothes) so an efficient route through all clothes stores may be a desirable goal.

  • Closest toilet [male|female], please!

Once all the goals are mapped out, then can start with the interactive design. Depending on constraints goals can be met by a variety of solutions

Example of simple implementation is switch-able map overlays - e.g. If need toilet, ask gender (remember for next time), then bring in the "Toilets" overlay and auto-zoom in on highlighted route between user and closest appropriate gender loo.

Key note is that regardless of the visual design any approach based on a "paper" replica would IMHO be weak UX.

Improve this answer
1

Great question. This won't be a definitive answer by any means, but here are a few key things I would keep in mind. Note that some of what I'm about to say has already been covered very well in the following two articles:

How Should Your Mobile and Desktop Sites Differ?

Your Content, Now Mobile

Which information should be left on the map?

Short answer: All of it. Users of mobile devices should have (and will often expect to have) access to the same information as users of non-mobile devices.

However...

Long answer: If the "full" version of a screen would prove too cluttered or otherwise unusable on a smaller device, a good approach is to provide a settings menu (often via a gear icon in the upper right corner) which lets the user toggle various categories of information on or off. This is similar to the functionality of the layers icon in your last example (Google Maps, I believe).

For any building, bathrooms and emergency exits should always be on by default.

What should be simplified (rooms collapsed into general areas)?

Going with the Google Maps example again, a good approach here is to show high-level detail when the user is at a high zoom level (e.g., just the major department store names in a mall, or major cities & roads on a map), but then provide lower-level detail as the user zooms in (e.g., smaller store names in a mall, or smaller cities & roads on a map).

The rule of thumb here should be: What can the user clearly see at this resolution and zoom level? This approach could use breakpoints at various resolutions or zoom levels, much like most responsively designed web pages do. And if you can provide a "large text" mode too (with slightly different breakpoints to account for the extra room taken up by labels), that will be a huge benefit to users with bad eyesight.

How should colors be picked?

I'm not aware of any significant differences in color display between monitors and mobile device screens. The usual aesthetics and UX design factors apply to both. But you might want to take into account how color blind people might see your map, using the resources below. (This would of course apply to both mobile and non-mobile maps.)

Try Vischeck on Your Image Files

Colorblind Web Page Filter

What level of interactivity is expected from such map (what is tappable?)

To some extent, this behavior aspect is similar to the ones above in that the same level of interactivity should be provided on both mobile and non-mobile devices, and the design choices you make depend more on a solid UX approach in general than on device-specific guidelines.

That being said, here are a few "desktop-to-mobile" conversion tips that have worked well for me in the past:

  • If you have a right-click action on your desktop app, trigger the same action with a long-press (a.k.a. "touch and hold") on a mobile device.
  • Make sure that tappable areas are big enough to easily hit on a touchscreen, and sufficiently sized or spaced that the user doesn't accidentally hit a nearby tappable area instead. (There are various conflicting guidelines on what exact sizing and spacing this entails; manually testing with various devices will help you pinpoint which sizing and spacing works best for your particular app.)
  • Double-tapping (or touching and spreading two fingers) should zoom in, when applicable. Be sure to keep the tapped location visible (e.g, if they double-tap near the edge of the map, don't keep the same center point when you zoom in, or the place they tapped will no longer be visible.)
  • Pinching with two fingers should zoom out, when applicable.

Parting Note

Stand on the shoulders of giants! Find a few mobile apps that do a great job of providing functionality similar to what you need to provide, and then emulate their approach. Many of the more popular built-in iPhone apps and Android apps are usually great examples to follow. Plus, any similarities between those apps and yours will be an immediate UX win, because users will already know how to interact with your app without having to consult your help section. (Oh yeah, and definitely provide one of those too, so users can easily find out about all the features that your app provides, and how to access each of them.)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.