Planificació i desenvolupament d’un projecte web centrat en l'usuari

El procés de desenvolupament d’un projecte web es porta a terme en diferents fases per tal d’assegurar-ne l’èxit. Les fases estàndard de creació d’un lloc web acostumen a ser planificació, disseny, desenvolupament, publicació i manteniment.

En cadascuna d’aquestes fases s’executen unes tasques concretes de manera iterativa, entenent així que una fase no comença fins que no ha acabat l’anterior; no obstant això, en funció de l’envergadura del projecte es posa més èmfasi en una fase que en una altra.

Quan iniciem un projecte per a la creació d’un nou lloc web, abans d’iniciar qualsevol disseny és important tenir presents una sèrie de factors, com són:

• L’objectiu per al qual es crea aquest lloc web.
• Els usuaris i les seves necessitats.
• El contingut que s’hi vol publicar.
• El nom del lloc web: comprovar que el domini està lliure i registrar-lo.
• La competència: investigar llocs similars.

Cal definir l’objectiu que es vol aconseguir amb la pàgina web per així poder plantejar un disseny adequat i adaptat a les necessitats.

És important saber quins continguts s’hi volen publicar per adaptar el disseny al contingut i no a l’inrevés. Tampoc és necessari tenir ja tots els textos i les imatges, però sí una idea clara del que s’ha de publicar.

També és interessant estudiar altres llocs web similars i com estan posicionats. Això ens ajudarà a recollir idees per fer el disseny posterior.

En definitiva, aquesta fase està centrada en la recollida de dades i en l’anàlisi de la informació a incloure en funció dels objectius i dels usuaris finals, així com també de tots aquells requeriments tècnics per a la interfície o front-end i per al back-end, com ara llenguatges i aplicacions de desenvolupament.

En aquesta fase cal establir els criteris de disseny i el model d’interfície.

En primer lloc, cal clarificar i estructurar visualment com s’organitza el contingut de cada pàgina que formarà part del lloc web. Per a això també serà necessari establir l’ordre de prioritat dels continguts i identificar els missatges més importants que compondran cada pàgina, amb independència del dispositiu en el qual es visualitzi la web.

Posteriorment, s’hi inclourà tot allò que permeti visualitzar l’estructura de la informació, és a dir, els colors que s’utilitzaran, els diferents tipus de lletra, les imatges de fons, els formularis, els botons…

En finalitzar aquesta fase s’ha d’obtenir un prototip on es pugui visualitzar correctament la interfície de totes les pàgines del lloc web en els diferents tipus de dispositius (ordinadors, tauletes, mòbils) i que permeti avaluar-ne la usabilitat, l’accessibilitat i la navegabilitat.

Quan ja es disposa del disseny comença la fase de desenvolupament. És quan es codifica el lloc web i s’implementen les funcionalitats que ha d’oferir.

Cal destacar que aquesta fase es pot fer des de zero, utilitzant una plantilla, o bé emprant un CMS. En tot cas, es parteix del disseny del prototip obtingut en la fase de disseny, i en funció de la definició d’aquest és possible que ja es disposi de la plantilla de la web amb HTML5; si no fos així, s’hauria de fer. Llavors s’hi incorporen els diferents estils en CSS3 que s’hagin determinat al final de la fase anterior i es desenvolupa el codi dels elements interactius, generalment en JavaScript. També es creen altres components necessaris per al projecte. Per exemple, un blog, zones de registre d’usuaris, una botiga online o altres tipus de components, segons els requeriments del web.

Finalment, també cal comprovar la visualització del lloc web en diferents navegadors i dispositius mòbils.

Una vegada comprovat que tot funciona correctament, s’ha de publicar el lloc web. Per a això cal pujar-lo al servidor on estigui allotjat el domini registrat. Usualment, el nom del domini del lloc web ja s’ha registrat en la fase de planificació, i per al seu allotjament es pot optar per algun servei de hosting. Hi ha diverses empreses que l’ofereixen, com poden ser dinahosting.com, cdmon.com o dondominio.com.

Finalment, s’ha de revisar que el lloc web sigui visible als principals cercadors, i també pot resultar interessant instal·lar l’eina de seguiment estadístic Google Analytics per obtenir informes per fer-ne el seguiment.

Cal que entenguem el lloc web com una cosa “viva”, que segueix creixent i canviant al llarg del temps. Així, cal que s’efectuï el manteniment del lloc web per adaptar-lo a noves tecnologies o afegir-hi i modificar-ne funcionalitats.

En conseqüència, entenem que el procés de creació d’un lloc web no s’acaba mai, ja que sempre caldrà actualitzar-ne continguts i revisar que els seus components són els adients.

La fase de disseny d’un projecte web correspon a l’elaboració d’un esbós del que seria la interfície del web, que es pot dur a terme mitjançant la creació d’un prototip.

De manera general, els passos a seguir per fer un prototip són:

1. Obtenir la inspiració.
2. Crear un esbós o wireframe.
3. Crear una maqueta o mockup.
4. Elaborar el prototip.

En funció del tipus de projecte es pot obviar algun pas o insistir més en un altre. Cal destacar que el prototip final que s’obtindrà no necessàriament serà un disseny acabat, sinó un document de treball.

