¡Colegas!
Los invit@ a visualizar el análisis heurístico que he realizado sobre el portal atrapalo.com (versión Colombia).

En esta ocasión analizaremos la App de pedidos UberEats, una app que suelo utilizar a menudo pero que nació de una empresa relacionada a la movilidad humana, mas no a la industria alimenticia, por lo que entender como esta plataforma se adaptó y utilizó su base y conocimiento en movilidad y digitalización, será un ejercicio interesante a realizar.

Este estudio se realiza bajo un análisis heurístico basado en los principios de Nielsen, relacionando la interfaz asignada a la buena o mala implementación e interpretación de dichos principios y considerando como base comparativa secundaria a sus competidores directos, incluso algunos cuyo desarrollo ha sido, a diferencia de este caso, en su totalidad enfocados en la industria alimenticia.

Empezemos analizando cada principio individualmente.

La Visibilidad del estado del sistema insta a que la aplicación mantenga al usuario informado del proceso que se esta realizando con medios visuales adecuados al momento. En este caso UberEats presenta un buena aplicación de este principio al momento que hacemos el seguimiento de un pedido pues informa al usuario del estado del pedido y del tiempo que falta hasta que la orden llegue a su destino. Por estas razones considero que es una buena práctica de este principio.

La Adecuación entre el sistema y el mundo real busca que el contenido brindado al usuario sea familiar a su entorno, es decir, usando conceptos y lenguaje propios del mundo real del usuario. En este caso la App utiliza ilustraciones coloridas para colaborar al entendimiento de los CTA’s, sin embargo en el contexto ecuatoriano, este tipo de estímulos visuales pueden generar confusión o distracción en el usuario, por esta razón y a comparación con sus competidores, considero que esta es una mala práctica de este principio. Sin embargo una solución podría ser la utilización de fotografía o ilustración realista de los productos de cada sección o apartado entendiendo la especificación de estas y del contexto en el que los ciudadanos ecuatorianos viven.

La Libertad y control por parte de la persona usuaria busca prepararse ante posibles errores que el usuario cometa brindando siempre la oportunidad de corregirlo de manera rápida y oportuna. En esta App al momento de querer retirar un articulo o producto de tu canasta, primero se debe entrar a la canasta iniciando el proceso de compra, de manera que no permite al usuario rectificar su error de manera rápida, por esta razón se considera una mala práctica de este principio. Sin embargo una solución potencial es la de permitir por medio de un menú de mas – menos en la pagina de productos que el usuario inmediatamente sin necesidad de cambiar de página pueda rectificar este error, como lo permiten sus competidores.

La Consistencia y estándares hace referencia a la consideración que se tiene al usuario al implementar elementos conocidos y aplicados en el común de otras interfaces de manera que el usuario tenga en su mentalidad una familiaridad con el modo de uso entre las diferentes aplicaciones. UberEats presenta un menú minimalista pero completo en donde el uso de iconos y textos comunes y estándares en el mundo de App móviles complementan un entendimiento ideal al usuario sobre que acción ocurrirá si accede a estos CTA’s. Por esta razón se considera una buena práctica de este principio.

La Prevención de errores es bastante autoexplicativa, pero podemos definirla como el principio que pretende evitar a toda costa, un error del usuario incluso antes de que este ocurra, es decir, anticipar potenciales equivocaciones. En este caso, la App analizada cumple en parcialidad con este principio informando al usuario sobre establecimientos cerrados al momento del pedido mediante una advertencia textual pequeña, pero deja que el usuario, en caso de omitir esta información, entre y navegue por sus productos hasta el momento de pago en donde se dará cuenta que no puede hacerlo en el momento. Este puede ser considerado un caso de mala práctica de este principio considerando que una solución potencial es encontrada en uno de sus competidores en donde el establecimiento cerrado se encuentra en un apartado diferente a los abiertos y en caso de querer entrar en su contenido un gran anuncio recordatorio aparece en medio de la pantalla, de manera que el usuario tiene la oportunidad de evitar perder su tiempo en productos no disponibles en el momento.

El Reconocimiento antes que el recuerdo refiere a brindar al usuario alternativas visuales que hagan entender de manera rápida la acción que se va a realizar sin necesidad de perder tiempo analizando el CTA o recordando información pasada relacionando con el presente. Nuestra App ofrece dentro del menú de productos previsualizaciones por fotografías de los platos a escoger de manera que si el usuario accede a dicho producto, tendrá previo conocimiento visual de lo que va a pedir, por esta razón considero que es una buena práctica del principio.

