Está en la página 1de 16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Nmero 10, 2012


Nmero 9, 2011

Mapa web

Nmero 8, 2010
Nmero 7, 2009

Inicio

English
Diseo
Web Centrado en el Usuario: Usabilidad y
Arquitectura de la Informacin

Nmero 6, 2008
Nmero 5, 2007
Nmero 4, 2006
Nmero 3, 2005
Nmero 2, 2004
Nmero 1, 2003
Entrevistas
Eventos
Crditos
Instrucciones
autores

Autores: Yusef Hassan, Francisco J. Martn Fernndez y Ghzala Iazza


(Universidad de Granada)
Citacin recomendada: Yusef Hassan & Francisco J. Martn Fernndez & Ghzala
Iazza. Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la
Informacin [en linea]. "Hipertext.net", nm. 2, 2004. <http://www.hipertext.net>
1. Introduccin
2. Usabilidad y accesibilidad
3. Arquitectura de la informacin
4. Diseo web centrado en el usuario
5. Planificacin
5.1. Diseo
5.1.1. Modelado del usuario
5.1.2. Diseo conceptual
5.1.3. Diseo visual y definicin del estilo
5.1.4. Diseo de contenidos
5.2. Prototipado
5.3. Evaluacin
5.3.1. Mtodo por inspeccin: evaluacin heurstica
5.3.2. Mtodo de test con usuarios
5.4. Implementacin y lanzamiento
5.5. Mantenimiento y seguimiento
5.5.1. Opiniones de los usuarios
5.5.2. Comportamiento del usuario y uso del sitio
6. Conclusiones
7. Bibliografa

1. I ntroducci n
La consecucin de los objetivos perseguidos a travs de la puesta a disposicin del
pblico de cualquier aplicacin web est condicionada por la satisfaccin del
usuario final.
Los factores o atributos de calidad de una aplicacin o sitio web que influirn en
dicha satisfaccin podemos clasificarlos en aquellos relacionados con: la calidad y
utilidad de los contenidos; la calidad del servicio y asistencia del proveedor; y la
calidad del diseo de la aplicacin, atributo de calidad sobre el que versa el
presente trabajo.
La importancia del diseo de la aplicacin se basa en que ste ser el que modele
la interaccin entre usuario y aplicacin, y por tanto posibilitar o no la
consecucin de los objetivos perseguidos por el usuario (encontrar informacin,
comprar, comunicarse, aprender...).
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

1/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Tomemos como ejemplo el usuario que intenta completar una tarea de compra en
un sitio web de comercio electrnico. Del correcto diseo del sitio depender que el
usuario consiga finalmente su objetivo (y consecuentemente el proveedor tambin),
o que por el contrario, frustrado por la dificultad de uso del sitio web, decida
abandonarlo en busca de otro donde llevar a cabo la compra sea ms fcil.
Es fcil inferir que un buen diseo deber ser comprensible, fcil de usar,
amigable, claro, intuitivo y de fcil aprendizaje para el usuario. Para poder asegurar
que un diseo cumple con estos requisitos no basta simplemente con una actitud
emptica del diseador durante el desarrollo de la aplicacin; es imprescindible la
adopcin por parte de ste de tcnicas, procedimientos y mtodos que aseguren
empricamente la adecuacin del diseo a las necesidades, habilidades y objetivos
del usuario.
En este artculo abordaremos cmo disear aplicaciones web usables y accesibles a
travs de la aplicacin del conjunto de tcnicas y procedimientos englobados bajo
el marco metodolgico conocido como Diseo Centrado en el Usuario. La estructura
seguida en el artculo ser: (2) Definicin y explicacin de los conceptos de
usabilidad y accesibilidad; (3) Introduccin a la Arquitectura de la Informacin; (4)
Propuesta de aplicacin del Diseo Centrado en el Usuario en el contexto del
desarrollo Web, detallando procedimientos, tcnicas, mtodos y recomendaciones
de diseo; (5) Conclusiones y (6) Bibliografa.

2. Usabi l i dad y accesi bi l i dad


La usabilidad - anglicismo que significa "facilidad de uso" - como indican Bevan,
Kirakowski, y Maissel (1991) parece tener su origen en la expresin "user friendly",
que es reemplazada por sus connotaciones vagas y subjetivas.
Numerosos autores han propuesto diversas definiciones de usabilidad,
normalmente a travs de la enumeracin de los diferentes atributos o factores
mediante los que puede ser evaluada, dependiendo finalmente cada definicin del
enfoque con el que pretende ser medida (Folmer, Bosch; 2003).
Tomaremos para este trabajo la definicin ms extendida, que es la ofrecida por la
ISO , y que define usabilidad como el " grado de eficacia, eficiencia y satisfaccin
con la que usuarios especficos pueden lograr objetivos especficos, en contextos
de uso especficos ".
En la definicin podemos observar que la usabilidad se compone de dos tipos de
atributos:
Atributos cuantificables de forma objetiva: como son la eficacia o nmero de
errores cometidos por el usuario durante la realizacin de una tarea, y
eficiencia o tiempo empleado por el usuario para la consecucin de una tarea.
Atributos cuantificables de forma subjetiva: como es la satisfaccin de uso,
medible a travs de la interrogacin al usuario, y que tiene una estrecha
relacin con el concepto de Usabilidad Percibida.
Como se indica en la definicin, la usabilidad de una aplicacin debe ser entendida
siempre en relacin con la forma y condiciones de uso por parte de sus usuarios,
as como con las caractersticas y necesidades propias de estos usuarios. Un diseo
no es en s mismo usable: " lo es para usuarios especficos en contextos de uso
especficos ".
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

