UI: qué define a una buena interfaz gráfica de usuario

Los di­se­ña­do­res web, los de­sa­rro­lla­do­res de software y todos aquellos que quieran serlo se tienen que enfrentar tarde o temprano al término interfaz de usuario. Asimismo, otras abre­via­tu­ras como TUI (Text User Interface) o GUI (Graphical User Interface) se suman a la confusión, cuando esta última, hoy en día, es de gran im­po­r­ta­n­cia para conseguir una buena ex­pe­rie­n­cia de usuario. Puede que los más in­e­x­pe­r­tos se pregunten qué es exac­ta­me­n­te una interfaz de usuario y por qué es tan im­po­r­ta­n­te la interfaz gráfica de usuario para el éxito de las páginas web. En nuestra guía te ofrecemos in­fo­r­ma­ción fu­n­da­me­n­tal sobre el diseño UI y re­s­po­n­de­mos a lo que realmente significa UI.

Una interfaz de usuario, en inglés user interface, a menudo conocida por la abre­via­tu­ra UI, hace re­fe­re­n­cia a la interfaz con la que las personas in­ter­ac­cio­nan con las máquinas. Se trata de la interfaz que permite usar un ordenador para realizar un pedido en una tienda online o para acceder a una app a través de un sma­r­t­pho­ne. Para ello, esta cuenta con los elementos de control de una interfaz, que son visibles para el usuario o a través de los que puede efectuar alguna acción. En ello se incluyen desde simples líneas de comandos basadas en texto hasta in­te­r­fa­ces gráficas de usuario con un diseño más complejo. Al mismo tiempo, una UI también permite que el ordenador envíe un feedback al usuario, de modo que este pueda dar cuenta de si su acción se ha llevado a cabo con éxito.

La interfaz de usuario está ín­ti­ma­me­n­te re­la­cio­na­da con la facilidad de uso de un software o de una página web. Hace tiempo que el objetivo ya no solo es conseguir una interfaz de usuario útil, sino que el aspecto estético también juega un papel im­po­r­ta­n­te. Por co­n­si­guie­n­te, la interfaz de usuario es im­po­r­ta­n­te para una buena ex­pe­rie­n­cia de usuario, es decir, para la ex­pe­rie­n­cia que un usuario tiene grosso modo con una página web o un software. A este respecto, el objetivo de los di­se­ña­do­res web es sentar las bases de una buena ex­pe­rie­n­cia de usuario con una user interface intuitiva, lo que funciona es­pe­cia­l­me­n­te bien a través de una interfaz gráfica de usuario. Sin embargo, también existen otros tipos de UI in­no­va­do­ras que también facilitan la in­ter­ac­ción con los or­de­na­do­res y con otros di­s­po­si­ti­vos.

Desde que se in­ve­n­ta­ron los or­de­na­do­res, cada vez se han de­sa­rro­lla­do métodos más avanzados de in­ter­ac­ción persona-ordenador (IPO), por lo que hoy en día existen numerosas in­te­r­fa­ces de usuario di­fe­re­n­tes. Al comienzo de este de­sa­rro­llo ya se podía hablar de las sencillas Command Line In­te­r­fa­ces (CLI), aunque las numerosas in­no­va­cio­nes que se rea­li­za­ron dieron lugar a una ma­ne­ja­bi­li­dad más sencilla o directa, de modo que desde hace tiempo también se aplican las Natural User In­te­r­fa­ces (NUI). Así, mediante la medición y tra­du­c­ción de ondas ce­re­bra­les es posible —y se sigue in­ve­s­ti­ga­n­do— incluso llevar a cabo el control de los di­s­po­si­ti­vos. A co­n­ti­nua­ción te pre­se­n­ta­mos las di­fe­re­n­tes UI y sus ca­ra­c­te­rí­s­ti­cas.