En la fase inicial de disseny del lloc web cal una tasca de “pluja d’idees” per part del dissenyador (i, si s’escau, del sol·licitant del lloc web) per tal d’esbrinar i planificar quins elements hi han d’aparèixer. Per això caldrà començar deixant via lliure a la imaginació i jugar amb els diferents elements de disseny que en poden formar part, com per exemple si hi han d’aparèixer menús i de quina manera, quina informació es vol que aparegui a la part central o la temàtica de les imatges que s’hi volen incloure.

D’aquesta manera, el procés de creació de l’esbós inicial no té un treball conceptual ni tècnic; prevalen la creativitat, l’experiència, l’habilitat i, en moltes ocasions, els gustos subjectius del dissenyador.

En definitiva, l’esbós ha de reflectir les idees generals sobre el projecte i, per tant, ha de poder respondre qüestions com:

• Quins són els objectius finals del web?
• A quin públic va dirigit?
• Quin servei es vol oferir?
• Quins són els elements més característics, com ara logotips i informació de contacte, i on es posaran?
• On serà la zona de navegació?
• Tindrà serveis de xarxes socials? Quines?
• Quines seran les àrees amb continguts?

L’elaboració de l’esbós no requereix necessàriament de cap eina informàtica, fins i tot s’acostuma a fer-lo amb llapis i paper i s’hi plasmen les idees de com es vol que sigui el lloc web. Així doncs, és una primera representació de la distribució dels elements que ha de contenir. També s’hi poden incloure anotacions als laterals o petits comentaris amb una mica d’informació sobre el que es vol fer.

El següent pas en la creació d’un lloc web és la realització formal amb eines informàtiques de l’esbós elaborat en la fase anterior, que s’anomena wireframe.

Així doncs, els wireframes ajuden, entre altres coses, a:

• Donar prioritat als continguts determinant la quantitat i la localització de l’espai que se’ls ha d’assignar.
• Determinar la funcionalitat prevista de la interfície del web.
• Clarificar els espais i les formes de visualització de determinats tipus de continguts sobre la interfície d’usuari.
• Mostrar les connexions entre pàgines.

És per aquest motiu que els wireframes no tenen estil tipogràfic, color o imatges, ja que el seu principal objectiu és establir la funcionalitat, el comportament i la jerarquia dels continguts.

Així que primer caldrà estructurar la informació en caixes i jerarquitzar els continguts. Llavors caldrà establir l’ordre de la informació que es vol presentar als usuaris que accedeixin al lloc web.

D’aquesta manera, l’estructura bàsica més comú és dividir la pàgina en tres zones: capçalera, cos i peu. Així doncs, en primer lloc cal situar els continguts de dalt a baix, i en segon lloc, d’esquerra a dreta.

En la figura podeu veure una proposta de wireframe per a la pàgina principal d’una companyia d’aviació.

Per fer aquest 'wireframe' s'ha utilitzat l'eina en línia Gliffy.

Existeixen multitud d’eines en línia gratuïtes o de pagament per fer wireframes, com poden ser:

• Gliffy: disponible a www.gliffy.com
• Cacoo: disponible a cacoo.com
• Mockingbird: disponible a gomockingbird.com
• Lumzy: disponible a www.lumzy.com

Avui dia, l’accés a qualsevol lloc web es fa tant des d’un ordinador o un telèfon mòbil com des d’una tauleta, i per aquest motiu cal definir l’estructura i l’ordre dels continguts per a múltiples mides i resolucions de pantalla.

Molts autors apunten que per crear un wireframe adaptatiu convé començar pel telèfon mòbil, mobile first. D’aquesta manera es garanteix que el contingut pot servir en els dispositius més petits i després ja s’anirà ampliant el disseny progressivament.

Per desenvolupar un disseny mobile first cal deixar de banda algunes idees comunes que s’apliquen al disseny per a ordinadors, ja que en una pàgina web per a mòbil en realitat hi ha dues parts importants, la capçalera i el peu de pàgina, les quals hauran d’incloure les opcions de navegació més importants.

D’aquesta manera, el disseny per a mòbils sovint tindrà una sola columna, fet que també provoca una visualització lineal dels continguts i característiques del lloc web.

En la figura podeu veure un exemple de wireframe responsive per a la pàgina principal d’una companyia d’aviació.

A l'esquerra veiem el 'wireframe' per a un ordinador i a la dreta el mateix per a un mòbil.

Una de les tasques principals en el moment de dissenyar un lloc web és l’elecció dels continguts, i per això cal crear el que es diu un mapa del lloc, és a dir, una llista de pàgines web estructurades amb una arquitectura d’enllaços adequada per a una correcta navegació de l’usuari i un millor posicionament en els motors de cerca.

Existeixen sis tipus de mapes de navegació:

• Navegació lineal: permet que l’usuari rebi la informació en l’odre adequat, únicament amb les opcions d’anar endavant o endarrere. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació:

Representació del tipus de navegació lineal

• Navegació lineal en estrella: sistema de navegació similar al lineal, però es va i es torna a l’inici. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació:

Representació del tipus de navegació en estrella

• Navegació jeràrquica o d’arbre: aquest sistema comença per una pàgina principal en la qual es presenten diverses opcions que permeten anar visualitzant pàgines especifiques. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació:

