Arxiu de la categoria "Estàndard, usable i accessible "

  • Dimarts 5 agost 2014 per

    L’analítica web, una bona aliada de la usabilitat

    Analítica web i usabilitat

    Abans del llançament d’un projecte web no sempre està a l’abast de totes les butxaques poder fer tests d’usabilitat. Amb eines gratuïtes com Google Analytics i amb el domini de tècniques d’analítica web, podrem detectar problemes d’usabilitat i d’experiència d’usuari i, aleshores, treballar perquè els usuaris puguin navegar pel web sense problemes ni entrebancs.

    Fora frustracions: tot web ha de ser usable!

    La usabilitat és la facilitat amb què la gent pot usar una eina (o un web) per aconseguir un objectiu concret. I, de fet, està estretament lligada amb l’accessibilitat i l’experiència d’usuari.

    A l’hora de dissenyar un web és essencial tenir en compte la usabilitat i l’experiència d’usuari, principalment des de 2 punts de vista:

    • Que l’usuari pugui fer les seves tasques (informar-se, subscriure’s, comprar) sense frustrar-se, entenent què ha de fer en tot moment, sense abandonar la pàgina.
    • Que l’empresa o institució pugui assolir els seus objectius: que l’usuari s’informi, que es subscrigui, que compri, que fidelitzi, etc.

    Per tant, sabent que hi ha una finalitat, a totes les parts els interessa que s’hi arribi amb èxit i sense patiments.

    En el procés de creació d’un web – i també més endavant – és important utilitzar tècniques pròpies de la usabilitat, per a detectar si hi ha algun problema: si hi ha continguts que no es comprenen, si l’usuari sap en tot moment què ha de fer, si la crida a l’acció és prou clara, si la nomenclatura utilitzada és la més adequada o no, etc.

    Tant si es té prou pressupost per fer estudis d’usuari com si no, l’analítica web resultarà ser una gran aliada, per ajudar-nos a detectar problemes als nostres llocs web.

    L’analítica web ens dóna pistes sobre possibles problemes en un lloc web

    Amb l’ús de Google Analytics podem estudiar diferents mètriques i la seva evolució al llarg del temps.

    Amb quines coses ens hauríem de fixar?

    • El temps a la pàgina i el percentatge de rebot
      Quan es detecta que el temps de mitjana en una determinada pàgina és mínim, podem intuir que hi ha alguna cosa que falla. Si, a més, el percentatge de rebot és molt elevat, haurem de veure què passa en aquesta pàgina.
      Podem trobar problemes amb la usabilitat d’aquesta pàgina en concret. Per exemple, que no es visualitzi bé des de dispositius mòbils, o que hi hagi un text llarguíssim que no es llegeix ningú i que faci abandonar als usuaris. O, fins i tot, pot passar que els usuaris hi arribin esperant trobar-hi una altra cosa, aleshores s’haurien de revisar la nomenclatura del web i les seves paraules clau.
    • Visitants nous o visitants recurrents i freqüència de la visita
      Amb aquestes dades podem conèixer si el nostre web interessa o no als usuaris. Tenir usuaris recurrents, que ens visitin freqüentment i que facin visites de llarga durada és el millor símptoma de que el nostre web no presenta problemes.
    • Pàgines de sortida
      Una pàgina de sortida és l’última pàgina visitada abans que un usuari abandoni el nostre web. Per tant, cal vigilar-les amb lupa: les pàgines del nostre web que tinguin un alt percentatge de sortides seran les primeres que revisarem per veure què hi passa.
      Imaginem, per exemple, que tenim web de comerç electrònic i que, en el procés de compra, un alt percentatge d’usuaris abandona a l’hora de posar les dades personals. Hauríem de revisar bé el procés i mirar si hi ha un problema amb el formulari, si demanem les dades abans d’hora o què hi passa realment.
    • Els embuts de conversió
      Una de les parts més interessants que ens ofereix Google Analytics i de la que en podem treure més suc és la creació d’objectius (per exemple, aconseguir la subscripció de l’usuari a un butlletí o, en un web d’e-commerce, aconseguir la venda) i la creació d’embuts de conversió.
      Un cop s’han determinat els objectius del web, els embuts de conversió són la representació gràfica dels passos que fa l’usuari fins a arribar a aquests objectius. Ens poden donar pistes molt valuoses sobre possibles problemes d’usabilitat en formularis, carros de la compra, passarel·les de pagament, etc. Perquè visualitzem exactament en quin punt es perden els usuaris.

    L’analítica web (també), a la recerca de solucions!

    Un cop detectats els possibles problemes d’usabilitat que pugui tenir el nostre lloc web, encara hi ha un parell de coses que podem fer.

    • Els tests A/B
      Un test A/B és un mètode que ens permet comparar dues o més versions d’un lloc web, sense que els usuaris ho sàpiguen, de manera que el mateix contingut d’una pàgina s’ofereix aleatòriament en diferents dissenys o estructures. En un apunt de fa un temps sobre com vendre més a Internet, us explicàvem que des de Google Analytics es poden crear aquest tipus d’experiments.
      Una vegada identificada la pàgina on creiem que hi ha un problema d’usabilitat, podem fer versions de la pàgina amb petites variacions que podem anar seguint al llarg del temps i analitzar en quin cas es corregeix el problema.
    • Velocitat del lloc
      Finalment, la velocitat del lloc també és determinant a l’hora d’oferir una bona experiència d’usuari. Una descàrrega lenta en un web és un dels principals factors d’abandonament dels usuaris.
      Però, a més a més, la velocitat en què es carrega una pàgina cada vegada esdevé més un aspecte clau perquè solem navegar des de dispositius mòbils, moltes vegades amb connexions nefastes, i amb la urgència d’accedir a les informacions al moment. Els usuaris tenim poca paciència i sinó abandonem. Per tant, també s’ha de treballar fort en aquest sentit.
      L’analítica web ens permet monitoritzar la velocitat de càrrega de les pàgines i ho podem fer també amb eines gratuïtes. Amb Google Webmaster Tools se’ns propociona informació de la velocitat de descàrrega del lloc web, però, a més, si ho vinculem al compte de Google Analytics, també ens dóna suggeriments sobre com millorar aquesta velocitat de descàrrega.

    Així que, encara que el nostre web presenti problemes, la bona notícia és que amb uns coneixements bàsics d’analítica web, seguint unes quantes mètriques i amb l’ús només d’eines gratuïtes, podem treballar per aconseguir grans millores. Està a l’abast de tothom aconseguir fer webs més eficaços.

    , , ,

  • Dijous 10 abril 2014 per

    Landmark roles: millora l’accessibilitat del teu web


    Ja sabem que un document HTML ben estructurat ens aporta sempre beneficis: si definim correctament la jerarquia mitjançant encapçalaments (h1, h2, h3…) ajudarem enormement els usuaris de tecnologies assistives a l’hora de navegar per la pàgina. Per altra banda, disposem d’una altra eina que pot ajudar a millorar el nivell d’accessiblitat d’una pàgina. Es tracta dels Landmark roles, que formen part de l’especificació WAI-ARIA del W3C.

    Aquest mecanisme ens ajuda a identificar de forma consistent seccions d’una pàgina (com la cerca, la navegació o el contingut principal), és un complement als elements que ens proporciona el llenguatge HTML en qualsevol de les seves versions, i el millor de tot és que és molt fàcil d’implementar.

    Amb els landmark roles, a les tecnologies assistives (lectors de pantalla i similars) els és més fàcil navegar per la pàgina, poden saltar a una àrea en concret simplement pulsant una tecla, per exemple.

    Podem afegir els landmark roles a qualsevol document HTML que ja tinguem construït, simplement afegint l’atribut role a un element contenidor, i especificant el valor del role més adequat al contingut d’aquest contenidor. Per exemple: <main role="main">.

    Tingueu en compte que en HTML4 i (X)HTML caldrà fer ús del següent DTD perquè el validador de sintaxis del W3C no doni errors:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

    El llistat de roles disponibles que podem afegir al nostre document són els següents:

    • application: àrea definida com a aplicació web.
    • banner: àrea de contingut relatiu al lloc web, més que a la pàgina en concret. Normalment seria la part superior de la pàgina que conté el logo principal i el cercador.
    • complementary: secció de suport al contingut principal.
    • contentinfo: àrea que aporta informació sobre el document principal, normalment la informació que trobem als peus de pàgina (copyright, polítiques de privacitat, etc.)
    • form: secció contenidora dels diferents elements que conformen un formulari
    • main: contingut principal del document
    • navigation: col·lecció d’enllaços per navegar pel document o documents relacionats.
    • search: conjunt d’elements que formen una eina de cerca.

    Aquí podeu veure com els landmark roles d’ARIA ajuden els usuaris d’un lector de pantalla:

    , ,

  • Dimecres 2 octubre 2013 per

    WCAG 2.0 de forma senzilla

    Aviat farà 5 anys de la publicació de les WCAG 2.0 (Pautes d’Accessiblitat al Contingut Web 2.0). El contingut de les pautes és farregós i en determinats punts pot arribar a ser complicat d’entendre, sobretot per part de desenvolupadors que volen fer-se una idea clara i ràpida d’algun concepte o tècnica.

    És per això que Olga Revilla va decidir escriure WCAG 2.0 de forma sencilla. Aquest llibre suposa una aproximació a les pautes d’accessibilitat més planera, amb alguns canvis en el llenguatge que les fan més comprensibles. No deixa de ser la interpretació que l’autora fa de la normativa, i en certa manera tots els conceptes, tècniques i recomanacions resulten més digeribles. En paraules d’Olga Revilla, el llibre té una finalitat didàctica, que segurament manca a les pautes del W3C.

    Aquest llibre no pretén substituir les pautes. Al contrari, en recomana la lectura. Es tracta més aviat d’un resum que va al gra, i que té com a objectiu ser una eina de referència per a professionals que treballen dia a dia en el món web, des de caps de projecte fins a dissenyadors i desenvolupadors.

    L’autora es preocupa de clarificar alguns conceptes clau de les WCAG 2.0, com poden ser el de tecnologia que possibilita l’ús accessible, i la dependència tecnològica. Aquests són punts que cal tenir clars des de bon principi abans d’endinsar-se en l’estudi de les WCAG 2.0. L’última versió de les pautes pretén ser independent de la tecnologia, i això ha requerit crear aquesta sèrie de conceptes nous al voltant dels quals giren tota la resta: principis, pautes, tècniques i errors.

    Un altre aspecte interessant del llibre és que a la part final se’ns ofereixen una sèrie d’eines interessants per evaluar un lloc web.

    • Plantilla d’evaluació
    • Plantilla de declaració de conformitat
    • Eines web per ajudar-nos en la validació de:

      • Contrast de color
      • Centelleigs
      • Simulació de discapacitats visuals
      • Nivell de lectura d’un text
      • Legibilitat

    Us recomanem aquest treball (disponible tant en format electrònic com en paper) tant si ja coneixeu les WCAG 2.0 com si no. Val la pena tenir-lo a mà en el vostre dia a dia si us dediqueu al món web.

    ,

  • Dimarts 16 juliol 2013 per

    Lectures d’estiu sobre disseny web que no pots passar per alt

    Lectures d'estiu sobre disseny webÉs estiu i, per a molts, arriba el moment de fer parada. Tanquem un cicle i, a part de desconnectar, també és hora de fer balanços, d’analitzar com ha anat, agafar idees per millorar i prendre forces per tornar-hi.

    En el món del disseny web no es pot dir que hagi estat un any de calma, sinó que el web s’ha mogut més enllà de l’escriptori. Hem hagut d’aprendre noves tècniques i començar a pensar d’una altra manera. En definitiva hem hagut de fer una adaptació. I, amb l’adaptació, apareix també el concepte de disseny web adaptatiu:

    • Ens hem hagut d’adaptar a tot tipus de dispositius, a pantalles petites i grans i a connexions ràpides i lentes.
    • Els continguts i el seu context també han agafat un fort protagonisme. Hem vist com d’important és el moment i la situació en què es consumeixen les informacions i com s’han d’adequar aquestes a cada context.
    • I, finalment, els dissenyadors i desenvolupadors hem hagut de fer un canvi de xip, passant de ser aquells que fèiem composicions exactes de píxels a ser aquells que fem webs completament adaptatius.

    Una mostra de tots aquests canvis en les tècniques i la mentalitat en el món del disseny web es poden trobar en els articles que ha seleccionat l’equip de A List Apart (ALA), en el seu segon Summer Reading Issue.

    Tal i com ja us explicàvem l’estiu passat, els editors d’aquesta prestigiosa revista de disseny web han seleccionat els articles imprescindibles del 2013 i enguany, a més, ho amaneixen amb alguns altres links i vídeos que complementen als articles escollits.

    Trobo que un dels encerts – igual que l’any passat – és que et pots exportar els articles en format d’ebook per llegir còmodament des del teu iPhone o iPad (en format .epub) o t’ho pots enviar cap al Kindle (en format .mobi), mitjançant Readability, una eina de la que ja us hem cantat les meravelles diverses vegades.

    En definitiva, es tracta d’una lectura imprescindible (i molt recomanable) per estar al dia. No us ho perdeu que val molt la pena!

    • Lectura d’estiu per a millorar els coneixements sobre estàndards web, disseny, programació, usabilitat i altres aspectes relacionats: ALA Summer Reading Issue 2013

    , , , ,

  • Dimecres 15 maig 2013 per

    Eines per a desenvolupadors front-end

    Eines per a desenvolupadors front-end
    La feina dels anomenats desenvolupadors front-end, els qui escriuen el codi que interpretarà el navegador de l’usuari, s’ha anat refinant en els últims temps. Si fa uns anys no se li donava la importància que mereixia, amb l’explosió dels estàndards web es va veure que aquest aspecte del desenvolupament web necessitava la màxima atenció, ja que d’ell en depenien aspectes tan cabdals com l’accessibilitat, la usabilitat o la rapidesa amb què un web es descarregava del servidor i es mostrava a les pantalles.

    És per això que no han parat de sorgir aplicacions i extensions per als navegadors que faciliten la feina en aquesta àrea. Els mateixos navegadors incorporen ja les seves eines per a desenvolupadors per ajudar-nos a analitzar, depurar i optimitzar webs. Aquestes eines tenen totes unes característiques similars que permeten treballar bàsicament en els següents aspectes:

    • Inspecció i modificació del codi HTML i CSS: podem afegir i eliminar nodes del DOM, canviar estils, afegir atributs…
    • Depuració de codi JavaScript
    • Anàlisi del rendiment de la pàgina a la xarxa (temps de càrrega, pes de la pàgina)
    • Anàlisi del rendiment a l’hora de renderitzar la pàgina: podem veure quant tarden a carregar-se els diferents recursos, quins poden alentir la càrrega general, quant temps es destina a calcular els estils CSS…

    Aquí podeu trobar informació i documentació més detallada segons el navegador que feu servir per a la vostra feina de desenvolupadors:

    I no podriem acabar sense mencionar un parell d’eines pioneres en aquest camp: Firebug i la Web Developer Toolbar, de les que us vam parlar per aquí ja fa temps.

    Si treieu el suc a aquestes eines segur que la vostra feina se’n beneficiarà.

    , , ,

  • Dijous 7 març 2013 per

    Opera, l’altre navegador

    Navegador Opera

    El passat 12 de febrer vam saber que el navegador Opera ja ha arribat als 300 milions d’usuaris, i que passarà a utilitzar WebKit com a motor de renderitzat.

    El motor de renderitzat d’un navegador web és el software que interpreta el contingut (normalment escrit en HTML), i la informació de format (normalment el CSS), i ho mostra a la pantalla perquè ho poguem veure sense necessitat de conèixer ni llegir el codi.

    Aquests són alguns dels motors més coneguts, juntament amb els navegadors que els utilitzen:

    • Gecko: Firefox, Camino i Netscape, entre d’altres
    • KHTML: Konqueror
    • Presto: Opera des de la versió 7 fins ara, que canvien a WebKit
    • Trident: Internet Explorer
    • WebKit: Chrome, iOS i Safari, entre d’altres

    Opera no ha estat mai entre els navegadors més utilitzats pels usuaris, però sí que s’ha guanyat un respecte entre la comunitat de desenvolupadors web, per la seva vocació innovadora i de respecte als estàndards com a via per aconseguir una web universal.

    Una mica d’història d’Opera

    Opera va néixer a Noruega el 1994, com un projecte de recerca, i es va fer públic el 1996. Des de mitjans dels anys 90 Opera va estar desenvolupant el seu propi motor de renderitzat (Presto), enmig de la guerra de navegadors (que enfrontava Internet Explorer i Netscape), amb la idea d’impulsar els estàndards web. Ha arribat un moment, però, en què s’ha vist que el projecte WebKit està molt més avançat, i Opera ha preferit adoptar-lo per tal d’enfocar tots els esforços en crear un navegador millor, independentment del motor que utilitzi.

    A primer cop d’ull sembla una idea prou encertada, ja que si existeix un motor que funciona amb èxit, no caldria crear-ne un altre que arribi a fer el mateix. Però per altra banda la comunitat queda òrfena d’una alternativa al que és majoritari (fins i tot hi ha una petició perquè Presto no desaparegui), i pensem que la competència afavoreix i incentiva sempre la qualitat, en tots els camps. No seria massa beneficiós que la web es convertís en un territori WebKit, ja que els estàndards ja no tindrien sentit, seria només WebKit qui marcaria el camí.

    Volem reconèixer des d’aquí alguns aspectes interessants d’aquest navegador:

    • Va ser el primer a introduïr les pestanyes al navegador l’any 2000.
    • Opera Mini és un navegador per a dispositius mòbils amb molt d’èxit.
    • El navegador de la consola Wii de Nintendo és d’Opera.
    • Va ser un dels primers navegadors a passar les proves ACID 2 i ACID 3 de renderitzat de pàgines
    • Opera ha apostat també per l’accessibilitat des dels inicis:
      • Zoom real de tota la pàgina (no només el text, com feien els altres navegadors)
      • Ús de les tecles d’accés ràpid per a la navegació amb el teclat
      • Navegació gestual amb el ratolí

    Aquestes i altres innovacions han contribuït a millorar la usabilitat i l’accessibilitat a l’hora de navegar, i han servit moltes vegades de pauta per a la resta de navegadors. És per això que hem considerat oportú dedicar aquest apunt a un navegador que normalment no tenim gaire present. El voleu provar?

Disseny web - Antaviana

Truca’ns +34 973 143 481

Envia’ns un correu informacio@(ELIMINAR)antaviana.cat

Piula’ns a @canantaviana

o Vine a visitar-nos