Metáforas e iconos en interfaces: criterios de evaluación y diseño efectivo

Evaluación de la metáfora

• Adecuación a la audiencia: valorar si la metáfora es comprensible y apropiada para el público objetivo.
• Representatividad: la metáfora debe disponer de representación visual, auditiva y palabras asociadas coherentes.
• Volumen: cuánta funcionalidad proporciona la metáfora y hasta qué punto cubre necesidades del sistema.
• Relación con el resto de metáforas (consistencia): comprobar si la metáfora encaja y se mantiene coherente con otras metáforas del sistema.

Ejemplo de errores

• Asociaciones inadecuadas: vínculos entre la metáfora y la función que confunden al usuario.
• Extensión de la metáfora con funciones no intuitivas: añadir comportamientos que no siguen la lógica del dominio original.
• Imponer restricciones físicas: aplicar limitaciones del mundo real que no tienen sentido en el nuevo contexto de representación.
• Fidelidad innecesaria: replicar detalles irrelevantes que añaden complejidad sin beneficios claros.

Diseño de metáforas

Tipos de metáforas

• De objetos (por ejemplo: libro).
• De actividades (por ejemplo: visitas).
• De lugares (por ejemplo: plazas).

Asociaciones eficaces

Las metáforas pueden conseguir su efectividad a través de asociaciones: podemos asociar clases y atributos a objetos familiares y procesos y algoritmos a verbos de acción.

Objetos familiares

• Escritorio → dibujos, ficheros, carpetas, papeles…
• Fotografía → álbumes, portafotos.
• Juegos → reglas del juego, tablero…
• Contenedores → estanterías, cajas…

Verbos de acción

• Mover → navegar, conducir…
• Localizar → apuntar, tocar…
• Borrar → tirar, destruir, reciclar…

Ejemplos de metáfora

• Papelera: es una herramienta habitual en la mayoría de culturas; el símbolo de reciclaje es cada vez más reconocible.
• Tijera: funcionalidad de cortar; la metáfora aporta la idea de poder cortar un trozo de documento. Su enlace con el portapapeles debe ser aprendido.
• Portapapeles: permite pasar información entre aplicaciones diferentes; hay aspectos que no cubre la metáfora y deben ser aprendidos. Esta metáfora tiene problemas de cobertura.
• Herramientas de dibujo: se usan elementos conocidos y de significado intuitivo, como un bote de pintura.
• Listas de contactos
• Depuración de código: no ha mejorado mucho, ya que hay varios ejemplos (la metáfora puede resultar limitada).
• Carro de la compra

Guía para la creación y selección de iconos

Los iconos deben ser: familiares, claros, simples, consistentes, directos y discriminables. También hay que considerar el contexto en el que se usarán y la complejidad de la tarea.

Presentación en pantalla

Sigue todas las líneas guía (pautas) generales para el diseño de pantalla.

• Limita el número de símbolos a 12 si es posible y máximo 20.
• Organiza y agrupa los iconos de forma consistente.
• Indica gráficamente que el icono es clickable (3D) o tiene interactividad.
• Asegúrate de que un icono seleccionado es distingible de uno no seleccionado.
• Permite que el usuario adapte los iconos a su gusto (tamaño, disposición, visibilidad).
• Permite que el usuario elija entre mostrar el icono o el texto asociado.