Representació del tipus de navegació jeràrquica

• Navegació no lineal: permet marcar un camí general de navegació, però dóna cabuda a petites variacions. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació:

Representació del tipus de navegació no lineal

• Navegació composta: la navegació composta és la que inclou diferents sistemes de navegació. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació.

Representació del tipus de navegació composta

• Navegació múltiple: aquesta estructura de navegació permet que cada pàgina estigui vinculada a totes les altres. En la figura podeu apreciar l’esquema que descriu aquest tipus de navegació:

Representació del tipus de navegació múltiple

Els mapes de navegació sovint s’incorporen també com una funcionalitat més per a l’usuari de la pàgina web. Així, l’usuari disposa de tots els enllaços a qualsevol pàgina del lloc web des d’un mateix punt.

Vegeu en la figura el mapa web de la Xarxa Telemàtica Educativa de Catalunya (XTEC):

Font: xtec.gencat.cat/ca/MapaWeb/

Una vegada es té clara l’estructura dels elements que apareixeran a la interfície web cal fer el que s’anomena maqueta o mockup, que servirà per demostrar i provar el disseny.

El mockup ha de ser un mitjà per representar l’aparença del web i mostrar els fonaments de la seva funcionalitat, i inclou els detalls visuals com són els colors, la tipografia, les icones, les imatges… En observar un mockup s’ha de tenir una idea de com es veurà el web final i una idea aproximada de com funciona.

Podeu veure un exemple de mockup en la figura:

Per a la realització del 'mockup' s'ha utilitzat l'eina en línia moqups.com

Existeixen moltes eines que permeten crear mockups. De fet, podem usar qualsevol programa de dibuix, ja sigui vectorial, com Illustrator o Inkscape, o programes més orientats al retoc d’imatges, com Gimp o Photoshop.

Però també hi ha diverses eines específiques per a aquesta finalitat, algunes fins i tot en línia, que permeten fer el disseny de maquetació, com són:

• Balsamiq: ofereix una versió per descarregar i una versió en línia. Disponible a balsamiq.com
• Gomockingbird: eina en línia disponible a gomockingbird.com
• Hotgloo: eina en línia disponible a www.hotgloo.com
• Invisionapp: eina en línia disponible a www.invisionapp.com
• Mockflow: eina en línia disponible a mockflow.com
• Moqups.com: eina en línia disponible a moqups.com

Una de les formes d’assegurar-se que tot l’equip de projecte estigui en sintonia en el moment de dissenyar les diferents parts del lloc web és crear una documentació de disseny o una guia d’estils.

Definir una guia d’estils és molt important quan diversos dissenyadors treballen conjuntament per tal d’assegurar-se que no s’interpretin malament els estils que s’han de seguir o que no es canviïn.

Per crear una guia d’estils cal definir la tipografia, la paleta de colors, les imatges i els botons.

El prototip es duu a terme per avaluar la navegació i la interacció amb l’usuari, i serveix per definir aspectes que no han quedat reflectits en el wireframe o en el mockup.

D’aquesta manera, els prototips són navegables i serveixen per testejar elements d’interacció, com la validació dels formularis, les icones, els botons o qualsevol element amb què l’usuari final interactuï. Així doncs, a través de la seva creació es poden identificar i solucionar problemes sobre l’experiència d’usuari (UX) (vegeu la figura).

Pàgina d'inici del prototip

En definitiva, un prototip és una primera implementació amb HTML i CSS basada en el mockup realitzat, en el qual es poden visualitzar tots els elements encara que alguns no funcionin. Per exemple, en un lloc web que ofereixi un formulari per donar-se d’alta al sistema o per validar-s’hi, el prototip ha de mostrar el formulari encara que aquest no s’enviï a cap lloc o no estigui implementada la funcionalitat que ha de recollir les dades.

L’elaboració d’un prototip i la següent fase de desenvolupament es pot dur a terme mitjançant el que s’anomena una plantilla web. Amb la seva utilització s’agilitza el procés de creació de la interfície oferint, si més no, un punt de partida o una idea aproximada del disseny que es vol aconseguir.

El principal avantatge de la utilització d’una plantilla és que permet reduir considerablement el temps de desenvolupament i, en conseqüència, el seu cost. Tot i això, cal avaluar si la seva utilització és apropiada, ja que en ocasions no permet un disseny i una maquetació del lloc personalitzats. Per a això, una vegada més, l’opció a triar per desenvolupar un lloc web estarà força condicionada no tan sols per les eines a fer servir, sinó per l’objectiu del web i per l’usuari final a qui va dirigit.

A l’hora d’escollir una plantilla per al lloc web és important tenir en compte algunes consideracions:

