Ðcorbaxeo

El nuevo estándar, HTML5, nos promete una larga lista de cambios grandes e interesantes, tanto para usuarios como para profesionales del medio. Vamos a ver algunos de especial relevancia.

HTML5 proporciona a los desarrolladores una manera más sencilla de crear aplicaciones Web con más potencia y menos fallos.

Los usuarios verán las aplicaciones Web en tiempo real de forma más suave y con menos errores. Ya que HTML5 promete un camino más fácil para los desarrolladores en la creación de sitios web que se actualizan en tiempo real.

Los desarrolladores deben realizar complejas tareas de codificación que, fácilmente, pueden acabar introduciendo errores y haciendo que las aplicaciones fallen.

Bruce Lawson, que evangeliza sobre los estándares web abiertos de Opera Software, señala que al grupo que trabaja en el HTML5, se le asignó la difícil tarea de hacer que la especificación fuera más tolerante que sus predecesores, para que los sitios web más antiguos o mal codificados funcionaran mejor en navegadores habilitados para ejecutar HTML5. 

• Web Sockets: conexión permanente entre una página y un servidor.
  Una de las mejoras más interesantes que puede ofrecer HTML5 es la característica Web Sockets: proporciona un sitio web con una interfaz de programación de aplicaciones (API) que abre una conexión permanente entre una página y un servidor, para que la información pase entre ellos en tiempo real, (sin tener que hacer una solicitud cada vez que se quiere una actualización). Web Sockets promete una forma fácil de que los desarrolladores creen páginas web que cambien en tiempo real.
• Mayor velocidad y mejor funcionamiento:
  Las páginas se cargan más rápido (sobre todo en dispositivos móviles), y funcionan mejor, gracias a la red de comunicaciones de HTML5 y a un navegador de almacenamiento.
• Web Storage
  HTML5 también puede ayudar a que las aplicaciones web funcionen mejor cuando los dispositivos están desconectados (o intermitentemente) de Internet, como los teléfonos inteligentes. Una característica llamada Web Storage permite a las aplicaciones Web almacenar más datos en el navegador, recuperarlos de forma más inteligente, y controlar cómo los navegadores guardan ciertas partes de páginas para agilizar la carga.

Una fórmula mágica:

• Mejor manejo de formularios, reduciendo el código javascript:
  HTML5 también mejorará el rendimiento de los navegadores con un mejor manejo de los formularios: menos javascript, más velocidad de carga de la página…
• Funciones CSS diseñadas para trabajar con HTML5:
  Además varias características de la nueva versión de CSS, están diseñadas para trabajar con HTML5, haciendo a las páginas Web más sensibles a la entrada del usuario y permitiendo gráficos de alta calidad.
• Muchas web profesionales funcionan como aplicaciones de escritorio (suite de oficina o herramientas de edición de fotografías p.e.). Pero las funciones más sofisticadas dependen de conexiones que los desarrolladores crean entre diferentes tecnologías Web, como HTML, JavaScript y hojas de estilo (CSS). Esto hace a esos sitios más lentos y vulnerables a los agujeros de seguridad.
  Con las nuevas características de HTML5, como Web Sockets, también estos sitios serán más rápidos, potentes y seguros.
• Más interoperabilidad entre navegadores:
  Otra importante mejora es el ‘parser’ del HTML5. Es un analizador del navegador que lee las etiquetas utilizadas para construir una página y busca cómo mostrarlo. Esto hace que los navegadores sean más interoperables en la forma en que manejan el código mal escrito: el analizador especifica cuáles son las respuestas a los errores, en lugar de dejar que cada creador del navegador decida cómo manejar el código imperfecto. Esto ofrece una experiencia de usuario más sólida, sin importar el navegador que se utilice.
• Vídeo en el navegador, sin plugin, gracias a HTML5:
  HTML5 ha atraído la atención por su capacidad de mostrar vídeo dentro de un navegador web, sin necesidad de plug-ins como Flash de Adobe. Aunque esta no es la característica más importante de HTML5, ni mucho menos, está claro que es una gran novedad y alivio para los usuarios y que podremos disfrutar de lo lindo de este nuevo formato para el vídeo.
  
  YouTube acaba de anunciar que cambia el código para embeber vídeos. El nuevo código utilizará un iframe que permitirá ver los vídeos embebidos tanto en Flash como enHTML5, en función de la configuración del navegador del usuario.
  Por defecto se mostrará HTML5, cambiando a Flash siHTML5no está disponible.
  El ejemplo del nuevo código, mucho más corto:
  <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
  </iframe>

