Diseño centrado en la experiencia del usuario

29 04 2009

Se analizará el diseño de las páginas web de tres medios de comunicación españoles: Cuatro (página de cadena de televisión), El país (edición digital de diario), y Los 40 principales (página web de emisora de radio.

Los links de estos medios son, respectivamente:

www.cuatro.com

www.elpais.com

www.los40.com

Existen herramientas en los exploradores de Internet que ayudan a evaluar diferentes aspectos importantes de una página web. En este caso no una página web cualquiera, si no la de un medio de comunicación, que debe ser accesible a todo el mundo. Concretamente se usará la herramienta Web Developer Toolbar, con la que se pueden comprobar diferentes aspectos del diseño de una página web, desde las hojas de estilo utilizadas para el texto, hasta la maquetación propia de la página (por ejemplo si está diseñada con tablas).

-Análisis global de experiencia de usuario:

Se analizarán los sitios teniendo en cuenta los siete parámetros de Morville: ¿Es utilizable?, ¿Es útil?, ¿Es deseable?, ¿Es valioso?, ¿Es encontrable?, ¿Es creíble?, ¿Es accesible?

Las tres páginas analizadas son utilizables porque ponen a disposición del usuario de manera sencilla distintas informaciones y otras herramientas o actividades.

Es útil porque lastres páginas disponen de información que puede servir a todo aquel que visite la página web, ademas podrá encontrar dicha información eficazmente ya que los contenidos vienen jerarquizados y muy bien diferenciados.

Son deseables las páginas de Los 40 y cuatro, ya que la información se expone de manera muy atractiva, y los contenidos llamativos llaman la atención del que lo lee y hace que pinche en el enlace para conseguir mas información. El país sin embargo es mas sobrio, y un poco mas espeso al tratarse de la edición digital de un periódico, tienen que mantener la estética.

Las páginas son valiosas ya que se tratan de medios de comunicación que ofrecen información al usuario, además ofrecen otras muchas actividades como blogs, radio online, vídeos resumen…

Los contenidos de las páginas son encontrables ya que aparecen diferenciados por temas o secciones, para poder encontrar concretamente la información que se busca.

Las páginas de estos medios son creíbles ya que contienen todos los aspectos que podría contener el medio en sí, además siguen una estética muy característica y relacionada con el medio.

Es accesible ya que como se ha indicado anteriormente, la información viene expuesta por secciones y temas, con lo cual se puede acceder sencillamente a lo que se está buscando. Hay diferencias entre las páginas de Cuatro y Los 40, y el País. Ya que en las dos primeras podemos acceder de forma más gráfica a los contenidos, mediante fotos o vídeos, sin embargo, el País expone sus temas con texto y apartados escritos. Con lo cual la accesibilidad es mas sencilla en Cuatro y Los 40 ya que no tienes que pararte a leer para acceder una sección.

En general las tres páginas ofrecen una buena experiencia informativa a los usuarios, pudiendo realizar además, otras muchas actividades.

-Análisis de usabilidad:

Mediante el uso de varias herramientas de la barra Web Developer Toolbar se puede comprobar como se resienten las páginas web al quitar elementos o al modificarlos. De esta manera se puede evaluar el grado de usabilidad de las webs.

Disable: dentro de esta función la herramienta más llamativa es la de eliminar los colores. Las tres páginas se resiente de la misma forma, todos los fondos quedan blancos, las fuentes en negro y los títulos de sección y titulares en azul.

Cookies: con esta herramienta podemos activar o desactivar las cookies, modificarlas o incluir nuevas. Ademas podemos obtener información detallada acerca de todas las cookies que aparecen en la página web. Con esta última función se ha comprobado que Los 40 principales es la página con menos cookies y El país la que más. Es posible que esto ocurra porque El país tiene muchos más contenidos, los cuales necesitan cookies para su correcto funcionamiento.

CSS: con esta herramienta se pueden desactivas hojas de estilo, al comprobarlos los textos de las tres páginas aparecen con la misma fuente, tamaño y color; dispuestos unos debajo de otros con sus imágenes correspondientes. Además, se puede modificar los estilos de la página a tu gusto, pero para ello debes entender de lenguaje HTML. También se puede obtener información detallada sobre todos los estilos que aparecen en la web.

Form: esta opción no provoca muchas modificaciones a simple vista. Lo más llamativo es que podemos obtener información sobre los formularios que hay en cada página web.

Images: esta opción permite desactivar las imágener de la página. También podemos saber las que son internas a ella o las que vienen de un servidor exterior. En las tres páginas existen apenas modificaciones cuando se desactivan las imágenes externas, es decir, las imágenes son de un servidor propio de la web.
Otro servicio que esta herramienta ofrece es conocer los detalles de las imágenes: cuanto miden, cuando pesan… y los enlaces detallados que contienen cada una de ellas.
Tambiés se puede marcar las imágenes con líneas para observar la maquetación de la página.
Hay una opción que nos ofrece la información conjuntamente en una lista.

Miscelaneous: esta opción nos permite dividir las páginas con líneas de diseño, mostrar los comentarios de los elementos que contiene la página (por ejemplo: Banner o espacio para noticias, etc.). Además tenemos la opción de convertir el contenido de las páginas a líneas, todas la información queda ordenada horizontalmente (linenarize). Las tres páginas se modifican de forma similar.

Resize:este elemento de la Web Developer Toolbar permite agrandar o disminuir las páginas. También se pueden acercar con el zoom para darse cuenta de las imperfecciones.

El zoom permite en lastes páginas, agrandar el texto para una mejor lectura, aunque a veces éste se superpone a las imágenes y da un resultado un poco mareante.

En referencia al análisis de usabilidad estas tres páginas se comportan de manera similar ante las modificaciones que realizamos con la tabla, por tanto estas páginas se pueden usar de manera similar.

-Análisis de accesibilidad: con las siguientes herramientas analizaremos el grado de accesibilidad que tiene el diseño de estas páginas.

Display abreviatures: describe el elemento por el que pasamos el ratón. La página que más información de este tipo muestra es el País, mientras que Cuatro deja mucho que desear en este aspecto.

Tab index: con esta herramienta estas tres páginas no sufren ninguna modificación. Con lo cual, se puede decir que no contienen esta herramienta de accesibilidad que sirve para exponer los contenidos de la web en una tabla de índices que permite navegar sin ratón.

Document outline: con esta herramienta se abre una página informativa con la lista de todas las secciones y apartados de la web. En las tres páginas analizadas obtenemos esta información.

Images-Display alt atributes: con esta herramienta vemos como se despliega un cuadro con información sobre el contenido de cada una de las imágenes. En las tres páginas se puede observar esta función.

Validación con Validate WAI: esta herramienta valida el grado de accesibilidad de las páginas en función del protocolo WAI. Esta herramienta indica los errores de accesibilidad evaluándolos del 1 al 3 según el grado de prioridad en la corrección, donde los de nivel 1 son los más importantes, además indica cuál es el error exactamente y dónde está.
Encontramos en las páginas diferentes errores de accesibilidad que no se ven a simple vista, desde errores en accesos a elementos multimedia, hasta errores en las tablas de las páginas.

La accesibilidad a simple vista es correcta en la tres páginas, una vez evaluadas de forma mas concreta con el protocolo WAI nos damos cuenta de que éstas webs contienen numerosos errores que finalmente pueden suponer algún problema a la hora de acceder a los contenidos.

-Análisis de composición y validación de estándares

Este análisis nos indicará como está compuesta la página (por tablas, marcos, posicionamientos CSS…). Además se comprobarán las hojas de estilo y se validará el HTML, y los Feed.

Outline: no se puede distinguir bien como está compuesta ninguna de lastres páginas, no sabemos el tipo de composición y lo que está claro es que o es ni por marcos, ni por tablas, ya que, al subrayarlos con esta herramienta no sufren ninguna modificación.
El único elemento más vistoso de esta herramienta es Outline Block Level Elements que enmarca los elementos de la página en diferentes niveles (por colores y grosor del marco).

Tools-Validate CSS: esta herramienta evalúa los textos de la página para encontrar errores sintácticos y gramaticales. Indica su posición, e incluso la expresión errónea para poder corregirla en la página web. Tras haber utilizado esta herramienta en las tres páginas se puede determinar que de mayor a menor número de errores encontramos: Cuatro (149), Los 40 (41) y El país (16). Esto pude ocurrir debido a que El país es la edición digital de un medio impreso cuya carga es principalmente textual, con lo cual sus informaciones pasan por muchos controles de corrección sintática y ortográfica, mientras que las otras web dan más importancia a los contenidos multimedia y no prestan tanta atención a los textos.

Tools- Validate HTML: esta herramienta evalúa la corrección del lenguaje de programación de internet HTML, indica el error concreto y su situación en la página para poder corregirlo. En general al validar estas páginas aparece numerosos errores de HTML, de mayor a menor: Cuatro (677), El país (467), Los 40 (106).

Tools- Validate Feed: esta herramienta evalúa las fuentes de sindicación de la página web, es decir, los medios para suministrar información actualizada a los usuarios que quieran suscribirse.

En Cuatro y El país hay varios Feeds invalidados, es decir, que dan error, sin embargo al validar los Feeds de Los 40 dice que no encuentra ninguno de ellos en la página web.
Es decir solo contienen el servicio de fuentes de sindicación Cuatro y El país.

Tras en análisis con las herramientas de la barra, no se ha llegado a ninguna conclusión sobre la composición de las páginas web. Respecto a la validación de elementos aparecen numerosos errores que a simple vista no pueden ser vistos. Por ello las herramientas de validación son muy efectivas para corregir los errores en las páginas web de manera sencilla, ya que indica el lugar en el que están e incluso de qué error se trata.

Anuncios

Acciones

Information

One response

29 04 2009
pegatina

He leído atentamente tu análisis sobre los tres medios a través de las diferentes herramientas expuestas y he de decir que me ha parecido interesante y útil.
Son páginas muy visitadas a diario por muchas personas y aunque parezca que todas están muy bien elaboradas y son accesibles para todos, hay errores muy destacables sobre todo para personas con alguna discapacidad.
Esto es un handicap para las para las personas con discapacidad y también para las propias páginas web, ya que al no tener los servicios útiles para estas personas, abandonan la página dándolo por imposible.
Considero que estas herramientas son útiles para saber un poco más acerca de las páginas que visitamos, ya que ofrecen un abanico de posibilidades inmenso y útil.
Un saludo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: