Upload
jordi-llonch
View
656
Download
0
Embed Size (px)
DESCRIPTION
Més informació a elmeuordinador.blogspot.com
Citation preview
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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).