ANÁLISIS DEL DISEÑO DE LA PÁGINA WEB “POPes80”, CENTRADO EN LA EXPERIENCIA DE USUARIO

Datos del medio analizado

• Denominación: Diario digital POPes80

• URL: http://www.popes80.com”

Entradilla-resumen de conclusiones

Un diseño centrado en la experiencia del usuario, implica la participación de varios elementos. Según algunos autores, es la conjunción de todos ellos, la acción motivada en un contexto determinado condicionada por las expectativas del usuario y las experiencias previas, es la que da lugar a  la experiencia presente y las expectativas futuras. (Definición tomada de la Teoría de la asignatura.)

Tras haber realizado el análisis del diseño de esta web, centrado en la experiencia de usuario, opino que se trata de una página que reúne todos los requisitos de usabilidad, accesibilidad y composición necesarios para convertirse en una página que se presenta muy bien planificada y que posibilita una gran facilidad y comodidad a la hora de navegar por ella, resultando muy fácil y atractiva.

Quiero comentar también que el hecho de realizar este análisis me ha hecho constatar lo poco que conocemos de este “mundillo”. Visitamos las webs, navegamos por ellas y nos atraen, nos hipnotizan, nos parece que son perfectas, pero no podríamos imaginar lo que se esconde tras ellas.

Análisis global de Experiencia de Usuario.

Para realizar este análisis he seguido el método de Morville, analizando los siete parámetros que contempla:.

• Utilizable: Se trata de una página con un nivel de participación muy elevado por parte del usuario y con una estructura muy ordenada y de fácil manejo, por lo que pienso que es una de las páginas que menos dificultades presenta a la hora de su utilización.
• Útil: Resulta un medio muy útil ya que presenta gran cantidad de información en diferentes formatos y muy actualizada, a la vez que contiene otras secciones y servicios complementarios de interés para el usuario.
• Deseable: Cuenta con un diseño práctico a la vez que sencillo, con abundancia de imágenes, datos estos que, unidos al hecho de que en ella no aparece demasiada publicidad, hace de esta web una página deseable para gran cantidad de usuarios.
• Valioso: Se dice que algo es valioso cuando nos ofrece algo que nos puede interesar en gran manera, y esta página lo es ya que nos informa de la actualidad de la música que nos gusta; de esta manera contribuye a que los usuarios que la visitan estén informados sobre todos los aspectos que, sobre música, pretenden encontrar.
• Encontrable:  Encontrar esta página no presenta ninguna dificultad; además, dentro de ella, el acceso a la información,  y las distintas secciones y servicios es muy claro y sencillo, además, gracias a sus dos buscadores, siempre se acaba encontrando la información deseada..
• Creíble: Se trata de un medio que pertenece a un grupo reconocido, que es Dyal Net, lo que ya le aporta confianza y credibilidad. Ofrece además una actualización muy alta de la información en todas sus secciones.

• Accesible: Estamos ante una web realmente accesible, ya que permite, con gran facilidad, el acceso a todas sus secciones y además, a través de diversas opciones, nos deja regresar sin dificultad, si lo deseamos, a informaciones anteriores.

Realizado este completo análisis es obligado hacer una valoración muy positiva del sitio, ya que opino que se ajusta perfectamente a los requisitos que contempla Morville en todos sus parámetros. El resultado es una web de fácil manejo, accesible, útil, valiosa y fácilmente encontrable, que contiene información actualizada y que no presenta dificultades a la hora de acceder a ella.

Análisis de Usabilidad

Para analizar la usabilidad de este sitio web he utilizado la barra Web Developer Toolbar. Esta barra que proporciona Firefox como herramienta nos permite hacernos una idea de su importancia cuando tenemos que configurar un diseño de cualquier característica:

Al instalar la barra no se aprecia ninguna modificación si no se pincha ningún punto de los desplegables.

-  Desactivar: Como su nombre indica, permite deshabilitar acciones como Java, Javascript, tamaño de la fuente… Pero únicamente responde al pinchar sobre el tamaño mínimo de la fuente y los colores.

-   Cookies: Presenta opciones de supervisión y administración de cookies. Al pinchar en “Información de Cookies” compruebo que esta página tiene gran cantidad de ellos.

-  CSS: permite ver el código CSS de la página. Ofrece el código de la cabecera de la página, de las diferentes informaciones, de las secciones, de la publicidad…Al pinchar “Mostar CSS por tipos de medio” -> Dispositivos portátiles todas las palabras y frases aparecen subrayadas y desaparece la negrita, es decir, desaparecen los estilos. Además, mediante “Ver información de estilos”, situando el cursor en cada apartado, aparece el código correspondiente. Con la opción “Editar CSS”, se abre una ventana en la parte inferior de la página, con el código de la hoja,  y permite modificarlo y ver los resultados.

-  Formularios: permite comprobar el funcionamiento de los formularios. Con la opción “Ver Información de los Formularios” aparecen los códigos de los formularios. Al pinchar en “Mostrar Contraseñas” no muestra ninguna. En los demás elementos de “Formularios” parece que no se resiente la usabilidad, son plenamente operativos.

