Disseny d'interacció multiplataforma

JuegosArea.com DISSENY D’INTERACCIÓ MULTIPLATAFORMA Disseny d’Interficies Multimèdia Segona Prova d’Avaluació Continuada (PAC2)

David Beltrà Tejero dbeltrat@uoc.edu Aula 1

Índex PART I: Wireframes ........................................................................................... 3 Pàgina home................................................................................................... 3 Pàgina home: opcions desplegades. .............................................................. 4 Pàgina home: detalls. ..................................................................................... 5 Pàgina subhome............................................................................................. 6 Pàgina de joc. ................................................................................................. 7 Resultats de cerca. ......................................................................................... 8 Pàgina d’usuari: usuari propi. ......................................................................... 9 Pàgina d’usuari: altres usuaris...................................................................... 10 Pàgina de contacte. ...................................................................................... 11 Responsive design ....................................................................................... 12 PART II: Usabilitat ............................................................................................ 15 Test d’usabilitat............................................................................................. 15 Tasques a realitzar: ...................................................................................... 15 Punts a millorar:............................................................................................ 17 Bibliografia........................................................................................................ 19

-2-

PART I: Wireframes Pàgina home.

En tocar es torna a la pàgina home Obren un menú desplegable de categories o de Login/registre

Slideshow de jocs automàtic, que es pot controlar amb l’escombrat horitzontal del dit.

Menús desplegables.

-3-

Pàgina home: opcions desplegades.

Enllacen amb les diferents subhomes

En desplegar-se apareix la icona + i en tocar-la enllaça amb la subhome Slideshow de jocs automàtic, que es pot controlar amb l’escombrat horitzontal del dit.

-4-

Pàgina home: detalls.

Formulari d’entrada d’usuari, si es fa click a Registrarse es va a la pàgina de registre.

Un cop l’usuari ha entrat al sistema el botó Login/Registro canvia a Mi Perfil

-5-

Pàgina subhome.

Menú desplegable que permet triar els criteris: “Mejor valorados”, “Alfabéticamente”, “Más jugados” i “Más nuevos”.

Les etiquetes es mostren sota la imatge del joc. En tocar la imatge del joc o la zona de texte de la dreta es va a la fitxa del joc.

Detall del menú desplegable i la informació del joc

En cas de tenir més de cinc resultats es mostrarà la paginació i les fletxes de navegació.

-6-

Pàgina de joc.

En clicar a sobre de l’icona del joc amb el símbol “play” sobreimprés s’accedeix al joc. El joc s’executarà a pantalla completa i en format horitzontal.

Enllaços per afegir un joc a preferits, puntuar-lo o compartir-lo a les xarxes socials.

-7-

Resultats de cerca.

Es mostra una etiqueta de categoria a sota de cada resultat de cerca, que enlla莽a amb la subhome corresponent, aix铆 com la data de publicaci贸 i les partides jugades.

Detall de la inforamci贸 del joc

-8-

Pàgina d’usuari: usuari propi.

En tocar la imatge de perfil s’ofereix la opció de canviar-la per una foto de la galeria del dispositiu o fer-ne una amb la càmera.

Menús desplegables

Detall dels menús desplegats

-9-

Pàgina d’usuari: altres usuaris.

Menús desplegables, es comporten igual que els del perfil propi.

- 10 -

Pàgina de contacte.

Menú desplegable, les opcions son “General”, “Sugerir un juego nuevo”, “Avisar de un juego que no funciona”, “Avisar de un juego con contenido inapropiado”, “Probleas con el perfil de usuario”.

El botó “Enviar” només s’activa quan s’han omplert tots els camps obligatoris.

- 11 -

Responsive design S’ha realitzat una adaptació dels wireframes de la versió d’escriptori del lloc web JuegosArea.com per tal d’una visualització òptima en dispositius mòbils del tipus smartphone.

Les principals mesures que s’han pres per a efectuar aquest disseny sensible (responsive design) han estat: 

Adaptació de la mida dels elements.



Supressió d’elements poc rellevants o poc útils en un entorn tàctil.



Distribució vertical de la informació, evitant l’scrolling horitzontal.



Priorització de la modularitat en els elements.



Incorporació de seccions desplegables per maximitzar la cabuda d’informació en pantalla.