La Flexibilidad y eficiencia en el uso es una práctica que apremia la interfaz que proporciona diferentes maneras de interactuar o realizar una acción pero que son accesibles y entendibles tanto para usuarios novatos como expertos. En este caso analizamos el apartado de Promociones, el cual a comparación de sus competidores aparece una sola vez y en un solo apartado como opción a revisar. Debido a su atractivo económico y considerando la presencia en sus competidores, que significa su atractivo popular, considero que es una mala práctica de este principio. Sin embargo una solución puede ser agregar un apartado en el menú principal o con un rol protagonista en la pagina principal de la App.

El Diseño estético y minimalista hace referencia a el diseño simple de usar y entender, un modelo e interfaz que incluye los elementos necesarios para un flujo y experiencia de usuario exitoso sin tener que sobrecargar de información a la misma, simplemente enfocar e incluir el contenido importante. La página principal de esta App esta diagramada en filas de contenido de manera que el scroll horizontal sea necesario, sin embargo considero que no tiene una buena señalización, titulación y diferenciación entre las distintas secciones creando un cumulo de contenido que puede hacer que el usuario tarde en entender. Por esta razón considero que es una mala práctica de este principio. Una solución sería el implementar estos textos y señalizaciones además de estandarizar los tamaños de los contenidos y simplificar lo que aparece en la pagina principal. Comparando y tomando de referencia a uno de sus competidores se puede observar como una mejor diagramación, dejar espacios o aires visuales y simplificar contenido mejora mucho la experiencia de usuario.

La Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse es un principio que aparece por lo general después de que el usuario haya experimentado un error, es entonces que la interfaz debe ayudar al usuario por medio de texto o imágenes a entender y brindar una solución a este error de manera que el flujo de uso pueda ser retomado. En este caso UberEats utiliza un método de inicio de sesión diferente a lo común, pues en lugar de usuario y contraseña, se utiliza un código único enviado a un celular o email para una mejor seguridad. En caso de poner un código incorrecto la App avisa al usuario de este problema con la oportunidad de corregirlo para entrar a la aplicación, por esta razón considero que este accionar es una buena práctica de este principio.

La Ayuda y documentación es un apartado que no es parte del flujo principal de la interfaz pero necesaria como complemento a potencial información que pueda requerir el usuario. Este contenido por lo general es encontrado en apartados de Ayuda, Contacto o Preguntas Frecuentes dentro de una App. En nuestro caso la App analizada ofrece estos apartados con diferentes accesos, unos relacionados con información sobre el uso de la aplicación, otros con contenido de ayuda y otros con secciones de recolección de información de la App o del usuario. Con este entendimiento podemos decir que cumple con una buena práctica de este principio.

En aquest post hi ha un estudi Heurístic sobre l’aplicació web TelegramWeb. S’avaluarà la usabilitat tenint en compte el llistat d’heurístiques de Jakob Nielsen.

Una avaluació heurística basada en el llistat de Jakob Nielsen ens permet observar si s’ha aplicat un disseny usable sobre una aplicació, És important destacar que aquest tipus d’avaluació ha de ser realitzat sobre usuaris reals de l’aplicació i a poder ser que no sigui realitzat per un expert. Amb aquesta avaluació pots observar problemes de la usabilitat de la interfície i en molts casos en veure el problema, n’apareix una solució.

Metodologia 

Per poder dur a terme aquesta activitat, s’han generat una sèrie de preguntes, algunes d’elles extretes del llibre «Usabilidad de páginas de inicio. Análisis de 50 sitios Web» escrit per Jakob Nielsen i Marie Tahir.  Aquest Llibre es va publicar l’any 2002 i, per tant, ja té uns quants anys, però algunes de les preguntes són perfectament útils en els temps actuals, però com que no avaluem una pàgina web típica sinó que s’avalua una aplicació web, he hagut d’afegir unes preguntes més adequades.

Les preguntes realitzades són les següents:

