www.hotelesenalmeria.com ARBRE DE CONTINGUTS, NAVEGACIÓ I WIREFRAME
Paquita Ribas Tur PAC 3 - Arquitectura de la Informació, 2011
ÍNDEX DE CONTINGUT
1 - ARBRE DE CONTINGUT DEL LLOC
3
LLEGENDA DE L’ARBRE
4
ARBRE DE CONTINGUT DE LA CAPÇALERA I EL PEU
5
ARBRE DE CONTINGUT DE LA NAVEGACIÓ GLOBAL
6
2 - WIREFRAME DE LA FITXA D’UN HOTEL
7
EL QUE HE APRÉS
9
BIBLIOGRAFÍA
10
TORNAR A ÍNDEX
2
1 ARBRE DE CONTINGUT DEL WEB
Navegació La navegació d’aquest web era massa amplia i plana. Les categories no eren excloents. El primer que s’ha fet ha estat reestructurar la navegació global i dividirla en tan sols cinc enllaços,: -“Conózcanos” – Pàgina que parla de l’empresa, els seus objectius i les seves motivacions; la història, els membres i els agraïments. Des d’aquí surt un enllaç que porta a “Contacto”. -“Hoteles”– Agruparia en un segon nivell els tipus d’hotels: “Hoteles en la costa”, “Hoteles urbanos”, “Hoteles rurales”. Cadascun d’aquets nivells porta a una pàgina on es troba un plànol interactiu de la zona i els hotels organitzats per categories i alfabèticament, al peu del plànol.
En general: -S’ha fet una revisió de totes les etiquetes per unificar-les. -S’ha inclòs també una funció de cerca que permet localitzar els hotels per categoria, tipus d’hotel (rural, urbà, etc.), per tipus de client (joves, parelles, famílies, majors) o localització. -S’ha inclòs un accés a altres idiomes; l’antic disseny no contemplava aquesta opció.
-“Ofertas” – De la mateixa manera que en “Hoteles”, aquí s’han agrupat les tres pàgines d’ofertes en un segon nivell: “Ofertas del día”, “Ofertas de puentes” i “Ofertas de fines de semana”. Les ofertes s’organitzarien de manera que es pogués accedir a la fitxa de l’hotel directament des de l’oferta. -“Mapa” – S’accedeix al plànol interactiu complet de tota la zona, amb el directori a sota del s hotels -“Contacto” - S’han agrupat les direccions, els telèfons i els correus electrònics de totes les sucursals en una sola pàgina. A més, s’ha inclòs també el formulari de contacte dintre d’aquest apartat. Aquest formulari no envia les dades si troba errors dintre dels camps.
TORNAR A ÍNDEX
3
1
Llegenda de arbre
Arbre de contingut del web
TORNAR A Ă?NDEX
4
1
Arbre de contingut de la capรงalera i el peu
Arbre de contingut del web
TORNAR A ร NDEX
5
1
Arbre de contingut de la navegació global
Arbre de contingut del web
TORNAR A ÍNDEX
6
2 WIREFRAME DE LA FITXA D’UN HOTEL
Capçalera i peu S’han reestructurat tota la capçalera i el peu, que abans era quasi inexistent. Ara, el logotip de l’empresa té una posició principal en la capçalera. El de Costa de Almería s’ha col·locat al peu, el telèfon s’ha reduït de mida i s’accedeix a “Ofertas puentes” des del botó “Ofertas”. La capçalera i el peu es repeteixen en totes les pàgines.
La capçalera conté: -El logotip de Hoteles en Almería. -La funció de cerca. -El telèfon és de mida més petita, però suficientment clar perquè s’ha respectat l’espai blanc al voltant. -L’accés a altres idiomes. -La data actual -La barra de navegació global amb botó de retorn a la pàgina d’inici.
El peu conté:
Contingut general: -Finalment, s’ha decidit situar la navegació local en menús desplegables des de la navegació global. -El seguiment de la navegació es fa a través de la ruta de tipus bredcrums. Aquesta funciona també com enllaç a les pàgines ja visitades. -S’ha inclòs un formulari de reserves dintre de la fitxa de cada hotel. Si dóna error, no s’envia. -Les pàgines dels hotels disposen de navegació contextual de tipus “també li pot interessar” -Per evitar una llista interminable de paràgrafs s’ha estructurat la fitxa de l’hotel en cinc pestanyes, cadascuna amb la seva pròpia línia d’imatges i amb les seves anotacions. La quinta està reservada per als comentaris dels clients. Des d’aquí també es pot puntuar l’hotel. -Sobre les pestanyes es troben una llista d’enllaços que porten a les tarifes de l’hotel, el mapa de situació exacte i un vídeo de l’establiment i el seu confort.
-El logotip de Costa de Almería. -Els logotips de col·laboradors i agraïments que ara apareixen en “Conózcanos”. -La política de privacitat -L’enllaç d’atenció al client -Un directori d’hotels, que ens portaria a una plana amb tots els hotels per ordre alfabètic. -El mapa web -L’accés al Facebook que l’empresa i al RSS
TORNAR A ÍNDEX
7
2
Wireframe de la fitxa d’un hotel
Opinió Personal
informació,
m’han
lloc, el concepte,
permès
conèixer,
en
primer
que fa uns mesos ignorava,
de
”arquitectura de la Informació” i perquè és important per a la creació de llocs web. La segona PAC estava emmarcada en la fase d’anàlisi i investigació. He tingut la possibilitat d’avaluar un lloc des de l’òptica de l’Arquitectura de la informació, estudiant la competència i elaborant un “benckmarking”. Amb aquesta tercera PAC, emmarcada dintre de la fase de disseny, he creat un arbre nou de continguts per al web avaluat en l’anterior, i he fet una proposta de wireframes d’una pàgina del lloc. El que he aprés fins ara és que hi ha una arduosa tasca darrere un lloc ben dissenyat. Un disseny visual o un parell de programes no fan, per sí sols, que un lloc funcioni. La clau està en una bona feina en equip, on hagi equilibri entre arquitectes de la informació, dissenyadors, programadors i altres tècnics. I és aquest, l’equilibri, el que es trasllada al web i fa d’un lloc, una zona on quedar-se una estona i gaudir dels seus continguts. PAQUITA RIBAS
“
“
Les PACS de l’assignatura d’Arquitectura de la
TORNAR A ÍNDEX
9
Bibliografia consultada
CARRERAS MONTOTO, OLGA (2007) Wireframes [en línia].
http://olgacarreras.blogspot.com/2007/02/wireframes.html [Novembre/2011]
ESPERANZA, ANGIE I DAVIDSON, TOMMY (2002) Digital Web Magazine Redesign [en línia] http://iainstitute.org/tools/download/blueprint.pdf [Novembre/2011]
EXPRESSION LAB (2009) Wireframes en minutos: La guía completa v.1 [en línia].
http://expressionlab.net/2009/02/wireframes-en-minutos-la-guia-completa-v1/ [Novembre/2011]
FUZZY MATH (2011) How to read a wireframe [en línia]. http://wireframes.tumblr.com/ [Novembre/2011]
FUZZY MATH (2011) How to design a wireframe [en línia].
http://blog.fuzzymath.com/2011/07/26/how-to-design-a-wireframe/ [Novembre/2011]
FUZZY MATH (2011) How to evaluate a wireframe [en línia].
http://blog.fuzzymath.com/2011/07/19/how-to-evaluate-a-wireframe/ [Novembre/2011]
GIL RODRÍGUEZ,EVA PATRICIA I DE LERA TATJER, EVA I MONJO PALAU, ANTÒNIA () Usuaris i sistemes interactius. Barcelona: UOC MANER WALTER (1997) Prototipado [en línia].
http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm [Novembre/2011]
MORVILLE, PETER i ROSENFELD LOUIS. (2010). Arquitectura de la informació per al World Wide Web. Barcelona: UOC NO LO ENTIENDO (2005) Wireframes, recopilación de enlaces [en línia].
http://www.galinus.com/noloentiendo/2005/07/wireframes-recopilacin-de-enlaces.html [Novembre/2011]
OFFICE OF COMMUNICATIONS, PRICETON UNIVERSITY (2008)
Guide to Creating Website Information Architecture and Conten [en línia]. http://www.princeton.edu/communications/services/docs/IAguide2.pdf [Novembre/2011]
RONDA LEÓN, RODRIGO (2007) La diagramación en la arquitectura de la información [en línia]. www.nosolousabilidad.com/articulos/diagramacion.htm [Novembre/2011]
SAVOY, SOFÍA (2010) Diseño del Sitio Web para Audiomusica S.A. [en línia].
http://wiki.ead.pucv.cl/index.php/Diseño_del_Sitio_Web_para_Audiomusica_S.A. [Novembre/2011]
WEB PARA HUMANOS (2009) Diseño de prototipos (wireframes) para proyecto nuevo portal web Unicauca [en línia].
http://webparahumanos.wordpress.com/2009/03/03/diseno-de-prototipos-wireframes-para-proyecto-nuevo-portal-web-unicauca/ [Novembre/2011]
WIREFRAMES (2011) [en línia].
http://wireframes.linowski.ca/ [Novembre/2011]
TORNAR A ÍNDEX
10
Paquita Ribas Tur - 2011 Llicència Creative Commons Reconeixement-NoComercial-SenseObraDerivada 3.0