En el principio no solo era la Tierra, sino también la UI vacía y desolada. Tan solo una línea de comandos y un prompt para mostrar la posición actual o un mensaje cubrieron la oscura pantalla, por ejemplo en el caso de los primeros or­de­na­do­res MS-DOS. Con una interfaz de líneas de comandos o Command Line Interface, en la cual se tecleaban unos comandos es­pe­cí­fi­cos, era posible es­ta­ble­cer la co­mu­ni­ca­ción con el ordenador. Tras el pro­ce­sa­mie­n­to de la petición, el ordenador mostraba el resultado en formato de texto. Esta modalidad de interfaz de usuario ya se ha quedado obsoleta, pero se utiliza para cmd.exe en los sistemas ope­ra­ti­vos Windows, en los que la sintaxis está am­plia­me­n­te orientada a los an­te­pa­sa­dos de DOS. El control mediante una CLI se lleva a cabo a través del teclado y sin necesidad de usar el ratón.

Las Text User In­te­r­fa­ces son algo más cómodas y, en ellas, la in­ter­ac­ción con el ordenador también tiene lugar por medio del teclado. Las TUI marcan el paso de las meras in­te­r­fa­ces de líneas de comando a in­te­r­fa­ces gráficas de usuario. El término se es­ta­ble­ció con po­s­te­rio­ri­dad al de­sa­rro­llo de las in­te­r­fa­ces gráficas de usuario, con el objetivo de poder di­fe­re­n­ciar de un modo abstracto a las Text User In­te­r­fa­ces de las CLI y de las in­te­r­fa­ces gráficas de usuario. Así, el término se convierte en un retrónimo.

La di­fe­re­n­cia con las CLI consiste en que la interfaz utiliza la pantalla como una su­pe­r­fi­cie plana y no orientada a las líneas. Sin embargo, la interfaz sigue eje­cu­tá­n­do­se, tal y como revela su nombre, en modo texto. Los pro­gra­ma­do­res pueden recurrir no­r­ma­l­me­n­te a 256 ca­ra­c­te­res y hoy en día, las TUI se utilizan, por ejemplo, en gestores de arranque o en programas BIOS Setup.

Las in­te­r­fa­ces gráficas de usuario son, en la ac­tua­li­dad, el estándar más es­ta­ble­ci­do. Este software se aplica con elementos gráficos de control e imágenes si­m­bó­li­cas que toman como re­fe­re­n­cia de forma creativa a objetos del “mundo real”. En este sentido, los usuarios suelen recurrir al ratón y al teclado como di­s­po­si­ti­vos de control, pero cada vez es más común que entren en juego pantallas táctiles que funcionan mediante toques. A través de lo que se conoce como interfaz gráfica de usuario, los iconos también se in­tro­du­cen en el mundo digital, al igual que el es­cri­to­rio, las ventanas o la papelera. Con el ratón, que sirve para de­s­pla­zar­se por la pantalla, se pueden se­le­c­cio­nar los elementos deseados y abrir con un ligero clic.

El diseño gráfico se basa, en la mayoría de los casos, en el diseño de oficina tra­di­cio­nal. Como co­n­se­cue­n­cia, todos los elementos pueden ide­n­ti­fi­car­se de forma sencilla y su manejo resulta más intuitivo a como lo es a través de la lista de comandos de una Command Line Interface. Así, los usuarios con menos ex­pe­rie­n­cia pueden entender las funciones de los iconos con rapidez (ni la papelera ni el símbolo de la carta son símbolos del programa de correo que necesiten ex­pli­ca­cio­nes adi­cio­na­les para su co­m­pre­n­sión). Este tipo de si­m­bo­lo­gía se ha co­n­ve­r­ti­do en un factor im­pre­s­ci­n­di­ble tanto para las user in­te­r­fa­ces como para las GUI. De este modo, no hay apenas ningún programa cuyos iconos no remitan a objetos del mundo real tales como, por ejemplo, el pincel, el bolígrafo o la goma de borrar.

Aun cuando las in­te­r­fa­ces gráficas de usuario están presentes en cualquier ámbito, el de­sa­rro­llo de in­te­r­fa­ces de usuario con GUI todavía no ha llegado a su fin: la Voice User Interface también permite la in­ter­ac­ción con los or­de­na­do­res por medio del control por voz. Cada sistema operativo actual ofrece este tipo de UI de una forma o de otra: Apple ha creado Siri, Amazon introdujo a Alexa, Microsoft incluye a Cortana en las versiones actuales de Windows y la búsqueda de Google también puede llevarse a cabo mediante voz siempre y cuando se cuente con el hardware co­rre­s­po­n­die­n­te. De esta manera, puesto que se puede acceder a las apli­ca­cio­nes por medio de llamadas o lo que se transmite a viva voz también se escribe de manera au­to­má­ti­ca, los usuarios pueden trabajar de un modo más efectivo. Otra de las ventajas es que el control por voz garantiza una mayor ac­ce­si­bi­li­dad.

La co­mu­ni­ca­ción con el ordenador se establece de un modo es­pe­cia­l­me­n­te intuitivo a través de una Natural User Interface, que puede ser co­n­te­m­pla­da como una evolución de la interfaz gráfica de usuario y de la Voice User Interface. En este sentido, la interfaz de usuario in­ter­ac­ti­va reacciona tanto a los gestos como a los mo­vi­mie­n­tos y al lenguaje. Asimismo, también es capaz de reconocer rostros y objetos. Los di­fe­re­n­tes sensores, cámaras y mi­cró­fo­nos permiten una co­mu­ni­ca­ción versátil con el ordenador. Muchos de los sma­r­t­pho­nes y tablets actuales apuestan por te­c­no­lo­gías NUI, al igual que ocurre con las consolas Wii de Nintendo, que utilizan el re­co­no­ci­mie­n­to de gestos, rostros e idiomas de un modo lúdico. 

Microsoft causó furor en el año 2011 con la pre­se­n­ta­ción de un nuevo proyecto: bajo el nombre de OmniTouch se de­sa­rro­lló una te­c­no­lo­gía que permite proyectar pantallas táctiles en cualquier tipo de interfaz. Omnitouch se basa en Kinect, el control de mo­vi­mie­n­to de Microsoft, que fue in­s­tau­ra­do en el mercado para Xbox 360 como co­m­pe­te­n­cia de la Wii de Nintendo. Asimismo, también entra en juego un proyector láser y una cámara especial. Esta forma especial de Natural User In­te­r­fa­ces también se ha de­sa­rro­lla­do para los di­s­po­si­ti­vos móviles, en cuyo caso se debe colocar el hardware sobre el hombro.

Además de las formas de UI que se utilizan ha­bi­tua­l­me­n­te, hay algunas más exóticas e in­no­va­do­ras que todavía no han llegado al mercado de masas, como es el caso de la Tangible User Interface, cuya abre­via­tu­ra es TUI y que puede co­n­fu­n­di­r­se con la Text User Interface, la Pe­r­ce­p­tual User Interface (PUI) o la Brain Computer Interface (BCI).

• Las Tangible User In­te­r­fa­ces (TUI) son in­te­r­fa­ces de usuario fi­gu­ra­ti­vas y pe­r­so­na­li­za­bles, es decir, la in­ter­ac­ción con el ordenador se lleva a cabo a través de objetos físicos. Así, se manipulan (se tiran, se presionan, etc.) dados, bolas y otros objetos, por lo que se activan me­ca­ni­s­mos o se accede a in­fo­r­ma­ción digital. Aquí es donde entran en juego las in­te­r­fa­ces tangibles de usuario en museos o ferias.

• Las Pe­r­ce­p­tual User In­te­r­fa­ces (PUI) todavía están en vía de de­sa­rro­llo y se ven im­pu­l­sa­das por la ciencia, de ahí que se trate de in­te­r­fa­ces de usuario co­n­tro­la­das por pe­r­ce­p­ción, lo que se traduce en una conexión entre las VUI, las GUI y el re­co­no­ci­mie­n­to ele­c­tró­ni­co de gestos.

