Diseño centrado en la experiencia de usuario

  

 

Para llevar a cabo esta práctica voy a elaborar un análisis sobre tres medios de comunicación en su versión online basándome en los criterios básicos obtenidos por la experiencia de usuario, usabilidad, accesibilidad y comparación y valoración de estándares. La estructura de la práctica se basa en 6 apartados que dan cuenta de lo dicho anteriormente, dedicado el primero de ellos a la denominación de cada uno de los medios de los que he realizado el análisis. para este analisis he utlizado el buscador Mozilla Firefox y su barra de herramientas Web Debeloper Toolbar.

• DATOS DE LOS MEDIOS ANALIZADOS:

- Marca.com: se trata de la versión online del periódico deportivo Marca. Debido a que su contenido es especializado se dirige a una sección concreta del público que demanda una determinada información. Por lo general cumple su objetivo y se convierte en un periódico líder no sólo en su edición impresa sin también en Internet.
www.marca.com

- Telemadrid: Se trata de la versión online de una cadena de televisión autonómica, perteneciente a la Comunidad de Madrid.  Da información sobre los contenidos televisivos que la cadena ofrece así como informaciones de carácter general e internacional del país.
www.telemadrid.es

- La COPE: Se trata de la versión online de la emisora de radio Cope. www.cope.es

•  CONCLUSIONES DEL ANÁLISIS COMPARATIVO

Se tratan de tres medios de comunicación que intentan hacer que su presencia en Internet sea aceptada y adecuada para todos los públicos. Cuando navegamos en ellos o en otros, no somos conscientes de los fallos o errores que pueden tener o que pueden verse si se cae el servidor, por ejemplo. Parece interesante destacar que no todo es como parece.

En cuanto a la experiencia de usuario he de decir que los tres medios tratan de dar información relevante y se esfuerzan porque sea adecuada para el tipo de público al que se dirigen. Son bastante útiles y valiosos. Conocen bien a su público, quizás el que en menor medida se acerca es telemadrid. Por ejemplo Marca.com se centra más en el estilo de la página, utiliza colores llamativos que le aportan identidad, cosa que no ocurre en Telemadrid, donde la ausencia de colores da una sensación de pobreza.

 En cuanto a la usabilidad  las herramientas con las que he trabajado permiten ver que les ocurrirá a los medios si se les habilita deshabilita ciertas opciones: como el color de la página, las imágenes,  características de éstas (tamaño peso…), las formas que presentan las páginas, informaciones sobre sus cookies, capacidad de introducir cosas nuevas… El resultado de la comparación en este punto permite ver que se trata de medios que quieren dar una buena imagen en su versión en Internet, que se esfuerzan por hacer que los contenidos que ofrecen sean válidos y deseables por lo usuarios, sin embargo, unos los consiguen más que otros. Por ejemplo en el caso de Marca es destacable que si se deshabilita el color, la página pierde su identidad pero no pasa nada a la hora de seguir navegando, no se pierde ningún tipo de información; no ocurre así en Telemadrid, si se deshabilita esta opción queda igual o apenas se nota el cambio porque es una página escasa en cuanto a color. En cuanto a La COPE,  pierde todos sus colores excepto el de la cabecera central, sin perder información. 

En cuanto a la accesibilidad muestran errores que se han de corregir para que su rendimiento sea mejorable y pueda acceder todo tipo de público (por ejemplo personas con problemas de visión, incapacidad de usar el teclado o el ratón, problemas auditivos…); resalta sin duda Telemadrid que muestra muchísimas barreras para llegar a todos los públicos.

En cuanto a la valoración de estándares en los tres medios se dan una serie de errores que sería recomendable solucionar. Por ejemplo en el caso de La COPE y Telemadrid no se permite validar Feed, pero en Marca.com si da esa opción que nos permite ver que se trata de una fuente RSS. Son errores que mejorarían aún más el buen rendimiento de esas páginas, todo ello enfocado desde el punto de vista del usuario.

• ANÁLISIS GLOBAL DE  EXPERIENCIA DE USUARIO SIGUIENDO LOS CRITERIOS DE MORVILLE EN CADA UNO DE LOS MEDIOS:

