Ajax es una herramienta de enorme potencial para crear dichos comportamientos, pero también puede ser utilizada como instancia de aprendizaje a interfaces complejas. Este es el caso de shelfmates, un sitio web donde puedes tener tu biblioteca de películas, música, libros, entre otros… un delicious library web con menos funcionalidades.

En resumen, en shelfmates primero debes encontrar tus objetos en un buscador que usa Amazon como base de datos, luego arrastrarlos hacia alguna librería o al “backpack”, donde después de ordenarlos se visualizan en miniaturas que puedes cambiar de tamaño presionando ciertas teclas. Esto es un poco complicado de descubrir por si solo, pero estos tipos hicieron algo simple, pero muy inteligente.

Al momento de registrarte e ingresar por primera vez al sitio, vía ajax explican en una pantalla las herramientas e interacciones básicas que el usuario debiera saber. Haciendo de esta instancia, un pequeño aprendizaje a las funcionalidades que te podrás encontrar en el sitio.

Acá van las pantallas:

Algunos de los puntos más importantes que se estudian son:

• Ubicación y etiquetado del link (o botón) hacia el formulario
• Simpleza en el diseño de formularios
• Formularios de una sola página versus multi-página
• Alineación de los títulos (label) de cada input
• Campos obligatorios y opcionales

Es un articulo muy interesante para todos los que estamos interesados en mejorar el diseño de formularios o seguir tendencias y patrones de diseño efectivos y usables.

Enlace al articulo completo: Web Form Design Patterns: Sign-Up Forms

SmashingMagazine ya lanzó la segunda parte y final del estudio. Con esto, tenemos las conclusiones más importantes de los patrones de diseño de formularios de registro:

• 40% de los links hacia los formularios de registro tienen como nombre “sign up” y están ubicados en la esquina superior derecha
• 61% de los formularios tienen un diseño simplificado para evitar distracciones del usuario
• 93% de los formularios están desarrollados en una sola página
• 62% de los títulos de los campos están en negrita
• Hay una leve tendencia a usar las etiquetas al lado izquierdo, alineadas a la derecha
• Los diseñadores tienden a usar algunos campos obligatorios, como también algunos opcionales
• 84% de los formularios no tienen efectos de hover, active ni focus
• Sugerencias y ayudas
  • 57% son estáticas
  • 33% son dinámicas
  • 57% están ubicadas debajo del campo
  • 26% están ubicadas al lado derecho del campo
• Las validaciones estáticas son tan populares cono las dinámicas (no hay tendencia al uso de ajax)
• 82% de los formularios no utiliza email de confirmación
• 72% de los formularios utiliza confirmación de contraseña
• 48% de los formularios utiliza captcha
• 92% de los formularios no utiliza el botón “Cancelar”
• 56% de los formularios utiliza el botón “Submit” alineado a la izquierda
• 45% de os formularios utiliza la página de respuesta para invitar al usuario a continuar con la exploración de los servicios que ofrece el sitio

Por ende, los wireframes son la distribución visual y jerarquización de contenidos; y la esquematización de la interfaz; creando así un puente que conecta las etapas de Arquitectura de la información y Diseño de Interfaz. Además los wireframes son imprescindibles para definir los comportamientos en la interacción (recepción / respuesta) entre sistema y el usuario.

Al diseñar los wireframes hay que tener en cuenta que es en esta etapa donde se toman las decisiones de estructura, jerarquización de contenido e interacción. Esto se debe que al  momento de alguna corrección, estas se ejecutan mucho más rápido que en etapas posteriores, ahorrando una gran cantidad de tiempo, ya que se enfocan exclusivamente en la funcionalidad por sobre el diseño.

Tips para diseñar wireframes

Existen muchas herramientas (algunas específicas) para diseñar wireframes, dentro de los cuales personalmente utilizo Fireworks por su facilidad de manejo con vectores y textos.

Antes que todo, lo primero que se debe realizar es definir el tamaño de nuestro lienzo, que siempre debe estar optimizado para una resolución estándar, en este caso de 1024px de ancho.
Al momento de diseñar los wireframes pude detectar 4 puntos neurálgicos:

Detectar páginas tipo: Es el primer paso. Con mapa de navegación en mano se debe comenzar a definir la cantidad de wireframes por la variación de páginas tipo que tenga el sitio web. Las “páginas tipo” son las páginas o pantallas que son únicas entre si y cumplen la función de plantillas, ya que son perfectamente replicables y reutilizables entre otros contenidos similares.

Definir áreas críticas: es muy importante definir áreas y sub-áreas para diferenciar los contenidos. En el wireframe de ejemplo se puede observar que en un primer nivel hay una división de las 3 áreas principales: cabecera (header), estructura principal (main) y pie de página (footer); y en segunda instancia se sub-dividen según el contenido. Además es recomendable que estas áreas mantengan una misma distancia entre ellas, para así conservar una distribución homogénea.

Evitar cualquier tipo de distracción visual: como la función primordial de los wireframes es distribuir y jerarquizar visualmente los contenidos, en estos no debe haber ningún tipo de distracción que relegue la atención sobre estos aspectos. Por esto, siempre los wireframes deben ser diseñados en base a una paleta de grises, sin variación tipográfica, fotografías, logotipos (salvo que sea estrictamente necesario), ni ningún otro elemento gráfico que cause distracción con la lectura clara en la jerarquización visual de contenidos.

Esquematizar elementos gráficos: como los wireframes son esenciales para el diseño de interfaz, es acá donde se deben especificar la utilización de iconografía, fotografías y otros recursos gráficos, pero solo a nivel esquemático. Estos esquemas cumplen con la característica de ser replicables para reutilizarlos en los wireframes.

Conclusión

Los wireframes son un recurso primordial y es el nexo por naturaleza entre la arquitectura de la información y el diseño de interfaz, además nos facilita enormemente la etapa de diseño, ya que adelantamos muchas decisiones que, por error, se suelen definir en esta última.

Más adelante me enfocaré a la parte más técnica de cómo diseñar wireframes, donde pondré a disposición ejemplos y recursos para facilitar su creación. Por ahora, dejo un ejemplo de wireframe del próximo diseño de mi blog.

Obviamente este blog se está armando todavía, y tengo en proceso de diseño (front más específicamente) un theme propio, que estrenaré muy pronto. Mientras tanto no dejen de visitarme, chao.