INTRODUCCIÓ

L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació s’ha realitzat de la versió d’escriptori. S’ha volgut realitzar un anàlisi general, ja que al ser la primera avaluació que es fa del lloc, interessa tenir una visió global dels principals problemes d’usabilitat i en una següent fase d’avaluació, es vol observar en detall.

La web ja existeix, així que no s’analitzarà un prototip sinó una interfície web que està en actiu des de fa més de dos anys. Es creu necessària una avaluació heurística perquè es tracta d’una entitat que està al servei de les persones i, per aquest motiu, és vital que compti amb un lloc web que les persones puguin usar fàcilment per a conèixer el projecte i si ho desitgen, apuntar-s’hi.

També s’ha escollit aquesta plataforma perquè hi estic familiaritzat, ja que és la web de l’entitat on treballo i la conec bastant bé. El motiu pel qual l’he escollit és perquè vull millorar la usabilitat de la web. Recentment es va decidir fer un canvi a nivell gràfic del lloc, però si es vol proporcionar una bona experiència d’usuari és essencial que la interfície sigui usable.

METODOLOGIA

L’avaluació heurística del lloc web s’ha realitzat per un sol avaluador. S’han intentat detectar els problemes més greus, ja que són aquests els que ens interessa incidir amb més rapidesa. En pròximes avaluacions s’analitzarà amb més detall per tal de detectar males pràctiques que no siguin tan importants a nivell d’usabilitat.

Per a l’avaluació heurística ens hem basat amb els 10 principis heurístics de Jakob Nielsen. De cada principi, s’ha buscat un bon i mal exemple. Dins dels mals exemples s’indica el grau de severitat d’aquest. Com que interessa fer incís en els problemes greus de la interfície, només s’ha indicat el grau de severitat dels mals exemples. Aquest mals exemples s’analitzaran a través de tres preguntes proposades per Nielsen:

1) La freqüència amb què el problema ocorre, és comú o poc freqüent?
2) L’impacte del problema quan succeeix, és fàcil o difícil de superar per als usuaris?
3) La persistència del problema, el problema es resol la primera vegada que s’usa el lloc web o apareix repetidament?

Per avaluar-ne la gravetat dels problemes d’usabilitat es basar en l’escala de qualificació també de Nielsen:

0 = no és un problema d’usabilitat
1 = problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.
2 = problema d’usabilitat menor: problema de baixa prioritat
3 = problema d’usabilitat greu: problema d’alta prioritat.
4= catàstrofe: imprescindible solucionar-lo.

ELS 10 PRINCIPIS HEURÍSTICS DE JAKOB NIELSEN

1. VISIBILITAT DEL SISTEMA

Bon exemple ✓
En la passarel·la de compra quan s’està fent el procés de pagament, a l’esquerra, apareixen els 3 grans apartats que guien l’usuari durant el procés: Detalls de facturació, Informació adicional i Comproveu el pagament. D’aquesta manera l’usuari sap en tot moment on és, on està i a on pot anar.

Mal exemple ✗
Quan l’usuari es troba en una secció concreta de la web, en el menú, es pot observar com es remarca de color blau l’apartat on es troba. Està ben pensat però està mal executat, ja que si l’usuari es troba dins del subapartat Esbart Marboleny, que es troba dins de l’apartat Cercle, només veurà que en el menú està marcat Cercle. I per veure el subapartat on es troba haurà de desplegar el menú i observar que es troba a dins de la secció en concret.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat del problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.

2. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL

Bon exemple ✓
L’ús de les icones del carro de la compra i la lupa són molt bons exemples d’aquests principis. Els usuaris tenen interioritzats que el carro de la compra és una secció on es guardaran els productes que han comprat a la web, i per la seva banda, la lupa permet cercar informació arreu de la interfície.

Mal exemple ✗
Un mal exemple el trobaríem a la secció «Botiga» on a sota de cada producte hi ha l’opció «Afegeix a la cistella» (acompanyat d’una icona d’un carro de la compra) i l’opció «Detalls» on al costat té la icona del menú hamburguesa. Tot i les diferents opinions respecte a l’ús de la icona «menú hamburguesa» és un recurs molt il·lustratiu que l’usuari interpreta que si clica a sobre es desplegarà un menú. Però en aquest cas, no té sentit utilitzar aquesta icona perquè en primer lloc, no es desplegarà cap menú (s’obre una pàgina amb informació detallada del producte). I en segon, perquè no és un llenguatge que segueix les convencions del món real.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 1. Problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.

3. LLIBERTAT I CONTROL PER PART DE L’USUARI

Bon exemple ✓
Si l’usuari compra un producte de la «Botiga», automàticament s’obre la cistella on apareix una unitat del producte. En aquest apartat, l’usuari pot incrementar el nombre d’unitats del producte, disminuir o fins i tot eliminar el producte de la cistella. També té la opció de seguir comprant i pot afegir altres productes de la botiga.

Mal exemple ✗
Quan l’usuari ha comprat diversos productes de la Botiga, si es troba navegant per alguna altra secció de la web que no sigui la cistella, quan passa el cursor per sobre de la cistella de la compra es desplega un resum dels productes que té guardats a la cistella. El problema és que no hi ha l’opció de treure els productes de la cistella des d’aquest desplegable. L’usuari està obligat a entrar dins de la cistella, i eliminar els productes des d’allà.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.

4. CONSISTÈNCIA I ESTÀNDARDS

Bon exemple ✓
L’ús de la lupa al costat del menú es considera una bona pràctica d’aquest principi. Els usuaris tenen interioritzat que aquesta icona permet cercar informació i a més, si es col·loca al costat del menú facilita la seva identificació i accés. També un bon ús d’aquest principi es pot observar amb la utilització de la «X» per tancar el cercador i tornar al menú original.

Mal exemple ✗
En aquest cas, trobem un mal exemple de consistència i estàndards al menú de la web. Si l’usuari desplega l’apartat «Cercle», la primera secció que apareix és «L’entitat», i és el mateix el Cercle que l’Entitat. Per tant, són diferents paraules que signifiquen el mateix, i això l’usuari no ho ha de saber segons aquest principi, el que pot portar a confusió.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

5. PREVENCIÓ D’ERRORS

Bon exemple ✓
Quan una persona es vol fer soci/sòcia de l’entitat ha d’emplenar un formulari. En aquest formulari es fa un bon ús del principi de prevenció d’errors, ja que, en tot moment s’informa l’usuari de l’obligatorietat dels camps (amb un asterisc vermell). A més, si l’usuari no fa cas d’aquestes indicacions i intenta passar a la següent pàgina del formulari apareix un text amb un signe d’exclamació a sota del camp requerint informant que «aquesta pregunta és obligatòria».

