BKInspector

Solució

La solució a aquesta situació és la creació d’una aplicació pròpia pel personal que ha de fer servir el sistema amb les qualitats:

Usabilitat:

El sistema ha de fer servir unes funcionalitats òptimes per notificar els resultats de forma intuïtiva i que sigui fàcil d’aprendre pels usuaris, fent ús d’elements ja existents en l’aplicatiu de Burger King.

Interfícies

La Interfície ha de contenir una unitat en les pàgines fent servir les mateixes estructures per destacar el mètode seqüencial per la digitalització de la inspecció.

Funcionalitat

S’ha escollit una versió en aplicació per tal de tenir una discreció en el moment de la Inspecció per no influir en els resultats. El sistema compte un servei ordenat on es mostren tots els elements a analitzar per facilitar la tasca als inspectors.

Optimització

Totes aquestes millores optimitzen el servei incloent la digitalització directa de la Inspecció des dels dispositius tecnològics amb el programari.

Prova:

Preguntes prèvies

• Quina és la teva experiència utilitzant el programari de Burger King?
• Quina és la teva experiència en els restaurants de Burger King?

Tasques

• Escenari 1: Ets un supervisor de Burger King i has d’anar al restaurant de Diagonal Mar. En el restaurant has de demanar una long chicken i puntuar els altres aspectes generals.
• Escenari 2: Ets el director de Burger King Diagonal mar i has de confinar i validar la Inspecció de l’Inspector Héctor Sánchez.

Preguntes posteriors

• T’ha semblat un sistema intuïtiu?
• Quins elements  positius destacaries? I negatius?
• Creus que la gent se n’adonaria durant esta fent el test en el restaurant?

Resultats dels tests

Test paula: https://youtu.be/lOcI7ihWNU4

Test Monica: https://youtu.be/h_0t8G1F79s

Test Cristòbal: https://youtu.be/wEFqDtxtso0

Aspectes positius:

• Intuïtiu: Els usuaris no tenen problemes per seguir els passos per continuar amb el procés i poden cercar tots els elements de forma intuïtiva.
• Òptim: Tots els participants han completat l’objectiu amb un temps inferior  a 5 min.
• Elements a la pantalla: Utilització d’elements dels elements necessaris per a la funció de l’aplicatiu i comprensió de l’arquitectura de la informació i utilització dels colors i mides tipogràfiques correcte.
• Discreció: Els participants que tenen experiència en anar a restaurants i en l’aplicatiu de Burger King notifiquen que és  un mètode discret per avaluar la qualitat del restaurant sense ser identificat.

Aspectes negatius

• Problemes de navegació: Diversos usuaris han navegat per les pantalles, però han tingut dificultats a seleccionar les àrees, ja que les àrees interactives per seleccionar una opció és molt reduïda.

Conclusió

En conclusió, l’aplicatiu és intuïtiu i tots els participants han pogut arribar al final del procés sense cap problemàtica, exceptuant que les àrees interactives eren reduïdes i ha causat problemes a alguns participants.

Millores

A partir del testatge i les conclusions s’han modificat diversos elements per millorar l’experiència d’usuari als usuaris que faran servir l’aplicatiu.

Millores proposades

• Increment de les àrees interactives per facilitar l’accés i crear una navegació més fluida pel sistema.
• Implementació d’Efectes per destacar la retroacció de les funcions perquè l’usuari tingui coneixement sobre les ares que són interactives.

Objectiu

• Aquest canvi aporten a la fluïdesa en la navegació i millora de l’experiència per nous usuaris i experimentats

Vídeo

El vídeo mostra els avantatges del sistema mostrant el seu ús mentre s’informa de les millores que es poden obtenir fent ús de BKinspector.

Enllaç vídeo: https://youtu.be/KmUGhbmSAJo

Reflexió

En conclusió, amb aquest projecte s’ha pogut observar les eines amb les quals es poden crear prototips amb una identitat visual i funcionalitats de forma òptima. Els components conformen una gran ajuda a assegurar la coherència de l’estil i estructura d’una forma optimitzada en elements que s’editen en comú i es reutilitzen els elements, facilitant la feina en grans equips de treball i en gestionar un prototip amb un gran nombre d’elements aportant una gran agilitat en el procés de disseny. Les estructures s’han creat a partir de l’estudi de l’aplicatiu principal i utilitzant-les amb petites variacions, però les que no existien s’han hagut de crear mitjançant el mètode de treball amb àtoms, s’han fet servir elements de les estructures per crear-ne pròpies.

El test ha facilitat a identificar com funciona el prototip davant un usuari avaluar els elements i l’experiència d’usuari per detectar punts dèbils o millores que es poden fer al prototip i poder ajudar-ho de forma ràpida i eficient per tal d’optimitzar la creació de disseny.

