Lista de verifi cación de buenas prácticas de diseño

Lista de verifi cación de buenas prácticas de diseño 2

Estructura de la página• Atractiva para el usuario objetivo

• Logo/cabecera consistente

• Área de navegación consistente

• Título de la página de carácter informativo, incluyendo nombre de la empresa

• Área del pie de página – copyright, última revisión, email de contacto

• Uso inteligente de los principios del diseño gráfi co: repetición, contraste, proximi-dad, alineamiento

• Displays sin Scroll horizontal (1024×768 y resoluciones mayores)

• Equilibrio entre textos, gráfi cos y espacios blancos en cada página

• Contraste entre texto y fondo de las páginas

• La información repetida (cabecera y logo además de la navegación) no debe ocu-par más de un cuarto o un tercio de la parte superior de la página a 1024×768

• La página de inicio debe contener información relevante/interesante por encima de la línea de scroll

• La página de inicio debe cargarse en menos de 6 segundos desde su petición

Compatibilidad con los navegadores• Compatible con las versiones más populares de Internet Explorer (8+)

• Compatible con las versiones más populares de Firefox (5+)

• Compatible con las versiones más populares de Opera (10+)

• Compatible con las versiones más populares de Safari (Mac y Windows)

Lista de verifi cación de buenas prácticas de diseño 3

Navegación• Los enlaces de la navegación principal están claramente resaltados en todas las pági-

nas de site de forma constante

• La navegación es sencilla de utilizar

• Si la navegación principal está construida mediante fl ash o imágenes entonces repe-tiremos de forma clara los enlaces en el pie de página y sólo con texto.

• La navegación está ordenada como una lista UL (accesibilidad)

• Las ayudas de navegación, sitemaps, breadcrums son utilizadas para mejorar la ex-periencia de la navegación

• No hay enlaces rotos

Color y gráfi cos• Utilización de colores bien diferenciados entre fondos y textos, limitando el número

de colores a 3 ó 4 además de los colores neutrales que se quieran utilizar.

• El color es utilizado de forma jerárquica

• Los colores tienen buen contraste con los textos utilizados

• El color utilizado en gráfi cas facilita la comprensión del sitio

• La gráfi ca es optimizada para que los tiempos de carga sean adecuados

• Cada imagen utilizada tiene una función clara

• Los tags de las imágenes utilizan el atributo alt para facilitar un texto alternativo a la imagen en el caso que el navegador o User Agent no soporte imágenes.

• Las imágenes animadas no distraen la atención innecesariamente y no se repiten o lo hacen pocas veces

Lista de verifi cación de buenas prácticas de diseño 4

Multimedia• Cada audio/vídeo/fl ash tiene una función clara

• Cada audio/vídeo/fl ash aportaq claridad al contenido, nuca distracción

• Se proporcionan subtítulos para cada archivo de audio o de vídeo utilizada(accesibilidad)

• Los tiempos de descarga de archivos de audio o vídeo están optimizados

• Los enlaces a descargas de plug-ins utilizados se proporcionan en la propia web

Presentación de contenidos• Utilización de tipografías comunes en entornos web. No proliferación de multitud de

tipos de letra distintos en una misma web.

• Utilización de técnicas de escritura HTML: encabezamientos, bullets… Utilización de espacios blancos que ayuden a la comprensión, sentencias cortas en párrafos resu-midos.

• Utilización jerárquica y consistente de los atributos tipográfi cos

• El contenido proporciona información relevante

• El contenido es organizado de forma consitente

• Mínimos clicks para llegar a cualquier contenido

• Línea de tiempo: la fecha de la última revisión y/o copyright es correcta

• El contenido no tiene información anticuada

• El contenido está escrito de forma adecuada y sin errores ortográfi cos

• El contenido proporciona enlaces de interés a otras webs

• Evitar el recurrido “pincha aquí” en los hipervínculos

Lista de verifi cación de buenas prácticas de diseño 5

Funcionalidad• Todos los enlaces internos funcionan

• Todos los enlaces externos funcionan

• Todos los formularios funcionan correctamente

• No hay errores de javascript