El círculo: rey del diseño plano

El diseño plano podría representar una oportunidad para cambiar el paradigma en el diseño de interfaces de usuarios. Redefinir los widgets brinda una oportunidad para explorar.

Retrato de Omar Sosa Tzec Omar Sosa Tzec Ann Arbor Seguidores: 10

Opiniones:
14
Votos:
54
Compartir:

El Flat Design, o diseño plano,1 es una tendencia actual en el diseño de interfaces gráficas que consiste básicamente en descartar cualquier exceso visual de los componentes de la interfaz —conocidos como widgets—. Podríamos interpretarlo como una suerte de regreso al «estilo suizo»2 del siglo pasado, pero aplicado a interfaces: utiliza líneas y formas como unidades visuales, evita el uso de texturas y sombras, y emplea el color como indicador visual.3

En las interfaces gráficas más actuales y novedosas, los elementos cambian de forma y color a través del tiempo con el fin de indicar el estado actual del sistema. En varias interfaces de este tipo resulta interesante observar el recurrente uso del círculo en la composición de widgets. Parece ser que los círculos, mostrados total o parcialmente, expresan efectivamente la variable tiempo sin necesidad de mayor información visual.

Por ejemplo, en el sistema de publicación web Wordpress,4 al momento de guardar algún cambio aparece un pequeño widget compuesto de dos círculos: uno que funciona como «contenedor» y otro (cercano a la orilla) que hace las veces de manecilla de reloj. Cuando la función de guardar está en proceso, el círculo pequeño gira alrededor del centro del círculo grande justo para indicar el avance en el tiempo.

Cuando se envía un video a través del sistema de mensajes por Whatsapp5, se muestra un cuadro del video con un widget en el centro que indica el progreso en el envío. El widget se compone de un círculo que se muestra con un fondo negro transparente y una circunferencia en blanco que va completándose conforme progresa el envío, además de un cuadrado plano que funciona como símbolo de stop. Cuando el video ha sido descargado, el círculo cambia a un blanco transparente con un triángulo que funciona como símbolo de play. Resulta interesante la doble función comunicativa conseguida en este diseño a pesar de su simpleza: por un lado, comunica el progreso en el envío, por el otro, refleja su affordance6 como botón.

Cuando Google Hangout7 se emplea para realizar llamadas de voz, al no implicar la emisión de video, el usuario observa una interfaz de fondo negro con tres widgets cuya base es un círculo. El más grande de ellos cambia de grosor evocando a una onda. Esto permite al usuario observar cuándo la persona del otro lado está hablando y con qué intensidad. Los otros dos círculos (sin relleno aparente) se interpretan como botones. Uno para discar y el otro para colgar. En ambos casos, el ícono interior comunica la funcionalidad del widget.

La App para bocetar en el iPad, llamada Paper,8 introduce una funcionalidad para deshacer acciones, que consiste en colocar dos dedos en la pantalla y rotarlos en sentido contrario a las manecillas del reloj. El widget asociado a esta funcion muestra un círculo cuyo relleno se decrementa (a modo de gráfica de pastel) conforme el usuario retrocede en el tiempo. Este widget presenta dos aspectos interesantes: primero, la interpretación de la función deshacer a través de gestos;9 segundo, el usuario puede notar la cantidad de esfuerzo puesto en el boceto, ya que el círculo decrece en proporción al número de acciones efectuadas por el usuario.

Además del aspecto funcional de los casos anteriores, pueden observarse muchos otros ejemplos en los que el uso de círculos está más relacionado a cuestiones estéticas. Se utiliza para componer botones, indicar escalas o para recortar fotos de perfil de usuario.10 En estos casos, donde no existe un valor funcional agregado, el círculo toma el lugar de formas rectangulares empleadas en el pasado.

