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?

Improve this question
1
  • 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, 2015 at 14:51

4 Answers 4

Reset to default
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.

Improve this answer
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)

Improve this answer
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

Improve this answer
1
  • 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, 2015 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

Improve this answer

Your Answer

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

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