Mal exemple ✗
En la pàgina del Cercle, on hi ha informació de les diferents seccions de l’Entitat, es mostren un seguit d’imatges que van passant en format carrusel. El problema és que quan es passa amb el cursor s’obre d’una imatge, aquesta li apareix un ombrejat i l’usuari pot entendre que la imatge es pot ampliar. El problema és que si clica no passa absolutament res.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.

6. RECONEIXEMENT ABANS QUE RECORDAR

Bon exemple ✓
Perquè l’usuari reconegui un element és recomanable fer-ho a través de l’ús d’imatges. En aquest cas, l’ús de la cistella de la compra com a imatge per il·lustrar la secció on l’usuari va afegint productes que ha comprat és un bon exemple. A més, l’usuari quan afegeix productes a la cistella aquesta automàticament canvia el seu color de negre a blau (el color corporatiu de l’entitat). Això facilita la tasca de l’usuari si entra uns dies més tard i no ha finalitzat la compra, a que reconegui que té algun producte pendent de compra a dins de la cistella.

Mal exemple ✗
Tot i que aquest exemple que s’ha comentat, es considera un bon exemple, s’ha de millorar. La cistella apareix d’un color blau que costa diferenciar del negre (hi ha poc contrast). A més, l’usuari està obligat a passar el cursor per sobre la icona per tal de veure els elements que hi ha dins. I, a sobre, s’obliga l’usuari a entrar dins la cistella per tal de poder editar o finalitzar la compra.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

7. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS

Bon exemple ✓
Un bon exemple d’aquest principi és que, en la secció contacte, on apareixen les dades de contacte (telèfon i mail) un usuari expert pot passar el cursor per sobre i observarà que és enllaçable. Si hi clica, en el cas del correu electrònic se li obrirà el gestor de correu electrònic per defecte i podrà escriure un correu automàticament. En el cas del telèfon, també s’obrirà l’aplicació per defecte per realitzar trucades (per exemple FaceTime). És cert que en aquesta pàgina també surt un mapa i l’adreça. Seria interessant aplicar aquesta mateixa «drecera» i quan l’usuari clica a sobre de l’adreça se li obre el Google Maps (I després aquest ja li permet com arribar, etc.).

Mal exemple ✗
Aquest principi es basa que els usuaris experts han de poder interactuar més ràpidament amb la plataforma, sense que els usuaris sense tanta experiència els afecti. Doncs bé, en aquest cas el cercador és un mal exemple d’aquest principi. Els usuaris han de seleccionar la lupa i a continuació escriure el que volen buscar a la web. El problema és que no apareix un desplegable, a mesura que va escrivint, amb els resultats de cerca, millorant així l’eficiència en l’ús del cercador. El que significa que els resultats poden ser molt dispersos i l’usuari ha de perdre temps buscant, que és el que passa en aquest cas.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Difícil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. Problema d’usabilitat greu.

8. DISSENY ESTÈTIC I MINIMALISTA

