Qu'est-ce qui explique le passage actuel des interfaces utilisateur brillantes aux interfaces utilisateur mates?
J'ai remarqué un phénomène intéressant dans les interfaces utilisateur de nombreuses applications célèbres, elles s'éloignent du complexe brillant pour une conception minimale plus terne et nue.
Pourquoi ce changement soudain? Il semble également que la plupart de ces entreprises ont adopté ce modèle à la même époque, était-ce lié à une nouvelle étude?
Exemples:
Dommage que personne n'ait mentionné l'impact de l'interface "Aqua" de Mac OS X sur tout cela.
Aqua était le nom Apple a donné au style d'interface utilisateur qu'il a introduit dans Mac OS X. Il a changé le logiciel du Mac de ressembler à ceci:
… À ressembler à ceci:
Voici Steve Jobs qui le présente pour la première fois au MacWorld San Francisco 20 . Comme il le dit:
L'un des objectifs de conception était lorsque vous l'avez vu, vous vouliez le lécher.
Il ne fait aucun doute qu'une énorme influence sur l'aspect et la convivialité d'Aqua avec tous ses boutons et rayures lissables et sa translucidité a été l'énorme popularité de l'iMac:
Aqua était un énorme changement dans les interfaces utilisateur; ils sont passés du fait d'être principalement dessinés par l'OS à être définis principalement comme des couches et des couches de graphiques bitmap (ou même vectoriels). Windows XP a suivi cette même idée en 2001; son interface utilisateur Luna ressemblait à ceci:
Lors de sa sortie, Aqua a fait une éclaboussure similaire à celle de l'iMac lors de sa première sortie. Il semblait que pour les 5 prochaines années, chaque élément de concepteurs tiers avait un brillant inutile:
Mais malgré la popularité de l'esthétique en plastique de couleur translucide et brillante, Apple est devenu de plus en plus restreint avec ses conceptions matérielles au fil du temps:
La marche incessante de la conception des matériaux, de la simplification et du style dans le matériel a eu un effet similaire sur le logiciel: la transparence a été réduite, la visibilité des rayures s'estompe jusqu'à ce qu'elles disparaissent complètement, l'introduction d'interfaces en métal brossé, jusqu'à quelque chose de pas particulièrement différent. à l'ancienne interface à dominante grise de MacOS 9:
Ce changement n'est pas spécifique ou unique au Mac; cela s'est produit dans toute l'industrie.
En attendant, cependant, iOS a été publié (alors appelé iPhone OS), qui ressemblait à ceci:
Et comme vous le savez presque certainement maintenant, l'iPhone et iOS lui-même ont connu un succès massif. De nombreuses applications (y compris Skype) ont été publiées avec des superpositions d'icônes brillantes pour sembler appropriées à côté de ces icônes.
Mais, comme Mac OS X est passé d'une apparence passionnante et rafraîchissante à une horrible sensation visuelle au fil des ans, cette capture d'écran de l'interface iPhone OS originale a maintenant 6 ans, et elle ressemble maintenant à ceci:
… Comme vous pouvez sans aucun doute le constater, il y a eu une progression extrêmement lente et inhabituelle des progrès en ce qui concerne l'apparence de l'offre mobile d'Apple.
Le vieil adage va quelque chose comme:
Si vous ne vous améliorez pas, vous reculez
Et donc en restant plus ou moins les mêmes, deux des principaux concurrents de Apple dans cet espace (Google avec Android et Microsoft avec Windows Phone) ont saisi l'occasion de faire quelque chose de radicalement différent et de faire progresser l'état de l'art eux-mêmes, en les laissant ressembler à ceci:
Mises à jour: Je pensais juste ajouter un peu plus de commentaires sur le Android "Holo" et Metro visual langues, et comment les deux fabricants décrivent l'esthétique plus plate et moins brillante aux concepteurs:
Quand ils ont annoncé pour la première fois le langage de conception Metro (ou comme ils l'appellent maintenant, le "langage de conception Microsoft"), Microsoft a fait quelques touches à peine voilées sur l'esthétique iOS d'Apple. L'une des principales affirmations qu'ils continuent de faire est que le style de conception plus plat et plus typographique de Metro est plus "honnête" et "authentiquement numérique". Sur leur page Web sur les principes de conception de Windows Phone , Microsoft est assez explicite à ce sujet:
Créez une expérience propre et ciblée en ne laissant que les éléments les plus pertinents à l'écran.
Quand il s'agit de concevoir de superbes expériences d'application, nous croyons au contenu, pas au chrome.Se concentrer sur le contenu au-dessus de chrome réduit les éléments inutiles, permettant au contenu de votre application de briller. Laissez les gens s'immerger dans ce qu'ils aiment et ils exploreront le reste.
Ils déclarent plus tard:
Être authentiquement numérique, c'est aller au-delà des règles et des propriétés du monde physique pour créer de nouvelles possibilités passionnantes dans un espace purement numérique. Tirez pleinement parti du support numérique.
Soyez "infographique". La livraison d'informations est le principal objectif, pas l'enveloppe qui l'entoure. L'adoption de l'approche infographique vous aidera à optimiser l'expérience utilisateur sur Windows Phone
En ce qui concerne la refonte de leur logo , Microsoft aborde à nouveau la justification d'être "authentiquement numérique" comme raisonnement pour supprimer le brillant:
Il était important que le nouveau logo porte notre principe Metro d'être "Authentiquement numérique". Par cela, nous voulons dire qu'il n'essaie pas d'émuler des caractéristiques de conception non industrielle telles que la matérialité (verre, bois, plastique, etc.).
De leur côté, malheureusement, Google n'a pas été très explicite sur ses intentions de créer Holo . Bien qu'ils aient définitivement évolué fortement vers le style de design plat , ils n'ont pas été particulièrement explicites sur les raisons. Concernant les icônes (qui sont au cœur de votre question), elles disent simplement :
Utilisez une silhouette distincte. Vue de face tridimensionnelle, avec une légère perspective comme vue de dessus, pour que les utilisateurs perçoivent une certaine profondeur.
Ils vont plus en profondeur dans leur documentation de développeur cependant, où ils disent (soulignement le mien):
Les icônes ne doivent pas être rognées. Utilisez des formes uniques le cas échéant; n'oubliez pas que les icônes du lanceur doivent différencier votre application des autres. De plus, n'utilisez pas une finition trop brillante à moins que l'objet représenté n'ait un matériau brillant .
Leurs directives de conception précédentes de Gingerbread et antérieures (c'est-à-dire pré-Holo), mentionnent également explicitement la texture ("Les icônes doivent présenter un matériau texturé non brillant"), avec la description complète des matériaux décrit comme tel:
Les icônes du lanceur doivent utiliser des matériaux tactiles, éclairés par le haut et texturés. Même si votre icône n'est qu'une simple forme, vous devez essayer de la rendre de manière à la faire apparaître comme sculptée à partir d'un matériau du monde réel.
…et ensuite…
Les icônes du lanceur Android sont ...
- Moderne, minimal, mat, tactile et texturé
- Orienté vers l'avant et éclairé par le haut, entier, limité dans la palette de couleurs
Les icônes du lanceur Android ne sont pas ...
- Vecteur antique, trop compliqué, brillant, plat
- Tourné, recadré, sursaturé
Il est donc clair que l'intention de Google et de Microsoft était à peu près dès le départ de leurs systèmes d'exploitation mobiles actuels respectifs d'éviter toute esthétique iOS/Aqua/glossy.
C'est une grande partie de Skeuomorphism vs flat design , un débat sur lequel Sacha Greif a une bonne rédaction . Le skeuomorphisme comme le brillant, les reflets et les textures font que les choses ressemblent à de "vrais" objets, mais toutes les fantaisies peuvent augmenter charge cognitive , et donnent une sensation de "même chose" malheureuse. La majorité des icônes iOS ont le même effet brillant ou similaire sur leurs icônes, ce qui en fait une fonctionnalité inutile comme différenciation. Une icône plate et minimale peut se concentrer sur des fonctionnalités distinctes uniquement , comme la forme du logo Skype et S, plutôt que leur marque de brillance particulière indiquée par encore une autre source de lumière descendante .
Il y a aussi la question de la saturation du marché, qui fonctionne en flux et reflux. Un océan de design skeuomorphique a envahi l'industrie après le brillant… brillant d'iOS, et il y a un rejet naturel des concepteurs qui disent "Hé, il y a d'autres façons de faire les choses". Cela pourrait simplement être considéré comme la marée poussant dans l'autre sens, bien qu'il existe de bonnes raisons UX d'adopter une (ou les deux) esthétique du design. Les skeuomorphes peuvent aider à reconnaître et à comprendre pour la première fois comment les choses "fonctionnent" (les ombres signifient que c'est en plus de cela!), Tandis que les conceptions nettes et plates facilitent la mise au point; moins de bonbons pour les yeux, des objets plus reconnaissables au lieu d'effets de brillance et de boutons poussés.
C'est en grande partie une question de tendances de conception, mais il y a certains aspects UX.
Les icônes et boutons brillants étaient (sans doute) principalement utilisés pour montrer accessibilité. Il était également utilisé presque religieusement dans tous les modèles Apple. Même aujourd'hui, la plupart des icônes iOS sont brillantes par défaut.
Les gens ne veulent pas qu'on leur montre du brillant ou du dégradé pour savoir qu'ils peuvent plus interagir avec quelque chose, et donc le besoin de verre est tombé. Android et Metro ont évolué au-delà d'iOS et se sont adaptés à une conception beaucoup plus propre et visuellement plus simple avec des éléments principalement plats.
Personnellement, je trouve le changement plus beau et plus utilisable. Mais je dirais quand même que c'est principalement sur les tendances de conception.
C'est une astuce psychologique.
Les réflexions étaient le moyen de communication extrêmement influent d'Apple:
- avancée technologique
- ux agréable
Flat (popularisé mais non créé par Google) est une façon de dire "nous sommes allés au-delà de tout le bling." Il communique:
- simplicité
- ux efficace
Ce n'est pas nouveau (regardez le design de style international des années 50 et 60), mais cela indique la focalisation UX de notre temps. Il est également très lié à la popularité et à l'accessibilité de la conception avec des formats vectoriels.
Peut-être un peu tangente, mais cette tendance me rappelle la BBC annonçant son nouveau logo "numérique" en 1997 .
Les principales raisons invoquées à l'époque étaient que le passage d'un logo brillant à un logo mat plus simple permettait au logo de mieux fonctionner à plusieurs résolutions et sur plusieurs appareils. Il comprenait également mieux, ce qui était un gros problème avec leur site Web dans les jours de numérotation, et se fond mieux dans le texte et aux côtés d'autres logos.
C'est un équilibre séculaire entre la forme et la fonction. UX essaie d'équilibrer les deux. Vous voulez quelque chose qui est visuellement agréable et qui "a l'air bien", mais vous voulez aussi quelque chose qui transmet des informations rapidement et efficacement et est facile à utiliser.
L'icône Photoshop est vraiment le meilleur exemple. Bien sûr, la plume a l'air cool, mais qu'est-ce que cela dit à quelqu'un sur l'application qui n'a pas mémorisé l'icône? Rien. Le logo PS, quant à lui, est stylistiquement similaire aux autres produits de la Creative Suite. Visuellement, il est indiqué qu'ils font partie du même paquet. De plus, les lettres de l'icône sont claires et faciles à lire et montrent à l'utilisateur qu'il s'agit d'un programme PS. Ce n'est pas aussi clair que d'énoncer Photoshop, mais quelqu'un peut facilement le reconnaître comme Photoshop s'il connaît les noms des différents produits Creative Suite.
Il convient également de souligner que seules 2 entreprises sont réellement représentées dans vos exemples, car les 3 premières sont toutes des produits Microsoft et reflètent donc la direction visuelle actuelle de Microsoft.
Je ne peux parler que de mes propres observations. Les gens achètent des tablettes et les utilisent en déplacement. Internet en déplacement coûte de l'argent supplémentaire selon le pays et le fournisseur. Les sites Web lourds se chargent plus lentement. Les bons designers réfléchissent à la manière de maintenir les performances et les temps de chargement à un niveau bas et concluent à s'éloigner des boutons bling bling lourds.
De plus, les designs Skeumorph ont atteint un niveau de saturation. Je ne pense pas qu'ils disparaîtront, car ils sont formidables pour mettre en valeur les capacités graphiques de la technologie.
Je ne partage pas l'opinion que la plupart d'entre nous ont, que le look `` plat et maigre '' serait inspiré du style métro Microsofts. Les concepteurs d'interface utilisateur ont déjà commencé à adapter le look moins brillant et plus plat à la mi-2011. Allez voir les anciens messages sur dribble et Forrst.
Quelqu'un commence à expérimenter et à revenir aux bases, puis ajoute une touche de zeitgeist et d'autres ramasse. C'est un cycle. Flat était à l'arrière en 2000-2004, mais pixélisé avec des bords et des coins et des polices difficiles à lire qui étaient purement esthétiques.
Nous nous pollinisons mutuellement et nous nous inspirons de partout. Que ce soit la mode, la typographie et maintenant aussi les applications.
Pour les interfaces utilisateur basées sur un navigateur, il est légèrement plus efficace et beaucoup plus compatible avec tous les navigateurs de créer ces conceptions `` plates '', c'est-à-dire sans ombres portées, biseaux, dégradés, coins arrondis, etc., etc.
Cela ne fait pas beaucoup de différence sur un ordinateur de bureau/haut débit/navigateur moderne, mais sur les appareils mobiles où les connexions sont plus lentes, les écrans sont plus petits et la part de marché du navigateur est fragmentée, cela peut faire une différence notable.
Compte tenu de l'importance du Web mobile, cela a influencé toute la conception, en particulier avec le principe de conception mobile-first auquel les concepteurs peuvent (et à mon avis devraient) désormais adhérer.
Pourquoi ce changement soudain?
D'une manière générale, ce n'est pas un changement soudain. Spécifique à la SEP, il s'agit d'un changement soudain. C'est une tendance design. La conception graphique et la conception d'interface utilisateur, comme la conception en général, suivent les tendances esthétiques.
Dans le cas des exemples de MS, comme beaucoup l'ont noté, Windows 8/Metro est conçu comme un écart important par rapport à leur système d'exploitation précédent, donc opter pour un changement significatif dans la présentation visuelle n'a de sens que pour eux.
Quant à Adobe, ils ont l'habitude de changer leurs icônes d'application presque à chaque version. C'est donc plus de changement pour le changement que n'importe quel argument stratégique spécifique
Un mot...
Résolution
Nous n'avons que récemment pu voir les polices telles qu'elles apparaissent sur les imprimés, et donc les tendances de conception qui ont prévalu dans la conception/typographie à haute impression ont plus de sens dans l'espace numérique maintenant.
Regardez la conception d'impression, en particulier le travail haut de gamme, maintenant ... montrez-moi les ombres portées et le brillant, en général, il n'est pas là, il ne teste pas bien, et la grande majorité de la génération précédente de concepteurs d'impression, et les directeurs artistiques préfèrent faire bouillir leur mère vivante plutôt que d'utiliser des appareils collants comme ça.
En fin de compte, vous pouvez regarder autour de la pointe de la conception Web et cette tendance émerge clairement depuis quelques années, mais avec les écrans xhd, elle est maintenant plus populaire que jamais.
Peut-être, vous voulez l'appeler mode, mais c'est le style de rigueur de l'imprimé "sérieux" qui dure depuis 25 ans, et qui a fait ses preuves depuis le début du mouvement du design moderniste il y a 80 ans.
Comme mon professeur de marketing disait:
Si tout le monde sur le marché fait de la publicité pour un dentifrice au goût de menthe douce. Vous feriez mieux d'annoncer un dentifrice au goût salé. Si tout le monde fait de la publicité avec fluorure, il vaut mieux en faire une sans fluorure!
c'est à dire penser différemment!
Fondamentalement, c'est une tendance marketing. Tout sur se démarquer des autres. Maintenant que le marché est saturé de produits de finition brillants, Matte est de retour.
Il y a et il y aura toujours des mérites et des démérites pour chacun, et ils conviendront chacun à des tâches différentes. Il n'y a pas de raison particulière, les masses ne pensent pas trop, elles suivent juste les leaders. :)
Une meilleure question serait les avantages/inconvénients de l'aspect brillant par rapport à l'aspect mat. Une réponse simple ressemblerait à ci-dessous:
Brillant
Avantages:
- Attire l'œil (brillant, brillant)
- Illusion de profondeur
Contre:
- Trop utilisé?
- plus complexe à produire (plus de ressources, que ce soit du temps, de l'argent, des cycles CPU ... etc.)
Mat
Avantages:
- Ne pas distraire (peut facilement le regarder)
- plus simple à produire (moins de ressources, que ce soit du temps, de l'argent, des cycles CPU ... etc.)
Contre:
- Trop utilisé?
- N'attire pas l'attention?
Comme vous pouvez le voir, cette liste est trop simplifiée. Une recherche rapide sur Google n'a trouvé aucun lien affichant de tels résultats. Une bonne chance pour la communauté UX de se réunir et d'en faire un! Il est temps de le wiki!
Voir le tendances Google pour Mat vs brillant .
C'est une mode appelée "Metro" inspirée de Microsoft Metro.
Oui, aplati et carré comme une application Microsoft-Metro.
Si vous vous souvenez que la conception "dégradé brillant-arrondi" est juste entrée après Windows XP,
le 'brillant arrondi ombré et ombré' est arrivé juste après Windows Vista.
Pensez-y de cette façon: lorsque le matériel informatique sera en mesure de dessiner un design `` bizarre '' comme une interface utilisateur 3D translucide, soumise à des ondes radioélectriques et inexistante à ce jour, il sera `` façonné '' l'année prochaine.
Pensez-le de cette autre manière: pourquoi ne devrais-je PAS utiliser css drop-shadow, text-shadow, border-image-background, gradient-background, border-radius? Performance.
Je crois fermement que c'est une mode, qui suit les capacités de "programmation" et rien de plus.
Je crois qu'avec toutes les nouvelles technologies, les gens rivalisent pour être les plus complexes, les plus complexes, pour démontrer leur connaissance des dernières tendances. Qu'il s'agisse de boutons Flash, jQuery ou glossy, les développeurs se montrent mutuellement leurs connaissances du Web en les poussant aussi loin que possible. Une fois que cela se produit, la technologie vieillit, la concurrence s'arrête et les gens ne mettent en avant que les éléments de valeur, tandis que tout le reste s'estompe.
Puisque j'ai mentionné jQuery, je vais l'utiliser comme exemple. Un cadre simple pour Javascript qui gagne en popularité. Soudain, vous voyez des sites qui arrivent sur le marché avec des menus coulissants et un contenu qui s'estompe. Chaque développeur essaie de montrer au prochain qu'il est branché en suivant son exemple. Ils se mettent au travail et leur entreprise veut non seulement des menus coulissants, mais des couleurs pâles et des widgets défilants. Cela prouvera sûrement que leur entreprise est meilleure que les autres et repoussera les dernières tendances. Cependant, une fois que tout le monde et son chien utilisent des menus coulissants et s'estompent, les développeurs s'arrêtent une seconde. L'intégrer à leur produit n'illustre plus leur connaissance supérieure. Ils reviennent enfin à l'utilisabilité. Ce menu coulissant améliore-t-il notre produit pour l'utilisateur, ou serait-il préférable qu'il apparaisse?
Le design plat est une tendance difficile à pousser. Si vous concevez un bouton pour un site, que demandez-vous à votre équipe ou à votre client? Vous leur montrez deux ou trois dessins et dites: "quel dessin vous convient le mieux?". Ils choisissent toujours le bouton brillant ou celui avec le dégradé subtil. Pourquoi? Parce que vous avez demandé à quoi cela ressemblait, et une couleur unie n'est certainement pas aussi agréable que celle avec le dégradé de bon goût et le biseau parfait en pixels. Vous voyez, vous posez les mauvaises questions. Il n'a jamais été question de son apparence, mais de son fonctionnement.
Les gens oublient souvent la règle la plus importante de toutes. En ce qui concerne Internet, il s'agit de l'expérience entre l'utilisateur et le contenu. Le design n'a pas sa place ici. Nous ne faisons pas une œuvre d'art à mettre en valeur sur votre mur. Ce n'est pas une tendance. Les menus coulissants et les boutons brillants ne feront pas de retour. Ils sont morts. Nous avons montré au monde que nous pouvons concevoir n'importe quoi. En retour, nous savons qu'il vaut mieux ne rien concevoir.
À mon avis, la brillance est en quelque sorte perçue par les utilisateurs comme un attribut en soi. Par conséquent, toutes les icônes avec Glossiness sont en quelque sorte regroupées. Perdre sa marque ou son caractère distinctif.
Quant à savoir pourquoi la brillance est elle-même perçue comme un attribut peut-être quand elle est apparue pour la première fois, elle était si nouvelle qu'elle a obtenu cette niche.
Mes brèves réflexions - Il s'agit également d'authenticité: une interface utilisateur numérique authentique qui joue sur l'appareil de capacités. Ex - Les utilisateurs ont-ils plus besoin de boutons qui ressemblent à un bouton physique? Pas vraiment, le contraste et le contexte suffisent.
Les interfaces skeuomorphes ont tendance à avoir une capacité réduite à s'adapter à "l'idéal" qu'elles tentent d'imiter. Le calendrier d'OS X est un excellent exemple courant.
La réponse pourrait-elle être que (comme le numéro 4) les choses sont maintenant sur les tables?
Des écrans d'ordinateur étaient assis sur des tables et des murs devant vous et vous les regardiez "hors/à travers". Pensez aux champs XP. La métaphore était celle d'une fenêtre et d'une lumière postive, et la lumière tombait (dans la mauvaise direction) sur les boutons d'ombre portée. Vous regardiez dehors et la profondeur était important et vous a fait vous sentir moins claustrophobe devant l'écran pendant de nombreuses heures.
Cependant, dès que vous utilisez un appareil placé sur une table, la profondeur vous fait vous sentir mal à l'aise car c'est le sentiment que vous obtenez du vertige. Et si vous allez glisser des écrans, la profondeur contredit à nouveau le message car les "bosses" des icônes ne glisseraient pas aussi bien. Les choses plates glissent mieux. Sur une table, la métaphore ne fonctionne tout simplement pas. C'est peut-être la raison pour laquelle les choses évoluent maintenant vers une métaphore de jeu de cartes, avec des onglets coulissants comme si vous attendiez la dernière carte de votre couleur ...
Tendance design + 2 Heuristiques en jeu:
Correspondance entre le système et le monde réel Les nouveaux utilisateurs n'ont pas besoin d'analogies extrêmes, car ils ont grandi avec des concepts numériques aussi évidents dans la nature.
Design esthétique et minimaliste Moins d'encombrement signifie une concentration plus nette sur les tâches à accomplir. Aucun élément de conception frivole à interférer.
Tendances - Continuez à changer et les changements maintiennent l'excitation vivante, les attentes élevées, les utilisateurs satisfaits des nouveaux designs, etc. Nous vivons dans un monde visuel. La couche visuelle est l'un des points d'entrée UX importants. Si cela vous semble agréable, vous cliquez. Et puis commence l'expérience.
La brillance était là depuis un certain temps. Ça avait l'air bien. A eu un impact rafraîchissant sur les utilisateurs. Le passage au mat peut s'expliquer par le fait que sa tendance humaine à voir ou à attendre des changements après un certain temps.
Si vous voyez, le design a évolué par rapport à ce qu'il était une décennie ou avant cette époque. Par exemple, des écrans de démarrage de Photoshop. Voir les versions 4, 5, 6 ... CS, CS5 et maintenant CS6. La quantité de détails (illustrations) dans l'écran de démarrage a été réduite et la planéité augmentée, la transparence jouant un rôle plus important.
Le brillant au mat n'est qu'un phénomène de changement. Agréable ne reste pas agréable après un certain temps.
Le design est en constante évolution. La partie la plus excitante de cette question déclenche des réflexions sur la prochaine tendance à laquelle nous allons assister.
Je vois les raisons suivantes;
- Moins de détails dans un design plat contrairement aux icônes brillantes permet à l'utilisateur de consommer et de mémoriser facilement des informations.
Conception plate facile à réaliser pour les professionnels aussi (moins de détails)
De grands corp comme google et Microsoft ont adopté une interface utilisateur plate.
La plupart des gens connaissent maintenant les ordinateurs et n'ont pas besoin de tours de skeuomorphisme.