I'm creating a flat-ish responsive website, which basically is an online résumé.
I'm displaying skills (but it could be whatever) in a grid system. Each skill is clickable, to display some information about it (level, etc.).
Here is a screenshot (from a mobile device view) of what I've made at this point. 
I know, as the conceptor of the design, that it is clickable. However, I feel like it is not obvious - or not enough at least - for any random user.
On a computer browser, it is easy to have visual change on hover, but on tablet / mobile, I can't figure out how to do.
Does anyone has a visual trick to basically say hey, click on me? I think I could add a little pointer in the corner of each tile but I'm not sure it would look good.
UPDATE
According to some suggestions, I have changed icons to be more relevant. Thus, I can delete the label.
I also lighten a bit the background-color of buttons, in order to accentuate the constrat between the two shades of blue.
Answer
The problem with your buttons is that they are not raised above the background, so they don't seem clickable.
I highly recommend the Material Design for details on how to choose between flat buttons and raised buttons, with exhaustive do's and don'ts. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons
No comments:
Post a Comment