4

In an app I'm designing there is a list that must also be displayed as a map.

In this thread people already discussed the issue of whether or not display that kind of content as tabs: Choosing between Tabs and ActionBar spinner

As the app follows the Material Design style guidelines, is there any alternative to the old spinner?

Also there are other issues if tabs are used (which is likely)

In all the app when you scroll down in a listview the appbar goes up and disappears, leaving only the status bar, leaving more room for content.

If this is done on the tablist then how it would behave the appbar on the map?

If the user scrolls down (and the appbar dissapears) and then swipes to the map, the appbar can't be hidden because it will broke the navigation (the user can't scroll to show the appbar because the scroll is to move the map).

If the user returns to the tablist the appbar must be still hidden?

enter image description here

Improve this question

2 Answers 2

Reset to default
2

You can use a sliding layout to slide the list over the map.

List

List

List - anchored, with map

List - anchored with map

Map with list collapsed

Map with list collapsed

User can slide the list using the list header which can display list summary.

Pros:

  • Action bar can be used for other purposes
  • Both map and list can be view at the same time

Cons:

  • May clutter small screens
  • Both map and list can be view at the same time
Improve this answer
2
  • I think it's a good aproach, because as you say the Action bar / tool bar can be used for other things. It's more intuitive that way of changing between list and map. On the other hand it's bad for a small screen, because the user loses too many vertical space to display that label. The "both at the same time" option is a NO for me, too many issues when scrolling for a user.
    – Adria Perez Pla
    Commented Jan 25, 2016 at 18:10
  • 1
    @AdriaPerezPla Try this library out: github.com/umano/AndroidSlidingUpPanel. You can play around with the various options to find the optimal UX.
    – iceman
    Commented Jan 27, 2016 at 11:13
4

Yes there are alternatives

Since you only have two views, a common approach that is also applicable to Material Design is to provide a toggle icon or word (map or list) in the topbar.

This avoids the need to take up valuable real estate with a tab control, and may help you avoid the awkward scrolling design by enabling a fixed topbar.

This approach is used by large-scale applications where search results can be listed or plotted on a map including Yelp, TripAdvisor and Hotels.com (some of these apps place the button in a bottombar rather than top bar, for easier thumb access on mobile devices)

Here is an example which uses a top-right icon to switch between the views:

enter image description here

You will need to choose an appropriate icon for the list-view to ensure it isn't confused with the hamburger icon.

Improve this answer
6
  • I would either use a "switch" instead of a single toggle button, or use a single icon that can be pressed or unpressed. Having an icon change to a completely different icon right under your finger is a bit jarring.
    – Vitaly Mijiritsky
    Commented May 13, 2015 at 17:41
  • @VitalyMijiritsky good suggestion. It's a subjective thing but given that the window body does a major refresh (map -> list) when the icon is tapped, I think it's OK to have it change because the user will perceive this as a new page context. But a toggle may work well too. Given that yelp does extensive user testing I would guess that they got positive results on this interaction.
    – tohster
    Commented May 13, 2015 at 17:45
  • I've never been a big fan of the "if company UX does it then it must be right" approach. Because we can't really know their considerations, tradeoffs and limitations, and because tomorrow they might roll out something entirely different.
    – Vitaly Mijiritsky
    Commented May 13, 2015 at 17:56
  • @VitalyMijiritsky Absolutely :-) That said, most UX teams are under-resourced to do studies so the question is whether the information contained in company X's usage is positive relative to not using such information at all. This is verging on information theory that's outside of traditional UX, but it's a good topic to ponder.
    – tohster
    Commented May 13, 2015 at 18:24
  • 1
    Getting back to the original discussion, those two screens share the same content, and if I'm not mistaken that bar is an "Action" Bar, so the action would be "change the way the info is shown" ? I have not a better solution, but I'm not quite convinced.
    – Eloi Navarro
    Commented May 13, 2015 at 19:21

Your Answer

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

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