Anàlisi components d’arquitectura.

Avaluació.

Benchmarking per a escriptori i mòbil

Arquitectura de la Informació Pere Amengual Gomila

PAC 2 - Abril 2014

www.artehabitat.com

2

Components del “site” ......................................................................................................................................................................................................................................... 3

Avaluació heurística

Identitat .............................................................................................................................................................................................................................................................. 4

Contingut ........................................................................................................................................................................................................................................................... 5

Navegació .......................................................................................................................................................................................................................................................... 6

Etiquetatge ......................................................................................................................................................................................................................................................... 9

Gràfics web ....................................................................................................................................................................................................................................................... 10

Cerca ................................................................................................................................................................................................................................................................... 10

Feedback ........................................................................................................................................................................................................................................................... 11

Multidispositiu ................................................................................................................................................................................................................................................. 11

Benchmarking ....................................................................................................................................................................................................................................................... 12

Bibliografia i Referències gràfiques ............................................................................................................................................................................................................. 19

Índex

www.artehabitat.com

3

La web artehabitat.com fa servir un esquema d’organització híbrid, ja que per una part ens trobem un esquema ambigu, tant al menú princi-pal com en el menú vertical inferior del home (temàtics o per categori-es) i també al catàleg; i per una altra part, exactes als sub-sites “tenda online” (per ordre alfabètic, de preu, etc...) i “bloc” (cronològic).

La estructura d’organització a nivell de plana principal és principalment jeràrquica descendent, poc profunda, ja que des de la plana principal es pot accedir als diferents nivells de contingut que, en alguns casos, ens porten a sub-sites molt poc integrats amb la estructura principal.

Als sub-sites esmentats hi trobem tres tipus d’estructures de model de bases de dades. La tenda online presenta un model de base de da-des que permet filtrar per tipus de producte, marques i ordenar resul-tats. El bloc també presenta una estructura de base de dades, encara que sense cap connexió ni amb la tenda ni amb el site principal, fins i tot es troba allotjada en un servidor i domini diferents. El catàleg pre-senta una base de dades amb passis de fotografies segons diferents categories.

Les folksonomies, enteses com categoritzacions col·lectives, no es tro-ben present al lloc, ja que els usuaris no comparteixen les categorit-zacions. Encara que en el cas de les categoritzacions presents a “lo más buscado” de la tenda online s’hagués establert un algorisme per implementar-les, aquest fet no implica que els usuaris tenguin capaci-tat per gestionar-les explícitament.

Les etiquetes que es fan servir al lloc objecte d’estudi són principal-ment de tipus textual, com en el cas dels termes d’índex de les cate-gories de productes de la tenda online. El mapa de la web de la tenda online i el menú principal ens proporcionen exemples d’etiquetes dins el sistema de navegació. També es troben algunes etiquetes de tipus enllaços contextuals, principalment en les categories de la tenda on-line, en alguns casos acompanyades per una imatge descriptiva, com en els casos dels articles de la tenda, categories del menú horitzontal de la plana principal i articles destacats de la plana principal.

Només en alguns casos excepcionals, com el canvi d’idioma de la tenda online, icona home de la plana principal, les xarxes socials a la plana principal i el bloc, es fan servir etiquetes purament icòniques o visu-als.

Els sistemes de navegació integrats són un de global, conformat per la barra de navegació superior, també es troben a les pàgines “empresa” i “nuestro trabajo” sistemes de navegació local, amb opcions especí-fiques. També podem trobar una navegació contextual arreu del lloc web. Altres sistemes de navegació complementaris són el mapa de lloc que es troba a la tenda online (i que malauradament no dóna abast a la totalitat del lloc). No es troben índexs ni guies de navegació.

Components del “site”

www.artehabitat.com

4

Avaluació heurística

Identitat

Element de text identificador inexistent (Error greu)

No existeix cap identificador de text que faci referència al nom de la empresa ARTE HÁBITAT a la pàgina principal. A la part inferior i molt mal posicionades existeixen variacions tals com el nom fiscal i el nom del domini, que no la identifiquen clarament.

Acció de millora proposta: Incloure un identificador de text amb el nom ARTE HÁBITAT a la part central superior de la pàgina

Absència dels colors corporatius (Error poc greu)

El color rosa corporatiu principal present al logotip i a la cartelleria i senyalització de la empresa no es troba gairebé present al lloc web.

Acció de millora proposta: Fer servir el color per al fons del menú superior principal i augmentar les mides de la seva caixa.

Element gràfic imagotip indefinit i poc rellevant (Error poc greu)

A la plana principal es poden localitzar dues versions de la marca: un logotip petit només amb les inicials i una altra imagotip amb un símbol gràfic i el nom complet. Cap dels dos es presenta en posició i/o mides rellevants.

Acció de millora proposta: Fer servir l’imagotip en una mida cor-recta i en la posició superior esquerra de la pàgina.

www.artehabitat.com

5

Contingut

Selecció de continguts poc rellevants i/o duplicats (Error greu)

Els continguts dels apartats “empresa” i “nuestro trabajo” són poc re-llevants i proporcionen poca informació a l’usuari. Els continguts de les seccions “tienda online” i “catálogo” es solapen, ja que el primer inclou per definició al segon. Els continguts de la secció “últimas noti-cias” de la pàgina principal es dupliquen amb els existents a la secció “noticias”.

Acció de millora proposta: Fusionar els continguts de les secci-ons proposades, eliminant duplicitats.

Poca rellevància del contingut de la tenda-catàleg (Error greu)

La secció tenda-catàleg té poca presència en la pàgina principal. Les seves categories principals no es visualitzen ni s’intueix la seva exis-tència a la pàgina principal.

Acció de millora proposta: El menú lateral ha de permetre la navegació dins el catàleg de productes disponibles substituint

la classificació incompleta i etiquetada erròniament amb criteris de màrqueting promocional que no ajuden al client a trobar el que cerca per una classificació coherent de les famílies de productes dins tot el lloc web.

Arxius adjunts sense identificar (Error poc greu)

No es pot saber el seu tipus ni el seu pes ni els requeriments del pro-gramari abans de descarregar-los.

Acció de millora proposta: Substituir el text “Haz click en la ima-gen para ver el catálogo completo” per una descripció correcta

de l’arxiu pdf i el seu pes. També es pot optar per eliminar comple-tament l’existència d’aquest catàleg en pdf ja que la tenda online hauria de cobrir aquesta funcionalitat.

www.artehabitat.com

6

Navegació

Sistemes de navegació local dispars (Error molt greu)

Els únics sistemes de navegació local coherents són els de les pà-gines “empresa” i “nuestro trabajo”; els altres no se’ls hi semblen i ens trobem, per exemple, que el bloc de notícies i la tenda presenten me-nús laterals completament diferents, dificultant la navegació i l’accés a la informació rellevant.

Acció de millora proposta: Redissenyar completament les pà-gines esmentades per aconseguir uns sistemes de navegació

local homogenis.

Absència d’elements de navegació que indiquin la posició actual (Error greu)

La pàgina “empresa” indica amb la seva etiqueta en negreta que és la pàgina actualment seleccionada. Malauradament és la única que ho fa. Només la tenda online presenta un sistema de “breadcrumbs”.

Acció de millora proposta: Modificar el codi CSS del menú de navegació a totes les pàgines per a que el comportament de la

pàgina “empresa” sigui present a tot el lloc. Implementar el sistema de “breadcrumbs” a tot el lloc web.

Menú principal a la pàgina principal en posició incorrecta (Error poc greu)

El menú principal es desplaça en aquesta pàgina de forma diferent a la resta del lloc web.

Acció de millora proposta: Modificar el codi CSS per a que es des-placi de la mateixa manera que a les altres pàgines.

Etiqueta per accedir a la pàgina principal duplicada (Error poc greu)

Al menú principal hi figuren dues maneres de desplaçar-se a la pàgina d’inici: l’etiqueta textual “inicio” i la icona amb el logotip de les inicials.

Acció de millora proposta: Eliminar-ne una. Si s’opta per fer ser-vir un símbol gràfic, és preferible que sigui un universalment re-

conegut per realitzar aquesta funció, com per exemple una icona que representi una casa.

www.artehabitat.com

7

El menú principal desapareix dins el blog (Error molt greu)

Quan s’accedeix a la pàgina de “noticias” el menú principal desapa-reix (la pàgina esmentada presenta un disseny diferent i fins i tot un altre nom de domini).

Acció de millora proposta: Integrar la secció de notícies amb la de “últimas noticias” de la pàgina principal, fent servir el ma-

teix disseny, i nom de domini

El menú principal canvia de contingut i forma en accedir a la pàgi-na de la tenda online (Error greu)

El menú de la pàgina de la tenda online presenta les etiquetes “pro-ductos/empresa/nuestro trabajo/catálogo/noticias/contacto” i el de la pàgina principal “inicio/empresa/nuestro trabajo/tienda online/contacto/noticias /catálogo”.

Acció de millora proposta: Modificar l’HTML del menú de la ten-da online per deixar-lo igual que el de la pàgina principal.

A la tenda online no figura cap mitjà de retornar a la pàgina d’inici (Error molt greu)

El menú de la pàgina de la tenda online només presenta les etiquetes “productos/empresa/nuestro trabajo/catálogo/noticias/contacto”.

Acció de millora proposta: Modificar l’HTML del menú de la tenda online per incloure aquesta opció.

El mapa de lloc i la opció de cerca només figuren a la pàgina de la tenda online (error greu)

La tenda online ha estat programada amb codi modular que incorpora moltes més funcions que la resta de les pàgines, concretament, el mapa de lloc i la opció de cerca.

Acció de millora proposta: Plantejar el redisseny total del lloc fent servir només la plantilla de comerç electrònic que es fa ser-

vir per la pàgina de la tenda online, per a tot el lloc web.

www.artehabitat.com

8

Els enllaços visitats no presenten cap distinció gràfica (Error poc greu)

Quan s’ha visitat una pàgina, el color del seu enllaç no canvia per reflectir-ho.

Acció de millora proposta: Canviar el codi CSS per implementar aquesta característica.

www.artehabitat.com

9

Etiquetatge

Mida de les etiquetes arbitrària i no jerarquitzada (Error poc greu)

A la tenda online, per exemple, algunes etiquetes com “¿Tiene du-das? No se preocupe, contacte con nosotros.” i “ELIJA EL ACABADO CLICANDO SOBRE LA IMAGEN” amb el marcatge HTML <h2> presen-ten la mateixa mida, 18 px, que la etiqueta principal amb el nom del producte i amb el marcatge HTML <h1>.

Acció de millora proposta: Redissenyar el CSS amb la finalitat de que els elements HTML <h1> presentin una mida major que

els elements <h2>.

Incoherències en l’etiquetatge de les categories de productes (Er-ror greu)

A la tenda online les categories de productes són “salón/sofás/auxi-liar/etc...” i en canvi al catàleg són “salones/sofás/dormitorios/etc...”.

Acció de millora proposta: Establir un vocabulari controlat que permeti controlar aquest tipus de situacions.

Localització incompleta (Error molt greu)

A la tenda online, la localització (traducció als diversos idiomes oferts) es limita a les opcions preestablertes en el programari del mò-dul, entre les que destaquen les etiquetes dels menús de navegació. No s’han traduït ni les categories dels productes ni el nom dels pro-ductes.

Acció de millora proposta: realitzar una localització completa i supervisar que els usuaris poden fer servir el lloc web en la

seva totalitat sense mescla d’idiomes.

www.artehabitat.com

10

Gràfics web

Galeria d’imatges amb mides arbitràries (Error poc greu)

Les imatges de la galeria de la selecció de productes de la pàgina principal presenten mides dispars, el que també afecta a la disposició de les seves etiquetes

Acció de millora proposta: Redimensionar les imatges abans de pujar-les a la galeria assegurat-se de que tenen les mides cor-

rectes. També cap la possibilitat de modificar el codi CSS.

Composició gràfica de la pàgina principal massa carregada (Error greu)

A la pàgina principal es troben fins a un total d’onze fotografies, sis de les quals es troben solapades sense cap tipus de contrast gràfic amb una imatge principal que ocupa la meitat superior de la pantalla. Les imatges del menú vertical són petites i presenten espais grans que no es poden veure amb claredat.

Acció de millora proposta: Si es volen mostrar molts productes i ambients a la pàgina principal es pot establir un únic slideshow

de mida grossa que fins i tot pot substituir la imatge gran que actual-ment figura a la part superior.

Cerca

Cercador només a la tenda online (Error molt greu)

Degut a que la tenda online ha estat realitzada amb un programari modular diferenciat del que s’ha fet servir per la resta del lloc web, presenta trets positius que malauradament no es poden aplicar a la resta de pàgines.

Acció de millora proposta: Plantejar el redisseny total del lloc fent servir només la plantilla de comerç electrònic que es fa

servir per la pàgina de la tenda online, per a tot el lloc web..

www.artehabitat.com

11

Feedback

Opcions limitades de navegació després del formulari de contacte (Error greu)

Després d’introduir les dades al formulari de contacte, es presenten dis enllaços amb opcions a retornar només a dos llocs predeterminats etiquetats com “regresar a artehábitat” i “catálogo artehábitat”, res-pectivament. Si venim de la tenda, no ens dóna opció de retornar-hi.

Acció de millora proposta: Després d’introduir les dades, un avís pot donar les gràcies i es pot retornar automàticament a la pà-

gina des d’on hem accedit al formulari de contacte.

Multidispositiu

Diferències entre la tenda online i la resta de la web (Error molt greu)

La tenda online presenta una navegació correcta en dispositius mò-bils, fent servir correctament les tècniques de disseny web adaptable (responsive design). Desafortunadament, la resta del lloc web no fa servir la plantilla del codi de la tenda online.

Acció de millora proposta: Plantejar el redisseny total del lloc fent servir només la plantilla de comerç electrònic que es fa

servir per la pàgina de la tenda online, per a tot el lloc web..

www.artehabitat.com

12

Benchmarking

Segons els estudis realitzats per el Nielsen Norman Group(1)

els usuaris de la web passen el 69% del seu temps mirant

la meitat esquerra; i també un 80,3% a la part superior.

Per marcar clarament la identitat de la empresa cal situar

en aquestes posicions el logotip i el nom de la empresa.

Aquest disseny ens presenta el nom de la empresa per du-

plicat, aprofitant l’espai negatiu que queda a la dreta de la

imatge.

El color també és un tret important de la imatge corporativa

que cal tenir en compte.

http://www.ballarddesigns.com/

http://www.livingspaces.com/

www.artehabitat.com

13

Totes aquestes pàgines presenten elements de navegació que ens in-

diquen clarament quina és la posició actual. El sistema que es fa servir

es coneix habitualment amb el nom de “molles de pa” o “fil d’Ariadna”

(“breadcrumbs” en anglès).

També fan servir el principi de redundància en aquest aspecte tan impor-

tant, com es pot veure en la repetició de sistemes per indicar la posició

actual en la que es troba l’usuari: opcions de navegació seleccionades en

negreta i/o un altre color i etiquetes addicionals sobre les fotografies.

Navegació

http://www.serenaandlilly.com/

http://www.allmodern.com/

http://www.bludot.com/

www.artehabitat.com

14

Els exemples mostren pàgines principals en les que queda ben establert

que el contingut és el de una tenda de mobles. No hi ha possible confusió

amb una pàgina corporativa o d’altra finalitat. L’usuari pot veure d’un sol

cop d’ull què és el que se li ofereix i quins continguts pot esperar.

Aquesta claredat en la exposició dels continguts es pot aconseguir mit-

jançant una adequada selecció de les principals etiquetes de navega-

ció, una clara exposició dels productes i un disseny gràfic sense recàr-recs innecessaris i, fins i tot, preferiblement minimalista.

