ARBRE DE CONTINGUTS, NAVEGACIÓ I WIREFRAME JORDI LLONCH ESTEVE
ARQUITECTURA DE LA INFORMACIÓ – PAC 3
CC BY-NC-SA
Í NDEX 1. Arbre de continguts ............................................................. 2 2. Wireframe .............................................................................. 3 3. Objectius ............................................................................... 4 4. Conclusió .............................................................................. 5 5. Bibliografia i altres recursos .................................................. 6 5.1 Llibres............................................................................... 6 5.2 Recursos web ................................................................. 6 5.3 Imatges ........................................................................... 6
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 1 de 6
1. A RBRE DE CONTINGUTS Inici
Novetats
Quadre de cerca
Fòrum
Notícies
Mes actual
Mesos passats
Contacte
Catàleg
Cerca per
Origen
Tipus
Edat
Informació complementària
Sobre l'empresa
Autors
Presentació
Daniel Torres
Enviament d'arts
Europeu
Manga
Infantil
Hernán Migoya
Sala de premsa
Properament
Nordamericà
Còmic
Juvenil
Luis Royo
Borsa de feina
Catàleg anual
Japonès
Adult
Victoria Francés
Norma Còmics
Xoan Marín
Distribució
Blocs
Supervendes
Bloc del Còmic
Reimpressions
Bloc del Manga
CIMOC Còmics online
Microsites
Localitzador de tendes
Lydie
Una judía americana perdida en Israel
Andando
Tristísima ceniza
Muertos de sueño
Hágase el caos
Arturo
Barcelona TM
Tsubasa
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 2 de 6
2. W IREFRAME
Exemple dels menús desplegables dinàmics:
El nom d’usuari de la secció “Opina” apareix automàticament si l’usuari s’ha registrat en el quadre de registre del lateral dret.
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 3 de 6
3. O BJECTIUS Amb aquestes propostes d’arbre de contingut i wireframe es pretén millorar l’arquitectura present a la pàgina web de Norma Editorial, de la qual se’n van presentar les mancances a la PAC 2. En aquella PAC es va fer especial èmfasi en la necessitat d’optimitzar la navegació, cosa que s’ha portat a terme en aquesta PAC per a millorar la usabilitat i accés a la informació.
Per començar, s’ha remodelat l’arbre de continguts, que ara permet accedir a la informació que es busca de manera més àgil ja que s’hi ha afegit més categories i s’han reestructurat els seus continguts. Amb això s’aconsegueix disminuir la dificultat de trobar la informació que es busca per part de l’usuari.
A continuació, s’ha creat un wireframe que pretén mostrar visualment l’aspecte final de la fitxa d’un llibre. Es pot veure que s’ha respectat força el format de la pàgina original, però s’hi ha afegit grans transformacions. Amb això s’aconsegueix que l’usuari reconegui la pàgina, però alhora aquesta li ofereixi noves funcions molt útils.
Aquestes modificacions comencen en la part superior, on s’ha optimitzat l’espai partint de la premissa que la tendència actual és l’ús de pantalles panoràmiques. S’ha reduït la mida de la capçalera per no ocupar massa espai a la pantalles dels usuaris.
Seguint amb la intenció d’optimitzar espai, s’ha redissenyat el quadre de cerca per a fer les mateixes funcions en menys espai i s’ha aprofitat l’espai guanyat per afegir informació sobre la pàgina en que es troba l’usuari en el seu lloc. D’aquesta manera s’estalvia espai vertical i s’evita que l’usuari hagi de fer un ús excessiu de la barra de desplaçament vertical.
Pel que fa al menú de navegació de la part esquerra manté la seva disposició i estètica dinàmica, però agrupa la nova jerarquia de l’arbre de continguts. A sota d’aquest s’ha afegit un núvol d’etiquetes amb els còmics més valorats, potenciant d’aquesta manera, l’aspecte social que manca a la web.
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 4 de 6
La barra lateral dreta inclou una secció nova, la qual permet el registre dels usuaris que servirà tant per deixar comentaris als còmics com per accedir al fòrum.
A les parts inferiors de les barres laterals s’ha reduït el nombre de bàners per a no sobrecarregar l’experiència de l’usuari i s’han dividit en dues seccions: una que mostra els blocs i autors destacats segons els editors; i una altra que conté la publicitat a la revista Dibus, a la pàgina de Facebook de Norma Editorial, a concursos patrocinats o a publicacions destacades.
Per últim, la part central de la fitxa del llibre manté la mateixa informació que mostra la pàgina original, però s’ha reestructurat per a fer-la més clara per a l'usuari i s’ha afegit una línia amb les paraules clau de cada llibre, les quals serviran per a indexar molt millor el contingut de la pàgina web. Cal dir que s’ha eliminat algun botó que conduïa a confusió i s’ha afegit la secció “Obres similars”.
4. C ONCLUSIÓ Per concloure, haig de dir que aquesta proposta ha estat possible gràcies a l’estudi previ i anàlisi dut a terme a la PAC 2, imprescindibles per al plantejament de les solucions que he expressat en aquesta PAC.
Crec que sense aquest estudi hagués estat molt difícil, inclús impossible en alguna situació, descobrir les mancances i deficiències del lloc web de Norma Editorial i el treball realitzat no hagués estat eficient ni útil per a l’usuari final.
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 5 de 6
5. B IBLIOGRAFIA I ALTRES RECURSOS 5.1 L LIBRES Morville, Peter i Rosenfeld, Louis. Arquitectura de la informació per al World Wide Web. Barcelona: Fundació per a la Universitat Oberta de Catalunya, 2012. Gil Rodríguez, Eva Patricia; de Lera Tatjer, Eva i Monjo Palau, Antònia. Usuaris i sistemes interactius. Barcelona: Eureca Media, S.L., 2010.
5.2 R ECURSOS
WEB
Wikipedia. Arquitectura de la información [en línia]. 8 de febrer de
2012.
Disponible
a
internet
http://es.wikipedia.org/wiki/Arquitectura_de_la_informacion [Consulta: abril 2012] Olga Carreras. Wireframes [en línia] 11 de març de 2008. Disponible
a
internet
http://olgacarreras.blogspot.com.es/2007/02/wireframes.html [Consulta: abril 2012] I
love
wireframes.
[en
línia].
Disponible
a
internet
http://wireframes.tumblr.com/ [Consulta: abril 2012] MockFlow. [en línia]. Disponible a internet www.mockflow.com/ [Consulta: abril 2012]
5.3 I MATGES Imatge de la portada: base de dades de Microsoft Office Word. La resta d’imatges són de producció pròpia.
Arquitectura de la informació – PAC 3 CC BY-NC-SA
Jordi Llonch Esteve Pàgina 6 de 6
