0

Hello I have the following screen:

enter image description here

How can I indicate to users that they can click on each row of the table to open up another screen?

  • material the icon of an 'eye' at the end of each row (or even an arrow) so that it suggests you can see further information about each one. Also...you're 'Start Game' button looks a lot like the chart rows, I'd consider changing the styles to make the difference clear – Chris Apr 8 '15 at 14:51
3

Material Design has no flat rectangular buttons

The Material Design guidelines specify that rectangular colored need to be raised to prevent exactly the kind of confusion you are encountering. Otherwise it's not clear to the user that the button is an interactive element (can be pressed).

You can add a drop shadow to make the buttons raised and compliant with Material Design. This will also solve your affordance problem by making it clearer to the user that it's a button:

enter image description here

Also, the text in the buttons should really be centered, and unless there is some weird reason, the buttons should have the same width for consistency.

1

If you're using Material, then the answer is in Material itself. See http://www.google.com/design/spec/components/list-controls.html#list-controls-types-of-list-controls and specifically the "Expand/collapse" section.

Also, as we're using Material, remember to set a Primary color and an accent color, then build your palette by adding white or black to that color.

See below image taking your button color as primary color

enter image description here

Of course, this doesn't mean that you will need to use these colors. What it means is that if you want to use Material, then take a look at Material specs. They'll help you with a lot of aspects, since these concepts addresses a lot of design and usability issues and are tested by billions.

And the main part of these concepts: nothing is random in Material. Absolutely nothing (including your font sizes, padding, margins and so on)

1

Something as simple as a List might be your best option here.

You can do something similar to what @onofre-pouplana has mentioned above in which clicking on a list item will expand the list item to take over the whole screen. Obviously you would want to do some animation to make it look good and to give the user an understanding of what is happening.

Below is a look at what the list may look like, it's a very crude example but you will get the idea.

Example of list

  • And of course, if you don't want the separator, it is possible. Also, as the accepted answer says, rectangular colored need to be raised to prevent exactly the kind of confusion you are encountering. You also want to not use the exact same shade of blue for both as it is nicely demonstrated in this answer's screenshot. – LostBalloon Dec 1 '15 at 21:10
0

Treat each value as a floating panel. On click, expand a panel on a lower z-axis, with the related information.

use the standard navigation to back

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.