La pràctica final obligatòria d'Arquitectura de la Informació. www.elsmeusapunts.es

1. 7-5-201410:43:16.682+02:00 - 1 -
AULA
06.517 Arquitectura de la informació aula 1
Proposta d'arquitectura d'un lloc web responsiu:
Arbre de continguts i principals wireframes
Inici:
30-04-14
Lliurament:
28-05-14
Solució:
11-06-14
Qualificació:
11-06-14
Dedicació:
000 %
Presentació
Es tracta de completar el que hem començat a fer en la PAC3.
Ara es demana acabar de dibuixar els wireframes principals per a escriptori i mòbil del
site treballat i, si cal, fer una revisió de l’arbre de continguts i wireframe de la fitxa
corresponent.
Competències i objectius
Competències
– Capacitat per innovar i generar noves idees
– Capacitat per planificar i gestionar projectes en l'entorn de les TIC
– Capacitat per avaluar solucions tecnològiques i elaborar propostes de projectes
tenint en compte els recursos, les alternatives disponibles i les condicions de mercat
– Capacitat per conceptualitzar, dissenyar i avaluar les interfícies i esquemes
d'interacció de les aplicacions i dispositius d'accés a la informació digital.
Obejectius
– Estructurar, dissenyar i argumentar una proposta d’arquitectura.
– Crear els documents bàsics d’un projecte d’arquitectura de la informació com són un
arbre de contingut (també anomenat: blueprint, ...) i els principals wireframes (també
anomenats maquetes, retícules, prototips, mockups,...)

2. 7-5-201410:43:16.682+02:00 - 2 -
– Aprofundir en l’ús d’eines i tècniques per dibuixar mapes i wireframes .
Descripció
Hem de fer una proposta de millora: reestructurant, reorganitzant i introduint nous
continguts i funcionalitats o eliminant d’altres, sempre centrar-nos en l’interès i
l’experiència d’ús de l’usuari.
Dibuixarem l’arbre de continguts i els wireframes principals per a escriptori i mòbil fent el
lloc web responsiu.
Les possibles revisions/correccions de la PAC3 i el mateix procés d’anar definint els
wireframes , pot fer que l’arbre de continguts i wireframe plantejats en la PAC3 variïn. Per
això es demana incloure de nou l’arbre de continguts i el wireframe jarevisats de la PAC3.
Hem de continuar amb els mateixos sites seleccionats en la PAC3.
En el cas de voler canviar de site caldria justificar-ho.
Us recordem els sites proposats:
1. www.artehabitat.com
2. www.immoblesbarcelona.com
3. www.taquilla10.com
Haurem d’elaborar un únic document que inclogui les següents parts:
I. Arbre de continguts del lloc web.
L'arbre ha de mostrar fins el tercer i/o quart nivell de navegació (depenent del grau de
profunditat que tingui), ha de ser clar i intuïtiu per l'usuari final.
Es valorarà la introducció de nous continguts i noves funcionalitats (no contemplats en
els sites actuals) i reestructuracions que puguin ser d’interès per l’usuari.
Dibuixem l’arbre adaptat als continguts per a escriptori.
II. Definir els principals wireframes dels sites seleccionats.
Els wireframes a dibuixar són:
1. Home
2. S ubhome del principal ítem de la web, com poden ser les pàgines: pàgina d’una
categoria/tipologia de productes (Artehabitat), pàgina d’una categoria/tipologia

