Análisis del Diseño centrado en la Experiencia del Usuario.

En el desarrollo de este análisis utilizaré la Herramienta que se nos indica en la Práctica Web Developer Toolbar , instalada en el navegador, en este caso Mozilla, con el fin de profundizar en el como se ha estructurado y ejecutado el diseño en el medio que nos sirve como ejercicio, en este caso la revista on line Mosaic

Imagen de Inicio de la revista Mosaic

Imagen de Inicio de la revista Mosaic http://mosaic.uoc.edu/

Analizaremos en profundidad como es la experiencia del usuario al navegar a través de la revista, utilizando los 7 parametros de Morville, su Usabilidad y Accesiblidad y por último anlizaremos la composición y validacion de los estandares.

Análisis global de Experiencia de Usuario

Utilizaremos para este propósito los parámetros de Morville que se ilustran en la imagen. Iremos desarrollando los 7 puntos o cuestiones con el fin de contestar las preguntas que nos plantean.

Es muy útil para todos aquellos usuarios que navegan en ella y a través de la misma. Ofrece la información mas actalizada de manera concreta, siendo de mucha utlilidad para aquellos que buscan respuestas o información pertinente, debido a su estructura sencilla. Encontrable es por su jerarquización de los temas, como los titula y los divide, con el resultado de ser clara y visible.Es creible por que su objetivo principal es la divulgacion y la docencia, de manera cientifica y no “religiosa” y esto se refleja en el diseño de la web. La accesibilidad es bastante básica; personas con dificultades de visión necesitan tener en su navegador instalada la opción de agrandar los textos y no se ofrece la posibilidad de audición. Es deseable por se muy sencilla y por utilizar colores para separar las temasticas que resultan atractivos visualmente.Valiosa por la información que nos da, actualizada y relacionandola con temas de interés y por ser un recurso para la divulgación y la enseñanza.

Análisis de Usabilidad

.Utilizando la barra Web Developer toolbar, comprobaremos que cambios experimenta o como se resiente al aplicar las funciones de las herramientas.

Disable. Al eliminar el color la web se ha resentido bastante, ya que a pesar de estar muy bien equilibrado, si lo haces desaparecer parece una web totalmente diferente. Con el resto no ha sufrido nada notable.

pagina de inicio de Mosaic con el color desactivado

pagina de inicio de Mosaic con el color desactivado. http://mosaic.uoc.edu/

Cookies. Tiene 4 Cookies las cuales se pueden borrar y editar

Cookies Mosaic

Cookies Mosaic

CSS. Ofrece el codigo de cabecera de la pagina principal y el de las diferentes secciones. cuando desabilitas todo aparece tola la información y las fotografias, con sus enlaces en una única columna, sin estilo. Al desabilitar los estilos en línea la cabecera de la página se va al negro, desapareciendo. Da la posibilidad de edición de códigos CSS. Al utilizar la opción view border box model, sufre una pequeña modificación de tamaño en los marcos donde se aloja la información, dejandose en dos columnas.

Forms. Con esta herammienta comprobamos el funcionamiento de los formularios, en el caso de Mosaic se trata de un único formulario en la pagina de inicio, el espacio reservado como buscador. Al comprobar el uso de contraseñas nos da un resultado negativo.

Información de formulario en el campo del buscador de la web

Informacion de formularios operativos en la web de Mosaic

Images. Observamos que al desabilitar todas las imagenes, estas desaparecen, pero no solo las fotografías, sino los recuadros dónde están insertados los árticulos. El diseño sigue igual, a dos columnas sin sufrir modificaciones.

