Home Blog/ Estilo de Vida/
Estilo de Vida

Est√°ndares para el dise√Īo de interfaces gr√°ficas para crear la mejor UX

Lorena Paez - 05 May 21

Articulo

7 min.

¬°Conoce los est√°ndares para el dise√Īo de interfaces gr√°ficas! Espera‚Ķ ¬°¬Ņest√°ndares de qu√©?!¬†Sabemos que a simple vista puede sonar un poco t√©cnico y complicado, pero no te alarmes. ¬°Hemos venido a salvarte! Qu√©date leyendo y aprende m√°s de este concepto de dise√Īo web.¬†

En la actualidad, vivimos en una era tecnol√≥gica en la cual todos hemos tenido acercamiento con distintos sistemas operativos, ya sea Windows, iOs, Android, entre otros. Cada uno tiene una serie de caracter√≠sticas espec√≠ficas que lo hacen m√°s o menos atractivo al p√ļblico en cuanto al dise√Īo y manejo de su sistema operativo.¬†

Esto es a lo que llamaremos interfaz gr√°fica, o lo que en un t√©rmino m√°s coloquial podr√≠a ser el men√ļ principal del programa. A partir de esto, el usuario tendr√° m√°s facilidad para entender el software.¬†

Para que se hayan podido construir cada uno de estos sistemas operativos, as√≠ como muchas p√°ginas web y apps m√≥viles, se ha tenido que pasar por un proceso de construcci√≥n en base a est√°ndares para el dise√Īo de interfaces gr√°ficas establecidos por cada compa√Ī√≠a.¬†

Es por ello que, en este art√≠culo, no solo conoceremos m√°s a profundidad qu√© son las interfaces gr√°ficas, sino tambi√©n cu√°les son las¬†caracter√≠sticas¬†y cu√°les son los est√°ndares para el dise√Īo de interfaces gr√°ficas que debemos seguir para lograr un modelo eficiente.

‚Ė∂ Si ya eres un experto en interfaces, te recomendamos ir directamente a los est√°ndares para el dise√Īo de interfaces gr√°ficas en el punto 3 del art√≠culo.

¬ŅQu√© es una interfaz gr√°fica?¬†

Una interfaz gr√°fica, o tambi√©n conocida en ingl√©s como Grafic User Interface (GUI), es el espacio visual de im√°genes y objetos mediante el cual una m√°quina (ordenador, laptop, tablet o smartphone) y un usuario (cualquier persona) interact√ļan.¬†

A mediados de los 70, las GUI comenzaron a sustituir a las interfaces de líneas de comando, los cuales son esos cuadros de fondo negro donde salen diversas letras y numeros. Esto permitió que la interacción con las computadoras fuera más sencilla e intuitiva, ya que las personas, sobre todo en aquella época, conocían poco o nada acerca de programación y comandos cibernéticos. 

Interfaz de líneas de comando

Interfaces de líneas de comando

Interfaz Gr√°fica Actual (Windows 10)

Interfaz Gr√°fica Actual (Windows 10)

Básicamente las interfaces gráficas actuales sirven para mejorar la interacción entre el usuario y los distintos sistemas operativos que manejan las computadoras, laptops y celulares. 

Adem√°s, ramas como el Dise√Īo Gr√°fico y Dise√Īo Industrial implementan en sus conocimientos el aprendizaje sobre el funcionamiento y desarrollo de interfaces gr√°ficas. Las herramientas principales que utilizan son recursos como la gr√°fica, los pictogramas, los estereotipos y la simbolog√≠a, sin afectar el funcionamiento t√©cnico eficiente.

Como bien mencionamos previamente, las primeras interfaces web que existieron eran líneas de comando, las cuales, hasta el día de hoy, muchas personas no comprenden. Por ejemplo, es fundamental conocer las etiquetas HTML y propiedades CSS. En aquel tiempo, solo personas con amplios conocimientos informáticos podían interactuar con facilidad con los sistemas operativos, lo cual supuso, hasta cierto punto, dependencia. 

Es por ello que en las interfaces gr√°ficas se reemplazaron los comandos y los n√ļmeros por elementos gr√°ficos y espec√≠ficos que sean m√°s atractivos a la vista del usuario.