2/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Pretender que una aplicacin web sea usable independientemente de quin y cmo
la use se corresponde ms con una visin o enfoque universalista de la usabilidad
(en ocasiones necesaria), que con una visin realista y prctica. Esto es debido a
que normalmente toda aplicacin se disea con la intencin de satisfacer las
necesidades de una audiencia concreta y determinada, por lo que ser ms usable
cuanto ms adaptado est su diseo a esta audiencia especfica, y por tanto menos
lo est para el resto de personas.
El concepto de usabilidad puede ser definido, adems de como atributo de calidad
de una aplicacin, consecuentemente, como disciplina o enfoque de diseo y
evaluacin. Se suele hablar entonces de Ingeniera de la Usabilidad - conjunto de
fundamentos tericos y metodolgicos que aseguren el cumplimiento de los niveles
de usabilidad requeridos para la aplicacin-.
Un concepto ntimamente ligado al de usabilidad es el de accesibilidad. ste ya no
se refiere a la facilidad de uso, sino a la posibilidad de acceso. En concreto a que el
diseo, como prerrequisito imprescindible para ser usable, posibilite el acceso a
todos sus potenciales usuarios, sin excluir a aquellos con limitaciones individuales
- discapacidades, dominio del idioma,... - o limitaciones derivadas del contexto de
acceso - software y hardware empleado para acceder, ancho de banda de la
conexin empleada, etc.- (Hassan Montero, Martn Fernndez; 2003b)
Se da la paradoja de que mientras que un diseo usable requiere delimitar a su
audiencia potencial con el fin de disear para lo concreto, un diseo accesible
implica la necesidad de disear para la diversidad y heterogeneidad de necesidades
de acceso presentadas por esta audiencia especfica.
Cuando la audiencia para la que se disea es muy amplia y presenta necesidades
de acceso muy diferentes, normalmente se hace necesaria la puesta a disposicin
de varias versiones del diseo o un diseo adaptable, como son las conocidas
"versiones solo texto" o versiones en varios idiomas.

3. Arqui tectura de l a i nformaci n


Aunque para la mayora de los usuarios "la interfaz es la aplicacin" puesto que es
la parte que ven y a travs de la cual interactan (Hartson; 1998) , debemos
entender que la usabilidad de la aplicacin depende no slo del diseo del interfaz,
sino tambin de su arquitectura - estructura y organizacin -, en otras palabras, del
componente no visible del diseo.
Folmer y Bosch (2003) estudian este hecho en aplicaciones software concluyendo
que el diseo a nivel de arquitectura tiene una gran influencia en la usabilidad del
sistema. En el entorno Web, que es el que nos ocupa en este artculo, la
Arquitectura de la Informacin (AI) es un enfoque de diseo que ha cobrado
especial relevancia estos ltimos aos por esta misma razn.
La AI es definida como el arte y la ciencia de organizar espacios de informacin con
el fin de ayudar a los usuarios a satisfacer sus necesidades de informacin. La
actividad de organizar comporta la estructuracin, clasificacin y rotulado de los
contenidos del sitio web (Toub; 2000).
Hay dos aspectos de la AI que merece la pena resaltar: La Recuperacin de la
Informacin : El objetivo principal de definir una correcta arquitectura de
informacin es facilitar al usuario la recuperacin de informacin. Esto se consigue
por un lado posibilitando que el usuario pueda encontrar informacin - diseo y
definicin de ndices, clasificaciones, taxonomas y sistemas de recuperacin de
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

3/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

informacin o sistemas de bsqueda en el sitio web -, y por otro lado posibilitando


que cada elemento de informacin pueda ser encontrado - descripcin a travs de
metadatos y optimizacin del sitio para buscadores-. Este segundo caso es lo que
se denomina "findability", "encontrabilidad" o visibilidad.
El diseo a nivel conceptual : Las tcnicas propias de la AI, dentro del ciclo de vida
del desarrollo del sitio, se ubican en fases de diseo conceptual. Las fases de
diseo visual estn, en cambio, copadas por tcnicas de Ingeniera de la
Usabilidad, Diseo de Interfaces y Diseo de Informacin.

4. Di seo web centrado en el usuari o


Para asegurar empricamente que un sitio cumple con los niveles de usabilidad
requeridos, el diseador necesita de una metodologa, de tcnicas y procedimientos
ideados para tal fin.
En este trabajo proponemos la aplicacin del marco metodolgico conocido como
Diseo Centrado en el Usuario o User-Centered Design (Norman, Draper; 1986)
adaptndolo a las caractersticas propias del desarrollo de aplicaciones web.
El Diseo Web Centrado en el Usuario se caracteriza por asumir que todo el
proceso de diseo y desarrollo del sitio web debe estar conducido por el usuario,
sus necesidades, caractersticas y objetivos. Centrar el diseo en sus usuarios (en
oposicin a centrarlo en las posibilidades tecnolgicas o en nosotros mismos como
diseadores) implica involucrar desde el comienzo a los usuarios en el proceso de
desarrollo del sitio; conocer cmo son, qu necesitan, para qu usan el sitio; testar
el sitio con los propios usuarios; investigar cmo reaccionan ante el diseo, cmo
es su experiencia de uso; e innovar siempre con el objetivo claro de mejorar la
experiencia del usuario.
El proceso de Diseo Web Centrado en el Usuario propuesto en este trabajo se
divide en varias fases o etapas, algunas de las cuales tienen carcter iterativo.
Sirva como aproximacin el siguiente esquema:

http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

4/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Como indica el esquema, las fases de "diseo", "prototipado" y "evaluacin" son