• Las Brain Computer In­te­r­fa­ces (BCI) ya no forman parte de la ciencia ficción, y es que con ayuda de ele­c­tro­dos se pueden medir las ondas ce­re­bra­les y hacer que los al­go­ri­t­mos las traduzcan en comandos de control. A este respecto, la in­ve­s­ti­ga­ción ya ha celebrado los primeros logros y, por ejemplo, ha permitido que una paciente pa­ra­plé­ji­ca es­ta­dou­ni­de­n­se pueda controlar un brazo robótico con sus pe­n­sa­mie­n­tos, de modo que las BCI también han co­n­tri­bui­do al manejo accesible de or­de­na­do­res y de otras máquinas.

Todo diseñador web o de­sa­rro­lla­dor de software tiene que ocuparse in­e­vi­ta­ble­me­n­te del tema de las UI. A este respecto, si se quiere llamar la atención de los usuarios de una app, atraer a los vi­si­ta­n­tes de una página web o tener éxito con una tienda online propia, es necesario pre­gu­n­tar­se cómo se puede hacer uso del producto en cuestión del modo más sencillo e intuitivo posible. Por este motivo, lo re­co­me­n­da­ble es re­fle­xio­nar acerca de quiénes componen el público objetivo para orientar de­bi­da­me­n­te el diseño UI. El primer paso debe consistir en centrarse en la interfaz gráfica de usuario. En ella, la fu­n­cio­na­li­dad, la facilidad de manejo y la apa­rie­n­cia son criterios decisivos para lograr una buena ex­pe­rie­n­cia de usuario. A la hora de trabajar con las in­te­r­fa­ces gráficas de usuario es im­pre­s­ci­n­di­ble tener siempre en cuenta el aspecto de la usa­bi­li­dad, y es que si una apli­ca­ción o una página web son difíciles de usar, el tener un diseño llamativo no tendrá ninguna im­po­r­ta­n­cia para el usuario. Para optimizar la página web o la apli­ca­ción es necesario, por lo general, llevar a cabo ciertos tests. Las in­ve­s­ti­ga­cio­nes sobre los usuarios también pueden ofrecer re­su­l­ta­dos útiles, al igual que las me­di­cio­nes técnicas por medio de análisis de mapas de calor. Con ellos se puede vi­sua­li­zar la usa­bi­li­dad, puesto que se hace un se­gui­mie­n­to del co­m­po­r­ta­mie­n­to del usuario a través de los clics, del scroll, del mo­vi­mie­n­to ocular o eye tracking y se registra haciendo uso de gra­da­cio­nes cro­má­ti­cas. El punto de vista estético entra en juego en el paso siguiente. En este sentido se aplica el “menos es más”: el diseño debe fomentar la fu­n­cio­na­li­dad de la interfaz gráfica de usuario y la co­n­fi­gu­ra­ción, a su vez, debe ser clara y estar bien es­tru­c­tu­ra­da. Esto no significa que los di­se­ña­do­res no tengan margen de mo­vi­mie­n­to, sino que se trata de conocer las conductas de uso del público objetivo y de no re­s­tri­n­gir la fu­n­cio­na­li­dad a través del diseño.

