DISSENY DINTERFCIES MULTIMDIA

DISSENY DINTERACCIMULTIPLATAFORMAPAC 2

JORDI LLONCH ESTEVECC BY-NC-SA

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

NDEXndex .................................................................................................................................... 2 1. Arbre de continguts per a mbil ............................................................................. 3 2. Wireframes ..................................................................................................................... 4 2.1 Wireframes per a mbil ........................................................................................ 4 2.2 Wireframes per a tauleta ....................................................................................... 8 3. Informe.......................................................................................................................... 12 3.1 Arbre de continguts per a mbil .................................................................... 12 3.2 Adaptaci per a mbils i tauletes ................................................................... 12 3.3 Caracterstiques fonamentals de lAI ............................................................. 12 3.4 Experincia personal ........................................................................................ 13 4. Bibliografia i altres recursos................................................................................... 14

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 2/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

1. A RBRE DE CONTINGUTS PER A MBILMes actual Notcies Mesos passats Actualitat Properament Bloc del Cmic Blocs Bloc del Manga

Europeu

Origen

Nordameric

Japons

Manga Tipus Cmic

Navegaci segons

Infantil

Edat

Juvenil

Autors

Adult

Superherois

Catleg

Sries

Supervendes

Microsites

Reimpressions

Inici

CIMOC Cmics online

Catleg anual

Presentaci

Enviament d'arts

Sala de premsa

Sobre l'empresa

Borsa de feina

Norma Cmics

Distribuci

Localitzador de tendes

Contacte

Normacomics.com

Informaci complementria

Termes legals

Cerca

Webmaster

Mapa web

Carro Entra Identifica't Nou usuari Com comprar

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 3/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

2. W IREFRAMES2.1 W IREFRAMESPER A MBIL

Pgina inicial

Pgina de cerca

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 4/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina de registre

Pgina de catleg segons edat

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 5/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina dactualitat

Pgina duna notcia

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 6/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina duna fitxa de llibre

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 7/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

2.2 W IREFRAMES

PER A TAULETA

Pgina dinici

Pgina de cmics supervendes

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 8/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina de notcies

Pgina dautors

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 9/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina de presentaci

Pgina duna fitxa de llibre

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 10/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

Pgina del carro de compra

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 11/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

3. I NFORME3.1 A RBREDE CONTINGUTS P ER A MBIL

La pgina web de Norma Editorial s molt complexa i disposa de molta informaci, la qual cosa implicaria una navegaci massa complicada si es volgus reproduir de la mateixa manera en un dispositiu mbil de mida reduda, per aix he aplicat molts canvis en larbre de continguts descriptori. Per comenar haig de dir que he emprat el mateix codi de colors de larbre base en el nou arbre de continguts per a facilitar el reconeixement dels elements de manera rpida. La nova reestructuraci dels continguts permet localitzar la informaci que es busca de manera ms rpida. He aconseguit aix, remodelant per complet la categoria Catleg, la qual disposa ara de vries formes daccs a la informaci ms important. He eliminat la categoria Enllaos de la pgina original per passar a incloure el que aquella contenia de manera desendreada a les fitxes de cada autor, llibre, subapartat, etc. depenent de cada cas. Aix doncs, crec que he aconseguit tant una navegaci ms fluda com una percepci de menys sobrecrrega dinformaci.

3.2 A DAPTACI

PER A MBIL S I TAULETES

Els aspectes tinguts en compte durant ladaptaci de la pgina web descriptori a telfons mbils intelligents i a tauletes (en format vertical) sn varis i els podem trobar als materials de lassignatura: Pblic objectiu: el mateix que la pgina web. Usabilitat: lusuari s ms exigent amb els resultats duna pgina web en un telfon mbil. Adaptaci tctil: he adaptat les accions de ratol i teclat a les accions que es poden portar a terme amb els dits.

3.3 C ARACTERSTIQUES

FONA MENTALS DE L AI

Trobo que lexperincia de navegaci per la versi web s massa feixuga i t fora mancances de contingut, identitat, navegaci, etiquetatge, utilitat, de grfics i de retroalimentaci. Tot i que el nou arbre de continguts est adaptat per a telfons mbils intelligents, amb poques modificacions podria esdevenir un arbre ms lgic i ms til que lactual de la versi descriptori.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 12/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma

3.4 E XPERINCIA

PERSONAL

Per concloure, haig de dir que aquesta proposta ha estat possible grcies a lestudi previ i anlisi de PACs i prctica de lassignatura Arquitectura de la informaci, cursada el quadrimestre anterior. imprescindibles per al plantejament de les solucions que he expressat en aquesta PAC. Quanta ms informaci he recopilat, ja sigui analitzant la pgina web, repassant la meva feina del curs passat o revisant el model de proposta que proporciona lenunciat, ms fcil mha resultat dur a terme lactivitat. Per aix, les dificultats que he trobat han estat les relacionades amb la fase danlisi, ja que crec que s la part ms important del disseny (o redisseny) de qualsevol arquitectura dun lloc.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 13/14

Disseny dinterfcies multimdia PAC 2: Disseny dinteracci 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. Consideracions bsiques per al desenvolupament daplicacions mbils. [en lnia] http://www.slideshare.net/soreygarcia/consideraciones-basicaspara-el-desarrollo-de-aplicaciones-mviles [Consulta: octubre 2012] Responsive design: [en lnia] http://xn--diseowebresponsivo-q0b.com.ar/ http://uxdesign.smashingmagazine.com/2012/05/30/design-processresponsive-age/ http://bradfrost.github.com/this-isresponsive/index.html [Consulta: octubre 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. 14/14