cclicas e iterativas. Esto quiere decir que todo lo que se disee debe ser
constantemente evaluado a travs de su prototipado, para as poder corregir
errores de usabilidad desde los primeros momentos del desarrollo. Evaluar el sitio
web nicamente una vez finalizado su desarrollo hara mucho ms costosa la
reparacin de errores de usabilidad, ya que siempre es ms econmico reconducir
un diseo que redisear completamente el sitio.
Los siguientes apartados de este trabajo se estructuran siguiendo este mismo
esquema del proceso de diseo.

5. Planificacin
Todo proyecto debe comenzar por una correcta planificacin. En esta etapa se
identifican los objetivos del sitio, as como las necesidades, requerimientos y
objetivos de la audiencia potencial.
Confrontando esta informacin se definen los requerimientos del sitio web, entre
los que podemos contar requerimientos tcnicos (back-end y front-end), recursos
humanos y perfiles profesionales necesarios, y adecuacin del presupuesto
disponible.
Se trata, pues, de establecer un equilibrio entre lo que puede ofertar el proveedor y
lo que necesita el usuario. El sitio web - sus contenidos y diseo - debe cumplir
precisamente este cometido: servir de medio para la consecucin de objetivos por
parte de proveedor y usuario.
El diseador debe obtener informacin precisa tanto de las necesidades y objetivos
del proveedor como del usuario. En el primer caso, mediante entrevistas y
reuniones con los responsables del sitio, ser relativamente fcil obtener dicha
informacin. Ms dificultoso, pero al mismo tiempo ms importante, es obtener
esta informacin del usuario: Qu necesita, cules son sus objetivos, cmo se
comporta y acta, cul ser el contexto de uso y cmo afectar a la interaccin,
experiencia y conocimientos previos,...
La respuesta a estas preguntas se resuelve estudiando a la audiencia a travs de
mtodos de indagacin. stos engloban mtodos de aproximacin contextual,
estudios de campo o etnogrficos, mtodos de aproximacin por grupos y mtodos
de aproximacin individual (encuestas, cuestionarios y entrevistas). Cuanto ms
conozcamos a la audiencia, ms adaptado ser el diseo y ms satisfactoria la
experiencia del usuario final.
Como se puede ver, la etapa de planificacin se basa casi completamente en la
recogida, anlisis y ordenacin de toda la informacin posible, con el objetivo de
tener una base slida sobre la que poder tomar decisiones de diseo en las
siguientes etapas del proceso.
5.1. Diseo
La etapa de Diseo es el momento del proceso de desarrollo para la toma de
decisiones acerca de cmo disear o redisear, en base siempre al conocimiento
obtenido en la etapa de planificacin, as como a los problemas de usabilidad
descubiertos en etapas de prototipado y evaluacin.
5.1.1. Modelado del usuario
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

5/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Toda la informacin obtenida de los estudios de usuarios realizados en la anterior


fase de planificacin debe servir como base para comenzar el diseo, pero para ello
se debe resumir y sintetizar dicha informacin.
Este paso se denomina modelado del usuario y consiste en la definicin de clases o
perfiles de usuarios en base a atributos comunes. Los atributos sobre los que se
har la clasificacin dependen de la informacin que se tenga de la audiencia, pero
normalmente se tratarn de atributos tales como necesidades de informacin,
condiciones de acceso, experiencia y conocimientos.
Mediante esta tcnica, el diseador tendr en mente para quin disea, qu espera
encontrar el usuario y en qu forma. El diseo del sitio web debe estar orientado al
usuario, organizando y estructurando la informacin segn los modelos definidos
de usuarios.
El problema de esta tcnica de modelado de usuario es que cuando la audiencia es
demasiado extensa y heterognea, la categorizacin total de la audiencia puede no
ser viable. En estos casos es conveniente hacer uso del enfoque 'persona', ideado
por Cooper (1999).
Esta tcnica de modelado del usuario se basa en la definicin de arquetipos de
usuarios que representan patrones de conducta, objetivos y necesidades. Estos
arquetipos, llamados "personas", son descripciones en forma narrativa de usuarios,
a los que se les da una identidad inventada: fotografa, nombre,... En cambio,
todos los atributos, caractersticas y necesidades del arquetipo deben estar basados
en informacin real extrada de la audiencia objetiva del sitio web, ya que si stos
fueran datos inventados la tcnica perdera toda su utilidad.
Adems se deben definir "scenarios" - descripciones de situaciones de uso del sitio
- sobre los que poder contextualizar la interaccin persona-aplicacin web.
Las "personas" definidas, al contrario de lo que se pretenda con la categorizacin
de la audiencia, no pueden representar al total de los usuarios del sitio web, pero
es que sta no es su misin.
La funcin de esta tcnica es la de servir de soporte para la toma de decisiones en
el diseo del sitio, permitiendo al desarrollador realizar un diseo centrado en el
usuario, o ms correctamente, en "algn" usuario. Este usuario podemos
considerarlo 'real', ya que aunque no pertenece al mundo real, su descripcin est
basada sobre, y por tanto representa a, un nutrido grupo de usuarios reales.

http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

6/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Es demasiado comn que el diseador se imagine a s mismo usando el sitio y por