El primer sistema operativo en implementar interfaces gr√°ficas amigables fue el de las Macintosh en la d√©cada de los 80. Convirtieron un sistema operativo complejo en algo tan f√°cil de usar como una tostadora, seg√ļn las propias palabras de los desarrolladores.¬†

Posteriormente, Windows lanz√≥ su primera versi√≥n: ‚ÄúWindows 1‚ÄĚ. Un sistema operativo que se caracterizaba por tener una interfaz gr√°fica similar, lo que le vali√≥ una demanda millonaria de parte de Apple.

Saber c√≥mo dise√Īar una buena interfaz gr√°fica no solo es importante en el √°mbito de sistemas operativos o programas, sino tambi√©n en aspectos m√°s sencillos como el dise√Īo de p√°ginas web. Se estima que casi el 70% de usuarios abandonan una p√°gina web al sentir que esta es poco amigable o dif√≠cil de entender.¬†

Modelo interactiva de interfaz gr√°fica

Imagen: Freepik

Características de una buena interfaz gráfica 

1. Simpleza

La simplicidad de una interfaz gr√°fica le permite al usuario usarla de forma fluida. Si bien a√Īadir caracter√≠sticas y contenido adicional a tu aplicaci√≥n puede ser tentador, debes preguntarte si realmente dicha funci√≥n es necesaria para el usuario. Debes estar seguro de que cada una de esas funciones tenga un prop√≥sito espec√≠fico y mejore la experiencia del usuario.

2. Evitar errores en la configuración de las acciones.

El sistema operativo debe encontrarse totalmente pulido para que el usuario pueda manipularlo sin problemas. Una forma de asegurar que el sistema funcione seg√ļn las necesidades del usuario, es sabiendo c√≥mo optimizar una interfaz gr√°fica a trav√©s del prototipado con metodolog√≠a Lean.

3. Claridad

Para mejorar la claridad del dise√Īo de una interfaz gr√°fica debes colocar textos precisos a botones. Asimismo, nombrar apropiadamente los elementos del men√ļ y cualquier otro contenido textual que posea la interfaz. Los mensajes deben ser concisos. Tu usuario espera poder navegar r√°pidamente la p√°gina. Si no eres conciso en tus mensajes, los usuarios no los leer√°n y afectar√° de forma negativa su experiencia.

4. Representación fija y permanente de un determinado contexto de acción (fondo)

Evitar que se produzcan cambios bruscos en el dise√Īo de interfaces gr√°ficas. Por ejemplo, al cambiar de pesta√Īa o carpeta.¬†

5. El objeto de interés ha de ser de fácil identificación

Debe existir una buena organización en el interfaz gráfica del sistema operativo para que todas las herramientas puedan ser halladas con facilidad por el usuario.

6. Dise√Īo ergon√≥mico mediante el establecimiento de men√ļs, barras de acciones e iconos de f√°cil acceso

Eso hace referencia a tener una interfaz que se sienta familiar. Se debe emplear iconos universales como el hamburger menu en aplicaciones móviles e incluso en interfaces web de ser necesario. También, debes mantener ciertos elementos en sitios específicos; por ejemplo, el logo en un sitio web se suele colocar en la parte superior izquierda.

7. Existencia de herramientas de ayuda y consulta

Siempre es necesario que, en caso el usuario no sepa al respecto a la manipulación del interfaz, pueda encontrar un servicio de soporte. 

8. Las acciones deben ser √ļtiles y reversibles, con efectos inmediatos

Hace referencia a que cualquier cambio en el dise√Īo de la interfaz que desee realizar el usuario en base a sus preferencias pueda ser ejecutado de manera simple, pero, a su vez, reversible en caso que lo desee.¬†

9. Rapidez

Todas las caracter√≠sticas mencionadas previamente permiten que el usuario pueda navegar y aprender a controlar la interfaz m√°s r√°pidamente. Si bien la claridad y la simplicidad permiten que el usuario pueda ‚Äúleer‚ÄĚ la interfaz con mayor velocidad, es importante que esa fluidez se vea reflejada cada vez que el usuario realiza alguna acci√≥n. Esto quiere decir que la respuesta de la interfaz gr√°fica debe ser pr√°cticamente inmediata.

Características de una buena interfaz gráfica 

Imagen: Freepik

Est√°ndares para el dise√Īo de interfaces gr√°ficas

Consideraciones del dise√Īo de interfaces gr√°ficas

Existen 3 factores que se consideran indispensables para el dise√Īo de una interfaz gr√°fica efectiva. A continuaci√≥n, te listamos estos est√°ndares para el dise√Īo de interfaces gr√°ficas.¬†

‚úÖ Factores de desarrollo. Estos ayudan a mejorar la comunicaci√≥n visual respecto al sistema operativo o p√°gina web. Esto incluye kits de herramientas y librer√≠as de componentes, soportes para un r√°pido prototipado, y adaptabilidad. Estos factores est√°n ligados a la fase inicial del proceso de dise√Īo de una interfaz gr√°fica.¬†

‚úÖ Factores de viabilidad. Estos¬† est√°ndares para el dise√Īo de interfaces gr√°ficas tienen en cuenta factores humanos y expresan una fuerte identidad visual. Esto incluye: habilidades humanas, la identidad del producto, un claro modelo conceptual, y m√ļltiples representaciones. Se basan en que tan impactante consideran que resultar√°¬†el resultado final del interfaz.¬†

‚úÖ Factores que aceptaci√≥n. Seg√ļn los¬†est√°ndares para el dise√Īo de interfaces gr√°ficas, en los factores de aceptaci√≥n est√°n la pol√≠tica de la corporaci√≥n, los mercados internacionales, y la documentaci√≥n y entrenamiento. Esto est√° ampliamente ligado a que tanto las personas y los mercados van a sentirse atra√≠dos por el interfaz elaborado.¬†

Modelo de interfaz gr√°fica de Facebook

Imagen: Freepik

Lenguaje visible de las interfaces gr√°ficas

Los est√°ndares para el dise√Īo de interfaces gr√°ficas, tambi√©n se refiere a todas las t√©cnicas gr√°ficas y visuales utilizadas para comunicar el mensaje o contexto deseado. Esto incluye:¬†

‚úÖ Disposici√≥n o Layout: formatos, proporciones, y mallas (grids). Hace referencia a la estructura global de una interfaz gr√°fica. Adem√°s, ser√° lo que, usualmente, se mantiene independientemente de si se est√° usando una herramienta u otra pesta√Īa.¬†

✅ Organización: ya sea 2D y 3D.  

‚úÖ Tipograf√≠a: selecci√≥n de tipos de letra y estilos, incluyendo la anchura fija y variable.¬† La tipograf√≠a, seg√ļn los est√°ndares para el dise√Īo de interfaces gr√°ficas, es un elemento muy importante en la interfaz de un sistema operativo o p√°gina web, ya que un estilo de letra llamativo puede significar una diferencia marcada.¬†

‚úÖ Color y textura: color, textura y luminancia aportan informaci√≥n compleja y realidad pictorial. Seg√ļn la psicolog√≠a del color, los tonos y las texturas que usemos deben ir de acuerdo a lo que la interfaz gr√°fica quiera transmitir. Por ejemplo, si hablamos de p√°ginas web relacionadas al arte, suelen ser bastante coloridas con distintos dise√Īos. Sin embargo, si visitamos la p√°gina web de una marca de ropa de alta costura, sus colores son sobrios y sin textura.¬†

✅ Imágenes: signos, iconos y símbolos, desde lo fotográficamente real a lo abstracto. Es importante saber elegir el tipo de imágenes en base a lo que nuestro programa o página web quiera transmitir. Además, tomar en cuenta los detalles anteriores, como los colores, ya que las imágenes deben combinar para mantener la armonía en la presentación de la interfaz gráfica. 

‚úÖ Animaci√≥n: un display din√°mico o cin√©tico. ¬°Esto es muy importante en la utilizaci√≥n de im√°genes relacionadas con el v√≠deo! Actualmente, est√° en tendencia en las interfaces de p√°ginas web colocar peque√Īos videos o gifs, para que, de esta manera, llame¬†m√°s la atenci√≥n del usuario.¬†Asimismo, podemos emplear animaciones web.

Lenguaje visible de las interfaces gr√°ficas: interfaz de ps4

Imagen: IGN Espa√Īa

Principios fundamentales del lenguaje visible 

Seg√ļn los¬†est√°ndares para el dise√Īo de interfaces gr√°ficas, todas las caracter√≠sticas mencionadas anteriormente se rigen en base a 3 principios fundamentales que te explicaremos a continuaci√≥n.¬†