1. MARCA
- ¿Es utilizable? Sí, si se tiene en cuenta que es una página con contenido especializado y va dirigida a un público muy determinado, que busca estar informado en todo momento sobre el mundo deportivo. Es una de las páginas deportivas más completas con una gran cantidad de información sobre muchos deportes, que además está bien estructurada y organizada.
- ¿Es útil? Desde el punto de vista del usuario y tras haberla analizado, he de decir que sí. Se trata de una página que ofrece bastante información deportiva y con bastantes 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 su público sí. Se trata de un medio muy consultado cada día, lo que da a entender que su público lo prefiere respecto a otros medios similares. 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 todas aquellas personas que buscan información deportiva y quieren obtener noticias de última hora y estar informados de una manera constante.
- ¿Es encontrable? Es una página que puede encontrarse fácilmente. Mantiene el mismo nombre que su edición en prensa, lo que hace que sea más fácil encontrarla y no suponga ningún tipo de problema. www.marca.com/
- ¿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. Además de que aparece siempre citada la fuente y el autor de la noticia.
- ¿Es accesible? Se trata de un lenguaje fácil y llano que se acerca mucho al lector. En cuanto a la posibilidad de acceder por supuesto es necesaria una conexión a Internet y no muestra un acceso adecuado para las personas con discapacidad. Obtiene bastantes errores en cuanto a la accesibilidad para todos los usuarios. Debe de intentar dar solución a esos errores para hacer que su página pueda llegar a todos.

2. LA COPE

- ¿Es utilizable? La página web de La Cope se puede considerar bastante utilizable, ya que ofrece contenidos estructurados en secciones de lo q se trata en su formato de radio. (España, Mundo, Local, Economía, Deportes….) Por lo que es utilizable para sus usuarios para acceder a una información que no pudieron escuchar por la radio, o como fuente primera de información generalista.
- ¿Es útil? La web de La Cope es bastante útil, ya que para las personas que prefieran utilizar esta página para acceder a la información, comprobarán que tiene numerosos contenidos multimedia, información muy estructurada por secciones, con la visibilidad de las ultimas noticias de cada sección sin necesidad de acceder a la sección, y con elementos de facilitación para el usuario como Lo último, Lo más leído, etc.
- ¿Es deseable? Como es lógico, 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 busquen información y compartan ideología con el medio.
- ¿Es valioso? Como he explicado en el punto anterior, la información que encontramos en la página es valiosa para aquellas personas que compartan ideología con el 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. www.cope.es/
- ¿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? No para todo el público. Muestra errores considerables en la accesibilidad que es recomendable solucionar.

3. TELEMADRID
- ¿Es utilizable? La web de Telemadrid es utilizable en el sentido de conocer las noticias que suceden encuadradas en las secciones de España, Madrid, Internacional y Deportes, así como para conocer 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. www.telemadrid.es/
- ¿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? No es una página adecuada para personas con discapacidad. Si se tiene en cuenta sus escasos contenidos, muestra un número muy elevado de problemas que dificultan el acceso a todos los públicos.

•  ANÁLISIS DE USABILIDAD DE CADA MEDIO:

1. MARCA

 - 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 muchas de las opciones, pero cambia al deshabilitar la opción disable page color cambia el color lo que le hace perder la identidad de la página pero la información permanece invariable.
- Cookies: La página Marca.com presenta 5 cookies y 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. Si se actica esa casilla se ve como Marca.com presenta 4 formas y aparece un recuadro que muestra los componentes de cada una de ellas.
- Images: En cuanto a este parámetro ofrece una gran variedad. Se trata de una herramienta que contiene muchas 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).
Así como dejar a la página sin imágenes lo que queda mal pero no hace que se pierda información del contenido, sino visual.
- 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 va a ver 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 que puede verse a través de una pantalla de ordenador.
- 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.

 2. LA COPE

 - Disable: Este punto nos permite deshabilitar opciones para ver lo que le ocurre a la página, 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. 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: La opción Formal, igual que en la web de Marca, permite comprobar el funcionamiento de los formularios de un sitio. En la cope.es no podemos obtener las contraseñas de la página pero sí obtener detalles de las formas que presenta. Por su parte, la web de La Cope presenta 3 formas y sus componentes.
