Aplicación de técnicas de usabilidad y accesibilidad en el entorno cliente.

Aplicación de técnicas de usabilidad y accesibilidad

en el entorno cliente. Programación web en el entorno cliente.

29/10/2017 José Miguel Castillo Castillo

APLICACIÓN DE TÉCNICAS DE USABILIDAD Y ACCESIBILIDAD EN EL ENTORNO

CLIENTE

1

INDICE DE CONTENIDO. APLICACIÓN DE TÉCNICAS DE USABILIDAD Y ACCESIBILIDAD EN EL ENTORNO CLIENTE

1. ACCESIBILIDAD WEB

1.1 Definición de accesibilidad web

1.2 Normativa y estándares sobre accesibilidad web

1.3 Guías para el cumplimiento de normativas y estándares

1.4 Descripción del proceso de la conformidad

1.5 Tecnologías donde la accesibilidad es aplicable

1.6 Herramientas para la validación de la accesibilidad

1.7 Evolución de la accesibilidad

2. USABILIDAD WEB

2.1 Definición de usabilidad

2.2 Importancia del diseño web centrado en el usuario

2.3 Diferencias entre accesibilidad y usabilidad

2.4 Ventajas y problemas en la combinación de accesibilidad y usabilidad

2.5 Ventajas y dificultades en la implantación de sitios web usables

2.6 Métodos de usabilidad

2.7 Análisis de requerimientos de usuario

2.8 Principios del diseño conceptual

2.9 Pautas para la creación de sitios web usables

2.10 Evaluación de la usabilidad

3. RECOMENDACIONES SOBRE LO QUE NO DEBES HACER EN EL DISEÑO DE UNA PÁGINA WEB

3.1 Navegación y usabilidad

3.2 Textos y contenidos

3.3 Diseños e imágenes


CLIENTE

2

1. ACCESIBILIDAD WEB

El acceso de estas personas a la tecnología debe tenerse en cuenta en la construcción de una sociedad igualitaria y es en este punto donde las pautas de accesibilidad intervienen para hacer accesibles los contenidos de las web y aplicaciones a personas con discapacidad. Estas normas están pensadas para todos los diseñadores de contenidos e interfaces. Obviamente, el objetivo final de estas pautas es promover la accesibilidad.

Forman parte de las especificaciones del W3C aportando una guía sobre la accesibilidad que han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C.

1.1. Definición de accesibilidad web

La Organización Mundial de la Salud (OMS), a través de la Clasificación Internacional del Funcionamiento, de la Discapacidad y de la Salud (CIF) del año 2001, definió la discapacidad como "término genérico que incluye déficit, limitaciones en la actividad y restricciones en la participación. Indica los aspectos negativos de la interacción entre un individuo (con una condición de salud) y sus factores contextuales (factores ambientales y personales). (Egea, 2006).

Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en las mismas condiciones a los contenidos. Además, desde el punto de vista de difusión de una marca o mensaje, y sin duda, desde el punto de vista comercial, aumenta de forma notable la potencial clientela.

Por ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se proporciona un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo, esto permite a los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los contenidos. Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán entenderlos plenamente.

Si los contenidos están escritos empleando un lenguaje sencillo, y complementados con diagramas, los usuarios con dislexia o problemas de aprendizaje estarán en mejores condiciones de entenderlos.

Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan leerlo sin dificultad. De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los usuarios que no pueden controlar el ratón con precisión. Hay que evitar que las acciones dependan exclusivamente de un dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el usuario podrá escoger el dispositivo que más le convenga.

Las ventajas del desarrollo de un sitio Web accesible provienen directamente del desarrollo con estándares Web. Por lo tanto si desarrollamos con estándares Web con un poco más de esfuerzo conseguiremos tener un sitio Web accesible.

El desarrollo de sitios Web accesibles tiene las siguientes ventajas:

Incrementar el número de visitantes (clientes potenciales).

Separación del contenido de la presentación o diseño según marcas los estándares actuales.

Permitir a los motores de búsqueda una mejor identificación de los contenidos, y por lo tanto, tendremos mejores posibilidades de posicionamiento en los buscadores.

Cumplir un derecho ciudadano de participación y no discriminación por razón de discapacidad.

La accesibilidad va de la mano de la usabilidad. Haciendo accesible una Web mejoramos la experiencia del usuario al tener un sito con una navegación clara, sencilla y con facilidad para la lectura y comprensión del contenido.


CLIENTE

3

Los inconvenientes que podemos encontrar a la hora de hacer accesible una página web son los siguientes:

Aplicaciones y sitios webs mal etiquetados porque no emplean las marca de HTML adecuadas para definir la estructura de la página.

Por ejemplo, emplear la negrita para indicar separadores de sección cuando existen etiquetas (H1, H2,...) específicas para ello, o crear listas mediante saltos de línea cuando existen etiquetas específicas (UL, LI).

Un problema asociado a esta situación es que al no estar correctamente estructurada la página no se puede saltar fácilmente la barra de navegación del sitio web, y el usuario tiene que esperar que el lector de pantalla lea toda la barra de navegación antes de llegar al contenido realmente importante de la página.

Usar un texto alternativo inadecuado para las imágenes.

Por ejemplo, no colocar un texto alternativo cuando hace falta o colocarlo cuando en realidad no es necesario, o un texto alternativo poco útil por el contenido del mismo.

Controles de formulario sin etiquetas.

Por ejemplo, cuando las etiquetas de los controles de un formulario se colocan en sitios extraños (debajo, alejadas). El usuario invidente no sabe para qué sirve cada control, no sabe qué tiene que escribir o seleccionar.

1.2. Normativa y estándares sobre accesibilidad web

La accesibilidad tiene normas que la regulan tanto en ámbitos nacionales como internacionales. Existen varios recursos que nos permiten especificar las características que deberán cumplir los contenidos disponibles mediante tecnologías Web en Internet, Intranets u otro tipo de redes informáticas para que puedan ser utilizados por la mayor parte de las personas. Este es el objetivo finalista.

Entre estos recursos destacan:

Norma UNE 139803:2012. Requisitos de Accesibilidad para contenidos en la web. La Secretaría de Estado de Administraciones Públicas ha suscrito un acuerdo con AENOR para la distribución gratuita de esta norma a través del Portal de Administración Electrónica.

Web Content Accessibility Guidelines WCAG 2.0. Las WCAG 2.0 son una evolución de las WCAG 1.0. Se trata de una recomendación internacional sobre cómo hacer accesibles los contenidos de la Web a las personas con discapacidad y fueron aprobadas en diciembre de 2008.

Estándar ISO/IEC 40500:2012. El estándar ISO/IEC 40500:2012, aprobado en octubre de 2012, es el estándar internacional que recoge las pautas de accesibilidad web WCAG 2.0.

Norma UNE 139803:2004. Requisitos de Accesibilidad para contenidos en la web. La norma UNE 139803:2004 es una norma española, que ha tomado como punto de partida para su realización las Directrices para la Accesibilidad de los contenidos en la Web 1.0 (WCAG 1.0) de la Iniciativa para la Accesibilidad Web (WAI) del Consorcio de la Web (W3C).

Web Content Accessibility Guidelines WCAG 1.0. Las WCAG 1.0 se trata de una recomendación internacional sobre cómo hacer accesibles los contenidos de la Web a las personas con discapacidad. Se engloban en la Iniciativa para la Accesibilidad Web (WAI) del Consorcio de la Web (W3C).


CLIENTE

4

Metodología Unificada de Evaluación Web UWEM 1.0. Norma CWA 1554:2006. Especificaciones para el esquema de la evaluación de la conformidad y marca de calidad sobre accesibilidad web. Esta norma constituye la base de la certificación europea en Accesibilidad Web.

1.3. Guías para el cumplimiento de normativas y estándares

Organismos regulatorios de la accesibilidad web.

La marca AENOR de Accesibilidad TIC es una garantía para las organizaciones, los usuarios y los responsables web de que las páginas de internet son y se mantienen accesibles.

Algunas de sus características son:

Permite certificar los niveles de accesibilidad AA y AAA, para la norma UNE 139803.

Refleja el cumplimiento del nivel de accesibilidad exigido por la legislación (nivel AA).

Se aplica a cualquier tipo de contenido, con especial énfasis en los contenidos Web a los que se accede mediante aplicaciones de usuario.

La certificación incluye la realización de una inspección técnica de accesibilidad, la revisión del plan de acciones para corregir los problemas identificados y la verificación de las correcciones realizadas. Además, se revisará el back office o sistema de gestión de la accesibilidad.

Incluye la realización de verificaciones semestrales del nivel de cumplimiento de los requisitos de accesibilidad y la revisión de las correcciones realizadas.

Incluye la realización de auditorías anuales de la metodología de mantenimiento o sistema de gestión de la accesibilidad, conforme a los requisitos establecidos por AENOR en el Reglamento RP A90.01.

Organiza y aglutina los compromisos, el conocimiento y la experiencia de AENOR, Fundación CTIC y ESI respecto a la accesibilidad web.

Esta certificación se dirige a los propietarios y/o responsables del mantenimiento de la accesibilidad de la web, y concede el derecho a identificar la web utilizando la marca N de AENOR de Accesibilidad.

Comparativa de normas y estándares.

Las normas y leyes de los países se basan en recomendaciones de organismos internacionales por lo que al final las recomendaciones y las leyes son muy similares.

La legislación española referente a accesibilidad optó por dar validez a Una Norma Española (UNE) 139803/2004 frente a las normas internacionales WCAG 1.0.

La norma UNE es exactamente lo mismo que las WCAG 1 pero con el orden y las prioridades cambiadas. Para los revisores de accesibilidad, la vida se complica un poquito, sobre todo por el baile en las prioridades: hay que cumplir con las prioridades 1 y 2 de la norma UNE, la cual no corresponde al 100% con las WCAG. Los cambios que se han detectado son:


CLIENTE

5

1.4. Descripción del proceso de la conformidad en accesibilidad web

Descripción de las pautas principales (imágenes, enlaces, vídeo, etc.).

En la web, como en el caso de la accesibilidad al medio físico, un diseño no accesible introduce barreras y dificultades innecesarias.

Para valorar el grado de accesibilidad de un sitio web, las referencias vienen marcadas por las Pautas de Accesibilidad al Contenido de la Web 1.0 (WCAG 1.0) de la Iniciativa de Accesibilidad Web (WAI) del Consorcio World Wide Web (W3C).

Cada una de estas pautas está asociada a uno o más puntos de verificación que nos describen cómo aplicar esa pauta a las características particulares de las páginas web. Estas pautas no sólo facilitan el desarrollo de contenidos más accesibles para las personas con discapacidad, sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios.

Un apéndice de estas pautas, conocido como la Lista de puntos de verificación para las Pautas de Accesibilidad al Contenido en la Web 1.0 nos informa sobre los puntos de verificación clasificados por prioridades.

Las prioridades se estructuran en torno a 3 grados de accesibilidad:

Prioridad 1: el cumplimiento de los puntos de verificación de la Prioridad 1 es un requerimiento básico para que algunos grupos de personas puedan usar los documentos Web.

Prioridad 2: el cumplimiento de los puntos de verificación de la Prioridad 2 es importante para eliminar las barreras de acceso a los documentos Web.

Prioridad 3: el cumplimiento de los puntos de verificación de la Prioridad 3 mejor a la accesibilidad global de los documentos Web.

Los niveles de prioridad son concéntricos, de forma que la prioridad 1 forma parte de la Prioridad 2, y ésta a su vez de la prioridad 3. De este sistema deducimos que las páginas que soportan el nivel de prioridad 3 son las que más se ajustan a las pautas establecidas por WAI sobre accesibilidad, y por lo tanto, que menos problemas de accesibilidad presentan para las personas discapacitadas, mientras que el nivel de prioridad 1 es el nivel mínimo exigible a una página web accesible.

Cuando una organización decide implementar los puntos de verificación de las prioridades 1, 2 o 3, en realidad establece el nivel de adecuación de sus contenidos con los requerimientos establecidos en los puntos de verificación de una Prioridad.

Existen tres niveles de adecuación:

1. El nivel de adecuación "A" incluye los puntos de verificación de prioridad 1.

2. - El nivel "Doble A" incluye los puntos de verificación de las prioridades 1 y 2.


CLIENTE

6

3. - El nivel "Triple A" incluye los puntos de verificación de las prioridades 1, 2 y 3.

Cuando una organización decide poner llevar a cabo estas pautas debe realizar el siguiente proceso: Decidir el grado de accesibilidad (nivel A, nivel AA o nivel AAA) que desea conseguir en los contenidos y servicios electrónicos. Utilizar los puntos de verificación técnica de aspectos de accesibilidad contenidos en la prioridad o grado de accesibilidad que se quiera obtener (Prioridad 1, Prioridad 2, o Prioridad 3). Codificar cada página web o recurso electrónico con los aspectos que especifica cada punto de verificación. Identificar la página web o recurso electrónico con el logotipo que establece el nivel de adecuación conseguido. Las llamadas "Pautas de Accesibilidad al Contenido de la Web 1.0” (WCAG 1.0) son 14 y cada una de estas pautas proporciona orientaciones técnicas sobre cómo mejorar algún aspecto relacionado con accesibilidad web. En las pautas se ofrecen explicaciones detalladas, así como ejemplos y directrices para solucionar los posibles problemas que se puedan presentar. Pautas para una navegación accesible.

Pauta 1. Proporcione alternativas equivalentes para el contenido sonoro y visual. Los equivalentes no textuales, como pueden ser dibujos o vídeos, benefician a personas analfabetas o con dificultades en la lectura.

Pauta 2. No se base sólo en el color El cumplimiento de esta pauta beneficia a personas con dificultades para ver los colores y a usuarios que utilizan pantallas monocromáticas.

Pauta 3. Utilice marcadores y hojas de estilo y hágalo de forma apropiada. Con el uso de marcadores de presentación los usuarios que utilizan software especializado tendrán dificultades para entender la estructura de la página.

Pauta 4. Identifique el idioma utilizado. Se debe indicar el idioma predominante en cada página y marcar aquellas expresiones que se encuentren en otra lengua. De esta forma, los sintetizadores de voz son capaces de cambiar su pronunciación en función del idioma siempre y cuando se usen los marcadores apropiados.

Pauta 5. Cree tablas que se transformen correctamente. El uso de tablas con otros fines crea dificultades para los usuarios que usan lectores de pantalla.


CLIENTE

7

Por ejemplo, usar tablas sin encabezados <TH> dificulta la lectura a usuarios que no pueden visualizar la información de forma global como personas con lectores de pantalla y/o dispositivos braille para magnificar la pantalla o usuarios con dispositivos de pantalla pequeña. Por ejemplo, definir tablas correctamente, usando TH

Pauta 6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen

correctamente.

Pauta 7. Asegure al usuario el control sobre los cambios de contenidos tempo-sensibles

Pauta 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas.

Pauta 9. Diseñe con independencia del dispositivo.

Pauta 10. Utilice soluciones provisionales.

Pauta 11. Utilice las tecnologías y pautas del W3C.

Pauta 12. Proporcione información de contexto y orientación.

Esta información ayuda al usuario a comprender páginas o elementos complejos. Se deben agrupar los elementos y ofrecer información contextual sobre la relación entre elementos. Esta acción es fundamental para discapacitados cognitivos y visuales.

Pauta 13. Definición: Proporcione mecanismos claros de navegación. Ejemplos: mapa web, ayuda, barras de navegación, etc.

Pauta 14. Definición: Asegúrese de que los documentos sean claros y sencillos.

El acceso a la información escrita puede ser difícil para discapacitados cognitivos o con dificultad de aprendizaje y para personas sordas o que hablan en una lengua extranjera. La comprensión de un documento también depende de la maquetación de la página y de los gráficos (que deben llevar un texto alternativo).


CLIENTE

8

1.5. Tecnologías donde la accesibilidad es aplicable

(X)HTML.

La web debe separar el contenido del diseño. Una página es accesible si se puede llegar fácilmente a su contenido (aquello que la web dice). Por tanto, no tiene que estar escondido detrás de largos menús que a veces funcionan y otras no, ni tiene que depender del cómo ha configurado el usuario su navegador.

Como el contenido se escribe en HTML y todos los navegadores entienden HTML, con escribir buen HTML ya está casi todo hecho.

Siempre que se habla de accesibilidad se explica que las personas con visión limitada usan un lector de pantalla, que es un programa que coge el texto de una web y lo lee en voz alta. El problema es cómo explicar las imágenes y los colores o cambios en el tipo de letra sí estas son fundamentales para comprender el contenido.

Pero no son sólo las personas ciegas, hay muchos que necesitan hacer cambios en las páginas para poder verlas bien.

Por ejemplo, pueden necesitar un contraste fuerte en los colores, o agrandar el tipo de letra.

Al separar el texto del diseño, el usuario puede fácilmente descartar el diseño o incluso usar su diseño favorito, escrito en un fichero CSS, sin que entre en conflicto con el diseño original de la página.

CSS.

Las siguientes reglas facilitan la accesibilidad, y se hace desde CSS:

Use un número mínimo de hojas de estilo en su sitio.

Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la página).

Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.

CSS recomienda indicar el tamaño del texto en la unidad Em o en porcentaje (%).

Use la unidad "Em" para fijar el tamaño de letra.

Utilice unidades de medida relativas y porcentajes. Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.

Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content").


CLIENTE

9

CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:

Selectores de atributos.

La función attr() y la propiedad "content"

Los seudo-elementos :before (antes) y :after (después)

Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]).

CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:

Los seudo-elementos :before y :after y la propiedad "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores antes o después del contenido del elemento.

Las propiedades "cue", "cue-before", y "cue-after". Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.

Especifique siempre un tipo de letra genérico por defecto.

Use las siguientes propiedades CSS2 para controlar la información de la fuente: "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", y "font-weight", en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, "face", y "size".