Naturalmente llevará su tiempo hasta que todo esto esté bien implementado.
Actualmente sólo Chrome, Safari, Firefox y Opera soportan la mayoría de las características de HTML5, (no todas).

Con este enlace podrás comprobar en qué medida tu navegador soporta HTML5. http://www.html5test.com/

Consideraciones personales:

"La base de HTML5 es implacablemente pragmática"

Bueno, sin duda un momento emocionante para los desarrolladores web, pero también los usuarios lo notarán bastante, sobre todo en algunos aspectos.

Y, sin duda, HTML5, también traerá nuevas normas.

Felicitemos al grupo de trabajo HTML5 y a todos los que están detrás de todo esto ya que estas innovaciones encaminadas a mejorar la web, no sólo permiten aumentar la sofisticación en el diseño y la funcionalidad de los sitios web, sino que contribuyen a reforzar la libertad del usuario y a abrir más el horizonte y las mentes…

…Alabados sean…!

Aquí te dejo algunos enlaces a contenidos muy interesantes sobre HTML5 para que vayas haciendo boca y te relajes ante lo que se nos viene con la implementación del nuevo lenguaje de marcas HTML5:

HTML5 gallery

Canvas Vídeo 3D

Chrome Experiments

SlidesHTML5Rocks – magnífica presentación y demo, en uno, (no se ve en IExplorer7).

Guía de HTML5 para desarrolladores web

Hojas de apoyo HTML5 y CSS3

fuente Technology Review

⁓ El usuario no se va a aprender tu sitio aunque te empeñes

Una de las frases más repetidas en este oficio es que hay que diseñar un sitio pensando en los buscadores, pero sobre todo diseñar para los usuarios. Esto último es la usabilidad y aunque parece obvio, en la web -y no sólo en ella-, se sigue diseñando contra el usuario.

Y es que hay que empezar por saber cómo es el usuario para poder diseñar pensando en él. Te presento al usuario:

- El usuario No tiene tiempo, no sabe informática, tecnología ni diseño web. El usuario no sabe inglés, No quiere probarlo todo, No quiere recibir órdenes, No quiere música, No quiere esforzarse, No tiene paciencia, No juega a las adivinanzas.

Y el usuario se deja influir, (si no, que se lo digan a Google).

Jakob Nielsen, (el padre de la Usabilidad) llamó la atención sobre este punto: Los visitantes pasan el 99% de su tiempo en otros sitios web. Sobre todo, los que han venido por el buscador, tienen otras nueve opciones a su disposición si no les gusta lo que ven.

Los usuarios cada vez tienen menos tiempo para comprar y quieren servicios completos pero sencillos y transparentes.

La mayoría prefiere sitios que equilibren el diseño y la sencillez.
El diseño debe ser armonioso y eficaz:

Combina creatividad y usabilidad eligiendo siempre la función sobre la forma.

En el anterior artículo te traje buenas herramientas para medir la usabilidad. Ahora te traigo una lista de control de usabilidad para una puesta a punto de tu sitio web:

⁓ Lista de control de usabilidad