-   Imágenes: la opción “Desactivar Imágenes” hace que las imágenes de la página desaparezcan. En su lugar, aparece un recuadro con un texto que explica lo que muestra esa foto. Además hay muchas opciones que nos permite resaltar las imágenes, encuadrarlas, hacerlas invisibles…

Las siguientes opciones son para comprobar los textos alternativos que llevan incluidos las imágenes:

-“Mostrar Atributos”: al lado de las fotografías, podemos ver un texto explicativo de las imágenes, con su título.

- “Mostrar Dimensiones: permite conocer las dimensiones de cada una de las fotografías.

- “Mostrar Tamaño”: refleja el espacio (Kb) que ocupa cada imagen.

- “Mostrar Ruta”: al lado de cada imagen, aparece su enlace (ruta).

-“Resaltar Imágenes”: sirve para enmarcar las imágenes de mayores o menores dimensiones, los iconos y la publicidad.

- “Información de la imagen”: con esto podemos ver las imágenes que incluye la página.

-“Hacer imágenes invisibles”: las imágenes desaparecen pero se deja el hueco que ocupan.

- Información: Es una herramienta muy buena que permite realizar gran número de acciones al desplegar distintas informaciones, como: enlaces, dimensiones de bloques, atributos de titulo, detalle de los enlaces… En ocasiones en la misma página y en otras, llevándote a otra página. He comprobado que todos funcionan.

- Varios: Nos presenta muchas herramientas como: Limpiar información privada, Mostrar Líneas guía, Mostrar regla, mostrar, y también nos permite abrir un editor HTML.

Además se puede poner en modo lineal o mostrar vista reducida, para comprobar cómo se verían los contenidos en un aparato más pequeño.

-   Resaltar: A través de las diferentes opciones de este botón, Mi Sitio puede aumentar o disminuir. Incluso, aumentar o disminuir el zoom.

- Herramientas: Agrupa muchas herramientas y aplicaciones de validación, para validar las hojas de estilo, el código XHTML, la accesibilidad y los enlaces.

- Código Fuente: Con él vemos de distintas maneras el código de la página.

-  Opciones: Nos presenta diversa información y ayuda sobre la Web Developer Toolbar.

Haciendo el análisis de usabilidad de la página web, se puede observar que es una página de fácil usabilidad y que no se resiente mucho. Es interesante comprobar que se encuentra habilitada para usarla en otros dispositivos.

En definitiva, mediante los botones y opciones de la barra Web Developer Tollbar, he podido conocer elementos y opciones que no sabía ni que existían. Me ha llamado la atención que puedas comprobar la cantidad de fotografías que tiene una página describiéndolas detalladamente o que puedas saber la cantidad de cookies que contiene la página.

En conclusión, el nivel de usabilidad de la página es bueno.

Análisis de Accesibilidad

Sabemos que accesibilidad es la facilidad de acceso a la información contenida en los sitios web sin limitación alguna por razón de deficiencia, minusvalía o tecnología utilizada sin que interfieran, por ejemplo:

• Problemas de oído, visión, movilidad.
• Dificultades de lectura o comprensión cognitiva.
• Imposibilidad de utilización del teclado o el ratón.
• Lector de sólo texto, pantalla pequeña o conexión lenta.
• La accesibilidad mejora el acceso a la web en general, no es de interés únicamente para personas con discapacidad.

Al validar el Sitio con la herramienta WAI observo que aparecen 6 problemas, es decir, 6 columnas con la palabra NO.

En conclusión, este sitio, como ya apuntaba antes, tiene un gran nivel de accesibilidad ya que permite, con gran facilidad, el acceso a todas sus secciones y además, a través de diversas opciones, nos deja regresar sin dificultad, si lo deseamos, a informaciones anteriores.

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

Al utilizar los botones de la tabla Web Developer Tollbar: “Outline> frames, tables, block level elements”; se puede observar que: se observan cambios al pulsar por ejemplo el botón block level elements aparecen varias cuadrículas de color verde, rojo y azul que delimitan las imágenes, las secciones, los links y la información; o con el botón frames se señalan con cuadrículas en color rojo algunas imágenes y la publicidad.

El análisis de composición y validación de estándares definen cómo se debe crear y cómo se debe interpretar,  para que puedan estar siempre disponibles y accesibles para todos los usuarios de la Red.  Este proceso lo llevare a cabo mediante tres tipos de validación diferentes, por un lado la validación  CSS, por otro HTML y por otro la validación Tools Validete Feed.

-          Validación CSS: ofrece un informe de  los errores con una amplia información de cómo se pueden corregir. Al hacerlo aparecen 208 errores.

-          Validación HTML: permite comprobar si el código HTML del sitio web es correcto. La validación nos garantiza que este sitio podrá ser visto en cualquier navegador o dispositivo. Al realizar la validación aparecen 224 errores y 16 warning.

-          Validación Tools Validate Feed: Al intentar hacer esta validación, nos da error.

A la vista de estas validaciones podemos observar que el nivel de error de esta página es muy alto, debido a la gran cantidad de errores que muestra en cada una de ellas.

Advertisement

Etiquetas: Accesibilidad, diseño, Experiencia usuario, Usabilidad