[Disseny d'interf­cies multim¨dia] PAC 3: Prototipat gr fic multiplataforma

download [Disseny d'interf­cies multim¨dia] PAC 3: Prototipat gr fic multiplataforma

of 19

  • date post

    16-Apr-2015
  • Category

    Documents

  • view

    650
  • download

    0

Embed Size (px)

description

Més informació a elmeuordinador.blogspot.com

Transcript of [Disseny d'interf­cies multim¨dia] PAC 3: Prototipat gr fic multiplataforma

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 es