• El disseny ha de reflectir el que s’està intentant comunicar, és a dir, l’ànima del tipus de projecte o negoci que representi, ja que no és el mateix si el lloc web s’ha de destinar a una pàgina corporativa, una botiga virtual, un blog o una galeria d’imatges. Per tant, cal comprovar que el disseny de la plantilla s’hi adigui.
• El disseny de la plantilla ha de ser adaptable a diferents tipus de dispositius.
• Cal comprovar que estigui optimitzada per al posicionament SEO. Si més no, que no tingui algun error que impedeixi aparèixer als primers resultats dels cercadors, com poden ser menús duplicats, etiquetes HTML inventades…
• Depenent del públic al qual es vulgui destinar el lloc web, pot ser interessant que la plantilla ofereixi suport per a diferents idiomes.
• També cal assegurar-se que la plantilla sigui compatible amb la majoria de navegadors, perquè tothom pugui visitar el lloc web.
• Cal no descuidar la usabilitat de la plantilla, el seu temps de càrrega i la facilitat a l’hora de modificar-la.

Per crear una plantilla es disposa de diverses eines informàtiques. Es poden obtenir i descarregar plantilles de múltiples llocs web a:

• html5up.net
• templated.co
• www.zerotheme.com

També es poden obtenir plantilles per treballar amb els diferents frameworks, com per exemple Bootstrap, a:

• startbootstrap.com
• wrapbootstrap.com/tag/seo
• themesseo.com/cat/bootstrap

El concepte experiència d’usuari està agafant molta força darrerament en el món del disseny de pàgines web. L’anomenat UX Design (disseny segons l’experiència d’usuari) té com a objectiu crear interfícies que millorin la satisfacció dels usuaris i fidelitzin l’accés a la pàgines web en qüestió.

Per poder aconseguir un disseny basat en l’experiència d’usuari cal conèixer molt bé els usuaris reals (o els usuaris potencials) del web. Entre altres coses, caldrà conèixer:

• Què necessiten.
• Què valoren del web.
• Quines habilitats tenen.
• Quins objectius tenen.

Però també és important conèixer una altra característica:

• Quines limitacions presenten.

Perquè un lloc web pugui oferir una bona experiència d’usuari ha de ser, des del punt de vista de l’usuari:

• Útil: el conjunt del web ha de resultar útil a l’usuari, no hi ha d’haver res superflu.
• Usable: cal garantir la facilitat d’ús del web.
• Atractiu: els continguts i el conjunt del web han de resultar atractius, per això cal tenir en compte la imatge, la identitat i altres elements de disseny emocional.
• Localitzable: s’ha de garantir la facilitat de navegació i que els usuaris puguin trobar de forma senzilla allò que cerquen al lloc web.
• Accessible: cal garantir que tots els usuaris puguin accedir al contingut independentment de les seves capacitats i dels mitjans que utilitzin.
• Creïble: els usuaris han de poder confiar en els continguts que ofereix el web.
• Valuós: el lloc web ha de representar un valor afegit.

Una bona experiència d’usuari afavoreix la fidelització d’usuaris, el percentatge de conversió d’usuaris a clients, l’augment del temps de navegació al web i la millora la imatge de marca.

En l’experiència d’usuari hi intervenen l’arquitectura de la informació, la usabilitat, l’accessibilitat, el disseny gràfic i d’interacció i la psicologia cognitiva, entre d’altres.

Amb l’arquitectura de la informació es defineixen el disseny, l’organització de la navegació i l’etiquetatge i els sistemes de cerca d’una pàgina web, amb l’objectiu de facilitar als usuaris trobar la informació i gestionar-la de forma eficaç.

A l’hora de dissenyar com distribuir la informació en una pàgina web cal tenir en compte la forma com llegim i també l’ordre de prioritat que donem a les diferents zones de la pantalla. En els idiomes occidentals llegim d’esquerra a dreta i de dalt a baix, creant un patró de “Z”; per tant, sembla una bona idea per estructurar els continguts seguir aquest patró.

Tanmateix, en estudis de seguiment dels ulls en pàgines web (eye tracking web) duts a terme per Jakob Nielsen i Kara Pernice (referència: bit.ly/2gEmKXu) s’ha comprovat que les pàgines web on predomina la informació textual són recorregudes seguint un patró de “F”, posant més atenció a la zona superior esquerra. La figura i la figura mostren el patrons “Z” i “F”, respectivament:

Font: webdesign.tutsplus.com

Font: webdesign.tutsplus.com

De fet, quan un usuari visita una pàgina web, hi ha una sèrie de zones on espera trobar un tipus d’informació o un element determinat. Això és fruit de patrons comuns en els dissenys web que al llarg dels anys han esdevingut estàndards. La figura mostra les zones on s’esperen trobar els elements més comuns en pàgines web:

Mapes de calor

Els mapes de calor són una altra tècnica que permet saber quines àrees de la pàgina web reben més atenció per part dels usuaris. Aquesta informació s’aconsegueix detectant els clics que es fan a la pàgina, o les zones per on es mou el ratolí, o com és el desplaçament vertical (scroll). La figura mostra un exemple de mapa de calor en què les zones vermelles són les de més activitat i les zones blaves les de menys:

Font: webdesign.tutsplus.com

L’organització de l’estructura de navegació d’un lloc web ha d’ajudar l’usuari a crear-se un model mental de com està organitzat el contingut. Les estructures bàsiques que s’utilitzen per organitzar la navegació en un lloc web són: seqüencials (mapa de navegació lineal), jeràrquiques (mapa de navegació jeràrquic o d’arbre), o hipertextuals o tipus web (mapa de navegació múltiple).

