Conceptes Bàsics del DCU i l'usabilitat by Paquita Ribas

CONCEPTES BÀSICS DEL DCU I L’USABILITAT

USABILITAT (UOC) – PAC 1 – PAQUITA RIBAS (2013)

PREGUNTA 1 En base al principi bàsic d’usabilitat d’interacció, analitzar diferents webs cercant moments en què no compleixen aquest principi i moments en què sí ho fan.

BIOPARC http://www.bioparcvalencia.es/va/

Disseny estètic i distribució de menús Disseny atractiu amb icones adaptables a la temàtica. El problema que trobo és que hi ha massa botons en la primera pàgina i poc concrets; com per exemple “Experiència Bioparc” o “Medi ambient”. A més, els botons del menú estan mesclats. Caldria prioritzar la reserva i venda d’entrades, els animals i els seus hàbitats, els horaris i tarifes i la informació al visitant. La resta, com les noticies o les ofertes es poden col·locar a un altre lloc.

Visibilitat i estat del sistema - El sistema ha de mantenir informant en tot moment l’usuari. La majoria de les pàgines d’aquest web disposen de breadcrums que indiquen l’usuari on es troba en cada moment. La incorrecció és que no sempre ens indiquen de forma verídica el camí des d’on l’usuari hi ha accedit. Per exemple, si seleccionem “Reserva d’entrades” curiosament el breadcrums senyala el següent:

Consistència entre el sistema i el món real El sistema ha d’utilitzar el llenguatge de l’usuari i la informació ha d’aparèixer en un ordre lògic. Encara que l’usuari utilitzi el portal en llegua catalana, hi ha moments que automàticament es canvia al idioma castellà, com per exemple, quan s’accedeix a la compra de les entrades. Una persona catalano-parlant pot entendre perfectament el castellà, però el problema el pot tenir un usuari de parla anglesa, perquè es troba amb el mateix problema. En el cas que intenti comprar una entrada des del portal en llengua anglesa, arribarà a la pantalla “Taquilla Online” que està totalment en espanyol [http://195.77.170.27/NEW_WEB/]

Consistència i estàndards 1 - El botó de “Reserva d’entrades” porta lloc a confusió, ja que és on l’usuari de forma intuïtiva es dirigeix quan vol efectuar la compra d’una entrada, encara que l’opció “Compra d’entrades” es trobi al costat. La sorpresa és quan ens porta a una pàgina destinada a grups, centres educatius i agències. [http://www.bioparcvalencia.es/va/horarios-ytarifas/colegios-grupos-y-agencias/] 2 – Estan mesclats els continguts de “Experiència Bioparc”, “Notícies” i “Informació al Visitant”. Les tres semblen tenir el mateix estil de contingut més prop de la notícia que d’informació indispensable. 3 – A més, en “Informació al Visitant” ens trobem amb un menú amb dues opcions que semblen iguals i que poden confondre l’usuari (veure exemple a ma dreta). 4 - Si s’accedeix, per exemple a “Pase Berde!” des de compra d’entrades i no recordem quines característiques té aquest tipus de tiquet, no hi trobem informació al respecte [http://195.77.170.27/NEW_WEB/ticket_anual.aspx]. Hem de tornar a la pàgina principal (que des d’aquesta plana no ho podem fer des del logotip) i cercar el botó de “Entrada

Berde!”. Novament, les persones de parla anglesa es troben amb el problema afegit que aquest tiquet es diu d’una altra manera en anglès. Passa el mateix amb “Can-rrera” i amb les promocions “Escápate” que tampoc tenen cap tipus de descripció del servei. En els dos casos, l’usuari ha de tornar a la pàgina d’inici i cercar en “Informació al visitant”.

Prevenció i recuperació d’errors És

important

prevenir

màxim

l’existència

d’errors. Si és necessari que apareguin aquests missatges, han de contenir opcions de confirmació abans d’executar les accions de correcció. Provant els formularis ens adonem que no validen de manera correcta. S’ha provat de reomplir els camps amb lletres aleatòries reconèixer

el un

sistema error

només el

és

camp

capaç del

electrònic. [http://www.bioparcvalencia.es/horarios-ytarifas/colegios-grupos-y-agencias/]

correu

Els camps dels telèfons només haurien de validar amb números i sense símbols ni espais. El missatge d’error “el email parece incorrecto” tampoc suggereix el tipus d’error. Si ens dirigim a realitzar una compra, que prèviament hem seleccionat i que es troba en el cistell de la compra, i reomplim de manera incorrecta el formulari, ens el dóna per bo. En aquest cas només permet l’entrada de nombres en el camp del codi postal i el telèfon, però no valida ni el nombre de caràcters ni si el codi postal és un codi correcte del territori espanyol.

Ajuda i documentació Tot i que el botó “Informació al Visitant” és fàcil de trobar, no ho és tant seleccionar una opció quan s’accedeix a la pàgina, ja que el que troba l’usuari és un barreig d’informació desordenada. El moviment instintiu del visitant és tornar a sortir [http://www.bioparcvalencia.es/va/informacion-al-visitante/].

Flexibilitat i eficiència d’ús El sistema ha d’estar preparat per a satisfer tant els usuaris novells com els experimentats. En general, encara que a primera vista la web és agradable, resulta difícil trobar una noticia concreta. S’han de fer massa clics per a arribar on l’usuari desitja. A més, les etiquetes dels botons tampoc no indiquen clarament el que es trobarà quan hi accedeixi, això fa que perdi molt de temps navegant aquí i allí.

Conclusió: Coherència En general i des del punt de vista gràfic el disseny és coherent, cada pantalla comparteix la disposició gràfica, color i distribució dels continguts. És diferent quan s’entra en la pantalla de “Compra d’entrades”, on canvien els menús i el logotip perd l’enllaç a la pàgina principal. Interacció La interacció, encara que és visible i reversible, no és 100% predicible. Caldria re-nomenar i re-distribuir tots el menús. Les etiquetes dels botons no són clares i no estan ben disposades. Informació, comunicació i retroalimentació És una pena que una web amb tanta informació interessant, com per exemple, un Street View que permet a l’usuari desplaçar-se virtualment dintre del parc, no es trobi millor estructurada.

Control En general, encara que una mica perdut per la mala distribució de contingut, l’usuari té el control de la majoria de les accions. Caldria possibilitat la compra del tiquet directament des de la pantalla on es troba la informació d’aquest. Opcions Es troba a faltar un mapa del lloc que permeti accedir directament a la informació que busca en cada moment l’usuari, sense haver de navegar per les pàgines. En lloc d’això ens trobem amb una llista al peu on figuren simplement enllaços a les pàgines principals, però no les pàgines que deriven d’aquestes.

ISLA MÁGICA http://www.islamagica.es/ Disseny estètic i distribució de menús En contraposició a la web anterior s’analitzen les bones pràctiques de la web de Isla Mágica, i també alguns dels errors. En aquest cas, els menús són concrets i es visualitzen perfectament sobre el fons negre. Cada menú disposa d’un submenú desplegable que porta a pàgines relacionades amb l’opció seleccionada.

Visibilitat i estat del sistema Aquesta pàgina té un detall molt important: només d’entrar, informa a l’usuari de l’horari d’apertura del dia i del dia següent. També disposa de breadcrums que ens indiquen on ens trobem en qualsevol moment de la navegació.

Consistència entre el sistema i el món real Si l’usuari entra des del apartat de la primera pàgina “Venta de entradas online” accedeix a una pantalla que informa de les promocions i permet efectuar la compra. Però amb les pantalles de les altres llengües que no són el castellà tornem a trobar-nos amb el problema de les pàgines no traduïdes. Si accedir, a “The park”, i el menú desplegable “Themed area”, exactament a “La Fuente de la Juventud” (per exemple), ens trobem que el text no està traduït a l’anglès, encara que si ho estan els menús.

Prevenció i recuperació d’errors És en el formulari on novament es troben errors que es podrien evitar. Quan s’accedeix des de “Compra aquí tus entradas” ens trobem una pantalla on es pot seleccionar un dia del calendari. El problema el trobem si seleccionem dies que el parc es troba tancat, com per exemple tots els dies entre setmana del mes d’octubre. Ens dóna l’error “No se encontró ningún evento”. El missatge és confús i l’usuari

pot

saber

què

significa.

Tampoc

suggereix que cal seleccionar un altre dia perquè el parc es troba tancat entre setmana. Només caldria que figurés un petit calendari al costat amb els dies d’apertura assenyalats. Si es segueix amb la compra i es reomplen els camps de les dades personals amb lletres aleatòries, el formulari no valida ni el telèfon, i el e-mail. Els missatges d’error són prou concrets i correctes.

Navegació a través de dispositius mòbils La tendència a navegar, informar-se i comprar a través

dispositius

mòbils

constant

creixement. La interfície web per a ordinador i per a mòbil són totalment diferents i és indispensable que pàgines

d’aquest

tipus

s’adaptin

les

noves

tendències. Els dos casos analitzats anteriorment treuen mala nota

quan

tracta

navegació

amb

smartphone. Tant l’un com l’altra no han adaptat les seves webs als dispositius mòbils. A més, la pàgina de Bioparc queda absolutament anul·lada perquè els apartats que necessiten tecnologia flash no es veuen. A continuació figuren una llista de pàgines d’aquest tipus que sí han estat adaptades a les noves tendències de navegació:

PREGUNTA 2 Descriure les fases d’un projecte per a definir dissenyar la plana web d’un nou parc temàtic.

Per a poder aconseguir un bon disseny centrat en l’usuari s’han de passar per les següents fases principals: -

Anàlisi

Disseny

Avaluació

Implementació i publicació

Seguiment

Anàlisi Aquesta fase és molt important, perquè d’ella deriven les següents. No és possible començar a fer un disseny sense haver passat per cadascun dels punt d’aquest primer nivell. És després quan començarem amb el prototipatge.

Objectius de l’empresa – Què vol aconseguir amb el producte/servei?

Imatge de l’empresa i estil – Quina imatge vol mostrar? (comprovar si l’empresa té un llibre d’estil)

Contingut – Gènere. De que tracta el producte/servei?

Identificar i analitzar el grup d’usuaris o target o Cal recollir dades quantitatives sobre l’usuari de tipus demogràfic i social (qui són, quina edat tenen, què necessiten, què els emociona què els desagrada, quan utilitzaran el producte, etc...). 

Entrevistes - La informació es pot recollir mitjançant entrevistes individuals o grups d’estudi. Les entrevistes poden tenir un paquet de preguntes tancades sobre el que els participants esperen trobar en la web i preguntes obertes per a afavorir la recol·lecció de noves idees que es puguin ser d’utilitat.



Persones – En els casos en què el perfil d’usuari és molt ampli se pot treballar amb Persones. Consisteix en una fitxa on es recopilen les dades d’un possible usuari real: on viu, on treballa, sexe, ingressos, oci. Es defineixen els usuaris focals, secundaris, no prioritaris, exclosos, etc.



Escenaris – Descriuen casos concrets d’utilització. Quan i on l’usuari utilitza el producte/servei? Amb qui? Com és l’ambient? Ho fa regularment? Quines coses li resulten atractives?...

Equip humà que tindrem per a realitzar el projecte (dissenyadors, guionistes, programadors, etc.). Nombre de persones i grau d’especialització.

Àmbit de difusió – CD ROM, Web, mòbil, App, etc.

Limitacions de disseny - Continguts, cost i pressupost, temps i calendari...

Estudi de la competència o Avaluació heurística dels llocs de la competència per a detectar errors (i no reproduir-los) o Benchmarking o estudi de les bones pràctiques de la competència

Temps de vida del producte/servei

Actualització dels continguts – És necessari conèixer la periodicitat de les actualitzacions i qui les farà

Disseny Ha de respondre a les característiques definides en el procés d’anàlisi. Encara que en una primera fase pot no ser el definitiu. Consta de les següents parts:

Esquema d’organització i navegació dels continguts (diagrames) o Card sorting – Consisteix en una sèrie de targetes individuals on estan escrits els temes que es volen categoritzar. De manera individual, uns participants agrupen les targetes de forma que tinguin sentit per a ells. S’anoten els resultats i es comparen. o Disseny visual 

Documentació gràfica i llibre d’estil



Buscar exemples de disseny en aplicacions semblants



Gama cromàtica i tipografia



Establiment del reticle

o Disseny de continguts – Títols de pàgina i redacció de textos -

Prototip gràfic – Ens mostra de forma visual el primer estadi del projecte. És un element molt important perquè permet detectar errors. Se sol fer de la pàgina principal i les pantalles interiors més representatives. Pot ser:



De baixa fidelitat – És un esbós que es treballa amb wireframes o a mà.



D’alta fidelitat – Es treballa amb ordinador i té un aspecte molt semblant al producte final.

Prototip funcional – L’usuari pot navegar pel sistema simulant que l’aplicació està acabada. També permet detectar possibles problemes

Avaluació L’avaluació es pot dur a terme durant el procés de disseny o després Tenim els següents mètodes: -

Passeig cognitiu – Es reuneixen un grup de tasques i es presenten dintre d’una carpeta als possibles usuaris. Aquests anoten les accions que creuen necessàries per a executar una tasca. S’analitzen els resultats

Inspecció de la usabilitat / Avaluació heurística – La porten a terme experts en usabilitat i determinen el grau de compliment dels principis d’usabilitat.. Es pot portar a terme en les primeres fases de disseny.

Grups d’estudi – S’obtenen opinions dels usuari enregistrant les reaccions inicials a un disseny. És important incloure usuaris potencias en aquest procés.

Test amb usuaris – Observació dels usuaris mentre executen unes tasques representatives. És necessari fer una avaluació amb usuaris reals abans d’elaborar la versió definitiva del producte. És important recopilar dades sobre com es senten a l’hora de desenvolupar una tasca.

Implementació i publicació Una vegada el disseny està llest i avaluat, s’implementa i es publica.

Seguiment Actualitzacions del producte / Servei.

El disseny Centrar en l’usuari (DCU) situa la persona en el nucli de la interfície. Per això, abans de començar el projecte s’han de definir molt bé els objectius concrets o les estratègies de l’empresa, que en aquest cas és dar-se a conèixer i atraure clients a les seves noves instal·lacions. És igual d’important definir el target al qual va destinat el servei. El sistema de persones i escenaris ens pot resultar molt útil per a definir el públic objectiu. El problema que trobarem és que aquest grup d’individus és molt heterogeni, amb un rang d’interessos molt ampli i diferents nivells de coneixement de les TIC. Les entrevistes ens ajudaran, per tant a recollir dades interessants sobre el que necessiten els usuaris. L’àmbit de difusió és la web i els dispositius mòbils connectats a Internet. Per aquest motiu caldrà dissenyar dos tipus diferents d’interfícies adaptades al tipus de plataforma que l’usuari està usant. El disseny ha de ser eficaç i emocionalment satisfactori. La interfície ha de facilitar la tasca que l’usuari vol realitzar, que pot ser comprar entrades del parc per Internet, consultar ofertes o cercar la informació de com arribar-hi. Tampoc ha d’exigir esforços de memòria, per la qual cosa el contingut més important ha d’estar a ma. Per aquest motiu, el card sorting ens pot ajudar en les primers passos del disseny. És important incloure usuaris potencials en aquest procés creatiu. El llibre d’estil que l’empresa ens ha facilitat determinen en gran mida el disseny visual (gama cromàtica, tipografia, etc.). Com que es tracta un lloc d’oci i diversió hem de fugir de dissenys avorrits però també els que són massa infantils. No hi ha que oblidar que els joves són uns grans consumidors de diversió. És igual d’important el disseny de continguts, evitant els textos massa llargs i etiquetant correctament els títols dels menús i de secció. És important a nivell d’usabilitat que títols i contingut vagin de la mà, però també a nivell de posicionament, ja que Google indexa els titulars.

No podem dar per acabat el disseny sense una avaluació prèvia. El passeig cognitiu i l’avaluació heurística ens ajudaran a detectar possibles errors o mancances i determinar el disseny final abans d’implementar-lo i publicar-lo. Una vegada s’ha implementat i publicat la web a Internet s’ha de crear una guia d’estil de l’arquitectura de la informació que facilitarà la tasca en possibles actualitzacions del producte. El resultat final ha de ser un producte fàcil d’aprendre i intuïtiu, ja que, com es tracta d’un projecte d’oci per a tota la família, el rang de persones que utilitzaran l’aplicació és molt ampli.

PREGUNTA 3 Explicar els tres nivells de processament de les decisions de l’ésser humà i posar un exemple de cada nivell. Nivell visceral Aquest nivell és anterior al pensament. És la sensació que tenim (de amor o de odi) quan la nostra mirada es troba amb un objecte. Segons la sensació que tinguem, es forma una primera impressió en la nostra ment que serà bona o dolenta i que influirà a l’hora de desitjar o rebutjar el producte. Les coses atractives “entren millor” pels ulls de l’usuari. L’ésser humans gaudim contemplant o lluint coses boniques perquè ens fa sentir bé, distints o més importants. Entre dos objectes iguals sempre triarem el que més ens agrada. El que un objecte sigui bell no implica que sigui millor, però nosaltres tenim la tendència de pensar que així és. Si seguim amb els exemples dels parcs temàtics la part visceral es quan l’usuari entra per primera vegada a una web d’aquest tipus. Els colors vius, la tipografia, les imatges, generen el desig de viure l’aventura. Si la pàgina web és apagada, seria i trista o les instal·lacions estan descuidades generaran l’efecte contrari. Nivell conductual Equival a l’experiència que tenim amb el producte/servei per el resultat de la interacció usuari-objecte. Aquest nivell és independent de la aparença. Es valora que el objecte sigui útil, usable, amb opcions fàcilment localitzables, accessible per a tothom, que generi confiança i que sigui valuós per a nosaltres. Hem entrat a la pàgina web per a comprar una entrada al parc. Fàcilment hem trobat el botó de compra d’entrades, hem reomplert el formulari i hem efectuat la compra. Hem pogut accedir-hi perfectament encara que tenim una discapacitat. Immediatament després hem rebut un correu amb la confirmació de la compra de la nostra entrada.

Mentre esperàvem hem llegit molts dels comentaris positius que altres visitants del parc han escrit. Això dóna credibilitat al parc. Ens sentim bé d’haver efectuat la compra sense problemes. Nivell reflexiu Aquest nivell és atemporal. La nostra ment recrea les aportacions del producte/servei a la nostra vida, però també visualitza un futur amb l’objecte de desig. Són els records, però també la satisfacció personal i la imatge que tenim de nosaltres mateixos. Hem triat aquest parc perquè hi anàvem amb la família fa molts d’anys. El fet de recordar els moments de diversió amb els germans ens reconforta. No tenim dubtes que volem tornar-hi.

“ No ens vinculem amb una cosa, sinó amb la relació, els significats i els sentiments que ella representa ” (A.Norman) PAQUITA RIBAS TUR, 2013 Pac 1, USABILITAT, UOC

Llicència: Creative Commons: Reconeixement – No comercial – Sense obra derivada http://creativecommons.org/licenses/by-nc-nd/3.0/es/