tanto sea incapaz de comprender por qu a alguien le puede resultar difcil,
incomodo y hasta frustrante su uso. Estos arquetipos de usuarios conseguirn
precisamente que el diseador tenga en mente a un usuario 'real', con limitaciones,
habilidades y necesidades reales.
5.1.2. Diseo conceptual
El objetivo de la fase de Diseo Conceptual es definir el esquema de organizacin,
funcionamiento y navegacin del sitio. No se especifica qu apariencia va a tener el
sitio, sino que se centra en el concepto mismo del sitio: su arquitectura de
informacin.
Los sitios web son sistemas hipermedia formados por conjuntos de pginas
interrelacionadas por enlaces unidireccionales, pudiendo cada una de estas pginas
contener sub-elementos con entidad propia, contenidos multimedia y herramientas
interactivas.
La "estructura" del sitio web se refiere precisamente a las conexiones y relaciones
entre pginas, a la topologa de la red de pginas, as como a la granularidad de
los elementos de informacin contenidos en las pginas; y la "navegacin" a las
posibilidades y forma en que cada pgina presenta las opciones de desplazamiento
hacia otras pginas.
La definicin de la estructura del sitio puede hacerse desde dos enfoques diferentes
y complementarios: aproximacin descendente y ascendente. En la descendente se
trata de estructurar del "todo" a las "partes", dividir los contenidos en pginas y
definir los enlaces entre pginas. En la Ascendente, por el contrario, se definen los
bloques mnimos de informacin, estructuracin que va ms all de la propia
segmentacin de informacin en pginas.
Una vez definida la estructuracin del sitio es necesario documentarla, para as
tener un modelo de referencia sobre el que sustentar el desarrollo del sitio. La
forma de documentar arquitecturas se suele hacer a travs de grafos y esquemas,
con el objetivo de que sean de fcil y rpida comprensin por todos los miembros
del equipo de desarrollo.
Si la arquitectura es ascendente normalmente se documentar a travs de
diagramas entidad-relacin. Por otro lado, cuando la arquitectura a documentar es
la descendente, para sitios web proponemos el uso del vocabulario grfico de
Garret (2002). A travs de unas sencillas convenciones grficas para la
diagramacin de la arquitectura, podemos definir la estructura de la informacin as
como la navegacin del sitio.
Otras tareas a llevar a cabo por el Arquitecto de Informacin o diseador en la fase
de Diseo Conceptual son: Definir sistemas de clasificacin para los contenidos;
Elaborar ndices y mapas del sitio; Aplicar metadatos a cada una de las pginas y
sub-elementos de informacin; y Definir el Sistema de Rotulado (Rosenfeld,
Morville; 2002).
Entre las tcnicas de Diseo Centrado en el Usuario a aplicar en la etapa de Diseo
Conceptual destacamos, por su utilidad y facilidad de ser llevada a cabo, la tcnica
de "card sorting" u ordenacin de tarjetas. sta se basa en la observacin de cmo
los usuarios agrupan y asocian entre s un nmero predeterminado de tarjetas
etiquetadas con las diferentes categoras o secciones temticas del sitio web. De
esta forma, partiendo del comportamiento de los propios usuarios, es posible
organizar y clasificar la informacin de un sitio web conforme a su modelo mental.
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

7/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

(Hassan Montero et al.; 2004)


5.1.3. Diseo visual y definicin del estilo
En esta fase se especifica el aspecto visual del sitio web: composicin de cada tipo
de pgina, aspecto y comportamiento de los elementos de interaccin y
presentacin de elementos multimedia.
Con el objetivo de evitar la sobrecara informativa, en el diseo de cada interfaz se
debe tener en cuenta el comportamiento del usuario en el barrido visual de la
pgina, distribuyendo los elementos de informacin y navegacin segn su
importancia en zonas de mayor o menor jerarqua visual - por ejemplo, las zonas
superiores del interfaz poseen ms jerarqua visual que las inferiores-.
Adems de la posicin de cada elemento en la interfaz, existen otras tcnicas para
jerarquizar informacin como son: uso del tamao y espacio ocupado por cada
elemento para otorgarle importancia en la jerarqua visual, utilizacin del contraste
de color para discriminar y distribuir informacin, uso de efectos tipogrficos para
enfatizar contenidos, rotura de la simetra y uso de efectos de relieve / profundidad
para resaltar elementos, etc.
Adems de evitar la sobrecarga informativa jerarquizando los contenidos mediante
las tcnicas descritas, para evitar la sobrecarga memorstica se recomienda definir
mens de navegacin con un nmero de opciones reducido, normalmente no ms
de nueve diferentes.
Otro aspecto importante en el diseo visual del sitio es la accesibilidad. En el uso
de colores, por ejemplo, se debe ofrecer suficiente contraste entre texto y fondo
para no dificultar la lectura, e igualmente seleccionar combinaciones de colores
teniendo siempre en cuenta las discapacidades visuales en la percepcin del color
que pudieran presentar nuestros usuarios.
Al utilizar imgenes en el diseo, por motivos de accesibilidad y comprensibilidad,
se debe cuidar su resolucin y tamao, as como en fotografas la no prdida de
significacin o contexto por recorte o minimizacin excesiva de la imagen.
Desde una perspectiva ms amplia del diseo visual del sitio es importante
mantener una coherencia y estilo comn entre todas las pginas, proporcionando
una consistencia visual a todo el sitio. Para asegurar que esta coherencia se
cumple, es til elaborar un libro o gua de estilo que sirva de documento referencia
para todo el equipo de desarrollo.
5.1.4. Diseo de contenidos
En el diseo de contenidos hipermedia se debe mantener un equilibrio entre lo que
seran contenidos que no aprovechasen las nuevas posibilidades hipertexto y
multimedia, y lo que seran contenidos caticos o desorientativos debido a un uso
excesivo y no sosegado de las posibilidades hipermedia.
Sin prescindir de las capacidades que ofrece el nuevo medio, de lo que se trata es
de disear contenidos interrelacionados y vinculados, manteniendo cierta
coherencia informativa, comunicacional y organizativa.
La escritura hipertextual se debe realizar de forma diferente a la tradicional. El
nuevo medio y sus caractersticas obligan a ser concisos, precisos, creativos y
estructurados a la hora de redactar. Debemos conocer a quin nos dirigimos y
adaptar el lenguaje, tono y vocabulario utilizado al usuario objetivo.
Algunos consejos a seguir en el diseo y redaccin de contenidos son:
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