Adaptació a les possibilitats tàctils i gestuals dels smartphones amb els slideshows de navegació horitzontal.

Per a realitzar els corresponents wireframes s’ha pres com a referència la pantalla d’un dispositiu iPhone, és a dir 320x480px tot i que la mida és adaptable a qualsevol altre tamany de pantalla de format vertical, tenint en compte que aquest és un dels punts claus del disseny sensible.

També s’ha tingut en compte el tamany de les zones tàctils de tal forma que aquestes siguin prou grans com per poder tocar-les sense problemes. S’ha procurat també que les zones de major interacció siguin les més grans i les més accessibles.

- 12 -

Les interaccions s’han dissenyat de la forma més simple possible, de tal manera que en la majoria dels casos només cal tocar la zona desitjada de la pantalla. En els casos de les cerques, per exemple, s’ha establert el criteri per defecte dels jocs millor valorats, que és el que normalment es farà servir, de forma que només caldrà realitzar alguna acció en cas de no voler aquest criteri d’ordenació.

La recomanació general és de no utilitzar menús desplegables, en aquest cas s’han fet servir ja que la interacció amb el menú provoca un desplaçament de tot el contingut cap avall en forma d’acordió en comptes d’una finestra desplegable que tapa part del contingut.

En quant als menús de selecció de criteris d’ordenació dels continguts, o bé del tema del missatge que volem enviar, tampoc es generaria un menú desplegable en sí sino que s’aprofitaran les possibilitats integrades dels dispositius móbis per a realitzar aquest tipus de seleccions, amb un menú de roda que apareix en la part inferior de la pantalla:

S’han adaptat les pàgines demanades a l’enunciat, pro tal com es veurà al tes d’usabilitat, caldria integrar la fitxa de joc amb el propi joc per reduïr la profunditat de l’arbre de navegació.

- 13 -

En quant al codi, totes les imatges tindran un atribut textual alternatiu, de tal manera que es pugui navegar per la pàgina encara que aquestes no es carreguin en entorns on la navegació és lenta, o si l’usuari les ha desactivat per estalviar dades.

L’experiència global en la realització d’aquesta adaptació ha estat satisfactòria.

Soc un usuari habitual de smartphones i estic familiaritzat amb la navegació tàctil i amb l’estructura de molts llocs web realitzats amb disseny sensible, a més vaig realitzar la pràctica d’Arquitectura de la Informació sobre JuegosArea el semestre passat, pel que ràpidament vaig poder fer-me una idea del que es necessitava.

- 14 -

PART II: Usabilitat Test d’usabilitat S’ha realitzat un test d’usabilitat amb tres usuaris dintre del target al que s’adreça un portal de jocs flash com juegosarea.com.

El test s’ha realitzar visualitzant els wireframes en un dispositiu iPhone, i canviant de plantilla segons les decisions preses per cada usuari.

Perfil dels usuaris triats: Usuari A

Usuari B

Usiari C

Edat

32

26

25

Nivell d’estudis

Universitaris

Universitaris

Universitaris

Uús d’internet

Alt

Alt

Mtjà

Experiència amb llocs similars

Baixa

Alta

Molt baixa

Tasques a realitzar: Tasca 1: Jugar al joc “Rooster Revenge” Els tres usuaris han sabut veure fàcilment la barra de cerca al capdamunt de l’aplicació, i l’han feta servir per obtenir un llistat de jocs amb la cerca “Rooster Revenge” Un cop obtinguda la cerca han sabut accedir a la fitxa de joc sense problemes. Els usuaris B i C han entrat al joc sense problemes, en canvi l’usuari A no ha sabut identificar que s’havia de tocar a la imatge de previsualització del joc per començar a jugar.

L’usuari A ha suggerit fer més evident aquesta funció amb un botó que indiqui “Jugar” explícitament, l’usuari B ha trobat innecessari passar per la fitxa del joc abans d’arribar al joc en sí, i que li hagués resultat molt més còmode accedir directament al joc des dels resultats de la cerca.

- 15 -

Tasca 2: Trobar quin ha estat el joc d’acció publicat més recentment a la web.

Els usuaris B i C han anat directament al menú “Ver categorias” de la capçalera de la pàgina. Hi ha seleccionat la categoria “acción” i un cop a la subhome corresponent a “accion” han deduït que el joc que es mostrava a la zona interactiva de “Novedades” era el més nou publicat.