Per ajudar l’usuari a trobar la informació dins d’un lloc web cal utilitzar un vocabulari controlat (que no variï) en les categories principals de contingut, i assegurar-se que els continguts similars utilitzen el mateix etiquetatge en tot el lloc web. El terme etiqueta significa un node d’informació, és a dir, una secció, una categoria, una pàgina, un document… S’ha de procurar que l’etiquetatge sigui comprensible per als usuaris del lloc i que reflecteixi el contingut. Les diferents etiquetes que s’utilitzen per organitzar la informació són:

• Els enllaços contextuals: són enllaços que es troben dins del contingut textual i que apunten a un altre lloc.
• Els títols: donen informació sobre el contingut que precedeixen.
• Les opcions dels menús de navegació: han de ser etiquetes curtes i clares, i cal que siguin representatives del contingut.

Habitualment s’accedeix a Internet per fer una gran diversitat d’accions, com ara consultar les notícies del dia, comprar, cercar informacions concretes d’algun tema d’interès o establir comunicació amb altres persones (a través de xarxes socials, correu electrònic…).

En moltes ocasions, aquest accés es fa en uns determinats webs que ofereixen no tan sols els continguts que se cerquen, sinó que mostren la informació d’una manera organitzada i visual que fa que sigui fàcil trobar allò que es busca. Dissenyar el web de manera que sigui atractiu, útil i que s’ajusti a les necessitats de l’usuari final no és gens fàcil, i és aquí on entren els conceptes de web amigable o usable.

Aquests conceptes, referint-se a una interfície gràfica web, tenen moltes accepcions. Són termes que poden tenir interpretacions subjectives i, de fet, un web pot ser molt agradable per a unes persones i molt poc per a unes altres.

No obstant això, caldrà definir uns criteris estàndard a l’hora de desenvolupar una interfície web i marcar uns principis bàsics sobre els quals establir un punt de partida a partir del qual començar a dissenyar.

Existeixen dues normes ISO que han tractat aquest concepte d’usabilitat i que defineixen uns estàndards mínims de disseny: la norma ISO/IEC 9126-1 i la norma ISO/IEC 9241-11.

En termes generals, la usabilitat consisteix a aconseguir que un producte o una interfície siguin utilitzables.

Aquesta definició requereix tenir en compte molts matisos per poder definir o entendre el significat de facilitat d’ús. Però hi ha molts altres termes que també hi estan relacionats, termes com efectivitat, eficiència i satisfacció de l’usuari. Aquests conceptes varien l’apreciació en funció de si estan afectats pels usuaris, els seus objectius o les seves expectatives i per la situació d’ús de l’eina, el producte, l’aplicació informàtica o la pàgina web.

A partir del següent exemple, corresponent a una interfície parcial d’una pàgina web, es pot veure un cas que ajudarà a entendre millor quan una interfície és o no usable. En la figura, en la figura i en la figura es mostra un diàleg que es pot donar quan es vol enviar un correu amb documents adjunts. Una vegada s’ha adjuntat un document, una finestra mostra un diàleg que demana si es volen adjuntar més arxius.

A continuació es valoren tres possibles interfícies amb les quals l’usuari ha d’interaccionar. En la figura es pot veure una interfície que es pot considerar amb una usabilitat no gaire bona:

Hi ha una pregunta a la qual l’usuari ha de contestar seleccionant l’opció que convingui entre les tres possibles. Hi ha tres botons de resposta que són a l’esquerra, ben alineats, però amb un ordre que costa una mica d’entendre. La pregunta tampoc no dóna gaire informació. No quedar clar què succeirà si no es dóna resposta, és a dir, si s’escull l’opció de cancel·lar. De tota manera, un usuari amb coneixements mínims d’informàtica podria interactuar amb aquesta interfície.

En la figura es mostra una interfície amb una usabilitat correcta:

La figura mostra una imatge que alerta igualment d’una situació de dubte per a la pàgina web, com pot ser que, una vegada adjuntat un document, no sap si l’usuari haurà acabat o voldrà adjuntar-n’hi més. La pregunta que trobem és força més completa i comprensible. Les tres respostes possibles tenen una ubicació més fàcil d’identificar, amb la més probable com a primera opció.

A la proposta de la figura es mostra un diàleg per a la interacció d’un usuari amb la pàgina web. Aquesta seria d’una usabilitat òptima:

En aquest cas hi ha hagut algunes evolucions més. En primer lloc, la imatge que es mostra és més indicativa del tipus d’acció que es requerirà, i continua amb el símbol d’alerta però indicant, amb la imatge com a metàfora dels documents, que es tracta d’una possible operació de voler afegir més documents abans d’enviar el correu. A més, els botons de resposta per a l’usuari no estan alineats, sinó que tenen una distància irregular entre si, cercant un tipus de resposta per part de l’usuari. També cal remarcar el fet que les paraules dels botons de resposta són verbs que indiquen amb més claredat les opcions a l’hora de seleccionar-ne una.

Es pot intuir que en moltes ocasions el concepte d’usabilitat i la conclusió que un web sigui considerat usable o no té una part subjectiva per part de l’usuari. No obstant això, per tal de fer una anàlisi al més objectiva possible, es defineixen uns estàndards que ajuden a prendre decisions.