3. 7-5-201410:43:16.682+02:00 - 3 -
de tickets com per exemple “Fútbol” (Taquilla10), pàgina vinculada a selecció
d’immobles d’una comarca.
3. Pàgina revisada de la PAC3: fitxa d’un producte (Artehabitat), fitxa d’un immoble
(Immoblesbarcelona), fitxa d’un ticket (Taquilla10)
4. Pàgina de resultats d’una cerca o d’un llistat/filtratge.
5. Pàgina de procés de compra d’un producte (Artehabitat), procés d’alta per insertar
un immoble (Immoblesbarcelona) o pàgina d’una subcategoria/subtipologia de
tickets com per exemple “FC Barcelona” (Taquilla10).
Els wireframes han de dibuixar-se pensant en ser un lloc web responsiu.
Els wireframes han d’estar pensats per ser responsiu, és a dir, que tot el site s’adapti als
canvis de mida del navegador i a les diferents mides de pantalla dels diversos dispositius.
Cal dibuixar cada wireframe optimitzant per a resolució de 1024x768 d’escriptori i per
a 320x480 de mòbil. (Atenció!!! Cada pantalla dissenyada caldrà que tingui l’alçada
que requereixi els seus continguts, no l’hem de fer encaixar en alçada ni als 768px per
escriptori ni als 480px per a mòbil).
Caldrà preveure com s’adapten els diferents continguts entre aquestes dues mides de
pantalles. En aquesta adaptació hi haurà reestructuracions, canvis i potser cal eliminar
alguns continguts secundaris per a mòbil.
Es valorarà la reestructuració i la creació de mòduls de continguts nous i de
funcionalitats/tasques noves incloses en el disseny del wireframe.
Si les pàgines contenen continguts de la mateixa pàgina amagats en el contingut
central de la pàgina (p.ex.: navegacions locals en forma de pestanyes,..) o interaccions
importants caldrà replicar la pàgina amb els altres continguts visibles o mostrar el detall
d’aquestes interaccions.
III. Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de
continguts i els wireframes . (1 pàgina).
IV. Donar la vostra opinió personal sobre l’experiència en fer aquesta pràctica i en
relació a l’assignatura (mitja pàgina).
Alguns dels reptes que s’hauran de resoldre en les vostres propostes:
• www.artehabitat.com
• Cal potenciar l’integració i protagonisme de la botiga online.

4. 7-5-201410:43:16.682+02:00 - 4 -
• S’ha de millorar la navegació.
• ...
• www.immoblesbarcelona.com
• S’ha de millorar la navegació i el cercador.
• S’ha d’enriquir la fitxa de cada immoble.
• Cal millorar els resultats de cerca.
• www.taquilla10.com
• Cal millorar el cercador.
• S’ha d’enriquir la fitxa de cada ticket.
• S’ha de potenciar les xarxes socials, pensar en com crear comunitat dins el site.
Anotació: Aquests només són alguns reptes a plantejar-te, però has de pensar i fer d’altres
millores/reptes.
Pensar un wireframe
Pensar un wireframe
– Pensar en l'usuari final (Disseny Centrat en l'Usuari). L'arbre de continguts i els
wireframes han de tenir una estructura lògica i clara per a l'usuari final i, sobretot,
han de respondre als objectius/tasques que pot tenir aquest usuari en accedir a
cadascuna d'elles.
– Cercar la consistència però no cal ser estrictes. Per exemple: el sistema de
navegació principal ha de ser consistent en la gran majoria de pantalles d’un site. Per
tant, ha de mantenir el seu aspecte, ubicació i comportament però, segons els tipus
d’escenaris, com potser el cas d’un procés de compra, podria variar i/o obviar-se.
– Un camí recomanat per començar un wireframe : primer en paper, es fa una
llista numerada de tot el que ha de tenir la pàgina (continguts, imatges, accions,
funcionalitats, sensacions,..), després s’agrupa segons relacions, es prioritzen els
grups importants, es dissenya cada mòdul de contingut, s’adjunten els diferents
mòduls segons prioritats i al final es passa tot a la “pantalla digital”.
Pensar un wireframe responsiu

