Faites comprendre aux gens qu'ils peuvent cliquer sur un bouton dans un design plat
Je crée un site Web réactif plat - ish , qui est essentiellement un curriculum vitae en ligne.
J'affiche des compétences (mais cela peut être n'importe quoi) dans un système de grille. Chaque compétence est cliquable, pour afficher des informations à son sujet (niveau, etc.).
Voici une capture d'écran (à partir d'une vue de l'appareil mobile) de ce que j'ai fait à ce stade. 
Je sais, en tant que concepteur du design, qu'il est cliquable. Cependant, je pense que ce n'est pas évident - ou pas assez au moins - pour tout utilisateur aléatoire.
Sur un navigateur d'ordinateur, il est facile d'avoir un changement visuel en vol stationnaire, mais sur tablette/mobile, je ne sais pas comment faire.
Quelqu'un at-il une astuce visuelle pour dire essentiellement hé, cliquez sur moi ? Je pense que je pourrais ajouter un petit pointeur dans le coin de chaque tuile, mais je ne suis pas sûr que cela aurait l'air bien.
MISE À JOUR
Selon certaines suggestions, j'ai changé d'icônes pour être plus pertinent. Ainsi, je peux supprimer l'étiquette.
J'éclaircis également un peu la couleur de fond des boutons, afin d'accentuer la constrat entre les deux nuances de bleu.
Le problème avec vos boutons est qu'ils ne sont pas surélevés au-dessus de l'arrière-plan, donc ils ne semblent pas cliquables.
Je recommande fortement la conception matérielle pour plus de détails sur la façon de choisir entre les boutons plats et les boutons en relief, avec des choses à faire et à ne pas faire. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons
Le problème est que pas assez plat
S'agit-il d'icônes ou de boutons? C'est un problème commun avec la conception plate (voir les autres réponses) mais une solution possible que je n'ai pas encore vue ici est de supprimer l'information jusqu'à ce que la seule option viable soit de cliquer. Pensez tuiles .
... Et à ce stade, il devrait également devenir évident que </> n'a jamais été une icône appropriée.
j'ai pensé à quelque chose comme montrer la première compétence et laisser l'utilisateur le découvrir lui-même, que les autres sont également cliquables/enregistrables
(désolé, je n'ai pas beaucoup de temps pour le faire, mais cela peut aider)
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Que diriez-vous d'utiliser un repère visuel auquel les utilisateurs sont le plus souvent habitués: un soulignement? Voici un exemple avec un soulignement plein et un tiret.
Sur un appareil mobile, la tendance actuelle du design l'utilise. Les utilisateurs se sont familiarisés avec la méthode tactile pour explorer plus en détail sans avoir à être explicitement invité à le faire.
De plus, un "pointeur" sur un appareil mobile est redondant car il n'y a jamais d'autre appareil d'entrée que vos doigts.
Gardez la simplicité et l'élégance de votre design. La seule suggestion serait peut-être d'augmenter le contraste entre les deux nuances de bleu.
la conception des matériaux est bonne mais ils ne sont pas parfaitement plats. Je vous le recommande, mon bouton plat idéal 
p/s: si vous voulez que les gens considèrent que quelque chose est un bouton, vous devez leur fournir "label" et "icône" .Avec ces deux éléments, la plupart des utilisateurs sauront "ah, il y a un bouton, cliquons"
Quelques suggestions:
1. Faire en sorte que l'étiquette fasse visuellement partie du bouton
- Les étiquettes font généralement partie d'un bouton
2. Ajouter une bordure claire (facultatif)
- Faits saillants sans nécessairement ajouter de profondeur
3. Regroupez les boutons confortablement
- Faites-vous sentir comme un groupe de boutons, chacun d'égale importance
4. Utilisez un poids de police plus audacieux
- Les icônes sont assez grosses et l'imo ne s'équilibre pas bien avec une police légère
Exemples de boutons non pressés/pressés:
Je suis d'accord avec Long et DesignerAnalyst qu'un peu de style les fait apparaître plus comme des boutons.
Bien que j'aime les icônes dans votre version modifiée, je suggère d'ajouter le texte sous l'icône, pour ceux qui ne savent pas ce que signifie l'icône.
Les icônes sont géniales quand leur signification est évidente, mais je programme en JQuery et Javascript tous les jours, et je n'ai pas reconnu automatiquement les icônes.
Vous pouvez également donner un indice textuel
Vous pouvez remplacer "plus d'informations" par quelque chose de plus spécifique
Il y a beaucoup de réponses, mais je ne pense pas que l'une d'entre elles soit encore au cœur du design plat. Le problème du design plat n'est pas de faire ressembler les choses à un bouton. L'idée est que la métaphore du bouton 3D devient démodée. Je pense qu'il y a beaucoup d'enfants qui naissent maintenant, qui appuieront sur un bouton virtuel sur un écran tactile avant d'appuyer sur un véritable bouton tangible.
Les métaphores sont visuellement bruyantes. Le défi du design plat est de se débarrasser des métaphores, tout en gardant le design utilisable.
Donc, si vous voulez créer une expérience de design plat appropriée et moderne, vous devez vous assurer que vos cliquables semblent cliquables, sans les faire ressembler à des boutons. La règle/convention principale est que les éléments cliquables doivent exiger le plus d'attention. Nous avons les outils suivants pour y parvenir:
- Utiliser le contraste Votre arrière-plan présente désormais un contraste plus important avec le blanc du bouton que la couleur du bouton. C'est la raison principale pour laquelle votre design ne semble pas cliquable. Changez l'arrière-plan et les couleurs des boutons.
- Utilisez des couleurs primaires vives : voir ci-dessus.
- Utiliser un espace blanc : assurez-vous de conserver suffisamment d'espace blanc autour des icônes de bouton. Plus les marges sont grandes, plus l'élément reçoit l'attention. Surtout si ces marges sont remplies d'une couleur vive, cela contraste bien avec les éléments à l'intérieur.
- Utilisez du texte en gras : Le texte blanc sur un fond sombre doit de toute façon être en gras, mais sur un bouton, cela double.
- Mettez le texte à l'intérieur du bouton : la case colorée doit encapsuler tout ce qui concerne cette option de clic. Placez le texte en dessous et vous demandez à l'utilisateur de mapper le texte sur le bouton.
- Coins plus ronds : Certains puristes du design plat (BBC, Microsoft) opteront pour les coins durs, mais si vous n'êtes pas prêt à aller jusqu'au bout, le le coin arrondi est une convention très forte pour la cliquabilité.
Voici ma refonte:
Vous pouvez noter qu'il ne semble toujours pas aussi cliquable. Pourquoi pas? Je pense que c'est parce que six boutons ne sont pas une manière très conventionnelle de représenter une liste de compétences. L'utilisateur n'a tout simplement pas d'endroit clair où aller à ce stade. En fait, il est assez rare d'avoir six boutons côte à côte. Habituellement, lorsque vous créez ce type de bouton, c'est l'élément le plus important de la page. Je pense que c'est pourquoi votre design ressemble à une liste d'icônes.
Pour vraiment aller au cœur du problème, vous pourriez envisager de revoir votre conception globale. Déterminez ce que l'utilisateur veut faire à ce stade. Peut-être que quelque chose comme navigation basée sur le conten peut vous aider.
Le concept de conception matérielle peut probablement vous aider.
Son principe de mise en page par action prioritaire dont le comportement principal est d'avoir une ombre entre les mises en page pour montrer à l'utilisateur ce qui est au-dessus de ce qui aide à différencier l'objet et à ajouter des moyens
http://www.google.com/design/spec/material-design/introduction.html
Donc, ajoutez une petite ombre à la création de votre bouton est interactive en cachant l'ombre sur l'action de la presse. Ajoutez une réponse de survol si l'ordinateur est affiché et vous aiderez davantage vos utilisateurs.
Keep 'Em Simple, Smarty
K.E.S.S.
En tant que développeur, vous préparez le terrain; mais l'utilisateur est le véritable interprète. Deux ensembles de compétences différents. Ils se complètent et s'harmonisent.
Votre application aura un ensemble d'attentes ~> comme un curriculum vitae en ligne exige implicitement ce genre d'interaction. En cliquant, et autres. Votre utilisateur comprendra ce que vous voulez comme typique.
Voici mes commentaires supplémentaires à votre question:
- Gardez des étiquettes explicites avec vos icônes de bouton.
- Faites grandir les boutons survolés. Cela vérifiera ce que l'utilisateur a intuitivement déduit.
Bonne chance!
Une option que j'ai vue utilisée (en fonction de la taille de ces icônes) est une petite image d'une souris (essentiellement un ovale étendu verticalement avec une division en haut pour les deux boutons) dans chaque icône d'image.
Votre première image ressemble à une galerie: chaque icône a une étiquette (et il n'est pas clair que les images soient cliquables)
Vous pouvez simplement essayer de déplacer les étiquettes à l'intérieur des boutons (même avec votre premier ensemble d'icônes, cela devrait suffire). De cette façon, il devrait ressembler davantage à un bouton.
Après relecture, il semble appartenir aux propositions @Dom