L’usuari A s’ha dirigit a la zona desplegable d’”accion” de la pàgina principal, en tocar-la s’ha desplegat pro des d’allà no ha sabut accedir a la categoria “accion” i ha donat la tasca per fracassada.

Tasca 3: Saludar a un amic que també és usuari de la pàgina.

Els usuaris A i B han identificat ràpidament que calia ingressar en el sistema per poder enviar missatges. Han accedit al formulari de login de la capçalera de la pàgina i des d’allà al seu perfil d’usuari.

L’usuari A ha buscat l’usuari a la secció d’amistats del seu perfil, ha visitat el perfil de l’usuari que volia contactar i ha tocat el botó “Contactar” per enviar-li un missatge.

L’usuari B ha anat directament a la secció de missatges dins del seu perfil d’usuari i ha redactat un missatge per al seu amic.

L’usuari C no ha sabut identificar que caldria entrar al sistema per a realitzar aquesta acció i ha intentat buscar el nom d’usuari del seu amic al cercador de jocs.

Cal destacar que l’usuari A i B han confós la icona de missatges no llegits al resum del perfil d’usuari amb una zona interactiva que els permetria accedir als missatges.

- 16 -

Tasca 4: Informar de que un joc no funciona.

Els usuaris A i C han buscat directament el formulari de contacte al peu de la pàgina per informar de l’error.

L’usuari B ha intentat trobar una icona per reportar errors a la fitxa de joc i en no trobar-la ha optat per fer servir el formulari de contacte del peu de pàgina.

L’usuari B ha fet notar que des del formulari no es pot introduir l’adreça del joc del qual es vol informar i ha suggerit que s’autocompleti el camp en accedir al formulari de contacte des d’una pàgina de joc.

Tasca 5: Afegir un joc als meus preferits.

Els tres usuaris han accedit a un joc qualsevol i han recordat fàcilment on es trobava l’icona d’afegir a preferits que ja havien observat mentre realitzaven les altres tasques.

Punts a millorar: Després de realitzar el test amb usuaris s’han trobat certes funcionalitats que caldria millorar: Integració de la fitxa de joc al propi joc: Es podria passar directament dels resultats de la cerca la execució del joc, amb la possibilitat de pausar-lo i accedir a la informació d’aquest des d’un menú desplegable amb un escombrat des del lateral de la pantalla.

Botó d’informació d’errors: Des del propi joc poder accedir al formulari de contacte per informar-ne d’un error.

- 17 -

Informació del perfil d’usuari: Els usuaris tenen la sensació de que la informació del perfil d’usuari es una zona tàctil, caldria fer-ho així de tal manera que en tocar l’icona de missatges o la de preferits, la pantalla fes un auto-scroll a la zona desitjada del perfil.

- 18 -

Bibliografia.

Monjo Palau, Tona. Gèneres Ed. FUOC (Barcelona) PID_ 00167593. © FUOC. Monjo Palau, Tona. Disseny centrat en l’usuari Ed. FUOC (Barcelona) PID_00167594. © FUOC. Monjo Palau, Tona. Usabilitat Ed. FUOC (Barcelona) PID_ 00167595. © FUOC. Ringlein, Martin. (18/05/2010) Designing iPhone and

iPad apps. © 2013

SlideShare Inc [data de consulta: 02/04/2013] enllaç: <http://www.slideshare.net/mringlein/designing-iphone-ipad-apps> Wiki de Mitjans Interactius C.04 Pautes de disseny de dispositius mòbils. [data de consulta 03/04/2013] enllaç: <http://cv.uoc.edu/app/mediawiki16/wiki/C.04._Pautes_de_disseny_de_dispositi us_m%C3%B2bils> Wiki de Mitjans Interactius D.07.02. Especificacions tècniques de disseny per a dispositius mòbils. [data de consulta 03/04/2013] enllaç: <http://cv.uoc.edu/app/mediawiki16/wiki/D.07.02._Especificacions_de_disseny_ per_a_dispositius_m%C3%B2bils> Windows 8 Touch Guidance. (03/12/2013) © 2013 Microsoft [data de consulta: 02/04/2013] enllaç: < http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx>

- 19 -