• Equilibrio entre tecnología y necesidades del usuario. No dejes que la tecnología se interponga en la experiencia de usuario. Utiliza tecnologías compatibles, ligeras y sencillas. Muchas de las virguerías que encontramos en Flash, JS… etc se pueden hacer con HTML5 y CSS.
• Siempre que uses algo más allá de HTML, pruébalo en Internet Explorer.
• Optimiza la velocidad de carga de tu sitio. La rapidez es una ventaja que debe aprovecharse en el diseño de una tienda o sitio web. El usuario no espera, se va.
• Añade un vínculo bien visible a la página principal en todas las páginas del sitio.
• Vincula el logotipo a la página principal. Procura colocarlo arriba a la izquierda.
• Procura no utilizar más de siete opciones en tu menú de navegación. Hay que evitar a toda costa agobiar al usuario.
• Utiliza los conceptos estándar para las funciones estándar: "buscar" para las búsquedas, etc.
• Sé coherente, utiliza siempre la misma nomenclatura para las mismas cosas. Hay que evitar confundir al usuario.
• Reduce al mínimo el uso se términos extranjeros. Nuestro usuario no sabe idiomas.
• Evita la jerga técnica: términos informáticos o propios de internet.
• Adapta los textos a las características de tu sitio web.
• Utiliza un texto específico y descriptivo en los vínculos: evita cosas como "pinche aquí".
• Añade una descripción alt en las imágenes. Esto mejora la usabilidad, la accesibilidad y el SEO.
• Haz que las imágenes de los productos se puedan ampliar pulsándolas.
• Crea suficiente contraste entre el color del fondo y el del texto.
• Añade color de fondo a los div que llevan imagen de fondo. Olvidarlo es un error muy común. Para los usuarios que desactivan las imágenes, desaparece el contraste entre texto y fondo, convirtiéndose en texto ilegible.
• No engañes al usuario. Los vínculos deben llevar a donde prometen ir.
• Señala claramente los vínculos a archivos PDF como tal, y especifica su tamaño.
• Facilita la impresión de tus páginas, ofreciéndolo como opción.
• Ofrece tu contenido en otros formatos, como PDF o dispositivos móviles.
• Personaliza la página de error 404: transfórmala en algo humano y sensato.
• Resalta claramente todos los vínculos para que el usuario sepa que se pueden pulsar sin tener que investigarlos.
• Aumenta la zona de accion del vínculo para acertar a la primera: simpemente añadiendo padding alrededor del vínculo. (Esto es muy práctico y sobre todo para los teléfonos móviles).
• Pon un vínculo a tus datos de contacto (o los datos mismos) en un lugar bien visible en todas las páginas web del sitio.
• Añade una página con las indicaciones sobre la protección de datos en tu sitio web.
• Incluye un vínculo a tus datos legales en todas las páginas.
• Prueba todas las funciones en los principales navegadores.
• No lleves al usuario a otras páginas sin que ellos hagan nada. El usuario quiere tener el control.
• Música no, por favor.
• Procura que las aplicaciones den suficiente feedback al usuario. Muchas veces el usuario se encuentra ante una situación en la que no pasa nada, (sin saber que la operación se está realizando), y se va. Se evitaría con un simple: "operación en curso, espere un momento, por favor"
• Retroalimentación: incita al usuario a dejar su opinión. Esta es una útil prueba de usuario para medir la usabilidad de tu sitio web. Utiliza encuestas…

Usabilidad en la Tipografía:

• Una tipografía "sans-serif" facilita la lectura en la pantalla. Arial, Helvética y Verdana son compatibles con todos los navegadores y muy usadas. (Ahora Google ha sacado un directorio de fuentes).
• Un tamaño de fuente suficiente: de 9 a 16 píxel.
• Ancho de texto fijo y de 700 px. máximo.
• Un interlineado adecuado para una buena lectura: Estoy usando 1.65 em.
• Frases breves y concisas: que resuman los puntos clave y vayan al grano.
• Párrafos cortos, de menos de 5 líneas, a ser posible.
• Corrige los textos, por favor.
• Resalta en negrita los conceptos principales de los textos densos.
• Utiliza listas de boliche y numeradas:
• Utiliza títulos y subtítulos concisos y descriptivos.

Usabilidad en los formularios:

Pon especial atención en mejorar la usabilidad de los formularios. En este enlace tienes información completa y detallada. No obstante destaco algunos puntos importantes:

• Cambia el puntero del cursor en las etiquetas para avisar así de que hay un vínculo
• Limita tus formularios a lo realmente imprescindible.
• Asocia las tiquetas de formulario a los campos de formulario de entrada.
• Señala los campos que son obligatorios,
• Incluye mensajes de error adecuados.
• Envía automáticamente por e-mail el formulario rellenado como confirmación.

⁓ Conclusiones

Los servicios de internet tienen la gran ventaja de la inmediatez y la comodidad.
Pero para la mayoría de los usuarios usar un sitio web es algo con lo que quieren terminar cuanto antes para seguir con su vida.