1. Quan s’està descarregant un element multimèdia indica d’alguna manera que tot està funcionant correctament?
2. Hi ha algun moment on tinguis la sensació que el sistema s’ha quedat blocat?
3. Existeixen elements visuals que li donin una sensació d’interacció basada en el món real?
4. S’utilitzen instruccions o enllaços genèrics? (Per exemple: “Fes clic aquí” o “Més”)
5. Existeixen opcions que permetin a l’usuari revertir una acció realitzada?
6. Existeixen elements visuals considerats estàndards dins la pàgina web que ajudin a acomplir tasques concretes
7. S’avisa a l’usuari sempre que s’intenti realitzar una acció que elimini informació no recuperable
8. Si s’utilitzen icones identificatives, ajuden l’usuari a reconèixer una classe d’elements de forma immediata? (Per exemple: notícies, agenda…)
9. L’àrea de cerca està identificada amb un encapçalament que titula l’opció de cerca?
10. Quan un enllaç ha estat visitat abans es diferencia de la resta no visitats?
11. La cerca de la informació o dels xats és eficient?
12. El text té disseny senzill, limitant l’estil de font i altres formats de text (mida, color…)
13. Els elements més importants de la pàgina estan visibles a la seva totalitat sense haver de desplaçar horitzontalment la pantalla?
14. S’utilitza un disseny líquid perquè la pàgina s’adapti a les diferents resolucions possibles que pot tenir l’usuari?
15. El nom i el logotip tenen una mida raonable i estan en un lloc rellevant? (Superior esquerra)
16. S’utilitzen finestres emergents per donar informació important del lloc web?
17. Si t’equivoques, hi ha informació sobre com solucionar-ho?
18. Existeix un enllaç “contacta amb nosaltres”?, o similar que ofereixi informació de contacte de l’entitat?
19. Existeix algun enllaç on es pugui notificar errades del sistema?

I tenen la següent relació amb el llistat heurístic de Jakob Nielsen:

• Visibilitat de l’estat del sistema. (1 i 2)
• Adequació entre el sistema i el món real. (3)
• Llibertat i control per part de l’usuari/ària. (4 i 5)
• Consistència i estàndards. (6)
• Prevenció d’errors. (7)
• Reconeixement abans que record. (8 i 9)
• Flexibilitat i eficiència en l’ús. (10 i 11)
• Disseny estètic i minimalista. (12, 13, 14 i 15)
• Ajuda als/les usuaris/es a reconèixer i diagnosticar els errors i recuperar-se’n. (16 i 17)
• Ajuda i documentació. (18 i 19)

Aquesta eina d’avaluació heurística es pot utilitzar sense la presència d’usuaris, però no diu res sobre la presència d’altres desenvolupadors d’aplicacions, tenint en compte aquest fet, he creat un formulari, l’he contestat jo mateix i l’he distribuït entre 3 experts en crear i dissenyar aplicacions per poder tenir una mostra significativa del que en pensen. Aquests usuaris són de diferents sexes i d’edats entre 20 i 50 anys.

Per veure el formulari, clica aquí
Per veure el full de càlcul amb les respostes clica aquí

Per últim, s’han analitzat les dades i realitzat un informe del resultat.

Informe

S’ha realitzat un estudi de les heuristiques tenint en compte les respostes del formulari i apreciacions personals.

Visibilitat de l’estat del sistema.

Bona pràctica
Clarament, és una aplicació on en tot moment es pot veure que el sistema està funcionant, l’únic moment on pot haver-hi problemes es en moment que hi ha un tall en l’internet.

Un moment on es veu molt clar el funcionament és quan està descarregant elements multimèdia, on s’indica el procés de la descàrrega en tot moment.

Adequació entre el sistema i el món real.

Bona pràctica
Existeixen elements visuals basats en el món real, com per exemple la icona de cerca (lupa), el micròfon, la xinxeta, el telèfon, el llapis, etc. son tot icones basades en el món real cada icona representa una acció que correspon a elements del món real, per exemple, el micròfon ens permetrà enregistrar un missatge, la lupa ens permetrà cercar informació, etc.

També la forma del xat en si, existeixen xats des de fa força anys i tots segueixen la mateixa forma, al costat esquerre sempre hi ha la llista de persones amb les quals ja has contactat algun cop i a la dreta el xat en si. i els missatges estan emmarcats amb unes formes acabades amb punta com les que et podries trobar en un còmic.

Llibertat i control per part de l’usuari/ària.

Bona pràctica
En aquesta part han respost que l’usuari té llibertat per poder navegar de forma correcta mitjançant iconografia i que té el control de la informació que es publica, ja que en qualsevol moment pot editar o esborrar missatges enviats per si mateix i també pot esborrar missatges que ha rebut. També pot arxivar i desarxivar tot un xat sencer, d’aquesta manera pot tenir més organitzat el tauler principal de l’aplicació.

Consistència i estàndards.

Bona pràctica 
En aquesta aplicació hi ha molts elements considerats estàndards, com ja s’ha comentat anteriorment, hi ha tota la col·lecció d’icones típiques per interactuar amb l’aplicació. Independentment d’això tot el disseny de l’aplicació està basat en estàndards de facto, l’organització dels xats, les emoticones, les icones, les caixes de text en estil de bafarada típica de còmic, etc.

Prevenció d’errors.

Bona pràctica 
Per posar un bon exemple de prevenció errors d’aquesta aplicació en centrarem en l’acció d’esborrar contingut dels xats o directament esborrar xats sencers, sempre que hi hagi una acció que elimini definitivament informació, apareix un missatge de confirmació d’eliminació.
A part, indiquen clarament amb vermell el botó d’eliminar per evitar qualsevol mena de confusió.

Reconeixement abans que record.

Bona pràctica 
En aquesta aplicació, el reconeixement és clau, perquè quan busques un xat en concret, pots basar-te en la imatge de perfil de l’usuari, fet que facilita molt la feina. El problema està en el fet que no tots els usuaris posen una imatge de perfil, però igualment és un molt bon exemple.

També podem tenir com a exemple tot el que ja s’ha comentat anteriorment sobre les icones basades en el món real i que algunes d’elles s’han convertit en estàndards.

Flexibilitat i eficiència en l’ús.

Bona pràctica 
Aquesta aplicació realment és molt flexible i eficaç, i un exemple molt clar és el del cercador, que no només et permet buscar tota mena d’informació i arxius multimèdia als teus xats, sinó que també et permet cercar en canals públics tant si estàs subscrit com si no. A part també emmagatzema les últimes cerques, per tant, facilita molt la cerca repetida d’informació.

Disseny estètic i minimalista.

Bona pràctica 
A Telegram es veu clar que quan van dissenyar l’aplicació ho van fer tenint present la facilitat d’ús i per fer-ho tenen molt present el disseny minimalista. Només es veuen les opcions més indispensables per poder interactuar amb l’aplicació, però existeixen menús amagats amb altres opcions a tenir en compte a part de la configuració pròpiament dita. L’aplicació maximitzada dona una màxima prioritat a l’espai del xat, que és la raó de ser de la mateixa aplicació, per tant, és un molt bon exemple d’aquesta heurística.

Però els altres experts i jo coincidim en el fet que no hi ha cap element de logotip, no estaria de menys que aparegués en algun lloc preferiblement a la part superior esquerra. Cert és que l’usuari sap que està utilitzant aquesta aplicació, però segons la nostra opinió hauria d’aparèixer.

Ajuda als/les usuaris/es a reconèixer i diagnosticar els errors i recuperar-se’n

A millorar
Si un usuari s’equivoca i esborra un xat, tot i l’advertiment de confirmació que ja s’ha comentat abans, no hi ha manera de recuperar aquest xat, estaria molt bé que la informació eliminada es quedés en un entorn de «Paperera de reciclatge» i que s’esborrés definitivament al cap de 24h. D’aquesta manera assegures, un 100% d’eficiència pel que fa a control i gestió dels xats.

Ajuda i documentació

A millorar
Existeix un menú amb diferents apartats, un d’ells és un enllaç per reportar problemes de l’aplicació, en clicar-lo obre un fòrum a una web externa on poder reportar el problema detectat. També hi ha un enllaç amb les funcionalitats de Telegram que obre una zona de xat amb informació sobre totes les novetats de Telegram.

Cert és que faria falta un enllaç més extens a la documentació oficial, amb un manual d’usuari multilingüe.

Para realizar el Reto 2 de la asignatura de Evaluación de la Usabilidad he seleccionado la interfaz Twinkl que se trata básicamente de una plataforma que funciona como fuente de recursos educativos que pueden ser utilizados por docentes o adultos para la enseñanza y/o organización educativa hacia niños/as de colegios normo-típicos o de educación especial. Las funcionalidades de Twinkl se resumen en las siguientes:

• Recursos educativos para niños/as de entre 3 a 18 años de enseñanza normo-típica.
• Recursos educativos para niños/as con necesidades especiales.
• Recursos educativos para niños/as con problemas en comunicación por desconocimiento de la lengua, INA (International New Arrivals).
• Recursos para docentes en lo que a la parte organizacional respecta, es decir, recursos para encarrilar los planes docentes, recursos para la evaluación, entre otros.

Una vez hecho una aproximación de lo que trata en sí la plataforma, procederemos a dar una breve explicación del porqué de la elección de esta plataforma. En primer lugar, me resulta interesante porque funciona como una base de datos, con un sistema que intenta ser lo más asequible para los usuarios, es decir, el material debería ser bastante accesible y, además, contiene muchos recursos de diversa índole para los diferentes contextos educacionales, es decir, se trata de una plataforma que funciona como biblioteca online donde los usuarios pueden acceder tras una búsqueda y un filtrado sencillo.

