Disseny d'interacció multiplataforma

19
JuegosArea.com DISSENY D’INTERACCIÓ MULTIPLATAFORMA Disseny d’Interficies Multimèdia Segona Prova d’Avaluació Continuada (PAC2) David Beltrà Tejero [email protected] Aula 1

description

Proposta de disseny d'interacció per a plataformes mòbils del lloc web juegosarea.com

Transcript of Disseny d'interacció multiplataforma

Page 1: Disseny d'interacció multiplataforma

JuegosArea.com

DISSENY D’INTERACCIÓ MULTIPLATAFORMA

Disseny d’Interficies Multimèdia

Segona Prova d’Avaluació Continuada (PAC2)

David Beltrà Tejero [email protected]

Aula 1

Page 2: Disseny d'interacció multiplataforma

Í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 -

Page 3: Disseny d'interacció multiplataforma

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 -

Page 4: Disseny d'interacció multiplataforma

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 -

Page 5: Disseny d'interacció multiplataforma

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 -

Page 6: Disseny d'interacció multiplataforma

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 -

Page 7: Disseny d'interacció multiplataforma

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 -

Page 8: Disseny d'interacció multiplataforma

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 -

Page 9: Disseny d'interacció multiplataforma

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 -

Page 10: Disseny d'interacció multiplataforma

Pàgina d’usuari: altres usuaris.

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

- 10 -

Page 11: Disseny d'interacció multiplataforma

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 -

Page 12: Disseny d'interacció multiplataforma

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 -

Page 13: Disseny d'interacció multiplataforma

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 -

Page 14: Disseny d'interacció multiplataforma

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 -

Page 15: Disseny d'interacció multiplataforma

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 -

Page 16: Disseny d'interacció multiplataforma

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 -

Page 17: Disseny d'interacció multiplataforma

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 -

Page 18: Disseny d'interacció multiplataforma

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 -

Page 19: Disseny d'interacció multiplataforma

- 19 -

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>