En conclusió, quan es combinen els components amb el test es permet fer una avaluació i establir una conclusió per posteriorment modificar el component i que tots els elements es modifiquin, optimitzant el temps i establint un mètode iteratiu per millorar el resultat i obtenir una solució òptima que aporti una experiència d’usuari positiva.

Personalment, en aquest projecte he pogut veure la gran importància dels components i les millores que es poden fer als prototips a través de tests amb usuaris, m’agradaria haver fet més tests, però va haver-hi limitacions que no ho van permetre.

Enllaç FIGMA: https://www.figma.com/design/9EqsnpsDstlmXCzWzcmEMv/R4-proto?node-id=30-742&t=tODgwZj9vEpIJMpk-1

R4. Prototipat y avaluació de la usabilitat i cas d’estudi
1r semestre 24-25
Héctor Sánchez I Pedrero
12/01/25

Cas 1

Introducció

En el primer cas s’ha buscat un objecte físic el qual causa problemàtiques en la seva comprensió de sistema amb usuaris que s’inicien en la utilització de l’eina. Per aquesta raó s’analitzarà amb un test heurístic i es construiran esquemes que mostren els 3 models de sistema, disseny i d’usuari.

L’objecte escollit és el timbre el qual és un objecte quotidià que té un ús diari i la seva funcionalitat principal és notificar quan algú timbra la teva porta i saber qui és per posteriorment obrir. És un objecte físic que es controla a través dels botons es pot navegar per la interfície virtual.

Test heurístic

El test heurístic és un mètode que serveix per avaluar una interfície o disseny fent ús de preguntes o aspectes específics. Aquest estudi permet tenir coneixement de la interacció entre persona i sistema sense la necessitat de participants, un estudi que es fa servir sobretot per la interacció amb interfícies.

Es van analitzar els 10 punts de Nielsen els quals són: 

Visibilitat de l’estat del sistema:

El sistema ha de mantenir els usuaris informats sobre el que està passant, proporcionant retroalimentació adequada en un temps raonable.

Correspondència entre el sistema i el món real:

La interfície ha d’utilitzar un llenguatge i conceptes familiars per als usuaris, seguint convencions del món real per facilitar la comprensió.

Visibilitat de l’estat del sistema:

A través d’elements numèrics o formes geomètriques es mostra en quin punt es troba l’àrea per seleccionar i que s’està veient en cada moment.

Correspondència entre el sistema i el món real:

Es fan servir icones i nomenclatures que representen elements del món real, d’aquesta manera l’usuari pot identificar de forma òptima perquè serveix cada element.

Control i llibertat de l’usuari:

Per desfer les accions o anar enrere es fa servir el mateix botó relacionat, donat un control de l’usuari intuïtiu.

Consistència i estàndards:

Se segueix un funcionament similar en totes les pantalles i es fan servir elements gràfics que segueixen la identitat estilística.

Prevenció d’errors:

La possibilitat d’aparèixer errors és mínima, però la funció dels botons per moure’s per les interfícies és difícil d’entendre per les persones principiants.

Reconeixement en lloc de memòria:

Tots els elements són reconeixibles deguts a la seva nomenclatura o elements gràfics, també les accions no són molt complexes i amb 1 o 2 accions s’arriba a l’objectiu de l’usuari.

Flexibilitat i eficiència d’ús:

Les funcions són tan simples que qualsevol usuari pot fer ús d’elles i no es poden simplificar més. 

Estètica i disseny minimalista:

Es fan servir els elements mínims, però a la pantalla principal es podria reduir perquè es pugui accedir als elements d’interès més ràpidament.

Ajuda als usuaris per reconèixer, diagnosticar i recuperar-se d’errors:

La possibilitat d’error és molt improbable i no s’ha trobat cap missatge, en el cas que la persona es perdi s’hauria de guiar per arreglar-ho.

Ajuda i documentació:

No s’explica quins botons hi ha i quines funcionalitats tenen, també no hi ha ajuda quan un usuari no sap com tornar al punt d’inici o avançar.

Models mentals

• El model d’usuari  té un punt de vista que refereix l’experiència de l’usuari en interactuar amb la interfície/ Objecte.
• El model Sistema té present com és la comunicació de sistema i les seves funcionalitats i elements que fa servir.
• El model Disseny té un punt de vista dels dissenyadors mostra com s’ha concebut el sistema, mostrant la raó de tots els elements que s’han inclòs.

Solució i Prototip

