Diseño plano y esqueumorfismo

Cada uno tiene sus ventajas y desventajas, toma en cuenta sus características antes de aplicarlos al ícono, ilustración o interfaz de usuario

Lo encuentras en todos lados. En el escritorio de tu ordenador y en el sistema operativo de tu teléfono inteligente; en los sitios web corporativos y en las ilustraciones que circulan en redes sociales; en la iconografía de las aplicaciones móviles y en el rediseño de los logotipos. Se llama diseño plano (flat design) y es un estilo que se volvió tendencia sobre todo a partir del lanzamiento de la interfaz de Windows 8.

El diseño plano es un estilo que reduce los elementos visuales al mínimo. En su versión más minimalista emplea sólo tipografía sobre color sólido; pero también puede utilizar íconos e imágenes—fotografías e ilustraciones—siempre como elementos de una composición limpia. A diferencia del esqueumorfismo (skeuomorphism), el diseño plano no recurre a efectos como sombras, biseles, texturas, degradados o brillos; el objetivo es crear una apariencia plana sobre la pantalla.

Figura 1. Ejemplo de ilustración plana
Figura 1. Ejemplo de ilustración plana

El esqueumorfismo o realismo es un estilo que consiste en imitar la apariencia del artefacto físico para representarlo sobre la interfaz gráfica. El esqueumorfismo, como analogía visual, ha servido a los usuarios para entender las funciones del ordenador, y si no, ahí están todavía el escritorio, las carpetas y la papelera. Un ejemplo de esqueumorfismo se puede encontrar en el sonido del obturador que indica que el teléfono inteligente ya tomó una fotografía.

Aunque en los últimos años el diseño plano parezca omnipresente, el diseño esqueumórfico sigue teniendo su lugar. Se encuentra en la interfaz de usuario de los programas de edición de audio e imagen, donde simula los controles de las consolas físicas; en los sitios web de productos de lujo como los relojes, que se benefician de efectos tales como brillos y texturas; y sobre todo en los videojuegos, que más bien tienden al hiperrealismo.

Es por eso que antes de aplicar los principios del diseño plano a una interfaz de usuario, a un set de íconos o a una ilustración, tienes que pensar en las características del producto o servicio, en el público objetivo y en las necesidades del cliente.

Cuando estés seguro de que el diseño plano es lo que necesita tu proyecto, entonces comienza por componer una retícula que organice unos pocos elementos visuales; utiliza siempre tipos sin remates y, de ser posible, diseñados especialmente para la web; define tu paleta básica de colores planos; y, finalmente, utiliza íconos planos e ilustraciones planas (Figura 1), esto es, que sigan las reglas del diseño plano, y en donde lo importante sea el contenido.

Como no podría ser de otra forma, cada uno de estos estilos tiene sus detractores: al diseño plano le critican la falta de efectos que dificulta sus prestaciones (affordances) y, de esta manera, su usabilidad; al esqueumorfismo le reclaman que, muchas veces, la imitación carece de funcionalidad y se queda en mera decoración. Lo cierto es que de cada uno de los estilos podemos encontrar en la web resultados muy interesantes.

Referencias

Oswald, D. Y Kolb, S. 2014. «Flat Design vs Skeuomorphism». International Conference on Engineering and Product Design Education. University of Twente.

Page, T. 2014. «Skeuomorphism or Flat design: Future directions in mobile device user interface (UI) design education». International Journal of Mobile Learning and Organisation. 8, 2. 130-142.

Modelo mental y objetos web

Cuando nos enfrentamos a un nuevo objeto echamos mano de nuestras experiencias anteriores y de la estructura visible del objeto para hacernos una idea de cómo puede funcionar. Es más, podemos representarnos mentalmente sus partes visibles y simular su funcionamiento. Algo parecido sucede cuando se trata de nuevas situaciones, eventos o interacciones sociales.

La psicología cognitiva llama sistema objetivo al objeto que la persona está usando o aprendiendo a usar y modelo mental a la representación interna del sistema objetivo que elabora el usuario. El modelo mental resulta entonces en una empresa personal y por tanto incompleta e inestable, pero funcional y en constante evolución. Un modelo mental se forma a partir de la experiencia, de la instrucción o de una combinación de ambas.

Al modelo desarrollado con fines de instrucción para representar apropiadamente el sistema objetivo se le llama modelo conceptual y es elaborado por diseñadores, ingenieros o científicos. El modelo conceptual es, a diferencia del modelo mental, una representación externa de objetos o fenómenos, compartida por una comunidad y por eso mismo más completa y más consistente con el sistema objetivo.