8/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Seguir una estructura piramidal : La parte ms importante del mensaje, el


ncleo, debe ir al principio.
Permitir una fcil exploracin del contenido : El lector en entornos Web, antes
de empezar a leer, suele explorar visualmente el contenido para comprobar si
le interesa.
Un prrafo = una idea : Cada prrafo es un objeto informativo. Se deben
trasmitir ideas, mensajes... evitando prrafos vacos o varios mensajes en un
mismo prrafo.
Ser conciso y preciso : Al lector no le gusta leer en pantalla.
Vocabulario y lenguaje : Se debe utilizar el mismo lenguaje del usuario, no el
de la empresa o institucin. El vocabulario debe ser sencillo y fcilmente
comprensible.
Tono : Cuanto ms familiar y cercano (sin llegar a ser irrespetuoso) sea el tono
empleado, ms fcil ser que el lector preste atencin.
Confianza : La mejor forma de ganarse la confianza del lector es permitindole
el dilogo, as como conocer cuanta ms informacin posible acerca del autor.
5.2. Prototipado
La evaluacin de la usabilidad del sitio web se debe realizar desde las primeras
etapas de diseo, pero cmo evaluar un sitio web que no est implementado? A
travs de prototipos.
La etapa de prototipado se basa en la elaboracin de modelos o prototipos de la
interfaz del sitio. Su aspecto no se corresponde exactamente con el que tendr el
sitio una vez finalizado, pero pueden servir para evaluar la usabilidad del sitio sin
necesidad de esperar a su implementacin.
Segn Flora Corts (2000) , podemos clasificar los tipos de prototipado segn el
nivel de funcionalidad reproducida:
Prototipado horizontal: Se reproduce gran parte del aspecto visual del sitio,
pero sin que esos modelos de interfaz estn respaldados por la funcionalidad
real que tendr finalmente el sitio.
Prototipado vertical: Se reproduce nicamente el aspecto visual de una parte
del sitio, pero la parte reproducida poseer la misma funcionalidad que el sitio
web una vez implementado.
Segn el grado de fidelidad o calidad del prototipo se distingue entre:
Prototipado de alta fidelidad: El prototipo ser muy parecido al sitio web una
vez terminado.
Prototipado de baja fidelidad: El aspecto del prototipo distar bastante del que
tenga el sitio web final.
En las primeras etapas de desarrollo del sitio web se puede hacer uso del
prototipado en papel o de bajo coste, que consiste en reproducir los aspectos
bsicos de la interfaz del sitio en papel.
Por ejemplo, podemos reproducir a travs de bocetos cmo sern las diferentes
pginas que conformarn el sitio a desarrollar, cada una en una pgina de papel
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

9/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

diferente. La reproduccin suele ser a mano (lpiz y tijeras), por lo que resulta una
tcnica de prototipado muy econmica.
Otra forma de realizar prototipos es mediante la reproduccin del aspecto del sitio
a travs de herramientas software. Mediante el procesador de textos o un simple
editor HTML podemos esbozar cmo ser la interfaz del sitio.
Hay que recordar que estos prototipos son reproducciones, no estados tempranos
de implementacin de la interfaz. Una vez que el prototipo se ha utilizado se tira,
no es parte del sitio web.
La utilidad real del prototipado se fundamenta en que no tendra sentido empezar a
implementar una interfaz web si no nos hemos asegurado antes de que el diseo es
usable.
5.3. Evaluacin
La evaluacin de la usabilidad - la etapa ms importante en el proceso de Diseo
Centrado en el Usuario - se puede realizar a travs de varios mtodos o tcnicas y
sobre diferentes representaciones del sitio (prototipos en papel, prototipos
software, sitio web implementado...).
Existe una gran diversidad de mtodos para evaluacin de usabilidad, aunque en el
presente trabajo nicamente se describirn aquellos que creemos de ms utilidad y
aplicabilidad real en el contexto del desarrollo de aplicaciones web.
5.3.1. Mtodo por inspeccin: evaluacin heurstica
Los mtodos de inspeccin de la usabilidad de un sitio web son aquellos realizados
por el experto en usabilidad, y que se basan en el recorrido y anlisis del sitio
identificando errores y problemas de diseo.
La Evaluacin Heurstica es un tipo de mtodo de inspeccin, que tiene como
ventaja la facilidad y rapidez con la que se puede llevar a cabo.
Este tipo de evaluacin normalmente la lleva a cabo un grupo reducido de
evaluadores que, en base a su propia experiencia, fundamentndose en reconocidos
principios de usabilidad (heursticos), y apoyndose en guas elaboradas para tal
fin, evalan de forma independiente el sitio web, contrastando finalmente los
resultados con el resto de evaluadores.
Diversos autores han propuesto diferentes conjuntos de heursticos o principios de
usabilidad a travs de los cuales evaluar la usabilidad. Nielsen (1994a) propone los
siguientes:
Visibilidad del estado del sistema : El sistema (o sitio web) siempre debe
informar al usuario acerca de lo que est sucediendo. Por ejemplo, cuando en
una interfaz tipo webmail se adjuntan ficheros a un mensaje, el sistema debe
informar del hecho mostrando un mensaje de espera.
Lenguaje comn entre sistema y usuario : El sistema debe hablar el lenguaje
del usuario, huyendo de tecnicismos incomprensibles o mensajes crpticos.
Libertad y control por parte del usuario : El usuario debe tener el control del
sistema, no se puede limitar su actuacin. Se debe ofrecer siempre al usuario
una forma de "salida de emergencia", como por ejemplo la representada por la
opcin para "saltar" animaciones de introduccin (normalmente Flash).
Consistencia y estndares : La consistencia se refiere a, por ejemplo, no
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

