{"id":19048,"date":"2022-02-03T10:51:49","date_gmt":"2022-02-03T09:51:49","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=19048"},"modified":"2022-02-03T10:51:49","modified_gmt":"2022-02-03T09:51:49","slug":"iconografia_ux","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/iconografia_ux\/","title":{"rendered":"La importancia de la iconograf\u00eda en UX"},"content":{"rendered":"

Los iconos se han convertido en un elemento indispensable en los entornos tecnol\u00f3gicos. <\/span><\/p>\n

Los iconos aparecen en la mayor\u00eda de las interfaces por las que navegamos y muchas veces no somos conscientes de la importancia que tienen dentro de estos entornos digitales. <\/span>Estos peque\u00f1os dibujos, que adem\u00e1s de a\u00f1adir estilo e inter\u00e9s visual a los dise\u00f1os de interfaz, son una gran herramienta para comunicar acciones.\u00a0<\/span>Por esta misma raz\u00f3n, hacer un buen uso de estos elementos en el dise\u00f1o de interfaz es una clave del \u00e9xito de tus diferentes entornos online.<\/span><\/p>\n

A continuaci\u00f3n te mostrar\u00e9 buenas pr\u00e1cticas de c\u00f3mo utilizar la iconograf\u00eda, \u00a1comenzamos!<\/strong><\/span><\/p>\n

 <\/p>\n

1. Iconos sencillos VS iconos con mucho detalle<\/strong><\/h3>\n

En numerosas ocasiones nos encontramos con iconos muy complejos y con muchos detalles. A primera vista, estos pueden parecer al usuario m\u00e1s bonitos por tener mayor detalle pero finalmente en<\/span> la sencillez est\u00e1 el buen resultado.<\/b><\/p>\n

Los iconos que mejor funcionan son <\/span>formas simples<\/b> y pictogramas<\/strong> que los usuarios pueden <\/span>identificar<\/b> al instante.<\/span><\/p>\n

 <\/p>\n

2. \u00bfQu\u00e9 se supone que es esto?<\/strong><\/h3>\n

Esta pregunta es una de las muchas que el usuario no puede hacerse cuando vea un icono. Los iconos deben ser <\/span>reconocibles de un vistazo<\/b>. Al fin y al cabo, <\/span>el icono es una llamada a la acci\u00f3n<\/b> para el usuario por lo que si duda de su significado, perdemos su funci\u00f3n y perjudicamos su experiencia.<\/span><\/p>\n

Una buena praxis es utilizar <\/span>iconos universales<\/b>. Los iconos \u00fanicos y creativos pueden a\u00f1adir un valor visual a tu web o app pero si al final el usuario no lo entiende, est\u00e1s perjudicando su experiencia.<\/span><\/p>\n

En muchas ocasiones cuando se utilicen iconos que no sean universales, se puede considerar la posibilidad de <\/span>a\u00f1adir etiquetas de texto <\/b>para explicar su funcionalidad.\u00a0<\/span><\/p>\n

 <\/p>\n

3. F\u00e1cil escala para todos los entornos y dispositivos<\/strong><\/h3>\n

En la mayor\u00eda de situaciones, los iconos no tienen un tama\u00f1o fijo de uso. Dependiendo del dispositivo, de su funci\u00f3n o de la importancia que tenga, tendr\u00e1 un tama\u00f1o menor o mayor. Por eso, al hacer uso de ellos, tenemos que asegurarnos que estos sean<\/span> escalables<\/b>, es decir, que sean del tama\u00f1o que sean se <\/span>visualicen correctamente.<\/b><\/p>\n

 <\/p>\n

4. Monocolor VS Multicolor<\/strong><\/h3>\n

A priori, es mejor que los iconos sean solamente de <\/span>un color.<\/b> El color puede determinar el estado de los iconos pero este aspecto es el \u00fanico que deber\u00eda de admitir el cambio de color de un icono. Por ejemplo, puedes utilizar grises para mostrar que un icono est\u00e1 inactivo y el color de la marca para mostrar que est\u00e1 activo.<\/span><\/p>\n

 <\/p>\n

5. Mismas formas, mismos estilos<\/strong><\/h3>\n

La iconograf\u00eda de una marca<\/strong> tiene que tener el<\/span> mismo estilo. <\/b>Haciendo que estos tengan un estilo \u00fanico haremos que tengan consistencia y por lo tanto tengan <\/span>armon\u00eda visual y ayuden a que hagan identidad de marca.\u00a0<\/b><\/p>\n

 <\/p>\n

Llevando a cabo estas buenas pr\u00e1cticas en tu entorno web, podr\u00e1s mejorar la experiencia del usuario a la vez que aportar un atractivo est\u00e9tico adicional. \u00a1Si te has quedado con ganas de m\u00e1s no te pierdas nuestros pr\u00f3ximos blogs! O si no puedes esperar porque necesitas consultar tu caso concreto, no dudes en contactarnos en info@makingscience.com, \u00a1te esperamos! ?<\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Los iconos se han convertido en un elemento indispensable en los entornos tecnol\u00f3gicos. Los iconos aparecen en la mayor\u00eda de las interfaces por las que navegamos y muchas veces no somos conscientes de la importancia que tienen dentro de estos entornos digitales. Estos peque\u00f1os dibujos, que adem\u00e1s de a\u00f1adir estilo e inter\u00e9s visual a los […]<\/p>\n","protected":false},"author":40,"featured_media":19060,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[910],"tags":[114,70],"class_list":["post-19048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-ai-es","tag-creativity-design-2","tag-ux-cro"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/19048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=19048"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/19048\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/19060"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=19048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=19048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=19048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}