Pasamos a analizar todas las posibilidades dentro de imagenes:

  • Display Alt Attributes. Vemos al lado de la imagen el título que la acompaña en un recuadro en amarillo.

    Informacion sobre Display ALT attributes de las imagenes

  • Display Images Dimensions. Comprobamos la dimensión de las imagenes en un recuadro en amarillo.

    Información sobre el tamaño de la imagen.

  • Display Image File Sizes. El espacio que ocupa la imagen en Kb.

    Tamaño de la imagen en Kb.

  • Display Image Paths. Es la ruta de la images.

    Ruta de la imagen

  • Find broken Images. Como imagen perdida no muestra ninguna, sólo aparece la dirección de la web.
  • Outline Images. Enmarca en un cuadro rojo todas las imagenes, destacandolas del resto de contenidos.
  • Image Information. Información sobre la cantidad de imagenes que tiene la página, y sus caracteristicas (fuente, alto, ancho y tamaño del archivo.

    Información de las imagenes.

  • Los elementos de diseño de la cabecera desaparecen cuando damos a la opcion Hide (ocultar la imagenes de fondo) y cuando seleccionas ocultar todas las imagenes, estan desaparecen pero sus ubicaciones no se pierden ni se ocupan con el texto.

Miscelanous. Al usar la opción Linearize Page, la pagina, conservando su diseño se forma en una única columna, mientras que cuando utilizas Small Screen Rendering la pagina se reduce a una unica columna a la izquierda, conservando las images y links, pero viendose modificada en tamaño y diseño, con lo que podemos comprobar que en telefonos o tabletas la información se podria ver.

Resize. Comprobamos que al reducir la pantalla desde la posicion original, pasan todos los elementos a una columna, pero sin perdidas de diseño. Al aumentar sufre el cambio esperado de tamaño, pero sin influir en el diseño y visivilidad.

Análisis de Accesibilidad

No dispone de Abrevations dentro de la información, el resultado ha sido cero, al igual que cuando hemos comprobado el Tab Index (orden de tabulación) el resultado es que no dispone.

Al comprobar el Document outline vemos los enlaces de los que dispone la web y sus detalles

Ejemplo de Document outline o enlaces de la web de Mosaic

Detalles de los enlaces de la web

Validación del sitio. Tools> Validate WAI.

Comprobamos los resultados de la validación, que son como pasamos a resumir, teniendo en cuenta la prioridad en la accesibilidad:

La prioridad indica el impacto que tiene el punto de verificación en la accesibilidad:

  • Prioridad 1. Un desarrollador de contenidos de páginas web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.
  • Prioridad 2. Un desarrolador de contenidos de páginas web debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento.
  • Prioridad 3. Un desarrollador de contenidos de páginas web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento.
  • En los Basic settings de Prioridad 1 no se han encontrados errores, como son las imagenes, gráficos, textos… pasando la verificación.

    Prioridad 1 Accesibilidad

  • En las verificaciones pertinentes de esta web, de Accesibilidad de Prioridad 2 nos encontramos que tan solo en una de ellas hay un error: Failure – Document does not contain a META element with the required name: language or language does not have a ‘content’ value. El resto de las verificacines hechas son positivas.
  • En las de Prioridad 3 es donde encontramos el mayor número de errores y de avisos de fallos.

    Prioridad 3 Problemas de accesibilidad

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

La composición de la página, analizada con la heramienta Outline> frames, tables, block level elements, identifica con marcos de colores las diferencias entre cuales son las cabeceras (marcos verdes y azules), los enlaces outof line sin atributo en recuadros rojos…

frames, tables, block level elements

Validación CSS.

Con esta heramienta Tools>validate CSS, averiguamos los posibles errores que tenga, que en este caso son cero.

Validación CSS sin errores

Validación HTML.

Validada con la herramienta Tools> validate HTML comprobamos que no hay ningun error y que el sitio es correcto.

Validación HTML de mosaic positiva

Validación Feed.

Se realiza con Tools>Feed, siendo el resultado positivo, aunque nos aparece una recomendación, ubicada en la línea 345, columna cero, que nos sugiere seguir.

Validación Feed Mosaic. una recomendación

Anuncios

Acerca de Marketing Holocoust
Graphic artist and Photographer. Degree in advertising and Public relations (URJC)

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: