Bones! Per començar aquest repte es va recollir el feedback del professor i es va actualitzar el wireframe directament en format prototip d’alta fidelitat, per poder-lo avaluar després directament amb els usuaris.
Tests amb usuaris
El test de guerrilla té com a objectiu avaluar el prototip d’alta i fidelitat que s’ha creat per tal de detectar potencials problemes d’usabilitat. Les tasques que hauran de fer seran la de registrar el muntatge d’un moble i que el client pugui firmar indicant si està conforme o no amb el muntatge.
S’avaluarà amb un total de 4 participants, que se’ls hi explicarà el briefing de l’activitat perquè es posin en situació, i se’ls hi demanarà que vagin explicant en veu alta el que estiguin fent i els seus pensaments, per així identificar els problemes i solucionar-los posteriorment.
El producte escollit on he trobat un bon exemple d’una topografia és en els botons d’una màquina de córrer. Molta gent té cintes de córrer a casa seva, en les quals poden passar hores caminant i corrent, sobretot quan la temperatura a l’exterior no és l’adequada per fer esport.
La màquina que jo tinc és molt simple, amb quatre botons que et permeten fer totes les accions possibles i que gràcies a les icones, són fàcils d’entendre. Tots els botons interactuen i fan que la màquina faci una acció: encendre’s, parar-se, pujar el desnivell o baixar-lo. En aquestes dues últimes funcions és on s’ha trobat un bon exemple de topografia que ajuda els usuaris a entendre clarament l’acció que fa la màquina en clicar-lo.
En cas que l’usuari vulgui augmentar el desnivell positiu de la màquina haurà de pressionar el botó que clarament li indica que l’angle de la rampa serà més elevat. Si, per contra, i vols disminuir-lo haurà de prémer l’altre botó on es veu un nino baixant per una rampa. Aquests dos botons són molt descriptius perquè representen clarament l’acció que farà la cinta de córrer si es cliquen en algun moment.
L’objecte escollit com a exemple d’una interfície que genera una bretxa d’execució ha estat els auriculars inal·lambrics Sony WH-CH510. Els he escollit perquè és un objecte que faig servir bastant sovint, sobretot per fer esport al gimnàs. A l’hora de fer-los servir sempre em trobo amb el mateix problema: no recordo com haig de fer per passar les cançons, ja que es fa amb el mateix botó d’apujar o abaixar el volum de la música.
MODEL CONCEPTUAL DE NORMAN
Consulta l’esquema en el document Figma, on també trobaràs la presentació amb els dos casos.
TEST HEURÍSTIC
1. Visibilitat en l’estat del sistema
Quan l’usuari canvia la cançó se sent un soroll assegurant que l’acció s’està realitzant, avisant i informant l’usuari del canvi.
2. Coincidència entre el sistema i el món real
Les icones gravades als botons són les típiques que hi ha en tot aquest tipus de dispositius, i l’usuari ja les té integrades dintre del seu coneixement.
3. Consistència i estàndars / Prevenció d’erros
S’utilitzen només tres botons per a realitzar sis funcions, fet que pot dificultar saber que s’ha de fer per a dur a terme cada acció i causar errors a l’hora de pressionar els botons.
4. Reconeixement
L’usuari es veu obligat a haver de recordar com passar de cançó, ja que a simple vista no s’entén de quina manera s’ha de fer. A part quan l’usuari té els auriculars col·locats, el botó de passar la cançó, i per tant tirar endavant, queda enfocat enrere, i el que és per tornar enrere queda assenyalant endavant. Tot i això, el botó d’apujar el volum i de passar la cançó té un petit punt que fa de relleu perquè l’usuari pugui identificar amb el tacte a on té el dit.
PROBLEMÀTICA
Així doncs, després de dur a terme el test heurístic seguint els principis de Nielsen (només s’han explicat els que presentaven un problema), queda clar que hi ha un problema d’usabilitat en els auriculars Sony WH-CH510. El primer de tot és que en només hi ha tres botons per a sis funcions diferents, fet que causa que l’usuari no sàpiga com accedir a la funció secundària dels botons, en aquest cas la de passar una cançó o tirar enrere en la llista musical. S’ha de mantenir premut? Ha de prémer dos cops al botó? Són dubtes que com a usuari d’aquests auriculars he tingut, i a vegades és molt molest voler passar una cançó i per error acabar apujant el volum de la música.
L’altre problema que pot tenir l’usuari és el de no saber quin botó serveix per tirar endavant i quin per tirar enrere. Mirant els auriculars, s’entén que si es manté clicat el botó d’apujar el volum tirarem enrere, i si es prem el d’abaixar el volum tirarem endavant, però no és així, sinó al revés.
Aquests problemes en la interpretació dels botons són molt molestos per l’usuari que els utilitza, que ha de recordar com es fan servir i quina acció pot fer en cada un. És per això que es plantejarà un disseny on desaparegui aquesta bretxa d’execució, i que tant el dissenyador com l’usuari tinguin la mateixa imatge del sistema.
SOLUCIÓ
Crec que en aquesta problemàtica la solució més fàcil i més lògica és posar un botó per a cada una de les funcions, a excepció del botó de parar i encendre els auriculars, que també serviria per parar la música. La implementació de dos botons més, el de tirar endavant i enrere millorarà l’experiència de l’usuari a l’hora de voler passar una cançó, ja que amb un sol clic podrà realitzar l’acció, i no cometrà l’error d’apujar o abaixar el volum.
Per altra banda, s’han canviat de banda (simètricament) els botons d’apujar i abaixar el volum, així com els de passar o tirar enrere una cançó. En el problema explicat, per passar una cançó s’havia de pressionar el botó que indica tirar enrere, fet que podia suposar un problema pels usuaris. Així doncs, amb aquestes petites i simples millores, els usuaris tindran una millor experiència a l’hora d’utilitzar els auriculars Sony WH-CH510, sabent en tot moment perquè serveix cada botó i com ha d’activar-los.
En aquesta entrada us ensenyaré les dues parts d’aquest repte:
Primer de tot he realitzat un UI Kit de l’aplicació d’IKEA, intentant seguir la teoria de l’Atomic Design. En l’arxiu es poden veure les dues tasques que es demanaven: crear els components principals i realitzar una galeria d’instàncies. Podeu visualitzar el contingut a Figma.
Per altra banda, la segona tasca consistia a crear un wireframe per una aplicació destinada als muntadors que treballen a IKEA, per poder visualitzar quins mobles han de muntar, a on i quan. A continuació us deixo el vídeo i el link del prototip a Figma.
Us comparteix el meu prototip. Aquest era el primer cop que feia un prototip d’alta fidelitat a Figma, i m’ha servit molt per aprendre com va el programa i per adorme dels errors que havia fet en anteriors treballs de wireframes. Però amb el poc coneixement que tenia amb l’ajuda de tutorials he aconseguit crer aquest prototip de l’app d’IKEA.
Per aquesta última activitat he fet un storyboard que explica la seqüència d’interacció que fa un grup de companys de classe per programar una videotrucada amb la seva professora. També he realitzat un prototip de com funcionaria aquesta aplicació, on es poden fer algunes tasques com compartir pantalla, fer proves de micròfon, xatejar, etc.
Comparteixo amb vosaltres el prototip de baix nivell de l’app de FiraTàrrega, on es poden fer les tasques que es mostren en els 4 escenaris. També us adjunto el link per accedir al prototip fet a Figma: Wireframe Figma
Proposta de valor
Finalment, adjunto també la proposta de valor en la qual s’inclou els dos usuaris presentats en un principi.
Per l’activitat R4 he seleccionat el següent l’objecte no tecnologic: el vàter. S’ha creat el LabWC, un vàter connectat a una app mòbil que permet a l’usuari analitzar la seva orina per detectar possibles infeccions.
Per aquest repte he buscat dues referències que fossin rellevants pel nostre projecte, i s’han fet un diagrama de flux de l’acció de comprar entrades. Les dues pàgines web escollides han sigut la del Festival Ítaca i la del Teatre Municipal Ateneu, ja que són dues webs de festivals o teatre no gaire grans, i per tant servirà per conèixer com funcionen aquestes webs més petites. Així doncs, podrem descobrir com és el procés de comprar entrades, mirar la programació o iniciar sessió en aquestes webs.
El Festival ÍTACA, Cultura i Acció, proposa actuacions musicals en alguns dels espais més bonics de l’Empordà. Hi ha propostes culturals de qualitat a un preu assequible, amb l’objectiu de reivindicar la cultura com a dret bàsic. Per altra banda, el Teatre Municipal Ateneu, és el teatre municipal d’Igualada, on es fan obres de teatre setmanalment, per públic adult i infantil, i concerts.
DIAGRAMA DE FLUX: FESTIVAL ÍTACA
DIAGRAMA DE FLUX: TEATRE MUNICIPAL ATENEUANÀLISI DE LES PÀGINES
En aquest apartat s’han analitzat les dues pàgines web tenint en compte diferents factors:
Acció: clics totals, pàgines obertes i pestanyes externes obertes.
Pàgina principal: anàlisi visual i dels components que té.
Programació: anàlisi visual i dels components que té.
Detalls de l’event: anàlisi visual i dels components que té.
Login: anàlisi visual i dels components que té.
ANÀLISI DE LES PÀGINES
En conclusió, crec que la web del Festival Ítaca està millor desenvolupada i és més clara per l’usuari que l’utilitza. Tot i això, m’ha agradat alguna de les funcions que té la del Teatre Municipal Ateneu com la de triar el seient del teatre, que serviria en els espectacles que es fessin amb aforament limitat i numerat.
Crec que per desenvolupar l’app de Fira Tàrrega s’ha de seguir el model del festival Ítaca, que és molt més visual, clar i juvenil.
Gràcies!!!!
Aquest és un espai de treball personal d'un/a estudiant de la Universitat Oberta de Catalunya. Qualsevol contingut publicat en aquest espai és responsabilitat del seu autor/a.