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.

Seguidores:
10
Opiniones:
14
Votos:
54
Compartir:
  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
116
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
537
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 Angel S√°nchez
Autor:
Angel S√°nchez
Título:
Qu√© es ser un dise√Īador √°gil
Sinopsis:
Ser un dise√Īador √°gil quiere decir que est√°s metido de lleno en entornos de desarrollo de software con metodolog√≠as √°giles como Kanban, Scrum, etc.
Interacciones:
Votos:
155
Opiniones:
138
Seguidores:
143
Ilustraci√≥n principal del art√≠culo El dise√Īador gr√°fico en el Game Design
Autor:
Pablo √Ālvarez
Título:
El dise√Īador gr√°fico en el Game Design
Sinopsis:
La industria del desarrollo de videojuegos es sin dudas un campo en el que los dise√Īadores gr√°ficos pueden aportar mucho valor.
Interacciones:
Votos:
132
Opiniones:
61
Seguidores:
178
Ilustraci√≥n principal del art√≠culo Dise√Īando apps para m√≥viles
Autor:
Javier Cuello
Título:
Libro: 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.
Interacciones:
Votos:
55
Opiniones:
17
Seguidores:
154
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:
Interacciones:
Votos:
19
Opiniones:
4
Seguidores:
22
Ilustración principal del artículo Mapas: del arte náutico al GPS
Autor:
Alejandro Ortíz
Título:
Mapas: del arte n√°utico al GPS
Sinopsis:
El campo del dise√Īo es tan amplio que abarca √°reas, a veces insospechadas, como la cartograf√≠a.
Interacciones:
Votos:
71
Seguidores:
15
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.
Interacciones:
Votos:
75
Opiniones:
40
Seguidores:
66
Ilustración principal del artículo La copia en los juegos sociales
Autor:
Llu√Įsa D√≠az
Título:
La copia en los juegos sociales
Sinopsis:
El fen√≥meno de los ¬ęsocial games¬Ľ est√° dando lugar a una pr√°ctica del dise√Īo en la que la copia descarada parece ser la moneda corriente.
Interacciones:
Votos:
24
Opiniones:
20
Seguidores:
20
Ilustraci√≥n principal del art√≠culo Espacio-tiempo en Dise√Īo Gr√°fico
Autor:
Eréndida Mancilla
Título:
Espacio-tiempo en Dise√Īo Gr√°fico
Sinopsis:
El espacio y el tiempo son dos conceptos poco estudiados en el Dise√Īo Gr√°fico. Sin embargo, cada d√≠a parecen estar m√°s presentes en nuestro quehacer.
Interacciones:
Votos:
51
Seguidores:
87

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: 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
4 Febrero 2019

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
4 Marzo 2019

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
8 Abril 2019

Branding Corporativo

Branding Corporativo

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

4 semanas
20 Mayo 2019

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 2019