Bon exemple ✓
La pàgina d’inici de Marboleny compleix amb l’heurística de disseny estètic i minimalista. Ja que només d’entrar, l’usuari pot observar com la informació està ordenada i permet a l’usuari accedir a la majoria de les seccions de la web, independentment de les seves necessitats (buscar informació de l’entitat, veure els espectacles disponibles de l’Esbart, fer-se soci/sòcia, voluntari/ària, contactar…

Mal exemple ✗
A la secció Notícies no es destaca cap notícia i es dona la mateixa importància a tot el contingut. D’aquesta manera l’usuari no sap quina és la última notícia que s’ha publicat ni quines notícies són més antigues.

Freqüència amb el que ocorre el problema: Poc sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.

9. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N

Bon exemple ✓
Un bon exemple d’aquest principi l’hem trobat quan l’usuari intenta realitzar el procés de compra. En la part on s’han d’afegir les dades de facturació, l’usuari està obligat a escriure el seu correu electrònic. Doncs bé, si l’usuari no l’escriu correctament (acabat en @gmail.com, @yahoo.es, etc.) no el deixa prosseguir en el procés de compra i l’informa que «si us plau, introduïu correctament els detalls en aquest camp obligatori.».

Mal exemple ✗
Un mal exemple d’aquesta pàgina el trobem, per exemple, a la secció de Transparència/Pressupostos. Si l’usuari desitja veure els pressupostos de l’any anterior, I selecciona a sobre del document, en lloc d’obrir-se el pressupost s’obre una pàgina amb el típic error 404 acompanyat del text «ups, aquesta pàgina no s’ha trobat». L’usuari observa que la pàgina no s’ha trobat, però no sap com ho pot solucionar i si realment aquest error és per culpa seva.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Difícil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

10. AJUDA I DOCUMENTACIÓ

Bon exemple ✓
No s’ha detectat cap bon exemple d’aquest principi.

Mal exemple ✗
En la web del Cercle de Cultura Tradicional i Popular Marboleny no s’ha detectat el principi d’ajuda i documentació en cap moment. Per tant no es pot aportar un bon o mal exemple. De totes maneres, com a avaluador vull pensar que des de l’entitat s’ha cregut suficient que, en cas que l’usuari necessiti ajuda, en tot moment està present les dades de contacte (tant al menú com al footer) per tal que si es presenta algun problema l’usuari es pugui posar en contacte ràpidament amb el personal de l’entitat. Per tant, aquesta pràctica es catalogarà com un mal exemple perquè tot i que la web es pot utilitzar sense ajuda, és recomanable fer-ho.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 1. És un problema sense importància.

LLISTAT PRIORITZAT SEGONS GRAVETAT

A continuació es detallen les troballes més greus i es fa una proposta de solució:

1. LLIBERTAT I CONTROL PER PART DE L’USUARI

Es tracta d’un problema d’usabilitat greu perquè és essencial que l’usuari tingui llibertat per modificar la cistella de la compra independentment de la secció de la web que es trobi. Ja que d’aquesta manera, s’obliga a l’usuari a sortir d’una pàgina en concret per entrar a dins la cistella per modificar-ne el contingut.

Proposta de millora
Afegir els corresponents botons per modificar la quantitat de productes de la cistella des del desplegable i a més, una creu per permetre la possibilitat d’eliminar productes.

2. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS

Trobar el contingut en una interfície web és essencial. I en aquesta és una tasca realment difícil, ja que no només no es guia a l’usuari per a buscar un concepte específic, sinó que a sobre se li ofereixen desenes de resultats que no tenen res a veure amb la cerca inicial.

Proposta de millora
Facilitar la cerca als usuaris mitjançant menús desplegables a mida que va escrivint el concepte que vol buscar.

3. DISSENY ESTÈTIC I MINIMALISTA

La secció notícies oblida completament aquest principi i és greu. Els usuaris que es volen informar de l’actualitat de l’Entitat accedeixen a la secció però no saben quina és la última notícia que s’ha publicat. No s’ordena la informació i tot té la mateixa importància.

Proposta de millora
Crear un slide a la part superior on aparegui la última notícia destacada i també seria interessant ordenar les altres notícies per ordre de publicació.

4. VISIBILITAT DEL SISTEMA

És un problema d’usabilitat menor perquè es tracta d’un menú amb pocs nivells, és a dir, l’usuari com a molt s’endinsarà en 1 subapartat (Per exemple: Cercle/Esbart Marboleny, i dins de l’Esbart Marboleny no es dirigeix a l’usuari a una altra pàgina en un nivell inferior. Tot i que seria interessant solucionar-ho, ja que a la llarga es pot reestructurar el contingut de la interfície i pot esdevenir un problema d’usabilitat major.

Proposta de millora
Per solucionar-ho es podria afegir la ruta que ha seguit l’usuari a la part superior esquerra de la pàgina perquè l’usuari sàpiga en tot moment on és, d’on ve i a on pot anar (breadcrumbs). A més, la ruta podria ser enllaçable, amb la qual cosa per tirar enrera només hauria de fer clic sobre de la secció desitjada.

5. RECONEIXEMENT ABANS QUE RECORDAR

És un problema menor, però s’ha de solucionar. Quan l’usuari està en una secció del menú, aquest, canvia de color destacant la secció on es troba. Això ho fa canviant de color (fons blau i lletres blanques), però en el cas de la cistella només canvia el color de la icona, i no el color del fons, d’aquesta manera dificulta la seva identificació.

Proposta de millora
La solució és simple, aplicar el mateix efecte que en les altres seccions. A més també es recomana habilitar les opcions d’incrementar o reduir quantitat i eliminar producte, al quadre de diàleg de la botiga.

6. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N

Es considera un problema d’usabilitat menor perquè l’usuari observa que és un error, però no sap com solucionar-lo. A més, no només surt l’error sinó que al costat hi ha «enllaços útils» que són les diferents seccions del menú i un cercador, on, si l’usuari escriu pressupostos li dona com a resultat la mateixa pàgina on prèviament ha anat l’usuari, ha seleccionat el pressupost desitjat i li ha portat a l’error.

Proposta de millora
Informar que l’enllaç està malament i que és un problema de Marboleny (no només que la pàgina no s’ha trobat), i permetre l’opció de posar-se en contacte amb l’entitat. Eliminar el cercador, ja que no aporta res, i habilitar un botó per tornar enrera.

7. PREVENCIÓ D’ERRORS

Es considera un problema d’usabilitat menor perquè els usuaris que naveguen per la interfície els interessa veure quines persones formen part de l’Entitat i quins balls fan. Per aquest motiu, necessiten ampliar les imatges. I a més, si a les imatges se li apliquen filtres que poden portar a confusió per part dels usuaris, el problema es complica.

Proposta de millora
La solució seria permetre ampliar les imatges o bé eliminar l’efecte quan el cursor passa per sobre d’una imatge, així s’evitaria la confusió.

8. CONSISTÈNCIA I ESTÀNDARDS

L’usuari pot navegar sense problema per la plataforma però és interessant no confondre’l amb diferents conceptes que es refereixen al mateix.

Proposta de millora
La solució proposada seria substituir el concepte de «Entitat» per «Nosaltres». D’aquesta manera no s’afegeix un nou concepte i per una banda trobem el Cercle (que vindria a ser el diminutiu de Cercle de Cultura Tradicional i Popular Marboleny) i per altra el Nosaltres (que és el pronom personal per referir-se al Cercle).

9. AJUDA I DOCUMENTACIÓ

Es considera un problema sense importància perquè es tracta d’una web senzilla i el contingut està a l’abast. De totes maneres, no deixa de ser un problema i es recomana solucionar-lo.

Proposta de millora
Tot i que la web és una interfície fàcil d’usar, es pot ajudar a l’usuari incorporant una secció de FAQs o afegint una icona d’interrogant a la secció de Botiga per permetre a l’usuari clicar-hi i poder-li oferir ajuda.

10. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL

És un problema sense importància perquè ja hi ha el text que reforça el missatge, però seria interessant canviar la icona per tal de facilitar la identificació per part de l’usuari.

Proposta de millora
Hauria estat més encertat afegir la icona d’un document i el text, enlloc de «Detalls», que fos «Llegeix més» o «Més informació». O simplement obviar aquest botó i afegir algun efecte a la casella del producte quan es passa per sobre per tal de mostrar que és clicable. Per exemple afegir un efecte hover quan es passa per sobre el producte que tot el «bloc» li aparegui un sombrejat o algun altre efecte.

BIBLIOGRAFIA

PÀGINES WEB

Nielsen Norman Group. (2023). 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/

RECURSOS D’APRENENTATGE UOC

Design Toolkit: Avaluació heurística. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).

Membrives, J. [Judith]. (2019). Quadern d’avaluació de la usabilitat. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).

Zapata, M. [Mònica]. Mètodes d’avaluació sense usuaris. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).

ANÁLISIS HEURÍSTICO DEL VIDEOJUEGO BALDUR’S GATE 3

INTRODUCCIÓN: 

Para realizar este análisis heurístico, he escogido el videojuego Baldur’s Gate III (BG3) por razones de diversa índole, tanto objetivas como subjetivas. Para poder entender la selección de una interfaz tan concreta, hay que tener en cuenta el contexto del propio videojuego.

BG3 es la tercera entrega principal de la serie Baldur’s Gate lanzado el 3 de agosto de 2023 y basada en el sistema de juego de rol de mesa Dungeons & Dragons. Este sistema permite al usuario realizar casi cualquier acción que desee, abriendo la puerta a la imaginación del usuario y generando más de un dolor de cabeza tanto a los diseñadores como a los desarrolladores del videojuego.

Centrándonos en las razones objetivas, estamos hablando de un juego con un gran abanico de acciones que debe realizar el jugador, lo que dota de una complejidad inmensa a la elección de la información que aparece en la interfaz del videojuego por parte del diseñador de interfaces. Esto lo vuelve un objeto de análisis muy interesante por la forma en la que se ha profundizado en la toma de decisiones del usuario y las necesidades que debe cubrir la interfaz para generar dicha libertad de decisiones.

OBJETIVO: 

Analizar la usabilidad del videojuego Baldur’s Gate 3 en base a los 10 principios de Nielsen

METODOLOGÍA:

El proceso para llevar a cabo el análisis de la usabilidad del videojuego Baldurs Gate 3 se divide en las siguientes etapas:

1. 1. Se escogerán una serie de heurísticas y subheurísticas asociadas a cada uno de los 10 principios de Nielsen aplicados a la interfaz de videojuegos. 
   2. Tras esta selección, se hará uso de ejemplos para determinar si dichas heurísticas se cumplen favorablemente o no, en función de los siguientes parámetros en una escala del 0 al 5*:
      1. Frecuencia con la que ocurre el problema
      2. Impacto sobre el usuario
      3. Persistencia del problema a lo largo del uso
   3. Teniendo en cuenta los tres parámetros establecidos, se calculará un promedio para determinar la puntuación del uso de la heurística, siendo los valores pequeños los más representativos de una correcta implementación de la heurística.
   4. Una vez listados los ejemplos se realizará un análisis cualitativo de los resultados en función de la gravedad con la que impacten negativamente sobre la experiencia de usuario establecida en la puntuación del uso de la heurística y se aportará una solución para cada uno de ellos.

*Siendo 0, un valor bajo, y 5, un valor alto dentro del parámetro a observar

DESARROLLO DEL ANÁLISIS

1. Aprendizaje y retroalimentación:

Heurística: Los jugadores deben poder aprender a jugar sin la necesidad de instrucciones complicadas.

Subheurística: Proporcionar tutoriales o niveles de entrenamiento para enseñar a los jugadores las mecánicas del juego.

Ejemplo:

Se detecta que, en las primeras horas de juego, no se explica de forma extensa el sistema de jugabilidad ni la interacción que es posible realizar con el entorno jugable. Esto se puede deber a que se ha asumido por parte de los desarrolladores que los jugadores vendrían de las anteriores entregas y ya tendrían conocido el sistema y sus límites. Si el usuario quiere conocer el sistema, deberá investigar por su cuenta, ya que si que están implementadas descripciones para cada elemento aunque de forma oculta a primera vista. Esto genera que la curva de aprendizaje del juego y del uso de la interfaz sea más pronunciada al principio de juego y más suave en las siguientes etapas.

2. Eficiencia y fluidez:

Heurística: Los jugadores deben poder completar tareas de manera eficiente y sin interrupciones.

Subheurística: Minimizar los tiempos de carga y optimizar la velocidad de respuesta del juego.

Ejemplo:

El juego presenta una correcta fluidez en las acciones de los personajes y en el cumplimiento de las órdenes establecidas por el jugador. Los mayores tiempos de espera se encuentran en las pantallas de carga, al inicio del juego y en el proceso del mismo. Esto se verá afectado tanto por la calidad de la programación del juego, como del tamaño del escenario de juego y la potencia del ordenador utilizado para ejecutar el juego. 

3. Consistencia y coherencia:

Heurística: Las acciones y elementos del juego deben ser coherentes en su comportamiento.

Subheurística: Garantizar que los controles sean consistentes a lo largo del juego y que los elementos del mundo del juego sigan sus propias reglas lógicas.

Ejemplo:

Una vez establecidos los controladores que se van a utilizar, el sistema no se modifica a no ser que el jugador así lo desee. Los controles de la cámara libre típicos de este estilo de juegos se mantienen en BG3, utilizando las teclas W, A, S y D para moverse por el espacio de juego, las teclas Q y E para rotar la cámara y la tecla ESC para cancelar acciones. Si bien es cierto, esto puede verse alterado por la elección de otro controlador, como puede darse al utilizar un mando dualshock por primera vez. 

4. Flexibilidad y control del usuario:

Heurística: Los jugadores deben tener la capacidad de personalizar su experiencia de juego.

Subheurística: Permitir ajustes en la configuración, como sensibilidad de los controles, opciones de dificultad y asignación de teclas.

Ejemplo:

El usuario tiene la capacidad al principio del juego de decidir qué dificultad quiere establecer para su partida, dándole el control sobre el tipo de experiencia que quiere experimentar a lo largo de la misma. Por otro lado, se le permite escoger qué tipo de controlador va a utilizar, pudiendo elegir entre teclado y ratón o mando dualshock. Esto puede impactar en la jugabilidad al principio del juego hasta que el jugador decida la elección de controlador más acorde con su estilo y comodidad.

5. Visibilidad del estado del sistema:

Heurística: Los jugadores deben poder comprender el estado del juego en todo momento.

Subheurística: Mostrar claramente la salud del personaje, el inventario y otros indicadores importantes en la interfaz de usuario.

Ejemplo:

En BG3, se dispone de mucha información en pantalla y que ocurre en segundo plano. Elementos básicos como la salud de los personajes se muestran de forma clara y concisa pero hay otros elementos, como la capacidad de algunos personajes para realizar acciones o el botón utilizado para abrir el inventario, que utilizan sistemas representativos menos intuitivos. Estos elementos pueden dificultar la experiencia de juego del jugador en las primeras horas de juego hasta que genere una memoria de cada uno de los elementos y su función. Dada la cantidad de información que se muestra en pantalla, esto se muestra perjudicial para el jugador al no seguir una de las características de la usabilidad de reconocer antes que recordar. 

6. Retroalimentación informativa:

Heurística: Proporcionar retroalimentación adecuada para las acciones de los jugadores.

Subheurística: Utilizar efectos visuales y de sonido para indicar el éxito o el fracaso de las acciones del jugador.

Ejemplo:

En general, el juego utiliza el color rojo y el azul o dorado como indicadores de fracaso y éxito respectivamente como respuesta a algunas de las acciones de los jugadores. Esto hace reconocible para el jugador si sus acciones han tenido un resultado positivo o negativo y le permite conocer su estado y predecir los siguientes movimientos. Al mismo tiempo, el sonido es un elemento que acompaña a los indicadores, apoyando los resultados obtenidos con las acciones y sirviendo de confirmación al usuario. Sin embargo, puede suceder que a veces, en un espacio de tiempo muy corto, se genera una saturación de mensajes visuales y sonidos que se superponen entre sí debido a  la cantidad de acciones que se realizan al mismo tiempo y que puede llevar a confusión por parte del jugador sobre los resultados obtenidos.

7. Prevención de errores:

Heurística: Evitar que los jugadores cometan errores graves.

Subheurística: Implementar sistemas de confirmación para acciones críticas y minimizar la posibilidad de decisiones irreversibles.

Ejemplo:

El sistema informa de acciones de carácter irreversible, añadiendo un paso extra de revisión por parte del jugador. Esto ocurre, por ejemplo, al intentar salir del juego, independientemente de si se ha guardado o no, para concienciar al jugador de que si no realiza un guardado del sistema podría perder parte de su progreso. Por otro lado, esto también ocurre en la interfaz de comercio con otros personajes no jugables controlados por la inteligencia artificial del videojuego al tratar de salir del proceso de intercambio sin completarlo. Sin embargo, hay opciones que no disponen de avisos sobre acciones irreversibles que repercuten directamente sobre la generación de la historia en la toma de decisiones. Esto ausencia de avisos puede justificarse como una intención de no crear una intrusión por parte de los desarrolladores en el modo en el que los jugadores se relacionan con la diversidad de opciones de la historia, dejándole que cometa sus propios errores y reforzando la intencionalidad de flexibilizar su libre albedrío.

8. Estética y diseño:

Heurística: El juego debe ser atractivo visualmente y tener un diseño agradable.

Subheurística: Asegurarse de que los gráficos, la música y el estilo artístico se ajusten a la temática del juego.

Todos los aspectos relacionados con la estética y el diseño están muy bien pulidos, ofreciendo una naturalidad en los escenarios que se sienten orgánicos y creativos. Las armas, objetos, personajes y eventos son un ejemplo de coherencia con la narrativa, ofreciendo una visión fantástica y una jugabilidad que invita a explorar las posibilidades que ofrecen los múltiples árboles de decisión generados para el videojuego.

9. Accesibilidad y diversidad:

Heurística: El juego debe ser accesible para una amplia gama de jugadores, incluyendo personas con discapacidades.

Subheurística: Incluir opciones de accesibilidad como subtítulos, configuraciones de color y opciones de control alternativas.

Ejemplo:

De salida, el juego no cuenta con opciones de accesibilidad sobre las configuraciones de color. Esto es un problema para aquellas personas que tienen algún tipo de daltonismo:  protanopia, deuteranopia o tritanopia. Esta condición impide visualizar correctamente algunos de los elementos visuales que se encuentren en el escenario y actuando como un bloqueador de la información del juego. Para establecer el alcance del problema se tendrá en cuenta el principio que se está analizando.

10. Motivación y recompensas:

Heurística: Mantener a los jugadores comprometidos y motivados para continuar jugando.

Subheurística: Implementar sistemas de recompensas, logros y desafíos que den a los jugadores metas a alcanzar.

Las recompensas tras completar misiones en BG3, tanto secundarias como primarias, pueden percibirse como ligeramente decepcionantes y frustrar al jugador al no ver una motivación real en la consecución de estas tareas. Esto afecta directamente a la percepción que el jugador tiene del juego, empañando su experiencia de juego y  abriendo la posibilidad a abandonarlo. 

LISTADO DE GRAVEDAD

1. Accesibilidad y diversidad: 15/15

Posible solución: Incluir un sistema que permita modificar la configuración de colores para facilitar la comprensión de los eventos que ocurran en el juego a personas con alguno de los tipos de daltonismo.

2. Visibilidad del estado del sistema: 12/15

Posible solución: Usar iconos que permitan una mayor identificación y que fomenten el reconocimiento antes que el recuerdo. Por ejemplo, en caso del inventario, usar una mochila.

3. Motivación y recompensas:  10/15

Posible solución: Crear un equilibrio de recompensas basado en el tiempo dedicado a completar cada misión y la dificultad escogida por el jugador, generando un refuerzo positivo de esfuerzo y recompensa.

4. Retroalimentación informativa: 9/15

Posible solución: evitar la confluencia de elementos en un mismo punto determinado del mapa o establecer una cola de eventos que permita comprender cada elemento por separado a coste de un mayor tiempo de procesado y tiempo de exposición al usuario.

5. Aprendizaje y retroalimentación: 7/15

Posible solución: Introducción de un sistema de tutorial escalable orientado a nuevos jugadores con opción a deshabilitarse, es decir, si nunca has jugado a  ningún juego anterior de la saga puedes activar el tutorial en su mayor escala, haciendo más factible el conocer cada elemento por separado. Si no es el caso y ya has jugado anteriormente, poder establecer entre niveles menores de profundidad del tutorial o incluso su desactivación completa.

La interfaz a analizar en este post es la aplicación para dispositivos iOS Avanza 4.0. Es la aplicación oficial de autobuses urbanos de la ciudad de Zaragoza. Ofrece información en tiempo real del tiempo de espera de los autobuses que se encuentran circulando, información sobre paradas cercanas, trayectos, cómo llegar una ubicación en concreto e incluso facilita la gestión de recarga online de las tarjetas de transporte de la ciudad. La aplicación se lanzo en 2016 ha lanzado varias versiones actualizando su interfaz. Sin duda, es una de las aplicaciones mas utilizada por gran parte de la población zaragozana. Ocupa la posición 160 en AppStore dentro de la categoría viajes.

METODOLOGÍA

Se ha realizado un estudio de la usabilidad de la plataforma Avanza partiendo de los 10 principios heurísticos propuestos por Jakob Nielsen en 1994. Para ello se ha realizado un uso explorativo de la APP identificando casos de buen y mal ejemplo de cada uno de los principios expuestos por Nielsen. En los casos analizados como mal ejemplo, se ha valorado cuantitativamente la gravedad de cada uno de ellos utilizando 2 criterios:

• FRECUENCIA: el número de veces que este ejemplo se repite en la plataforma. (0=muy poco frecuente / 4=bastante frecuente)
• TRANSCENDENCIA: cómo de importante y determinante es para el usuario este fallo durante su interacción y su toma de decisiones. (0:poco trascendente / 4=muy transcendente)

Por último, se han sumado las dos valoraciones dadas a cada uno de los casos, con el objetivo de identificar los ejemplos más determinantes en la interacción y por tanto que más pueden inferir en el uso de las personas usuarias.

1. VISIBILIDAD DEL ESTADO DEL SISTEMA

✅ BUEN EJEMPLO – GIF «CARGANDO…»

Previsualización:

Imagen: GIF + TEXTO EXPLICATIVO «Cargando…»

Análisis:  Cuando la persona usuaria quiere acceder al apartado «Paradas Cercanas» de la APP, y por tanto tiene que cargar un contenido en tiempo real, el sistema muestra al usuario un GIF junto con el texto «Cargando…» que hace que el usuario entienda que el sistema esta trabajando para mostrar el contenido deseado. Es un buen ejemplo de Visibilidad del estado del sistema porque le da información a la persona usuaria de lo que está ocurriendo, comunicándole la consecuencia de su acción anterior

❌ MAL EJEMPLO – BOTONES SIN ESTADO «FOCUS»

Previsualización:

Imagen: Aspecto botones al hacer clic (no focus)