- Images: Al igual ocurre con la web de Marca, esta herramienta 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, pero 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.

3. TELEMADRID

- 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

- 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: Al igual ocurre con la web de Marca, esta herramienta 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. 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 DE CADA MEDIO: 

Para llevar a cabo este análisis hay que tener en cuenta que no todos los usuarios podemos acceder de la misma manera. Existen personas con discapacidades que tienen el derecho de poder consultar cualquier medio online y poder obtener la información que busca. Sin embargo no todas las páginas de Internet disponen de una buena accesibilidad para que todos los usuarios puedan hacer uso de ellas.  Para conocer el grado de accesibilidad de los tres medios me he servido de la página www.tawdis.net/taw3/online que permite ver los errores que aparecen en el medio y qué se debe de modificar para hacerlo realmente accesible. Su uso es fácil, solamente se mete la página que se quiere consultar y se interpretan los resultados.

El análisis se puede realizar en tres niveles distintos (Nivel A: Se satisfacen todos los puntos de verificación de prioridad 1; Nivel Doble A (AA): Se satisfacen todos los puntos de verificación de prioridad 1 y 2 ; y Nivel Triple A (AAA): Se satisfacen todos los puntos de verificación de prioridad 1, 2 y 3)  siendo la prioridad 1 de mayor impotancia que las demás.

>>> MARCA. Resultado del análisis de accesibilidad:

- Problemas de accesibilidad de tipo 1. Se ha encontrado 1 problema de tipo automático y 271 problemas de tipo manual. Se tiene que verificar estos errores para que todos los usuarios puedan acceder a los documentos de la web.

- Problemas de accesibilidad de tipo 2. Se han encontrado 108 problemas de tipo automático y 560 problemas de tipo manual. Se debería de verificar estos resultados para que todos puedan acceder, de manera que si esto se soluciona se pueden eliminar importantes barreras de acceso a la página. 

- Problemas de accesibilidad de tipo 3.  Se han encontrado 5 problemas de tipo automático y 31 problemas de tipo manual. Se pueden mejorar estos errores para hacer más accesible los documentos de la web. 

 

>>> LA COPE. Resultado del análisis de accesibilidad:

- Problemas de accesibilidad de tipo 1. Se han encontrado 4 problemas de tipo automático y 224 problemas de tipo manual. Se tiene que verificar estos errores para que todos los usuarios puedan acceder a los documentos de la web.

- Problemas de accesibilidad de tipo 2.  Se han encontrado 38 problemas de tipo automático y 203 problemas de tipo manual. Se debería de verificar estos resultados para que todos puedan acceder, de manera que si esto se soluciona se pueden eliminar importantes barreras de acceso a la página. 

- Problemas de accesibilidad de tipo 3. Se han encontrado 3 problemas de tipo automático y 57 problemas de tipo manual. Se pueden mejorar estos errores para hacer más accesible los documentos de la web. 

 

>>> TELEMADRID. Resultado del análisis de accesibilidad:

- Problemas de accesibilidad de tipo 1. Se han encontrado 136 problemas de tipo automático y 246 problemas de tipo manual. Se tiene que verificar estos errores para que todos los usuarios puedan acceder a los documentos de la web.

- Problemas de accesibilidad de tipo 2. Se han encontrado 603 problemas de tipo automático y 332 problemas de tipo manual. Se debería de verificar estos resultados para que todos puedan acceder, de manera que si esto se soluciona se pueden eliminar importantes barreras de acceso a la página. 

- Problemas de accesibilidad de tipo 3. Se han encontrado 44 problemas de tipo automático y 96 problemas de tipo manual. Se pueden mejorar estos errores para hacer más accesible los documentos de la web. 

 

• ANÁLISIS DE COMPOSICIÓN Y VALORACIÓN DE ESTÁNDARES

1. MARCA:

- 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…

2. LA COPE

- 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. Por lo que no es positivo el análisis global de cope.es

3. TELEMADRID

- 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: En esta web tampoco es posible analizar ni validar el feed.