Pero a falta de un modelo conceptual, las personas forman modelos mentales cuando interactúan con el entorno, con los demás y con los artefactos tecnológicos (Norman: 2014). Los modelos mentales les permiten hacer inferencias y predicciones, como cuando al encontrar un objeto web (por ejemplo, el carrito de compras) en determinado lugar de una página, esperan volver a encontrarlo en el mismo lugar en otras páginas.

Para demostrar el ejemplo anterior, Sandra Roth y sus colegas (2013) seleccionaron tres tipos de páginas web (tienda en línea, portal de noticias y página web empresarial) y cuatro objetos web por cada tipo de página (carrito de compras, navegación, registro y buscador, para la tienda en línea; navegación, logo, buscador y archivo, para el portal de noticias; y navegación, logo, contacto y quiénes somos, para la página web empresarial).

Para cada objeto web los investigadores seleccionaron un conjunto de páginas donde ese objeto estuviera colocado en diferentes posiciones y entonces pidieron a un grupo de graduados universitarios que localizaran el objeto en cada una de las diferentes páginas. Para medir la velocidad en la que localizaban el objeto web, los investigadores utilizaron el método de registro visual (eye-tracking).

Los resultados indican que, a falta de otras características como tamaño, forma o color, los sujetos encontraron más rápido los objetos cuando estaban colocados en los lugares típicos dentro de la página (Figura 1). Esto significa que las personas tienen claro qué apariencia deben tener y dónde deberían estar colocados los objetos importantes para cada tipo de página web y también que los usuarios se orientan mejor cuando las páginas responden a esas expectativas.

Figura 1. El área más oscura indica el lugar donde, en un experimento anterior, más participantes colocaron el carrito de compras dentro de una retícula de 12 × 8. Elaborado a partir de Roth et al.: 2013.
Figura 1. El área más oscura indica el lugar donde, en un experimento anterior, más participantes colocaron el carrito de compras dentro de una retícula de 12 × 8. Elaborado a partir de Roth et al.: 2013.

Con el uso constante de los sitios web se han desarrollado ciertas expectativas de las cosas que podemos encontrar en ellos; eso no significa que las expectativas siempre hayan sido las mismas o que lo seguirán siendo en el futuro, significa más bien que los objetos pueden evolucionar como también lo hacen los modelos mentales que construimos a partir de los objetos.

Referencias

Norman, D. A. 2014. «Some observations on mental models» en D. Gentner y A. L. Stevens (Eds). Mental Models. Psychology Press.

Roth, S. P. et al. 2013. «Location matters, especially for non salient features — An eye-tracking study on the effects on web object placement on different types of websites» en International Journal of Human-Computer Studies. 71, 228-235.

Patrones de diseño y diseño de interacción

Un patrón de diseño (design pattern) es una solución probada para un problema recurrente en un contexto dado.  Aunque la solución se puede usar una y otra vez esto no significa que se lleve a cabo de la misma manera. Christopher Alexander utilizó el término en este sentido en su libro A pattern language (1977) donde lo aplicó a la arquitectura.

La idea de identificar patrones de diseño para resolver problemas fue importada por la ingeniería del software y la programación orientada a objetos. Más tarde, la misma idea fue aplicada por el diseño de interacción y el diseño de interfaz a los programas de escritorio, a los sitios web y a las aplicaciones en los móviles; con el paso del tiempo, algunas soluciones han funcionado mejor o han sido mejor aceptadas.

Un ejemplo de patrón de diseño es el conocido como Lienzo/paleta (Canvas/palette): un lienzo en blanco junto a una paleta con los iconos de las herramientas disponibles y que ha sido utilizado con éxito por muchos programas de edición de gráficos vectoriales y de edición de imágenes.

En la siguiente figura se pueden ver otros ejemplos de patrones de diseño: los hay para organizar información y para disponer imágenes; para introducir y visualizar datos; también los que sirven para facilitar la navegación.

patterns
Figura 1. Ejemplos de patrones de diseño para la interacción

Existen colecciones de patrones de diseño de interacción, algunas de ellas muy bien organizadas, donde se pueden encontrar detalles sobre su funcionalidad. Los nombres y formatos pueden variar según el autor, pero en general contienen lo siguiente:

  • Qué problema se trata de resolver
  • Cuándo usar el patrón
  • Cuál es la solución
  • Por qué usar el patrón

Los patrones de diseño pueden funcionar como soluciones prediseñadas basadas en principios y buenas prácticas; son una buena opción siempre y cuando correspondan a las necesidades del proyecto y no sólo se utilicen porque se ven bien o porque ya venían en la plantilla.