He llegado a creer que ser un diseñador de productos es amar el proceso más que el producto (a pesar de lo que pueda implicar el tÃtulo del trabajo). Es saber que la solución a un problema está a la espera de ser descubierta mediante la cantidad adecuada de bocetos, retoques, debates y sollozos a través del bloqueo ocasional de Illustrator.
Si nos saltáramos todo ese desorden y fuéramos directamente al diseño final, este trabajo serÃa aburrido. Leer la última página de una novela no tiene sentido si te saltas todas las páginas anteriores.
Caso en cuestión: acabamos de lanzar una versión renovada de nuestra pantalla de inicio de sesión para Wistians que usan varias cuentas.
Es una caracterÃstica aparentemente pequeña, una que la mayorÃa de los clientes de Wistia nunca verán, pero nos encantan los pequeños detalles. Este proyecto representa una sección transversal de nuestro proceso de diseño de productos aquÃ, asà que pensé que serÃa divertido explorarlo.
Definiendo el problema
Esta parte siempre es más complicada de lo que parece. Una necesidad obvia, como “Esta pantalla de inicio de sesión para Wistians con varias cuentas es un poco aburrida”. lo hace hacer rodar la pelota, pero puede hacer una bola de nieve y zigzaguear rápidamente una vez que se está trabajando en ella.
Una pantalla de varias cuentas, en particular, plantea muchas preguntas interesantes sobre cómo y por qué las personas pueden usar varias cuentas de Wistia.
Después de caer por algunos agujeros de conejo, decidimos que este diseño deberÃa resolver dos problemas:
La pantalla de inicio de sesión de múltiples cuentas no es muy útil para los usuarios que administran varias cuentas, y parece más una ocurrencia tardÃa que una parte intencional del flujo de inicio de sesión. Surgen una variedad de problemas de soporte cuando los usuarios están limitados a una cuenta de Wistia por correo electrónico. habla a.
Explorando las posibilidades
Reducir los requisitos del proyecto hace que sea mucho más fácil comenzar a explorar soluciones concretas y esbozar ideas, ¡como estas!
Versión #1: No.
Versión #2: Más cerca, pero no del todo.
Versión #3: Hmmm…
Nos decidimos por esta dirección final por algunas razones:
Muestra información adicional, como el nivel de permiso, la cantidad de videos y la cantidad de proyectos, que proporciona un contexto importante y útil sin inflar la pantalla. Las “láminas” verticales son más adecuadas para mostrar muchas cuentas que las “tarjetas” horizontales, que usan el espacio de la pantalla es menos eficiente. Incluir logotipos proporcionados por el usuario en un diseño como la versión n. ° 1 es arriesgado. Tienden a lucir hermosos en maquetas cuidadosamente seleccionadas, pero al igual que los cachorros, vienen en todas las formas y tamaños y les gusta arruinar las cosas, como los diseños de diseño. crear una nueva cuenta después de iniciar sesión.
Refinando la experiencia
Como diseñador objetivo, no elijo favoritos. Pero entre tú y yo, esta parte es mi favorita.
Es hora de que el diseño aproximado se pula y prototipado. Mis herramientas de creación de prototipos actuales preferidas son Invision y Pixate. Invision es excelente para reunir rápidamente flujos de usuarios. Al vincular pantallas con objetivos de clic, podemos trazar todo el proceso de inicio de sesión.
Pixate brilla cuando llega el momento de crear los detalles más finos de interacción y animación. Es cierto que se creó para crear prototipos de aplicaciones móviles y es más adecuado para el trabajo móvil, pero si no dispone del tiempo necesario para aprender una herramienta nueva y más compatible con la web, puede improvisar un poco.
Si tiene curiosidad, aquà está mi truco de flujo de trabajo: creé un nuevo prototipo en Pixate y configuré el tamaño del lienzo en 1024x640px. Si ha usado Pixate antes, sabe que los prototipos son nativos y solo se pueden ver en un dispositivo móvil. Asà que usé un iPad en modo horizontal para ver mi trabajo en progreso, y cuando obtuve las animaciones correctas, conecté el iPad a mi Mac y usé QuickTime para grabar la pantalla del iPad mientras se reproducÃa el prototipo.
¡Luego coloqué ese video de la interacción completa en la tarjeta Trello del proyecto! Si desea llevar las cosas un paso más allá, puede usar una herramienta como GifBrewery para convertir ese video en un gif que se puede usar en su prototipo de Invision para obtener el efecto completo. Requiere un poco de trabajo preliminar, pero los resultados te dejarán positivamente alegre. Promesa.
¡Está vivo!
Otra cosa buena de Pixate: sus prototipos usan tiempos reales y curvas suaves. Esta información es útil cuando llega el momento de sentarse con el ingeniero para que las cosas cobren vida. No solo puede mostrarle al ingeniero un prototipo de las animaciones, sino que también puede documentar los tiempos exactos y las curvas de aceleración utilizadas.
Al final, decidimos omitir la transición de desplazamiento vertical entre las pantallas de inicio de sesión y de cuenta porque no encajaba del todo con nuestro estilo de animación y ralentizaba toda la interacción. Con una plétora de nuevas herramientas de creación de prototipos como Pixate, es más fácil que nunca dejarse llevar, asà que tengo la suerte de tener compañeros de equipo que abogan por la moderación en el diseño de interacción.
¡Gracias a las habilidades de nuestro propio Neil, esta caracterÃstica ahora vive en Wistia! Si eres un Wistian que administra varias cuentas, con suerte esto hará que tus dÃas sean un poco más fáciles. Si no es asÃ, espero que haya disfrutado de este vistazo a nuestro proceso de diseño de productos.
¿Quieres más que un vistazo? Estamos contratando a un diseñador de productos para ayudar a dar forma al futuro de Wistia, tanto al producto como al proceso.