¿Dónde reside la re­le­va­n­cia de una UI intuitiva? Veamos un ejemplo simple: el símbolo de una mariposa puede ser bonito y, con toda pro­ba­bi­li­dad, puede que le guste a algún grupo objetivo. Sin embargo, si se utiliza como icono para “guardar”, el software sufrirá las co­n­se­cue­n­cias del diseño, puesto que nadie va a asociar una mariposa con el proceso de al­ma­ce­na­mie­n­to. El icono de un disquete es, sin embargo, muy gráfico y, aunque este medio de al­ma­ce­na­mie­n­to ya está obsoleto, sigue uti­li­zá­n­do­se como símbolo para el proceso de al­ma­ce­na­je. Los usuarios esperan utilizar este símbolo y, de manera in­s­ti­n­ti­va, buscan este tipo de iconos ya im­pla­n­ta­dos. Por co­n­si­guie­n­te, hay que tener en cuenta las co­n­ve­n­cio­nes de símbolos usuales y no pasarlas por alto de manera im­pru­de­n­te en lo que respecta a una buena ex­pe­rie­n­cia de usuario y a una interfaz gráfica de usuario intuitiva y co­m­pre­n­si­ble.

El ejemplo muestra que los di­se­ña­do­res web y los de­sa­rro­lla­do­res de software tienen que encontrar el equi­li­brio perfecto entre estética y fu­n­cio­na­li­dad para poder alcanzar el éxito con un producto. La op­ti­mi­za­ción de las UI es im­po­r­ta­n­te en este sentido para ofrecer a los usuarios el mejor resultado posible. Esto da lugar a que, en función de la or­ga­ni­za­ción de la página web o del software, se consigan más co­n­ve­r­sio­nes, re­co­me­n­da­cio­nes o una co­me­r­cia­li­za­ción del producto basada en el usuario.

La in­te­gra­ción de otras in­te­r­fa­ces de usuario se realiza de forma óptima a través de las GUI: si, por ejemplo, es posible recurrir al control de voz de la apli­ca­ción o se puede manejar un ordenador portátil por medio de una pantalla táctil, esto hace que haya un mayor nivel de ac­ce­si­bi­li­dad y conlleva a una mejor ex­pe­rie­n­cia de usuario. De esta manera, los usuarios tienen la po­si­bi­li­dad de elegir el producto que quieran manejar y se consigue una mayor fle­xi­bi­li­dad, además de aumentar el alcance de la propia app o del producto.

Una buena interfaz gráfica de usuario tiene un efecto positivo en la op­ti­mi­za­ción en bu­s­ca­do­res (SEO). Si los usuarios se sienten bien en una página web pe­r­ma­ne­ce­rán más tiempo en ella, lo que se convierte en un factor muy im­po­r­ta­n­te, puesto que los bu­s­ca­do­res tienen la capacidad de reconocer mediante el tiempo de pe­r­ma­ne­n­cia cuál es la re­le­va­n­cia que tiene una página web para la búsqueda co­rre­s­po­n­die­n­te. Por eso, a la hora de diseñar la GUI de tu página web siempre debes ponerte en el lugar de los vi­si­ta­n­tes que llegan a ella por primera vez. Si un usuario no se siente bien la primera vez que visita una página web, la aba­n­do­na­rá rá­pi­da­me­n­te y buscará al­te­r­na­ti­vas que le ofrezcan un manejo más sencillo. Por lo tanto, al igual que en el de­sa­rro­llo del software, la na­ve­ga­ción intuitiva se convierte en un factor decisivo. Una buena na­ve­ga­ción puede co­n­se­gui­r­se mediante enlaces internos si­g­ni­fi­ca­ti­vos a través de los que los vi­si­ta­n­tes pueden hacer clic en la página. Los crawlers de los bu­s­ca­do­res también hacen un se­gui­mie­n­to de los mismos, de modo que las rutas deben ser claras y no muy largas. Una medida si­g­ni­fi­ca­ti­va es, por ejemplo, la llamada na­ve­ga­ción con migas de pan o brea­d­cru­mb na­vi­ga­tion. Esta hace que las UI sean todavía más amigables, puesto que a través de ellas, el visitante puede saber en qué lugar exacto de la página web se encuentra y adónde puede volver. Para ello, se muestra la ruta recorrida en la página en las barras de menú colocadas en la parte superior de la propia página. En una tienda online para prendas de ropa esto se mostraría de la siguiente manera: Página de inicio/Ropa de mujer/Pa­n­ta­lo­nes/Vaqueros. Por lo general, la na­ve­ga­ción con migas de pan se encuentra en la parte superior del contenido, al igual que en nuestra Guía Digital. Para obtener más in­fo­r­ma­ción sobre los enlaces internos desde una pe­r­s­pe­c­ti­va SEO y sobre una buena es­tru­c­tu­ra para las páginas web, visita el siguiente artículo de nuestra guía sobre el SEO básico.