Contingut

http://www.jonathanadler.com/http://www.zarahome.com/

www.artehabitat.com

15

Quan el nombre de productes és molt gran, unes bones opcions de

filtratge del catàleg de productes ajuden a l’usuari a trobar més ràpi-

dament el que cerca.

Cal pensar en aquest filtratge d’igual manera que ho faria un depen-

dent a un entorn físic. Una vegada que ja ha decidit la categoria, el

client possiblement voldrà considerar només els articles més nous,

les ofertes, els d’una marca determinada, els d’un determinat nivell

de preus i, fins i tot, els d’uns colors determinats.

Filtratge de llistes de productes

http://www.amazon.com/

http://www.amazon.com/

http://www.myhabit.com/

www.artehabitat.com

16

Fent servir cookies es pot saber si un usuari visita la tenda per primer

cop, i en tal cas, se li pot oferir una informació especial que pot consistir

en una invitació a registrar-se a la llista de correu, un avís geolocalit-

zat de disponibilitat geogràfica dels productes o despeses d’enviament o,

senzillament, les ofertes de la temporada.

Ús dels banners en la primera visita

http://www.jcpenney.com/http://www.furniture.com/

http://www.zgallerie.com/

www.artehabitat.com

17

Un catàleg que presenti a primera vista imatges grans i de mida homogènia de tots els

productes facilita en gran manera trobar el moble adequat. No oblidem que es tracta d’ob-

jectes que seran escollits amb un criteri no tan sols funcional, sinó també estètic.

Catàleg visual

http://www.livingspaces.com/

Scroll vertical

Als inicis de la web, els usuaris no havien interioritzat la navegació de grans quantitats

d’informació fent servir les tècniques de desplaçament, o scroll. Avui en dia, algunes pà-

gines fan servir un disseny basat en la possibilitat de realitzar el recorregut per una única

pàgina realitzant scroll tant en direcció vertical com horitzontal. Aquesta tècnica de nave-

gació s’adapta especialment bé a la navegació amb dispositius multi-tàctils encara que, per

contra, requereix de connexions relativament ràpides que puguin carregar en poc temps un

gran nombre d’imatges.

www.artehabitat.com

18

La interfície de cerca ha d’estar situada de forma convenient i fàcil de trobar. Una simple caixa amb un botó que indiqui la paraula “cerca” ha

de ser suficient i satisfer la major part de les necessitats dels usuaris.

També és important que els resultats de la cerca no es limitin a cercar

una correlació literal a l’inici del nom o la descripció del producte, ja que

a vegades l’usuari pot voler iniciar la cerca per una de les característi-

ques o atributs del producte. Per aconseguir aquesta finalitat caldrà

implementar una base de dades exhaustiva que reflecteixi el màxim de

qualitats de cada producte.

Interfície de cerca

http://www.wayfair.com/

www.artehabitat.com

19

Bibliografia i fonts consultades

Referències bibliogràfiques i en línia

(1) Jacob Nielsen. Horizontal attention leans left. [en línia] [data de consulta: 4 d’Abril del 2014]. Disponible en <http://www.nngroup.com/articles/horizontal-attention-leans-left/>

-Peter Morville & Louis Rosenfeld. Arquitectura de la información per al World Wide Web. FUOC, 2012. PID 00184040

-Abby Covert. Does it have legs? Information architecture heuristics for interaction designers. [en línia] [data de consulta: 4 d’Abril del 2014]. Disponible en <http://www.slideshare.net/AbbyCovert/information-architecture-heuristics>

-Louis Rosenfeld. Information Architecture Heuristics. [en línia] [data de consulta: 4 d’Abril del 2014]. Disponible en < http://louisrosenfeld.com/home/bloug_archive/000286.html>

Imatges

Totes les imatges i les gràfiques han estat extretes de les pàgines web objecte d’estudi, excepte les següents:

(cc) Autors STyx, Producer (talk). top ten most user edited articles [en línia] https://commons.wikimedia.org/wiki/File:Top_ten_most_edited_ar-ticles.png