INSEPCCIONES DEL FINANCIERO DISEÑO VISUAL

Alineación y organización visual de información. No hay una retícula consistente en las diferentes secciones del periódico. La retícula se refiere a la estructura visual en que la información es presentada en diversas páginas del sitio, de forma que sea fácil ver la información e identificar las secciones y jerarquías. Si se repite la retícula en todas las páginas del sitio Web, se incrementa la facilidad de uso y se reduce el tiempo de aprendizaje en lo que respecta a la navegación en el sitio. Existen secciones dentro del sitio como “El monopolio” y “Fondos”, donde la retícula es diferente respecto a las demás secciones.

Consistencia en los elementos visuales Existen elementos visuales que no son consistentes con el resto del sitio. Un sistema visual se compone por diversos elementos gráficos como botones, menús, íconos, etc., que cuenta con características similares en cuanto a color, tipografía, tamaño y distribución. La función de un sistema visual es unificar todos los elementos gráficos, permitiendo ser al sitio un lugar más simple para navegar, sin que el usuario se preocupe por saber diferentes significados de palabras, situaciones o acciones. En la siguiente imagen se puede observar como existen elementos visuales que cambian de una sección a otra, por ejemplo la tipografía y colores del menú cambian considerablemente.

Jerarquía de los elementos visuales Existe publicidad con un alto nivel de jerarquía. Los elementos que se encuentren más cerca de la esquina superior izquierda tienen mayor nivel jerárquico. Una buena jerarquía visual de la información en una página es un factor clave para la claridad del diseño y la correcta comprensión e interacción del sitio. La jerarquía de un sitio ayuda al usuario a identificar qué es lo más importante, priorizando el contenido de la información. En este caso, se le está dando mayor nivel jerárquico a la publicidad, cuando normalmente el elemento que se coloca en la esquina superior de la página Web es el logo.

El sitio cuenta con dos menús de navegación en zonas que tienen la misma jerarquía visual. Los elementos que se encuentren más cerca de la esquina superior izquierda tienen mayor nivel jerárquico. Una buena jerarquía visual de la información en una página es un factor clave para la claridad del diseño y la correcta comprensión e interacción del sitio. La jerarquía de un sitio ayuda al usuario a identificar qué es lo más importante, priorizando el contenido de la información. En este caso, se muestra como dos menús del sitio están ubicados en zonas con el mismo nivel jerárquico, por lo cual el usuario no sabe cual es el menú principal, haciendo que tenga que leer todos los títulos de los dos menús para inferir cual es la relación jerárquica entre los dos.

Utilización de Color

La publicidad de Google utiliza colores similares al del resto de la información que forma parte del sitio. Los colores ayudan a resaltar elementos que tienen relevancia en el sitio, el contraste entre ellos debe ser claro para dar jerarquía a los elementos. En la imagen se muestra un ejemplo de esta problemática, donde el color de los anuncios de Google es muy similar a los colores utilizados en el resto de la información, por lo cual el usuario percibe que dicha publicidad tiene la misma relevancia que la demás información.

NAVEGACIÓN

Navegación dentro del sitio Cuando se trata de llegar a la página principal desde la sección de “Fondos”, la página principal se abre en una ventana nueva. Los sistemas de navegación son elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen al sitio Web, brindándole al usuario la sensación de siempre estar navegando en la misma pantalla. Al intentar llegar a la página principal desde la sección de “Fondos”, la página principal se abre una nueva ventana del explorador de Internet, por lo cual, el usuario percibe que ha salido del sitio Web.

Nombres de los rótulos El rótulo de la sección “El Monopolio” no corresponde con el elemento del menú principal que conduce a dicha sección. La rotulación no debe causar confusión entre los lectores del periódico, al contrario, estos deben de proporcionar la información necesaria al lector facilitándole y reduciéndole el tiempo de búsqueda de la información o sección que este busca. El nombre de la sección debe de coincidir con el nombre del elemento al que se le dio clic, para así evitar confundir al usuario, además, este debe de ser representativo al contenido de la sección. En el siguiente ejemplo se muestra como el elemento del menú llamado “Cartones” no corresponde al título de la sección a la que conduce, “El Monopolio”.

Claridad del estado del usuario dentro del sitio Siempre se muestra al usuario en que lugar del sitio se encuentra. Siempre se debe de indicar al usuario en que lugar del sitio se encuentra tanto en la sección como en la subsección, de lo contrario, el usuario puede percibir que se encuentra perdido dentro del sitio. En el sitio del Financiero siempre se muestra en que sección está, ya sea en el título de la sección, o debajo del título de la noticia.