1. Organizar

La principal tarea de los desarrolladores de interfaces gráficas es construir un elemento visualmente atractivo con una estructura conceptual clara y consistente. Debe ser de fácil navegación para los usuarios, además que la propia interfaz cuenta con diversos atajos que simplifiquen la experiencia del usuario. 

Asimismo, es importante lograr interconectar los √≠tems que guardan alg√ļn tipo de relaci√≥n y disociar los √≠tems independientes, para de esta manera mejorar la organizaci√≥n visual de la interfaz gr√°fica.¬†

Por √ļltimo, otro aspecto a resaltar en este punto es el de la navegabilidad, ya que, seg√ļn est√°ndares para el dise√Īo de interfaces gr√°ficas, este debe estar construido de tal manera que la atenci√≥n del usuario est√© dirigida a los √≠tems m√°s importantes.¬†

¬ŅQuieres saber c√≥mo dise√Īar una interfaz gr√°fica efectiva? Inscr√≠bete al curso online de UX: Dise√Īo accesible e interactivo y aprende c√≥mo mejorar la experiencia del usuario a trav√©s de conocimientos de arquitectura de la informaci√≥n.¬†

2. Economizar

Esto consiste en simplicidad, claridad, singularidad y √©nfasis. La simplicidad hace referencia a que se deben incluir √ļnicamente los aspectos que permitan la mejor comunicaci√≥n e interacci√≥n posible entre el sistema operativo/p√°gina web y el usuario. De la misma forma, dentro de los¬†est√°ndares para el dise√Īo de interfaces gr√°ficas es importante elaborar iconos claros y concisos.¬†

Un icono ambiguo √ļnicamente llevar√° a la confusi√≥n del usuario, cosa que no buscamos. En cuanto a la singularidad que se menciona, las propiedades de los elementos necesarios deben ser caracter√≠sticas √ļnicas, justamente para buscar destacar en el mercado.¬†Por √ļltimo, el √©nfasis resalta el hecho de que los elementos importantes de una interfaz gr√°fica deben ser simplemente vistos por el usuario.¬†

3. Comunicar

La interfaz gr√°fica debe mantener un balance entre legibilidad, tipograf√≠a, simbolismo, m√ļltiples vistas, y color o textura, para comunicar adecuadamente. Normalmente, seg√ļn los¬† est√°ndares para el dise√Īo de interfaces gr√°ficas, se recomienda que en un mismo interfaz como m√°ximo se vean 3 tipos de letras distintas¬†con 3 tama√Īos distintos;¬†esto con el objetivo de mantener cierto orden general.¬†

En cuanto a la elecci√≥n de colores, esta permite mejorar la comunicaci√≥n al enfatizar informaci√≥n importante, incrementar la comprensibilidad, reducir errores de interpretaci√≥n, entre otros. En fin, si un color es usado correctamente, se puede transmitir mejor el mensaje. A prop√≥sito, ¬Ņya conoces la teor√≠a del color? Aprende qu√© significan los colores para optimizar el dise√Īo de la interfaz gr√°fica.¬†

Interfaz gr√°fica Windows 8.1

Imagen: Ediciones Eni

Esperamos que el contenido de la nota de hoy te haya sido √ļtil. A lo largo de todo el art√≠culo hemos aprendido acerca de qu√© son las interfaces gr√°ficas y sus caracter√≠sticas. Asimismo, hemos descubierto cu√°les de ellas hacen el dise√Īo de interfaces gr√°ficas buenas y beneficiosas para el consumo del sistema operativo o p√°gina web.¬†

Si bien es cierto que los est√°ndares para el dise√Īo de interfaces gr√°ficas que hay son varios, es importante tener en cuenta cada uno de ellos para producir un elemento de calidad. De igual manera, ahora sabemos que es indispensable darle importancia al factor visual de las distintas interfaces que dise√Īemos.¬†

Ahora que manejamos toda esta informaci√≥n, es momento de poner las manos a la obra¬† y empezar a dise√Īar una brillante interfaz gr√°fica. Da el primer paso con ayuda del curso online de Fundamentos de UX & UI: Dise√Īo de interfaces y los mejores software para dise√Īo de interfaces.¬†

¬°Mucha suerte en tus siguientes proyectos! Nos vemos pronto.