Blog de Desarrollo
Publicado el por Amber Black

El Uso de OneNote en Nuestro Proceso de Diseño

Hola, soy Amber. Soy la diseñadora principal de SoCreate. Mi trabajo consiste en determinar cómo los usuarios experimentan e interactúan con nuestros productos. Los diseñadores de nuestro equipo no solo deben ser capaces de crear hermosas interfaces, sino que también deben tener una completa comprensión de cómo funcionará lo que hacemos.

El proceso de diseño en SoCreate está en constante evolución. Trabajamos de forma similar a muchos otros equipos y empresas de diseño; a menudo establecemos nuestras mejores prácticas a través de la prueba y el error. Cuando identificamos un punto conflictivo en nuestro proceso, probamos algo diferente. A veces, las cosas nuevas se mantienen, pero otras veces no.

Una de las cosas que se ha incorporado a nuestro proceso es la elaboración de bocetos. Cuando tenemos que diseñar algo nuevo o que se aleja bastante de lo que ya tenemos, pasar directamente al trabajo de máxima fidelidad puede ser improductivo. Por ello, utilizamos la elaboración de bocetos como parte de la fase de planificación de nuestro proceso.

La elaboración de bocetos nos permite averiguar rápidamente la estructura del diseño. Para nosotros, ha sido más útil para las cosas nuevas que no pueden utilizar los elementos de diseño existentes, piezas conocidas del sistema de diseño de nuestro producto. Al elaborar los bocetos, nos centramos más en:

  • Los datos / el contenido que se requieren mostrar en el diseño.

  • La jerarquía / la disposición general del diseño.

Nuestra oficina ya lleva mucho tiempo sin utilizar papel. Todos usamos tabletas. Cuando aún trabajábamos en la oficina, cada espacio tenía grandes computadoras con pantallas táctiles montadas en la pared que utilizábamos como pizarras digitales y pantallas de presentación para las reuniones. También resultaban prácticas para trabajar por tu cuenta cuando necesitabas una pantalla más grande. Este entorno sin papeles siempre nos ha animado a resolver los problemas a través de un medio digital.

Un poco de historia

Hace mucho tiempo, nuestro equipo trabajó en un proyecto para diseñar un estado financiero. Trabajamos durante semanas y a través de muchas iteraciones muy diferentes del estado financiero. En ese momento, me costó entender los fundamentos del sistema. Sentía que estaba diseñando de forma reactiva en lugar de proactiva. Cada iteración requería una reorganización significativa y debía trabajarse prácticamente desde cero en Photoshop y esto tomaba mucho tiempo.

Con el tiempo, empecé a hacer maquetas de estos diseños en nuestra aplicación preferida para tomar notas, OneNote. Dibujar siempre me ha ayudado a comprender y me gustaba utilizar el lápiz óptico para dibujar en mi tableta, pero aún no se me había ocurrido que pudiéramos planificar los diseños con estas herramientas.

Boceto en OneNote muestra diseño inicial de un sistema financiero

Si no puedes entender esto, no te preocupes. Probablemente yo tampoco pude.

Con la eliminación de la capa visual del diseño, fue fácil centrarse únicamente en los datos, el diseño y las matemáticas necesarias, lo que nos ayudó a encontrar la raíz del problema.

El problema terminó situándose en nuestras necesidades para el sistema subyacente al estado de cuenta, más que en los aspectos visuales del propio diseño. Esta constatación fue una de las muchas que se produjeron durante un proceso que había comenzado como un simple rediseño de esta aplicación. Nos dimos cuenta de que eran necesarias mejoras fundamentales para que estuviera a la altura del producto de alta calidad que pretendíamos crear.

La elaboración de bocetos nos ayudó a llegar a esta conclusión mucho más rápido que si hubiéramos seguido haciendo largos y complicados trabajos de reelaboración. En última instancia, esto dio lugar a una amplia refactorización de cómo habíamos diseñado el sistema financiero y hoy tenemos un sistema que funciona incluso mejor de lo que habíamos previsto inicialmente.

Desde aquel proyecto, incorporamos los bocetos al proceso de diseño siempre que tenemos una interfaz de usuario complicada que pueda aprovechar un borrador.

Cómo utilizamos hoy OneNote para los bocetos

Hemos utilizado OneNote para tomar notas durante todo el tiempo que llevo en SoCreate. He descubierto que las herramientas de dibujo de OneNote funcionan sorprendentemente bien para hacer bocetos y sus limitaciones nos ayudan a saber cuándo es el momento de pasar de esta fase a los diseños finales.

Con la herramienta Pluma podemos trazar rápidamente los diseños. Tengo un par de colores de pluma diferentes que me gusta usar además del negro. A veces utilizo rotuladores cuando esbozo los flujos de trabajo para señalar las piezas individuales de la interfaz de usuario. Puedes guardar los colores, tamaños y tipos de pluma en la barra de herramientas de Dibujo.

Varas opciones de pluma en OneNote

Algunas de las herramientas de Dibujo de OneNote.

A veces, las líneas rectas son difíciles de hacer a menos que se tenga una mano firme. Un truco que ayuda a que nuestros bocetos sean bonitos y ordenados es dibujar una línea corta y luego utilizar las herramientas de transformación para darle la longitud deseada. Una vez que tengas esta línea recta, puedes copiarla y pegarla en cualquier lugar donde necesites otra línea con la misma orientación. También puedes utilizar la herramienta Regla para hacer líneas rectas. Yo prefiero el truco de estirar la línea por razones puramente estéticas.

Uso de controles de transformación de formas en OneNote para remodelar las líneas

Los controles de transformación de las formas creadas con la herramienta Pluma te permiten cambiar el tamaño de la línea.

Con OneNote, puedo seleccionar, copiar y pegar cualquier parte de mi boceto que quiera duplicar. Las funciones Copiar y Pegar facilitan la composición de listas, flujos de trabajo y versiones alternativas del mismo diseño. La función Selección nos permite hacer ajustes rápidos después de recibir comentarios.

Mediante estos métodos, podemos elaborar los fundamentos de lo que hay que diseñar a escala real.

Cuándo terminar la fase de elaboración de bocetos

Por lo general, el punto en el que hay que pasar del boceto se revela por sí solo: hemos cumplido los requisitos iniciales del proyecto y ahora podemos trasladarlos del borrador al resultado final. Pero, en ocasiones, nos sentimos demasiado concentrados en un aspecto particular del diseño, haciendo demasiadas pequeñas revisiones o ajustes sobre su colocación. Cuando esto sucede, suele ser un gran problema continuar en OneNote. Llegados a este punto, está claro que tenemos que salir de esta fase del proceso de diseño.

Cuando hayamos decidido que la fase de elaboración de bocetos ha terminado, elegiremos qué hacer a continuación.

Presentar los bocetos a desarrollo

Cuando el proceso de elaboración de bocetos está terminado, solemos presentarlo directamente a los equipos de desarrollo. Este paso es especialmente importante cuando se planifican cambios drásticos en la estructura principal de nuestra aplicación. Antes de finalizar nuestros diseños, necesitamos que participen compañeros de equipo que tengan un punto de vista más centrado en el desarrollo para obtener su opinión. Sus comentarios desarrollan aún más nuestros diseños.

Hace algún tiempo, modificamos la forma de acceder a las cuentas de uno de nuestros productos. Esta parte del software afectaba toda la aplicación, por lo que era fundamental que los equipos de desarrollo participaran desde el principio en el proceso. Al obtener valiosos comentarios de la gente que iba a desarrollar lo que estábamos creando, evitamos algunos problemas importantes. Este proceso redujo drásticamente el tiempo necesario para llegar a un diseño que nos gustara y que no causara un gran problema para nuestro equipo de desarrollo.

Un boceto en OneNote muestra un diseño potencial para un menú desplegable

Cuando esbozamos un flujo de trabajo con un elegante menú desplegable con campos de selección, hablamos con los miembros del equipo de UX para asegurarnos de que se podía crear un componente como éste.

Pasar a la siguiente fase de diseño

