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
121
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
8
Martino Liu
Mar 2014

Interesante y refrescante.

1
Responder
Retrato de Joaquín Eduardo Sánchez Mercado
554
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

Ilustración principal del artículo Diseñando apps para móviles
Autor:
Javier Cuello
Título:
Diseñando apps para móviles
Sinopsis:
Un libro que llena un vacío de información en español para todos aquellos que quieren comenzar a diseñar Apps y no saben cómo dar sus primeros pasos.
Compartir:
Interacciones:
Votos:
59
Opiniones:
17
Seguidores:
155
Ilustración principal del artículo Chaski’s blues
Autor:
Victor Garcia
Título:
Chaski’s blues
Sinopsis:
El correo postal es un servicio esencial que usamos los diseñadores para enviar y recibir material impreso, pero es cada vez menos confiable y más oneroso. ¿Fenómeno local o regional?
Compartir:
Interacciones:
Votos:
18
Opiniones:
17
Seguidores:
191
Retrato de Juan Carlos López
Autor:
Juan Carlos López
Título:
Neurodiseño a través de la memoria emocional
Sinopsis:
La implementación del factor emocional como parte fundamental de Diseño es la tendencia mundial para la gestión de marcas y productos.
Compartir:
Interacciones:
Votos:
72
Opiniones:
53
Seguidores:
42
Ilustración principal del artículo El diseño de ambientes y las nuevas tecnologías
Autor:
Mariane Garcia Unanue
Título:
El diseño de ambientes y las nuevas tecnologías
Sinopsis:
Vemos surgir nuevos ambientes y espacios que acompañan cambios en los hábitos y comportamientos de las personas. En este escenario ¿cuál es el papel de la tecnología?
Traducciones:
Compartir:
Interacciones:
Votos:
19
Opiniones:
4
Seguidores:
22
Ilustración principal del artículo Inteligencia artificial y creatividad
Autor:
David Espinosa
Título:
Inteligencia artificial y creatividad
Sinopsis:
¿Cuántos años llevamos soñando con la creación de algo que podamos llamar «inteligencia artificial»?
Compartir:
Interacciones:
Votos:
8
Seguidores:
48
Ilustración principal del artículo Hoy he ido al mercado
Autor:
Maria del Pilar Rovira Serrano
Título:
Hoy he ido al mercado
Sinopsis:
El mercado de abastos como ejemplo para explicar el «diseño para todos».
Compartir:
Interacciones:
Votos:
9
Opiniones:
6
Seguidores:
336

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

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

Estrategia de Marca

Estrategia de Marca

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

4 semanas
17 Noviembre

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
3 Febrero