DISSENY DINTERFCIES MULTIMDIA

PAC 3

JORDI LLONCH ESTEVECC BY-NC-SA

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

NDEXndex ................................................................................................................................. 2 1. Prototips descriptori ................................................................................................ 3 1.1 Inici..................................................................................................................... 3 1.2 Catleg................................................................................................................ 4 1.3 Notcies .............................................................................................................. 5 1.4 Fitxa de llibre .................................................................................................... 6 2. Prototips per a tauleta vertical ............................................................................... 7 2.1 Inici..................................................................................................................... 7 2.2 Catleg................................................................................................................ 8 2.3 Notcies .............................................................................................................. 9 2.4 Fitxa de llibre .................................................................................................. 10 3. Prototips per a telfon mbil................................................................................ 11 3.1 Inici................................................................................................................... 11 3.2 Catleg.............................................................................................................. 12 3.3 Notcies ............................................................................................................ 13 3.4 Fitxa llibre ........................................................................................................ 14 4. Test amb usuaris en mbil ................................................................................... 15 4.1 Joan .................................................................................................................. 15 4.2 Teresa ............................................................................................................... 16 4.3 Blai .................................................................................................................... 17 4.4 Punts a Millorar .............................................................................................. 18 4. Bibliografia i altres recursos................................................................................. 19

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 2/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

1. P ROTOTIPS D ESCRIPTORI1.1 I NICI

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 3/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

1.2 C ATLEG

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 4/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

1.3 N OTCIES

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 5/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

1.4 F ITXA

DE LLIBRE

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 6/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

2. P ROTOTIPS PER A TAULETA VERTICAL2.1 I NICI

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 7/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

2.2 C ATLEG

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 8/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

2.3 N OTCIES

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 9/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

2.4 F ITXA

DE LLIBRE

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 10/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

3. P ROTOTIPS PER A TELFON MBIL3.1 I NICI

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 11/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

3.2 C ATLEG

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 12/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

3.3 N OTCIES

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 13/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

3.4 F ITXA

LLIBRE

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 14/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

4. T EST AMB USUARIS EN MBIL4.1 J OANEl perfil sociodemogrfic del Joan s el segent: Edat Professi Nivell acadmic Freqncia ds dInternet 24 Informtic Universitari Intensiu diari

Primera impressi: El Joan ha reconegut que es tracta duna web duna tenda de cmics. Diu que lestil s molt senzill i que es podria millorar estticament, de tota manera troba que aquesta senzillesa aporta claredat i no sobrecarrega la pantalla del mbil de 4,3 polzades que fa servir per a dur a terme la prova.

Descripci de la tasca: La tasca que ha de dur a terme el Joan s comprar el cmic 30 das de noche: de nuevo la noche.

Procs de la tasca: La seva primera reacci ha estat emprar el quadre de cerca que es desplega en prmer sobre la primera opci de la pgina web, CERCA. Com que aquesta pgina no ha estat prototipada, se li demana que trobi una alternativa per a dur a terme la mateixa acci. La seva segona opci ha estat prmer el bot CATLEG, on ha dit que espera localitzar el llibre a travs dun ndex alfabtic. En accedir al catleg ha trobat a faltar un ndex per temes i alfabtic i ha hagut de buscar un per un els cmics disponibles fins a trobar el desitjat. Un cop dins la fitxa del cmic sha desplaat verticalment fins arribar al final de la pgina i ha premut el bot AFEGIR AL CARRO. Per acabar ha volgut prmer el bot present a totes les pgines (excepte la dinici) a la part superior dreta, la qual enllaa directament amb el carro de compra de lusuari.

Desprs de realitzar el test el Joan ha fet una petita enquesta de satisfacci: La pgina web s fcil dutilitzar Sempre s que estic dins la pgina s fcil aprendre a utilitzar-la s til La combinaci de colors s adient 4/5 5/5 3/5 4/5 4/5

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 15/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

4.2 T ERESAEl perfil sociodemogrfic de la Cristina s el segent: Edat Professi Nivell acadmic Freqncia ds dInternet 46 Perruquera Graduat escolar Dos cops per setmana

Primera impressi: La Teresa no ha sabut reconixer quin tipus de pgina web s, per ha relacionat el ttol (Norma Cmics) amb alguna activitat relacionada amb els cmics. Diu que els botons sn una mica petits per la mida dels seus dits i que la mida del text tamb s massa petita per al seu gust.

Descripci de la tasca: La tasca que ha de dur a terme la Teresa s comprar el cmic 30 das de noche: de nuevo la noche.

Procs de la tasca: Desprs de pensar-sho una mica ha comenat a prmer tots els botons disponibles del men principal. Tot i que entn el significat de les paraules de cada bot, diu que no t clara la seva utilitat i que si ha de comprar un llibre voldria trobar el bot COMPRAR. Com que aquest bot no hi s, ha de realitzar un atac per fora bruta (no sn paraules textuals seves, per es referia a aix). Quan arriba al catleg, localitza el llibre i accedeix a la seva fitxa. Un cop dins, ha de llegir tota la fitxa i quan arriba a la part inferior daquesta, clica al bot AFEGEIX AL CARRO. Desprs no s capa de localitzar el carro, ja que no ha sabut interpretar la icona referent al carro de la compra present en totes les pgines (excepte la dinici).