Análisis:  Al presionar cualquier botón de la pantalla principal de la APP, el botón no muestra un cambio de aspecto. No existe un diseño alternativo para su estado «focus». En este caso, el sistema no está informando al usuario de lo que está sucediendo. Este aspecto, toma mayor importancia cuando el tiempo de carga de la app aumenta, puesto que la persona usuaria carecerá de información de si ha presionado correctamente el botón y es es cuestión de unos segundos que se cargue la siguiente pantalla, o si por el contrario, el usuario no ha pulsado correctamente el botón. No tiene información sobre la consecuencia que ha tenido su acción.

Gravedad del hallazgo:   5/8 ptos.

• FRECUENCIA: 4
• TRANSCENDENCIA: 1

Propuesta de mejora:  Incluir diseño de los botones en estado «focus»

2. ADECUACIÓN ENTRE EL SISTEMA Y EL MUNDO REAL

✅ BUEN EJEMPLO – PARADAS CERCANAS

Previsualización:

Imagen: Listado de paradas cercanas

Análisis:  En el apartado de paradas cercanas, se muestra un listado ordenado de mayor proximidad a mayor lejanía, de arriba a abajo mostrando primero las más cercanas. El modo de mostrar esta información corresponde al modelo mental de las personas usuarias, ya que es común mostrar la información de arriba a abajo, entendiendo que el contenido superior es el mas reciente, siendo el mismo criterio que se emplea en los letreros físicos de las paradas de autobus. Los comentarios en los foros, los Tweets o las publicaciones de Instagram, se muestran con ese criterio. Utilizan un criterio de muestra de resultados coherente con la terminología familiar de los usuarios haciendo que la información aparezca en un orden natural, lógico y esperado. Otro aspecto positivo en relación a este principio, es el uso de siluetas rojas que hace referencia a los postes físicos que se encuentran en la ciudad para identificar las paradas de bus. El icono lo utilizan par diferenciar verticalmente cada una de las paradas. Es un acierto utilizar un lenguaje similar al del mundo real para garantizar la correcta comprensión de las personas usuarias.

❌ MAL EJEMPLO – BOTÓN «BILLETES Y BONOS»

Previsualización:

Imagen: Botones del Menú Principal

Análisis:  El texto que acompaña al icono del botón «Billetes y bonos», no hace referencia directa a la acción que puedes realizar en esa pantalla. La APP permite comprar y recargar la tarjeta de transporte directamente, sin embargo el texto de este botón puede dar a entender que a lo que puedes acceder es a obtener información sobre los billetes. Además, es una funcionalidad que no siempre ha tenido la APP. Desde hace poco tiempo que se puede realizar compra de billetes desde la APP, por tanto, puede resultar todavía más confuso, y desapercibido para los usuarios habituales. No utiliza el lenguaje habitual de los usuarios. Por lo general, cuando existe la opción de comprar en una APP, se especifica con esa palabra. Sería más acertado utilizar «Compra de billetes y bonos», utilizando una terminología familiar y conocida para el usuario.

Gravedad del hallazgo:   4/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 3

Propuesta de mejora:  Cambiar texto por «Compra de billetes y bonos»

3. LIBERTAD Y CONTROL POR PARTE DEL USUARIO

✅ BUEN EJEMPLO – OPCIÓN DE VOLVER FUERA DE LA APP

Previsualización:

Imagen: Pantalla fuera de la APP con opción de volver en esquina superior izquierda

Análisis:  En el apartado de recarga de tarjeta, la APP saca al usuario de la APP y abre una pestaña en el navegador para realizar la compra/recarga de la tarjeta de transporte. Esto puede generar desconcierto y sensación de no control al usuario, sin embargo la aplicación utiliza el diseño propio y marcado por apple para sus aplicaciones, y muestra en la esquina superior izquierda, debajo del reloj, un botón que te permite volver directamente a la aplicación Avanza en la que el usuario estaba navegando, ofreciendo una salida de emergencia clara para abandonar la acción de «compra», por si la persona usuaria ha entrado en ese botón de forma accidental, no quiere seguir con la compra y quiere deshacer la acción. De este modo el usuario tiene sensación de control y evitamos su frustración durante la interacción.

❌ MAL EJEMPLO – BOTÓN VOLVER CON INTERACCIÓN POCO CLARA

Previsualización:

Imagen: Pantalla con botón «volver» en la esquina superior izquierda

Análisis:  Al navegar en las distintas pantallas del menú principal, la APP muestra siempre una opción clara de volver con un botón en forma de flecha en la esquina superior izquierda. Es una buen ejemplo de diseño puesto que ofrece sensación de control a la persona usuaria. Sin embargo, creo que se debería reforzar el diseño mostrando de un mejor modo al usuario su interaccionalidad. El botón está posicionado correctamente en la esquina superior izquierda, pero puede parecer un elemento plano que no ofrece acción al usuario. Por tanto, si el usuario no percibe la funcionalidad que este botón le ofrece, puede tener sensación de descontrol y pérdida en la navegación de la app.

Gravedad del hallazgo:   6/8 ptos.

• FRECUENCIA: 4
• TRANSCENDENCIA: 2

Propuesta de mejora:  Mejora del botón «volver»

4. CONSISTENCIA Y ESTÁNDARES

✅ BUEN EJEMPLO – ICONO FAVORITO E ICONO LÍNEA BUS

Previsualización:

Imagen: Linea Bus con opción para marcar como favorito

Análisis:  En el apartado Paradas Favoritas, el modo que la APP utiliza para que la persona usuario seleccione una parada como favorita, es utilizando un botón que tiene un icono de estrella. Esta iconografía es muy habitual en los productos digitales, y es bastante fácil que los usuarios puedan asociar esta funcionalidad a este icono. De este modo, la APP reduce la carga cognitiva a la que el usuario debe enfrentarse, puesto que es una funcionalidad conocida y adquirida en sus experiencias previas. Es un ejemplo de coherencia externa ya que utiliza el «lenguaje» común del medio digital para ofrecer una funcionalidad habitual en el medio.

Imagen: Pantallas distintas con iconografía creada para identificar las líneas de bus

Análisis:  APP utiliza siempre el mismo diseño para señalar las líneas de bus de la ciudad. Utiliza un cuadrado con fondo rojo, lo cual le facilita al usuario la percepción y comprensión de las distintas pantallas, reduciendo la carga cognitiva. Mantiene una coherencia interna gráfica en todas las pantallas de la APP mejorando la experiencia de las personas usuarias en los distintos contenidos y funcionalidades que presenta.

❌ MAL EJEMPLO – BOTÓN SALIDAS

Previsualización:

Imagen: Pantalla salidas líneas de autobus

Análisis:  En la pantalla en la que se muestran los horarios de salidas de las líneas de autobús, la APP utiliza un icono compuesto por una puerta y una flecha hacía fuera, para marcar las salidas de la primera parada de cada línea de bus. Es una iconografía habitualmente utilizada para indicar el modo de salir de la aplicación en la que el usuario está navegando. Es un ejemplo de incoherencia externa de la app. Es difícil que las personas usuarias comprendan el mensaje que la APP quiere transmitir puesto que puede resultar confuso.

Gravedad del hallazgo:   4/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 3

Propuesta de mejora:  Iconografía nueva botón «salidas»

5. PREVENCIÓN DE ERRORES

✅ BUEN EJEMPLO – CONFIRMACIÓN DE COMPRA

Previsualización:

Imagen: GIF confirmación de compra

Análisis:  A la hora de realizar una compra de un billete, la APP te muestra un mensaje para confirmar la acción antes de comprar y llevar al usuario a la pasarela de pago. La compra de billetes es una acción importante a realizar en la APP, por lo que mostrar un mensaje que confirme el deseo voluntario de la persona usuaria, evita cuidadosamente que ocurra un problema por haber pulsado ese botón de manera errónea.

❌ MAL EJEMPLO – NO INFORMAR DEL USO DE OTRA APP

Previsualización:

Imagen: GIF de como la APP envía al usuario a Google Maps sin aviso.

Análisis:  En el apartado de Cómo llegar, la aplicación hace uso de Google Maps para mostrar el mejor trayecto. Si la APP envía al usuario a otra APP distinta a la que está utilizando, debería realizar una pregunta para confirmar que la acción solicitada es la deseada y no ha sido accidentada. Debería advertir al usuario de lo que va a ocurrir, para evitar que se ejecute una acción no deseada y por tanto un error de uso.

Gravedad del hallazgo:   3/8 ptos.

• FRECUENCIA: 2
• TRANSCENDENCIA: 1

Propuesta de mejora:  Añadir un POP-UP que obligue al usuario a confirmar la acción.

6. RECONOCIMIENTO ANTES QUE RECUERDO

✅ BUEN EJEMPLO – INFORMACIÓN SOBRE PAGO RÁPIDO

Previsualización:

Imagen: Información sobre Pago rápido

Análisis:  En perfil del usuario, hay una opción que las personas usuarias pueden activar o desactivar: Pago rápido. Por si el usuario no conoce a qué hace referencia esa opción, la APP muestra al lado un icono con un interrogante. Al pulsarlo, se despliega en la parte superior un mensaje estático informativo sobre lo que es el «Pago rápido». Es un buen ejemplo porque la APP ofrece ayuda en contexto en lugar de utilizar un largo tutorial inicial. Ofrece una breve información concisa en el momento en el que el usuario puede activar esa opción. Favoreciendo que el usuario recuerde, que el interrogante le va a facilitar es opción antes que tener que recordar lo que quiere decir «Pago rápido».

❌ MAL EJEMPLO – PANTALLA BUSCAR PARADA

Previsualización:

Imagen: Pantalla búsqueda de parada

Análisis:  En esta pantalla, para poder buscar una parada en concreto, la persona usuaria puede introducir el número de poste, escanear el QR del poste, o buscarla en un listado ordenado alfabeticamente. Por tanto, obligamos al usuario a que recuerde una información aumentando su carga cognitiva, siendo que aunque haga uso habitual de esa parada, puede no recordar su número. Poner un listado por proximidad para que el usuario «reconozca» su parada en lugar de recordar, sería una buena solución de diseño.

Gravedad del hallazgo:   6/8 ptos.

• FRECUENCIA: 4
• TRANSCENDENCIA: 2

Propuesta de mejora:  Mostrar un listado por proximidad de paradas cercanas para que el usuario reconozca su parada y no recuerde.

7. FLEXIBILIDAD Y EFICIENCIA EN EL USO

✅ BUEN EJEMPLO – PARADAS FAVORITAS

Previsualización:

Imagen: GIF Crear parada Favorita

Análisis:  La APP ofrece una opción para usuarios avanzados, que permite marcar paradas como Favoritas, modificando incluso el nombre. De este modo, la persona usuaria tendrá acceso a esa parada desde la pantalla principal, sin necesidad de buscarla cada vez que quiera seleccionarla. Es un buen ejemplo porque la plataforma permite a los usuarios expertos crear un «atajo o acelerador de la interacción«, personalizando acciones frecuentes y además, no ralentiza el uso a personas usuarias no expertas.

❌ MAL EJEMPLO – PANTALLA DE CÓMO LLEGAR SIN «LUGARES FAVORITOS»

Previsualización:

Imagen: GIF Pantalla Cómo Llegar

Análisis:  En esta pantalla, la aplicación no permite guardar un Lugar como favorito. Crear aquí un listado de lugares favoritos o frecuentes, podría agilizar la interacción para usuarios expertos. Esta acción puede ser una acción repetida para los usuarios, que pueden ver ralentizada su interacción por el hecho de no recordar las localizaciones más habituales.

Gravedad del hallazgo:   3/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 2

Propuesta de mejora:  Mostrar un listado lugares favoritos, destacados o habituales para agilizar la interacción.

8. DISEÑO ESTÉTICO Y MINIMALISTA

✅ BUEN EJEMPLO – MENÚ PRINCIPAL

Previsualización:

Imagen: Menú Principal

Análisis:  La página principal de la APP muestra un diseño claro, conciso y sin ruido que pueda distraer al usuario, o qué pueda aumentar la concentración necesaria para comprender las funcionalidades principales que el menú quiere mostrar. La visibilidad relativa de las 6 opciones principales es acertada gracias a que el menú principal refleja la carga gráfica y visual precisa y necesaria. Cada botón está compuesto por un icono descriptivo, un texto de no más de 4 palabras y una pastilla de color de fondo que resalta y diferencia a la percepción las 6 opciones principales.

❌ MAL EJEMPLO – PANTALLA POLÍTICA DE PRIVACIDAD

Previsualización:

Imagen: GIF Pantalla Política de privacidad

Análisis:  La pantalla en la que la APP muestra el contenido referente a la política de privacidad, presenta un texto plano en formato PDF y de 6 páginas. Es cierto que hace referencia a un texto legal que en ocasiones se muestra de forma solemne sin formato alguno. En cualquier caso, es cierto que esta pantalla dificilmente será leída por los usuarios debido a la carga cognitiva que contiene. La misma información podría plantearse con un diseño capaz de resaltar los aspectos importantes del texto, para garantizar y facilitar la lectura por parte de los usuarios. No hay una priorización de la información relevante,

Gravedad del hallazgo:   2/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 1

9. AYUDA A LOS USUARIOS A RECONOCER, DIAGNOSTICAR Y RECUPERAR LOS ERRORES