El disseny d’una pàgina web és una tasca crítica en el procediment de desenvolupament. La pàgina ha de ser agradable per als usuaris i ha de complir els requisits dels objectius per als quals està dissenyada. Quan es diu que un web ha de ser amigable es fa referència al fet que no ha de transmetre rebuig, sinó que l’experiència d’accedir-hi i consultar-la ha de ser satisfactòria i ha de fer venir ganes de tornar-la a visitar. Això implica que la usabilitat de la pàgina dissenyada ha de ser bona.

Per aconseguir aquests objectius d’usabilitat òptima es poden trobar alguns principis o consells que ajuden a aconseguir dissenyar webs amigables. L’any 1995, Jakob Nielsen va publicar el que va denominar “les regles generals o regles heurístiques” de la usabilitat (vegeu la figura). Aquests principis o regles els va elaborar a partir de l’estudi de pràcticament més de 250 problemes d’usabilitat i estan enfocats cap a entorns i pàgines web.

Així, els principis de la usabilitat són:

• Ajuda i documentació. Poques pàgines web requereixen realment una documentació o uns llocs d’ajuda exhaustius, però això no treu que s’hagi d’oferir documentació o assistència als usuaris. Aquesta documentació ha de ser senzilla i ràpida de trobar i ha d’estar pensada per a les tasques que han de fer els usuaris, indicant de manera concisa i breu els passos a seguir per portar a terme les diferents accions.
• Consistència i estàndards. Al llarg de totes les seccions o pàgines d’un lloc web s’han de fer servir els mateixos estàndards, les mateixes metàfores i els mateixos colors; en definitiva, cal donar consistència per afavorir l’enteniment i l’aprenentatge per part de l’usuari final. Un lloc web on cada pàgina tingui un color diferent per als enllaços havent d’avisar cada vegada l’usuari del significat no tindria una bona usabilitat.
• Control i llibertat de l’usuari. Les funcions de Desfer i Refer han d’estar presents per als usuaris en tot moment. Aquests es poden equivocar en qualsevol situació i han de tenir la possibilitat de retrobar el camí correcte de manera senzilla i ràpida. La possibilitat de tornar a la pàgina d’inici ha de ser clara.
• Correspondència entre els continguts web i el món real. La informació ha de mostrar-se de la manera més natural possible, de la manera més semblant a la vida diària, seguint el mateix ordre i la mateixa estructura que es faria servir si aquesta informació es donés a través d’un canal de comunicació presencial. Cal fer servir el llenguatge dels usuaris, amb paraules i frases que puguin reconèixer com a familiars.
• Disseny minimalista. Si una informació no és rellevant no cal que sigui a la pàgina web que s’està dissenyant. El mateix succeeix amb els elements de disseny. Qualsevol contingut (text, imatges, elements multimèdia…) que hi aparegui ha d’estar justificat.
• Prevenció d’errors. Els dissenys han de preveure els errors que poden cometre els usuaris. D’aquesta manera, s’hi poden avançar i controlar o intentar guiar les seves accions abans que arribin als possibles errors. Un disseny cuidat que pugui evitar problemes als usuaris és millor que uns bons missatges d’errors.
• Flexibilitat i eficiència. Els usuaris que poden accedir a una mateixa pàgina web poden ser molt diversos, cosa que fa que aquesta hagi de ser flexible i adaptar-se a totes les possibles necessitats. I, a la vegada, cal que sigui eficient, possibilitant tant donar resposta ràpida a un usuari expert com oferir solucions senzilles a un usuari novell.
• Reconeixement, diagnòstic i recuperació dels errors. Cal que els missatges d’error siguin clars i concisos. Han d’explicar de manera clara, i amb un llenguatge senzill, què ha succeït i ajudar els usuaris donant possibles vies de solució.
• Reconeixement abans que memòria. L’usuari no ha de tenir la necessitat de recordar quines opcions ha d’escollir o on ha d’anar per trobar la informació que necessita. El disseny de la pàgina web li ha de permetre identificar els objectes i les opcions de manera clara i senzilla.
• Visibilitat de l’estat del sistema. L’usuari ha de poder conèixer l’estat del sistema en tot moment, ja que la pàgina web ha d’anar-lo informant del que està succeint. El temps de resposta ha de ser raonable i cal fer servir les eines que permet la tecnologia per informar els usuaris de què fa el sistemai del temps que trigarà a fer-ho.

Dues de les característiques més importants en la creació de llocs web són l’estructura que li donarem i com serà la navegació que permetrem a través del lloc. Totes dues han de ser consistents i intuïtives. També cal que oferim una bona funcionalitat, que faci el que ha de fer en un temps raonable, de manera correcta i amb certa facilitat. La interactivitat que oferim al lloc web també és important i ha de tenir com a objectiu mantenir l’usuari informat en tot moment.

Per valorar la usabilitat d’una pàgina web existeixen diferents tècniques d’anàlisi que es divideixen en dos tipus:

• Tècniques objectives: són aquelles que es poden executar de manera automàtica, amb programari que ajuda a controlar i revisar la usabilitat d’un lloc web. Entre aquestes tècniques hi trobem l’elaboració de mapes de calor.
• Tècniques subjectives: consisteixen a recollir indicacions de les experiències dels usuaris a través de qüestionaris o test A/B.

Un aspecte important de la usabilitat d’una pàgina web és que es visualitzi i funcioni correctament en els diferents dispositius i navegadors que existeixen. Aquest fet ens porta a haver de verificar i validar el web desenvolupat en:

• Els diferents navegadors que existeixen o, com a mínim, els més comuns, és a dir, aquells que abasteixin el percentatge més alt possible d’utilització. Entre d’altres, Firefox, Google Chrome, Safari i Microsoft Edge. L’ús d’uns o d’uns altres dependrà en alguns casos del sistema operatiu instal·lat. La pàgina browsershots.org permet comprovar la visualització d’una pàgina web en diferents navegadors.
• Els diferents dispositius des dels quals es podrà navegar per aquesta pàgina web, com és el cas d’ordinadors, mòbils i tauletes. La bona visualització o no d’un web en cadascun d’aquests dispositius és el que es treballa en el que s’anomena disseny web adaptatiu o responsiu (Responsive Web Design, RWD). La pàgina quirktools.com/screenfly permet simular la visualització d’una pàgina web en diferents mides de pantalla i resolucions.

Per tant, ja es pot intuir que una de les primeres premisses per tal que un web sigui usable és que estigui dissenyat seguint les pautes de l’RWD.

Els llocs web dissenyats sota els paràmetres d’RWD proporcionen beneficis quant a millor posicionament a la xarxa (SEO), a banda d’altres com la simplificació de continguts i l’eliminació de redundàncies, ja que no s’ha de dissenyar un web per a cada dispositiu, sinó un d’únic que s’adapti a tot tipus de dispositius.

En general, hi ha alguns aspectes que permeten millorar la usabilitat d’un web per tal d’adaptar-lo a dispositius mòbils, entre d’altres:

• Tenir cura de les barres de desplaçament horitzontals i verticals.
• Situar el contingut principal que sigui d’interès per a l’usuari al centre de les pàgines web.
• Escollir una mida de la lletra adient (16 px o superior).
• Establir una distància suficient entre els elements clicables i interactius.
• No abusar d’elements que siguin difícilment visualitzables.

Molts d’aquests aspectes cal tenir-los en compte durant el disseny, sense oblidar l’experiència d’usuari (UX).

L’accessibilitat, en termes de web, fa referència al fet de facilitar l’accés universal als usuaris independentment de les seves capacitats físiques, sensorials o intel·lectuals i de les característiques tècniques dels mitjans que utilitzin per accedir-hi.

El W3C (World Word Web Consortium) té un grup de treball que s’encarrega de desenvolupar les pautes per a l’accessibilitat al contingut web. Aquest grup és el WAI (Web Accessibility Initiative/).

L’any 2008 es va publicar la segona versió de les pautes per a l’accessibilitat a continguts web WCAG 2.0 (Web Content Accessibility Guidelines). Aquestes pautes s’organitzen en quatre principis:

• Perceptibilitat
• Operativitat
• Comprensibilitat
• Robustesa

En el principi de perceptibilitat es marquen pautes per assegurar que tots els continguts i components de la pàgina web puguin ser captats per l’usuari. Per això cal oferir alternatives textuals als continguts audiovisuals i facilitar la distinció dels continguts usant la mida del text i el contrast, entre d’altres.

El principi d’operativitat vol assegurar que tots els components de la web es puguin executar. Per això marca pautes perquè totes les funcions siguin accessibles per teclat, perquè en continguts interactius es deixi el temps suficient per llegir les informacions i s’evitin intermitències ràpides que puguin provocar convulsions i perquè s’ofereixin ajudes a la navegació amb la utilització correcta d’etiquetes HTML.

El principi de comprensibilitat vol assegurar que el text sigui llegible i entenedor i que s’ofereixi ajuda als usuaris per tal d’evitar i corregir errors, per exemple amb la inclusió de suggeriments.

El principi de robustesa vol assegurar la màxima compatibilitat dels continguts amb les eines i tecnologies actuals i futures.

Per valorar si una determinada web està dissenyada sota els criteris d’accessibilitat caldrà seguir un procés que consistirà en la revisió de la normativa que regeix els principis d’accessibilitat, així com de les pautes, els criteris i les recomanacions, fent servir eines i mètodes per analitzar i valorar el disseny accessible de la web.

Hi ha eines informàtiques que permeten dur a terme una avaluació inicial, objectiva i automàtica que serveixi com a base per fer una avaluació d’accessibilitat completa. També existeixen altres eines que faciliten l’avaluació manual i permeten accedir i visualitzar de manera molt més clara com s’ha dissenyat i programat la pàgina web.

Algunes d’aquestes eines són:

• Lectors de pantalla: programari que ofereix la possibilitat de llegir els continguts d’una determinada pàgina web. Aquest tipus de programari no només llegeix en veu alta els continguts de text, sinó que també pot explicar altres continguts que no siguin en mode text. L’ús d’alguns d’aquests lectors per part del dissenyador web permet avaluar l’accessibilitat al web especialment per a aquelles persones amb algun tipus de discapacitat visual. Alguns exemples d’aquests lectors són el complement per a Firefox Chirpy 2.0 (mzl.la/2EFWwAq) o el programari JAWS, acrònim de Job Access With Speech (bit.ly/1yJkxuV).
• Eines d’anàlisi automàtica de l’accessibilitat web: permeten l’anàlisi automàtica de l’accessibilitat al lloc web. El que fan aquestes eines és analitzar el codi HTML a través del qual es poden avaluar moltes de les pautes d’accessibilitat definides a les WCAG 2.0. Alguns exemples d’aquest tipus d’aplicacions que s’ofereixen en línia són W3C HTML Validator (validator.w3.org) o TAW (www.tawdis.net).
• Eines d’anàlisi de l’accessibilitat web des de dispositius mòbils: permeten l’anàlisi automàtica de l’accessibilitat a pàgines web des de dispositius mòbils. Alguns exemples d’aquest tipus d’aplicacions que s’ofereixen en línia són TAW (www.tawdis.net) o mobiReady (ready.mobi). L’accessibilitat des de dispositius mòbils també es pot consultar des d’alguns navegadors. Al Chrome des de l’opció Inspecciona del menú contextual que apareix en prémer el botó dret, es pot visualitzar un web tal com es mostraria en diferents dispositius mòbils (botó Toggle device toolbar).
• Eines d’anàlisi d’accessibilitat web incorporades als navegadors: molts navegadors permeten incorporar diferents complements, plugins o extensions que permeten dur a terme l’anàlisi d’accessibilitat web. Entre aquests es poden trobar Accessibility Evaluation Toolbar, Firebug o WCAG Contrast Checker, tots ells per a Firefox.

La promoció d’un lloc web és imprescindible per estar present al mercat actual. L’objectiu principal de promocionar un lloc web és incrementar el nombre de visites, és a dir, generar trànsit cap al web i que els visitants s’acabin convertint en clients. Interessa, per tant, que aquest trànsit sigui de qualitat i que els visitants realitzin algun tipus d’acció al web.

En funció dels objectius, els mètodes per a la captació de trànsit són variats, i es pot:

• Utilitzar les xarxes socials.
• Donar d’alta el web en cercadors i directoris.
• Oferir contingut de qualitat i optimitzat (fent un bon ús de les paraules clau).
• Utilitzar campanyes de correu electrònic.
• Contractar publicitat en cercadors i xarxes socials.
• Aconseguir enllaços cap al web des d’altres webs de qualitat, també anomenat linkbuilding.
• Contactar amb influencers per fer màrqueting d’afiliació.
• Utilitzar estratègies de captació de trànsit en el món offline.

Quant al lloc web, per a la captació de trànsit s’han de considerar aspectes com l’optimització del web per a cercadors (SEO) i l’experiència d’usuari de les pàgines d’aterratge o landing pages.

Donar d’alta un lloc web als cercadors no implica un posicionament bo, sinó simplement informar els motors de cerca de l’existència del web. Els següents enllaços permeten donar d’alta un lloc web a diferents cercadors:

• Google: goo.gl/JwqbGj
• Bing: binged.it/2rLbL3s
• Baidu: bit.ly/2oI3ppx

El trànsit web es classifica segons quin sigui el seu origen. Així doncs, distingim entre:

• Trànsit directe, format per les visites que ja coneixen el web i hi accedeixen després de teclejar l’URL al navegador. Aquest tipus de trànsit es pot generar utilitzant campanyes en canals offline.
• Trànsit de cerca, format per les visites que arriben a través de cercadors. El trànsit de cerca pot ser orgànic o SEO, quan prové del llistat de resultats “naturals” de cerca, o bé pot ser de pagament o CPC (cost per clic), quan prové d’algun anunci en el cercador.
• Trànsit de referència (referral), format per les visites que arriben des d’enllaços situats a altres webs i que apunten a alguna pàgina del nostre lloc web.
• Trànsit de campanyes, format per les visites que arriben des d’accions de màrqueting en línia, per exemple des d’una campanya de correu electrònic. Per controlar la campanya que origina la visita s’utilitzen els enllaços amb etiquetes que en tracen la procedència.

Per optimitzar el contingut del lloc web és recomanable seguir, entre d’altres, les directrius de qualitat que marca Google, i que es poden consultar a bit.ly/2qj5maI.

A més a més, existeixen altres tècniques per millorar el posicionament d’un lloc web:

• El domini: es recomana usar un nom de domini que contingui alguna de les paraules clau. Per exemple, si es tracta d’una botiga en línia és recomanable incloure-hi el nom del producte o servei.
• URL amigables: es recomana utilitzar URL que facilitin informació sobre la pàgina on porta. Per exemple, és millor usar un URL que sigui www.elmeulloc.com/serveis.html que www.elmeulloc.com/llistaS.html.
• Els llenguatges: cal tenir en compte que els llenguatges que més entenen els cercadors són HTML i CSS. Per tant, tenir una bona estructura de pàgines HTML i CSS sense errors serà clau en el posicionament SEO.
• Disseny responsiu o responsive: els cercadors premien que el lloc web estigui preparat per a mòbils i tauletes.
• La popularitat: els cercadors tenen en compte el nombre d’enllaços que porten a un web publicats en altres pàgines web. D’aquesta manera, és important la col·laboració amb altres llocs web o comunitats, així com també dissenyar un pla de promoció a les principals xarxes socials.