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

DISSENY D’INTERACCIÓ

MULTIPLATAFORMA P A C 2

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 2: Disseny d’interacció multiplataforma

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

ÍNDEX

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

1. Arbre de continguts per a mòbil ............................................................................. 3

2. Wireframes ..................................................................................................................... 4

2.1 Wireframes per a mòbil ........................................................................................ 4

2.2 Wireframes per a tauleta ....................................................................................... 8

3. Informe.......................................................................................................................... 12

3.1 Arbre de continguts per a mòbil .................................................................... 12

3.2 Adaptació per a mòbils i tauletes ................................................................... 12

3.3 Característiques fonamentals de l’AI ............................................................. 12

3.4 Experiència personal ........................................................................................ 13

4. Bibliografia i altres recursos ................................................................................... 14

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

1. ARBRE DE CONTINGUTS PER A MÒBIL

Inic

i

Actualitat

Notícies

Mes actual

Mesos passats

Properament

Blocs

Bloc del Còmic

Bloc del Manga

Catàleg

Navegació segons

Origen

Europeu

Nordamericà

Japonès

Tipus

Manga

Còmic

Edat

Infantil

Juvenil

AdultAutors

Superherois

Sèries

Supervendes Microsites

Reimpressions

CIMOC Còmics online

Catàleg anual

Sobre l'empresa

Presentació

Enviament d'arts

Sala de premsa

Borsa de feina

Norma Còmics

Distribució

Localitzador de tendes

Informació complementària

Contacte

Normacomics.com

Termes legals

Webmaster

Mapa web

Cerca

Identifica't

Entra

Carro

Com comprar

Nou usuari

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

2. WIREFRAMES

2.1 WIREFRAMES PER A MÒBIL

Pàgina inicial

Pàgina de cerca

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina de registre

Pàgina de catàleg segons edat

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina d’actualitat

Pàgina d’una notícia

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina d’una fitxa de llibre

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

2.2 WIREFRAMES PER A TAULETA

Pàgina d’inici

Pàgina de còmics supervendes

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina de notícies

Pàgina d’autors

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina de presentació

Pàgina d’una fitxa de llibre

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

Pàgina del carro de compra

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

3. INFORME

3.1 ARBRE DE CONTINGUTS PER A MÒBIL

La pàgina web de Norma Editorial és molt complexa i disposa de molta

informació, la qual cosa implicaria una navegació massa complicada si es volgués

reproduir de la mateixa manera en un dispositiu mòbil de mida reduïda, per això

he aplicat molts canvis en l’arbre de continguts d’escriptori.

Per començar haig de dir que he emprat el mateix codi de colors de l’arbre base

en el nou arbre de continguts per a facilitar el reconeixement dels elements de

manera ràpida.

La nova reestructuració dels continguts permet localitzar la informació que es

busca de manera més ràpida. He aconseguit això, remodelant per complet la

categoria “Catàleg”, la qual disposa ara de vàries formes d’accés a la informació

més important.

He eliminat la categoria “Enllaços” de la pàgina original per passar a incloure el

que aquella contenia de manera desendreçada a les fitxes de cada autor, llibre,

subapartat, etc. depenent de cada cas.

Així doncs, crec que he aconseguit tant una navegació més fluïda com una

percepció de menys sobrecàrrega d’informació.

3.2 ADAPTACIÓ PER A MÒBILS I TAULETES

Els aspectes tinguts en compte durant l’adaptació de la pàgina web d’escriptori a

telèfons mòbils intel·ligents i a tauletes (en format vertical) són varis i els podem

trobar als materials de l’assignatura:

Públic objectiu: el mateix que la pàgina web.

Usabilitat: l’usuari és més exigent amb els resultats d’una pàgina web en

un telèfon mòbil.

Adaptació tàctil: he adaptat les accions de ratolí i teclat a les accions que

es poden portar a terme amb els dits.

3.3 CARACTERÍSTIQUES FONAMENTALS DE L ’AI

Trobo que l’experiència de navegació per la versió web és massa feixuga i té força

mancances de contingut, identitat, navegació, etiquetatge, utilitat, de gràfics i de

retroalimentació.

Tot i que el nou arbre de continguts està adaptat per a telèfons mòbils

intel·ligents, amb poques modificacions podria esdevenir un arbre més lògic i més

útil que l’actual de la versió d’escriptori.

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

3.4 EXPERIÈNCIA PERSONAL

Per concloure, haig de dir que aquesta proposta ha estat possible gràcies a l’estudi

previ i anàlisi de PACs i pràctica de l’assignatura Arquitectura de la informació,

cursada el quadrimestre anterior. imprescindibles per al plantejament de les

solucions que he expressat en aquesta PAC.

Quanta més informació he recopilat, ja sigui analitzant la pàgina web, repassant la

meva feina del curs passat o revisant el model de proposta que proporciona

l’enunciat, més fàcil m’ha resultat dur a terme l’activitat. Per això, les dificultats

que he trobat han estat les relacionades amb la fase d’anàlisi, ja que crec que és la

part més important del disseny (o redisseny) de qualsevol arquitectura d’un lloc.

Disseny d’interfícies multimèdia

PAC 2: Disseny d’interacció multiplataforma

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

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.

Consideracions bàsiques per al desenvolupament d’aplicacions mòbils. [en

línia] http://www.slideshare.net/soreygarcia/consideraciones-basicas-

para-el-desarrollo-de-aplicaciones-mviles [Consulta: octubre 2012]

Responsive design: [en línia] http://xn--diseowebresponsivo-q0b.com.ar/

http://uxdesign.smashingmagazine.com/2012/05/30/design-process-

responsive-age/ http://bradfrost.github.com/this-is-

responsive/index.html [Consulta: octubre 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).