10/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

utilizar dos rtulos distintos para referirse a un mismo contenido, o no usar


estilos diferentes dentro de un mismo sitio. Adems el sitio web debe seguir
estndares o convenciones de diseo ampliamente aceptados. Cuanto ms se
parezca un diseo y su funcionamiento al resto de sitios web, ms familiar y
fcil de usar resultar para el usuario.
Prevencin de errores : Mejor que un buen mensaje de error es un diseo que
prevenga que ocurra el error.
Es mejor reconocer que recordar : Este principio hace mencin a la visibilidad
de las diferentes opciones, enlaces y objetos. El usuario no tiene por qu
recordar dnde se encontraba cierta informacin, o cmo se llegaba a
determinada pgina.
Flexibilidad y eficiencia de uso : El sitio debe ser fcil de usar para usuarios
novatos, pero tambin proporcionar atajos o aceleradores para usuarios
avanzados.
Diseo minimalista : Cualquier tipo de informacin que no sea relevante para
el usuario y que sobrecargue la interfaz debe ser eliminada.
Permitir al usuario solucionar el error : Por ejemplo, cuando un usuario
introduce una consulta en un buscador y no obtiene ningn resultado, se debe
informar al usuario sobre cmo solucionar el problema, por ejemplo con
mensajes del tipo "introduzca algn sinnimo" o "quiso Ud. decir...". Adems
no se debe borrar el contenido de la caja de bsqueda para que el usuario
pueda rehacer la consulta.
Ayuda y Documentacin : Siempre es mejor que un sitio web se pueda utilizar
sin necesidad de ayuda o documentacin, aunque en sitios web extensos o en
procesos de interaccin complejos (como el rellenado de un formulario), se
debe proporcionar informacin de ayuda al usuario.
Hassan Montero y Martn Fernndez (2003a) proponen el siguiente modelo de
evaluacin heurstica:
Aspectos generales : Objetivos, look & feel, coherencia y nivel de actualizacin
de contenidos.
Identidad e Informacin : Identidad del sitio e informacin proporcionada
sobre el proveedor y la autora de los contenidos.
Lenguaje y redaccin : Calidad de los contenidos textuales.
Rotulado : Significacin y familiaridad del rotulado de los contenidos.
Estructura y Navegacin : Idoneidad de la arquitectura de informacin y
navegacin del sitio.
Lay-out de la pgina : Distribucin y aspecto de los elementos de navegacin e
informacin en la interfaz.
Bsqueda : Buscador interno del sitio.
Elementos multimedia : Grado de adecuacin de los contenidos multimedia al
medio web.
Ayuda : Documentacin y ayuda contextual ofrecida al usuario para la
navegacin.
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

11/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Accesibilidad : Cumplimiento de directrices de accesibilidad.


Control y retroalimentacin : Libertad del usuario en la navegacin.
5.3.2. Mtodo de test con usuarios
El test con usuarios es una prueba de usabilidad que se basa en la observacin y
anlisis de cmo un grupo de usuarios reales utiliza el sitio web, anotando los
problemas de uso con los que se encuentran para poder solucionarlos
posteriormente.
Como toda evaluacin de usabilidad, cuanto ms esperamos para su realizacin,
ms costoso resultar la reparacin de los errores de diseo descubiertos. Esto
quiere decir que no slo debemos realizar este tipo de pruebas sobre el sitio web
una vez implementado, sino tambin, sobre los prototipos del sitio.
Es una prueba complementaria a la evaluacin heurstica, pero un test con usuarios
es ms costoso, por lo que es recomendable realizarlo siempre despus de una
evaluacin heurstica, ya que sera desperdiciar tiempo y dinero utilizarlo para
descubrir errores de diseo motivados por el no cumplimiento en el desarrollo de
principios generales de usabilidad (heursticos).
La ventaja que ofrecen los test de usuarios frente a otro tipo de evaluaciones es
que por un lado es una demostracin con hechos, por lo que sus resultados son
ms fiables, y por otro porque posibilitan el descubrimiento de errores de diseo
imposibles o difciles de descubrir mediante la evaluacin heurstica.
Llevar a cabo un test de usuarios formal obligara a alquilar un local (laboratorio)
adecuado, contratar a evaluadores especializados, as como a delegar en alguna
empresa la seleccin y reclutamiento de los participantes de la prueba. Realmente
sera bastante costoso y poco viable para la gran mayora de casos.
Existe otra forma de llevar a cabo un test con usuarios popularizada por Nielsen
(1994b) , mucho ms econmica y fcil de realizar, con resultados y utilidad
similares, que son las denominadas pruebas informales o test de 'guerrilla'.
En (Hassan Montero, Martn Fernndez; 2003c) se detalla cmo llevar a cabo este
tipo de pruebas: reclutamiento de participantes, eleccin del local y materiales,
realizacin de la prueba y elaboracin del informe final.
5.4. Implementacin y lanzamiento
En la implementacin del sitio es recomendable utilizar estndares (HTML,
XHTML...) para asegurar la futura compatibilidad y escalabilidad del sitio. Esto se
debe a que, aunque puede ser tentador utilizar tecnologas propietarias, el
panorama tecnolgico puede hacerlas desaparecer o cambiar en poco tiempo.
Igualmente es recomendable separar en la implementacin contenido de estilo,
mediante el uso de hojas de estilo (CSS) del lado del cliente y uso de bases de
datos del lado del servidor. De esta forma se facilitar tanto el rediseo del sitio
como la posibilidad de adaptacin dinmica del diseo a las necesidades de acceso
de cada tipo de usuario.
En esta etapa del desarrollo se debe llevar, as mismo, un control de calidad de la
implementacin, supervisando que todo funcione y responda a cmo haba sido
planificado, ya que la usabilidad del sitio depende directamente de la funcionalidad.
Si algo no funciona, sencillamente no se puede usar.
Entre las tcnicas para controlar la calidad de la implementacin se pueden utilizar
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

