[arquitectura de la informació] pac 3: arbre de continguts, navegació i wireframe

7
ARBRE DE CONTINGUTS , NAVEGACIÓ I WIREFRAME JORDI LLONCH ESTEVE ARQUITECTURA DE LA INFORMACIÓ PAC 3 CC BY-NC-SA

Upload: jordi-llonch

Post on 24-Oct-2014

1.793 views

Category:

Documents


5 download

DESCRIPTION

Més informació a elmeuordinador.blogspot.com

TRANSCRIPT

Page 1: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

ARBRE DE CONTINGUTS, NAVEGACIÓ I WIREFRAME

JORDI LLONCH ESTEVE

ARQUITECTURA DE LA INFORMACIÓ – PAC 3 CC BY-NC-SA

Page 2: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 1 de 6

Í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

Page 3: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 2 de 6

1. ARBRE DE CONTINGUTS

Inici

Novetats

Notícies

Mes actual

Mesos passats

Properament

Catàleg anual

Blocs

Bloc del Còmic

Bloc del Manga

Quadre de cerca Fòrum Contacte Catàleg

Cerca per

Origen

Europeu

Nordamericà

Japonès

Tipus

Manga

Còmic

Edat

Infantil

Juvenil

Adult

Supervendes

Reimpressions

CIMOC Còmics online

Informació complementària

Autors

Daniel Torres

Hernán Migoya

Luis Royo

Victoria Francés

Xoan Marín

Microsites

Lydie

Una judía americana perdida en

Israel

Andando

Tristísima ceniza

Muertos de sueño

Hágase el caos

Arturo

Barcelona TM

Tsubasa

Sobre l'empresa

Presentació

Enviament d'arts

Sala de premsa

Borsa de feina

Norma Còmics

Distribució

Localitzador de tendes

Page 4: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 3 de 6

2. WIREFRAME

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.

Page 5: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 4 de 6

3. OBJECTIUS

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.

Page 6: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 5 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. CONCLUSIÓ

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.

Page 7: [Arquitectura de la informació] PAC 3: Arbre de continguts, navegació i wireframe

Arquitectura de la informació – PAC 3 Jordi Llonch Esteve CC BY-NC-SA Pàgina 6 de 6

5. BIBLIOGRAFIA I ALTRES RECURSOS

5.1 LLIBRES

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 RECURSOS 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 IMATGES

Imatge de la portada: base de dades de Microsoft Office Word.

La resta d’imatges són de producció pròpia.