No obstante, este enfoque puede limitar el aspecto comunicativo de la interfaz. Por ejemplo, en el iOS 7 de Apple,11 el widget para indicar la fuerza en la señal telefónica ha sido modificado. De ser una hilera de barras ordenadas por su tamaño ascendente, ahora pasa a una hilera de círculos del mismo tamaño y alineados horizontalmente.12 Cuando el usuario leía el widget original, podía interpretar facilmente la cantidad de señal «en el aire»​, ya que los diferentes tamaños ayudaban a crear esa metáfora en su mente. En cambio, los nuevos círculos no reflejan ninguna dimensión física por medio de la forma. Se perciben más bien como unidades de una escala. Por consiguiente, el nivel de abstracción (en la lectura del widget) es mayor. Esto cambia la interpretación de la fuerza de la señal por parte del usuario. Este es un punto clave del diseño plano: incrementar el nivel de abstracción y romper con la fuerte asociación metafórica de la interfaces con elementos del mundo real.

Los widgets basados en el círculo producen resultados efectivos porque encapsulan la affordance y el tiempo. Cuando el círculo es empleado como una unidad de composición, la cualidad que tiene de representar un todo le permite al usuario entender cuál es el estado actual del sistema (si algo ha sido completado o no). Por consiguiente, el usuario también puede inferir futuros estados del sistema. Por ejemplo, un usuario de Whatsapp sabrá que algo salió mal en la descarga de video si la circunferencia (mostrada en el widget) nunca se completa.

Otra ventaja del círculo es el conocimiento previo que tenemos los usuarios para manipular objetos esferoides en el mundo real —prácticamente desde que nacemos—, lo que nos ayuda a comprender rápidamente su uso en la interfaz. Obsérvese entonces que, a pesar de ser útil para incrementar el nivel de abstracción en la interfaz, el círculo no escapa de su cualidad metafórica.

Ejemplos como los anteriores nos permiten iniciar una conversación sobre el rol y oportunidades que presenta el diseño plano y sus implicaciones sobre la experiencia del usuario (UX por sus siglas en inglés).13 Sin embargo, estos ejemplos también nos permiten reflexionar sobre las interfaces como composiciones visuales —o «composiciones interactivas»— «​usables» y estéticas. Dado queque los límites entre interfaz de usuario e información parecen volverse cada vez más difusos, aspectos como la consolidación del cómputo ubicuo,14 las interfaces operadas por gestos15 y la futura incursión de pantallas flexibles,16 representan claros desafíos para los diseñadores de información.

Aunque los principios de diseño prácticamente no cambiarán, las características de los contextos de uso sí lo harán. Diferentes niveles de alfabetización (por ejemplo: alfabetización informática17), factores de índole social, económico, y cultural, infraestructura tecnológica disponible, entre otros aspectos, influirán en el contexto de uso y, en consecuencia, implicarán nuevas formas de diseñar la información. El diseño plano y la explotación del círculo son intentos de encontrar esas nuevas formas.

Retrato de Omar Sosa Tzec Omar Sosa Tzec Ann Arbor Seguidores: 10

Opiniones:
14
Votos:
54
Compartir:

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
  1. Ejemplos de flat design.
  2. Artículo sobre el estilo suizo.
  3. Visual cue en ingles.
  4. Sitio oficial de Wordpress.
  5. Sitio oficial de Whatsapp.
  6. En este artículo consideramos el término affordance como la cualidad percibida, o cualidades, con las que un objeto comunica cómo puede ser operado o manipulado, dada una tarea por realizar y en la cual la participación de dicho objeto es necesaria. Por ejemplo, las cualidades con las que debemos diseñar un botón dentro de una interfaz para que el usuario efectivamente distinga que es un botón. En el contexto de interfaces, o experiencia de uso en general, este concepto fue replanteado por Donald Norman.
  7. Sitio oficial de Google Hangout.
  8. Sitio oficial de Paper.
  9. Cuando estamos acostumbrados a acceder a la función a través del menú de Edicion, o bien presionando la tecla 'CONTROL' y 'Z' al mismo tiempo.
  10. Artículo sobre las imágenes de perfil recortadas en círculo.
  11. Sitio oficial de iOS 7.
  12. Extenso artículo donde se hace una revisión del iOS 7 y se puede observar los resultados de su diseño plano en diversas partes del sistema.
  13. Definición del diseño de experiencia.
  14. Presentación académica sobre cómputo ubicuo.
  15. Reporte académico sobre interacción por gestos e interacción corporizada (embodied interaction).
  16. Presentación de la pantalla sensible de Samsumg.
  17. Definición de alfabetización informática.