A estas alturas ya te habrás percatado de que los usuarios esperan mucho de los sitios web y son muy poco tolerantes con los diseños poco funcionales: "Quieren Usabilidad"

Pues démosle Usabilidad en nuestras interfaces.

fuentes: "Usabilidad" de Jakob Nielsen

"Website Boosting" de Mario Fisher

Con estas herramientas podrás medir la usabilidad de tu tienda virtual o sitio web y descubrir que el hermoso jardín que para ti es tu web, es para otros una carrera de obstáculos.

⁓ herramientas de usabilidad

⁓ Navflow ⁓

Es un test de usabilidad para comprobar cómo los visitantes de una página web navegan por el contenido del sitio. Determina exactamente dónde el usuario hace clic y qué caminos sigue al navegar por el contenido, en unos minutos.
Puedes probar lo que quieras, desde sitios web a aplicaciones de escritorio, maquetas…
Sólo hay que subir los diseños de las diferentes páginas que componen una sesión típica de navegación en la web y decidir si queremos usar la comunidad de testeadores de navflow o mantener el proyecto privado para que podamos elegir nuestros propios usuarios.
Podemos participar de cualquier test existente en navflow.
Los resultados se muestran en forma de gráficos, de forma intuitiva y sencilla de entender, perfecto para que podamos tomar decisiones sobre alteraciones en la estructura del contenido.

⁓ UserPlus ⁓

Esta aplicación es una buena herramienta de usabilidad: permite registrar nuestros diseños y responder a una multitud de preguntas relacionadas con la usabilidad, obteniendo a cambio una puntuación que nos será de gran utilidad al presentar nuestro trabajo..
Muy útil como plataforma para tener tener bajo control los elementos clave de un buen diseño.
Hay que pedir una invitación para probarlo.

⁓ 20 herramientas para evaluar la usabilidad ⁓

En User Effect, Dr. Pete recoge 20 herramientas para evaluar la usabilidad, en un documento disponible en PDF.

Están clasificadas en 4 Tipos de herramientas de usabilidad:
I. Mapas de calor - Heat Mapping
Asignación de calor- Simples y accesibles herramientas de mapeo de calor que le permiten comprender visualmente el comportamiento del usuario: miden los clics de los visitantes y crean mapas visuales de la actividad del usuario por zonas..
Simuladores de rastreo ocular-
II. Pantalla de grabación – Screen Recording
Grabadores de pantalla – seguimiento de los visitantes a su sitio web para crear un video simulado de cada una de las sesiones de usuario.
III. Pruebas de usuarios -User Testing
Herramientas de pruebas de usuario – simula las pruebas tradicionales de usabilidad, basadas en tareas.
IV. Comentarios del usuario -User Feedback
Comentarios de los visitantes.

⁓ A destacar ClickHeat, ClickDensity o CrazyEgg ⁓

Con las que podemos obtener un buen informe de anlítica web, el Site Overlay (superposición de sitio): ver sobre la propia página el número de clicks que se han hecho en cada enlace.

Con estas herramientas también puedes segmentar los datos y saber qué hace un segmento de usuarios con respecto a otro. Por ejemplo, los clientes contra los que no lo son. O los que vienen por Adwords contra los que vienen por tráfico directo o por los buscadores.

Gemma Muñoz nos ofrece un interesante artículo sobre la relación directa de la usabilidad con la analítica web.

⁓ Protofluid ⁓

Una herramienta interesante para probar tu web en distintos tamaños y navegadores: Sólo tenemos que indicar la url, el dispositivo y el tamaño, mostrando un popup con el resultado.

Con Media queries para CSS3, trucos y consejos para su correcto uso. Una aplicación que se presenta como una aplicación web en HTML5 y CSS3 para prototipado.

Una buena herramienta para quien trabaja con diseño web.

⁓ Conclusiones ⁓

Una vez probadas estas herramientas de usabilidad en tu tienda o sitio web y entendidas las razones por las que los usuarios salen escopetados al primer intento, deberás pasar a la acción.

No hay problema, para ello te he preparado una lista de control de usabilidad con la que tu trabajo será pan comido.

Y en los resultados lo verás.

Venga! Anímate… todo se arrreglará. ;-))