PAC3 Arquitectura de la informació

Arquitectura de la informacióJaume Reig Carrascosa

Tercera Pràctica d’Avaluació Continuada (PAC3)

Estudis d’Informàtica, Multimèdia i Telecomunicació. Grau de Multimèdia

ÍNDEX

I.EsquEma --------------------------------------------------------------------------------------3

II.wIrEframE --------------------------------------------------------------------------------- 6

III.objEctIus ---------------------------------------------------------------------------------- 7

IV.opINIó pErsoNal -------------------------------------------------------------------------- 8

bIblIografIa ----------------------------------------------------------------------------------- 9

3

OFERTASDEL DÍA

FINES DESEMANA

ESPECIALPUENTES

BÚSQUEDAHOTELES

OFERTA DEL DÍA

BANNER

Continua cap a:A

Continua cap a:B

Continua cap a:C

Oferta del día en format banner gràfic, en el

contingut de la pàgina

mapa interactiu de les platjes amb informacions generals

Mitjançant la base de dades recuperarem les dades de les ofertes segons els criteris.

El “Banner” mostra de forma al·leatòria les diferents ofertes en portada.

NUESTROS HOTELES

SOBRENOSOTROS

PLAYASALMERIA

GESTIÓNRESERVA

CONTACTO

INICIO

LLEGENDA

Entrada al site

Relacions entre pàgines

Components de pàgina

Grups de pàgines relacionades

Pàgina

Base de dades

I. EsquEma

Documents

3

UOC. Estudis d’Informàtica, Multimèdia i Telecomunicació. Grau de MultimèdiaArquitectura de la informació. 1er semestre 2011-2012. PAC3. Jaume Reig Carrascosa

Prové de:A

INTERFICIEDE CERCA

BASE DADES RESERVA

DATES UBICACIÓGEOGRÀFICA

Nº HABITACIONS

DESCRIPCIÓHOTEL SERVEIS

PREU(PROFORMA)

Llistat hotels disponibles segons criteris de cerca

Cerdador hotels per data d’entrada i sorti-da, ubicació geogràfica i nº habitacions.

Recupera el llistat sencer d’hotels

Prové de:B

BASE DADES RESERVA

NOTA1: Camps de cerca (dates entrada, sortida, habitacions) per comprovar disponibilitat hotel.

SERVEISDESCRIPCIÓHOTEL

PREUS DISPONIBILITATVeure nota1

FITXAHOTEL

Si hotel està disponible

Si no està disponible torna a llista hotels

I. EsquEma

4


5

I. EsquEma

Prové de:C

INTERFICIESEGUIMENT

Nº RESERVA

DADES RESERVA

PÀGINAERROR

Si codi reserva és correcte

Si codi reserva no és correcte

4 5


II. wIrEframE

Icones serveis hotel

FOTOHOTEL

FOTO

FOTO

FOTO

BUSCADOR HOTELES

Entrada:

Salida:

BUSCARPlaya Rural Almería (ciudad)

Habitaciones: 1

OFERTASDEL DÍA

FINES DESEMANA

ESPECIALPUENTES

Info legal - mapa web - Email© hotelesAlmería - Dirección - Teléfono

BANEROFERTAS Y PROMOCIONES

Inicio -> Búsqueda hotel

DESCRIPCIÓN

El hotel Envia está situado en el valle de Vícar conocido como La Envia Golf, a tan sólo 10 minutos de la capital por la autovía A-7 (salida 429 Roquetas de Mar-Enix-Felix) y a 15 minutos del aeropuerto. Granada-Almería por Guadix, y desde la costa malagueña por la ctra. N-340.

SERVICIOS

RESERVAR

PRECIOENTRADA: 12/10/2011SALIDA: 15/10/2011

150 €

INICIO SOBRE NOSOTROS NUESTROS HOTELES PLAYAS ALMERÍA GESTIÓN RESERVAS CONTACTO

1 2 3 4 5

LOGO

6 7 8 9 10

FOTO CAPÇALERA

RESERVAS 950 26 10 10

LOGO PATRONATALMERÍA

6


7

III. objEctIus

En el disseny de l’AI bàsicament he tingut 2 objectius: que la web fos pràctica de cara a l’usuari (que pugues trobar fàcilment el que està cercant) i que estigués preparada per a mostrar continguts constantment actualitzats d’una forma atractiva (baner animat i apartats “Ofertas del día”, “Fines de semana” i “Especial pu-entes”). Un cop avaluada la pàgina amb l’anàlisis heurístic i el benchmarking, vaig notar moltes errades, però potser la més greu que vaig notar és que la web en qüestió no pot satisfer els objectius dels usuaris de cerca d’hotel per tenir una arquitectura massa profunda que fa que tinguem que fer molts clics fins a arribar a “Reserva”, i per tant tampoc satisfà els objectius de negoci de l’empresa, que en definitiva és que els usuaris reservin hotels. Sota aquesta premissa bàsica, he intentat que el sistema de “reserva” online fós el més àgil e intuïtiu possible, implementant una arquitectura de la informació on el cercador fos el (pal de paller) l’element clau de la web, i on la fitxa resultant d’efectuar una cerca mostrés tots els d’interés de cara als usuaris juntament amb la funcionalitat (botó) de reserva. Cal dir que no he contemplat en l’arquitectura que passaria quan un usuari fa clic al “botó” de “reserva”, ja que en aquest cas ens podríem trobar en diversos esce-naris i hauria de saber quin és el que he de contemplar: o continuar amb el sistema que tenen implantat com un simple enviament de formulari de reserva, o fer veritablement un sistema de “reserva online”, amb pagament mitjançant TPV, paypal, etc..ja que el primer no té gaire sentit, si no es coneix si un hotel està dispo-nible i des d’un punt de vista d’empresa gens recomanable acceptar reserves sense un pagament per avançat. El que si en principi he contemplat és que la base de dades té accés als hotels en temps real per a comprovar si tenen habitacions lliures.

