Skip to main content
User Experience

Return to Answer

added 108 characters in body
Source Link
Volker Siegel
Volker Siegel
  • 526
  • 1
  • 6
  • 16

What is missing is the visual separation of the UI elements.

You need to separate them, and for that, changing opacity does not help much in this case.

I would try t add wider borders between main image and thumbs - to indicate that separation, and another, even wider border around the current thumbnail, indicating that it is currently "separated out" in the row,

,I think reducing opacity of the selected thumb makes no sense - it's not somehow hidden, it's the most important! (And possibly used as overview). I would keep the opacity of the other thumbs at 100% too, but make them darker, like somewhat in a shadow, while still visible.

For the separating borders, I would try dark grays - maybe the wider thumb border darker than the other.

What is missing is the visual separation of the UI elements.

You need to separate them, and for that, changing opacity does not help much in this case.

I would try t add wider borders between main image and thumbs - to indicate that separation, and another, even wider border around the current thumbnail, indicating that it is currently "separated out" in the row,

,I think reducing opacity of the selected thumb makes no sense - it's not somehow hidden, it's the most important! (And possibly used as overview). I would keep the opacity of the other thumbs at 100% too, but make them darker, like somewhat in a shadow, while still visible.

What is missing is the visual separation of the UI elements.

You need to separate them, and for that, changing opacity does not help much in this case.

I would try t add wider borders between main image and thumbs - to indicate that separation, and another, even wider border around the current thumbnail, indicating that it is currently "separated out" in the row,

,I think reducing opacity of the selected thumb makes no sense - it's not somehow hidden, it's the most important! (And possibly used as overview). I would keep the opacity of the other thumbs at 100% too, but make them darker, like somewhat in a shadow, while still visible.

For the separating borders, I would try dark grays - maybe the wider thumb border darker than the other.

Source Link
Volker Siegel
Volker Siegel
  • 526
  • 1
  • 6
  • 16

What is missing is the visual separation of the UI elements.

You need to separate them, and for that, changing opacity does not help much in this case.

I would try t add wider borders between main image and thumbs - to indicate that separation, and another, even wider border around the current thumbnail, indicating that it is currently "separated out" in the row,

,I think reducing opacity of the selected thumb makes no sense - it's not somehow hidden, it's the most important! (And possibly used as overview). I would keep the opacity of the other thumbs at 100% too, but make them darker, like somewhat in a shadow, while still visible.