Si tiene que usar los elementos HTML para controlar la información sobre el tipo de letra, utilice BIG y SMALL, que no están desaconsejados.

Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:

Mayúsculas/minúsculas: "text-transform" (para mayúsculas, minúsculas y primera letra mayúscula).

Efectos de sombra: "text-shadow".

Subrayado: "text-decoration".

No use los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir, son elementos no estándares).

Si se emplea contenido parpadeante (por ejemplo, un titular que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, "text-decoration: blink" producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario.

Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.

Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible.

Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto:

Sangría : "text-indent".

Espaciado de letras o palabras: "letter-spacing", "word-spacing".


CLIENTE

10

Por ejemplo, en lugar de escribir "H O L A" (que los usuarios generalmente reconocen como la palabra "hola", pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a "HOLA" la propiedad "word-spacing". Los textos sin espacios serán transformados en discurso más fácilmente.

Espacio en blanco: "white-space". Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento.

Dirección del texto: "direction", "unicode-bidi".

Los pseudoelementos: first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto.

Use codificación hexadecimal en vez de nombres, para especificar colores.

Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.

Asegúrese de que los colores de primer plano y de fondo tienen buen contraste .

Asegúrese de que la información no se transmite sólo a través del color.

Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.

Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. (Ver ejemplo en el documento original).

Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas:

Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER.

Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación ( ).

Con las propiedades "float", "position", "top", "right", "bottom" y "left", el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.

La propiedad "empty-cells " permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel.

Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt="" para ellas.


CLIENTE

11

Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.

Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilo. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales.

Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual.

Javascript.

Los problemas con los que nos encontramos a la hora de desarrollar aplicaciones web con Javascript son los ocasionados por la dificultad de que un usuario nos visite con un navegador que no interprete este lenguaje.

Una técnica para corregir este problema sería el separar javascript de las otras dos capas del desarrollo web (estructura y diseño lo que se conoce como Javascript no obstructivo o Javascript Accesible.

La expresión Divide y vencerás recoge esta idea, separando cada capa en su respectivo fichero separaremos el mantenimiento (la etapa más costosa y larga del desarrollo de una aplicación) e incluso la comprensión de la aplicación se verán afectadas positivamente en cualquier aplicación.

Flash.

La plataforma y formato de Flash permiten la creación de contenidos accesibles, no obstante es responsabilidad de los autores el procurar la utilización apropiada de estas herramientas:

Asigne equivalentes de texto a los elementos visuales.

Controle el orden de lectura en los contenidos.

Agregue captions o subtítulos a los contenidos de audio.

Maneje los ciclos o loops de animación apropiadamente para evitar problemas a los programas lectores de pantalla.

Permita a los usuarios controlar las animaciones.

Asegúrese de proveer accesos de teclado para todos los controles.

Exponga la estructura de las películas Flash complejas.

Muestre el estado de los controles.

Utilice el color apropiadamente.

Valide la accesibilidad de las películas.


CLIENTE

12

PDF.

Los ficheros PDF deben ser accesibles de forma nativa como especifican las WCAG, de manera que sea posible manejarlos de forma independiente del tipo de dispositivo y sean compatibles con los productos de apoyo como los lectores de pantalla.

La conversión de un PDF en PDF accesible es un proceso manual que se realiza con Adobe Acrobat siguiendo una metodología específica.

El número de horas que es necesario invertir en la conversión del PDF dependen de las características del mismo: número de páginas, imágenes, tablas, notas y formularios que presenta; si la maquetación es en una sola columna o en varias, etc.

Además del PDF accesible se entrega un informe detallando las acciones realizadas. De la misma manera que una página web no es accesible por pasar un validador de accesibilidad automático como TAW, un PDF no será accesible sólo por pasar el validador de accesibilidad de Adobe, siempre será necesaria una validación manual.

XML/XSL.

XSLT (Transformaciones XSL) es un lenguaje de programación declarativo que permite generar documentos a partir de documentos XML, como ilustra la imagen.

El documento XML es el documento inicial a partir del cual se va a generar el resultado.

La hoja de estilo XSLT es el documento que contiene el código fuente del programa, es decir, las reglas de transformación que se van a aplicar al documento inicial.

El procesador XSLT es el programa de ordenador que aplica al documento inicial las reglas de transformación incluidas en la hoja de estilo XSLT y genera el documento final.

El resultado de la ejecución del programa es un nuevo documento (que puede ser un documento XML o no).

XSLT se utiliza para obtener a partir de un documento XML otros documentos (XML o no). A un documento XML se le pueden aplicar distintas hojas de estilo XSLT para obtener distintos resultados y una misma hoja de estilo XSLT se puede aplicar a distintos documentos XML.

Reproducción multimedia.

Los elementos multimedia que tanto se utilizan en las páginas web pueden ocasionar graves problemas de accesibilidad, ya no sólo a las personas con algún tipo de discapacidad, sino a todo el mundo en general.


CLIENTE

13

Estamos ante elementos que no son HTML y que requieren, en la mayoría de los casos, la instalación de un visor específico (plug-in, add-in o extensión) que sea capaz de interpretar el elemento multimedia. Requiere añadir nuevo software o asegurarse que por defecto lo trae el sistema operativo.

NOTA: Como norma general, no se debe abusar de los elementos multimedia y el diseñador de una página web se tiene que preguntar, antes de incluirlo en una página web, si es un elemento esencial que no se puede eliminar o sustituir por otro más accesible.

Si nos centramos en los problemas de accesibilidad que puedan tener las personas con discapacidad, elementos multimedia más problemáticos son los vídeos, las grabaciones sonoras y las animaciones.

Respecto a los vídeos y las grabaciones sonoras hay que destacar que en ambos casos se tiene que proporcionar una transcripción de los diálogos y una descripción de los sonidos.

Por ejemplo, en el caso de los vídeos se puede proporcionar una descripción del vídeo en sí.

Cuando se realiza una búsqueda de un vídeo en YouTube, se puede emplear "Opciones de búsqueda" para indicar en el apartado "Características" que se quiere buscar vídeos que tengan subtítulos.

Para ello hay que seleccionar la opción "Subtítulos cerrados", traducción literal de closed captions, el término que se emplea en inglés.

En la siguiente imagen podemos ver las "Opciones de búsqueda" de YouTube.

Los vídeos que tienen subtítulos aparecen en los resultados de una búsqueda con el marcador "cc"

(de closed captions), como podemos ver en la siguiente imagen donde aparecen tres vídeos

publicados en YouTube con subtítulos.


CLIENTE

14

En la siguiente imagen del vídeo Accesibilidad de la página web del Senado (1/2), los subtítulos

aparecen sobreimpresos sobre el vídeo.

Este botón permite activar y desactivar los subtítulos. Además, también permite configurar algunos parámetros de visualización de los subtítulos, como el tipo de letra, el tamaño de letra y el más importante, el idioma de los subtítulos.

YouTube permite añadir subtítulos en diferentes idiomas a un mismo vídeo.

Además, también permite emplear un servicio de traducción automática de los subtítulos: podemos añadir los subtítulos en un único idioma, por ejemplo español, y YouTube se encarga de traducirlo a otros idiomas.

Por ejemplo, en la siguiente imagen aparecen los mismos subtítulos que en la imagen anterior, pero traducidos al alemán.


CLIENTE

15

Otras tecnologías.

Se conocen varias tecnologías que permiten sincronizar los subtítulos o una transcripción con un vídeo o una grabación sonora. Las dos tecnologías que más se emplean son SMIL , una tecnología promovida por el W3C, y por otro lado Microsoft Synchronized Accessible Media Interchange (SAMI).

Cada vez es mayor la sensibilidad de los desarrolladores con la idea de intentar llegar al mayor número de personas.

En el caso de las animaciones, Adobe (Macromedia) Flash está muy extendido pero presentan los siguientes complicaciones o cuestiones sobre las que reflexionar:

Flash y Accesibilidad Web presentan una relación complicada puesto que la accesibilidad de Flash sólo está disponible en el sistema operativo Microsoft Windows y con el navegador Microsoft Internet Explorer, ya que Flash utiliza la tecnología Microsoft Active Accesibility (MSAA) para ofrecer las características de accesibilidad.

Por ejemplo, cuadro de diálogo donde se intenta que todos los objetos sean accesibles,

1.6. Herramientas para la validación de la accesibilidad

HTML no es un lenguaje de programación, sino de representación y comunicación de información que es interpretado por unos programas especiales a los que llamamos. El hecho de ser interpretado, y no compilado, le posiciona en una situación concreta con ventajas y desventajas:

En lo positivo, no es necesario que una página esté escrita perfectamente para poder ser interpretada. Un error no va a provocar que no cargue la página, sino que en el peor de los casos hará que una zona se vea mal, o incluso puede que pase desapercibido porque nuestro navegador lo ignore.

En la parte negativa, esta libertad de los navegadores para ignorar o interpretar a su antojo ciertos campos, ha propiciado que cada uno haya querido cambiar el lenguaje a su gusto, y que a menudo una página varíe dependiendo del navegador utilizado para mostrarla.


CLIENTE

16

Pero más allá de la propia exigencia por el trabajo bien hecho y que cumpla los estándares, hay ciertos tipos de clientes o situaciones que requieren que seamos más estrictos a la hora de crear webs:

Cuando se requiere compatibilidad con dispositivos móviles.

Cuando se necesita que la página se pueda ver en navegadores antiguos.

Cuando el cliente pertenece a una administración pública.

NOTA: El hecho de que nuestra web cumpla con los requisitos del W3C no implica que el resultado sea de calidad. Sólo nos asegura que, salvo pequeñas excepciones, se va a ver igual de bien o igual de mal en todos los navegadores.

Basadas en navegador.

La Barra de Herramientas de Accesibilidad Web AIS tiene como finalidad facilitar la comprobación manual de diversos aspectos de la accesibilidad en las páginas y aplicaciones Web. Las funciones principales son:

Identificar los componentes de una página web.

Por ejemplo, mostrara todos los elementos de encabezado en la página actual (H1-H6) o los mismos con los elementos de las listas ordenadas OL, no ordenadas UL y de definiciones (<DL>) de la página actual.

Facilitar el uso de aplicaciones en línea proporcionadas por terceros.

Por ejemplo, enviar la URL de la página actual a la herramienta de comprobación de accesibilidad TAW o comprobar el código HTML de la página (o páginas) actual con el validador HTML del W3C.

También sería posible comprobar la codificación CSS en la página actual con el Validador CSS del W3C.

Simular la experiencia de diferentes tipos de usuarios.

Por ejemplo, colocar sobre la página actual una máscara en forma de imagen que permite al usuario reducir la opacidad (30%, 60%, 90%) para simular la reducción en la sensibilidad al contraste que ocurre progresivamente con la edad o por ejemplo, poner sobre la página actual una máscara en forma de imagen que altera la paleta de colores de la página para simular la paleta típica visible por una persona con deficiencia de percepción de color rojo-verde.

Proporcionar enlaces a referencias y recursos de información adicionales.

Página de información sobre la funcionalidad de la barra de herramientas.

Información acerca de la versión de la barra de herramientas y su desarrollo.

Visualizar desde la barra de herramientas simulaciones de cómo ven la página personas con distintas deficiencias visuales.

También se han integrado funciones muy útiles para los expertos en usabilidad web.

Por ejemplo, el tiempo que la página tarda en descargarse o una lista de los textos de los enlaces.


CLIENTE

17

Mediante aplicaciones de escritorio.

Podemos usar programas ejecutables que previamente tendremos que descargar e instalar en el ordenador. En esta ocasión Taw está desarrollada en Java, necesita de una máquina virtual Java, y se puede descargar una versión para Linux y otra para Windows.

La única condición para que TAW apruebe una página como accesible consiste en la ausencia de problemas de prioridad 1, tanto de los detectables automáticamente (automáticos) como los que requieren verificación manual (manuales).

La aplicación TAW.EXE está diseñada con metodología de Interfaz de Documento Múltiple (MDI) permitiendo que haya simultáneamente más de un analizador ejecutándose de forma simultánea.

Además de páginas individuales, tanto locales como remotas, se puede configurar el analizador para que inspeccione un sitio web completo.

TAW distingue entre dos tipos de problemas de accesibilidad:

1. Problemas de tipo automático: son aquellos que pueden ser reconocidos como tales por la aplicación.

2. Problemas de tipo manual: son aquellos otros problemas que requieren la verificación del usuario ya que dependen de condiciones no comprobables por el programa.

Un sitio web cumple con el nivel mínimo de accesibilidad si no tiene problemas de prioridad 1 ni de tipo automático ni de tipo manual.

Mediante servicios web externos.

Podemos trabajar algún servicio en línea que permita evaluar de modo automático la accesibilidad de una página web, usando como referencia algunas técnicas recomendadas por las Pautas de Accesibilidad para el Contenido Web 2.0 (WCAG 2.0).

Examinator adjudica una puntuación entre 1 y 10 como un indicador rápido de la accesibilidad de las páginas y proporciona un informe detallado de las pruebas realizadas.


CLIENTE

18

Este servicio tiene el único propósito de mostrar las características de la herramienta y sólo permite revisar un limitado número de páginas por sesión.

Por ejemplo, tras solicitar examine el código

<A href="http://www.sevillafc.es">SEVILLA F.C.</A> devuelve,

1.7. Evolución de la accesibilidad. Nuevas tendencias

Desde el principio del diseño web, y actualmente aún quedan desarrolladores que lo realizan, cuando se llevaba a cabo un proyecto se trabajaban versiones específicas para cada navegador (Netscape y Explorer) lo que implicaba un desarrollo y mantenimiento costoso de sitios web realizando.

Con esta filosofía ya superada, realizar un sitio web accesible era crear una versión duplicada en modo texto.

Actualmente estamos en lo que se denomina era multidispositivo, es decir, los visitantes pueden acceder a nuestros servicios desde teléfonos móviles, smartphones, PDAs, televisión interactiva, sistemas de navegación por voz, kioscos y otros dispositivos domésticos, etc. Es decir se multiplican las posibilidades y por tanto el tipo y característica de cada visitante.

Desde la W3C se recomienda que los estándares sean reconocidos y aceptados por la industria y la Web Accesibility Initiative comienza a ser conocida por especialistas en web.

La vida cotidiana se traslada a la red y se pone a disposición de una masa creciente de usuarios todos los servicios imaginables.


CLIENTE

19

Nace el concepto de Sociedad de la Información. Existe una clara sensibilización social apoyada por legislación tanto en la Comunidad Europea, (en España con la LSSI) y el resto de países CEE como en EE.UU. con la Sección 508, que no permite trabajar con la Administración a fabricantes y empresas que no desarrollen productos accesibles. Otros países también la incorporan.

Es evidente que la accesibilidad es clave y comienza a ser tenida en cuenta por Administraciones, Empresas y otras organizaciones avanzadas y sensibilizadas como algo diferencial para lograr mayor cuota de mercado o incluso imagen de marca (conciencia social).

El diseño web comienza a basarse en los estándares definidos por el W3C (XHTML, XML, CSS, JS-DOM) obteniendo importantes beneficios: desde el acceso a mayor número de usuarios (cuota de mercado), a una mejora de la imagen de marca, hasta un menor coste de desarrollo y mantenimiento.

Muchos responsables de sitios web desconocen el concepto de accesibilidad asimilándolo a accesibilidad para invidentes. La accesibilidad se interpreta como un obstáculo en la comunicación visual en la que descansa el marketing y la imagen de marca en la red descartando su aplicación porque este sitio web no es para discapacitados.

Por ejemplo, sitios como CSS Zengarden sirven para mostrar como estándares, accesibilidad y diseño pueden ser perfectamente compatibles.


CLIENTE

20

2. USABILIDAD WEB

La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto. La usabilidad es un término que no forma parte del diccionario de la Real Academia Española (RAE), aunque es bastante habitual en el ámbito de la informática y la tecnología.

2.1. Definición de usabilidad

En interacción persona-ordenador, la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web. El término también se usa a menudo en el contexto de productos como la electrónica de consumo o en áreas de comunicación, y en objetos que transmiten conocimiento o incluso un diseño eficiente de objetos mecánicos.

Por ejemplo, un libro de recetas o un documento de ayuda en línea o un manubrio o un martillo.

El grado de usabilidad de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo.

Hablamos de relatividad porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

El concepto de usabilidad se refiere a una aplicación (informática) de (software) o un aparato (hardware), aunque también puede aplicarse a cualquier sistema hecho con algún objetivo particular.

El modelo conceptual de la usabilidad, proveniente del diseño centrado en el usuario, no está completo sin la idea utilidad. En inglés, utilidad + usabilidad es lo que se conoce como usefulness.

Jakob Nielsen definió la usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.


CLIENTE

21

2.2. Importancia del diseño web centrado en el usuario

El proceso de diseño centrado en el usuario es un desarrollo en el que se utilizan una serie de técnicas multidisciplinares y donde cada decisión tomada debe estar basada en las necesidades, objetivos, expectativas, motivaciones y capacidades de los usuarios.

La mayoría de los procesos que tienen lugar en el diseño centrado en el usuario siguen la siguiente secuencia:

Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o investigación cuantitativa.

Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones.

Poner a prueba lo diseñado, normalmente usando test de usuario.

El diseño centrado en el usuario debe responder a las siguientes cuestiones:

¿Quiénes son los usuarios?

¿Cuáles son sus tareas y metas?

¿Qué nivel de experiencia tienen los usuarios?

¿Qué información necesitan los usuarios y de qué manera?

¿Cómo se espera funcione?

¿Cuáles son los casos más adversos?

¿Se realizarán varias tareas a la vez?

2.3. Diferencias entre accesibilidad y usabilidad

Semánticamente en el mundo del diseño y en el mercado, ambas palabras expresan conceptos ligeramente distintos.

Generalmente consideramos la accesibilidad como las pautas o reglas a seguir para que usuarios discapacitados puedan acceder a la información que les brindamos, ya sea el medio una web, un dvd, un cd, etc.

Este tipo de accesibilidad puede estar fundamentado exclusivamente en el diseño y la forma de disponer los datos, aunque en la mayoría de los casos en la implementación está contemplada la posibilidad de que los usuarios puedan usar diversas herramientas adicionales para facilitar su acceso, tales como el aumento del tamaño de la letra, el uso de navegadores con síntesis de voz o terminales braille, etc.

No sólo las personas con algún tipo de dificultad son el target de los sitios accesibles sino que un usuario de informática móvil podría beneficiarse de la accesibilidad de un sitio web que contemple un diseño especial para ser mostrado en terminales móviles.


CLIENTE

22

La usabilidad se centra en las necesidades del usuario. Así si pretendemos diseñar un sitio con buena usabilidad debemos:

Pensar en qué modo el usuario desearía encontrar la información.

Tener en cuenta las limitaciones de los recursos del usuario a nivel de ancho de banda, capacidad de procesamiento y resolución.

Diseñar el grado de profundidad que daremos a nuestros contenidos, y si el usuario podrá avanzar en complejidad a medida que lo desee.

Definir un árbol de navegación atractivo como referencia de navegabilidad en nuestra página web, no abrumando con excesivos enlaces, y mostrándolos a medida que el usuario se interesa por ellos.

Definir una iconografía y un diseño visual con importante carga semántica, que transmita justo lo que nos proponemos, para así poder ayudarnos del impacto visual en lugar de que éste produzca confusión.

NOTA: La importancia de la usabilidad debe tenerse en cuenta desde el primer momento para todo proyecto interactivo.

Un sitio web atractivo, comunicativo y útil, solamente se consigue alimentando hasta la excelencia estas tres variables: usabilidad, accesibilidad y contenidos.

2.4. Ventajas y problemas en la combinación de accesibilidad y usabilidad

La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológico o ambiental). Esta cualidad está íntimamente relacionada con la usabilidad.

Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos.

La única razón que nos tendría que valer para hacer nuestra Web accesible es la eliminación de barreras a las personas con discapacidad, se demuestra que a la hora de la práctica, esto no suele valer por regla general. Tienes que intentar demostrar que un sitio Web accesible no sólo es bueno para las personas con discapacidad, sino que tiene otros beneficios.

Las características de la accesibilidad no orientadas exclusivamente a usuarios con discapacidad son las siguientes:

Aumentar la usabilidad de la página. Ya que la usabilidad va de la mano de la accesibilidad.

Cumplir los estándares web. Esto dará longevidad a nuestros proyectos.

Visualización correcta en dispositivos móviles usando la misma web, sin tener que hacer una web específica para móviles.

Permitir la visualización en todos los navegadores web.

Permitir la visualización en todas las resoluciones sin perder el diseño estructural. Evitando avisos del tipo «Optimizada para 800 x 600».

Reducir el costo de mantenimiento. Una vez que nuestra web sea accesible, realizar alguna modificación será más sencillo. Con código limpio, bien estructurado, optimizado y validado según los estándares... todo es más fácil.

Es más barato hacerlo ahora accesible que rediseñarlo todo después.

Generar contenidos e información de calidad ya que es una de las premisas de la accesibilidad.

Crear soporte para la web semántica.


CLIENTE

23

2.5. Ventajas y dificultades en la implantación de sitios web usables

Principales ventajas de la usabilidad:

La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo.

El aprendizaje del manejo de la web es mucho más rápido e intuitivo, y el usuario enseguida se familiariza con la página, haciendo nuestros productos o servicios más visibles.

Los visitantes se sienten más seguros y necesitan menos ayuda por parte del soporte técnico de la web, con la consiguiente reducción de costes y esfuerzos y una percepción más positiva de la visitas.

Reducción de los costes de aprendizaje.

Optimización de los costes de diseño, rediseño y mantenimiento.

Disminución de los costes de ayuda al usuario.

Disminución en la tasa de errores cometidos por el usuario.

Aumento de la tasa de conversión de visitantes a clientes.

Aumento de la satisfacción, comodidad y facilidad de uso del usuario.

Mejora la imagen y el prestigio de la empresa.

Las dificultades más habituales a la hora de implantar sitios webs usables son:

Aplicación tardía respecto al global del proyecto.

Preocupación excesiva por la estética.

Exceso de funcionalidades.

Uso de nuevas tecnologías.

Testeo inadecuado.

2.6. Métodos de usabilidad

Los métodos de evaluación automatizados utilizan programas específicos de medición para analizar el comportamiento de los usuarios, es decir, miden automáticamente una serie de variables consideradas a priori predictoras de la usabilidad de un sitio web.

Que unos usuarios hayan seguido cierta ruta para llegar a unos contenidos no significa necesariamente que esa ruta sea la más usable. Es posible que el sitio esté estructurado de tal manera que esa es la única ruta lógica para muchos usuarios. Lo que no dice un tracking o testeo es si realmente esa ruta es buena y que ha ocurrido con los usuarios que no han sabido cómo llegar a los contenidos que les interesaban. A partir de unos clics perdidos y sin rumbo no podemos inferir las intenciones.

El tracking es adecuado para encontrar errores, informa sobre donde se atascan los usuarios en un proceso, que enlaces no se pinchan porque no son comprensibles o no interesan, etc. pero no dice cómo se debe diseñar un sitio web.

El inconveniente más serio de los estudios automatizados es que miden el comportamiento de los usuarios actuales de un sitio. Estas personas están suficientemente motivadas, ya suficientemente satisfechas y han aprendido a usar el sitio web. Sin embargo, a no ser que el sitio web sea un completo éxito y no necesite captar más usuarios los usuarios actuales no nos interesan tanto como los potenciales. Si se diseña un sitio web para usuarios actuales se estará diseñando un sitio web para usuarios que ya lo usan y la ganancia será relativamente marginal porque no se centra en llegar al potencial real de Internet, es decir, a los usuarios que todavía no la usan.


CLIENTE

24

Algunos de los parámetros de medida analizados por los estudios automatizados son la contabilización del número de clics del ratón, el control de los enlaces realmente usados por los usuarios y del grado de actualización del sitio. Aunque estos datos proporcionan información objetiva, sin embargo, la identificación de manera simple de los datos obtenidos con medidas de usabilidad es algo discutible.

Un programa puede medir el tiempo requerido para encontrar la ruta adecuada a la solución, sin embargo en el caso de que el usuario se pierda, no aporta ninguna solución para corregirlo. Por otro lado, cada usuario se comporta de manera diferente y la mera anotación de los links que visita, no indica las causas de su comportamiento. No se conoce si quizá sólo está comparando ofertas y no quiere comprar, si entró al sitio web por error, o sólo curioseaba.

La contabilización del número de clics puede dar lugar a errores de interpretación.

Por ejemplo, un diseño más eficiente de una página, no siempre reduce el número de clics necesarios para realizar una compra. Quizás es incluso necesario incrementar el número de pasos para minimizar el volumen de información y facilitar decisiones más rápidas y sencillas de los usuarios evitando así el riesgo de pérdida que puede aparecer en decisiones complejas.

En cualquier caso existen una serie de datos que sí pueden ser recogidos automáticamente por programas específicos, como el tiempo de descarga, la validación del código HTML, el estado de los enlaces y la accesibilidad para discapacitados.

Estudios vía web.

La integración de los procesos en un estudio online permite visualizar los resultados de la investigación en cualquier momento. Sus beneficios principales son la rapidez en la recogida de las respuestas, en la presentación de resultados y una reducción de costes de ejecución.

El principal inconveniente de este tipo de estudios es el de la validez de la muestra. En muchos casos se utilizan banners y ventanas popup, que con diferentes sistemas de muestreo reclutan sujetos para el estudio.

Ejemplos de popups,


CLIENTE

25

Las muestras recogidas de este modo son autoseleccionadas, están muy sesgadas porque sólo perfiles muy específicos de usuarios prestan atención a los banners, a las ventanas popups y se deciden a responder a las preguntas de un cuestionario vía web. Este problema anula los beneficios de esta técnica de evaluación y la hace muy poco recomendable.

2.7. Análisis de requerimientos de usuario

El llamado análisis de requisitos recopila los resultados de varias reuniones entre los responsables del proyecto (de la empresa cliente y de nuestra empresa), donde se recogerá la información que sea relevante para entender los condicionantes que deben tenerse en cuenta a la hora de diseñar la arquitectura de la información del portal y los primeros prototipos. Estas reuniones servirán para complementar la información ya proporcionada y discutir las dudas que puedan surgir durante las primeras fases del proyecto.

El análisis de requerimientos trata de capturar y describir detalladamente los requerimientos de funcionalidad y de calidad de servicio del producto que se desarrolla.

La tarea la desarrollan entre los “expertos de dominio” (usuarios, expertos de marketing, etc.) que saben lo que se quiere hacer y los analistas que definen de forma no ambigua lo que se va a hacer.


CLIENTE

26

Dentro de un proceso en espiral, no es una actividad única, sino una tarea que se va desarrollando incrementalmente.

Los principales aspectos del análisis de requerimientos son:

Identificar los paquetes de funcionalidad y detallarlos hasta hacerlos no ambiguos.

Establecer los límites de la aplicación, identificando los agentes externos con los que interacciona.

Identificar las características de las interacciones mediante la elaboración de un catálogo de mensajes y de sus semánticas.

Por ejemplo, si se quiere desarrollar un software para gestionar las compras de una empresa llamada WEBShopeasy, que haría de intermediadora de un conjunto de productos procedentes de diferentes empresas suministradoras.

La empresa pública dos veces al año un catálogo de los productos que vende, que es distribuido entre los clientes y otras personas que pueden estar potencialmente interesadas.

Se concluye tras diversos contactos que los requerimientos adicionales serían:

Los clientes encargan los productos, enviando una lista de ellos junto con las órdenes de pago a favor de WEBShopeasy, la cual cumplimenta las ordenes de pedido y envía los productos a la dirección de los clientes.

La aplicación software debe mantener la información completa de las órdenes desde que el pedido llega, hasta que el producto es enviado.

WEBShopeasy debe proporcionar un servicio rápido. Debe ser capaz de servir el pedido del cliente por el medio más rápido y eficiente posible.

2.8. Principios del diseño conceptual. Creación de prototipos orientados al usuario

La visualización de la información y el diseño en el contexto de consumo de información online, se ha convertido en una necesidad a la hora de crear sitios web. La tendencia actual lleva a converger todo el proceso de desarrollo y el diseño de un sitio web al cumplimiento de las necesidades, características, conflictos y objetivos del usuario.

Lectura y aprendizaje visual.

El diseño conceptual nos ayuda a definir el esquema de organización, funcionamiento y navegación del sitio sin detallar la apariencia estética. Antes de jerarquizar el contenido, resulta imprescindible comprender de qué forma leemos en función del dispositivo en el que consumamos la información.

A través de este esquema podemos observar cómo ha variado la forma y orientación de leer por parte de los usuarios.

Actualmente, el uso que hacen los usuarios de los dispositivos móviles invita a realizar la lectura web en vertical así como desarrollar sitios compuestos por una única página o HTML evitando así cargar páginas nuevas y encadenando contenidos en menús superiores e inferiores.


CLIENTE

27

La percepción como herramienta de trabajo.

La psicólogos de la Gestalt, corriente surgida en Alemania en el siglo XX, enunciaron una serie de leyes de la percepción sobre cómo nuestra mente percibe y organiza los elementos visuales. Estas leyes nos ayudan a comprender a nuestros usuarios facilitándoles la experiencia de uso. Las representaciones visuales de algunos contenidos y elementos web que se llevan a cabo en el proceso de elaboración de un prototipo de una interfaz, ayudan a que la experiencia de uso sea rica y no cause una carga cognitiva excesiva.

Algunos casos del uso de estas leyes en el diseño de un sitio web podrían ser los siguientes:

Técnica de agrupación de contenidos. Para facilitar la búsqueda de contenidos que hacen referencia a una misma información empleamos la ley de proximidad.

Tomando como ejemplo la página de Yelmocines, observamos como los contenidos que hacen referencia a la información sobre una película están agrupados para facilitar la experiencia de uso. Al seleccionar una película distinguimos fácilmente las sesiones y los cines dónde la proyectan ya que la información esta agrupada.

Mantener aspectos similares para no despistar al usuario. La ley de similaridad realiza agrupaciones teniendo en cuenta aquellos elementos que poseen cualidades similares. Usando color, forma, posición y tamaño podemos comunicar a los usuarios las diferencias entre los tipos de elementos visuales y la importancia que cada uno de ellos tienen dentro de la web


CLIENTE

28

Según la ley de la figura-fondo, tendemos a focalizar nuestra atención sobre un objeto o un determinado grupo (figura) destacándolos del resto que los envuelven (fondo). De esta forma podemos tomar decisiones.

El uso de un call to action es un ejemplo muy claro en el que el usuario centra su atención sobre un elemento principal que se diferencia claramente.

Como en el caso de las web de los Cines Yelmo donde el botón "Consigue tus MOVIEYelmo Gratis" atrae nuestra mirada y nos invita a hacer clic.

La estética condiciona la percepción. La apariencia estética afecta a nuestra percepción de las cosas y a nuestras emociones. Nuestros problemas de interacción con un producto parecen disiparse si tienen un diseño adecuado y visualmente atractivo.

Usabilidad y diseño deben complementarse. El diseño visual juega un papel primordial en la percepción de calidad de un sitio web. Conocer el impacto que la tipografía, legibilidad, énfasis, estilo, teoría del color, espacio, composición o el equilibrio visual tienen en el usuario favorece la Interacción Persona Ordenador (HCI).

De modo que los sistemas formales nos ayudan a alcanzar metas de usabilidad más altas de las que podríamos alcanzar empleando criterios estéticos personales; ningún diseño de interacción concebido desde la intuición será válido.

Siguiendo con el ejemplo del sitio web de Yelmo cines, podemos observar como una buena conceptualización y jerarquización del contenido del sitio, acompañado de un diseño visual de calidad logramos mejorar la experiencia de usuario.

Una correcta simbiosis entre usabilidad y diseño es la clave de un buen e-commerce ya que evita los problemas principales de un sitio web como el abandono, la pérdida de clics o los procesos de compra sin finalizar.


CLIENTE

29

2.9. Pautas para la creación de sitios web usables

Los usuarios deben ser capaces de manera sencilla, rápida e intuitiva de utilizar cualquier aplicación web, después de todo, una aplicación web útil, no sirve de mucho si da dolor de cabeza cada vez que la tenemos que usar y muchos usuarios eventualmente se darán por vencidos y buscarán alternativas más fáciles de usar.

Aunque es importante recibir feedback de los usuarios de prueba y finales, no es bueno fijarse tanto en tood lo que dicen, sino más en lo que hacen.

Según Henry Ford “si le hubiese preguntado a la gente ¿Qué necesitaba?, me hubiesen dicho caballos más rápidos”.

Consistencia y Estandarización.

Es muy importante mantener la consistencia. De por sí, para el usuario ya es difícil familiarizarse con una herramienta nueva, no lo hagamos más complicado con inconsistencias. Los errores más comunes de esto son:

Etiquetas en los botones. Debe escoger una etiqueta que explique la acción que realiza cada botón, y mantenerla junto con el formato a lo largo de la aplicación.

Por ejemplo, botones de Iniciar Sesión y Registrarse.

Orden en los menús. A veces el orden del menú es: “Guardar, Eliminar, Cerrar” y en otras pantallas es “Eliminar, Guardar, Cerrar”. Esto desconcierta a los visitantes. Los usuarios deben acostumbrarse a realizar trabajos mecánicos en las pantallas, cambiarles el orden de los menús les impide esto.

Posición de los botones. En algunos formularios el botón para Guardar parece en sitios diferentes. Esto es desconcertante, es necesario un esquema fijo. Los usuarios quieren utilizar de manera rápida y mecánica las pantallas de nuestra aplicación, por esto la consistencia en el posicionamiento es tan importante.

A los usuarios les gusta trabajar en lo que ya conocen, los botones tienen que parecer botones, los checkbox deben parecer checkbox y no confundir al usuario con elementos extraños que no están familiarizados.

Llamado a la acción llamativo.

Un visitante no debe nunca perderse en nuestro sitio web o aplicación. Es muy importante guiar al usuario por el flujo correcto para evitar errores y repeticiones.

Por ejemplo, ¿para qué esconder los “Call to Action” (llamadas a la acción) si queremos que el usuario haga clic en ellos?

Estas llamadas deberían ser lo más grande y evidentes dentro del diseño de la aplicación. Así como, distinguirlos notablemente de los elementos circundantes y otras acciones que llevan a un flujo menos óptimo.


CLIENTE

30

Feedback.

Hay pocas cosas peores en una aplicación web que no saber si el clic, por ejemplo, en Aceptar funcionó o no es por esto que dar información visual cuando un usuario interactúa es esencial. Hay tres tipos básicos de feedback que les podemos dar a nuestros usuarios:

Cargando. Podemos utilizar un Progress Bar o Wheel como el famoso circulo cromático en OSX de la Apple, o el reloj de arena en Windows.

Ejemplos de diferentes tipos de barras de progreso,

Éxito. Podemos mostrar un mensaje de confirmación cuando todo salió bien.

Error. Los mensajes avisando de fallos o errores deben ir acompañados de las explicaciones oportunas.

El Above the Fold.

Según un estudio de Jakob Nielsen sólo el 23% de los usuarios hacen scroll en su primera visita a una página web, esto significa que el 77% de los visitantes no verá lo que hay debajo, sino que sólo van a ver el contenido que está Above the Fold (es decir, el área de la página que se ve en la pantalla sin tener que hacer scroll hacia abajo).

Esto no quiere decir que se deba incluir todo en el área superior de la página, simplemente hay que hacer un mejor uso de esta área. Si colocamos mucho contenido sólo hará que esta sea inaccesible, cuando el usuario ve demasiada información, no saben por dónde empezar a buscar. Mientras que si colocamos muy poco, no invita al usuario a revisar el resto.


CLIENTE

31

Los elementos básicos para mostrar son:

Nombre y logotipo de la aplicación, servicio o compañía.

Propuesta de valor, es decir, los más importantes y mayores beneficios de uso para el usuario. Por qué no debe abandonar el sitio web.

Menú de navegación de las secciones principales.

Llamado a la acción, para el usuario deberían ser OBVIOS los próximos pasos (donde registrarse o descargar lo que ofrecemos) si le interesa lo que vio, o invitarlo a tomar estos pasos inclusive si no le interesó en primera instancia.

Complementa la navegación con breadcrumbs o miguitas de pan.

La navegación de una aplicación es uno de los elementos más importantes, está debe ser directa y muy clara. Aquí es donde entran los breadcrumbs, esto les da a los usuarios una idea de dónde se encuentran parados en la aplicación, lo que hace que se sientan en control y confianza con el uso de tu aplicación web.

Ejemplo de miguita de pan en la aplicación AppleStore

Tener unos breadcrumbs visibles en la parte superior de la página le indica al usuario la jerarquía de la navegación paso a paso.

Muchos clics para llegar a donde los usuarios quieren es frustrante, y nunca deben jugar a adivinar dónde están las cosas, porque entonces van a tener miedo de explorar por no arriesgarse a estar aún más perdidos.

2.10. Evaluación de la usabilidad

Existen diversos métodos para evaluar la usabilidad de una página web. A la hora de decidirnos por uno debemos considerar diversos factores, como los recursos disponibles para evaluar (recursos humanos, recursos económicos, tiempo, etc.), la fase de implementación en que se encuentra la web (planificación, diseño, creación, etc.), los conocimientos del evaluador, el acceso directo o no a los usuarios, etc.

De forma general, podemos establecer una primera diferencia en base a si la evaluación se realiza de forma automática o manual (por personas):

Evaluación automática: se refiere al uso de herramientas software creadas de forma específica para este fin. Este tipo de herramientas ofrece una medición precisa y normalizada, y permite identificar aspectos como vínculos rotos, alineación correcta del texto, revisión de formularios web, etc.

Un ejemplo es PROKUS es un software de la universidad alemana de Karlsruhe que mide la usabilidad basándose en la ergonomía como criterio de calidad principal.

Evaluación manual: se refiere a las mediciones hechas por personas, y es una de las mejores formas de evaluar la usabilidad. Las personas pueden ser usuarios o expertos.


CLIENTE

32

Un listado bastante completo de los métodos de evaluación lo encontramos en la página de usabilidad de la UE y en el sitio web del Departamento de Salud de EEUU, donde también encontramos la Guía de usabilidad.

Recuerda…

Los usuarios requieren de forma primordial para no sentirse desorientados que los contenidos aparezcan regularmente en las mismas ubicaciones.

Es muy importante focalizar la primera mirada a un sitio web.

Los sitios webs tienen que ser fáciles de usar para ser usables.

Hay tres tipos básicos de feedback que les podemos dar a nuestros usuarios: Carga, éxito y error.

Los gráficos atraen la mirada rápidamente.

Los gráficos introducidos en un bloque circular son más atractivos.

Los gráficos tienen mucho peso visual por lo que hay que pensarse muy bien la cantidad a incluir.

El validador de código desarrollado por la Fundación CTIC es el TAW.

El nivel de conformidad Doble-A implica que no se han satisfecho los puntos de la prioridad 1.

La accesibilidad web favorece la interactividad de los sitios web.

Es conveniente usar formularios de registro cortos.

El tamaño de la fuente influye en la accesibilidad.

Necesitamos un plugin para ver vídeos en Flash

Los códecs DivX y XviD tienen bastante capacidad de compresión y una calidad aceptable y son admitidos en los ficheros AVI.

No es conveniente dar saltos entre encabezados HTML.

Las páginas web estáticas su objetivo final es mostrar información permanente utilizando los elementos del lenguaje HTML que no aporta grandes efectos y sobretodo no permite la interacción entre usuario y sistema.

Applet es un componente de una aplicación que se ejecuta en el contexto de otro programa como puede ser un navegador web.

Una casilla de verificación es un pequeño cuadrado que podrá ser marcado o desmarcado según interese al visitante.


CLIENTE

33

3. RECOMENDACIONES SOBRE LO QUE NO DEBES HACER EN EL DISEÑO DE UNA PÁGINA WEB

3.1. Navegación y accesibilidad

A continuación se describen 18 puntos que nos recomienda sobre lo que no debemos hacer en el diseño de una página web con respecto a la navegación y accesibilidad:

1. Evita nuevas ventanas: Procura evitarlo abrir enlace en una nueva ventana o bien en una nueva pestaña.

2. Redimensionamiento automático de ventanas: Intenta que la ventana de tu web no se ajuste por completo a toda la pantalla es algo intrusivo, y podrá fastidiar a más de un navegante.

3. Música funcional: Procura que sea el mismo navegante quien actúe sobre el reproductor de música en un sitio web pulsando el botón de play. Y no sea el propio sistema que se active una vez que entre. Esto evitará tiempo de descarga, música recortada, etc.

4. Sin preámbulos: Evita crear una página introductora a tu web, ya sea con un logotipo, una firma, para seleccionar idiomas, o alguna "atractiva" animación flash.

5. Arranca directamente con el contenido de tu sitio. Cuantos menos pasos existan para que el usuario pueda encontrase con tus contenidos mucho mejor.

6. URLs simplificadas: Trata de evitar los nombres de dominio complejos ó largos, ya que tu dirección será más difícil de recordar y te alejará de los primeros resultados en los buscadores.

7. Menús desplegables: Lo más idóneo es que el visitante tenga toda la información a la vista, y las herramientas para navegar por el website. Las secciones que se encuentran ocultas o en lugares inapreciables podrían pasar inadvertidas.

8. Cuanto menos links aparezcan al principio de la página mucho mejor.

9. Detalles de contacto indispensables: Jamás, olvides incluir todos los detalles de contacto, para que tus visitantes puedan encontrarte fácilmente. Puedes añadir en tu contacto tu e-mail, teléfonos, direcciones, o incluso un mapa de ubicación.

10. Sitios misteriosos: Para poder captar de inmediato la atención de tus visitantes y evitar que abandone tu web debes hacerles saber de qué va tu web. No le hagas perder el tiempo y trata de ser claro todo lo que puedas y transmitirle el mensaje que ofreces en tu sitio. En este caso los gráficos pueden ser de gran ayuda. Busca imágenes "iconificadas", es decir, que guarden una semejanza directa con el contenido de tu página web.

11. Evita el desplazamiento horizontal: Ten en cuenta que la resolución de pantalla más utilizada por los usuarios es la de 1.024 x 768 píxeles, así que en lo posible trata de no exceder estos límites para no incomodar la navegación. La mayoría de las gentes están acostumbradas a realizar desplazamientos de forma vertical (la ruedecita) pero cuando es horizontal hacia la derecha o izquierda con los botones flechas resulta bastante incómodo.

12. Páginas excesivamente largas: Aunque el desplazamiento vertical no afecta la navegación normal de los sitios web, debes evitar que sean excesivamente largas. Todo en su justa medida: si al diseñar la web es indispensable incluir mucho texto, es preferible que mejores la estructura de la navegación. Por ejemplo incluyendo enlaces a las páginas subsiguientes como 1, 2 , 3, etc.


CLIENTE

34

13. Pies vacíos: Es indispensable que incluyas al final de tu página, cuando contiene muchos enlaces y textos, el enlace de Inicio ó volver al principio con un botón de flecha. Resulta mucho más cómodo para tus visitantes que puedan ir al principio sin tener que utilizar la ruedecilla.

14. No interrumpir el botón Atrás: Todos los navegadores poseen botones Atrás y Adelante, para retroceder o avanzar a través de las páginas visitadas. Bajo ninguna circunstancia hay que cortar esta función. Por ejemplo, cuando un enlace se abre en una nueva ventana, el botón Atrás no conduce a ningún sitio, ya que el navegador piensa (aunque no lo sea) que te encuentras en la primera página y no permite volver hacia atrás. Esto se observa cuando al acceder a estos botones de Atrás y Adelante no se encuentran nítidos sino sombreados e inactivos.

15. Evita los contenidos confusos: Algunas webs ofrecen diferentes versiones, de acuerdo a la velocidad de ancho de banda del usuario, su navegador, resolución, sistema operativo, etc. Otros ofrecen el mismo contenido en versión HTML (estático) y en Flash (dinámico). No agobie al visitante con una página de introducción a la web y que contengan muchas opciones antes de entrar de lleno en la página web, y ofrécele el contenido de la web lo más directamente posible.

16. Olvida las ventanas emergentes: Otro recurso ampliamente utilizado en los primeros años de la web, que en la actualidad es rechazado por casi todo el mundo. De hecho, casi todos los navegadores tienen, entre sus preferencias de configuración, la posibilidad de bloquear ventanas “pop-ups” automáticamente. De hecho si vas a permitir insertar estos tipos de ventanas en tu página debes saber que la mayoría de los usuarios la tienen bloqueada.

17. Líbrate de las estructuras complejas: Un factor fundamental para cualquier web luzca profesional y organizada es la utilización de una estructura de navegación simple. Esto no significa que incluyas pocos contenidos. Se trata de pensar de antemano, meditándolo tranquilamente, una manera simple y efectiva de organizar la navegación de tu website. Las estructuras de navegación confusa pueden ahuyentar a tus potenciales visitantes.

18. No presiones a tus visitantes: En muchos sitios es necesario registrarse como usuario para acceder a determinado tipo de contenidos. Más allá de lo que tú tengas para ofrecer en tu web, no obligues a tus visitantes a que se registren, a menos que sea absolutamente necesario. Pero no fuerces a que nadie te deje su dirección de email sin un verdadero motivo que lo avale.

3.2. Texto y contenidos.

En los siguientes 10 puntos se describen las recomendaciones sobre lo que no se debe hacer para diseñar la página web utilizando textos y contenidos:

1. Estilos en la tipografía: No subrayes ningún texto normal, ni le cambies su color original. Podría confundir al navegante haciéndole pensar que se trata de un enlace, cuando en realidad es texto que no conduce a ningún sitio.

2. Flash en su justa medida: Trata de no exagerar en el uso de animaciones Flash. Por un lado, aún existen muchos usuarios con navegadores que no muestran correctamente este tipo de contenidos. Por otro, las animaciones hacen que el tiempo de carga del sitio sea mayor. Además, algunas animaciones pueden molestar visualmente a los visitantes (algo así como un exceso de efectos especiales en el cine).


CLIENTE

35

3. Compatibilidad total: Aunque una mayor proporción de usuarios utiliza el navegador de Microsoft es un grave error crear una web exclusivamente para él. Es indispensable que te asegures de hacer un website totalmente compatible entre las diversas plataformas y navegadores. Mac OS X, Windows, Linux... Opera, Safari, Internet Explorer, Firefox… No todos los navegadores son iguales, ni tampoco interpretan CSS (hojas de estilos en cascadas) y otros lenguajes del mismo modo. Si tu web no se visualiza correctamente en todos los navegadores, perderás muchísimos visitantes.

4. Enlaces a primera vista: No debes esperar a que el visitante pase su ratón por un enlace, para darse cuenta de que se trata de algo “cliqueable”. Es importante que cualquier enlace incluido en la página seda fácilmente reconocible, y que se distinga del texto normal. Si utilizas un color, el estilo negrita o texto subrayado, sigue el mismo concepto a lo largo de toda la web, para que su navegación sea coherente.

5. Fuentes en miniatura: Aunque la estética es un valor totalmente subjetivo, algunas personas prefieren diseñar utilizando tipografías pequeñas, y otras, tipografías grandes. Pues bien, al crear un sitio web debes pensar en la legibilidad del texto sobre todas las cosas, y diseñar de acuerdo a un tamaño de fuente legible en todos los navegadores.

Aunque todos incluyen la posibilidad de aumentar el tamaño del texto, puede resultar molesto para muchos visitantes tener que utilizarlo para poder leer cómodamente.

6. Internet no es un libro: Aunque el contenido principal de tu sitio sea el texto, debes tener presente en todo momento que tus lectores no están con un libro en la mano, sino que están frente a la pantalla de un ordenador. Así que evita los grandes bloques de texto. Para que la lectura sea más confortable puedes insertar elementos que organicen el flujo de texto: encabezados, titulares, listas, o imágenes como iconos, harán la lectura mucho más fluida y entretenida para cualquier visitante.

7. Ortografía y gramática inexactas: Aunque es aplicable a cualquier soporte para comunicar texto escrito, es indispensable que hagas una revisión exhaustiva de la ortografía antes de publicar tu sitio web. Los errores ortográficos pueden espantar (literariamente) a muchos de tus visitantes, echando por la borda cualquier imagen de profesionalismo que intentes transmitir. Por otra parte, los errores en la sintaxis de trozos de códigos pueden hacer, por ejemplo, que algunas imágenes no se abran, que los enlaces no conduzcan a ninguna parte, etc.

8. Evita el texto parpadeante: Utilizando frecuentemente en los primeros años de la incipiente World Wide Web, el texto que titila (parpadea) resulta excesivamente molesto para la mayoría de los usuarios. Además, si quieres destacar alguna palabra u oración puedes utilizar otros recursos menos invasivos, como por ejemplo el texto en negrita.

9. Modifica los enlaces ya utilizados: Una de las características básicas de la navegación en Internet es la hipertextualidad, es decir, la posibilidad de ir saltando de un texto a otro, haciendo clic en enlaces preparados especialmente para tal efecto. Pues bien, si quieres que tu visitante no se pierda en las aguas turbulentas de tu web, haz que los enlaces visitados cambien de color. Habitualmente se atenúan con una tonalidad más suave. Así, nadie volverá a visitar un enlace de forma reiterada, ya que sabrá perfectamente los contenidos que ha visitado.

10. No caigas en la tentación de las “fuentes: Existen miles de tipografías en los ordenadores, y muchas de ellas son muy atractivas. Son tantas, que a veces no ves la hora de utilizarlas en algún proyecto gráfico. Pero ten cuidado: la pantalla del ordenador no es igual que el papel impreso, y muchas de estas fuentes resultan casi ilegibles desde la web.

Es preferible ser más conservador en este aspecto y no salirse de las denominadas fuentes “de palo seco”. Y si resulta indispensable utilizar estas tipografías no olvides ajustar correctamente su nivel de enfoque para optimizar su lectura en la web.


CLIENTE

36

3.3. Diseño e imágenes

En este otro apartado veremos 6 puntos recomendando sobre lo que no debes hacer en el diseño de tu página web con respecto al diseño e imágenes:

1. Encabezados gigantes: Algunos websites cometen el error de incluir grandes encabezados (generalmente imágenes JPEG o GIF), en donde incluyen un logotipo, algunas fotos, y hasta enlaces mediante un mapa de imágenes, haciendo que el encabezado sea enorme y antiestético. Piensa que los pixeles “valen oro”, y que una imagen enorme en la cabecera de la página está restando superficie al contenido de la web, a lo largo de todas las páginas. Si, por ejemplo, quieres mostrar la fachada de un edificio es preferible crear para ello una galería de imágenes.

2. Búsqueda a ojo: Ya conoces la historia de Google: gracias a un algoritmo de búsqueda causaron una revolución en todo el planeta. De modo que resulta vital para cualquier usuario la posibilidad de buscar y encontrar cualquier tipo de información disponible en tu página web. Incluye un buscador que pueda localizar cualquier palabra a lo largo y a lo ancho de tu web. Hazles la vida más sencilla a tus visitantes y obtendrás a cambio su fidelidad.

3. Rehúye de los colores estridentes: Puedes ser un excelente programador de sitios web pero no necesariamente ser un experto en teoría del color. Procura utilizar una paleta de colores coherente para que la web sea armónica y agradable a la vista de cualquier espectador visitante. Por ejemplo, juego con los colores de la portada del encabezamiento superior de tu página web, elige y reparte los colores que lleva este encabezamiento con los textos, menús, video inverso del texto, vínculos, fondos, etc., crearás un contenido y un aspecto de tu web más agradable.

4. No te excedas con la compresión JPEG: El formato JPEG es uno de los más utilizados en los sitios web, ya que ofrece un excelente nivel de compresión (las imágenes ocupan muy poco espacio), sacrificando a cambio un mínimo en la calidad de las fotografías o ilustraciones. Pero debes tener en cuenta que, cada vez que ejecuta el comando guardar en una fotografía en formato JPEG (ya sea en Photoshop, Image ready, o la aplicación que utilices), el algoritmo de compresión se aplica nuevamente. De modo que quizás sin darte cuenta, cada vez que haces cambios sobre una imagen JPEG y la vuelves a guardar, estás estropeando cada vez más la calidad de la imagen. Lo mejor es utilizar como fuente una imagen en formato TIFF, y exportar a JPEG cuando esté seguro de los cambios utilizados.

5. Evita los fondos confusos: Aunque parezca increíble, aún existen infinidad de sitios en cuyo fondo aparece una compleja textura, o un motivo que se repite infinitamente, hasta hacer prácticamente imposible una lectura de cualquier párrafo de texto. Olvídate de las texturas como fondo (aunque te perezcan muy bonitas, pueden estropear una buena web). En cuanto al texto sobre un fondo de color, procura hacer comprobaciones para encontrar un correcto constaste de luminancia.

6. No mezcles publicidad con contenidos: A menos que sea realmente indispensable, porque sea una página web de productos comercial, es preferible que evites insertar publicidad dentro de los contenidos de tu web.

Aplicación de técnicas de usabilidad y accesibilidad en el entorno cliente.

Internet

Transcript of Aplicación de técnicas de usabilidad y accesibilidad en el entorno cliente.