Lo probamos hace unos meses pero no estaba tan avanzado. Hace un par de semanas le dimos otra oportunidad, y ¡nos lo quedamos!

Pencil Project es una aplicación que se instala en Firefox, ligera y fácil de utilizar. Su proposito es ayudar a la creación de maquetas y prototipos de sitios web y aplicaciones.

En la fase de definición de un sitio web, conviene organizar los contenidos, jerarquizar los diferentes elementos, en definitiva hacer arquitectura de la información, todavía sin tener el diseño gráfico. Si las necesidades y prioridades se discuten en este punto, después los proyectos salen más fáciles y se evitan muchos problemas futuros.

Esta herramienta te servirá tanto para hacer prototipos de sitios web como de aplicaciones de escritorio o incluso para móviles o smartphones.

Dale una oportunidad a Pencil, y nos cuentas cómo te ha ido.

Muchas veces estamos pensando en un interfaz nuevo y tratamos de inventar cosas, cuando son patrones de diseño ya establecidos por la industria y basta con reutilizarlos adaptándolos a nuestro caso. Nunca viene de más recordar algunos muy básicos. En concreto aquí tenéis uno respecto a botones de acción:

Para diseñar un botón de acción (Enviar, Aceptar, Guardar etc.) se debe tener en cuenta que:

• Cuanto más grande, mejor: o mejor dicho, la probabilidad de que se pinche sobre un botón es proporcional a su tamaño. Aún así, todavía hay muchos ejemplos que no lo entienden así. Por ejemplo, en la siguiente pantalla la acción principal (una vez metidos los datos) tendría que ser que el usuario pinchara en Aceptar, ¿no?

• Que "parezca" pinchable: a veces queremos personalizar el diseño y ponerlo tan bonito, que al final ni parece un botón y el usuario no intuye a primera vista que sea para pinchar. El ejemplo anterior sirve para ilustrar este punto también. No sería más claro si tuviese la típica forma de botón formulario, simulando volumen?
• Un sencillo enlace es a menudo lo más claro: a veces ocurre que lo que mejor funciona es el clásico enlace en azúl y subrayado. A este respecto suelo recomendar la lectura del artículo Best practices de un desarrollo de Eduardo Manchó y su experiencia en Loquo.
  

Tests con usuario

Cuando se desarrollan sitios web es importante que se prueben con usuarios representativos. A veces los desarrolladores web tenemos prejuicios que no nos dejan ver la realidad y tenemos que aceptar siempre que puede que estemos equivocados y lo que hemos diseñado no sea lo que necesitaban los usuarios.

Para ello se realizan tests con usuarios. En un test de usuario se invita a un usuario lo más representativo posible para el sitio web que estamos probando y se le pone ante el sitio web que hemos desarrollado. Este test nos sirve para evaluar el sitio web en general, si se entiende qué es, cuál es su objetivo, qué se puede hacer, cómo navegar o cómo encontrar información. Por otra parte, se puede utilizar para probar una funcionalidad en concreto, algo más complejo que lo normal, como un sistema de inscripción, una compra u otra acción compleja.

Invitamos a un usuario y junto con un guía que le explica lo necesario, lo ponemos delante de un ordenador probando el sitio web. Mientras tanto, observamos su comportamiento y sensaciones durante el test.

Usability lab o laboratorio de usabilidad

Argazkiak.org | CodeSyntax usability lab © cc-by-sa: garaolaza

En la ampliación de CodeSyntax hemos preparado un espacio dedicado a ello. Básicamente se trata de dos habitaciones conectadas por un espejo-espía. Tenemos que prepararlo todavía en cuanto al audio, de forma que podamos oír también la conversación entre el guía y el usuario. Todavía no lo hemos estrenado, pero Lur, Mikel y Kere se han ofrecido para hacer de modelos para la foto.