Per altre part tal, com vaig analitzar el ‘avaluació heurística referent a la part d’identitat, em donava la impressió que el logo corporatiu i el del Patronat de la Di-putació d’Almería estaven massa junts i gairebé semblava tenir més importància aquest segon, i l’usuari podia dubtar en qui era qui. Per aquest motiu he separat els logos i he fet que el del Patronat no ocupés la part central, a més a més de fer-lo més petit. Un altre element que he inserit per donar credibilitat a la part d’identitat de l’empresa és enllaços en el peu de pàgina de. “info legal” i informacions de contacte en general (telèfon, adreça i email).

Pel que fa referencia a la part d’etiquetatge he modificat algunes etiquetes respecte a l’original que em semblaven poc autodescriptives de tal forma que resulti més clar que és el que trobarem si fem clic en elles tals com. “Conózcanos” per “Sobre nosotros” i “Información” per “Contacto”.

A la part de navegació he inclòs un sistema de fils d’Ariadna (breadcrumbs) just per sota de la capçalera com a sistema suplementari de navegació i per orientar als usuaris d’on es troben en cada moment. També he categoritzat alguns elements agrupant-los per temes. Per exemple: “Ofertas del día”, “Especial puentes” i “Fines de semana”, els he posat com enllaços contextuals dins la columna dreta del contingut de pàgina.

Per últim com a valor afegit he contemplat la implementació d’un sistema de seguiment de la “reserva” (“Gestión reservas”), on l’usuari pugui introduir el codi de la reserva i el sistema mostri les dades referents a aquesta.

6 7


IV. opINIó pErsoNal

Pel que fa a l’opinió personal sobre la realització de la PAC, he de dir que m’ha resultat bastant dificultosa la seva realització sobretot en l’aspecte de conceptua-lització com també d’expressió de les ideas de tot plegat dibuixades sobre el paper per tal que aquestes fossin fàcilment desxifrables i entenibles.

Segurament aquesta ha sigut la dificultat més gran; fer que els esquemes mentals que tenia més o menys endreçats en diferents esbossos, unificar-los i donar-hi forma en un únic document que fos coherent.

He de dir que el fet que no hi hagi un únic criteri alhora de dissenyar i conceptualitzar iconografies en els diagrames i en els wireframes m’ha desorientat i confós bastant. Per aquest motiu he intentat seguir els consells de l’enunciat de la pràctica i dels apunts preferentment tot i que també he agafat algunes idees d’altres exemples de la bibliografia recomanada que m’han semblat clars e interessants.

Per últim dir que jo mateix m’he sorprès com a mesura que anava avançant amb la pràctica, anava trobant elements, situacions i escenaris que no havia contem-plat anteriorment. Com a exemple citar la “reserva” d’hotel on saber si està disponible crec que és essencial per al disseny d’una arquitectura complerta.

En resum, no se si hauré fet una bona pràctica o no, però el que m’ha quedat clar és que conceptualitzar el disseny de l’arquitectura d’un lloc web prèviament a la feina de disseny gràfic i programació ens ajuda en molt a preveure i corregir possibles dificultats que ens podem trobar i que un cop començada la feina de disseny web i programació serien més difícils de corregir.

8


9

bIblIografIa

Morville, Peter. Rosenfeld, Louis (1998). Arquitectura de la Informació per la World Wide Web. O’Really Media, Inc, 1005 Gravenstein Highway North, Sebastopol.

Col·laboradors de la Viquipèdia. Folcsonomia [en línia]. Viquipèdia, l’Enciclopèdia Lliure, 2009 [data de consulta: 17 de octubre del 2011]. Disponible en <http://ca.wikipedia.org/w/index.php?title=Folcsonomia&oldid=4644621>.

Hassan Montero, Yusef Francisco. Fernández, J. Martín (30 de Marzo de 2003) [en línia]. Guía de Evaluación Heurística de Sitios Web. No solo Usabilidad [data de consulta: 17 de octubre del 2011]. Disponible en < http://www.nosolousabilidad.com/articulos/heuristica.htm>.

Col·laboradors de la Viquipèdia. Benchmarking [en línia]. Viquipèdia, l’Enciclopèdia Lliure, 2011 [data de consulta: 15 d’octubre del 2011]. Disponible en <//ca.wikipedia.org/w/index.php?title=Benchmarking&oldid=7852441>.

Rosenfeld. Louis (Aug 17, 2004). Information Architecture Heuristics [en línia]. Bloug: Information Architecture Heuristics [data de consulta: 17 de octubre del 2011]. Disponible en < http://louisrosenfeld.com/home/bloug_archive/000286.html >

Princeton University. Guide to Creating Website Information Architecture and Content [en línia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://www.princeton.edu/communications/services/docs/IAguide2.pdf>

Jesse James Garrett . Un vocabulario visual para describir arquitectura de información y diseńo de interacción [en línia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://www.jjg.net/ia/visvocab/spanish.html>

Sofía Savoy . Diseño del Sitio Web para Audiomusica S.A. [en línia].[data de consulta: 3 de novembre del 2011]. Disponible en <http://wiki.ead.pucv.cl/index.php/Dise%C3%B1o_del_Sitio_Web_para_Audiomusica_S.A.#Wireframes>

fuzzymath.com. how to read a wireframe[en línia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/ >

Jaume Reig CarrascosaNovembre de 2011

8 9


PAC3 Arquitectura de la informació

Documents

Transcript of PAC3 Arquitectura de la informació