I want to keep the interface as clean as possible, but I want the user to know, that they can edit the exercise (eg. the list tiles with the not-so-dark background), where I then display the exercise in big, with options to delete and so on.

I don't want to color the exercise name blue and make it a button, also I have thought about putting in a little pencil icon on the far left, but this would take away from the aesthetic I think.

The solution probably has to with colering something in blue, but I am not sure what, does anybody have any ideas or input?

this is the interface

1 Answer 1


With so many restrictions – I don't want to do this, I don't want to do that –, it's difficult to find a satisfactory answer.

I think the low permissiveness margin only refrains from a minimum graphic resource. It's evident the only way, without using an external element such as an icon, is to try to "unstick" the areas of interactivity from the background. Personally, I would avoid the use of the color blue in the exercises. The brightness of the color would have the opposite effect, stalling the exercise in the background, the same effect as a dashboard with led lights alerts.

Tonal Value

In the first place, I think the gray chosen as the exercise's background is too similar to the app background and mimics it. The home screens of Adobe applications use squares with a remarkable tonal value difference and a considerable margin to recover old files, leaving no doubt that they are clickable elements:

enter image description here

Straight corners

With so subtle tonal difference, using rounded corners is a counterproductive factor. The rounded corners give the impression of a perforated window, submerging the figure behind the background. Rounded corners are usually a valid resource in well-differentiated elements, otherwise, it's an empty gimmick. On the contrary, the straight corners detach it, the paper on top of the table.

enter image description here


Sometimes margins are everything. If the idea is to keep the same color both in the background and in the exercises, an element is needed that differentiates and separates them into layers: spacing is the answer.

The image below, although it is an exaggeration, leaves no doubt about the possibility of interaction of the exercises without any extra change. In the real application, a minimum greater separation between each exercise and margin with the app border would provide a huge perceptual change.



Another possibility is framing each exercise, using the same gray color as the days (or darker), to stand it out from the background giving the feeling of a clickable area. Real example at di.fm interface.

enter image description here

  • 1
    thank you for the amazing answer. I will think about all of these things in depth. Thanks for taking the time and giving me these valuable insights! Commented Jun 5, 2022 at 17:42

Your Answer

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

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