If a user clicks on a marker a form will be opened (assuming it's available). Now we would like to improve the whole feature and add a view to display a summary when tapping on such a marker.
At firs we would like to display some basic values like:
the instance name
the current instance status
the last status change time
We made an initial research and decided that using Material Bottom Sheet is what we need.
It would look like:
I think this is going to be really valuable, thanks for getting a sketch out!
I like the bottom sheet a lot. I don't think that the round "flair" on the right is obviously a tappable action, though. In the examples on the material design site, that kind of visual element is used to provide a cue but not to make an action available.
I would expect the action (e.g. edit or view) to be right below the instance name. I see two good options:
using text buttons with icons similar to the call/website/save buttons from the material design site example. I think that if there's only one action, having it centered would look ok.
using contained buttons like I see in the current Google Maps app for Android:
Are you referencing the Floating Action Button (docs here) with the edit (pencil) icon? They're generally meant to represent the screen's "primary action" so it does make sense to me here.
There's an example here of using a bottom sheet on map. Here the FAB is used as a the "navigate" action:
I agree. It's not a must we can also use buttons like from the screenshot @LN attached but I think those are rather used if you need a few of them, if there is just one FAB is better.
Interesting, I did not interpret that as a tappable FAB, I really thought it was just informational. In our case, do you think that all the actions would be obviously tappable? For example, the view action would just be an eye, probably, and that might look even more like decoration rather than being actionable.
If the screen is wide, the action is far away from the instance info. I think that for actions, proximity to summary information and ease of tappability are important and that's likely why for their own Maps interface, Google puts the directions button on the bottom left of the screen.
@Grzesiek2010, since you've been playing around with this interface, maybe you can share a draft PR so we can try it out.
To me yeah they would but I'm an Android user and I spend a lot of time looking at Material docs haha. Not sure what you mean by "all the actions" here though? We only have the edit action for these instances right?
Oh and worth pointing out that Google are using a Card for locations in Maps rather than a bottom sheet. This is probably because they need it to expand to show more info. I could definitely see this working as an alternative. The problem with Maps is it often ignores or muddles Material Design. They have multiple contained button styles and some of them look exactly like pills! In this case though what we're doing is a pretty similar experience to Google Maps so using it as a reference feels safer.
I've played around with the draft PR and I'm still not a big fan of the FAB. Even on a Galaxy Tab A it's pretty far from the information the bottom sheet provides. I accidentally opened it where the FAB was on top of ocean and so the top half of it virtually disappeared. I think the edit isn't so bad but the view icon would be hard to identify (sent instances can be viewed but not edited).
My preference is for a contained button. I'd go for the style that looks matches Google Maps and looks like a pill but it's not a big deal to me as long as it's right underneath the other info about the instance.
Seeing the Google image results you link to, it does look like that FAB was the old Google Maps behavior. I would prefer to match the current Google Maps behavior. I suspect it was changed for discoverability and accessibility reasons.
See the "Directions" contained button below:
As @seadowg has noted previously, it is styled as a chip. Styling it as a contained button with more square corners would work for me as well. The important thing is that the action is at the left directly below summary text.
What may not be immediately obvious from the mockups shared so far is that the text shown at the top of the bottom sheet is the instance name. For example, if you are visiting different households and filling out one form per household, you can make the instance name something like concat(${head_of_household_name}, ": ", ${adults}, " adults, ", ${kids}, " kids"). This will allow you to see the head of household name and person count for each household you tap on. More documentation coming soon.
