4

An example... Material design example

Huh? How can there be stats for Republicans voting for the two Democrats?

I see this in most all flat icon design. It takes me a few seconds of comparing the different elements to figure out this is actually a two-tab widget and not a two-column table.

The old rounded corners on the tabs would have made it instantly clear that they are tabs and thus clickable. The user would immediately understand that the Republicans box is out of context.

What is the correct way to make it immediately obvious what is click/tap-able and what is just graphics?

I'm looking for practices that can be applied to all designs, not a fix for this particular example.

  • This is not Material Design. And if it is, it's not using its guidelines – Devin May 18 '16 at 14:52
1

I don't think it is fair to call this tab system Material Design, this is just an example of flat design. You can see in this style guide that Material Design tab systems are set up a bit differently: Material Design Tabs

In fact if you use the tab system showed in the Material Design docs it would probably give you that visual distinction you're seeking. By giving the nav a separate color from the content it gives it a logical hierarchy from the content so that you cannot confuse the two. By making the only distinction between active and inactive tabs be an underline of contrasting color it leaves it unambiguous as to which is selected.

With your example it would look something like this:

enter image description here

  • Perfect. Also, numbers would be aligned to right in Material tables – Devin May 18 '16 at 14:53
  • @Devin true! I didn't bother with chart I just copied it from OP, but I'm sure a couple things could be improved such as right aligned numbers as you mentioned as well as left aligned text. – DasBeasto May 18 '16 at 14:58
  • Either way, i think this is the right answer, comment was more directed to teh OP so he can see his example is not Material (while your approach is Material for sure) – Devin May 18 '16 at 16:25
0

Your title is 'how to fix material design?' and in the text your question is 'how to make it obvious what is clickable?'.

To make it obvious what is clickable, use well known UX patterns, and your user will know what to do with them. You answered this question yourself when you said that rounded cornered tabs would be instantly clear.

As for 'how to fix material design'. Well material design is a balance between user experience and graphic design, and in the example you gave, perhaps it needs to sacrifice some graphic design and make the tabbed box look a bit more like a tabbed box. I'm sure there are some attractive ways of doing this, but that's more of a graphic design question than a UX one.

Perhaps something like these might be more recognisable as tabs:

enter image description here enter image description here

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.