Si nuestro proyecto está más estrictamente relacionado con el diseño y no es tan necesario hacer un seguimiento con nuestros compañeros de equipo de desarrollo, podemos pasar rápidamente a los diseños de alta fidelidad. Las decisiones tomadas y los conocimientos adquiridos durante la fase de elaboración de bocetos informan de lo que debemos hacer para el producto final.

Otros motivos para elaborar bocetos

Un boceto rápido también puede ser útil durante las reuniones de revisión del diseño como acompañamiento para tomar nota de los comentarios del propietario del proyecto. A veces, el mismo propietario del proyecto anotará una o dos ideas mientras colaboramos para resolver un problema.

El año pasado contratamos a un nuevo diseñador y nuestro equipo creció un 100%. Aceptar el papel de líder del equipo supuso un reto en muchos sentidos para mí. Considero que, en ocasiones, dibujar rápidamente algo transmite mejor la idea que utilizar palabras para describirlo. El lenguaje de un boceto puede ser mucho más sencillo y ha sido muy útil para utilizarlo con mi nuevo compañero de equipo mientras trabajamos a distancia.

Un boceto en el tiempo

Como dibujante de toda la vida, la elaboración de bocetos ha sido un complemento agradable y beneficioso para nuestro proceso. Para nosotros ha sido un éxito, pero, por supuesto, las soluciones de proceso como ésta no siempre son únicas. Si tu equipo trabaja principalmente con un lenguaje de diseño establecido o si a menudo tienes que resolver problemas de diseño complejos, quizás trabajar con bocetos en tu proceso de diseño podría beneficiarte.

Si tu equipo emplea un proceso similar o algo diferente, me encantaría que me lo contaras. Siempre estamos buscando cómo mejorar y trabajar de forma más eficiente.

También te puede interesar...

Lauren Spence presenta el sistema de color

El Sistema de Color: SoCreate Establece Normas con Propiedades Personalizadas CSS

¡Nuestro "Lunch Meet" más reciente, una serie de aprendizaje liderada por el equipo de SoCreate, puede haber sido el más colorido hasta ahora! El desarrollador de experiencia al usuario Lauren Spence tomó la palabra para dar a conocer al equipo las prácticas de avanzada que se utilizan en cuanto al UX de los proyectos de SoCreate. Mientras el resto de nosotros satisfacía nuestros apetitos con un almuerzo con servicio de catering, Lauren satisfizo nuestros sentidos visuales con su presentación sobre SoCreate Color System. El Sistema de Color es un método innovador que controla y tematiza ...

SoCreate Explora la Situación de la Industria Cinematográfica del año 2021 en su Último Almuerzo de Trabajo

Los tiempos están cambiando. La pandemia del COVID-19 ha puesto de cabeza a muchas industrias y el sector cinematográfico no ha sido la excepción. El Equipo de Divulgación de SoCreate mantiene el pulso de las tendencias en la industria del cine y la televisión, y con tantas cosas para ponernos al día en las noticias de 2020, decidimos traer al resto del equipo a nuestro último almuerzo de trabajo. La serie de aprendizaje dirigida por el equipo es ahora virtual, pero el debate no fue menos animado. Se habló de todo, desde el estado actual de la producción hasta las salas de cine, el streaming y las recomendaciones de programas de televisión del personal . . .
La pantalla de una computadora muestra código y un monitor de puntaje de gimnasia

Un Ingeniero de SoCreate Hace lo Imposible por Desarrollar su Último Proyecto Paralelo

Arrancamos el nuevo año con un viejo favorito. Me encantó volver a la programación regular de SoCreate en esta era de trabajo remoto y poder participar en uno de nuestros emblemáticos "Lunch Meets", una serie de aprendizaje dirigida por el equipo acerca de nuevas tecnologías y proyectos personales de los miembros del equipo. Si bien normalmente nos sentamos y llevamos nuestro almuerzo a la sala de conferencias, renovamos la serie como una presentación virtual a través de Microsoft Teams y fue muy divertido escuchar lo que el ingeniero de software senior Dana Desrosiers ha estado haciendo en su tiempo libre. No hace falta decir que no ha estado . . .