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.

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
118
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
546
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 Tendencias futuras de las artes visuales
Autor:
Roberto Martínez Garza
Título:
Tendencias futuras de las artes visuales
Sinopsis:
Para poder hacer un pronóstico creíble acerca de nuestro futuro, debemos también mirar hacia atrás, hacia un pasado no tan remoto.
Compartir:
Interacciones:
Votos:
14
Seguidores:
14
Retrato de Fernando Navia Meyer
Autor:
Fernando Navia Meyer
Título:
¬ŅDise√Īo Gr√°fico o Comunicaci√≥n Visual?
Sinopsis:
Este artículo es una expresión de agradecimiento a Joan Costa, por su fecunda capacidad de innovar conocimiento a través de su visión prospectiva, en beneficio de la disciplina.
Compartir:
Interacciones:
Votos:
210
Opiniones:
84
Seguidores:
118
Ilustraci√≥n principal del art√≠culo Impresi√≥n 3D, ¬Ņherramienta para construir o arma para destruir?
Autor:
Valeria Lobos
Título:
Impresi√≥n 3D, ¬Ņherramienta para construir o arma para destruir?
Sinopsis:
La impresión en 3D no está exenta de problemas éticos y morales que debemos considerar.
Compartir:
Interacciones:
Votos:
16
Opiniones:
20
Seguidores:
8
Retrato de Samuel Cortina
Autor:
Samuel Cortina
Título:
La nueva evolución de la información
Sinopsis:
¬ŅC√≥mo se llama la mayor luna del planeta enano Plut√≥n? Preguntas como esta parecieran estar reservadas √ļnicamente a especialistas o expertos en la materia.
Compartir:
Interacciones:
Votos:
44
Opiniones:
11
Seguidores:
25
Retrato de José Moriano
Autor:
José Moriano
Título:
Resistencia a los cambios en sitios y aplicaciones web
Sinopsis:
Cómo atenuar las reacciones de rechazo a lo nuevo por parte de los usuarios más críticos.
Compartir:
Interacciones:
Votos:
33
Opiniones:
7
Seguidores:
4
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:
189
Retrato de Rubén Vázquez
Autor:
Rubén Vázquez
Título:
Jugar para aprender
Sinopsis:
¬ŅPor qu√© jugamos? ¬ŅQu√© sentimos al vivir esta experiencia? ¬ŅQu√© es lo que la hace divertida y satisfactoria? ¬ŅC√≥mo podemos implementar esta metodolog√≠a en la ense√Īanza de dise√Īo?
Compartir:
Interacciones:
Votos:
23
Opiniones:
14
Seguidores:
7
Retrato de Vero Orso
Autor:
Vero Orso
Título:
¬ŅC√≥mo no pensar en dise√Īo adaptable?
Sinopsis:
El dise√Īo adaptable (o responsive design) es la nueva manera de dise√Īar para medios digitales.
Compartir:
Interacciones:
Votos:
75
Opiniones:
40
Seguidores:
66

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

Branding Corporativo

Branding Corporativo

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

4 semanas
20 Mayo

Estrategia de Marca

Estrategia de Marca

15 claves para programar el dise√Īo de s√≠mbolos y logotipos de alto rendimiento

4 semanas
24 Junio

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