Código QR de acceso al artículo El círculo: rey del diseño plano

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web.

Descargar PDF

Debate

Logotipo de
Mi opinión:

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Emiliano Maltisotto
0
Emiliano Maltisotto
Sep 2014

Muy buen articulo!

Yo pienso que es una tendencia, una estética que durará un determinado tiempo como en su momento lo hizo el Realismo.

Creo que el Flat Design lo implementó Windows mucho antes que cualquiera, hasta que empezó a definirse y a definir sus limites, a ese punto es tomado por Apple y lo adapta a su sistema operativo "iOS 7" mejorandolo en ciertos aspectos y haciendolo suyo.

Hay muchas posibilidades con esta nueva tendencia, la veo muy proclive a modificarse y adaptarse, característica que no veo en el Realismo y característica que para mi marcará su fin.

0
Responder
Retrato de Livier Mendez
2
Livier Mendez
Mar 2014

Me encanto tu tema, sobre todo por la parte de cómo se aplica el diseño en una interfaz, que si bien al verse simple y muchos lo tachen de seco y algo hecho para rápido, estoy muy a favor de que si bien, ayuda al usuario a ser más analítico, ya que al ver las diferentes formas que va tomando en la aplicación hace que él se acostumbre a ser más intuitivo, pero intuitivo con razón. Y el hecho de que sea simple no significa que no se allá trabajado en diseño, ya que para llegar a esa solución se llevó por un sinfín de análisis. ¡Buen tema!

1
Retrato de Omar Sosa Tzec
10
Omar Sosa Tzec
Mar 2014

Muchas gracias Livier. ¡Saludos!

0
Responder
Retrato de Fernando Navia Meyer
120
Fernando Navia Meyer
Mar 2014

No deja de sorprenderme. Las Leyes de la Gestalt se mantienen como tales Leyes, aunque el entorno de su uso continúa cambiando.

4
Retrato de Tata Irrazabal
3
Tata Irrazabal
Mar 2014

lo mismo digo Fernando

0
Responder
Retrato de Ulises Arvizu
1
Ulises Arvizu
Mar 2014

interesante el articulo, he estado antes esta batalla entre el "flat design" y el "skeuomorph", abandonado por apple en su última versión de IOS, y al tener experiencias para diseñar para Windows Phone, el diseño plano tiene sus limitantes, algunos han argumentado que es el diseño fácil o para diseñadores flojos y otros tanto hablan de que este diseño se centra en el UX y en la interacción con el usuario porque no pierdes tiempo en las sutilezas del diseño visual...

0
Retrato de Omar Sosa Tzec
10
Omar Sosa Tzec
Mar 2014

Creo que el tema es interesante si hacemos a un lado las cuestiones estilísticas. Los diseñadores son curiosos y al haber ahora la oportunidad de "jugar" con interface táctiles, espero ver más experimentos visuales e interactivos en productos de consumo masivo. Pero claro, el diseño plano también tiene sus limitaciones si sólo nos centramos en aspectos formales. Y lo mismo con los skeumorfismos.

0
Retrato de Alkachofa Mekott
0
Alkachofa Mekott
Mar 2014

Ya en este plano: Pienso que el "skeuomorph" definitivamente tiene su lugar y su tiempo, nos ayudo a trasladar la idea de la realidad a entornos virtuales, y nos preparo para comprender e interpretar el "flat design" de algunas interfaces. Siempre dependerá de los usuarios para tomar la decisión de su uso.

¿Será que el "flat design" es para usuarios expertos o avanzados?

1
Retrato de Ulises Arvizu
1
Ulises Arvizu
Mar 2014

si justamente el asunto es verlo como opciones en nuestro abanico de posibilidades... no hay usos absolutos!

Enlace

1
Retrato de Lucas Romero
2
Lucas Romero
Mar 2014

Una cosa es "diseño plano" como el de Windows8 (aburrido) otro es el de Android KitKat y iOS, este último un poco mas atractivo que mezcla algunos otros recursos visuales interesantes.

0
Responder
Retrato de Brian Huezo
1
Brian Huezo
Mar 2014