Desprs de realitzar el test la Teresa ha fet una petita enquesta de satisfacci: La pgina web s fcil dutilitzar Sempre s que estic dins la pgina s fcil aprendre a utilitzar-la s til La combinaci de colors s adient 2/5 4/5 2/5 2/5 2/5

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 16/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

4.3 B LAI

El perfil sociodemogrfic del Joan s el segent: Edat Professi Nivell acadmic Freqncia ds dInternet 12 Estudiant dESO Estudis de primria Intensiu diari

Primera impressi: El Blai ha reconegut que es tracta duna pgina web relacionada amb els cmics. Diu que els colors sn molt tristos i que li falta color. Desprs de llegir els botons disponibles ha preguntat si es trobava davant duna tenda on-line.

Descripci de la tasca: La tasca que ha de dur a terme el Blai s comprar el cmic 30 das de noche: de nuevo la noche.

Procs de la tasca: La primera acci del Blai ha estat dirigir-se al catleg. Un cop dins ha fet un cop dull rpid de manera vertical i ha localitzat el cmic. Dins la fitxa del cmic, sha tornat a desplaar de manera vertical molt rpidament fins que ha localitzat el bot AFEGIR AL CARRO. Lha premut i ha tornat a escanejar la pgina de baix a dalt fins que ha trobat la icona del carro de la compra. Ha indicat que noms caldria accedir al carro per a procedir a finalitzar la compra. Per motius de prototipat, aquesta pgina no ha estat dissenyada, aix que la tasca ha acabat aqu.

Desprs de realitzar el test el Blai ha fet una petita enquesta de satisfacci: La pgina web s fcil dutilitzar Sempre s que estic dins la pgina s fcil aprendre a utilitzar-la s til La combinaci de colors s adient 5/5 5/5 4/5 5/5 1/5

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 17/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

4.4 P UNTS

A

M ILLORAR

A partir de la resposta de cadascun dels participants del test he arribat a la conclusi que la pgina web per a telfons mbils ha de millorar en els segents apartats: Disseny grfic Arquitectura de la informaci Tipografia

Pel que fa al disseny grfic, tant la Teresa com el Blai mhan comentat que troben que els colors escollits per a la pgina sn massa montons i apagats. En un intent destablir una identitat grfica semblant a la de la web descriptori i de tauleta, per amb la intenci de simplificar-ho encara ms, he limitat massa ls de colors vius que despertin latenci de lusuari.

Respecte a larquitectura de la informaci s evident que la Teresa t ra quan diu que no troba cap bot per a comprar a la pgina principal si la tasca que se li encomana s comprar un cmic. Per la seva part, el Joan troba a faltar una ordenaci per categories i alfabtica dins el catleg, la qual cosa facilitaria molt trobar el cmic enlloc dhaver de navegar pgina per pgina fins a localitzar-lo.

En quant a la tipografia, noms la Teresa sha queixat de que les lletres i els botons eren massa petits. No trobo que aquest sigui un problema a tenir en compte, ja que han estat optimitzats per a treure un mxim rendiment duna pantalla dentre 3,5 i 4,5 polzades, unes mides que representen els telfons mbils actuals i ella no fa servir mai el mbil per accedir a Internet.

En resum, considero molt tils els resultats obtinguts amb cada usuari, els quals vaig seleccionar de manera acurada per a aconseguir punts de vista completament diferents i que fossin representatius de la part de la societat que faria servir la pgina web de Norma Cmics, ja que aquesta t a la venta productes tan per a nens, com per a joves, com per a adults. A ms, el nivell destudis i experincia laboral de cadascun dells ha jugat un paper important en aquest lanlisi.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 18/19

Disseny dinterfcies multimdia PAC 3: Prototipat grfic multiplataforma

4. B IBLIOGRAFIA I ALTRES RECURSOSTona Monjo Palau. Disseny dinterfcies multimdia. Barcelona. Fundaci per a la Universitat Oberta de Catalunya, 2011. Wiki de lassignatura. [en lnia]. Disponible a Internet noms a travs del campus virtual. Interfaces tctiles: el desafo de las tabletas. [en lnia] http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain [Consulta: novembre 2012] Responsive design trends for the Mobile web: [en lnia] http://www.designtickle.com/2012/04/responsive-design-trends-mobileweb/ [Consulta: novembre 2012] Jornada de Experiencia de Usuario 2012 http://www.uxed.org/jornadaux/jornada-ux-2012/ [Consulta: novembre 2012] Les imatges presents en aquest document sn de domini pblic, de producci prpia o semparen a ls raonable (fair use).

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 19/19