[Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

of 19 /19
DISSENY D’INTERFÍCIES MULTIMÈDIA PAC 3 J ORDI L LONCH E STEVE CC BY-NC-SA

description

Més informació a elmeuordinador.blogspot.com

Transcript of [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Page 1: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

D I S S E N Y D ’ I N T E R F Í C I E S M U L T I M È D I A

P A C 3

J O R D I L L O N C H E S T E V E

C C B Y - N C - S A

Page 2: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 2/19

ÍNDEX

Índex ................................................................................................................................. 2

1. Prototips d’escriptori ................................................................................................ 3

1.1 Inici ..................................................................................................................... 3

1.2 Catàleg ................................................................................................................ 4

1.3 Notícies .............................................................................................................. 5

1.4 Fitxa de llibre .................................................................................................... 6

2. Prototips per a tauleta vertical ............................................................................... 7

2.1 Inici ..................................................................................................................... 7

2.2 Catàleg ................................................................................................................ 8

2.3 Notícies .............................................................................................................. 9

2.4 Fitxa de llibre .................................................................................................. 10

3. Prototips per a telèfon mòbil................................................................................ 11

3.1 Inici ................................................................................................................... 11

3.2 Catàleg .............................................................................................................. 12

3.3 Notícies ............................................................................................................ 13

3.4 Fitxa llibre ........................................................................................................ 14

4. Test amb usuaris en mòbil ................................................................................... 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

Page 3: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 3/19

1. PROTOTIPS D’ESCRIPTORI

1.1 INICI

Page 4: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 4/19

1.2 CATÀLEG

Page 5: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 5/19

1.3 NOTÍCIES

Page 6: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 6/19

1.4 FITXA DE LLIBRE

Page 7: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 7/19

2. PROTOTIPS PER A TAULETA VERTICAL

2.1 INICI

Page 8: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 8/19

2.2 CATÀLEG

Page 9: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 9/19

2.3 NOTÍCIES

Page 10: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 10/19

2.4 FITXA DE LLIBRE

Page 11: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 11/19

3. PROTOTIPS PER A TELÈFON MÒBIL

3.1 INICI

Page 12: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 12/19

3.2 CATÀLEG

Page 13: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 13/19

3.3 NOTÍCIES

Page 14: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 14/19

3.4 FITXA LLIBRE

Page 15: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 15/19

4. TEST AMB USUARIS EN MÒBIL

4.1 JOAN

El perfil sociodemogràfic del Joan és el següent:

Edat 24

Professió Informàtic

Nivell acadèmic Universitari

Freqüència d’ús d’Internet Intensiu diari

Primera impressió: El Joan ha reconegut que es tracta d’una web d’una tenda de

còmics. Diu que l’estil és molt senzill i que es podria millorar estèticament, de tota

manera troba que aquesta senzillesa aporta claredat i no sobrecarrega la pantalla

del mòbil 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

còmic 30 días de noche: de nuevo la noche.

Procés de la tasca: La seva primera reacció ha estat emprar el quadre de cerca

que es desplega en prémer sobre la primera opció de la pàgina web, CERCA.

Com que aquesta pàgina 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

prémer el botó CATÀLEG, on ha dit que espera localitzar el llibre a través d’un

índex alfabètic. En accedir al catàleg ha trobat a faltar un índex per temes i

alfabètic i ha hagut de buscar un per un els còmics disponibles fins a trobar el

desitjat. Un cop dins la fitxa del còmic s’ha desplaçat verticalment fins arribar al

final de la pàgina i ha premut el botó AFEGIR AL CARRO. Per acabar ha volgut

prémer el botó present a totes les pàgines (excepte la d’inici) a la part superior

dreta, la qual enllaça directament amb el carro de compra de l’usuari.

Després de realitzar el test el Joan ha fet una petita enquesta de satisfacció:

La pàgina web és fàcil d’utilitzar 4/5

Sempre sé que estic dins la pàgina 5/5

És fàcil aprendre a utilitzar-la 3/5

És útil 4/5

La combinació de colors és adient 4/5

Page 16: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 16/19

4.2 TERESA

El perfil sociodemogràfic de la Cristina és el següent:

Edat 46

Professió Perruquera

Nivell acadèmic Graduat escolar

Freqüència d’ús d’Internet Dos cops per setmana

Primera impressió: La Teresa no ha sabut reconèixer quin tipus de pàgina web

és, però ha relacionat el títol (Norma Còmics) amb alguna activitat relacionada

amb els còmics. Diu que els botons són 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

còmic 30 días de noche: de nuevo la noche.

Procés de la tasca: Després de pensar-s’ho una mica ha començat a prémer tots

els botons disponibles del menú principal. Tot i que entén 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 força bruta” (no són paraules textuals seves, però es referia

a això). Quan arriba al catàleg, 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 d’aquesta, clica al botó

AFEGEIX AL CARRO. Després 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

pàgines (excepte la d’inici).

Després de realitzar el test la Teresa ha fet una petita enquesta de satisfacció:

La pàgina web és fàcil d’utilitzar 2/5

Sempre sé que estic dins la pàgina 4/5

És fàcil aprendre a utilitzar-la 2/5

És útil 2/5

La combinació de colors és adient 2/5

Page 17: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 17/19

4.3 BLAI

El perfil sociodemogràfic del Joan és el següent:

Edat 12

Professió Estudiant d’ESO

Nivell acadèmic Estudis de primària

Freqüència d’ús d’Internet Intensiu diari

Primera impressió: El Blai ha reconegut que es tracta d’una pàgina web

relacionada amb els còmics. Diu que els colors són molt tristos i que li falta color.

Després de llegir els botons disponibles ha preguntat si es trobava davant d’una

tenda on-line.

Descripció de la tasca: La tasca que ha de dur a terme el Blai és comprar el

còmic 30 días de noche: de nuevo la noche.

Procés de la tasca: La primera acció del Blai ha estat dirigir-se al catàleg. Un cop

dins ha fet un cop d’ull ràpid de manera vertical i ha localitzat el còmic. Dins la

fitxa del còmic, s’ha tornat a desplaçar de manera vertical molt ràpidament fins

que ha localitzat el botó AFEGIR AL CARRO. L’ha premut i ha tornat a

escanejar la pàgina de baix a dalt fins que ha trobat la icona del carro de la

compra. Ha indicat que només caldria accedir al carro per a procedir a finalitzar la

compra. Per motius de prototipat, aquesta pàgina no ha estat dissenyada, així que

la tasca ha acabat aquí.

Després de realitzar el test el Blai ha fet una petita enquesta de satisfacció:

La pàgina web és fàcil d’utilitzar 5/5

Sempre sé que estic dins la pàgina 5/5

És fàcil aprendre a utilitzar-la 4/5

És útil 5/5

La combinació de colors és adient 1/5

Page 18: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 18/19

4.4 PUNTS A MILLORAR

A partir de la resposta de cadascun dels participants del test he arribat a la

conclusió que la pàgina web per a telèfons mòbils ha de millorar en els següents

apartats:

Disseny gràfic

Arquitectura de la informació

Tipografia

Pel que fa al disseny gràfic, tant la Teresa com el Blai m’han comentat que

troben que els colors escollits per a la pàgina són massa monòtons i apagats. En

un intent d’establir una identitat gràfica semblant a la de la web d’escriptori i de

tauleta, però amb la intenció de simplificar-ho encara més, he limitat massa l’ús de

colors vius que despertin l’atenció de l’usuari.

Respecte a l’arquitectura de la informació és evident que la Teresa té raó quan

diu que no troba cap botó per a comprar a la pàgina principal si la tasca que se li

encomana és comprar un còmic. Per la seva part, el Joan troba a faltar una

ordenació per categories i alfabètica dins el catàleg, la qual cosa facilitaria molt

trobar el còmic enlloc d’haver de navegar pàgina per pàgina fins a localitzar-lo.

En quant a la tipografia, només la Teresa s’ha 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 màxim rendiment d’una

pantalla d’entre 3,5 i 4,5 polzades, unes mides que representen els telèfons mòbils

actuals i ella no fa servir mai el mòbil 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

pàgina web de Norma Còmics, ja que aquesta té a la venta productes tan per a

nens, com per a joves, com per a adults. A més, el nivell d’estudis i experiència

laboral de cadascun d’ells ha jugat un paper important en aquest l’anàlisi.

Page 19: [Disseny d'interfícies multimèdia] PAC 3: Prototipat gràfic multiplataforma

Disseny d’interfícies multimèdia

PAC 3: Prototipat gràfic multiplataforma

Jordi Llonch Esteve CC BY-NC-SA Pàg. 19/19

4. BIBLIOGRAFIA I ALTRES RECURSOS

Tona Monjo Palau. Disseny d’interfícies multimèdia. Barcelona. Fundació per a

la Universitat Oberta de Catalunya, 2011.

Wiki de l’assignatura. [en línia]. Disponible a Internet només a través del

campus virtual.

Interfaces táctiles: el desafío de las tabletas. [en línia]

http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain [Consulta:

novembre 2012]

Responsive design trends for the Mobile web: [en línia]

http://www.designtickle.com/2012/04/responsive-design-trends-mobile-

web/ [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 són de domini públic, de

producció pròpia o s’emparen a l’ús raonable (fair use).