Me pregunto. Widget? Sera este el correcto uso de esta palabra? Es definido como un mecanismo al cual no se le ha dado nombre.

0
Retrato de Omar Sosa Tzec
10
Omar Sosa Tzec
Mar 2014

En este caso "widget" es usado en vez de "GUI widgets".

0
Responder
Retrato de Martino Liu
7
Martino Liu
Mar 2014

Interesante y refrescante.

1
Responder
Retrato de Joaquín Eduardo Sánchez Mercado
549
Joaquín Eduardo Sánchez Mercado
Mar 2014

Me gustaría más que cambiara el tiempo de espera que la percepción de la forma. Las rayitas, cuadrados o círculos no cambian eso. Pero puede que algo se gane con ello.

0
Responder

Te podrían interesar

Retrato de Lluïsa Díaz
Autor:
Lluïsa Díaz
Título:
La industria superlativa del videojuego se reunió en Barcelona
Sinopsis:
Lo ocurrido en la feria Gamelab 2012 en Barcelona, indica que el negocio del videojuego demanda nuevos modelos de negocio, múltiples plataformas y diversos géneros.
Compartir:
Interacciones:
Votos:
6
Seguidores:
20
Ilustración principal del artículo Diseño UX en el desarrollo de tecnología educativa
Autor:
Mara Serrano
Título:
Diseño UX en el desarrollo de tecnología educativa
Sinopsis:
¿Por qué el diseñador gráfico puede abordar proyectos de tecnología educativa mediante el paradigma del diseño de experiencias?
Compartir:
Interacciones:
Votos:
19
Opiniones:
3
Seguidores:
42
Retrato de Pau De Riba
Autor:
Pau De Riba
Título:
El diseño invisible
Sinopsis:
Superada la etapa del diseño «premium», signo de calidad, el buen diseño debería convertirse en un «commodity»; otro componente de la sociedad del bienestar que damos por supuesto.
Traducciones:
Compartir:
Interacciones:
Votos:
112
Opiniones:
59
Seguidores:
48
Ilustración principal del artículo Diseño y medios de fabricación personal
Autor:
Manuel Martínez Torán
Título:
Diseño y medios de fabricación personal
Sinopsis:
En la actualidad, los diseñadores estamos reflexionando sobre cómo buscar formas de producir y dar a conocer nuestra capacidad por nosotros mismos.
Compartir:
Interacciones:
Votos:
62
Opiniones:
18
Seguidores:
75
Ilustración principal del artículo Personalización de objetos en los juegos de Facebook
Autor:
Lluïsa Díaz
Título:
Personalización de objetos en los juegos de Facebook
Sinopsis:
El caso de Dragon City y la personalización eterna del dragón como elemento base de diseño.
Compartir:
Interacciones:
Votos:
14
Opiniones:
10
Seguidores:
20
Ilustración principal del artículo La era smart
Autor:
Mauricio Arboleda Acosta
Título:
La era smart
Sinopsis:
Un estudio reciente de Global Web Index sostiene que Facebook es la plataforma social más popular del mundo con un 56% de usuarios activos. Youtube ocupa el segundo puesto.
Traducciones:
Compartir:
Interacciones:
Votos:
13
Opiniones:
5
Seguidores:
10
Retrato de Miguel Gallego
Autor:
Miguel Gallego
Título:
La súbita muerte del maquetador
Sinopsis:
Los nuevos modelos de edición eliminarán el oficio de maquetista, que será sustituido, por un lado, por el editor, y por el otro, por el diseñador.
Compartir:
Interacciones:
Votos:
74
Opiniones:
95
Seguidores:
38
Retrato de Diego Rodriguez
Autor:
Diego Rodriguez
Título:
Cómo implementar el Design Thinking
Sinopsis:
Muchos empresarios entienden al Design Thinking como una simple receta para innovar.
Compartir:
Interacciones:
Votos:
92
Opiniones:
44
Seguidores:
43

Próximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

4 semanas
29 Julio

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 semanas
2 Septiembre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 semanas
16 Septiembre

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 semanas
30 Septiembre

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

4 semanas
21 Octubre