Buscador Interno La presentación de los resultados, así como los mismos resultados que arroja la búsqueda no brinda al lector las herramientas necesarias para garantizar su satisfacción. Los motores de búsqueda son una alternativa para que el usuario encuentre información sin necesidad de navegar por el sitio Web. El uso de motores internos de búsqueda debe permitirle al lector poder localizar la información de manera rápida y precisa. Los resultados deben indicar datos como la cantidad de resultados que se encontraron, el criterio de búsqueda, y estos deben presentarse de manera útil y sin información irrelevante. Al utilizar el motor de búsqueda del periódico El Financiero se encontró que la presentación de los resultados no cumple con ciertas normas de usabilidad como por ejemplo:

No previene los errores que puedan tener los lectores al momento de introducir una búsqueda. En la imagen se muestra el resultado de una búsqueda, en la cual se dejó en blanco la caja de texto y se oprimió el botón de buscar.

No se deja evidencia de donde se realizó la búsqueda, es decir, no se dice si se buscó en todo el sitio o en algunas secciones en particular.

Eficiencia y simplicidad para encontrar información Algunas opciones del menú cambian de una sección a otra. Las opciones del menú deben ser consistentes, es decir, que los elementos de dicho menú no cambien ya sea en orden o en contenido. En la imagen se señalan como los elementos del mismo menú varían de una sección a otra. Si el usuario busca en el menú una opción que había visto previamente en el mismo menú y no aparece, causará frustración en el usuario.

DISEÑO DE INTERACCIÓN

Comunicación entre el usuario y el portal Existen elementos que aparentan ser enlaces y no lo son. Existen diversas alternativas para hacer obvio que es lo que es sensible a un clic, como uso del color, subrayado, uso de viñetas o el diseño de botón. En el sitio de El Financiero, existen muchas partes en el texto que aunque no son enlaces, utilizan el color igual o similar al de los enlaces, por lo cual el usuario puede intentar dar clic y provocar que se confunda.

Prevención y manejo de errores

En los formularios del sitio no se previenen errores. Es importante que al llenar formularios, estos ofrezcan indicaciones de cómo deben ser llenados. Es necesario colocar instrucciones y recomendaciones aún antes de abrir el formulario. En caso de que algún lector cometa un error, es necesario indicar lo que ha realizado incorrectamente de una manera clara y amable, de esta manera se evitarán errores similares en el futuro. Siempre se debe permitir que el usuario regrese a corregir el error, con esto se generará, de forma indirecta, un aprendizaje. En la siguiente imagen se muestra esta problemática donde se trata de contactar a personal del periódico o enviar una recomendación a un amigo. El sistema permite enviar los datos aún y cuando se cometa un error, por ejemplo, al teclear una dirección de e-mail inválida (sin arroba, sin punto, etc.), insertar texto en un campo numérico, o simplemente dejar en blanco algún dato obligatorio.

Algunos errores no se presentan en un lenguaje entendible para el usuario. Los mensajes de error deben estar expresados en lenguaje plano (sin códigos o tecnicismos), indicar el problema de manera precisa y sugerir una posible solución para resolverlo. En el caso del financiero existen errores que se presentan en otro idioma y/o tecnicismos, y no siempre se ofrecen sugerencias para recuperarse del error.

Manejo de Enlaces No se presentan errores en el manejo de enlaces. Los enlaces deben ayudar al usuario a identificar donde deben dar clic para llegar a determinada sección o información y pueden conducir a un lugar dentro o fuera del sitio, dependiendo de su tipo. Los enlaces deben ser descriptivos para que los usuarios tengan claro que ocurrirá al hacer clic o a donde lo llevará el enlace. En el caso del financiero, no se presentan errores en el manejo de enlaces.

ACCESIBILIDAD

Cumplimiento de Pautas de Accesibilidad (WCAG 1.0) No se cumplen con los puntos de primera prioridad de la WCAG 1.0. Las Directrices de Accesibilidad para el Contenido Web 1.0 (WCAG 1.0), proporcionadas por el World Wide Web Consortium (W3C), explican cómo hacer que el contenido Web sea accesible para personas con discapacidad. Las WCAG 1.0 consideran puntos a verificar de distintas prioridades, pero para motivos del presente estudio se consideraron sólo las de prioridad 1. De acuerdo a la herramienta HERA, el sitio del Financiero cuenta con dos errores y 11 puntos a verificar en su nivel de prioridad inmediata. Se encontraron los siguientes errores de alta prioridad:

Existen 58 imágenes sin texto alternativo.

Hay dos enlaces que se activan mediante scripts.

Portabilidad

El sitio se muestra correctamente independientemente del navegador o el sistema operativo que utilice. La información de un sitio Web debe verse de la misma manera sin importar las condiciones tecnológicas con las que cuenta el usuario. El diseño visual del portal del periódico El Financiero es consistente en navegadores y sistemas operativos más comunes y no se encontraron errores significativos de presentación. Para realizar estas pruebas se utilizó la herramienta proporcionada por el portal de Internet browsershots.org.

Firefox versión 3.0, Mac OS

Tiempo de descarga La página de inicio excede el estándar para descargar una página Web. El tiempo de descarga de una página depende de varios factores como la capacidad que tenga el servidor donde se encuentre la página Web, el diseño de la página Web y el tipo de conexión con la cuente el usuario. Por medio de la herramienta de Speed Test Analysis del portal de Internet WebSiteOptimization.com, se simuló el tiempo de descarga de la página de inicio de Elfinanciero.com.mx y se obtuvieron datos relacionados al número de elementos, tipo y peso. Debido a que el portal tiene muchos elementos por descargar el lector tiene que esperar más de 30 segundos para entrar a la página principal, siendo que el tiempo máximo para cargar una página es de 20 segundos.

Tiempo de descarga

Tipo de conexión Tiempo de descarga

Dial Up(56k) 90.66 seg. Banda Ancha (ISDN 128k) 34.98 seg.

Enlace Dedicado (T1 1.44Mbps) 12.53 seg.

Peso Total en Bytes

Objeto Peso

Imágenes 227911 Multimedia 7951

Otros 166857

Total 402719

Cantidad de Objetos por Descargar

Objeto Cantidad Imágenes 44

Otros 8

Total 52

ESTANDARES WEB

Validación de estructura El portal no sigue estándares de estructura. La W3C cuenta con una herramienta automatizada que valida los estándares de programación de HTML dando a conocer si un sitio Web es usable y accesible. De acuerdo con la prueba de la W3C, Elfinanciero.com.mx presenta 615 errores, como atributos inexistentes y mala estructuración de etiquetas.

Validación de presentación El portal cumple con estándares de presentación. El W3C cuenta con una herramienta automatizada que valida la alineación a sus estándares de programación CSS. Las Hojas de Estilo de Cascada (CSS) son archivos que definen gran parte del estilo y formato visual de la página Web, separando la imagen del contenido. Apegarse a los estándares de programación de CSS permite al sitio ser más usable y poder desplegarse correctamente independientemente de las características tecnológicas del usuario. El portal de Elfinanciero.com.mx se encuentra apegado a los estándares de la W3C por lo que cuenta con una certificación de la versión 2.1.

E-MARKETING

Cumplimiento de estándares del IAB La publicidad electrónica del portal de El Financiero no se apega a los estándares establecidos por el Buró de Publicidad en Internet (IAB). La IAB establece los tamaños y medidas que la publicidad insertada en páginas debe tener. Apegarse a estos lineamientos estandariza la industria y facilita la creación de páginas y publicidad electrónica. Los estándares que el IAB maneja para publicidad embebida incluyen formatos como el rascacielos, banner, ventana emergente y botón. Los elementos de publicidad no siguen todos los estándares del IAB en cuanto a duración (tiempo), tamaño (pixeles) y peso (KB) de la publicidad. En la siguiente imagen se muestra un ejemplo, donde un Banner animado, cumple con el estándar de duración (máximo 15 segundos), pero no cumple con los estándares de tamaño (728 x 90 pixeles) ni de peso (30 Kilobytes), ya que mide 778 x 70 pixeles y pesa 62.2 KB.

Posicionamiento en buscadores

El portal sí cuenta con las etiquetas meta para que sea encontrado por buscadores. Los metatags son palabras claves que se encuentran dentro de cada página en la etiqueta meta, dentro del código HTML. Estas palabrea clave deben estar estrechamente vinculadas a los

contenidos. La falta de metatags o la falta de correspondencia entre éstas y el contenido harán más difícil para el buscador la localización de la información. Se revisó el código HTML del portal para verificar el cumplimiento del uso de estas etiquetas. Fragmento del código: