Entries Tagged 'Prototipado' ↓

Prototipo: Listado de listas

Listado de listas

He estado pensando cómo podría diseñar la interfaz de forma que:

  • fuera fácil de usar
  • muestre suficiente información como para saber el estado de las listas

teniendo en cuenta que en esta vista se deberá de poder:

  • crear nuevas listas
  • editar las listas
  • eliminar listas
  • compartir una lista
  • buscar sobre las listas
  • ver información sobre ellas

A la hora de ponerme con esta vista,  tengo claro que habrá un listado con las distintas listas y que al lado de ella se indicará si está o no completa. Para eso son los circulos que hay junto a cada lista. Este será de color X cuando esté completa y de color Y cuando no (no se qué color usar para cada caso por eso pongo X e Y).

También tengo claro que la edición tiene que ser “inline”, es decir, al hacer doble click sobre el título de la lista, esta podrá editarse. Hasta aquí todo claro,  pero ¿cómo proporciono la posibilidad de borrar y compartir una o varias entradas?, se me ocurre que permitiendo seleccionar varias listas y teniendo un botón/icono que lance la acción de borrar/compartir (en la imagen de arriba se contempla esta idea).

Ahora me pregunto, ¿realmente va a merecer la pena hacer borrados y comparticiones simultáneas de grupos de listas cuando a lo sumo se van a tener 10 en pantalla (en cada página)? ¿Tan incómodo puede ser hacerlo una a una?

Con estas dudas en la cabeza  he planteado un prototipo en el que no se puedan realizar acciones a grupos de listas de forma que todas las listas tengan un icono para cada acción. Esto iconos aparecerían cuando se pasara el ratón por encima del título de la lista.

Listado de listas 2De esta forma se podría añadir la opción de indicar a qué categoría pertenece una lista, añadiendo un campo más, debajo del campo para indicar el título de la nueva lista.

Finalmente, me quedo con el segundo prototipo porque lo veo más limpio.

Prototipo: Formulario de registro

Pués eso, el nuevo prototipo para el formulario de registro:

Formulario de registro

Formulario de registro

Un formulario con los datos básicos para poder registar usuario y poder enviarles correos.

Prototipo: Página de inicio

He estado dándole algunas vueltas al prototipo de la página de inicio y lo he dejado así:

Página de inicio

Página de inicio

La página de inicio quiero que sea clara, que te diga para qué sirve la aplicación y cómo comenzar a usarla. Para ello

se me ha ocurrido mostrar varios casos de uso a través de historietas usando el formato de tiras cómicas. Se que puede ser un poco complicado, porque puede llegar a confundir al usuario si no lo hago bien, pero creo que puede ser una forma divertida de mostrar su uso, así que  lo voy a intentar.

A continuación de las historietas quiero indicar los distintos pasos que hay que seguir para que un usuario pueda usar la aplicación  usando un formato de lista de tareas(el que use la aplicación para mostrar una lista). Este listado indicará los siguientes pasos

  • Registrarse en la aplicación
  • Activar la cuenta para usar la aplicación
  • Iniciar sesión en la aplicación
  • Crear una lista
  • Añadir entradas a la lista

En la página habrá un enlace para acceder al formulario de registro y otro para iniciar sesión. Este último desplegará el formulario de login (como el que se usa en twitter).

Página de inicio con login

Página de inicio con login

¿Qué dudas/inseguridades tengo?

Pués algunas como por ejemplo:

  • Los espacios: No se si la disposición de los componentes de la vista son los mejores para una aplicación. ¿Es mejor aprovechar el ancho completo de la pantalla o por el contrario definir unos márgenes?
  • ¿Habrá suficiente información en esta página como para que el usuario comprenda su uso? Hay que tener en cuenta que esta aplicación no está pensada para usuarios expertos/avanzados, esta aplicación tiene que poder ser usada por todos.