SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
Arquitectura de la Información - Pac03 - Lidia Bria
1. 9-4-201421:22:46.183+02:00 - 1 -
AULA
06.517 Arquitectura de la informació aula 1
Proposta d'arquitectura d'un lloc web responsiu:
Arbre de continguts i wireframe per a escriptori i
mòbil
Inici:
09-04-14
Lliurament:
30-04-14
Solució:
14-05-14
Qualificació:
14-05-14
Dedicació:
000 %
Descripció
Després de la PAC2, emmarcada en la fase d’anàlisi i investigació de redisseny d’un lloc
web, arribem ara a la fase de disseny conceptual.
Hem de començar a dibuixar sobre paper les idees i requeriments recollits.
Es tracta de definir l’arbre de continguts i de fer una primera proposta només d’un
wireframe determinat.
Objectius i competències
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 l'informació digital.
Objectius
– Estructurar, dissenyar i argumentar una nova proposta d’arquitectura.
2. 9-4-201421:22:46.183+02:00 - 2 -
– Crear els primers documents bàsics d’un projecte d’arquitectura de la informació
com són un arbre de contingut (també anomenat: blueprint, mapa de contingut...)
i una primera proposta d’un sol wireframe (també anomenat maqueta, retícula,
prototip, mockup,...).
– Utilitzar 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 sempre centrar-nos en l’interés i l’experiència d’ús de l’usuari.
Dibuixarem l’arbre de continguts i un wireframe per a un lloc web responsiu.
Per abordar-ho ens podem ajudar de les idees i conclusions extretes de la PAC2 i també
podem aplicar noves idees que vagin sortint en el procés.
Hem de continuar amb els mateixos sites seleccionats en la PAC2.
En el cas de voler canviar de site caldria justificar-ho.
Us recordem els sites proposats:
– www.artehabitat.com
– www.immoblesbarcelona.com
– www.taquilla10.com
Haurem d’elaborar un únic document que inclogui les següents parts:
PART I
Crear un nou 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.
PART II
3. 9-4-201421:22:46.183+02:00 - 3 -
Definir un wireframe d’una pàgina de detall corresponent al site seleccionat. El
wireframe ha d’estar pensat 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.
En aquest cas, només dibuixarem la mateixa pàgina per a escriptori i per a mòbil.
Cal dibuixar el 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.
La pàgina de detall ha de ser la:
1. fitxa d’un producte (Artehabitat).
2. fitxa d’un inmoble (Immoblesbarcelona)
3. fitxa d’un ticket (Taquilla10)
Si la pàgina proposada conté elements amagats en el contingut central de la pàgina
(p.ex.: en navegacions locals,..) o interaccions importants caldrà replicar la pàgina o el
mòdul corresponent per mostrar aquests elements ocults i interaccions.
Es valorarà la reestructuració i la creació de mòduls de continguts nous i de
funcionalitats/tasques noves incloses en el disseny del wireframe.
Anotació: Ara no cal fer totes les pàgines del site, comencem en aquesta PAC amb una
primera proposta de l’arbre i d’un wireframe i després en la Pràctica ja es revisarà i es
completarà amb les pàgines principals del site.
PART III
Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de continguts i
de wireframe. (màxim 1 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. 9-4-201421:22:46.183+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 inmoble.
• 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”.
5. 9-4-201421:22:46.183+02:00 - 5 -
Pensar un wireframe responsiu
– 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
6. 9-4-201421:22:46.183+02:00 - 6 -
accions..,.. etc..). Anotar només allò rellevant. Els wireframes han de tendir a ser
auto-explicatius.
– 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
7. 9-4-201421:22:46.183+02:00 - 7 -
Sobre wireframes
– http://olgacarreras.blogspot.com/2007/02/wireframes.html
– http://blog.teamtreehouse.com/20-steps-to-better-wireframing
– 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
Casos
8. 9-4-201421:22:46.183+02:00 - 8 -
– 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/
– Blog amb recursos, idees i bones pràctiques: http://wireframes.linowski.ca/
Criteris de valoració i puntuació
Criteris
S’avaluarà la correcta comprensió e 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 PAC és del 33,33% de la nota global de Pacs de l’assignatura i, per
tant, correspon al 20% del global de l’AC (60%)
9. 9-4-201421:22:46.183+02:00 - 9 -
L’arbre puntua 3 punts i els wireframes 7 punts.
Format i data publicació
El treball ha de ser entregat al registre RAC.
MOLT IMPORTANT! El lliurament de la PAC ha d’estar compost per un únic document
format .PDF sense comprimir.
La data límit de lliurament per a la PAC3 és el 30 d’abril 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
Recursos i fonts d'informació
Morville, Peter ; Rosenfeld, Louis (2006). "Information Architecture for the World
Wide Web". 3rd ed. Publisher: O'Reilly Media, Inc. November 27, 2006. 528 p. ISBN
978-0-596-52734-1.