5. 7-5-201410:43:16.682+02:00 - 5 -
– Flexibilitat. Tot ha de ser flexible en un disseny responsiu: taules, imatges,...
– Canvis, adicions i substraccions. De vegades, la millor opció per adaptar-se a
les diferents mides de navegador inclou: canvis, adicions i substraccions entre els
diferents breakpoints.
Per dispositius més petits algunes imatges i continguts poden no mostrar-se per
millorar l’experiència d’usuari .
O es pot optar per un disseny global més senzill per a que el lloc web tingui un
aspecte més uniforme a través dels dispositius.
– Quadrícula fluida. El lloc web pot escalar-se proporcionalment en base a
percentatges o construir-se en base a un nombre de límits.
– Les quadrícules més responsives inclouen quadrícules per un mínim de 3 mides
diferents: 768px o més, 480 a 768px i 320 a 480px.
Dibuixar un wireframe
– Simple. Cercar la funcionalitat per sobre de l’estètica. No fer wireframes amb una
mica de disseny. Fer servir una paleta de grisos. No cal definir, per tant, tipografia,
gamma cromàtica, etc.
– No dissenyar mòduls amb formes complexes.
– Simular l'amplada i dibuixar cada pàgina amb la llargària que necessiti.
– En cada wireframe han d'estar presents tots els elements de la pàgina : capçaleres,
navegacions, enllaços, llistes, mòduls de continguts, imatges, formularis..
– Fer ús de retícules per ordenar columnes i crear una coherència entre espais entre
mòduls. No cal ser estricte però si ser coherents i intentar seguir-les quan els tipus de
mòduls ho permetin.
– Els wireframes també han de mostrar el comportament dels diferents elements
d'interacció. Per això farem que tot el que és linkable estigui subratllat. El dibuix dels
elements de formularis han de poder-se reconèixer segons la seva tipologia, si és un
botó, un camp de text, un checkbox, un menú desplegable ,..
– En alguns casos, la millor manera de descriure el comportament és afegir alguna
nota associada a aquell element. Per això deixarem espai als costats i/o en la part
superior per posar notes (requadres, globus..) que expliquin les funcionalitats dels
elements de la pàgina en qüestió (formularis, desplegables, destacats que canvien
d'imatge automàticament, capes o elements que es mostren en determinades
accions..,.. etc..). Anotar només allò rellevant. Els wireframes han de tendir a ser
auto-explicatius.

6. 7-5-201410:43:16.682+02:00 - 6 -
– En aquesta PAC es demana que tots els textos siguin reals/simulats . Per tant, no
farem ús del típic "Lorum Ipsum". Ara bé, si es tractés per exemple del contingut
d'una notícia, no cal redactar de nou, simplement agafar el text d'una notícia que
estigui online i utilitzar-la per tal de simular el seu cos.
– Els wireframes han de tenir l'alçada que necessiti tot el contingut de la pàgina tant
per a escriptori com per a mòbil. Per tant l'amplada és fixe però l'alçada la determina
el contingut de cada pàgina a definir. No totes seran igual.
Recursos
Bàsics
– El llibre de Morville & Rosenfeld, "Arquitectura de la Informació per la World Wide
Web" (especialment els capítols 4, 5, 6, 7, 8, 9, 10 i 11)
– “Usuaris i sistemes interactius”. Anotar que el teniu en aquest mateix enunciat
– Ebook petit, senzill i amb conceptes clars sobre Arquitectura de la Informació http://
www.pebbleroad.com/downloads/organizing-digital-information-for-others-v1.pdf
Sobre eines
Per a dibuixar els wireframes es pot fer servir qualsevol eina ( Axure, Balsamiq, Fireworks,
Visio, Justinmind, Omnigraffle, Illustrator, Mockflow, ...). O també eines open source.
– 10 eines gratis recomanades: http://speckyboy.com/2010/01/11/10-completely-free-
wireframe-and-mockup-applications/
– Llistat de software per fer wireframes: http://www.uxbooth.com/blog/15-desktop-online-
wireframing-tools/
– http://iainstitute.org/tools/
Sobre arbres de continguts
– http://boxesandarrows.com/site-diagrams-mapping-an-information-space/
– Vocabulari visual: http://www.jjg.net/ia/visvocab/spanish.html
Sobre wireframes
– http://olgacarreras.blogspot.com/2007/02/wireframes.html
– http://blog.teamtreehouse.com/20-steps-to-better-wireframing

7. 7-5-201410:43:16.682+02:00 - 7 -
– http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/ ( 3 articles
linkats entre ells)
– http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
– http://www.mordecki.com/ebusiness/aifacetada/aifacetada.shtml
Dissenyar per a mòbil
– http://mashable.com/2013/08/08/responsive-design-best-practices/
– http://designmodo.com/responsive-design-examples/
– Dimensions mòbils i tablets http://stefhatcher.com/projects/device-dimensions/
– http://alistapart.com/topic/responsive-design
– http://www.responsiveappdesign.org/links.html
– Col.lecció de pantalles patrons http://pttrns.com/ http://
mobiledesignpatterngallery.com/mobile-patterns.php
– http://olgacarreras.blogspot.com.es/2012/12/claves-para-la-web-movil.html
– Recopilatori de wireframes per a mòbils http://moobileframes.tumblr.com/
– Web mòbil versus aplicacions mòbils http://www.uxabilidad.com/inspiracion/sitios-web-
moviles-v-s-aplicaciones-nativas.html
– AI per a mòbils http://ayerviernes.com/wp-content/uploads/2008/12/
paper_moviles08.pdf
– http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-
than-grids-2/
– http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-
half-user-engagement/
Casos
– Guide to Creating Website Information Architecture and Content:
www.princeton.edu/communications/services/docs/IAguide2.p
– Cas pràctic: Redesign a web magazine http://iainstitute.org/tools/download/
blueprint.pdf
– Recopilatori de wireframes": http://wireframes.tumblr.com/

8. 7-5-201410:43:16.682+02:00 - 8 -
– Blog amb recursos, idees i bones pràctiques: http://wireframes.linowski.ca/
Criteris de valoració i puntuació
Criteris
S’avaluarà la correcta comprensió i integració dels conceptes plantejats en els diferents
materials de consulta.
S’avaluarà la capacitat de síntesis, l’ordre i claredat de l’estructura i l’estil de comunicació
a l’hora d’organitzar els informes.
S’avaluarà les reestructuracions, la creació de mòduls de continguts nous i de
funcionalitats/tasques noves que puguin ser d’interés per l’usuari.
S’avaluarà la capacitat d’adaptació de les estructures creades per a escriptori i mòbil.
Es valorarà la presentació correcta de l’escrit, tenint present els següents aspectes:
– Presentació correcta del document i de l’escrit: Portada, índex, capçalera de pàgina,
paginació i correcció ortogràfica.
– Bona ordenació/ indexació/ formateig dels blocs de continguts, fer ús de: titulars,
subtitulars, negretes, llistats,..
– Format del text: 12 pt i 1,5 d'interlineat.
– Referenciar adequadament la font d’on s’han obtingut les imatges (què han d’estar
lliures de drets).
– Tenir cura de la citació correcta de les fonts consultades (bibliogràfiques o en línia).
Puntuació
El valor d’aquesta Pràctica és del 40% del global de l’AC
L’arbre puntua 3 punts i els wireframes 7 punts.
Format i data de lliurament
El treball ha de ser entregat al registre RAC.
MOLT IMPORTANT! El lliurament de la Pràctica ha d’estar compost per un únic
document format .PDF sense comprimir.

9. 7-5-201410:43:16.682+02:00 - 9 -
La data límit de lliurament per a la Pràctica és el 28 de maig de 2014 .
Materials i fonts d'informació
Materials
Arquitectura de la informació de la World Wide Web Paper
Usuaris i sistemes interactius
Usuaris i sistemes interactius