2016
PAC1. La no transparència de les interfícies DISSENY D´INTERFÍCIES MULTIMÈDIA NURIA ESPINOZA
PAC1. La no transparència de les interfícies
Interfaz digital transparente: Google Maps
Arquitectura de la información y comportamiento de los elementos de interacción En su versión web, la organización del menú en pantalla es intuitivo; el campo para escribir se encuentra en la parte superior izquierda de la pantalla, una zona que, según estudios de recorrido visual1, es la primera que miramos nada más acceder a una página. El menú de navegación se encuentra siempre en la parte izquierda, lo cual nos parece natural ya que automáticamente miramos allí.
Ilustración 1 El buscador de la versión web se encuentra en la parte superior izquierda de la pantalla
Ilustración 2 El buscador en la versión tablet y móvil se encuentra en la parte superior central de la pantalla
La búsqueda es intuitiva y sugiere resultados parecidos, y se adelanta a los resultados si el usuario posee un historial con Google. Google utiliza iconos que son conocidos universalmente (quizás podríamos decir que el icono “burguer” es una excepción todavía2) tanto en su versión web como en la Tablet/móvil por lo que no nos sorprenden ni nos parecen fuera de lugar. Podemos destacar el uso del ícono azul de “indicaciones”, que se asemeja al concepto universal de señal de tráfico. En las versiones móviles el énfasis se pone en los elementos que permiten una interacción más transparente con el dispositivo: el micrófono para dictar las indicaciones de búsqueda pasa a sustituir a la lupa de la versión web. El ícono azul de indicaciones en la versión móvil gana tamaño y un espacio propio en la parte inferior derecha de la pantalla. Si observamos la disposición de los elementos en el menú avanzado (“burguer”) vemos que los elementos están divididos en grupos según temáticas, lo cual sugiere un orden que no nos parece forzado. En primer lugar las opciones de visualización del mapa actual, en segundo lugar las opciones propias de la cuenta de google personal, en tercer lugar la ayuda y sugerencias, en cuarto lugar idioma y en quinto configuración más avanzada. La misma idea nos queda al acceder al menú “indicaciones” tras clicar en la “señal de tráfico”:
1
Jakob Nielsen (2006). “F-Shaped Pattern for reading web content”. [https://www.nngroup.com/articles/f-shapedpattern-reading-web-content/] [Consultado el 05/03/2016] 2 Page Laubheimer (2014).“Mobile navigation menus and great user experience” [https://www.newfangled.com/userexperience-mobile-menus-and-nav-burgers/] [Consultado el 05/03/2016]
1
PAC1. La no transparència de les interfícies
Ilustración 3 Los elementos muestran breves descripciones y consejos al pasar el cursor por encima
Las opciones de transporte se destacan en la parte superior mediante iconografía universal. Hay que destacar que las opciones “bicicleta” y “avión” están ocultas tras el ícono de puntos suspensivos al no ser de uso tan común. El color azul de este menú es coherente con el color del ícono. Ajustes al perfil de usuario. Google pretende siempre que la experiencia de usuario sea la más cómoda posible, por lo que nos indica las direcciones que hemos configurado como usuales y el historial más reciente. Por supuesto, es necesario haber realizado unos pasos previos al menos una vez: tener la opción de geolocalización activada en nuestros dispositivos móviles y una cuenta de Google activa que permitirá localizarnos inmediatamente en el mapa que estemos viendo, normalmente con poco margen de error. Esta configuración queda a decisión del usuario, ya que implica que Google registre nuestras ubicaciones en un historial. Relación con las características propias del dispositivo. La versión actual de Google Maps da total protagonismo al mapa, a diferencia de la versión antigua. El buscador e iconos ocupan un mínimo espacio en la pantalla de los dispositivos. Si bien en la versión web podemos beneficiarnos de un mayor tamaño de pantalla y de opciones extra como las fotografías de Panoramio compartidas por otros usuarios, en la versión móvil disponemos de los gestos para desplazarnos por el mapa, una característica que es ya imprescindible en el uso de esta aplicación. Por ejemplo, tocar dos veces la pantalla y a la segunda mantener el dedo sobre el mapa para desplazarnos. 3 Destaca en la versión móvil no sólo el uso de gestos, sino también el navegador una vez entramos en “indicaciones”. No sólo da indicaciones como en la versión web, si no que se puede convertir en un gps para utilizarlo en el vehículo, por ejemplo. Es uno de los mejores ejemplos de un uso exhaustivo de las características del dispositivo. Por otro lado hay que destacar la completa opción de “búsqueda cerca de ti” en la que podemos encontrar todo tipo de comercios o instituciones basándonos en la geolocalización. Uso de recursos gráficos y convenciones culturales. Como he comentado anteriormente, Google hace hincapié en el uso de pictogramas para superar barreras culturales: la persona, vehículo, tren, bicicleta, avión…El elemento que destaca es el pictograma para representar una señal de tráfico. El único elemento que todavía no se encuentra
3
Manuel Ángel Mendez (2013). “Por qué Google Maps sigue siendo, de lejos, la mejor aplicación de mapas” [http://es.gizmodo.com/por-que-google-maps-sigue-siendo-de-lejos-la-mejor-ap-464833701] [Consultado el 05/03/2016]
2
PAC1. La no transparència de les interfícies
plenamente estandarizado es el ícono de tres líneas horizontales o bien “burguer”. Por lo demás, destaca la coherencia en el uso de colores y la sencillez del diseño en general, lo cual lo hace agradable a la vista. Contribución a la usabilidad. Maps es una herramienta que se ha convertido en imprescindible para millones de usuarios, que lo utilizan con naturalidad diariamente. El exhaustivo uso de las características del dispositivo desde el que se abre es a mi parecer una de las mayores contribuciones a la usabilidad: permite una relación fluída y rápida con el dispositivo para acceder a los resultados que buscamos (mediante voz y uso de gestos, por ejemplo). Es fácil de usar para usuarios inexpertos y tiene elementos para usuarios expertos. Su diseño es minimalista y sencillo, se comunica en un lenguaje fácil de entender, es de diseño consistente…Un buen ejemplo de usabilidad. Sensación de transparencia Google Maps es un buen ejemplo de interfaz transparente: el uso sigue un orden natural desde que se abre la app o la url, y no nos parece forzado ni complicado en cuanto a uso. El uso de gestos, las indicaciones por voz, la navegación por Street view, el gps, la geolocalización, los elementos cercanos a tu ubicación…todos contribuyen a crear una experiencia de uso natural en la que la interfaz prácticamente desaparece y sólo es necesaria y visible en momentos puntuales. Sin embargo, para llegar a este punto hemos tenido que pasar por una breve curva de aprendizaje debido a los cambios que ha habido a lo largo de los años en la interfaz de la app.
Interfaz digital no transparente: www.alimentacion.alcampo.es
Arquitectura de la información El orden de las categorías en la tienda no sigue una ordenación alfabética, sino más bien una ordenación híbrida, ya que no es sólo por tema. En inicio no parece muy lógica y sorprende bastante:
Ilustración 4 El primer menú es bebé, señalado en color diferente, y luego procede con alimentación.
La ordenación de las subcategorías sigue una ordenación híbrida, aunque a medida que descendemos en las categorías pasamos a una ordenación alfabética. En general es bastante confuso.
3
PAC1. La no transparència de les interfícies
Ilustración 5 Al llegar a la subcategoría "Aceite" pasamos a orden alfabético
El buscador no es predictivo y busca sólo por nombre de producto exacto. Si busco “gula” me devuelve una serie de resultados incorrectos y si busco “gulas” me devuelve los resultados que buscaba. Comportamiento de elementos de interacción y uso de recursos gráficos La página utiliza un menú de pestañas, breadcrumbs y unos botones en la parte superior de la página. En la parte derecha (la página tiene un diseño con frames) se encuentra el carrito de la compra del usuario. En general el menú superior es visible y destaca. En la parte superior contamos con dos botones que generan bastante confusión:
Ilustración 6 Estos botones en realidad son filtros
Estos dos botones en realidad son filtros que sólo aplican dentro de una subcategoría. Sin embargo no se entiende correctamente. El uso de los mismos elementos de interacción de la página requiere una breve explicación que nos encontramos nada más entrar:
Ilustración 7 Explicación sobre cómo interactuar con la página
4
PAC1. La no transparència de les interfícies
El botón “validar y pagar” destaca bastante respecto al resto de la página, sin embargo no lo suficiente, ya que incluso el botón “volver” es más grande:
Ilustración 8 El botón volver, salir, y "validar y pagar" usan todos el mismo estilo
El uso de colores como vemos se reduce a blanco, verde y rojo, siguiendo los colores del logo de Alcampo, lo cual es coherente. Sin embargo hay un uso inadecuado del tamaño de las fuentes (en general son muy pequeñas), y de los botones, ya que el botón que debería ser más relevante, “validar y pagar”, es incluso más pequeño que “volver” y comparte diseño también con “salir”. No hay coherencia en el uso de colores en los botones, por ejemplo:
“Validar y pagar” es una acción hacia adelante, y “modificar mi carrito” es hacia atrás, sin embargo comparten color y un estilo de letra muy parecido, lo cual genera confusión. Por lo demás la web es muy sobria, a excepción de la página principal en la que hay un carrousel muy pequeño y que gira muy rápido, aunque dispone de la opción de pararlo.
Relación con las características propias del dispositivo, perfil de usuario y convenciones culturales. La página no es responsive, lo cual ya nos limita enormemente a la hora de acceder a ella desde un móvil/Tablet, ya que las fuentes y los botones en general son muy pequeños. No se hace un uso exhaustivo de las características del dispositivo. Como ejemplo, en la parte inferior de la pantalla indica que la resolución recomendada para ver la página es 1024x768, por lo que es evidente que la página requiere una actualización urgente ya que se ha quedado muy desactualizada.
5
PAC1. La no transparència de les interfícies
En cuanto al perfil de usuario, no está pensado para fidelizar. Es una gestión muy básica, meramente reactiva a las acciones del usuario. Podemos destacar únicamente la opción de almacenar la dirección de entrega, por lo que se reduce un paso el proceso de compra. Por otro lado, sólo está destinado a su público objetivo, que podemos deducir serán compradores o potenciales compradores españoles, clase media y adultos. Contribución a la usabilidad y sensación de transparencia La página en sí es mejor que otros supermercados online, ya que ofrece una galería de imágenes de los productos y descripciones detalladas. La navegación no se hace difícil por las categorías y el proceso de compra son 6 pasos, lo cual puede llegar a convertirse en menos. Sin embargo sí puede ser confusa en su uso para usuarios inexpertos, y requiere una curva de aprendizaje. Su diseño y coherencia pueden mejorar bastante. En cuanto a transparencia, no podemos decir que sea una interfaz transparente. Está muy presente en todo momento, hemos de interactuar constantemente con ella y si no somos usuarios habituales nos perderemos en la búsqueda de artículos.
6
PAC1. La no transparència de les interfícies
Interfaz analógica transparente: Grifo
El grifo (la variación con salida de agua de una llave de paso) está presente en nuestras vidas desde la época romana y se perfeccionaron durante el siglo XIX. Su interfaz es uno de los ejemplos más claros de transparencia analógica. Su interfaz consiste en un dispositivo, generalmente de metal, o de polímeros o materiales cerámicos, con una llave (llamada de paso) y un caño para la salida del agua. Su función es dar paso o cortar el flujo de agua u otro fluido por una tubería a la que está inserto.4 En principio nos parece lógico: si sigue un diseño parecido al más común (ver imagen), el caño será habitualmente cilíndrico, curvado en su extremo hacia abajo. La llave se encontrará en la parte superior con un diseño pensado para facilitar el uso manual. En su interior, en el extremo contiene unas piezas que regulan la cantidad de agua saliente y así evitan que salpiquen al usuario. Los elementos, tanto internos como externos, siguen unas normas que lo convierten en un elemento de uso extremadamente sencillo y funcional. Una interfaz analógica como ésta no tiene un usuario objetivo concreto: cualquier persona con las capacidades físicas suficientes para manipular la llave de paso podrá hacer uso del mismo, independientemente de edad, sexo, cultura o cualquier otra segmentación. No importa el color de los elementos que componen la interfaz de este Ilustración 9 Mecanismo de tipo de grifo, la característica forma será inmediatamente reconocida, por un grifo o canilla con llave de asiento. lo que no es un elemento relevante. Podemos decir que este tipo de grifo posee una interfaz analógica transparente ya que posee un diseño característico, fácilmente reconocible, fácil de usar para cualquier tipo de usuario (Desde niños a adultos mayores), con características propias para un usuario experto (si lo abre y lo manipula para modificar la presión del agua saliente por ejemplo). Cualquier usuario que utilice un grifo de este tipo sentirá que tiene el control en todo momento del uso de este dispositivo, y tendrá libertad total de uso. Tras manipular el grifo (abrirlo o cerrarlo), la consecuencia es visible inmediatamente (se abre o cierra el chorro de agua) por lo que el usuario sabrá en todo momento qué está pasando.
4
Wikipedia. “Llave de paso” [https://es.wikipedia.org/wiki/Llave_de_paso] [Consultado el 07/03/2016]
7
PAC1. La no transparència de les interfícies
Interfaz analógica no transparente: teléfono con disco de marcar
La marcación por pulsos es tan antigua como los mismos teléfonos. Nació a finales del siglo XIX y se comenzó a sustituir en Estados Unidos a partir de los años 60 por la marcación por tonos. En España tuvimos teléfonos basados en la marcación decádica por pulsos hasta bien entrados los años 90. Es esta una interfaz analógica no transparente para un sector concreto de la población: los sujetos nacidos a partir del 2000, que no llegaron a utilizar nunca un teléfono de este tipo. El popular disco de marcar, la herramienta utilizada para realizar la marcación por pulsos, nació a finales del siglo XIX y funcionaba de la siguiente manera: “El usuario seleccionaba un número mediante la inserción de un dedo en el orificio del disco giratorio correspondiente hasta un tope. Cuando se liberaba de esta posición, los contactos de marcación se abrían y cerraban varias veces, interrumpiendo así la corriente de bucle. La central telefónica decodificaba el patrón de cada dígito transmitido de este modo de transmisión mediante relés de paso o por acumulación en los llamados registradores de dígitos.”5 El diseño del teléfono de disco varió desde su inicio, aunque el modelo concreto que analizamos y que es uno de los más comunes en los hogares hasta finales del siglo XX tenía un diseño adecuado, no especialmente cómodo ni ligero. El disco de marcar variaba muy poco (en Estados Unidos incluía letras). Comparado con los teléfonos fijos actuales, de marcación por tonos, la interfaz es obviamente diferente y por tanto genera confusión al público más joven. La única similitud es el dispositivo para escuchar/hablar, el cable enrollado y la plataforma en la que se apoya. Para el público más joven, la disposición del disco de marcar es confusa, ya que no conocen su utilidad específica y por tanto no es lógica. El disco de marcar en sí es un elemento totalmente desconocido para los jóvenes, por tanto no saben cómo interactuar con él y cuál es el procedimiento para poder utilizar el teléfono6. La interfaz de este dispositivo refleja claramente la brecha intergeneracional y el gran avance tecnológico que estamos viviendo: los usuarios de finales de siglo XIX y prácticamente los nacidos hasta los años 80 del siglo pasado conocen y pueden utilizar este dispositivo, sin embargo la brecha se abre en los años 90 y a partir del 2000 estos dispositivos desaparecen de las casas y del uso diario, por lo que actualmente estos dispositivos no se ajustan a los perfiles actuales de usuario. Los usuarios actuales requieren teléfonos con pantallas digitales o con marcación por tonos, con teclas. Por tanto podemos concluir que este tipo de interfaz analógica no es nada transparente, ya que los usuarios adolescentes y niños actuales que necesiten utilizar un teléfono fijo no sabrían utilizarlo,
5
Wikipedia. “Marcación decádica por pulsos” [https://es.wikipedia.org/wiki/Marcaci%C3%B3n_dec%C3%A1dica_por_pulsos] [Consultado el 08/03/2016] 6 Fine Brother Entertainment (2014). “Kids react to rotary phones” [https://www.youtube.com/watch?v=XkuirEweZvM] [Consultado el 08/03/2016]
8
PAC1. La no transparència de les interfícies
siendo totalmente conscientes de la interfaz y de cómo utilizarla. Sólo lo sabrían utilizar usuarios expertos (adultos), su diseño está adecuado a la estética existente en el siglo pasado y no corresponde necesariamente a la actualidad, no “habla” en el lenguaje de los usuarios actuales ni les permite sentirse en control de lo que ocurre al intentar utilizarlo.
Conclusión
“We’ve gotten a lot of different comments over the years, with people suggesting that we don’t design our interfaces, that they kind of just are — they just exist. In most cases, the most deliberate design decision on our part is for our interfaces not to feel like they’re designed.” 7 Esta cita de Marcin Wichary, Senior User Experience Designer en Google, resume el objetivo de la compañía al diseñar sus productos, y resume el objetivo de todo diseñador de interfaces actual. Una interfaz transparente que ha de cumplir con las normas de la usabilidad8, ha de poseer un diseño que hace que el usuario se olvide que existe. A medida que se ha ido más relevancia a la usabilidad web, se ha ido dando más importancia también a la reacción de los usuarios. Se ha demostrado con el ejemplo de Alcampo.es que una web puede quedar desactualizada muy rápidamente. Ahora bien, Alcampo.es puede ser una web antigua y que no cumple con las normas de la usabilidad, sin embargo los clientes seguirán accediendo a ella y comprando, ¿por qué? Es posible que los usuarios no quieran ir a otras tiendas online mejor diseñadas por lo económico de los precios, por ejemplo. En este sentido, Alcampo.es quizás no ve todavía la necesidad de renovar su web (ya que le sigue reportando beneficios). A pesar de lo importante que es crear y aplicar técnicas de fidelización de los clientes, hay empresas que todavía no le dan la suficiente relevancia o la aplican de manera incorrecta. Este sería uno de esos casos. Google, por el contrario, se intenta superar a sí mismo y a su competencia constantemente, ya que tiene una responsabilidad que va más allá de la simple ganancia de beneficios: Google es en gran parte el artífice de muchas de las revoluciones culturales y tecnológicas que vivimos, y dedica muchos recursos en mejorar la usabilidad de sus productos. Por tanto, sus aplicaciones son ejemplo de transparencia y usabilidad. Veremos estos elementos en muchas de sus webs y en otras muchas que consideramos bien diseñadas: Un diseño minimalista, textos en lenguaje fácil de entender, pictogramas universales, paletas de colores extremadamente básicas, procesos que requieren pocos pasos… Otro elemento a tener en cuenta y que es más evidente en el caso de las interfaces analógicas es el tiempo: el cambio generacional asociado al avance tecnológico, como hemos visto en la evolución del teléfono fijo y de su diseño (y el de otros tantos dispositivos que ya no se utilizan como el walkman o el cassette). El factor tiempo juega un rol muy relevante ya que se ha ido afinando y optimizando la usabilidad en aras de una mayor naturalidad en el uso. Por ahora nos ha llevado a la creación y uso de maravillas como Kinect y ahora Oculus Rift. ¿Qué nos deparará en el futuro la búsqueda de la naturalidad en el uso de los dispositivos?
7
SmashingMagazine.com (2011) “Inside Google’s User Experience Lab: An interview with Google’s Marcin Wichary” [https://www.smashingmagazine.com/2011/07/interview-google-marcin-wichary/] [Consultado el 05/03/2016] 8 Ilusual.com (2014) “Los 10 principios de la usabilidad de Jakob Nielsen” [http://www.ilusual.com/principiosde-usabilidad-web] [Consultadoel 08/03/2016]
9