Debido a que hay muchos tipos de user in­te­r­fa­ces, re­su­l­ta­ría muy co­m­pli­ca­do ofrecer un ejemplo para cada uno de ellos. Los ejemplos extraídos del diseño web que aparecen a co­n­ti­nua­ción permiten poner de relieve las di­re­c­tri­ces básicas para lograr una interfaz de usuario intuitiva y muestran cuál es el aspecto que tiene esta una vez se pone en práctica.

El fo­r­mu­la­rio de registro destaca por su sencillez. En él se pide tan solo una dirección de correo ele­c­tró­ni­co y una co­n­tra­se­ña para poder empezar a usar el servicio, por lo que el proceso resulta mucho más amigable que otros fo­r­mu­la­rios de registro más tediosos. Todavía resulta más práctico el hecho de poder re­gi­s­trar­se a través de Google sin necesidad de crear otra cuenta. Con Evernote, el usuario puede ser co­n­s­cie­n­te rá­pi­da­me­n­te de una de las USP más im­po­r­ta­n­tes, esto es, el acceso al servicio a través de cualquier tipo de di­s­po­si­ti­vo y en cualquier momento. El vídeo de fondo muestra a di­fe­re­n­tes usuarios en di­fe­re­n­tes es­ce­na­rios de apli­ca­ción, uti­li­za­n­do el ordenador de mesa o el portátil en el jardín, por ejemplo, y pone de relieve las ca­ra­c­te­rí­s­ti­cas fu­n­da­me­n­ta­les sin que la usa­bi­li­dad de la página se vea afectada ne­ga­ti­va­me­n­te.

Evernote está di­s­po­ni­ble como app nativa para casi cualquier pla­ta­fo­r­ma. La interfaz de usuario de la apli­ca­ción web es re­s­po­n­si­va y, por lo tanto, se adapta pe­r­fe­c­ta­me­n­te a cualquier tamaño de pantalla. En su caso, el diseño UI logra una ex­pe­rie­n­cia de usuario mejorada debido al hecho de que la apli­ca­ción puede uti­li­zar­se en cualquier tipo de di­s­po­si­ti­vo y en cualquier momento o lugar.

Además acceder a los iconos para YouTube, noticias, mapas, etc. es muy sencillo. Estos son claros, lógicos y destacan grá­fi­ca­me­n­te la función de cada una de las apli­ca­cio­nes. También resulta ejemplar la manera en que se integra la interfaz VUI. Con ello, Google entiende incluso las búsquedas por voz, también las que se realizan por medio de apps móviles. Para ello, basta con decir en voz alta “OK Google” y la búsqueda se pone en marcha.

En función de si se consulta la guía general o la guía para ad­mi­ni­s­tra­do­res, cualquier tipo de usuario puede acceder a las áreas temáticas adecuadas y a los elementos de ayuda que se presentan. También queda patente un aspecto un tanto especial de la na­ve­ga­ción: cuanto más se aleja uno de la categoría principal para temas concretos, más se desplaza la página hacia la derecha. Con ayuda de las flechas, la na­ve­ga­ción puede de­s­pla­zar­se hacia delante o hacia atrás, con lo que se puede leer más sobre de­te­r­mi­na­dos temas o, en función de las ne­ce­si­da­des, también puede saltarse de tema. Se puede acceder al índice con un solo clic y, gracias a la agradable ilu­s­tra­ción con gráficos, tonos pastel y la práctica na­ve­ga­ción, la interfaz gráfica de usuario aúna estética y usa­bi­li­dad.