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.

1. 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
2. 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
3. Haz la navegación sencilla para encontrar y leer
4. No untilices el enlace mailto:  para el contacto: Mejor siempre un formulario.
5. 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.
6. No inundes las barras laterales con widgets: que no aporten valor al contenido de la página
7. Comprueba que tu web se bien en diversos navegadores
8. 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.
9. Dales a tus páginas una estructura consistente
10. No olvides una hoja de estilos para los usuarios que quieran imprimir una página
11. 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.
12. No introduzcas mas contenido en un espacio que el quepa comodamente.
13. 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
    
14. Utiliza colores y contrastes adecuados para centrar la atención
15. No te olvides de revisar los enlaces rotos
16. 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.
17. Utiliza wireframes en el proceso de diseño
18. No escribas para los buscadores, escribe para los lectores

Tambien te puede interesar

• La importancia de un diseño centrado en el usuario
• Usabilidad: No por ser más intuitivo y simple es mejor. ¿Y el aprendizaje?
• Redactar web para una lectura rápida
• Fases del diseño de una web
• No existe usuario malo. Existen diseñadores inconscientes.

1. Promoción
2. Segmentación
3. Señales visuales
4. Una imagen vale más que mil palabras
5. Cajas de búsqueda
6. Versión de la web para dispositivos móviles
7. Retroalimentación
8. Redundancia
9. Mejora contínua
10. Bibliotecarios (Servicios)  24/7

Leyendo los consejos que nos da, y pensando en cualquier sitio web podemos observar que las directrices para hacer una web de calidad son similares para cualquier web y sólo hay que saber utilizar y explotar aquellas que son más beneficiosas para el objetivo de nuestro desarrollo.

Tambien te puede interesar

• No Related Post

La solución tiene que:

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

Por suerte:

1. 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
2. No utiliza Flash, ni javascript, ni hay popups:  Muchos móviles no soportan los embed y tienen problemas con plugins y scripts.
3. 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.

1. Ancho máximo 120px: Consideramos que el ancho máximo es 120px (a tener en cuenta en las imágenes sobre todo)
2. Rediseñamos la cabecera: Mantenemos el logo pero usamos una versión alargada, minimizando el espacio que ocupa.
3. Estructuramos los bloques: Evitamos crear varias columnas, de manera que la lectura sea totalmente lineal, y las líneas lo más largas posibles.
4. 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.
5. Ajustamos las imágenes: Ponemos solamente las imprescindibles, y si se puede las optimizamos este medio (más pequeñas, mínimo peso)
6. Comprobamos las fuentes: las aumentamos para facilitar la lectura en las pantallas o las optimizamos probando en distintos navegadores móviles
7. Usamos medidas relativas:  Evitamos siempre medidas absolutas para permitir que según sea la pantalla móvil se adapte todo el contenido.
8. 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

• CERMI denuncia que Facebook no respeta las pautas de accesibilidad
• 10 pasos para hacer más usable tu tienda online
• 18 cosas que hacer y no hacer para mejorar la usabilidad de su web
• Algunas referencias del Chrome
• Webs para aprender CSS

Existe mucha literatura e información sobre tipo de test, metodologías, etc, pero se le da muy poca importancia al que en esencia es el protagonista: el usuario; éste es al fin y al cabo quien hace las “pruebas con usuarios reales” .

¿Vale cualquier persona para hacer un test?

La pregunta parece de perogrullo. Si hacemos un test de una web, cualquiera que pueda ser usuario podría hacerlo.

Esta afirmación nos lleva a la respuesta políticamente incorrecta. No vale cualquier persona. Sólo nos valen aquellas que puedan ser usuarios de nuestra web.

Yo no valdría para hacer un test real de una página japonesa, por ejemplo: http://www.2-u.co.jp/  Una prueba como: “¿Cuál es el teléfono de atención al cliente?”  Ni idea. ¿Pero sería capaz de comprar? ¡Casi! Me quedé en el formulario de compra. ¿Les importa a ellos?

Deberes: Intentar comprar tres botellas de vino para el cumpleaños de mi padre.

Por lo tanto no vale cualquier persona. Solo un posible usuario. El concepto “pruebas con usuarios reales” toma sentido.

¿Que características tiene que tener un “usuario real”?

El concepto básico es el de una muestra reprensentativa. Pero, ¿cuál es la muestra representativa?.

Por ejemplo, viendo el post de Meneame en el que muestra las visitas por navegadores  nos damos cuenta que esta web tiene un público un tanto especial: ¡60% usuarios de Firefox!

Es un factor más a tener en cuenta en este caso, además de los demográficos habituales: edad, nivel de estudios, sexo (¿machismo? ¿feminismo?), uso de internet, ¿compra en la competencia y no en la mía?…  Los grandes estadistas y sociólogos pueden seguramente introducir muchas más variables.

Conclusión: Es muy complicado hacerlo a la perfección, o lo que es lo mismo: muy caro.

Así que tendremos que valorar dos patrones básicos:

• Los usuarios (medios)  que tenemos, y
• Los usuarios (medios) que nos gustaría tener.

que casi nunca coinciden (normalmente queremos tener más y mejores). Ya que no van a ser muchos, pidamos:

• Que navegue por internet, pero no mucho.
• Que haya comprado algo por internet, pero solo alguna vez.
• Que sea capaz de pensar en voz alta mientra navega, pero que tenga las ideas claras.
• Que pueda comprar el producto que vendemos.
• Que esté familiarizado con la jerga básica de internet como el “carrito de la compra”.
• Que tenga una tarjeta de crédito a mano, y los números de seguridad de su banco.
• Que sea capaz de contarnos qué le pareció la web, pero sin meterse en detalles del estilo “ese menú no me gusta; debería ser más grande y color rojo y estar en la parte de la derecha” (¿Quién se supone que es el experto? ¿O el cliente siempre tiene la razón?)
• Que conozca los productos, pero que no sea un especialista en el sector.

¿Cuántos?

Nielsen habla de cinco usuarios y de un mínimo de dos, aunque con excepciones: si la web es muy grande, o si los públicos son muy diversos.

Conclusiones

1. Para conseguir los resultados óptimos:
   1.  La selección de la  muestra tiene que ser óptima.
   2. La persona que tiene que sacar conclusiones tiene que saber interpretar muy bien todos los datos
2. La frase típica que se le dice al usuario “estamos probando la web, no su capacidad” es incompleta. Siempre se pone a prueba el sistema web y al equipo que tiene que sacar conclusiones. La importancia de este equipo aumenta cuanto menor es la muestra.
3. Cualquier prueba que se haga, y en cualquier cantidad, es mejor que ninguna. Una prueba con usuario nos puede ayudar a descubrir detalles de usabilidad y detalles técnicos como un enlace roto, un proceso que no funciona correctamente, y eso tambien es usabilidad.

Tambien te puede interesar

• 18 cosas que hacer y no hacer para mejorar la usabilidad de su web
• Contenido y Usabilidad web
• Usabilidad: No por ser más intuitivo y simple es mejor. ¿Y el aprendizaje?
• La importancia de un diseño centrado en el usuario
• 10 malententidos sobre la usabilidad y sus matices

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

• ¿Cómo adapto un interfaz web para móvil?
• Webs para aprender CSS
• IE8 supera el Acid Test 2
• Definiendo las sombras en CSS3

1. Respetar el trabajo de otros diseñadores web
2. Ser honesto al hablar de tu experiencia y tu capacitación profesional
3.  Ser siempre honesto con los clientes y explicarle los pros y contra de cada decisión
4. Mantener la confidencialidad de todos los clientes
5. Reconocer la autoría de otras personas que han colaborado en el proyecto
6. Diseñar siempre para conseguir un acceso universal a las contenidos
7. Respetar los estándares
8. …

Hasta aquí puedo seguir yo

Tambien te puede interesar

• No Related Post

Hay clientes poco exigentes y clientes que quieren ver sus resultados, que se cumplan sus objetivos, al tener un sitio, más allá de bonitos afiches transformados en sitios Web.

Estando de acuerdo con Carlos Neri, cómo no, hay un detalle que me gustaría aclarar. Yo no me encontré con ningún cliente que me dijera “no quiero una web que cumpla los estándares”. Básicamente porque no saben que existen y no tienen por qué saberlo. Me tienen pedido webs saltarinas, efectistas, de muchos colores y movimiento, con un contador a la vista para presumir de sus visitas, de todo… pero nada que no hayan visto antes en la web de una amigo, de la competencia o en la televisión.

Hace tiempo que renuncié a hablar a mis clientes de la accesibilidad web y de sus principios técnicos y de sus fundamentos. Simplemente los aplico, les hablo de las maldades del Flash, de las ventajas de hacer webs simples y que se vean bien en todos los navegadores presentes y futuros (ejem, ejem).

No es responsabilidad del cliente saber de estándares, ni de markéting online,  ni de diseño su única obligación es fiarse de los que se supone que sabemos algo más que ellos de diseño web.

Si existiese un código deontológico del diseño web… ¿existe? sino creo que ya somos un sector que lo va necesitando.

Tambien te puede interesar

• Diseño de botones call-to-action, las claves del éxito
• 10 pasos para hacer más usable tu tienda online
• Usabilidad: No por ser más intuitivo y simple es mejor. ¿Y el aprendizaje?
• Alzheimer y páginas web
• Fases del diseño de una web

El usuario está acostumbrado a oír un “click” en el momento de la captura de la imagen. Un “beep” puede significar cualquier cosa, congelar la imagen una vez realizado el disparo puede significar que la cámara  se estropeó. El sonido que simula las antiguas cámaras es anacrónico, inapropiado y es un ruido más innecesario en el mundo… pero es útil para el usuario. Y esto, amigos, es la Usabilidad.

Y en Electric Sports Car, Fake Engine Sound… nos hablan de los silenciosos que son realmente los coches eléctricos y como intentan simular el sonido de un coche deportivo…

Vía: When sound design fails

Tambien te puede interesar

• Reducir el porcentaje de rebote, 10 consejos
• Diseño de botones call-to-action, las claves del éxito
• 18 cosas que hacer y no hacer para mejorar la usabilidad de su web
• Como utilizar los iconos para mejorar el diseño de su web
• Contenido y Usabilidad web

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 <div> 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

Desarrolla técnicas de lectura rápida para conseguir encontrar lo más relevante en una web en segundos y conseguir extraer la mayor cantidad de información en el menor tiempo posible.

Facilitar esta labor al usuario nos permitirá:

• Que encuentre en nuestra web el contenido que le interesa.
• Que no pierda el tiempo en nuestra web si no podemos ofrecerle lo que busca.

Redacción web para un lectura rápida

• El título debe estar redactado de la forma más directa posible y estar claramente destacado.
• La utilización de subtítulos dentro de cada página también constituye un importante elemento que ayudará al usuario a leer más fácilmente el contenido del mensaje.
• Usar encabezados para organizar el textos.
• Crear una clara jerarquía visual en cada página.
• Utilizar estilo de redacción de pirámide invertida, comenzando por la conclusión y finalizando con los detalles.
• Utilizar cuadros destacados de resumen.
• Incluir negritas para remarcar palabras clave que puedan guiar la lectura dentro de cada párrafo.
• Los bullets (viñetas) y las listas numeradas detienen el efecto “scanning” y llaman la atención hacia puntos importantes del texto. En general se acostumbra utilizar listas numeradas cuando el orden de los ítems es relevante y viñetas cuando la secuencia de lectura no lo es. En una misma lista, se sugiere un límite de nueve ítems.
• Separar las páginas en áreas cláramente definidas.
• Minimizar el ruido.
  
• Los párrafos deben contener una única idea.
• Aprovechar las imágenes y gráficos (una imagen vale más que mil palabras).
• Usar ladillos. En textos largos deben insertarse una o varias palabras que anticipen el contenido de los párrafos siguientes. Deben ser cortos (escribir pensando en lo visual)

Fuentes

• Redactar para la web
• Escribir y redactar contenidos para internet
• 10 principios de un diseño web accesible
• Escribir para la red

Tambien te puede interesar

• Contenido y Usabilidad web
• 18 cosas que hacer y no hacer para mejorar la usabilidad de su web
• Reducir el porcentaje de rebote, 10 consejos
• Diseño de botones call-to-action, las claves del éxito
• Como utilizar los iconos para mejorar el diseño de su web