DISEÑO CENTRADO EN LA EXPERIENCIA DE USUARIO. (PRACTICA 6)
Adrián Moncada Salas.
Para hacer esta práctica voy a llevar a cabo el análisis de tres medios online: marca.com, La Cope y Telemadrid. Se trata de un análisis comparativo de los medios mencionados.
En los tres análisis se va a analizar: experiencia de usuario, análisis de usabilidad, análisis de accesibilidad, análisis de comparación y valoración de estándares.
MARCA www.marca.com
- Análisis global de Experiencia de Usuario
- ¿Es utilizable? Se puede considerar que esta página sí es utilizable, ya que es una página con contenido especializado que va dirigida a un público muy específico, que busca estar informado en todo momento sobre el mundo deportivo. Es una página completa y de las más visitadas en España de contenidos deportivos debido a su gran variedad de deportes tratados.
- ¿Es útil? Tras el análisis, diría que sí. Se trata de una página que ofrece bastante información deportiva con muchos recursos multimedia que permiten al usuario obtener gran cantidad de información, además de encontrar fácilmente lo que se busca.
- ¿Es deseable? Para los aficionados al deporte sí y mucho. Ya que además de ser una de las web de contenidos deportivos más visitada al día en España, encontramos un alto grado de actualización, interacción y especialización de sus contenidos. La información además se encuentra dividida entre los diferentes deportes que la página ofrece, de manera que el usuario puede encontrar todas las últimas noticias de aquello que desea ver (por ejemplo en fútbol los equipos de 1ª división se pueden consultar cada uno pinchando en su escudo).
- ¿Es valioso? Sí, para los amantes de cualquier deporte.
- ¿Es encontrable? Sí. Ya que al igual que los otros dos medios analizados comparten el nombre con su formato no digital y es la primera entrada que aparece en el buscador.
- ¿Es creíble? Sí, la página contiene información sobre el mundo deportivo, mostrando todas las últimas noticias de cada ámbito, además de dar la posibilidad al usuario de participar y poder comentar aquello que quieran. Lo que en mi opinión puede crear un ámbito de confianza entre el medio y el usuario.
- ¿Es accesible? Para todos aquellos usuarios que tengan Internet.
· Análisis de Usabilidad
- Disable: Este punto nos permite ver que le pasará a la página si seleccionamos o deseleccionamos una opción. Teniendo en cuenta esto Marca.com permanece invariable en casi todas las opciones, tan sólo cambia al deshabilitar la opción “disable page color”, cambiando el color, lo que resulta algo austero pero puede favorecer a las personas que por algún problema de visión les dañe ver los colores.
- Cookies: La página Marca.com presenta 5 cookies, que tienen los siguientes nombres:
MARCA_idusr,
Id
Id
TD_POOL
TD_UNIQUE_IMP
Además da información del lugar en el que se ubica cada una de ellas.
- CSS: Esta opción permite cambiar el estilo de la página a gusto del usuario. Por ejemplo colocar los contenidos de la página en el lado izquierdo de la pantalla, modificar las CSS, eliminar los bordes de la página y juntar todas las imágenes y textos, así como mostrar las CSS que utiliza la página.
- Forms: La opción Form permite comprobar el funcionamiento de los formularios de un sitio. En la página Marca.com permite obtener las contraseñas de la página así como obtener detalles de las formas que presenta. Activando esa casilla se ve como Marca.com presenta 4 formas y aparece un recuadro que muestra los componentes de cada una de ellas con toda su información.
- Images: Este parámetro posee una gran variedad de opciones: permite deshabilitar todas las imágenes, ver que le ocurriría a la página si se deshabilitan las imágenes internas y ver cuáles son las imágenes que se utilizan de servidores externos a la página de manera que si el servidor se cayese se sabría las imágenes que se pierden (sobre todo se trata de alguna publicidad pero no toda, lo que muestra que aún así no se pierde mucha información visual). Además permite conocer el nombre que se les da a las imágenes dentro de la página, conocer cuál es la dimensión de la fotografía, el peso de una de ellas, conocer su ruta, da información de todas las imágenes que tiene la página (en este caso son 106)..
- Miscelanous:
> Linenarize page: Al activar esta casilla todo el contenido de la página se superpone y no se ve de manera clara. De manera que la página pierde calidad y legibilidad.
> Small screen rendering: Al activar este parámetro podemos ver cómo se vería el contenido de la página en dispositivos móviles aunque no es posible verlo con la misma calidad en una pantalla pequeña como tienen los teléfonos, es destacable que la página de Marca.com se ve bastante bien y respeta el estilo y la estructura de colocación de los mismos.
- Resize: Este parámetro permite modificar el tamaño de la ventana del navegador no sólo de 600×800 sino al tamaño que uno quiera definir. Es destacable resaltar que si se aumenta la opción zoom la información se superpone y se hace cada vez más difícil de entender.
· Análisis de Accesibilidad
- Information:
> Abbreviations: Si se activa este parámetro aparece una referencia solamente en la cabecera de la página que nos lleva a conocer las audiencias del medio digital. Desaparecen los escudos de los equipos de fútbol, así como el texto que aparece acompañando a la información que aparece en la cabecera de la página.
> Tab Index: Modificando esta aplicación, se sigue viendo igual y no se modifica nada.
- > document outline: Da información de en qué orden aparecen los titulares y títulos de las informaciones que aparecen dentro de la página.
- Images:
> Display Alt Atributes: En la parte superior de cada una de las imágenes aparece el nombre de la imagen y si se pincha sobre el recuadrito nos lleva directamente al sitio en el que se encuentra. Esto no sucede en la web de TELEMADRID.
- Tools
>Validate WAI: La valoración es algo escasa. Presenta 8 Failed Automated Verification (suspensos); 3 assed Automated Verification (aprobados); y 11 Other de los cuales 2 son warning.
>T.A.W.: La web de Marca presenta según esta validación 1 error automático y 275 de prioridad uno, 109 automáticos y 563 manuales de prioridad 2 y 6 automáticos y 32 manuales de prioridad 3. Se puede considerar un balance bastante pobre ya que no debería tener ninguno de prioridad uno.
· Análisis de composición y validación de estándares
- Outline
> Frames: En la parte superior de la página existen dos frames que enmarcan dos banner de publicidad, en mitad de la página también se produce un frame en cuanto a publicidad y en la parte inferior de la página. Se encuentran sobre todo en publicidad. Las imágenes que aparecen no se enmarcan cuando se activa esta opción.
> Heading: encuadra los titulares de las noticias así como la cabecera de la página.
> Tables: si se selecciona este elemento no se produce ningún cambio.
>Block level elements: permite recuadrar cada uno de los elementos que aparecen en la página.
> External Links: Los enlaces externos se trata de aquellas referencias que hay en la página a otras webs o incluso a otros elementos propios del medio como la guía marca, Marca tv, Radio Marca, la tienda en Marca.com, Tiramillas…
- Tools
> Validate CSS: Contiene 101 errores
> Validate HTML: Presenta 125 errores y 25 alertas.
> Validate Feed: Es destacable que se trata de una página con posibilidad de RSS lo que permite que se pueda llegar a más personas de manera que el resultado es bastante positivo pero presenta algunas mejoras que podrían hacer que la página presentase una mejor calidad si se pusiesen en práctica: por ejemplo hacer coincidir el titulo con el canal, adecuar la dirección de correo electrónico al formato adecuado, hacer que el título tenga HTML…
LA COPE www.cope.es
- Análisis global de Experiencia de Usuario
- ¿Es utilizable? Sí ya que trata muchos contenidos divididos en las secciones que trata la propia emisora de radio (España, Mundo, Local, Economía, Deportes….) Por lo que es utilizable por los usuarios para acceder a una información que no pudieron escuchar por la radio en momentos anteriores, o como fuente primera de información generalista directamente.
- ¿Es útil? Sí, la web de La Cope es bastante útil, ya que tiene elementos de facilitación para el usuario como Lo último, Lo más leído, etc. También podemos catalogar como útil la estructuración de contenidos por secciones.
- ¿Es deseable? La web de la Cope sigue una ideología o una línea editorial igual a su formato radiofónico, por lo que las informaciones que aparecen son tratadas de una manera muy conservadora donde la religión católica juega un papel decisivo. Por lo que esta página será deseable para aquellas personas que compartan ideología con el medio.
- ¿Es valioso? La web será valiosa para los usuarios que compartan la ideología del medio.
- ¿Es encontrable? Sí. La página, al igual que sucedía con la web de Marca, comparte nombre con su medio radiofónico, por lo que poniendo su nombre en el buscador por excelencia, aparece en primer lugar.
- ¿Es creíble? Para analizar este medio tenemos que volver a mencionar el tema de la línea editorial, ya que las informaciones que trata este medio tanto en web como en radio, están muy impregnadas de ideología, por lo que la gente contraria no la catalogarán de creíble, y la gente que comparta ideología con el medio sí lo harán.
- ¿Es accesible? Para todos aquellos usuarios que tengan Internet.
· Análisis de Usabilidad
- Disable: En el caso de cope.es observamos que no sufre ningún cambio si deshabilitamos las opciones que se nos permite excepto en “disable page colors” que quita los colores de fondo de la página, pero llama la atención que no se pierden los colores de la cabecera principal de la página.
- Cookies: La página cope.es presenta la siguiente información de cookies: La página principal, tiene ocho cookies, cuyos nombres son:
RMFD
RMID
_utma
_utmb
_utmc
_utmz
AlteonP
PHPSESSID
Además muestra su ubicación. Pero la información de las cookies nos muestra que se subdivide la página en otras, con relación a informaciones que presentan otras 22 cookies. (esto puede variar dependiendo de las informaciones del dia).
- CSS: Esta opción permite cambiar el estilo de la página a gusto del usuario, permite cambiar estilos e incluso cambiar el lenguaje (html) en el que está escrita la página, al igual que en Marca.com.
- Forms:. En la cope.es no podemos obtener las contraseñas de la página pero sí obtener detalles de las formas que tiene. Esta web presenta tres formas.
- Images: Llama la atención que ninguna imagen es externa en la web de La Cope. También cabe destacar que aunque se deshabiliten las imágenes en movimiento no se pierde ningún vídeo ni ningún bunner. Además permite conocer el nombre que se les da a las imágenes dentro de la página, conocer cuál es la dimensión de la fotografía, el peso de una de ellas, conocer su ruta, da información de todas las imágenes que tiene la página (en este caso son menos que en Marca.com, con un total de 82 imágenes).
Así como dejar a la página sin imágenes, que pierde contenido visual pero no informativo.
- Miscelanous:
> Linenarize page: Al activar esta casilla todo el contenido de la web de cope.es se alinea a la izquierda, por lo que pierde sentido la página ya que no corresponden las cosas a su orden lógico. (títulos de vídeos con sus videos, secciones con sus informaciones, etc.)
> Small screen rendering: Al activar este parámetro podemos ver cómo se va a ver el contenido de la página en dispositivos móviles como teléfonos o PDAs, al activarlo, la web de la Cope presenta un contenido mal organizado hasta mitad de la página, es decir, para acceder a los contenidos desde un móvil tendríamos que navegar hacia abajo bastante, lo que no resulta nada cómodo.
- Resize: Este parámetro permite modificar el tamaño de la ventana del navegador no sólo de 600×800 sino al tamaño que uno quiera definir. Al igual que ocurre en la web de Marca, es destacable resaltar que si se aumenta la opción zoom la información se superpone, ya que el párrafo de introducción de cada titular no cabe en su sitio y se pierde legibilidad.
· Análisis de Accesibilidad
- Information:
> Abbreviations: Si se activa este parámetro la página se queda exactamente igual, no desaparece nada.
> Tab Index: al igual que en la web de Marca, no varía nada del contenido ni de la apariencia.
> document outline: Da la información de cómo se estructuran las informaciones, titulares, secciones, etc.
- Images:
> Display Alt Atributes: Al igual que en Marca.com n la parte superior de cada una de las imágenes aparece el nombre de la imagen y si se pincha sobre el recuadrito nos lleva directamente al sitio en el que se encuentra. Cabe destacar que son varias las imágenes que muestran el cuadrito amarillo pero algunas no.
- Tools
>Validate WAI: La página de la Cope presenta 6 Failed Automated Verification (suspensos), uno de ellos importante ya que es en elementos basicos; 4 passed Automated Verification (aprobados); y 16 Other de los cuales 3 son warning y el resto not available.
>T:A:W: La web de LA COPE presenta según esta validación 4 errores automáticos y 224 manuales de prioridad uno, 38 automáticos y 215 manuales de prioridad 2 y 3 automáticos y 58 manuales de prioridad 3. Es destacable que posee más errores de prioridad uno que Marca.com.
· Análisis de composición y validación de estándares
- Outline
> Frames: En la web de La Cope no se aprecian la señalización de los frames, y de hacerlo, el color de la página no deja percibirlo. Poniendo la página sin colores, observamos dos frames, una de enlace a Popular TV y otro para anuncios Google.
> Heading: Encuadra solamente el logotipo corporativo de LA COPE, si como la fecha y la hora de actualización.
> Tables: Si se selecciona este elemento no se produce ningún cambio.
>Block level elements: Las informaciones y los textos quedan encuadrados en cajas de texto.
> External Links: Los enlaces externos se trata de aquellas referencias que hay en la página a otras webs, como Popular TV, blogs de opinión, etc.
- Tools
> Validate CSS: Contiene 28 errores
> Validate HTML: El validador de HTML muestra que es imposible analizar el documento.
> Validate Feed: En esta web tampoco es posible analizar ni validar el feed. Se debe a que su servicio de RSS da bastantes fallos por lo que no es positivo el análisis global de cope.es
TELEMADRID www.telemadrid.es
- Análisis global de Experiencia de Usuario
- ¿Es utilizable? Sí para conocer las secciones de España, Madrid, Internacional y Deportes, y saber la programación que emitirá la cadena de televisión.
- ¿Es útil? Sí, porque da información sobre los contenidos más destacados de los programas que va a emitir telemadrid, y de las noticias más actuales.
- ¿Es deseable? Sí, para la gente que suele elegir telemadrid, como cadena de informativos habituales y para enterarse de los programas que serán emitidos.
- ¿Es valioso? No, en el sentido de que las informaciones que ofrecen son leídas en periódicos generalistas (o en su formato digital) y la información de la programación se puede encontrar en otros medios como el teletexto.
- ¿Es encontrable? Sí, porque como ocurría con los dos medios analizados anteriormente, a poner su nombre en el buscador Google u otro aparece la dirección correcta en primer lugar.
- ¿Es creíble? Como en el caso de La COPE las informaciones están muy impregnadas de la ideología del medio, por lo que estas informaciones serán creíbles para los que sí compartan esa ideología política.
- ¿Es accesible? Para todos aquellos usuarios que tengan Internet.
· Análisis de Usabilidad
- Disable: Mediante este dispositivo se puede observar que la página de TELEMADRID no sufre modificaciones, excepto al quitarle los colores de la página, y aún así este cambio no modifica mucho a la página ya que no se caracteriza por tener mucho color. Es destacable que a pesar de que cambia el color la información no se pierde.
- Cookies: La página dispone de 5 cookies que se ubican todas en su página de inicio y se llaman:
__utma
__utmb
__utmc
JSESSIONID
- CSS: al deshabilitar la opción de todos los estilos de las CSS observamos que la información se queda igual que estaba, solo que las líneas de texto quedan subrayadas, cambian de color y aumentan de tamaño; pero no quedan totalmente desestructuradas como sucedía en Marca y en La COPE.
También llama la atención que al modificar cualquier opción de las CSS el resultado es el mismo que si deshabilitáramos todas.
- Forms: Permite ver el estilo de la página y como está estructurada en su parte superior. Como pasaba en la Cope y en Marca no muestra las contraseñas del sitio, pero si nos da información de la forma que tiene ya que esta página solo tiene una forma.
- Images: Es destacable que todas la imágenes no son externas o por lo menos no desaparecen al deshabilitar esa opción al igual que pasaba en La COPE. También se ha de destacar que al deshabilitar las imágenes se mantiene su espacio pero con un símbolo de imagen perdida o rota. No como en las otras dos web analizadas que empleaba ese espacio para las informaciones, poniendo sólo el título de la imagen.
Si se deshabilitan las imágenes en movimiento no se pierde ningún vídeo (porque no lo hay) ni ningún bunner (que son escasos). Además permite conocer el nombre que se les da a las imágenes dentro de la página, conocer cuál es la dimensión de la fotografía, el peso de una de ellas, conocer su ruta, da información de todas las imágenes que tiene la página que son 78 muchísimas para el contenido de la página pero es explicable ya que considera imagen los símbolos, nombres de las secciones…
- Miscelanous:
> Linenarize page: Al activar esta opción se ve claramente que los contenidos de la página se desestructuran totalmente ya que lo coloca todo centrado, a diferencia de lo que ocurría en los otros medios que lo alineaban a la izquierda.
> Small screen rendering: En esta opción como en los medios analizados anteriormente permite simular como se va a ver la web en una pantalla de móvil o de PDA. Pero al igual que pasaba en La COPE lo contenidos no se desestructuran pero para acceder a las informaciones habría que navegar hasta la mitad de la página, lo que puede resultar lento e incomodo.
- Resize: Este parámetro permite modificar el tamaño de la ventana del navegador no sólo de 600×800 sino al tamaño que uno quiera definir. Pero a diferencia de lo que ocurría en los otros medios, si se aumenta el zoom la información no se superpone pero sí se produce error en algunas imágenes que no se amplían.
· Análisis de Accesibilidad
- Information:
> Abbreviations: Si se activa este parámetro la página se queda exactamente igual, no desaparece nada.
> Tab Index: No varía nada del contenido ni de la apariencia.
> document outline: No da nada de información, mientras que en las otras web, daba la información de cómo se ha estructurado los contenidos, lo que pienso que puede ser un error.
- Images:
> Display Alt Atributes: Al igual que en Marca.com n la parte superior de cada una de las imágenes aparece el nombre de la imagen y si se pincha sobre el recuadrito nos lleva directamente al sitio en el que se encuentra, sin embargo muchas de ellas no se abren.
- Tools:
>Validate WAI: La página de TELEMADRID presenta 8 Failed Automated Verification (suspensos), uno de ellos importante ya que es en elementos básicos; 3 passed Automated Verification (aprobados); y 13 Other de los cuales 2 son warning.
> T.A.W.: La web de TELEMADRID presenta según esta validación 138 errores automáticos y 247 manuales de prioridad uno, 604 automáticos y 331 manuales de prioridad 2 y 44 automáticos y 97 manuales de prioridad 3. La valoración que podemos sacar de esta validación es que esta web tiene muchísimos más errores que las otras dos web analizadas, y que es increíble el número de errores de prioridad uno que tiene.
· Análisis de composición y validación de estándares
- Outline
> Frames: En la web de TELEMADRID al igual que en LA COPE no se aprecian la señalización de los frames.
> Heading: Tampoco se observan cambios.
> Tables: Al igual que ocurría en la web de Marca al seleccionar este elemento encuadra cada información en una tabla.
>Block level elements: Divide las informaciones en bloques, al igual que en Tables.
> External Links: Los enlaces externos se trata de aquellas referencias que hay en la página a otras webs, como Popular TV, blogs de opinión, etc.
- Tools
> Validate CSS: Contiene 8 errores.
> Validate HTML: El validador de HTML muestra 159 errores y 2 warning.
> Validate Feed: No se puede analizar puesto que la web de Telemadrid no dispone de servicio RSS.
Conclusiones
Como conclusiones podemos decir que la web de Marca es la que menos errores tiene, es decir la que es más favorable la experiencia de usuario. También podemos mencionar que las tres páginas deben esforzarse en rebajar errores de las tres prioridades, en especial Telemadrid. Es muy importante estructurar la página bien y sus contenidos ya que no se debe perder información por no utilizar un explorador determinado o por deshabilitar determinadas opciones. Además, los creadores de páginas web deben encargar y preocuparse de la gente con algún tipo de discapacidad, en especial, las páginas públicas. (del Estado).