Prototipos de escritorio

Cómo la configuración juega un papel importante en el diseño de escritorios

En Dropbox, diseñamos muchas interfaces que los usuarios experimentan en sus computadoras de escritorio. Lo especial del diseño de escritorio es que no podemos predecir cómo se verá la pantalla del usuario: escritorios desordenados, fondos de pantalla ruidosos, cientos de pestañas de Chrome, la lista continúa.

A pesar de saber que la mayoría de las computadoras de escritorio están abarrotadas y llenas de distracciones, a menudo soy culpable de presentar mi trabajo como si estuviera en exhibición en el MoMA.

Los fondos suaves y pastel, los navegadores sin cromo y sin ruido de escritorio se suman a un entorno hermoso pero poco realista.

Diseñando para el mundo real

Si bien es genial presentar el trabajo en un formato desinfectado, también es importante recordar que esos escenarios en realidad no existen. De hecho, el entorno de un usuario suele ser un espacio ocupado y propenso a las distracciones.

Puede que no sea bonito, pero está más cerca de lo que nuestros usuarios realmente experimentarán.

Nuevos correos electrónicos que llegan por minutos, alertas de calendario que le dicen que corra a su próxima reunión y docenas de pestañas de Chrome que le molestan sobre tareas que no debe olvidar. Es una maravilla que alguien haga el trabajo.

Simulando un escritorio

En Dropbox, descubrimos que simplemente presentar nuestro trabajo con un entorno de escritorio realista detrás del diseño surgió nuevas ideas y desafió la forma en que pensábamos sobre las interfaces de escritorio.

Entonces, para facilitar a los diseñadores colocar su trabajo en una superficie de escritorio, creamos una plantilla Sketch con algunos entornos básicos de escritorio macOS y Windows.

Una plantilla de croquis para facilitar la simulación de entornos de escritorio.

Esta plantilla de Sketch hizo que fuera muy simple para los diseñadores colocar sus diseños en un entorno de escritorio macOS o Windows creíble antes de imprimirlo para las críticas de diseño. Si bien el contexto agregado ayudó, descubrimos que le faltaba un aspecto crucial: ¡tiempo!

Agregar la dimensión del tiempo

Lo que sucede antes, durante o después de que un usuario interactúa con una interfaz es casi tan importante como la interfaz real. Trabajando en el flujo de instalación de Dropbox, aquí hay algunas preguntas que debemos hacer:

Antes: ¿Por qué están instalando Dropbox? ¿Un cliente impaciente simplemente les envió un enlace por correo electrónico a una carpeta de Dropbox y está instalando Dropbox para acceder a la carpeta?

⏸ Durante: ¿A qué aplicaciones necesitan acceder cuando instalan Dropbox? ¿Necesitan cambiar entre Safari y Finder para completar la incorporación?

⏭ Después: ¿Qué distracciones los alejan de la instalación de Dropbox? ¿Estaban a la mitad del flujo de incorporación cuando una alerta de Calendario les recordó que llamaran a un cliente en 5 minutos?

Las preguntas sobre lo que experimenta un usuario antes, durante y después de que encuentre sus diseños pueden ayudarlo a priorizar. Por ejemplo, si un usuario está instalando Dropbox justo después de ser invitado a una carpeta, tal vez la incorporación debería señalar esa nueva carpeta.

La creación de prototipos lleva mucho tiempo y es imposible atrapar cada escenario. Sin embargo, no dejes que eso te asuste. Incluso presentar el trabajo en un solo escenario plausible puede enfocar el tipo de comentarios que recibe de los compañeros de equipo y puede ayudarlo a descubrir nuevas formas de mejorar su diseño final.

Un kit para prototipos

Habiendo experimentado los beneficios de presentar mi trabajo en un prototipo de escritorio realista, quería alentar a otros diseñadores de Dropbox a que hicieran lo mismo.

Mi primera idea fue simplemente expandir nuestras plantillas de Sketch y usar InVision para la parte de creación de prototipos. Esto no dio en el blanco. Los prototipos finales no se sentían realistas y las acciones básicas a nivel del sistema como arrastrar y soltar no eran posibles.

