Inclusión. Accesibilidad y Usabilidad web. » CSS

18 cosas que hacer y no hacer para mejorar la usabilidad de su web

Pablo López — Mon, 03 May 2010 23:20:57 +0000

Fuente: 18 Do’s and Don’ts Of Usability On The Web

Este artículo nos da 18 consejos de cosas que debemos hacer y de otras que debemos intentar evitar para diseñar una página web usable.

No utilice una rejilla para su diseño web: Las estructuras demasiado rígidas pueden condicionar el diseño y la distribución de los contenidos
No olvides el formulario de búsqueda: Sobre todo si tu web tiene muchas páginas. Si son pocas páginas no pasa nada si la arquitectura de la información y la navegación es correcta
Haz la navegación sencilla para encontrar y leer
No untilices el enlace mailto: para el contacto: Mejor siempre un formulario.
Utiliza las aplicaciones web que sea posible para testear la experiencia de usuario: Un par de pruebas de la web, puede ayudarte a corrgir una gran cantidad de errores.
No inundes las barras laterales con widgets: que no aporten valor al contenido de la página
Comprueba que tu web se bien en diversos navegadores
No hagas al usuario saltar al vacío al rellenar un formulario: Simplifica los formularios al máximo para que el usuario los puedas rellenar fácilmente.
Dales a tus páginas una estructura consistente
No olvides una hoja de estilos para los usuarios que quieran imprimir una página
Asegurate que tu página es fácil de hojear: A los usuarios les gusta “echar un ojo” rápido a la página web al llegar. Usar encabezados (h1,h2,), y cuadros destacados y de resumen facilitarán al usuario encontrar los contenidos que busca.
No introduzcas mas contenido en un espacio que el quepa comodamente.
Introduce la miga de pan en tus diseños: La miga de pan ayudará al usuario a saber entodo momento donde está y como volver al nivel anterior
Utiliza colores y contrastes adecuados para centrar la atención
No te olvides de revisar los enlaces rotos
No desprecies el pie de página y el poder que tiene: Aprovecha el pie de página para ofrecer enlacse a los artículos destacados, formularios de subscrición etc.
Utiliza wireframes en el proceso de diseño
No escribas para los buscadores, escribe para los lectores

Tambien te puede interesar

¿Cómo adapto un interfaz web para móvil?

Pablo López — Sun, 22 Feb 2009 21:53:02 +0000

Problema a resolver: Tenemos una web diseñada y me piden crear una versión adaptada para móviles.

La solución tiene que:

Mantener contenidos: No quieren tener que actualizar dos webs (cómodo para ellos)
Quieren que se mantenga la imagen de la web y de la entidad (nos permiten ciertas licencias)
Quieren que funciones todos los servicios (flash?, ajax?, java?)

Por suerte:

La web está ya diseñada siguiendo los standards y con una hoja de estilos separada: Esto nos permitirá jugar con la imagen de manera más simple y adaptar aquello que nos interese sin tener que depender del código generado por el CMS
No utiliza Flash, ni javascript, ni hay popups: Muchos móviles no soportan los embed y tienen problemas con plugins y scripts.
El gestor de contenidos tiene un sistema de plantillas: Lo que nos permitirá crear una plantilla adaptada si es necesario, sin cambiar para nada la actualización de contenidos.

¿Que hacemos entonces?

Tenemos claro que el interfaz gráfico es mucho más pequeño y las limitaciones son varias.

Ancho máximo 120px: Consideramos que el ancho máximo es 120px (a tener en cuenta en las imágenes sobre todo)
Rediseñamos la cabecera: Mantenemos el logo pero usamos una versión alargada, minimizando el espacio que ocupa.
Estructuramos los bloques: Evitamos crear varias columnas, de manera que la lectura sea totalmente lineal, y las líneas lo más largas posibles.
Cambiamos los mecanismos de navegación
1. Utlizamos la miga de pan como elemento principal de navegación. Si es necesario creamos un menú con las mínimas opciones necesarias, pero siempre intentando que sea un línea.
2. Movemos el menú principal al final de la página. Si alguien quiere ver toda la navegación, ahí la tiene.
Ajustamos las imágenes: Ponemos solamente las imprescindibles, y si se puede las optimizamos este medio (más pequeñas, mínimo peso)
Comprobamos las fuentes: las aumentamos para facilitar la lectura en las pantallas o las optimizamos probando en distintos navegadores móviles
Usamos medidas relativas: Evitamos siempre medidas absolutas para permitir que según sea la pantalla móvil se adapte todo el contenido.
Evitamos el scroll horizontal

