Índex:

I. L'objecte de la investigació.

II. Dades de la intefície analitzada.

III. Metodologia emprada.

IV. Anàlisi heurístic.

V. Resum dels principals problemes esmentats.

VI. Inclusió i diversitat.

V. Bibliografia i recursos emprats.

I. L’objecte de la investigació:

Piskel és una aplicació gratuita i de codi obert que permet a l’usuari crear imatges en dues dimensions (sprites fixes o animats) fent servir la hipèrbole del píxel com a unitat gràfica, mirant d’evocar el look de les produccions multimèdia d’èpoques passades.

L’aplicació disposa d’una sèrie d’eines comunes a d’altres softwares similars, que permeten el dibuix sobre d’un llenç, on el tamany i disposició de la quadrícula és capital.

El dibuix a baixa resolució o pixel art ha vist com creixia la seva influència durant els últims anys, derivant en una infinitat de noves produccions que arriben als mercats en tota mena de suports, especialment a la branca d’oci electrònic, però també com a corrent d’expressió artística, com el cinema.

El producte que s’obté d’aquesta aplicació es sol fer servir com a recurs gràfic per a tercers. 

Octopath Traveller (Square-Enix, 2018, https://www.square-enix-games.com/en_EU/games/octopath-traveler).

Survival of the Sublime (The Poncho Pilgrim, 2016, https://www.youtube.com/watch?v=nnneLbP8iQQ).

Actualment la tenim a diferents plataformes, com ara aplicació mòbil, d’escriptori i aplicació web. Aquesta última és el subjecte de la nostra anàlisi.

II. Dades de la interfície analitzada:

Piskel App, la interfície analitzada (https://www.piskelapp.com/).

Piskel App, versió web (v.0.15.2).

Idioma: anglès.

Plataforma: Google Chrome, macOS 13.0.

III. Metodologia emprada:

Per a la realització d’aquesta anàlisi sense usuaris es duran a terme una sèrie de tasques senzilles amb objectius molt concrets, sempre de manera que s’exposi la bona o mala praxis en l’execució de cada principi heurístic. Per a cadascun dels principis analitzats es disposaran una sèrie de fitxes que contindran:

• Nom del principi heurístic sota estudi i breu definició.
• Relació d’elements que es veuen implicats.
• Tasca proposada.
• Resultat obtingut.
• Valoració sobre si és o no un bon exemple d’aplicació del principi.
• Gravetat del problema, si s’escau.
• Proposta de millora, si s’escau.

IV. Anàlisi heurístic:

#1_ Visibilitat de l’estat del sistema.

Definició breu del principi: La interfície ha d’informar de quin és l’estat actual de l’activitat de l’usuari fent ús dels diferents mecanismes a l’abast.

Elements implicats: Missatges emergents, simbologia.

Tasca / objectiu: Guardar el progrés d’un arxiu. Es crea una imatge nova i es guarda amb una de les opcions facilitades.

Passar el ratolí per sobre dels elements que conformen l’UI fa que es diferencïin de la resta per indicar-nos quina eina esten fent servir.

Elements seleccionats, indicats amb color tònic (Piskel, 2022).

Nom de l’arxiu, el símbol * indica temporalitat (Piskel, 2022).

Feedback com a missatge emergent (Piskel, 2022).

Resultat: El sistema ens alerta a cada operació de l’estat de l’arxiu que estem treballant mitjançant missatges emergents. Les eines seleccionades també estan resaltades. Aquests indicadors fan servir el color groc com a tònic per sobre de la resta.

Valoració: Es fa un ús correcte del principi, donat que s’avisa en tot moment i temps real a l’usuari de quin és l’estat del sistema.

#2_ Sistema i món real.

Definició breu del principi: El sistema ha de fer servir un lleguatge el més humà possible, que faciliti la comunicació entre la màquina i l’usuari.

Elements implicats: Simbologia, convencionalisme, semàntica, iconografia.

Tasca / objectiu: Reconèixer els conceptes i l’organització de la informació de manera innata durant tasques de caire comú, com l’us de la metàfora per millorar la comprensió del UI.

Ús del llenguatge visual i la metàfora (Piskel, 2022).

Resultat: La interfície fa ús d’un llenguatge familiar per a l’usuari. Les formes de les eines i les accions derivades de les mateixes tenen relació amb el món real (com ara la manera de dibuixar una figura geomètrica).

Valoració: Es fa un ús correcte del principi en general, però admet certa ambigüitat en alguns grafismes que es podria millorar.

Proposta de millora: No totes les tasques es poden entendre de manera orgànica i l’usuari es veu obligat a passar el ratolí per sobre del butó per conèixer exactament la seva funció. Escollir nous grafismes per a segons quines funcions seria ideal. Un exemple:

Eines de transformació (Piskel, 2022).

#3_ Llibertat i control.

Definició breu del principi: Un usuari ha de tindre la possibilitat de desfer-se d’un error inmediat d’una manera directa i senzilla.

Elements implicats: Eines per desfer i refer.

Tasca / objectiu: Provar una sèrie d’accions per comprovar si l’usuari té la opció de tornar a un estat anterior en tot moment o si només es compleix en llocs concrets.

Dreceres de teclat, desfer i refer (Piskel, 2022).

Resultat: Es permet al usuari desfer-se d’errors i tornar a un estat anterior o posterior, sempre i quan es tracti de l’àmbit de creació o edició de l’arxiu de treball.

Valoració: Un altre cop, trobem que es fa un ús correcte, però parcialment. L’opció per desfer-se dels errors d’execució existeix, però l’UI no conté cap botó implementat que permeti accedir a aquesta operació més enllà de la drecera de teclat, cosa que sí que ofereixen aplicacions d’ús similar.

Proposta de millora: És necessari implementar botons que contemplin les opcions de refer i desfer. També seria interessant incloure una opció que permetés recuperar arxius esborrats per accident.

#4_ Consistència i estàndards.

Definició breu del principi: Seguir un model establert comú en contextes similars ajuda a que l’usuari es pugui moure per l’aplicació d’una manera més intuitiva i sense haver de provar una funció per confirmar el seu funcionament.

Elements implicats: Elements comuns entre aplicacions del mateix àmbit.

Tasca / objectiu: Comprobar si les funcions bàsiques i la seva disposició espacial comparteixen criteris d’aplicacions d’àmplia difusió al mercat.

Piskel UI (Piskel, 2022).

Pixelorama UI (Pixelorama, 2022, https://orama-interactive.itch.io/pixelorama).

Adobe Illustrator UI (Adobe, 2022, https://www.adobe.com/es/products/illustrator.html/).

Resultat: Si comparem la primera imatge (Piskel) amb les altres dues (Pixelorama i Adobe Illustrator) podem comprovar que, efectivament, existeixen certes convencions que es respecten. Les eines principals es situen en una o dues columnes a l’extrem esquerra de l’UI, mentres que el costat dret queda reservat per als inspectors i les paletes. Per una altra banda, la gestió d’arxius es situa a la part dreta quan totes les aplicacions la tenen a la part superior.

Valoració: L’ús és correcte, però la disposició del menú d’arxiu (a la dreta) no resulta natural, tenint en compte l’interioritzada que està aquesta part del UI en aquesta i d’altres aplicacions semblants.

Proposta de millora: Seria interessant incloure l’opció de personalitzar la disposició dels elements del UI per part de l’usuari. D’altres aplicacions si disposen d’aquesta opció, que normalment ajuda a millorar el flux de treball.

#5_ Prevenció d’errors.

Definició breu del principi: Sempre serà millor crear un sistema que eviti els errors que un que informi correctament d’aquells que ocorren.

Elements implicats: Bon disseny d’UI.

Tasca / objectiu: Comprobar si el disseny del UI és prou consistent per evitar que l’usuari sigui objecte de errors o dificultats que condueixin a errors.

Dibuixant a mà alçada (Piskel, 2022).

Resultat: El cursor sempre previsualitza quina serà l’àrea de dibuix que ocuparà el nostre traç abans de començar a clicar. Té en compte el tamany i la forma. Això comunica en tot moment a l’usuari com està situat sobre la creació i quin serà el seu resultat aproximat a mesura que faci el dibuix.

Valoració: L’ús és correcte, però l’aplicació no dona peu a gaire més exemples.

#6_ Reconeixement abans que record.

Definició breu del principi: Fer visibles certes funcions o informacions fa que l’usuari disposi d’elles en tot moment, de manera que no hagi de recordar-les constantment.

Elements implicats: Informació en temps real.

Tasca / objectiu: Comprobar l’arquitectura de la informació emprada i difosa per la interfície.

Posició de la capa de treball (Piskel, 2022).

Zoom, coordenades i tamany de l’àrea de treball (Piskel, 2022).

Tamany del pinzell actual (Piskel, 2022).

Resultat: L’UI fa servir el color groc per resaltar les opcions escollides arbitràriament o per comunicar informació del que passa al usuari, com per exemple la capa a la que s’està treballant actualment, el tamany de l’àrea de treball, o la eina seleccionada.

Valoració: L’ús és correcte. En aquest sentit, l’aplicació fa un ús escrupulós.

#7_ Flexibilitat i eficiència d’ús.

Definició breu del principi: Permetre que l’usuari pugui adaptar l’UI ha diferents contextes d’ús (personalització).

Elements implicats: Elements dinàmics.

Tasca / objectiu: Comprovar si l’aplicació permet personalitzar la disposició d’elements o els seus atributs de manera que es pugui adaptar a necessitats diferents independentment de l’usuari.

Panell de configuració (Piskel, 2022).

Resultat: En aquest aspecte podem comprovar les limitacions de personalització de l’aplicació. No hi ha cap opció que permeti canviar res de la interfície, només de les característiques de la creativitat a realitzar.

Valoració: L’ús és incorrecte. Es busca que l’usuari no tingui opció de personalitzar la seva experiència.

Gravetat: Lleu. L’aplicació té un ús que deriva en un tipus de producte molt específic. Si es tractés d’una aplicació amb un ventall d’usuari més obert, la gravetat seria més gran.

Proposta de millora: Valorar la possibilitat de fer que alguns conjunts d’eines fosin modulars i es poguessin distribuir de manera arbitrària per l’UI.

#8_ Minimalisme.

Definició breu del principi: Controlant la quantitat i qualitat d’informació que s’entrega visualment a l’usuari repercuteix en una millora clara en l’us de la interfície.

Elements implicats: Disseny estètic, informació rellevant.

Tasca / objectiu: Analitzar com es fa servir l’espai de la interfície i l’eficiència de la comunicació amb l’usuari amb un recorregut visual.

Resultat: Per una banda, trobem que el disseny és força clar, amb colors de forts contrasts i molt d’espai negatiu, que separa bé uns elements dels altres i els diferencia. Per l’altra, trobem botons que mostren més informació de la necessària o conjunts d’eines que no es poden minimitzar de cap manera.

Valoració: L’ús és incorrecte. El conjunt d’eines que es posen a disposició de l’usuari, que són ben poques, podrien estar conjuntades d’una manera més cohesionada. Els tons de negres i grisos en el disseny d’alguns elements fa que sigui difícil delimitar-los a simple vista per alguns usuaris.

Gravetat: Mig. L’estat actual fa que les sessions llargues de treball (com ara el dibuix d’una animació) siguin difícil de dur a terme.

Proposta de millora: Un redisseny de la interfície, amb un model més clar i de millor contrast tindria un impacte en la productivitat molt important.

#9_ Ajudar als usuaris a reconèixer, diagnosticar i recuperar-se dels errors.

Definició breu del principi: Una vegada hi ha un error, el sistema ha d’ésser capaç de guiar al usuari, mitjançant missatges clars, en la manera de trobar una solució.

Elements implicats: Comunicació de l’error, visibilitat de l’error, guia en el procés de solució.

Tasca / objectiu: Generar una situació d’error per a que el sistema ens procuri una solució a l’abast de l’usuari mig.

Possible error i relació de solucions disponibles (Piskel, 2022).

Resultat: Al carregar el servei mitjançant un navegador no compatible, s’avisa a l’usuari de la situació, s’explica clarament quin és el problema i s’indica una solució que, en aquest cas, passa per a que l’usuari mateix sigui qui faci servir un navegador alternatiu per accedir-hi.

Valoració: L’ús és correcte. L’error s’indica d’una manera transparent i es proposen una sèrie de directrius a seguir per arribar a una solució.

#10_ Ajuda i documentació.

Definició breu del principi: És necessària la presència d’una relació d’articles d’ajuda no molt extensa, d’utilitat per a l’usuari, fàcilment localitzable i profundament adaptada al contexte de l’aplicació o servei.

Elements implicats: Eines d’ajuda i documentació per a l’usuari (instruccions d’ús, suport).

Tasca / objectiu: Revisar quina documentació inclou l’aplicació i si és d’utilitat real.

Relació de dreceres de teclat (Piskel, 2022).

Informació emergent en l’ús d’eines concretes (Piskel, 2022).

Enllaços a documentació externa (Piskel, 2022).

Resultat: La documentació present in-app queda relegada a dos enllaços externs a la seva pàgina de GitHub corresponent (recordem que es tracta d’un projecte open source). L’arxiu referent a preguntes freqüents és gairebé inexistent. La documentació per comprendre cada eina a disposició es troba com a informació emergent, no sempre explicada amb el mateix nivell de detall.

Valoració: L’ús és incorrecte. S’obliga a l’usuari a buscar documentació en direccions externes. En el cas de GitHub, la documentació subministrada i la manera en que es presenta pot resultar poc accessible per alguns perfils d’usuari més casuals.

Gravetat: Greu. No presentar un mínim d’informació accessible per al ventall d’usuaris objectius corresponent és una errada que influeix directament en el percentatge d’adopció de l’aplicació i relega el seu ús a sectors o processos concrets, desaprofitant tot el potencial que s’ofereix.

Proposta de millora: Implementar un arxiu d’ajuda i tutorials contemporani, accessible i efectiu per a tota mena d’usuaris.

V. Resum dels principals problemes esmentats:

La relació, per tant, dels problemes apareguts, serien els següents:

• Greu: Manca documental.
• Mig: Disseny massa complex per les eines ofertes.
• Lleu: Impossibilitat per personalitzar l’experiència d’usuari a preferències o metodologies de treball.

VI. Inclusió i diversitat:

• Llenguatge emprat, culturització, contextualització: L’aplicació escull arbitràriament tindre poca documentació, dirigida principalment a desenvolupadors en lloc de l’usuari final. Per tant, no es fa un ús inclusiu ni contempla la diversitat de l’usuari.
• Identitat de gènere: No es fa cap referència ni existeix una diferència de serveis ofertats depenent d’identitat de cada usuari, cosa que és positiva en aquest sentit.
• Característiques del disseny: la paleta de colors emprada és molt neutra i amb un contrast interessant, que manté una cohesió continua. Per una altra banda, aquesta cohesió tan estricta fa que no hi hagi opció de personalització o adaptació de la interfície, cosa que deixa a una bona part dels usuaris potencials a un nivell d’us desfavorable si els comparem amb els usuaris més experts.

V. Bibliografia i recursos emprats: