Un método sencillo para diseñar el interfaz de usuario de tu sitio web

telesketchDemasiado a menudo, empezamos a construir un sitio web de arriba abajo: pintamos unas cuantas cajas vacías (un área de trabajo y una columna lateral para el menú, por ejemplo) y después nos dedicamos a rellenarlas de contenido. El problema de este sistema es que acabamos con un montón de cosas en la página que son “de relleno, y que realmente no sirven para cumplir nuestros objetivos de diseño y de negocio

Afortunadamente, existen otros caminos. En el el blog de 37 signals nos proponen un método sencillo y efectivo para diseñar el interfaz de usuario de un sitio web. A ellos les ha ido siempre muy bien. Aquí va resumido:

1. Haz una lista con todas las cosas que esa pantalla debe hacer. Estas preguntas pueden ayudarte a descubrirlo: ¿Qué es lo que el usuario debe ser capaz de conseguir? ¿Cuánta información es necesario que se muestre? ¿Qué funcionalidades son necesarias para que los clientes completen un proceso? Una vez que hayas descubierto los requisitos, etiquétalos con números.

2. Define cuáles de estos elementos numerados tienen relación entre ellos, ya sea de manera espacial (uno va al lado del otro) o conceptual (tratan sobre el mismo tema). Asigna una letra a cada grupo de elementos relacionados.

3. Realiza un boceto (o varios) para cada una de las letras (que agrupan a los números).

4. Agrupa todos esos diseños en un diseño único, para hacer que todas las piezas formen una unidad.

El siguiente paso consistiría en elaborar un wireframe o maqueta.

Si todavía lo ves un poco abstracto, aquí tienes un pequeño ejemplo:

Haz una lista con los requisitos que necesitas:

1. Información de la compañía.
2. Información del usuario.
3. Enlace a búsqueda.
4. Fecha de creación.
5. El cambio de contraseña es una operación muy común.

Establece las relaciones entre cada requisito. Algunos estarán estrechamente ligados, y otros serán independientes. Se trata de ver qué impacto genera cada requisito en los demás:

A: 1, 2, 4
B: 3
C: 2, 5

Establece prioridades:

Lo más importante: A
Necesario: C
Estaría bien tenerlo: B

Dibuja cada “trozo o pieza” del interfaz: Desde el momento en que ya hemos agrupado los requisitos que están relacionados, podemos diseñar cada parte de manera individual sin preocuparnos por los posibles conflictos.

Une todas las piezas. Se trata de ponerlas todas juntas. Unos consejos:

– Piensa en las limitaciones que han surgido al efectuar los diseños individuales.

– Ten en mente la prioridad que has establecido.

– Busca un equilibrio.

– Y ponte a dibujar. Primero un boceto. Después obtendrás algo parecido a un wireframe.

Conviértelo en realidad: Puede que funcione bien en papel, pero que en pantalla genere algún problema. Así que llega el momento de hacer un diseño mucho más cercano al resultado final.

Más información sobre el método.