Como Framer era mi herramienta favorita para crear prototipos de escritorio y el equipo de Dropbox ya la usaba activamente, decidí convertirla en nuestra herramienta de referencia para la creación de prototipos de escritorio. Con la ayuda de nuestro equipo de Design Systems, creamos un kit de componentes de escritorio Framer reutilizables. Incluía todos los componentes básicos que nuestro equipo podría necesitar para crear prototipos de entornos realistas de macOS y Windows.

Lanzamos el kit internamente hace un par de meses y nuestro equipo de diseño ha encontrado que es un excelente punto de partida para crear rápidamente prototipos de escritorio realistas. Nuestra esperanza es que sigamos presionándonos mutuamente para hacer preguntas desafiantes sobre lo que sucede antes, durante y después de que nuestros usuarios interactúen con nuestros diseños.

Descargue nuestro kit de escritorio Framer

Queremos ver que la comunidad de diseño se beneficie de las semanas de trabajo que se emplearon en este kit de creación de prototipos, por lo que hoy publicamos el Kit de escritorio en el sitio web de Framer. Dirígete a framer.com/resources para descargarlo.

Estos son algunos consejos para comenzar a usar el Kit de escritorio:

La pestaña Diseño

Lo primero que debe notar al abrir el kit es que las aplicaciones macOS y Windows 10 se dibujan directamente en la pestaña Diseño. Esto acelera drásticamente la curva de aprendizaje y brinda a las personas que están más familiarizadas con Sketch un lugar fácil para comenzar.

¡Navegadores, clientes de correo electrónico, navegadores de archivos, aplicaciones de chat y alertas del sistema!

De hecho, cada pieza de la interfaz de usuario de escritorio se ha dibujado a mano en Framer, hasta el más pequeño de los iconos. Esto hace que personalizar el kit sea muy sencillo y es un gran testimonio de la flexibilidad de Framer.

La pestaña Código

Para cada aplicación, encontrará un conjunto de funciones correspondientes en la pestaña Código. Estos fragmentos de código le permiten hacer cosas como configurar el sistema operativo, abrir y cerrar aplicaciones y enviar alertas del sistema.

Uso de las funciones del navegador de Desktop Kit en la pestaña Código

Además, puede cambiar entre sistemas operativos en segundos. Cada aplicación y alerta del sistema en el Kit de escritorio tiene una versión para MacOS y Windows 10. Nunca fue tan fácil ver cómo se ve su diseño en un entorno Windows.

Cambiar entre entornos macOS y Windows 10

Algunos ejemplos para comenzar

En el Kit de escritorio encontrará todo lo que necesita para crear los siguientes ejemplos. En la pestaña Código, simplemente haga doble clic en un ejemplo y descomente el código dentro para activarlo.

Anunciando una nueva característica
Imagine que está diseñando una página de destino para un nuevo producto, como Dropbox Showcase. Puede ayudar a comprender cómo un usuario llega por primera vez a su diseño. Por ejemplo, ¿qué pasaría si una alerta los incitara a abrir un correo electrónico promocional que luego se vinculara a su página de destino?

Ejemplo 1 en el Kit de escritorio

Incorporación con distracciones
A menudo asumimos que los usuarios tienen todo el día para terminar nuestros hermosos flujos de incorporación, pero la vida real tiende a interferir. Este ejemplo simula un entorno de escritorio ocupado con una alerta que le recuerda al usuario una reunión en 5 minutos. Ver un flujo de incorporación bajo esta luz puede ayudarlo a mantener su incorporación simple y al grano.

Ejemplo 2 en el Kit de escritorio

️ Interacciones de ventanas múltiples
En este ejemplo, un usuario agrega su primer archivo a la carpeta de Dropbox, lo que le indica que vea el archivo sincronizado en dropbox.com. Al diseñar viajes de usuarios que abarcan múltiples áreas de superficie, puede ser muy útil ver toda la experiencia en un solo lugar.

¡Descarga y disfruta!

¡Descargue el Kit de escritorio y díganos qué piensa! Cuando su próximo proyecto llegue a la fase de creación de prototipos, estará bien preparado para llevarlo al siguiente nivel.

Muchas gracias a Gabrielle Matte por crear la imagen perfecta para esta publicación de blog, Adam Noffsinger por ayudar a crear el Kit de escritorio y John Saito y Angela Gorden por ayudar a escribir esta publicación.

¿Quieres más del equipo de Dropbox Design? Siga nuestra publicación, Twitter y Dribbble. ¿Quieres hacer magia juntos? ¡Estamos contratando!