✅ BUEN EJEMPLO – GIF «CARGANDO…»

Previsualización:

Imagen: Captura de pantalla «Aviso»

Análisis:  En la pantalla de «Cómo llegar», el usuario debe introducir una dirección de origen y otra de destino. Si el usuario olvida no introducir alguna de las dos, y pulsa el botón buscar, la APP muestra un aviso claro y conciso en el que le recuerda al usuario que debe introducir las dos direcciones. La aplicación utiliza la palabra «Aviso» en modo de título y en negrita, seguida de una frase con indicaciones claras sobre las acciones que debe realizar para poder continuar. Es un buen ejemplo ya que utiliza la estructura propia y tradicional del dispositivo para mostrar cualquier tipo de aviso importante para el usuario. Además, el botón OK que muestra en el aviso, le permite al usuario volver a la pantalla para introducir correctamente los datos solicitados, es decir, el aviso ofrece una solución al usuario.

❌ MAL EJEMPLO – BUSCAR PARADA

Previsualización:

Imagen: GIF proceso de introducción de texto para buscar parada

Análisis:  En las pantallas en las que el usuario debe buscar una parada, la app ofrece una propuesta de resultados filtrado por el texto que el usuario introduce de forma instánea. Sin embargo, si el usuario introduce una serie de caracteres no coincidente con ninguna de ellas, no muestra ningún tipo de mensaje que le haga entender que el texto introducido «no existe» como nombre o número de parada. Sería interesante que la app indicara que es lo que ha ocurrido y cómo solucionarlo.

Gravedad del hallazgo:   5/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 4

Propuesta de mejora:  Incluir mensaje de 0 resultados

10. AYUDA Y DOCUMENTACIÓN

✅ BUEN EJEMPLO – AYUDA COMPRA BILLETES

Previsualización:

Imagen: GIF Pantalla de ayuda en compra de billetes

Análisis:  En la pantalla de la APP preparada para la realización de compra de billetes sencillos digitales, se muestra en la parte superior derecha, un icono de información (i). Al pulsarlo se muestra una guía de ayuda para la compra y comprensión de lo que es un billete digital y cómo adquirirlo en la APP. Es una guía de ayuda sencilla, acompañada de ilustraciones que facilitan la comprensión y hacen que el proceso de «aprendizaje» sea ameno y sencillo para las personas usuarias. Además, muestra una sucesión de puntos en la parte inferior, para que los usuarios sean conscientes todo el tiempo de cuántas pantallas con contenido de ayuda hay, dándole la mayor sensación de control mientras navega. Durante todo el proceso de consulta, el usuario tiene la posibilidad de salir y de continuar sin necesidad de terminar de leer todas las pantallas. Otro aspecto a resaltar por lo que es un buen ejemplo, es porque la APP muestra la información de ayuda en contexto. Es decir, el usuario puede acceder a esta ayuda sólo desde la pantalla en la que va a realizar la compra del billete sencillo digital.

❌ MAL EJEMPLO – NO HAY BOTÓN DE AYUDA

Previsualización:

Imagen: Captura pantalla menú principal + menú

Análisis:  Es verdad que las funcionalidades de la APP no son muchas y están bastante bien planteadas. Pero es cierto, que quizá un usuario nuevo o inexperto, pudiera llegar a necesitar algún tipo de ayuda que explicara que funcionalidades puede encontrar en la APP, y dónde hacerlo. La APP sólo muestra ayuda insitu en la funcionalidad de compra de billetes.

Gravedad del hallazgo:   4/8 ptos.

• FRECUENCIA: 2
• TRANSCENDENCIA: 2

Propuesta de mejora:  Incluir propuestas de ayuda insitu en los botones principales de la APP, o una opción de «AYUDA» general en la pantalla principal, que explicara cómo puede el usuario realizar las funciones básicas de la plataforma.

RANKING

A continuación, se muestra un ranking de los malos ejemplos identificados en relación a los 10 principios herísticos de Nelson. Las propuestas de mejora de cada uno de los casos, se han mostrado gráficamente en el apartado anterior de forma detallada.

• 6 puntos – PANTALLA BUSCAR PARADA // Propuesta de mejora:  Mostrar un listado por proximidad de paradas cercanas para que el usuario reconozca su parada y no recuerde.  PRINCIPIO Nº6: RECONOCIMIENTO ANTES QUE RECUERDO
• 6 puntos – BOTÓN VOLVER CON INTERACCIÓN POCO CLARA // Propuesta de mejora:  Mejora del botón «volver». PRINCIPIO Nº3: LIBERTAD Y CONTROL POR PARTE DEL USUARIO
• 5 puntos – BOTONES SIN ESTADO «FOCUS» // Propuesta de mejora:  Incluir diseño de los botones en estado «focus». PRINCIPIO Nº1: VISIBILIDAD DEL ESTADO DEL SISTEMA
• 5 puntos – BUSCAR PARADA // Propuesta de mejora:  Incluir mensaje de 0 resultados. PRINCIPIO Nº9: AYUDA A LOS USUARIOS A RECONOCER, DIAGNOSTICAR Y RECUPERAR LOS ERRORES
• 4 puntos – BOTÓN «BILLETES Y BONOS» //Propuesta de mejora:  Cambiar texto por «Compra de billetes y bonos». PRINCIPIO Nº 2: ADECUACIÓN ENTRE EL SISTEMA Y EL MUNDO REAL
• 4 puntos – NO HAY BOTÓN DE AYUDA // Propuesta de mejora:  Incluir propuestas de ayuda in situ en los botones principales de la APP, o una opción de «AYUDA» general en la pantalla principal, que explicara como puede el usuario realizar las funciones básicas de la plataforma. PRINCIPIO Nº10: AYUDA Y DOCUMENTACIÓN – NO HAY BOTÓN DE AYUDA
• 4 puntos – BOTÓN SALIDAS // Propuesta de mejora:  Iconografía nueva botón «salidas». PRINCIPIO Nº4: CONSISTENCIA Y ESTÁNDARES
• 3 puntos – NO INFORMAR DEL USO DE OTRA APP //PRINCIPIO Nº5: PREVENCIÓN DE ERRORES
• 3 puntos – PANTALLA DE CÓMO LLEGAR SIN «LUGARES FAVORITOS» //Propuesta de mejora:  Mostrar un listado lugares favoritos, destacados o habituales para agilizar la interacción. PRINCIPIO Nº7: FLEXIBILIDAD Y EFICIENCIA EN EL USO
• 2 puntos – PANTALLA POLÍTICA DE PRIVACIDAD // PRINCIPIO Nº8: DISEÑO ESTÉTICO Y MINIMALISTA