Dois-je coiffer mes boutons?
Y a-t-il des avantages/inconvénients majeurs à styliser ses boutons comme Facebook, Twitter et StackExchange - par rapport à ne pas les styliser comme Craigslist et 4chan?
Boutons de stylisation
Avantages:
- Les boutons sont plus cohérents avec les autres parties de votre conception (à condition que votre interface utilisateur ait du style)
- L'aspect général est amélioré (à condition que vos boutons ne soient pas stupides)
- Les boutons peuvent avoir plus de sens (exprimer différents contextes)
- Les utilisateurs sont très habitués aux boutons de style, car la plupart des principaux sites Web les utilisent: google, facebook ect. Donc ce n'est pas une expérience époustouflante
- Consistance et notoriété de la marque
- Tu ressembles à un pro.
Désavantages:
- Plus d'efforts de votre part pour avoir une interface utilisateur complète, où la version sans style est complète dès la sortie de la boîte. (Compatibilité mobile ect.)
- Si vous êtes un mauvais concepteur, vos boutons peuvent ne pas être aussi reconnaissables que souhaité.
- Les boutons de style ont une surcharge en code et en graphiques.
- Vos boutons de style ne correspondent pas au système d'exploitation de cet utilisateur, ce qui peut être inquiétant pour les hommes des cavernes.
Au-delà du travail, la conception de la conception et des préoccupations professionnelles concerne le véritable motif UX pour vous coiffer.
Les boutons sans style se ressemblent tous. En stylisant vos boutons, vous pouvez fournir à l'utilisateur plus d'informations sur ce bouton et ce qu'il fait.
Considérez par exemple les boutons qui font partie du bootstrap Twitter: http://Twitter.github.com/bootstrap/base-css.html#buttons
Ils suggèrent d'utiliser la couleur des boutons pour indiquer des choses comme:
- Gris: Action standard
- Bleu: Action avec poids ou importance
- Vert: réussite ou action positive
- Jaune: une action à prendre avec prudence
- Rouge: une action dangereuse ou potentiellement négative
Choses à considérer pour styliser vos boutons:
- Couleur
- Taille
- Forme
- Icône ou texte ou les deux?
- Une ligne de texte ou deux? Lignes de texte de différentes tailles?
Chaque aspect doit être délibéré et apporter une valeur à l'utilisateur.
Le problème avec les boutons personnalisés est qu'ils risquent de ne pas être reconnus s'ils cassent les styles et métaphores clés. En particulier, les boutons qui ne sont pas rectangulaires et ne fournissent pas d'états de survol peuvent être perçus comme non interactifs.
Sinon, les boutons personnalisés sont un bon moyen de donner à une interface une image de marque forte et un sens du poli. Des boutons dépourvus de style (ou plutôt de style OS) qui ne se réconcilient pas avec leur environnement peuvent donner une interface utilisateur inachevée ou bâclée, ce qui est une mauvaise impression à donner si vous demandez aux gens d'acheter un produit ou de vous donner de l'argent d'une manière ou d'une autre.
Un bouton doit ressembler à un bouton, mais au-delà de cela, l'important est que le style des boutons (et de tous les éléments vraiment) corresponde au style de la page/du site dans son ensemble. C'est le domaine du design visuel ou du design graphique et implique la théorie des couleurs, la typographie, les principes de contraste, la répétition, etc.
Craigslist.org est très utilitaire et sans fioritures. Quelqu'un ou un groupe de personnes a décidé qu'il s'agissait d'un style de conception approprié pour le site, qu'un design plus élaboré, coloré, fantaisiste ou stylisé ne conviendrait pas au site, ou peut-être que les ressources nécessaires pour ce type d'élaboration visuelle étaient mieux dépensées. autre part.
Comparez cela avec Apple.com, où il est très important de fournir une expérience moderne, minimale, hautement polie, stylistique mais conviviale et utilisable.
Ces langages visuels sont, à certains égards, tout aussi importants que le contenu d'un site, car ils en touchent un immédiatement avant la consommation du contenu textuel.
Le style des boutons est donc déterminé par le style de la page/du site, qui doit être cohérent, bien pensé et aligné avec le but du site.
Il n'y a pas de bouton sans style. Vous pouvez utiliser le style de bouton de navigateur par défaut, mais vos utilisateurs passeront la plupart de leur temps sur d'autres sites (lire: concurrents), et le style que vous utilisez est un élément clé pour attirer et garder les utilisateurs. Il y a BEAUCOUP de bons exemples.
Je suppose que lorsque vous dites sans style, vous voulez dire les boutons par défaut utilisés par votre navigateur.
Les boutons sans style sont généralement faciles à reconnaître en raison de leur familiarité avec la plupart des utilisateurs. Cependant, il semble très peu professionnel et laisse votre site inachevé.
Les boutons stylisés, d'autre part, suivraient très probablement la marque de l'endroit où ils sont utilisés. En conséquence, cela peut être mal fait ou avec beaucoup de succès selon les circonstances.
Je suis personnellement fan de l'interface utilisateur des boutons de Google. Je le trouve très propre avec les couleurs mates, mais a un léger état de vol stationnaire dégradé. Il suit parfaitement leur marque mais conserve toujours leur reconnaissance en tant que boutons.
Cela dépend de l'habileté et de l'imagination du concepteur. Un bouton bien conçu avec une apparence distincte du reste de la page serait plus facile à localiser une fois votre formulaire rempli, par exemple consultez le bouton de connexion de Google sur sa page de connexion, tandis qu'un bouton mal conçu serait mélangé par exemple, voir le bouton "Publiez votre réponse" de ce site au bas de cette page. Essayez d'avoir un seul thème pour eux et s'il y a un besoin de différents styles de boutons sur la même page, un peu de re-design est en ordre (encore une fois, regardez cette page uniquement 'Publiez votre réponse' en bas et ' Poser une question 'en haut).