Es van buscar solucions a les problemàtiques actuals per millorar l’experiència de l’usurari i es van establir els elements que es modificarien i que s’implementarien. Per mostrar-ho i que es pugui veure la millora es va crear un prototip de baixa fidelitat per poder veure i analitzar el seu ús actual.

La principal problemàtica era la compressió de la funcionalitat i reducció d’elements que dificultaven la compressió per aquesta raó l’això era l’objectiu principal. Per aquesta raó es va establir en les icones per navegar la mateixa formar rodona que el botó físic, perquè l’usuari pugui visualitzar la relació entre els 4 botons de la pantalla amb els 4 físics. A més es van establir colors per facilitar la compressió entre botons per cancel·lar i botons per accedir o acceptar. En general, el disseny i la navegació és molt fluida i només s’han aplicat aquestes millores les quals milloren l’experiència i la compressió dels botons.

Cas 2

La topografia és la relació visible i funcionals entre elements que es troben a les interfícies físiques o virtuals. Són relacions entre elements fàcilment identificables a través de principis de visibilitat, la qual proporciona pistes sobre la utilització de la interfície. 

En aquest cas es va escollir el timbre el qual la seva funcionalitat principal és notificar quan algú timbra la teva porta i saber qui és per posteriorment obrir. És un objecte físic que es controla a través dels botons es pot navegar per la interfície virtual on es pot veure en diversos punts el principi de la topologia present.

El principi es troba en la relació dels botons es visualitza en la mateixa posició que la distribució en la pantalla digital, d’aquesta manera l’usuari relaciona a través de les pistes en la posició que s’han tingut en compte prèviament a l’hora de dissenyar.

Un altre exemple que mostra aquest principi aplicat és en la pantalla que serveix per configurar el volum del timbre. En aquesta pantalla fa servir les normes culturals per mostrar augment del volum amb la direccionalitat de la lectura a l’occident de dreta a esquerra.

Totes aquestes aplicacions fan que la utilització i l’experiència de l’usuari sigui més positiva i es redueixin les possibilitats d’errors i una experiència negativa de l’usuari.

Figma

Bibliografia

Norman, D. A. (2011). La psicología de los objetos cotidianos / Donald A. Norman ; traducción de Fernando Santos Fontenla (F. Santos Fontenla, Trad.; 5a edición). Nerea Editorial.

Universitat Oberta de Catalunya (UOC). (n.d.). Aplicació 7: Models de disseny i usabilitat. En Quadern de Prototipat. Disponible a: https://quadern-prototipat.aula.uoc.edu/

R2 Prototipat i construcció sistèmica del disseny

Introducció:

En aquest projecte es mostrarà el meu projecte de l’activitat R2 de l’assignatura prototipat on se segueix treballant amb l’aplicatiu de Burger King, però aquesta vegada es tractava en tenir més coneixement sobre els elements que formen l’app i la identitat de la seva marca, explorant elements que van més enllà de l’aplicació. En la segona part amb tot el coneixement van rebre un repte per tal de crear un prototipat que ajudi els inspectors a fer la seva feina i documentar les dades sense dificultats.

Part 1:

Per la primera part es va navegar buscant els elements de gran importància per tal de trobar repeticions que ens mostrin que són elements de construcció sistèmica. Posteriorment, una vegada obtinguts tots els elements sistèmics es van crear els components i es van fer modificacions per als quan estan seleccionats, no seleccionats, hover, inactius, etc.

Enllaç per accedir al contingut a Figma

Part 2

En l’apartat de prototipat teníem aquest repte:

“Un inspector de qualitat intern necessita registrar què ha provat, en quin restaurant: registrar quant ha trigat la comanda, com ha estat el servei i la presentació, així com la qualitat del menjar, incloent-hi un espai per a comentaris. Ha de ser fàcil i ràpida d’utilitzar, i encaixar amb el llenguatge visual i l’experiència de Burger King.”

Personalment, ho volia enfocar en un sistema que sigui molt simple d’utilitzar sense moltes distraccions perquè es pugui percebre correctament la feina que ha de fer l’inspector i un espai per adjuntar les dades de forma visual i per puntuació d’1-5 amb possibilitat de comentaris i observacions. Es van agafar de referència diverses pàgines i components extrets per seguir el mateix estil visual i narrativa juntament amb el concepte de formulari tradicional que tots els usuaris perquè no s’hagi d’aprendre un una nova forma de fer servir el sistema sinó fer servir els elements que les persones ja estan acostumades per reduir la corba de coneixement.

Es pot veure-la unes de les primeres versions definitives, però hi havia un problema relacionat amb l’ordre de valoració, hi havia un ordre previ que condicionarà l’experiència de l’inspector, ja que buscarà un ordre específic per les accions i potser es distreu o no té en compte un element de gran importància que es troba en l’últim apartat. Per això es va decidir repensar-ho i crear una solució que li permeti omplir les 3 temàtiques a la vegada.

