Artículos

Uso de metáforas en diseño de interfaz

17-06-2004 - Luis Villa - Comentar este artículo

Aplicar metáforas en el diseño de interfaz de un producto ayuda al usuario a establecer unas expectativas acerca de su utilidad y funcionamiento. Un ejemplo: el escritorio.

Metáforas

El uso de metáforas adecuadas en el diseño de un interfaz, facilita y acelera el aprendizaje del funcionamiento de un producto.

Similitudes con otros mecanismos y procesos conocidos por el usuario que aplica lo que ya conoce a los elementos y relaciones dentro de un dominio no familiar como puede ser una aplicación web o multimedia.
El ejemplo más tradicional: el escritorio con sus iconos representando carpetas y documentos.

Las metáforas ayudan al usuario a entender más rápidamente cómo moverse por un producto interactivo.

Caracterisiticas de una buena metafora

Si el objetivo de un producto es ser usado de forma eficiente, algunas de las características que deben tenerse en cuenta son:

  • Debe ser consistente aplicándose de forma coherente y sólida a lo largo de todo el sistema.
  • Autoexplicativa: Debe facilitar al usuario conocer las acciones posibles en cada momento.
  • Debe hacer visibles partes y procesos invisibles al usuario, incluyendo el modelo conceptual del sistema las acciones alternativas y el resultado de las acciones.
  • Debe informar con claridad al usuario acerca del estado actual del sistema y de las consecuencias de sus acciones.
  • No desbordar al usuario con información supérflua o innecesaria.

Tipos de metáforas

Metáforas organizacionales

Se fundamentan en la estructura existente de un grupo, sistema u organización.

Por ejemplo: un sitio web de un supermercado puede estar agrupado por departamentos o secciones como los supermercados “físicos”. Panadería, carnicería, higiene, limpieza… de esta manera, el usuario aplica su conocimiento de la vida real al sitio web y puede comenzar a moverse.

Es importante que el usuario encuentre sentido y utilidad a la metáfora: si es un sitio de compras, no es conveniente organizarlo como reflejo de la estructura corporativa de la empresa, que es algo que el usuario no entiende y que además le resultará inútil en su tarea de comprar.

Metáforas funcionales

Se apoyan en tareas o funciones que el usuario puede realizar en su vida cotidiana.

Ejemplo: Adobe Photoshop o MS Word y en general todos los programas que funcionan bajo sistemas de ventanas tienen las funciones Copiar, Cortar y Pegar, que permiten que el usuario entienda cómo puede reutilizar parte de su trabajo en la misma o diferentes aplicaciones.

Metáforas visuales

Se basan en elementos gráficos familiares para la mayoría de la gente.

Por ejemplo: un sitio de música en la que los usuarios puedan escuchar canciones, se les puede proveer de tres iconos “Play” “Pause” y “Stop”, que ya le son familiares en todos los aparatos de CD, DVD, etc…

Usar metáforas no es diseñar con “estilo”

Es necesario ayudar al usuario a entender lo que le ofrece el sistema evitando la mezcla o el uso de metáforas inadecuadas.

Muchos diseñadores confunden el hecho de aplicar metáforas en su trabajo con un diseño moderno o rompedor.

Es mejor prescindir de metáforas cuando pueden desorientar al usuario a no ser que esta “desorientación” sea uno de los objetivos del sistema como en entornos virtuales, de juego y/o aprendizaje en los que la exploración tiene gran protagonismo.

Comentar este artículo

Navega

Diseño de Experiencias
06/10/2004 | Diseño

Weblogs: usos y estadísticas
14/07/2004 | Contenidos

Dí no a los gadgets propietarios
13/07/2004 | Usabilidad

Basta de usabilidad
13/07/2004 | Usabilidad

Weblogs y branding personal
19/06/2004 | Negocios

Historia del hipertexto: Xanadú
17/06/2004 | Tecnología

Douglas C. Engelbart: el inventor del ratón y el primer hipertexto operativo
17/06/2004 | Tecnología

Vannevar Bush: maestro de la computación analógica
17/06/2004 | Tecnología

Historia del Hipertexto: MEMEX
17/06/2004 | Tecnología

Comentarios en abierto: libertad o censura
15/06/2004 | Contenidos

Categorias

Sindicación

Contenidos para llevar...

Bajo Attribution-ShareAlike 2.0 Creative Commons license

Inicio | Acerca de este sitio | Agenda | Artículos | Weblog | Contacto