Sin más dilación, procederemos a realizar la evaluación heurística de esta plataforma, siguiendo los 10 principios de Jakob Nielsen.

1. Visibilidad del estado del sistema.

Este apartado en el web Twinkl, resulta bastante confusa como usuario. Pues, aunque la la página tiene un menú desplegable o navbar donde puedes realizar todas las acciones, al presionar en cada uno de ellas, la web no proporciona en ningún momento ningún feedback situacional donde se encuentra, es decir, el usuario en ningún momento sabe en qué subpágina se encuentra.

Tal y como vemos, una pertenece al home del sitio web y otra a la subpágina Ari AI, la cual la plataforma no da ninguna clave de en qué punto de navegación se encuentra el usuario. Con respecto a esta visibilidad, haría falta en todo momento ubicar al usuario, hacerle saber en qué momento de la navegación se encuentra a través de pequeños pop ups, menús o cambios en el navbar que indiquen la ubicación.

Gravedad: 1/5

2. Adecuación entre el sistema y el mundo real.

Aunque Twinkl trabaje con muchas áreas educativas que probablemente desconocemos, hace una buena práctica dedicando una página donde se explica las diferentes áreas inclusivas, haciendo aún más específicos los recursos educativos para cada espectro o patología en niños/as.

3. Libertad y control por parte de la persona usuaria.

Twinkl se trata de una biblioteca que, en principio, puedes acceder a los recursos y descargarlos. Sin embargo, si quieres acceder a recursos más concretos o con diseños que más se adaptan a lo que buscas, debes suscribirte. Una vez clicas en la opción de membership por curiosidad, no hay vuelta atrás, no hay ningún botón que para poder salir de aquella web y poder seguir disfrutando nuestra experiencia gratuita por lo que sería necesario un botón o un menú que ayude al usuario a salir de esa pantalla.

Gravedad: 3/5

4. Consistencia y estándares.

En lo referido a este punto, al ser una web cargada de muchos elementos, la ordenación entre estos no queda muy clara, el menú de opciones de la izquierda desaparece y la organización de los elementos difieren en cuanto nos adentramos en una subpágina.

Gravedad: 2/5

5. Prevención de errores.

Al rellenar formularios, Twinkl tiene la buena práctica de ya no solo corregir campo a campo lo que se ha introducido, sino que también al finalizar, para modificar los datos solo deja cambiarlos si se introduce la contraseña de Twinkl como doble verificación.

6. Reconocimiento antes que recuerdo.

Buena práctica por parte de Twinkl ya que cada menú contiene numerosos apartados en los que podría ayudar a reconocer al usuario a recordar lo que desea buscar. Una forma muy significativa de ayudar al usuario y haciendo un filtrado con muchas especificaciones.

7. Flexibilidad y eficiencia en el uso.

Aunque a priori, Twinkl parece una web adaptada a todos los usuarios, los usuarios experimentados o que están suscritos a la plataforma, tienen una forma más espontanea de navegar a través de ella para los nuevos usuarios resulta tediosa. Numerosos pop ups, no poder ubicar bien o diferenciar los recursos gratuitos de los de pago, una web saturada con tantos anuncios que puede llegar a saturar al nuevo usuario. Por tanto, para el nuevo usuario que no se ha registrado, resultará un poco tedioso encontrar recursos, sin lugar a dudas, una mala práctica por parte de la web a la que somete al usuario primero a registrarse y luego a suscribirse.

Gravedad: 5/5

8. Diseño estético y minimalista.

Bajo mi percepción de diseño, quizás sea yo muy minimalita pero Twinkl resulta una página web cargante, llena de ventanas emergentes, información, numerosas imágenes que hacen una web con una carga visual bastante llamativa.

Gravedad: 4/5

9. Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse.

El uso que hago de Twinkl básicamente se reduce a momentos esporádicos cuando tengo que buscar recursos para mi trabajo o ideas para nuevas creaciones y, de momento, no he vivido errores en la web ni fallos en el acceso.

10. Ayuda y documentación.

Para finalizar con la evalucion heurística, vemos que Twinkl tiene buena práctica con respecto a ofrecer ayuda al usuario, ya no solo está el simple sistema de “Preguntas frecuentes” sino que también hay un asistente en directo que facilita las tareas.