12

I've been getting into Material design lately, and I really liked one of the material concepts, and thats to think of the UI in X,Y,Z axis. But noticed a discrepancy with what might be extremely trivial but its confusing me right now.

According to Google's own Material Design docs, there's a sense of elevation on how things are arranged on the screen and its relation to other screens here

enter image description here

But for some reason on Google Maps, when you type to search for something like "KFC", the search results list is clearly above the interface yet it's treated as if its on the same plane with the back button instead of an "X".

Google Maps Search Results List

Can someone explain why they might have done that? or if its an oversight?

  • 1
    Can't post more than 2 links so posting here. This video also explains the planes and axis concept. google.com/design/spec/patterns/… – Ether Aug 11 '15 at 8:00
  • 3
    the methodology about going "back" to another search a user might want to perform is RIGHT since you arent "closing" your results because redoing the search that will be there on the left will get you back there. so the arrow methodology works. about the design? not sure. i think thats an oversight because it really should have been over the other elements in my opinion. but im not very knowing of the material design language - so i might be wrong about that – downrep_nation Aug 11 '15 at 9:31
5

It seems like you're asking two things:

  1. Why was the ← used instead of ×?
  2. Why is this search bar z-indexed above the other content?

RE: Question 1

In Material Design, × represents "clear" in text fields, and "close" elsewhere. If the header maintains the search functionality (as indicated by the 🔍), then you can't have 2 × to mean two different things.

RE: Question 2

See the following screens:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In the app, observe the motion when the bar comes in for that final state. The top search bar is z-indexed above everything. The list of results is z-indexed above the map.

Hope that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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