De forma breve, los consejos que apuntan son:

• Minimizar el uso de los tag <div>
• Usar únicamente el tag  <div> para dar forma a la web: cabecera, barra lateral, contenido y pie de página (header, content, sidebar, and footer)
• El contenido de la web tiene que usar tags HTML semánticos (h1,h2,…p,…, strong,…), no hay que usar <div> para todo
• Hay que formatear (indentar) el código y añadir un comentario cuando se cierran los </div>

El post se lee bastante rápido, así que podeis echarle un vistazo.

A la lista anterior yo añadiría que usar tablas simplifica el desarrollo, así que usa tablas cuando lo creas conveniente.

Por una parte creo que soy pésimo diseñando webs (a nivel gráfico), sin embargo creo que me estoy volviendo bastante bueno en cuanto a usabilidad se refiere (mis horas me está costando).

Conseguir un interfaz que sea agradable a la vista e intuitivo en cuanto a usabilidad no suele ser fácil. Sobretodo porque muchas veces nuestra perspectiva está limitada, vivimos en nuestro mundo y creemos, de forma inconsciente, que los demàs piensan y razonan como nosotros. Obviamente esto no es así

El tema de usabilidad, al igual que el diseño,  puede ser considerado un arte. Si bien no hay recetas mágicas que nos digan como hacer que un determinado diseño sea bonito y usable, si que hay ideas y conceptos que nos pueden ayudar.

El libro de Don’t Make Me Think es un clásico, y es de lectura obligada, tanto para diseñadores como para programadores. El concepto que se me ha quedado del libro (varios años depués de haberlo leido) es el mismo que reza su título, no me hagas pensar. Si quieres que un usuario se sienta agusto en tu página web, no lo agobies con muchos enlaces, no pongas menús con 200 acciones posibles, si el usuario quiere hacer algo que lo encuentre fácil y lo pueda hacer en par de clicks. Cuantos menos clicks tenga que hacer y cuanto menos le hagamos pensar mucho mejor. Que la navegación por la página sea como un acto reflejo

Por otra parte, hace tiempo empecé a leer otro libro, que por cierto no he terminado, titulado The design of everyday things. Este otro libro, aunque está pensado y escrito desde la perspectiva de alguien que está diseñando cosas tangibles, cosas para el mundo real, es otro libro muy muy recomendable. Después de leer varios capítulos de este libro se me abrió un poco más la mente. Ahora soy consciente de que uno tiene que diseñar cosas de tal manera que las personas que las usen ni siquiera se den cuenta de que están ahi.

Seguramente más de uno se preguntará, por qué diseñar algo para que luego el usuario ni siquiera se de cuenta. La razón es muy sencilla, viene de la parte de usabilidad de un diseño, es muy fácil darse cuenta cuando algo está mal, cuando algo cuesta, pero si va bien uno ni se entera.

Por poner un ejemplo del mundo real, ¿no os ha pasado alguna vez, que intentais usar un determinado aparato o utensilio y siempre empezais a hacerlo mal? Ya no digo que no sea intuitivo, si no que sabiendo que se hace de la forma X vosotros lo empezais a hacer de la forma Y, y cuando os dais cuenta rectificais.

Pensad en el siguiente ejemplo superevidente de fallo garrafal. Imaginad que teneis un bote de mermelada que quereis abrir, y resulta que os poneis a abrir, a abrir, haceis fuerza y no hay manera. No se abre. Cogeis un paño de cocina por encima de la rosca, le dais le dais, nada. Cogeis un cuchillo, le dais golpecitos. Nada, que no se abre. ¿Por qué no se abre esta maldita mermelada? Resulta que la marca hace las roscas al revés, por lo tanto el sentido intuitivo que habeis desarrollado para abrir el bote, resulta que  lo cierra, mientras que cerrarlo lo abre.  Seguro que no volveis a comprar esa marca. Lo lógico es que las roscas, al igual que los tornillos, giren todas en el mismo sentido para evitar problemas de usabilidad.

Ahora un fallo no tan evidente que habreis observado más de una vez, si no en vuestra propia casa, en la de algún amigo/a (si no lo habeis observado probablemente no lo entendereis). No os ha pasado querer enchufar una determinada luz de la casa (la luz de un pasillo, del salón, etc…), y  resulta que encendeis otra. Y resulta que llevais años viviendo en la casa, y/o yendo a esa casa, y casi siempre os equivocais.  Pues bien, os hago saber que no es culpa vuestra. Vereis que le pasa también a más gente al utilizar esos interruptores. Normalmente, suele ocurrir en interruptores que controlan dos luces, y resulta que la luz más cercana a la puerta/habitación es la que enciende la luz más alejada (esto es lo que yo he observado al menos). Lección que podemos aprender: si un usuario mete la pata una y otra vez, a pesar de que es consciente y sabe como se tiene que hacer, el diseño falla.

Por cambiar el chip y dar un ejemplo de un buen diseño, siguiendo con el mundo real,  un gran acierto en diseño que me viene a la cabeza ahora mismo, son los muebles de IKEA. Dios mio, ¡¡¡que no tienen instrucciones!!! ¡¡¡Son 5 dibujitos!! Probablemente muchos de los muebles se puedan montar sin siquiera mirar instrucciones. ¿Por qué? A parte de que los dibujos de las instrucciones son muy sencillitos,  creo que la razón principal es que si  lo intentas montar mal, ¡las piezas no encajan! En los muebles de IKEA suele haber muy pocas combinaciones para montar algo. Sinceramente, dudo mucho que la gente de IKEA deje al azar el tema de que tornillos usar para encajar las distintas piezas en cada uno de sus muebles. Esta gente sabe lo que se hace. Sabe de usabilidad.

Hasta donde yo soy consciente hoy día, los aciertos en diseño son muy dificiles de detectar, y sin embargo detectar cuando algo le falla a un diseño es algo bastante fácil. Si sientes, aunque no sepas el motivo, que a un diseño le falla algo, es porque con un 99% de certeza, le falla algo.

El problema con los diseños, como he dicho al principio, es que son un arte, y tu puedes saber que está fallando X, pero señores, no hay receta para saber como arreglarlo. Depende de cada situación (imagino que habrá patrones de diseño para evitar errores comunes en determinadas areas).

Finalmente, recordad esto: si el usuario tiene que pararse a buscar que es lo siguiente que tiene que hacer, si tiene demasiadas opciones, si no encuentra lo que busca, si tiene que hacer varios clicks o navegar por varias páginas hasta llegar a donde quiere, o si el usuario siempre comete algún tipo de error una y otra vez, entonces el diseño, amigos mios, es mejorable.

Normalmente es fácil encontrar partes de una aplicación donde los tiempos de respuesta no son lo que deberían ser.

Para ilustrar un poco de lo que hablo voy a hablar del editor TinyMCE que hay en WordPress 2.6.3 y de porqué opino que los botones de añadir media está mal diseñados.

Cuando edito contenido y quiero meter una imágen en el post que estoy escribiendo, le doy al botón de añadir imagen:

Botones para añadir contenidos media en WordPress

El problema es que cuando hago click en ese botón, la aplicación no me muestra el formulario que yo he pedido, me muestra una barra de progreso como la siguiente:

Barra de progreso al clicar en añadir imagen

Esta barra de progreso, me tiene esperando el diálogo durante unos segundos, hasta que finalmente, tras mi espera sale el diálogo esperado:

Formulario para añadir imagen en WordPress

Ahora, habiendo visto que me tiene que salir un formulario, sabiendo que el servidor no tiene que precalcular nada, si no que simplemente tiene que enviarme los contenidos HTML de un formulario… ¿Porqué tengo que esperar 3 segundos?  ¿No puede la aplicación web símplemente embeder ese formulario en la página para que cuando yo haga click, me salga el formulario en 0 segundos? De hecho se ahorra una llamada al servidor.

Incluso en el caso donde se tenga que hacer una llamada AJAX al servidor, ¿por que no cachear el formulario? Así la siguiente vez que haga click, para añadir la segunda, tercera y cuarta imagen, los tiempos de espera serían cero.

Sin duda, son esos pequeños detalles, como los tiempos de respuesta, lo que hace que las aplicaciones web aún no estén a la altura de las aplicaciones de cliente de toda la vida. En cualquier caso, si uno se fija en la aplicación web que está desarrollando, normalmente no suele ser demasiado difícil darse cuenta de estos problemas y solucionarlos.

Minimizar el tiempo de respuesta no es lo más importante de una web, y desde luego no es una prioridad en un producto, pero es una de esas cosas que hará que mejore la experiencia de usuario. Es más, es de esas cosas que cuando el tiempo de respuesta es 0, el usuario no se entera, ni lo aprecia, pero cuando el tiempo de respuesta es de tan sólo unos segundos, frustra y martiliza a muchos muchos usuarios.