Curs de blocs per a entitats
Tema 2: L'estructura del nostre bloc. Un bon disseny web ha de tenir en compte que: • la informació estigui estructurada • i que sigui atractiva per al navegant És a dir, hem de tenir present on posem les coses i com mostrem aquestes coses. Uns dels conceptes que hem de tenir al cap és el d'usabilitat i el d'accessibilitat. Us proposem la lectura dels següents textos, a partir dels quals continuarem treballant.
Recur s 3: Algunes idees per començar Per començar una plana web el primer pas que hem de donar és el de pensar exactament què és el que volem mostrar. Una bona plana web sorgeix d'un procés de reflexió de la pròpia entitat, que cal poder traslladar a la persona que acabi dissenyant el portal. La tasca d'un professional en el disseny de webs consisteix en adaptar el coneixement propi de la entitat sota criteris d'usabilitat i accessibilitat. • Què vol dir accessibilitat? Vol dir que tothom pugui veure bé la nostra pàgina. Per aquest motiu hem escollit la eina Wordpress MU. Aquest sistema de creació de blocs compleix els estandars web, de manera que qualsevol persona, des de qualsevol ordinador (per molt vell que sigui) podrà visitar correctament la nostra web Si vols conèixer més sobre els estarndars web pots visita la web del W3C (Consorci de la Word Wide Web)
1
Curs de blocs per a entitats • Què vol dir usabilitat? Vol dir que la persona que visiti la nostra pàgina tingui la experiència d'arribar a la informació de manera intuïtiva i senzilla. Quan el visitant ha de realitzar masses passes per arribar a la informació important es pot perdre: en una web, donar una passa és fer un clic. En aquest exemple, un bon disseny implica que no hem de buscar massa estona el lloc on volem clicar. En el mal disseny, el fet d'haver de buscar la resposta desconcerta al visitant de la nostra web i fa que la experiència sigui més aviat negativa.
Aquestes qüestions poden semblar masses llunyanes per nosaltres. El projecte de creació de pàgines web per a entitats de xarxanet.org ja s'encarrega de moltes d'aquestes qüestions, i compta amb un equip de tècnics que traduiran els desitjos de l'entitat en una estructura que facilitarà que tota persona pugui trobar la informació que està cercant de manera fàcil i intuïtiva. Però també hem d'ajudar a fer una bona web. Per a nosaltres implicarà també seguir algunes bones pràctiques al moment de publicar. Des de pensar títols adequats per a cada un dels articles, que aquests no siguin excessivament llargs, que continguin fotografies, afegir una descripció per a cada una d'aquestes... Qüestions que aprofundirem en els següents blocs. Per poder ajudar a crear la nostra pàgina podem començar a reflexionar sobre la informació que volem mostrar a través de la web. Haurem de centrar-nos en tres qüestions concretes: • Quina informació volem mostrar • Com la distribuïm en l'espai (la pantalla) • Quins elements gràfics haurà d'incorporar
2
Curs de blocs per a entitats Recur s 4: Pautes d'usabilitat A continuació veurem una sèrie de pautes que ens ajudaran a fer que el nostre web sigui usable. • Un menú coherent: El menú de la pàgina web ha de ser fàcil d'interpretar. És recomanable no variar gaire els colors i diferenciar entre l'apartat on som i l'apartat al qual volem accedir. A més, aquest menú ens ha de permetre anar a les pàgines més importants del web. • Títols clars i diferents: Un títol ambigu o amb carència de significat no ens diu res sobre el que estem llegint. El títol de la pàgina ha de ser significatiu perquè també els cercadors l'indexin millor. • Pàgines amb bona organització: Les pàgines han d'ordenar-se de manera clara i senzilla, si volem que la gent es fixi amb el que nosaltres facilitem, no els hem d'estressar amb més d'una columna a part del contingut. • Pàgines sense excés d'informació: Sense cap dubte, oferir molta informació i el més interessant possible és un atraient d'usuaris, però tot i això hem de saber facilitar-la d'una forma senzilla, intentant resumir. Millor dues pàgines ben clares, que no una d'eterna. • Enllaç permanent a la pàgina principal: Un error freqüent és la falta d'un enllaç permanent a la pàgina principal del web. Aquest enllaç permet a un usuari que entri al nostre web per qualsevol altra pàgina que no sigui la inicial i anar-hi mitjançant un sol clic. • Correu de contacte: Un correu de contacte és imprescindible per si qualsevol visitant vol fer algun suggeriment, proposar un tema, o solucionar un dubte. Aquest també ha de ser visible i que sense gaire esforç s'identifiqui ràpidament.
3
Curs de blocs per a entitats El disseny d'una web no és limita a posar imatges atractives o una bona combinació de colors. La part més important és tenir present el medi on volem comunicar: encara que sigui una pantalla, no és un televisor, encara que estiguem llegint, no és un llibre. Aquests documents intenten aportar més informació al disseny web.
Recur s 5: La interacció persona-or dinador La interacció persona-ordinador és la disciplina relacionada amb el disseny, avaluació i implementació de sistemes informàtics interactius per a l'ús d'éssers humans, i amb l'estudi dels fenòmens més importants amb els quals està relacionat. Òbviament, quan creem pàgines web ho farem pensat que serem visitats per usuaris. Entendre, doncs, la relació persona-ordinador és molt important per a donar a l'usuari una experiència gratificant. Hem de veure l'usuari com una persona que aprèn de l'experiència i que va evolucionant. Pensem que fa poques dècades ningú tenia ordinador a casa, i ara tothom (o quasi tothom) en té o n'ha fet servir alguna vegada. Hi ha aspectes que ajudaran a fer que l'usuari entengui el funcionament del nostre web basats en aquesta relació persona-ordinador al llarg del temps: • En primer lloc, els elements importants convé que estiguin situats a dalt i a l'esquerra, ja que aquest és el primer lloc on l'usuari fixa la mirada. Si veiem qualsevol web corporatiu, podrem veure que el logotip se situa en aquesta zona. També els menús se situen a la part de dalt o esquerra del web: hem de pensar que és un dels elements més importants del nostre web i necessita ser d'accés fàcil i ràpid. Això és perquè nosaltres llegim sempre d'esquerra a dreta i de dalt a baix; per tant, el punt de dalt a l'esquerra és el primer que veurem intuïtivament. Si el web que volem fer té altres públics amb altres costums i escriptures, probablement aquest fet seria diferent.
4
Curs de blocs per a entitats • Un altre aspecte a tenir en compte són els enllaços. Els enllaços constitueixen la interacció principal de l'usuari vers la pàgina web. Cal que siguin, doncs, fàcilment reconeguts i entesos per l'usuari com a tal. La manera més clara per a definir un enllaç, i que l'usuari associa quasi instintivament, és subratllant una paraula en blau. L'experiència li diu que una paraula subratllada i de color blau equival a enllaç i fer, doncs, aquesta associació, no li costarà cap esforç. Això és així perquè des de l'inici del web els enllaços per defecte han estat subratllats i en blau. De fet, actualment algunes de les pàgines més visitades, tal com google o ebay, encara utilitzen el mateix sistema. • Un altre punt clau és el temps que l'usuari es passa visitant una pàgina web. Hem de tenir en compte que, segons xifres estadístiques, l'usuari navega de mitjana menys d'un minut a cada web. Això vol dir que hem d'atreure la seva atenció de forma directa i evitar llargs paràgrafs de text que, a la fi, no llegirà.
Recur s 6: S'entén? És comprensible? M'atrau? Sé on sóc? El disseny web, doncs, s'ha d'entendre com un tot que no només es compon dels elements gràfics i colors de cada pàgina, sinó també de la mateixa organització en una pantalla, i més important encara, l'estructura de les pantalles de les pàgines web, i la facilitat de l'usuari per a accedir allà on vol anar. Existeixen molts punts a tenir en compte en el disseny web, els que mereixen una especial atenció són tres aspectes prioritaris. 1) La imatge gràfica: El més important és que el disseny web agradi a l'usuari, que les pàgines web siguin atractives, agradables, que no cansin la vista, que els colors no es confonguin amb facilitat (especialment pensant en persones amb deficiències visuals), i també que els espais més interessants de cadascuna de les pantalles de la pàgina web destaquin davant de la resta de continguts. Així s'aconsegueix facilitar la consulta a l'usuari i estalviar temps. 2) La distribució dels continguts a les pantalles: La pàgina ha de mantenir un ordre lògic, i sempre que sigui possible, mantenir una mateixa estructura i ubicació dels menús i continguts. També resulta útil que els usuaris puguin consultar la ruta de pantalles des de la pantalla inicial fins a l'actual (per exemple: inici –> empresa –> situació), de manera que sàpiguen com han arribat, i poder tornar. És molt important que en tot moment sàpiguen on són, com hi han arribat i com poden tornar enrere. 5
Curs de blocs per a entitats
3) L'estructura dels apartats: És un altre element important del disseny web, ja que cal que sigui el màxim d'intuïtiva per als usuaris, i ha de garantir la facilitat per a arribar a totes i cadascuna de les pantalles de la pàgina web, aquest element és fonamental, no només per als usuaris, sinó també per a aconseguir que la pàgina web tingui visites referides des de cercadors.
Les par ts d'un bloc Un dels primers reptes que ens trobem és el de pensar una bona estructura per a la nostra web. Ens resultarà més fàcil pensar-la primer per parts i desprès dibuixar on volem situar cada cosa. Les parts amb les que comencem són: •
Les seccions fixes
•
Les seccions dinàmiques
•
Els ginys
Recur s 7: Les seccions fixes Les seccions fixes són aquelles pàgines de la nostra web que aporten informació que no variarà al llarg del temps. Un exemple clar d'una secció fixa és la pàgina d'informació sobre l'associació: la seva història, els seus objectius. Aquestes dades poden ser modificades, però és un tipus d'informació que no s'hauria de revisar massa sovint. Per fer una secció fixa cal que creem una pàgina. Un cop creada, cada pàgina pot ser modificada i eliminada, però en principi mostrarà sempre la mateixa informació. Aquestes pàgines aniran formant el menú principal de la nostra web.És en aquestes pàgines en les que quedarà reflectida la nostra entitat. Així que podem començar a pensar: Què volem explicar de la nostra associació? Com exemples de pàgines estàtiques d'una web podem trobar: Qui som (presentació de l'associació), què volem (els objectius que tenim), on som (la manera de trobar-nos), ... Fixeu-vos en el bloc de proves del curs: les seccions principals que hem escollit formen un menú que apareix destacat en la part superior del bloc.
6
Curs de blocs per a entitats
Recur s 8: Les seccions dinàmiques Les seccions dinàmiques Anomenem seccions dinàmiques d'una web a aquells apartats que s'aniran actualitzant amb molta regularitat. El recull d'activitats setmanals d'una associació seria un exemple d'aquest tipus de seccions. Si les seccions fixes d'una web estaven compostes per pàgines estàtiques, les seccions dinàmiques estan compostes per la recopilació de varies entrades o posts, classificats sota categories. Les entrades son els petits articles o notícies que aniran enriquint les seccions dinàmiques de la web, i s'aniran publicant en ordre cronològic invers: els més nous apareixeran al capdamunt de la pàgina, desplaçant les entrades o posts anteriors. D'aquesta manera la pàgina web de la nostra entitat mostrarà sempre la última activitat, mostrant-se com a una entitat viva. Normalment les entrades mostren la seva data de publicació en un lloc visible, fent evident la regularitat en la publicació del nostre bloc. 7
Curs de blocs per a entitats Un lloc per a cada cosa i cada cosa al seu lloc! Depenent de les activitats que realitzi la nostra entitat, ens podem trobar que les seccions dinàmiques reflecteixin àmbits d'actuació molt diferents. Si només tinguéssim una secció dinàmica, aquesta podria barrejar entrades que tractessin des de les notícies d'actualitat fins les recomanacions culinàries dels nostres socis. Per aquest motiu és important definir tantes categories com àrees que volem tractar. Al moment de publicar una entrada, haurem d'indicar a quina categoria la volem incloure. D'aquesta manera, el navegant de la nostra web es podrà guiar per aquestes seccions per localitzar el contingut que li interessi. Prova de navegar per el nostre lloc web de prova fent servir el menú de categories. En l'exemple que hem escollit, diferenciem clarament les seccions fixes d'un web de les seccions dinàmiques, on anirem afegint contingut habitualment. Aquesta estructura de diferenciar els apartats és una herència del sistema de blocs, on els usuaris donaven més importància a les categories dinàmiquesi per tant les diferenciaven. És habitual, però, que ens trobem totes les seccions agrupades en un sol menú, facilitant així la navegació. Aquest menú principal, que combina pàgines (seccions fixes) i categories (seccions dinàmiques) no ha de ser molt extens ni tenir moltes entrades, de manera que concreti la informació. Com que és l'element més important que ajudarà a navegar pel nostre web, l'he de situar en un lloc visible i destacat
8
Curs de blocs per a entitats Recur s 9: Els ginys A part de les pàgines i les entrades, la nostra plana web pot tenir molts altres elements. Els ginys o widgets són aquells elements extres d'un lloc web, els complements que acompanyen el contingut central de la pàgina. Són petits programes que tenen funcions concretes: cercar contingut, destacar esdeveniments, i un llarg etcètera. Un calendari d'activitats, per exemple, no és l'espai més important, per tant no hauria d'estar destacat en la navegació. És un element complementari, que ajuda i millora la nostra web, però no la part essencial. S'acostumen a situar en la barra lateral dreta, acompanyant al contingut, però que no distreguin al navegant del que és realment important: el contingut (la informació que volem donar), i el menú (que l'ajudarà a trobarla).
9