Reflexió

La importància d’analitzar els elements que conformen el llenguatge i la narrativa de la marca a més de tenir coneixement dels sistemes interactius ens fa obtenir un coneixement ampli de l’univers de Burger King. Tots aquests coneixements ens dona la possibilitat d’entendre les raons de les seves decisions i com és l’experiència de l’usuari tenint coneixement de l’usuari dels elements que conformen el sistema.

La identitat de la marca ha estat renovada al llarg dels anys, però en l’última renovació han aplicat uns canvis que els ha fet destacar pels seus elements com la nova línia visual de les icones, la implementació de la seva pròpia tipografia i la seva gamma cromàtica fa que es pugui diferenciar notòriament de la resta d’empreses. A més a més, aportant una narrativa en els seus productes que a través dels elements visuals ajuda a l’usuari a navegació i assolir els seus objectius.

Tot això es graciés a la seva senzillesa i accessibilitat que facilita l’ús, també es mostra com és el menjar i tot segueix una consistència visual que mitjançant els seus colors i formes connecta amb una gran diversitat d’audiències, però la gamma cromàtica pot fer pensar que no és menjar tan natural per l’ús de colors molt cridaners i és una identitat que no està en la línia general i pot haver-hi una audiència que no connecti amb aquell públic.

Dins de la seva app es poden veure una gran quantitat d’elements, però la seva arquitectura de la informació és clara i funciona per blocs per facilitar la usabilitat. Compta amb una carta on es poden veure tots els productes disponibles juntament amb una imatge i informació nutricional que es pot consultar de forma intuïtiva igual que tot el procés per demanar el menjar. Se simplifica el flux i es guia a la persona pas a pas per arribar al seu objectiu.

La creació d’un design system està pensat sobretot quan es vol treballar per tenir coherència en tots els elements de la marca, d’aquesta manera es creen uns elements que segueix la línia visual i sistemàtica per donar uniformitat en tot el conjunt d’elements que per exemple es mostren en una aplicació o web. Aquest sistema també té inconvenients o limitants que poden afecta a l’hora de la ideació, ja que els elements estan predefinits i afegir un nou element pot suposar un gran repte sobretot quan és una empresa que ha fet ús de la imatge i del design system durant molt temps. 

Un element que es fa servir per a la creació d’interfícies és el prototip de baixa fidelitat el qual té un us concret que serveix per analitzar la navegació i l’experiència amb l’usuari i la seva navegació a través d’un model de la interfície on les formes i colors plans simplificats, on es pot apreciar l’estructura. Aquestes pràctiques se solen fer per mostrar una interfície a un client o és volent fer proves d’usabilitat per dissenyar un prototipat definitiu. En aquest projecte s’ha pogut veure com es podia plasmar un sistema de navegació de forma àgil i òptima per fer pràctiques i anant millorant el prototip anterior per arribar a un que l’experiència era més positiva per l’usuari.  

En conclusió, la compressió de la identitat corporativa, la narrativa del producte i els elements interactius que conformen l’univers de Burger King  ha permès tenir un coneixement més ampli i saber el perquè de moltes decisions que no quedaven clares prèviament. Per la construcció de l’aplicació pels inspectors ha sigut de gran ajuda tots els coneixements perquè era la base per la solució de la problemàtica de l’activitat. En definitiva, es poden observar els elements més destacats i que confirmant la identitat i l’app de Burger King i un prototip de baixa fidelitat on s’ha experimentat fins a arribar a una solució simple, intuïtiva i que ajuda a l’usuari durant tot el procés.

Per visualitzar el Repte 1 clica sobre la portada del Figma per accedir a tot el contingut.

Si vols veure el vídeo on es mostra el funcionament del prototipat clica a l’enllaç a continuació:

Sánchez_Héctor_VidProto

Hola companys i companyes,

El prototip que adjunto és el de les pantalles de “Carta”, el procés de compra d’un producte i la selecció de local per recollir la comanda. He intentat ser el màxim fidel a l’app original de Burguer King, tant amb les icones, els productes i les animacions. D’altra banda, vull remarcar que he fet interactius els primers 4 productes del prototip. En aquest sentit, considero que no he sabut implementar bé el component dels productes per automatitzar-lo.

Que us sembla?

Ens llegim!

Adjunto l’enllaç d’acés al prototip de l’activitat.

https://www.figma.com/proto/rhcOEOHvDlIZy77aRvaWpu/PAC1?node-id=2004-28216&t=CMd4pzBhOezilMZ2-1