12/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

validadores automticos de cdigo como los proporcionados por el W3C (


http://www.w3c.org ), as como validadores para testar de forma semi-automtica
el cumplimiento de directrices de accesibilidad en el cdigo, como el Test de
Accesibilidad Web ( http://www.tawdis.net ).
Una vez implementado el sitio y testada su funcionalidad se procede al lanzamiento
del sitio, que consiste en su puesta a disposicin para los usuarios. Se trata de un
evento importante, muchas veces errneamente apresurado debido a la necesidad
de cumplir plazos de entrega.
El primer encuentro entre usuario y el sitio web modelar en gran medida la
percepcin que el usuario tendr del sitio en posteriores visitas. Por ello es
necesario que durante los primeros meses a partir del lanzamiento, el sitio tenga
un diseo y contenidos adaptados a este importante momento de su ciclo de vida.
Es el momento de explicar a los usuarios el sitio, de ensearles a usarlo, darles la
bienvenida, "vendrselo"...
Despus de esos primeros meses de vida la audiencia del sitio habr cambiado.
Seguir habiendo usuarios que accedan por primera vez al sitio, pero ya no
representarn a la mayora de la audiencia. A los usuarios habituales no se les
puede seguir haciendo perder el tiempo dndoles la bienvenida o explicndoles qu
es y en qu consiste el sitio web.
Para asegurar que el sito llega a su audiencia potencial se hace uso de la
promocin. La forma de llevar a cabo una campaa de publicidad o promocin
depender de la naturaleza y caractersticas del sitio web.
Se debe crear expectacin, un conocimiento previo del sitio en los potenciales
usuarios. Para ello es recomendable que antes del lanzamiento, desde la misma
URL que tendr finalmente el sitio, se ofrezca una pgina web explicativa de lo que
ser el sitio, cundo estar disponible, as como informacin de contacto.
Una vez realizado el lanzamiento se deben utilizar tcnicas de promocin para
atraer a los usuarios hacia el sitio:
Banners publicitarios : Ya sea desde sitios web externos pero relacionados
temticamente con el sitio a promocionar, o desde el mismo sitio web cuando
lo que se promociona es un sub-sitio o seccin interna.
Inclusin en buscadores y directorios : La inclusin del sitio web en ndices y
motores de bsqueda es la tcnica ms eficiente para atraer usuarios. Si el sitio
web es pblico (de acceso no limitado o controlado) se debe haber diseado de
tal forma que facilite su indizacin automtica. Si el sitio web no es pblico
(por ejemplo un master virtual), y los contenidos no son accesibles, se debe
crear un mini-sitio pblico que explique toda la informacin posible acerca del
sitio, para que este sea indizado por los buscadores.
Campaas de correo electrnico : Si se posee una base de datos con correos
electrnicos de usuarios potenciales (y es legal la posesin y uso de esta
informacin), se puede informar directamente a estos usuarios del lanzamiento
del sitio. Otro mecanismo muy til es la promocin a travs del envo de
mensajes a listas de correo relacionadas temticamente con el sitio web.
5.5. Mantenimiento y seguimiento
Un sitio web no es una entidad esttica, es un objeto vivo cuyos contenidos
cambian; cuya audiencia, necesidades y perfiles cambian, y que por lo tanto
requiere de continuos rediseos y mejoras.
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

13/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

Estos rediseos deben ser muy sutiles, no se puede cambiar el aspecto y diseo de
forma drstica de un da para otro, pues aunque estos cambios estn
fundamentados en problemas de usabilidad descubiertos post-lanzamiento, los
cambios pueden resultar dramticos para los actuales usuarios que ya estaban
acostumbrados y familiarizados con el actual diseo.
Los problemas de uso no detectados durante el proceso de desarrollo pueden
descubrirse a travs de varios mtodos, principalmente a travs de los mensajes y
opiniones de los usuarios, y su comportamiento y uso del sitio.
5.5.1. Opiniones de los usuarios
Esta informacin puede ser obtenida de forma pasiva - a travs de los mensajes
enviados por los usuarios acerca de problemas que han tenido con el uso del sitio o de forma activa - por medio de cuestionarios y encuestas realizadas sobre la
audiencia -.
Las opiniones expresadas por los usuarios indican posibles problemas de
usabilidad, pero no son en s mismas la respuesta a estos problemas. Por ejemplo,
si un usuario enva un email preguntando por qu desde la home page no
encuentra un enlace al recurso X, no significa que debamos implementar este
enlace, sino que posiblemente el recurso X sea poco visible o de difcil localizacin.
Igualmente, en los cuestionarios no se deben hacer preguntas del tipo "Preferira
que el diseo fuera de tal forma?", sino del tipo "Ha tenido algn problema para
localizar el recurso X?" "Le ha resultado fcil el uso de la herramienta X?". Los
resultados de los cuestionarios no indican la usabilidad del sitio, sino la
satisfaccin del usuario. Si la satisfaccin es baja, habr que mejorar la usabilidad.
5.5.2. Comportamiento del usuario y uso del sitio
Una vez que el sitio web ha sido lanzado y es usado diariamente, tenemos a
nuestra disposicin una nueva fuente de informacin sobre el comportamiento del
usuario: Los ficheros "log".
Estos, son extensos ficheros de texto plano que genera el servidor web, y en los
que se registra cada una de las peticiones de pginas realizadas por los clientes al
servidor.
Por cada peticin del cliente al servidor se suele registrar la siguiente informacin:
Direccin IP del cliente
Identidad del usuario (para sitios con identificacin)
Password de acceso (para sitios con identificacin)
Fecha y hora de la peticin
Mtodo
Path o directorio de la pgina en el servidor
Cdigo que indica si la peticin ha sido resuelta correctamente o no
Nmero de bytes trasferidos entre cliente y servidor
Pgina desde la que se pide el archivo al servidor (puede ser una URL interna si
a la pgina se llega por un enlace del mismo sitio web, o externa, en el caso de
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

14/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

que sea a travs de otro sitio web)


Informacin sobre el agente software (navegador) del cliente
A travs del anlisis de los ficheros logs se pueden responder preguntas como:
quin usa el sitio? cundo lo usa? qu pginas suelen ser las ms visitadas?
desde qu pginas se llega? qu trminos utiliza el usuario para interrogar al
buscador interno?...
Se trata realmente de una informacin muy valiosa que correctamente analizada
(normalmente ayudndonos de software especfico), puede servirnos para la toma
de decisiones sobre el rediseo en sitios web implementados.

6. Conclusiones
En este trabajo se ha descrito, a grandes rasgos, cmo disear sitios web usables a
travs de la aplicacin de tcnicas, recomendaciones de diseo, mtodos y
procedimientos de Diseo Centrado en el Usuario.
El Diseo Web Centrado en el Usuario es un marco metodolgico y una filosofa de
diseo claramente multidisciplinar, por lo que en la prctica debera ser aplicado
idealmente por equipos de desarrollo interdisciplinares. En el contexto de estos
equipos de desarrollo, el perfil del profesional de la documentacin se adecua
especialmente con las tareas de Arquitectura de Informacin.
Es de esperar que ante la posibilidad de conquista de nuevos nichos de trabajo,
todos estos nuevos conocimientos se vayan integrando en los actuales planes de
estudio de Biblioteconoma y Documentacin, as como la proliferacin de cursos
de formacin especializada impartidos por investigadores de nuestra rea.

7. Bi bl i ograf a
Bevan, N.; Kirakowski, J.; Maissel, J. (1991). What is Usability?. Proceedings of the
4th International Conference on HCI, Stuttgart, September 1991. Elsevier.
Copper, A. (1999). The Inmates Are Running the Asylum: Why High-Tech Products
Drive Us Crazy and How to Restore the Sanity. SAMS. ISBN: 0-67231-649-8.
Flora Corts, A. (2000). Recopilacin de Mtodos de Usabilidad . SIDAR.
Disponible en:
http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm
Folmer, E., Bosch, J. (2004). Architecting for usability: a survey. En: Journal of
Systems and Software. Febrero 2004, v. 70, n. 1-2. pp. 61-78.
Garret, J.J. .(2002). Un vocabulario visual para describir arquitectura de
informacin y diseo de interaccin . Disponible en:
http://www.jjg.net/ia/visvocab/spanish.html
Hartson, H.R. (1998). Human-computer interaction: Interdisciplinary roots and
trends. En: Journal of Systems and Software, Noviembre 1998, v. 43, n. 2, pp.
103-118.
Hassan Montero, Y. Martn Fernndez, F.J. (2003a). Gua de Evaluacin Heurstica
de sitios web . Disponible en:
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

15/16

28/4/2014

Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin - Hipertext - ( UPF )

http://www.nosolousabilidad.com/articulos/heuristica.htm
Hassan Montero, Y. Martn Fernndez, F.J . (2003b). Que es la Accesibilidad Web .
Disponible en: http://www.nosolousabilidad.com/articulos/accesibilidad.htm
Hassan Montero, Y. Martn Fernndez, F.J. (2003c). Mtodo de test con usuarios .
Disponible en: http://www.nosolousabilidad.com/articulos/test_usuarios.htm
Hassan Montero, Y. et al. (2004). Arquitectura de la Informacin en los entornos
virtuales de aprendizaje. Aplicacin de la tcnica de Card Sorting y anlisis
cuantitativo de los resultados. En: El Profesional de la Informacin, 2004, marzoabril, v. 13, n. 2, pp. 93-99.
ISO 9241-11. (1998). Ergonomic requirements for office work with visual display
terminals (VDT)s - Part 11 Guidance on usability, 1998.
Nielsen, J. (1994a). Ten Usability Heuristics . Disponible en:
http://www.useit.com/papers/heuristic/heuristic_list.html
Nielsen, J. (1994b). Guerrilla HCI: Using Discount Usability Engineering to
Penetrate the Intimidation Barrier . Disponible en:
http://www.useit.com/papers/guerrilla_hci.html
Norman, D. A.; Draper, S. W. (Eds.) (1986). User centered system design: New
perspectives on human-computer interaction. Hillsdale, NJ: Lawrence Erlbaum
Associates.
Rosenfeld, L.; Morville, P. (2002). Information Architecture for the World Wide
Web. 2nd edition. ISBN 0-596-00035-9. 2002.
Toub, S. (2000). Evaluating Information Architecture: A Practical Guide to
Assessing Web Site Organization . ARGUS Associates. Disponible en: http://argusacia.com/white_papers/evaluating_ia.html

Last updated 05-06-2012

Universitat Pompeu Fabra, Barcelona

Universitat Pompeu Fabra. Departament de Comunicaci. Grup de Recerca DigiDoc


Campus de la Comunicaci. Roc Boronat, 138, despatx 53804. Barcelona 08018
Tels: 93 542 13 11. Correu electrnic: cristofol.rovira@upf.edu
Depsit Legal B-49106-2002 - ISSN 1695-5498

http://www.upf.edu/hipertextnet/numero-2/diseno_web.html

16/16

También podría gustarte