La W3C nos da más recomendaciones, pero muchas de ellas ya se evitan si seguimos los estándares para la creación de páginas webs (tablas, frames, popups, plugins externos…)

Test W3c para móviles

Me parece que este blog tiene mucho que mejorar para los móviles.

Tambien te puede interesar

Algunas referencias del Chrome

Pablo López — Wed, 03 Sep 2008 22:12:02 +0000

No voy a ser el único blog que no hable de Chrome.

Os dejo algunas entradas de las que he ido leyendo que me parece que aportan detalles de interés.

Accesibilidad del Google Chrome

Atajos de teclado: Tiene muchos atajos de teclado pero no permite abrir las ventanas de Ayuda o la de Opciones.
Accesibilidad del Sistema operativo: No soporta el modo de alto contraste de Windows.
Mucha iconografia sin textos explicativos acompañándola.
No aparece ninguna mención WAI-ARIA

Fuente:Google Chrome Accessibility

Test compartivo de velocidad

Parece que el Chrome sí que tiene algo especial. La potencia de ejecución comparada con el resto de navegadores salta a la vista

Acid Test

Acid Test 2: bien

Acid Test 3: 77/110 Necesita mejorar… pero no es el único (FF3 66/100)

Mi Valoración: Promete pero aún le queda mucho que mejorar, por lo menos hasta que se empiecen a desarrollar extensiones y lo podamos tunear como nuestro FireFox.

Tambien te puede interesar

Webs para aprender CSS

Pablo López — Fri, 29 Aug 2008 20:33:50 +0000

Un recopilatorio de enlaces para seguir aprendiendo CSS:

¿Falta alguna de tus favoritas ?

Via: Six Revision

Tambien te puede interesar

Divs vacíos y dividitis

Pablo López — Wed, 16 Apr 2008 23:42:29 +0000

El w3c dice de un div:

Los elementos DIV y SPAN, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos.

Por lo tanto el uso de un

vacío se debería considerar incorrecto porque no estructura nada.

El uso de los divs vacíos es un recurso muy habitual que usan (usamos) para maquetar con CSS para conseguir que nuestras páginas tengan el aspecto que deseamos, como para conseguir las famosas “rounder corners” (esquinas redondeadas) en nuestra página, o otro tipo de efectos visuales.

Si partimos de la base de que la presentación de una web debe ser independiente del contenido y de las etiquetas que utilizamos para marcarlos y aportarles semántica, parece que no tiene mucho sentido utilizar unas etiquetas para etiquetar nada, o darle estructura, aunque los validadores automáticos no nos den error ni aviso.

Referencias de interés

Esperando las CSS3 y sus múltiples fondos.
Rounder Corners sin div vacíos: Spanky Corner pero con uso,que valida tambien correctamente, del list-style-image fuera de una lista.

Tambien te puede interesar

No Related Post

IE8 supera el Acid Test 2

Pablo López — Wed, 19 Dec 2007 23:51:47 +0000

El Acid Test 2, es una prueba creada por The Web Standard Proyect para ayudar a los desarrolladores de navegadores a ver su a la hora de probar su cumplimiento de los estandards.

Según nos revelan en su blog el IE8 ya ha superado la prueba. Una gran noticia para los desarrolladores que aun seguimos aprendiendo continuamente nuevos trucos, hacks y recursos para conseguir que las webs se vean en I6.

Por cierto mi version de Firefox 2.0.0.11 no la pasa.

Algunas pruebas del Acid Test 2

IE8

IE7

Firefox 2.0.0.11

Tambien te puede interesar

Definiendo las sombras en CSS3

Pablo López — Mon, 17 Dec 2007 21:01:53 +0000

Desde CSS.info se nos pregunta a los desarrolladores como nos gustaría que pudieran ser la sombras de las cajas para definirlas así en en el standard.

La duda surge a partir de definir la propiedad box-shadow en la que se intenta definir la sombra pero, ¿y los bordes? ¿y las opacidades? ¿y los ángulos? ¿y las distancias?

Resulta curioso ver como se están definiendo las normas con la participación directa de los desarrolladores, tenía una idea más oscura de un grupo de gurús encerrados en una habitación debatiendo. Parece que la Web 2.0 tiene cosas buenas.