AVALUACIÓ DEL LLOC WEB

NORMAEDITORIAL.COM

DES DEL PUNT DE VISTA DE

L’ARQUITECTURA DE LA INFORMACIÓ

ALBA VIDAL MAS

PAC 2 – ARQUITECTURA DE LA INFORMACIÓ, 2012

PAC 2

2

ÍNDEX

INTRODUCCIÓ

1. REVISIÓ DEL CONTINGUT DEL LLOC WEB

2. AVALUACIÓ HEURÍSTICA DEL LLOC WEB

IDENTITAT I CONSISTÈNCIA GRÀFICA

NAVEGACIÓ, ORGANITZACIÓ I ETIQUETATGE

FEEDBACK, UTILITAT i ESTANDARS WEB

3. ESTUDI DE LA COMPETÈNCIA (BENCHMARKING)

BIBLIOGRAFIA

2

3

4

4

5

6

7

12

INTRODUCCIÓ

Aquest projecte té com a objectiu millorar l’arquitectura de la informació del lloc

web Norma Editorial (http://www.normaeditorial.com)

Primer revisarem el contingut enumerant els components en blocs, després

efectuarem una avaluació heurística del lloc web amb la finalitat de detectar els

principals problemes d’usabilitat ordenant-los de més greus a més lleus. Finalment,

comentarem algunes bones pràctiques d’altres llocs web.

L’empresa independent de Barcelona NORMA Editorial es dedica a l’edició de

còmics. El seu lema és: "Els millors còmics i llibres il·lustrats des de 1977". La pàgina

web és la pàgina de referència a nivell estatal en el seu àmbit i ha anat evolucionant

en els últims anys adaptant-se als nous temps. Al principi es va centrar en els còmics

espanyols i europeus. Però de mica en mica va anar editant treballs d’autors nord-

americans i amb el boom del manga japonès, es va internacionalitzar, convertint-se

amb una de les empreses de còmic més importants de l’estat. Actualment es manté

com una de les empreses punteres en el seu sector. A l’any 2000 van llançar al

mercat la revista ¡Dibus! dirigida al lector infantil-juvenil, i al 2006 van adquirir noves

series de superherois de l’editorial d’Estats Units DC Comics.

He triat analitzar aquest lloc web per, en primer lloc, la temàtica m’atreu; i en segon

lloc, després de veure les altres webs i analitzar per sobre l’arquitectura de cada

una, aquesta ha sigut la que més ben feta estava i per tant, amb la que més m’hauria

d’esforçar per trobar-hi problemes.

PAC 2

3

1. REVISIÓ DEL CONTINGUT DEL LLOC WEB

Sistemes d’organització

Esquemes d’organització

El menú principal està organitzat per temes. En general, aquests apartats, tenen un esquema híbrid d’organitzacions exactes:

Apartats organitzats per ordre cronològic: “Novedades” i “Reimpresiones” (per mesos) “Noticies” (tipus blog: la notícia nova es situa la primera)

Apartats organitzats per llocs: “Catálogo” (USA, Europa...) “Dónde comprar” (a través de un mapa y un buscador)

Apartats organitzats per ordre alfabètic: Cada “Catálogo”, un cop seleccionat el catàleg de la regió. “Superventas” i “Próximamente”

Hi ha alguns apartats que tenen esquemes d’organització ambigus: “Plan Editorial” i “Cimoc” no tenen organització. “Empresa” té 5 apartats organitzats per tema. “Enlaces” té una primera

organització per temes i després, cada tema té una organització diferent: els autors estan organitzats per ordre alfabètic, i els microsites i blogs sense organitzar.

Estructures d’organització

El lloc web està basat amb una estructura ascendent, basada en el model de base de dades. Primer elegim el mes o la lletra del còmic que busquem i quan el trobem i fem clic a sobre, s’obre una fitxa amb la informació: Autor; Col·lecció; Sèrie; Format; Sinopsis; etc. Els apartats “Empresa” i “Enlaces” tenen una estructura jeràrquica. A aquest lloc web no es troben folksonomies.

Sistemes d’etiquetatge

Etiquetes amb format d’icones: A l’encapçalament de la pàgina hi trobem el logo de la marca que ens portarà sempre al Home (amb les novetats i noticies recents). A sota del logo hi troben tres icones no textuals: Home; Email y Sitemap. A la dreta trobem un slide amb 4 còmics destacats. Fent clic a sobre ens porta a la secció del catàleg corresponent.

Etiquetes amb formats textuals: El menú global té etiquetes organitzades temàticament. Dona molta importància a les novetats.

Quan seleccionem un producte del catàleg ens trobem amb etiquetes textuals d’encapçalament (“obras del mismo autor; de la misma serie; del mismo autor...”) i a sota una etiqueta amb format d’icona de la portada dels productes relacionats. La pàgina web no té publicitat externa. Tots els banners son enllaços contextuals d’apartats de la pròpia web (la majoria) o de aplicacions, blogs, xarxes socials o revistes (tot pertany a la mateixa empresa editorial). Els enllaços contextuals estan localitzats a ambdues bandes del lloc. A la dreta ocupen tota la pàgina de dalt a baix i a l’esquerra es situen a sota del menú global. Son una mescla entre el format d’icones i el textual, ja que son banners (dibux+títol).

Sistemes de navegació

Integrats

Disposa d’un menú global amb els apartats descrits en els esquemes d’organització. El sistema de navegació global i contextual estan presents en tot moment.

Suplementaris

Tenim un Sidemap (Mapa del lloc), per navegar per categories.

PAC 2

4

2. AVALUACIÓ HEURÍSTICA DEL LLOC WEB

Identitat i consistència gràfica

Hi ha massa menús contextuals que rompen la línea gràfica i a més donen una falsa impressió de la magnitud del lloc web. Quan trobes la informació de contacte és molt completa. El contingut i les novetats/noticies tenen prou rellevància.

PROBLEMA (de més greu a més lleu)

-Hi ha excessius menú contextuals. Apareixen a l’encapçalament i ocupen també el marge dret i esquerra de la web. Fa que les dimensions i navegació per la pàgina web siguin confoses per l’usuari, que sigui molt més gran i ambigu del que en realitat és. Tantes imatges carreguen la pàgina i fa que es carregui massa lentament. -El logo de l’empresa és petit en comparació a la mida de l’encapçalament del lloc. La icona de “E-mail” de sota del logo de l’encapçalament ens porta directament al servei de correu electrònic predeterminat i ens obre un nou correu per a redactar i enviar al webmaster de la pàgina. El contacte de les diferents seccions de l’editorial es troba tan sols al peu de pàgina. No surt ni al sidemap. -Només hi ha presència de la xarxa social Facebook, amb un banner que romp la línea gràfica i no aporta res. - Hi ha dos arxius PDF per descarregar sense informació del que pesen. Un és el catàleg y l’altre es el pla editorial. -Degut a la gran quantitat d’enllaços contextuals hi ha una barreja de colors, tipografies, etc. Malgrat tot pertany a la pròpia empresa i no hi ha cap element extern de publicitat, no hi ha cohesió de línea gràfica.

SOLUCIÓ

-Deixaria només els externs a la pàgina web. Els enllaços contextuals de productes que es vulguin ressaltar els ficaria a l’slide, tenint en compte la veritable importància del que ressaltem. Això alleugeria el pes de la pàgina web i faria que carregui més ràpidament. -Faria l’slide una mica més petit, per donar lloc a un logo de l’empresa més gran. El logo en forma de carta ens hauria de portar a la secció contacte de l’empresa. Gairebé ningú vol contactar amb el webmaster d’una pàgina web, que sol ser algú que fa el manteniment d’aquesta i poc té a veure amb l’empresa, els productes, etc. - Posaria les xarxes socials sota el logo de l’empresa, a la capçalera. Simplement un botó amb el logo de la xarxa social corresponent que ens porti a la pàgina del perfil. - S’hauria d’afegir la informació dels PDF’s clarament al costat. P.ex.: Catàleg (3Mb) -Com que eliminaria tots els enllaços contextuals que fan que la web sigui ambigua s’eliminaria quest problema. Els que ja he dit que deixaria els re-dissenyaria seguint la línea gràfica, jugant amb el groc i negre.

PAC 2

5

Sistemes de navegació, organització i etiquetatge

EL sistema de navegació principal és estructura del model de base de dades. Quan estem veient la informació d’un còmic que està dins un catàleg sempre sabem on som, i podem anar navegar fàcilment sense emprar els botons del navegador. El menú principal està sempre al mateix lloc i és accessible en tot moment, però és confós. Es pot navegar per la base de dades o emprant el cercador o el sidemap. Aquest últim és millorable. El cercador és complet, poden cercar per autor/ col·lecció/sèrie, però hi faria algunes millores. No es distingeixen els enllaços visitats.

PROBLEMA (de més greu a més lleu)

-Botó Home duplicat. El Home és accessible des de la base de dades quan estem navegant. Però a més, hi ha un botó just a sota del logo que fa la mateixa funció. -El menú en general és confós. Massa opcions, menús desplegables, Subdivisions sense sentit i temes que tenen apartats per ells sols quan no semblen importants. -El cercador cerca només a la base de dades, no cerca a la web. És a dir, si busquem “Plan editorial”, el cercador no troba res. No té suggeriments del tipus “potser vol dir...”. Quan escrius quelcom al cercador no és suficient amb pitjar Enter perquè es faci la cerca. S’ha de clicar el botó BUSCAR. -Quan vas a la llista d’autors, sèries,... Hi ha enllaços buits. Sense informació. -Si el cercador no troba resultats no t’ho indica. L’usuari perd temps mirant la pantalla esperant que surti algun missatge. -La tenda no és real. Els redirecciona a una altra pàgina web, on ja sí, tenim un llistat dels productes que anem afegint al carro de compra.

L’etiquetatge està prou bé, però només està indexada la base de dades. El cercador no cerca a la pàgina web sencera, només a la base de dades de còmics i productes. La pàgina web és, en realitat, només un catàleg, ja que en el moment que volem comprar algun producte ens redirecciona a Normacomics.com. Les etiquetes del menú principal estan ben escollides i representen bé el vocabulari per al públic al que van dirigit. En general l’usuari no es perd. Així hi tot hi ha algunes coses que solucionaria:

SOLUCIÓ

-Eliminar botó Home de sota el logo de l’empresa de l’encapçalament que fa la mateixa funció. -Simplificar el menú principal. Això es veurà millor a una comparació en el benchmarking. -Indexar la resta de lloc web perquè buscant qualsevol informació que existeixi, ens la trobi quan la busquem. Afegir una cerca avançada i també funcions per facilitar la cerca quan no escrivim bé una paraula, que busqui quan cliquem Enter, etc. -Els enllaços que estiguin buits, que no apareguin a la llista. Que la base de dades les mantingui, però que no siguin visibles fins que s’hi afegeixi un producte relacionat amb la informació corresponent. -SI no troba resultats, que surti un missatge especificant que no s’ha trobat cap coincidència. -Importar la tenda de Norma Comics al lloc web per poder navegar pels catàlegs i comprar els productes sense canviar de lloc web.

PAC 2

6

Feedback, utilitat i estàndars web

A nivell de feedback està prou bé. Es pot comentar cada un dels productes per separat. Els formularis de premsa, etc., fallen bastant. Cada producte es pot compartir a les xarxes socials amb un sol botó.

PROBLEMA (de més greu a més lleu)

-Si analitzem la web per veure si compleix els estàndards web veiem que té 67 errors. -Analitzat l’accessibilitat veiem que hi ha algunes etiquetes buides. En total 13 errors greus. -Després de l'operació d'enviar algun formulari via web no surt cap indicatiu que s’hagi enviat correctament. A més, es pot introduir qualsevol caràcter a les caselles. -La utilitat de la web és dubtosa, fins que no navegues molt de temps no te n’adones que en realitat és un catàleg només. Si es vol comprar algun producte et redirecciona a una altra web. -Hi ha un sistema de valoració del còmics però no dels comentaris. -El feedback amb els responsables de l’editorial es millorable. Quan algú fa una pregunta sobre un producte no respon ningú. Hi ha productes on els usuaris tenen un mateix dubte però no hi ha cap resposta.

La utilitat en un primer moment no es capta bé. Costa bastant adonar-se que al cap i a la fi, la pàgina és només una base de dades amb els catàlegs del productes que tenen per vendre, les novetats, etc. Té bastants errors d’estàndards web. Només té 13 problemes greus d’accessibilitat, sobretot d’etiquetes.

SOLUCIÓ

-Corregir HTML. -Corregir els errors d’accessibilitat, donar nom a totes les etiquetes. Per a les novetats principals de l’slide posar-hi metadates i etiquetes. -Quan s’enviï el formulari correctament ha de sortir un missatge que posi que s’ha entregat bé. També es rectificarà el tipus de caràcters que sigui obligatori introduir a les caselles. El telèfon han de ser números, els mails han de tenir “@”... -O bé informar que és una pàgina d’informació general sobre l’editorial y els productes, o bé fer possible que sigui també una botiga on-line. -Donar la opció de valorar els comentaris, així els de més qualitat que apareguin a dalt de tot, perquè siguin més visibles i no s’hagi d’anar a la quarta pàgina de comentaris per trobar el que més valoració tingui per part dels usuaris. -Si el webmaster s’encarregués de respondre (al fil mateix) potser seria útil també per a altres usuaris i així no es repetirien els dubtes.

PAC 2

7

3. ESTUDI DE LA COMPETÈNCIA (BENCHMARKING)

Objectiu

Després de navegar durant una bona estona ens adonem que l’objectiu de la pàgina

és només donar informació sobre l’empresa, distribucions i catàleg. No ens incita a

comprar. Està molt bé que hi hagi tanta informació i que el catàleg sigui tan complet.

Però no consta res fer la pàgina rentable. Fer interessant el lloc web perquè els

clients comprin els productes que mostrem. A més buscarem la claredat i la

senzillesa. No pot ser que pàgines com Marvel o DC que a part de còmics tenen Tv,

pel·lícules, merchandising, etc., siguin més senzilles que una on només hi ha còmics.

Capçalera, Disseny, Menú principal i Navegació

La capçalera de Marvel (www.marvel.com) conté el logo i el menú principal. També

a la capçalera és on hi ha el cercador. Tot senzill i clar. A sota hi ha un slide amb les

principals novetats.

Una altra capçalera que segueix la mateixa tònica és Akira Comics

(www.akiracomics.com): Té el logo que fa de botó per tornar a la pàgina principal, el

menú a la dreta del logo, el cercador just a sota i l’slide amb les novetats.

S’ha de destacar que el menú principal d’Akira Comics no té “desplegables”, si no

que un cop a dintre hi ha un submenú amb les opcions.

El disseny és molt acurat, seguint en tot moment la línea gràfica amb els colors i

tipografies de la marca.

Això fa que la pàgina sembli més ordenada, menys saturada i que la navegació i

l’experiència d’usuari millori notòriament i que sigui més agradable i fluida.

Marvel té el menú a la dreta del logo y a sota un Slide (no automàtic) amb les novetats més rellevants.

Akira Comics empra el mateix sistema, però afegeix informació de contacte (un telèfon) i l’horari d’atenció als clients. Tot manté una línea gràfica que no desentona i els menús senzills faciliten la navegació i l’experiència d’usuari.

PAC 2

8

L’slide no automàtic de Marvel ens permet veure les novetats que nosaltres vulguem, ens dona llibertat

Amb el problema de l’excés de enllaços contextuals que teníem al lloc web de

Norma Editorials, he trobat una molt bona idea a la pàgina d’Akira Comics. El que

han fet és posar un bloc d’enllaços contextuals on se’n veuen 4, però amb unes

fletxes que fan possible que hi fiquem tots els enllaços que vulguem destacar sense

que ens ocupin els dos laterals de la web.

Solució ideal d’Akira Comics amb l’excés de menús contextuals.

PAC 2

9

Cercador, Atenció al client (Confiança i seguretat)

El cercador de Norma Editorials està prou bé, només tenia un parell d’errors. En gairebé tots els cercadors de pàgines web amb catàlegs de productes apareix un missatge quan no es troba cap coincidència amb el que hem buscat. Per exemple, un missatge d’un bon cercador (www.amazon.com, pàgina web de venta de productes de tot tipus, entre ells, llibres) Però té altres avantatges. Segons anem escrivint, ens dona suggeriments, cosa que evita que puguem escriure malament un autor estranger, per exemple. De totes formes, si ho escrivim malament, i no troba cap coincidència amb el que hem escrit, ens dóna algunes opcions de “potser ha volgut dir...”, amb una selecció dels millors resultats obtinguts:

Suggeriments per a una cerca errònia al cercador s’Amazon.

Missatge al cercador d’Amazon.

L’atenció al client és molt important. Especialment si es tracta d’una pàgina web on els clients compren productes a través de la nostra tenda on-line, on hem de tenir molta cura dels clients i fidelitzar-los perquè tornin i tinguin confiança en nosaltres. Una forma instantània millor que un correu electrònic és un número de telèfon de contacte. Ens demostra confiança i seguretat. És una forma directa de feedback amb els nostres usuaris. També és intel·ligent demostrar confiança ja que si un usuari té problemes a l’hora d’emprar la web o té dubtes sobre els productes, és important que obtingui una resposta immediata. La pàgina web d’Akira Comics té un número de telèfon a la capçalera on s’hi pot veure un horari d’atenció al client. També té un submenú a sobre del menú principal amb informació que genera confiança: Ajuda; Qui som; On estem; Despeses d’enviament; etc...

El lloc web Akira Comics té un horari d’atenció al client i un número de telèfon a la capçalera.

Detall del submenú superior.

En definitiva, la confiança i seguretat del client provenen d’una bona atenció al client i és un dels principals factors a tenir en compte si volem que el lloc web tingui èxit entre els usuaris.

PAC 2

10

Pressió a la venda, Trucades a l’acció, Social media

Si estem mostrant els nostres productes, el més normal és que els vulguem vendre als usuaris i clients. Per això és necessària una certa pressió de venda. S’ha de facilitar que l’usuari compri aquests productes i podem utilitzar varis mètodes: fent la web atractiva i fàcil d’emprar; finestretes flotants que ens recordin que podem anar afegint els productes a la nostra cistella, etc. A Akira Comics, quan passem amb el ratolí per sobre d’un producte, automàticament apareix una petita finestreta que flota juntament amb el cursor que ens mostra el títol i el preu (en gros) i ens facilita un botó per afegir el producte a la nostra cistella de compra. És una bona trucada a l’acció, instantània i que no molesta molt. A més el botó per comprar (tant per afegir un producte a la cistella, com per validar el total de la compra és vermell, que és un color que crida l’atenció.

Informació i botó flotant que apareix quan passem el ratolí per sobre un producte.

Quan afegim un producte a la nostra cistella ens apareix a dalt a la dreta. A la nostra cistella podem veure la informació dels productes que hem triat i el cost total. També podem veure que no ens hem registrat encara. El sistema ens obligarà a registrar-nos si encara no ho hem fet, o en tal cas, haurem d’ingressar amb el nostre nom d’usuari per poder completar la compra.

És important que malgrat no ens hàgim registrat ens deixi anar ficant productes a la cistella de compra, ja que al principi potser li fa mandra al client, però un cop amb la cistella plena i la comanda completada, no li quedarà més remei que fer-ho. És important que el procés de registre sigui curt, fàcil i sense problemes. També és important que els usuaris estiguin informats del que costaran les despeses d’enviament. Al lloc web d’Akira Comics és el primer que veiem quan entrem a la pàgina. Tots aquests detalls conformaran una bona experiència de compra.

A la dreta de la pàgina podem veure la nostra cistella amb la informació general d’aquesta. Podem veure a l’slide la informació de les despeses d’enviament.

PAC 2

11

Una bona trucada a l’acció perquè l’usuari fiqui productes a la cistella de compra de forma còmoda i ràpida és posar els preus en gran per demostrar confiança i un botó sempre a mà per afegir el producte a la cistella.

Botons en vermell per afegir a la cistella i els preus en gran.

Les xarxes socials son un dels fenòmens de l’era de la informació i son una forma molt eficaç de publicitat. A més a més, faciliten el “boca a boca” i això interessa molt a les empreses ja que la gent té més confiança amb un amic seu que li recomani una pàgina o un producte que si no pas li recomana un desconegut.

Detall de les xarxes socials.

A la pàgina web de Marvel a la barra lateral dreta, tenim a baix de tot el típic pack de logos de xarxes socials per a compartir i accedir als perfils de l’empresa a les xarxes socials.També és interessant que cada producte es pugui comprar d’aquesta forma.

A la dreta podem veure les diferents xarxes socials on podem seguir a Marvel.

PAC 2

12

BIBLIOGRAFIA

Enllaços en línea:

www.normaeditorial.com

www.marvel.com

www.normacomic.com

www.amazon.com

www.akiracomics.com

http://www.ricardotayar.com/2012/02/06/acciones-compra-100-ecommerces/

http://www.internetadvantage.es/blog/seo/mejores-llamadas-accion/

http://www.nosolousabilidad.com/articulos/heuristica.html

http://marketing-on-line.blogspot.com.es/2010/03/llamadas-la-acccion-como-crearlas.html

http://www.planetadeagostini.es/coleccionables/comics.html

http://louisrosenfeld.com/home/bloug_archive/000286.html

http://olgacarreras.blogspot.com/2012/03/estandares-formales-de-usabilidad-y-su.html

http://www.useit.com/papers/heuristic/

http://www.jmarquez.com/documentos/jm_checklist.pdf

http://www.nosolousabilidad.com/articulos/heuristica.html

http://www.jmarquez.com/documentos/jm_checklist.pdf

http://galinus.com/es/articulos/principios-diseno-de-interaccion.html

http://argus-acia.com/white_papers/evaluating_ia.html

http://usability.gov/guidelines/guidelines_book.pdf

http://olgacarreras.blogspot.com/2012/03/estandares-formales-de-usabilidad-y-su.html

PAC 2

13

Alba Vidal Mas – Abril 2012

Reconeixement - NoComercial - CompartirIgual