¿Cuándo usar íconos versus íconos con texto versus solo enlaces de texto?
¿Hay alguna regla sobre cuándo usar íconos versus íconos con texto versus solo enlaces de texto en una aplicación web?
Por ejemplo:
vs.
guardar
vs.
guardar
Pregunta extra: es guardar -o- guardar ¿preferible?
Los iconos son notoriamente ineficaces como etiquetas, y son muy difíciles de interpretar correctamente sin capacitación o experiencia. Para la mayoría de las situaciones, los usuarios aprenden mejor las interpretaciones correctas solo con texto que con íconos solos. Ver: Wiedenbeck, S (1999). El uso de iconos y etiquetas en un programa de aplicación de usuario final: un estudio empírico de aprendizaje y retención. Comportamiento y tecnología de la información, 18 (2), p68-82.
Los íconos son especialmente malos para cualquier cosa abstracta, como Factura u Oferta, ya que las cosas abstractas generalmente no tienen una imagen visual sólida (tanto la Factura como la Oferta podrían representarse como documentos en papel, pero ¿cómo los distinguiría?). Del mismo modo, los iconos son particularmente malos para las acciones (por ejemplo, Guardar, Publicar); Es difícil mostrar claramente un proceso con una imagen. Sí, los iconos se usan todo el tiempo en las barras de herramientas para las acciones, pero las barras de herramientas estaban destinadas a expertos, y sin embargo, los usuarios se confunden con frecuencia (en promedio, los usuarios conocen solo seis elementos de la barra de herramientas de Word después de usar Word regularmente por dos años ).
Los iconos pueden ahorrar espacio sobre el texto, pero al precio del reconocimiento. Para iconos pequeños, como 16x16 píxeles, es muy difícil para los usuarios incluso reconocer de qué se supone que son una imagen, y mucho menos qué se supone que representa la imagen. Un usuario que conozco pensó que el icono de "disco" para guardar era una imagen de un televisor. (Era lo suficientemente mayor como para saber qué era un disquete). Personalmente utilicé Word durante años pensando que el ícono Track Changes era una especie de Rosetta Stone estilizada. A los usuarios expertos les resulta más fácil confíe en la posición física memorizada de los controles de la barra de herramientas en lugar de las etiquetas de los iconos para elegir un control. Los íconos más grandes (por ejemplo, al menos 32 por 32 píxeles) pueden ayudar al reconocimiento, pero ocupan tanto espacio que es mejor usar el espacio para una etiqueta de texto clara. Si el espacio es limitado, a menudo es mejor usar texto abreviado que iconos.
Es extraordinariamente difícil acertar con los íconos. No intente desarrollar un nuevo icono sin extensas iteraciones de pruebas de usuario. Incluso entonces, puedes fallar. Los diseñadores de Microsoft intentaron todo para hacer íconos interpretables para la barra de herramientas de Outlook antes renunciar y seguir con etiquetas de texto en los controles clave.
Las etiquetas de iconos también dificultan el soporte técnico (por ejemplo, "Haga clic en la hoja amarilla con una marca de verificación azul", en lugar de "Haga clic en" Aceptar "").
Como regla general, los íconos solo deben permitirse cuando se aplican al menos dos de las siguientes tres condiciones:
El espacio es muy limitado (es decir, demasiado pequeño para texto solo).
Los iconos están estandarizados (por ejemplo, la imagen del disquete para guardar)
El ícono representa un objeto con un fuerte atributo análogo físico o visual (por ejemplo, un ícono de impresora para acceder a los atributos de la impresora, o un rectángulo rojo para establecer un fondo de página rojo).
La información sobre herramientas es necesaria para los iconos cuando se usan solos, pero son un mal sustituto de las etiquetas de texto. Sus usuarios no deberían tener que usar su aplicación buscando cosas. El hecho de que las etiquetas de texto nunca necesiten información sobre herramientas gráficas es una pista bastante buena de que el texto es mejor que los iconos.
Si el espacio lo permite, los iconos combinados con texto son los mejores. (Creo que hubo investigaciones que muestran esto desde fines de la década de 1980, pero no puedo encontrarlo). El uso selectivo de iconos con texto hace que ciertos elementos se destaquen más o agreguen interés visual. También puede mejorar la escalabilidad de los elementos, pero las buenas etiquetas de texto también pueden hacerlo. Se sabe que los usuarios piensan subjetivamente que una aplicación es más fácil si tiene íconos, incluso cuando en realidad no mejoran el rendimiento (ver Wiedenbeck, 1999 citado anteriormente), por lo que esa es otra razón para combinar íconos y texto.
Por lo general, veo el ícono arriba o a la izquierda de la etiqueta de texto. No creo que sea necesariamente inherentemente mejor que las alternativas, pero es una convención que también debes seguir si tienes controles uno al lado del otro para que el usuario pueda confiar en la experiencia para saber qué etiqueta de texto va con cada ícono.
Del grupo Neilson/Norman en iconos :
Resumen : la comprensión del usuario de un icono se basa en la experiencia previa. Debido a la ausencia de un uso estándar para la mayoría de los iconos, las etiquetas de texto son necesarias para comunicar el significado y reducir la ambigüedad.
Los iconos necesitan una etiqueta de texto
Para ayudar a superar la ambigüedad que enfrentan casi todos los íconos, una etiqueta de texto debe estar presente junto a un ícono para aclarar su significado en ese contexto particular. (E incluso si está utilizando un ícono estándar, a menudo es más seguro incluir una etiqueta, especialmente si modificó ligeramente el ícono para que coincida con sus preferencias o restricciones estéticas).
Las etiquetas de los iconos deben estar visibles en todo momento, sin ninguna interacción del usuario. Para los iconos de navegación, las etiquetas son particularmente críticas. No confíe en el desplazamiento para revelar etiquetas de texto: no solo aumenta el costo de interacción , sino que tampoco se traduce bien en dispositivos táctiles.
El sitio web sabilidad.gov usa íconos de navegación para Métodos, Plantillas y Documentos, y Pautas en cada página dentro del sitio [ ejemplo con texto & sin texto ]. Si le pidiera a cada persona que lee este artículo que me envíe un ícono que representara Métodos, estoy seguro de que recibiría una amplia variedad de diseños. Como dijimos como parte de nuestro pautas de diseño para la usabilidad de la página de inicio años atrás, “si encuentra que debe reflexionar para encontrar un ícono para la navegación, es probable que no sea fácilmente reconocible o intuitivo para los usuarios ". Mientras que la versión móvil del sitio reconoce que las etiquetas de texto deben acompañar a los íconos para impartir algún significado, la versión de escritorio las oculta hasta que el usuario curioso decida pasar el mouse sobre ellas. La fijación de estos elementos de navegación en el lado izquierdo de la página para que estén disponibles para los usuarios cuando se desplazan indica que la organización cree que son importantes y útiles. Sin embargo, quitar estos íconos de las etiquetas de texto los deja completamente sin sentido y es contraproducente para el objetivo de proporcionar un acceso fácil al contenido.
Según una investigación citada por Don Norman, los íconos por sí solos funcionan menos bien. El texto en solitario funciona mejor que los iconos. Y los iconos de texto + funcionan mejor.
Además de las respuestas anteriores, tengo un punto que hacer.
¿Qué tipo de sitio web es?
Si el sitio web se va a utilizar con poca frecuencia, deberá etiquetar sus iconos. O bien, los nuevos usuarios pueden encontrar la interfaz de usuario engorrosa.
Si el sitio web se va a usar con frecuencia, como Gmail, buenos iconos con información sobre herramientas bien ubicadas son mejores que ir con un enfoque de solo texto o solo icono. Estoy bastante seguro de que Google revisó esta pregunta, porque en el pasado solían usar botones de solo texto, pero ahora están usando íconos + información sobre herramientas en Gmail. Este nuevo enfoque brinda una interfaz limpia sin sacrificar la usabilidad. Incluso Photoshop y Notepad ++ utilizan un enfoque similar.
Deje que el usuario elija, por defecto a Ambos.
Text + Icon ayuda al usuario principiante a aprender los iconos; pero a medida que usa más la aplicación, el usuario se acostumbrará al icono y ya no necesitará el texto. Una vez que aprendió lo que significan los íconos, preferiría un espacio de trabajo más grande en lugar del texto redundante.
En primer lugar, cuando va a diseñar una interfaz de usuario, debe tener en cuenta los principios de usabilidad (coherencia, rentabilidad, etc.). La asequibilidad es uno de los conceptos principales y significa que su interfaz debe ser intuitiva. Por ejemplo, sus íconos deben estar relacionados con el significado de la siguiente acción, como el ejemplo citado anteriormente para el ícono de guardar de Michael. Algunos íconos también están estandarizados y puede reutilizar el significado. El punto es que si usa solo íconos para barras de herramientas, etc., debe usar la información sobre herramientas en caso de que el ícono no sea lo suficientemente bueno como para expresar el significado, pero si sus íconos son lo suficientemente permisivos, no necesitan una etiqueta y la información sobre herramientas podría ser suficiente.
En cualquier caso, es difícil diseñar íconos especialmente cuando su sistema es para un sistema específico y tiene que diseñar íconos. En este caso, puede proponer algunos diseños y evaluarlos con los usuarios. Podría ser útil saber qué piensa el usuario sobre su sistema, interfaces visuales e iconos. También puede hacer una prueba memorable un día después de su prueba real tratando de evaluar si los usuarios pueden recordar sus íconos, el significado o sus íconos o las posibles áreas donde pueden encontrar la acción que está solicitando. Además, un cuestionario podría ayudar si tiene más de un diseño para iconos.
Por otro lado, si necesita poner la etiqueta, creo que es mejor la etiqueta debajo del icono: [icono] [etiqueta]
Recuerde que “Una prestación es un aspecto de un objeto que hace obvio cómo se va a usar el objeto. En las pantallas de la interfaz de usuario, las características que crean posibilidades suelen ser visuales. .. "Rosson, M. B. y Carroll, J. M. (2002) Ingeniería de usabilidad, Morgan Kaufmann.
O tal vez si tienes tiempo ... puedes leer este: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf
Si durante el proceso de diseño ha considerado la capacidad de pago, tal vez las etiquetas no sean necesarias y solo use la información sobre herramientas; de lo contrario, puede considerar las etiquetas debajo de los iconos y evaluar o proponer más diseños para evaluar con los usuarios (no tantos) que pueden Ser colegas al principio hasta la versión que podría probarse con los usuarios finales.
En la tendencia actual El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario, en lugar de términos orientados al sistema. Siga las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico. y cuando usas inglés siempre mantén las letras en el lado derecho. porque obviamente los iconos serán la atracción principal. Por lo tanto, los usuarios pueden ignorar las letras en el frente.
por ejemplo iTunes: organizado como una biblioteca que contiene su biblioteca de medios: música, películas, espectáculos, audibooks. Debajo de la Biblioteca está la Tienda donde puedes comprar más medios para poner en tu Biblioteca.
y para las tendencias recientes como diseño de paleta de Google y los mosaicos 2D de Windows sugieren íconos. pero mejor tener iconos con un información sobre herramientas de desplazamiento rápido del mouse. buena suerte.
Después de leer todas las preguntas y estar de acuerdo con todo, me gustaría agregar un punto de vista adicional.
Antes de decidir mostrar iconos, no muestres iconos, agrega texto alrededor del texto, no agregues texto, debes responder algunas preguntas:
- ¿Dónde piensa agregar los íconos?
- ¿Por qué necesitas iconos?
- ¿Quién usará estos íconos?
- ¿Qué conocimiento tienen los usuarios sobre los iconos/contenido/acción?
- ¿Es común usar iconos para ello?
- ¿Facilitará la interacción del usuario?
Y para responder estas preguntas debe considerar algunos puntos:
- La gente usa el teléfono inteligente todos los días, cada vez y los íconos más famosos como Facebook, Youtube, Google, What's App, Instagram y otros necesitan mostrar una etiqueta para garantizar que la gente lo sepa.
- Word/Google Docs está usando íconos sin texto con éxito porque son los mismos durante años y todos ya saben lo que es, pero aún así, al pasar el mouse, muestran un texto para explicar el ícono.
Diferentes regiones geográficas podrían entender su icono de manera diferente. Por ejemplo, en el Reino Unido es más común usar la canasta en el comercio electrónico y, de lo contrario, en los EE. UU. Es el carro. Está sucediendo debido a la influencia del idioma regional.
Los íconos complejos podrían detener su conversión debido a malentendidos.
Y puedes echar un vistazo a una buena comparación que tomé prestada de Smashing Magazine .
Considerando todas las respuestas, usaré texto con un ícono en el 90% de los casos y la posición del texto depende de su concepto de diseño y si es fácil para el usuario conectarlos.
Y como siempre digo en mis comentarios, nada aquí es absolutamente cierto, debe probarlo, compararlo con SUS usuarios en SU sitio web/aplicación.
Esto dependerá de los usuarios. Desde el punto de vista de la usabilidad, tener tanto ícono como texto ofrece mejores resultados porque eso sigue al reconocimiento sobre la recuperación, siempre que los íconos sean aceptados por una población razonable. Tener solo el ícono es aplicable para los glifos simbólicos, aquellos que son globalmente entendibles. El texto solo es más apropiado cuando los elementos son arbitrarios y no tienen glifos reconocibles para representarlos. Para tales elementos, tener solo texto es quizás lo mejor. Sin embargo, la nomenclatura utilizada debe ser probada para un uso apropiado.