¿Qué es Design Sprint?

El Design Sprint es una metodología que se encarga de desarrollar hipótesis, crear prototipos, probar y validar ideas en un proceso de 4 días. Fue ideada en la compañía de Google por Jake Knapp. Aunque se creó en 2010 no fue hasta 2016 cuando se compartió con el mundo mediante el libro del propio autor, Sprint, convertido en un bestseller. No obstante, dicha metodología fue actualizada en 2016. Combina principalmente el ágile con el design thinking y de ahí resulta el proceso válido para generar y desarrollar ideas. 

Te dejamos por aquí un post en el que te recordamos qué es el design thinking. 

Volviendo al Design Sprint, su objetivo principal es hacer más ágil el proceso de desarrollo de productos. Se basa en la idea de que cuanto más rápido se puedan generar y detectar buenas ideas, más rápido desarrollaremos el proyecto y por tanto menos tiempo y dinero gastaremos. Con esta metodología ayudaremos a los diferentes equipos a coordinarse y solucionar en conjunto las dificultades que puedan surgir. 

Su principal ventaja es que vamos a acelerar de forma considerable la toma de decisiones a la vez que reducimos el riesgo de nuestros proyectos. La meta entonces será maquetar prototipos que otorguen estabilidad dando nuevos aires a las ideas y oportunidades en la fase de diseño. 

Los resultados que obtenemos a partir del Design Sprint son concretos y medibles. A raíz de ellos vamos a poder dar una validación a la propuesta ya que lo probaremos con usuarios reales.

¿Cuándo y cómo utilizarlo?

Como ya te hemos contado, la metodología Design Sprint está pensada para durar 4 días. Sin embargo, antes de empezar debes seguir las siguientes recomendaciones que te damos: 

• – Ten claro el reto que vas a elegir y cerciórate de que es adecuado para resolver a través de esta metodología

• – Prepara un espacio adecuado para desarrollar el proyecto y selecciona un equipo que sea apto para el mismo. 

• – Dedica exclusivamente el tiempo que hayas pactado para el proyecto.

El Design Sprint es idóneo para aquellos proyectos complejos que suponen todo un desafío. Si seguimos este método vamos a aprender a poner toda la atención en lo realmente importante, dar prioridad a las ideas válidas al 100% y dejar aun lado las grandes inversiones económicas. 

La metodología en la que nos estamos centrando se puede aplicar a diferentes proyectos con características muy variadas. Por ello te queremos explicar cuáles son y cómo funciona en cada uno de ellos. ¡Allá vamos!

1. Lanzamiento de un nuevo producto o servicio. En los casos en los que estamos creando un producto o un servicio desde 0 debemos coordinar a todos los equipos y hacer que sigan la misma dirección. De esta manera el ciclo de desarrollo se hará de manera más rápida ya que contaremos con recursos para solventar los problemas que vayan surgiendo. Además, seremos capaces de validar la idea definitiva que queremos sacar adelante antes de hacer grandes inversiones de tiempo y de dinero. 

2. Hacer del proyecto algo tangible. Mediante el Design Sprint podemos materializar la idea a desarrollar y por tanto hacerla tangible. Quedará validado por usuarios que son reales y viendo el éxito tendremos el background para convencer a los posibles inversores de que nuestro producto merece la pena. 

3. Focalizarse en el proyecto. En numerosas ocasiones el equipo necesita resolver con urgencia temas que son importantes pero nunca se cuenta con suficiente tiempo para ello. Con el Design Sprint nos pondremos manos a la obra ya que priorizamos la idea sobre la que estamos trabajando y será un método infalible para conseguir los resultados que queremos. 

4. Equipo alineado y coordinado. La metodología que estamos tratando tiene una gran utilidad cuando algún miembro del equipo, los inversores o la empresa en general no es capaz de ponerse de acuerdo sobre un tema concreto y está tardando mucho en sacar adelante el proyecto por este problema. Con el Design Sprint coordinaremos el equipo y tomaremos decisiones cohesionadas.

5. Apuesta arriesgada. Cuando la empresa se está planteando hacer un proyecto que requiere una apuesta arriesgada es consciente de que requerirá un importante desembolso de dinero. Con el Design Sprint podremos tener la idea validada mucho antes de lo que estamos acostumbrados por lo que tendremos clara la decisión a tomar antes de hacer esta inversión.

Fases del Design Sprint

Ahora que ya conocemos que es el Design Sprint y en qué casos es conveniente aplicarlo, vamos a enseñarte cuáles son las fases por las que pasará el proceso. Cómo ya te hemos dicho anteriormente, necesitaremos 4 días para poder aplicarlo, aunque antes de la modificación de 2018 eran 5. A lo largo de estos días realizaremos un total de 6 fases que han sido definidas por Google. 

¿Quieres conocer cuáles son?

Fase 0: Consideraciones previas (Comprender) 

Si queremos que el Design Sprint se desarrolle de forma correcta, debemos tener claras las tareas a realizar antes de comenzar. Nos vamos a centrar principalmente en conocer el contexto que nos rodea y definir el problema. El conjunto de los miembros del equipo debe ser multidisciplinar y conocer desde el principio los objetivos planteados. Para ello podemos generar y compartir una base de datos relevante que incluya información sobre los competidores, fortalezas, debilidades…Lo idóneo es que el equipo incluya miembros de todos los departamentos. 

Una vez preparado el equipo buscamos el espacio adecuado y junto a la base de datos redactamos un documento en el que expliquemos brevemente el reto al que nos vamos a enfrentar. Así el paso inicial lo tendremos completado.

Fase 1: Investigar y Definir. 

En esta fase debemos reunir a los miembros del equipo y poder hablar de forma conjunta sobre el enfoque y el punto de vista de cada uno. Así podremos pasar a procesar los datos que tenemos y añadir más información mediante la documentación que resulte de la investigación. 

Podemos usar para ello mapas de empatía, entrevistas, encuestas, user journey o análisis DAFO. El equipo en conjunto debe evaluar lo obtenido y deben definir el contexto específico y los resultados que queremos alcanzar. 

Terminaremos esta fase eligiendo: 

• – el enfoque específico 
• – los objetivos a conseguir
• – las métricas para el Sprint

Fase 2: Boceto sobre las propuestas

En esta segunda fase el equipo se dedicará a crear un boceto sobre la solución que se propone para el problema. Cada miembro realizará un trabajo individual para que las ideas no queden influenciadas por las opiniones del resto.

Estos bocetos se hacen de forma rápida con el objetivo de transmitir una idea principal que más tarde elaboramos en profundidad. Para hacer esta tarea no se necesitan nociones de diseño ya que únicamente necesitamos papel y boli. Puedes hacer bocetos en formato digital, aquí te enseñamos cómo hacer estos wireframes.

Fase 3: Tomamos las decisiones

Es en esta fase cuando tomamos una decisión sobre la idea que finalmente vamos a sacar adelante. Nos dedicamos a debatir y seleccionar aquello que vamos a prototipar posteriormente.Lo común es poner los bocetos sobre la mesa y hacer una votación para elegir la opción que más haya gustado. 

Necesitamos dejar claro cómo la solución escogida pueda hacer frente a los objetivos que hayamos marcado. Es importante salir de esta fase teniendo un storyboard en el que definamos las pantallas que vamos a prototipar. 

Fase 4: Prototipar

Ha llegado el momento de prototipar las ideas o las soluciones que hemos fijado en la fase anterior. Aquí entra únicamente en juego el equipo de diseño. Estos se pondrán manos a la obra para hacer un diseño que cumpla con las funcionalidades que queremos para nuestro producto. 

Es crucial tener claro que el prototipo final no debe ser de alta fidelidad sino que debe explicar lo esencial del producto. En esta fase hay que definir además que les vamos a preguntar a los usuarios durante el test. Debemos concretar horarios, pruebas, guiones…Y con todo ello podremos pasar a la siguiente fase. 

Fase 5: Validar y testear con usuarios finales

Esta última fase es realmente importante ya que en ella haremos los test con los usuarios. Aquí vamos a validar y poner a prueba todo el trabajo que hemos realizado hasta ahora. Trataremos de llevar a cabo estos test para ver cómo el usuario interactúa con nuestro producto y las dudas que le surgen. 

Debemos reunir hasta 20 usuarios como máximo y 6 como mínimo. No debemos olvidarnos de grabar el test para poder chequearlo posteriormente las veces que necesitemos. Los diferentes observadores de la prueba deben estar tomando notas y registrando todo lo importante. Una vez que terminemos la prueba tendremos que generar la documentación necesaria para pasar a la fase de desarrollo. Este documento debe ser compartido con todo el equipo. Aquí incluímos las conclusiones, el prototipo funcional, un resumen del test, una hoja de ruta para poder continuar y la validación o no de las hipótesis iniciales. 

Herramientas de Design Sprint

Con todo lo que te hemos explicado claro, podemos pasar a definir cuáles son las herramientas que podemos utilizar para desarrollar nuestro proyecto de Design Sprint. 

• MIRO. Es un tablero virtual en el que plasmamos el proceso.Se trata de una pizarra colaborativa que hace que nuestros equipos estén siempre cerca y conectados. Nos permite hacer reuniones y talleres virtuales, crear y coordinar ideas, potenciar las estrategias y crear diagramas de flujo online. ¡No te la puedes perder!

• FIGMA. Se trata de una herramienta de diseño de prototipos colaborativos en tiempo real. También es un editor de gráficos vectoriales. Conecta a todos los miembros del equipo del diseño para que puedan entregar sus proyectos de forma rápida. Ejecuta y da vida a las ideas iniciales que nos surgen. Es realmente útil y nos encantaría que la probases.

• ZOOM. Es un software de videollamadas que nos pone en contacto tanto con el equipo como con los usuarios. Ofrece múltiples herramientas que agilizan el trabajo y hacen del proceso de creación del proyecto algo mucho más humano. 

• GOOGLE SHEETS. Son hojas de cálculo que podemos compartir con todo el equipo para documentar todo el proceso que seguimos. Es importante que quede todo plasmado aquí para no perder nada importante. 

Ahora que ya conoces este nuevo método de trabajo nos encantaría que nos dejases en los comentarios que te ha parecido y si lo vas a aplicar a alguno de tus proyectos. Queremos que tengas claro que aunque el Design Sprint está pensado para llevar a cabo en 4 días, puedes adaptarlo a los tiempos que vayas necesitando. 

Realizar este tipo de trabajos por lo general resulta muy motivador para el equipo y es un nexo de unión entre todos sus miembros. El éxito suele ser muy común ya que cada uno da lo mejor de sí mismo para ello. Aquí se olvida la jerarquía y los roles y se trabaja para resolver un mismo problema común. 

¡Nos vemos pronto comunidad de FOCUX! 

La entrada ¿Qué es Design Sprint? | Herramientas y Fases se publicó primero en Focux.

Si quieres conocer una forma más de atraer a los usuarios y mejorar tu producto, quédate a leernos. ¡Comenzamos! 

¿Qué son los wireframes? 

Antes de adentrarte en el mundo del wireframing debes conocer qué son exactamente los wireframes. Se trata de representaciones a modo de esquema que muestran las diferentes pantallas que componen un producto digital. La función de los mismos es plasmar de manera visual los contenidos que tendrá por ejemplo la app o página web que desarrollemos. 

Esta representación suele hacerse en escala de grises y debe mostrar las distintas funcionalidades del producto. Es cierto que los wireframes suelen desarrollarse en las primeras etapas de la creación del producto con el objetivo de poder dejar clara la estructura antes de añadir el diseño final. 

En algunas ocasiones, los wireframes son denominados también planes de pantalla. Su objetivo primordial es entender cómo quedará el producto final. Así podremos verificar cuáles son los errores o modificarlos para llegar al resultado que necesitamos. 

Estos esquemas son realmente útiles cuando comenzamos un nuevo proyecto pero más tarde podremos seguir utilizándolos cuando queramos introducir cambios. Muchas empresas los utilizan a la hora de añadir nuevas utilidades. 

Es importante recordar que son representaciones simples en las que no establecemos ni colores, ni tipografía, ni imágenes. Nos centraremos en la funcionalidad del producto digital. Una de sus ventajas es que nos permite crear numerosas versiones de un mismo sitio web o aplicación. Pero no sólo esto, hay muchas más. ¡Vamos a conocerlas!

Ventajas de elaborar wireframes para tu producto digital

El uso de wireframes supone numerosos beneficios para el proceso de elaboración y lanzamiento de tu producto digital. Desde Focux queremos contarte cuáles son todas sus ventajas para que puedas adoptarlos en tu proyecto con toda seguridad.

Rapidez y sin costes adicionales. Cómo ya te hemos contado, los wireframes son bocetos sin color, tipografía e imágenes. Al no contar con una identidad gráfica establecida, avanzaremos de manera más rápida y podremos hacer diferentes correcciones. Esto nos va a permitir elaborar múltiples versiones en poco tiempo y sin costes adicionales. De esta manera podemos decir que una de sus ventajas es el ahorro tanto de tiempo como de dinero en nuestro proyecto.

Detectar y solucionar problemas previos. Con estos sencillos esquemas podemos obtener un feedback rápido sobre los avances del proyecto. Así detectaremos los problemas o errores de usabilidad que hayan surgido y podremos resolverlos antes de desarrollar el producto final. De esta manera será más fácil comparar propuestas y funcionalidades. 

Mejoramos la satisfacción del cliente. Los wireframes facilitan la comunicación entre los desarrolladores y el cliente. Con los bocetos podremos ir adaptándonos a las peticiones del mismo y corregirlas de forma más sencilla. El cliente podrá ir definiendo sus objetivos y propuestas a medida que avanzamos en el proyecto de manera conjunta. El resultado final será mucho más satisfactorio y las correcciones más sencillas

Incorporamos nuevas herramientas. La elaboración de wireframes se puede realizar a través de diferentes métodos. Es cierto que se puede llevar a cabo de manera manual, en papel, aunque lo común hoy en día es realizarlo de forma digital. Para ello existen numerosas herramientas que podemos incorporar en nuestra empresa y que nos otorgarán todas las facilidades para trabajar. Así, aumentaremos las habilidades del equipo y su conocimiento será más valioso.

¿Qué tipos de wireframes existen?

Cómo ya te hemos contado, puedes elaborar tus wireframes de forma manual o utilizar un formato digital. Es cierto que nosotros te recomendamos combinar los dos formatos para poder conseguir un resultado más completo. Lo ideal es comenzar haciendo una idea muy básica con lápiz y papel y más tarde pasarlo al ordenador para añadir las funcionalidades.

Existen tres tipos principales de wireframes que nos gustaría enseñarte: 

Wireframes básicos. También se les conoce como wireframes de baja fidelidad. Se trata del modelo más simple de todos los que existen. Generalmente se hace a mano y no se incluyen demasiados detalles. Por lo general se realizan en blanco y negro y se anota lo básico del diseño, como su propio nombre indica.

Wireframes anotados. Es uno de los tipos intermedios. Junto a un esquema simple, añadimos anotaciones básicas y breves que se introducen generalmente en uno de los lados. Estas se van a encargar de describir los elementos del diseño. Su propósito es que expliquen las funcionalidades y objetivos de cada elemento. Junto a las anotaciones introducimos los elementos visuales de forma organizada.

Wireframes de flujo de usuario. Se usan en aquellos casos en los que las anotaciones anteriores no son suficientes para mostrar cómo el usuario se va a desplazar por la página web. Es así que necesitaremos más información. En estos wireframes podemos darle un toque interactivo e incluir una presentación con movimiento para indicar estos flujos de los usuarios.

Wireframes de alta fidelidad. Este tipo es el que más se asemeja a la versión final del producto. Para ellos es un requisito indispensable hacerlo en formato digital. Debemos mostrar con detalle todos los elementos y estructura del diseño. Podemos incluir las interacciones por ejemplo. Así quedará un esquema perfecto de cómo queremos que sea el producto.

¿Cómo elaborarlos?

Una vez que ya conoces los tipos de wireframes que existen y sus ventajas, llega la hora de elaborarlos. Antes de nada, queremos dejar por aquí uno de nuestros vídeos en el que te enseñamos cómo maquetar tu wireframe con la herramienta Adobe Xd.

En este tutorial podrás descubrir un ejemplo práctico que te servirá de referencia para aprender a usar la herramienta y aplicarlo a tu producto digital.

Y con todo esto te queremos mostrar los pasos esenciales que deberás seguir para crear tu wireframe. 

Lo primero de todo, debes pensar en el objetivo principal de tu producto y poder adaptar todo el diseño posterior a ese propósito. En este primer paso debes prestar mucha atención a la manera en la que el usuario va a interactuar y moverse por la interfaz.

Más tarde puedes continuar con una elaboración de wireframe básico o de baja fidelidad. Así, puedes dividir cada pantalla en tres partes. La primera estará formada por el encabezado, más tarde el cuerpo, y finalmente el pie de página con información no tan relevante.

Después iremos agregando elementos como pueden ser los botones, las áreas de contenido, barras de búsqueda…No debemos olvidar realizar las anotaciones pertinentes para poder contar con toda la información.

Con todo lo anterior listo, podemos continuar con el siguiente paso. Realizaremos las correcciones pertinentes y finalmente elaboramos el wireframe final en el software que hayamos elegido con todo incluído. Aquí debemos insertar todo aquello que vaya a tener la interfaz final para probar sus funcionalidades.

Herramientas para tus wireframes

La mayoría de aplicaciones o herramientas para elaborar wireframes digitales de calidad son de pago. Si bien es cierto, muchas cuentan con un periodo de prueba gratuito que puedes utilizar para corroborar que te sirve la herramienta.

El resultado que obtendrás con cada una de las que te recomendamos será muy profesional. Además, la mayoría ofrecen plantillas predeterminadas que te aligeran el trabajo y pueden servirte de inspiración para tus proyectos digitales.

SKETCH

Se trata de una herramienta visual e intuitiva. Ofrece cientos de opciones y ajustes preestablecidos que te ayudarán a ahorrar tiempo. Nos permite contar con opciones muy útiles como arrastrar y soltar, incluir comentarios colaborativos, herramientas de presentación e historiales de revisión.

El inconveniente principal de la herramienta es que solo está disponible para Mac por lo que no es accesible para todos los usuarios. No obstante, la facilidad de su uso y las numerosas opciones que ofrece la convierten en la herramienta perfecta para elaborar wireframes y obtener un resultado rápido y profesional.

ADOBE XD

Estamos ante una herramienta de diseño rápida y potente. Se trata de un software propio desarrollado por Adobe para elaborar wireframes de manera profesional. Nos permite crear prototipos interactivos, funcionales y realistas ya que podemos incluir hasta el mínimo detalle.

Cuenta con numerosas funciones de gran utilidad como es la posibilidad de simular carruseles o secciones dinámicas, integrar comandos de voz y cargar especificaciones para los desarrolladores. Además cuenta con una cuadrícula de repetición que nos permite crear bloques enteros en muy pocos segundos.

MOCKFLOW

Se trata de una aplicación que nos permite crear wireframes en la nube. Al igual que las anteriores, su sistema se basa en arrastrar y soltar y ofrece numerosas herramientas muy novedosas. Es perfecto para principiantes ya que su uso es intuitivo y no tiene demasiadas complicaciones a la hora de crear una estructura simulada de un producto digital.

Su versión de pago es muy asequible y además cuenta con una prueba gratuita para que puedas familiarizarte con la interfaz. Puedes adaptar tus diseños a varios tamaños de pantalla y exportarlos en distintos formatos. ¡Tienes que probarla!

De igual forma existe otras herramientas como Figma, Axure o Canva.

CONCLUSIÓN

Como puedes observar, crear wireframes es una de las mejores formas de poder tener éxito en el desarrollo de un proyecto. No importa la herramienta o método que uses para ello, lo importante es dominarlo con soltura y tener claras las ideas que queremos plasmar.

¿Quieres saber más sobre el proceso de diseño de una interfaz? ¡Lee nuestra guía! Y déjanos en los comentarios cual es la herramienta que más utilizas para la elaboración de wireframes.

La entrada Wireframes | Concepto, tipos y ventajas en el mundo digital se publicó primero en Focux.

En este post entenderemos qué es lo que exactamente nos llama la atención de un diseño, porque lo hace y cómo ese proceso influye en nuestra mente. ¡Allá vamos! 

¿Qué es la Teoría de la Gestalt? 

En primer lugar hemos de saber que el término Gestalt procede del alemán y significa forma, figura o patrón unificado. Por tanto, la teoría o psicología de la Gestalt surge en este mismo país, en Alemania, específicamente en Berlín. Es en 1920 cuando se inicia este movimiento que pretendía encontrar un sentido a la manera en la que nuestra mente humana organiza la percepción como un todo. Así se deja a un lado la individualidad de los elementos. 

A raíz de esta corriente mediante la que surgen los principios de Gestalt que veremos más adelante, se estudia cómo la mente configura las imágenes que percibe. Es a través de la memoria y del trabajo de los canales sensoriales. Así, nuestro cerebro simplifica lo que capta y lo organiza en imágenes complejas 

Por ejemplo, cuando percibimos el rostro de una persona conocida, damos sentido a sus rasgos o elementos faciales de forma conjunta. Percibimos todo ello como un todo completo que configura una sóla imagen en nuestro cerebro. Exactamente esto es lo que hace la teoría de la Gestalt. 

Podemos resumir todo ello en la frase que enuncia que ‘el todo es mayor que la suma de las partes’.

Te explicamos los Principios de Gestalt 

A medida que han ido pasando los años se ha ido consolidando la lista de principios que determinan cómo actúa lo que percibimos visualmente y las herramientas para ello. Es así que los diseñadores utilizan cada uno de ellos para intentar generar un mayor impacto en el usuario con sus diseños. 

Los principios que te voy a enseñar son una combinación de aquellos que propuso Wertheimer en 1923 y los de Stephen Palmer en 1999. Así mismo se incluyen propuestas de otros teóricos contemporáneos de la Gestalt. Todos y cada uno de estos ítems van a servir para mejorar la usabilidad y funcionalidad de nuestros diseños y hacerlos más atractivos. 

¡Te invito a conocerlos! 

SEMEJANZA O SIMILITUD 

Este primer principio nos indica que percibimos como mismo grupo aquellos elementos que son semejantes entre sí. Explica cómo la mente humana agrupa visualmente elementos que son similares, independientemente de su proximidad. Esta agrupación se puede dar mediante tamaño, colores, texturas, formas y orientaciones. 

Si lo aplicamos al diseño UX, podemos usar el principio de similitud para clarificar al usuario aquellos elementos dentro de nuestra interfaz que son iguales y que cumplen la misma función. El hecho de que una interfaz se componga por elementos similares va a hacer que el usuario lo perciba con coherencia y equilibrio. 

Podemos decir entonces que el principio de semejanza nos permite además generar énfasis sobre un elemento concreto. 

FIGURA Y FONDO

Intenta dar una explicación sobre qué elemento de nuestro diseño se va a percibir como una figura y cuál como el fondo. Hablamos de figura para referirnos al elemento en el que centramos la mirada y de fondo para referirnos a lo que hay detrás de esta. 
A raíz de este principio observamos la manera en la que el cerebro humano aprovecha el espacio negativo. En este punto hemos de ser conscientes de que nuestra mente no es capaz de interpretar un objeto como figura y como fondo a la vez. Dicho principio se puede aprovechar para hacer numerosos trucos visuales que pueden dar a nuestro proyecto digital un aire diferente.

PROXIMIDAD 

Dicho principio habla de la proximidad que tienen los elementos entre sí. Afirma que si estos están muy cerca, tendemos a percibirlos como un mismo grupo. También ocurre en el caso opuesto, si ponemos mucho espacio entre elementos, nuestro cerebro los percibirá como entes separados. 

Es cierto que para que nuestra mente una estos elementos, además de la proximidad, suelen tener otras características comunes como pueden ser el color, la textura, la forma o el tamaño.

DIRECCIÓN COMÚN

Esta ley afirma que aquellos elementos que se orientan en la misma dirección o flujo, se perciben como parte de un mismo grupo. El principio de dirección común se aplica con éxito a animaciones tanto en 2D como 3D. En esos casos, las figuras se mueven al mismo tiempo y consiguen centrar así nuestra atención. 

En el diseño UX no podemos pasar el principio por alto ya que si lo aplicamos con precisión podemos generar estímulos importantes en la mente del usuario. Es además una forma original de crear diseños innovadores. Se aplica en el diseño moderno por tanto para generar nuevas impresiones. 

SIMETRÍA

El principio de simetría y orden también se conoce como pragnanz. Se trata de una palabra de origen alemán que significa ‘buena figura’. Se pretende demostrar como aquellos elementos que son simétricos se perciben como una sóla figura o cómo miembros de un mismo grupo. 

Del mismo modo afirma que los elementos que se encuentran en orden van a transmitir una sintonía y equilibrio que harán que el usuario los perciba en unidad. En el ámbito del diseño se ha demostrado que la simetría favorece la armonía del usuario con la interfaz. Por lo tanto va a favorecer la usabilidad de nuestro producto, en este caso de nuestra página web.

CONTINUIDAD

La ley de la continuidad afirma que la percepción visual humana tiende a seguir un camino lineal en función de cómo están agrupados. Se crea así una única percepción cuando los elementos que vemos están alineados. Cuanto más fluido sea el segmento, más tendemos a verlo como una figura unificada. 

Este principio puede ser una herramienta de mucho valor a la hora de guiar la mirada del usuario en la dirección que nos interese. Este va a tender a seguir el camino más sencillo uniendo líneas naturales aunque realmente no estén. Un buen ejemplo de ello serían los deslizadores puestos de manera horizontal. 

CIERRE

El principio de Gestalt que hace referencia al cierre nos dice que cuando los elementos forman parte de una figura cerrada, los percibimos dentro del mismo grupo. Lanza la idea de que el cerebro humano completa las partes de un diseño que faltan para crear una imagen completa. Existen ejemplos que tradicionalmente nos dan la imagen visual de este principio como puede ser el logo de FedEx.

Si queremos aplicarlo al trabajo de diseño UX o diseño de interfaz podemos recurrir a el momento en el que se muestra parcialmente una imagen o elemento y desaparece de la pantalla para mostrar al usuario que puede deslizar hacia la izquierda o hacia la derecha para completarla. 

Otras ideas clave de los Principios de Gestalt

Ahora que ya sabes cuáles son los Principios de Gestalt y sus aplicaciones, te queremos enseñar otras ideas clave a raíz de esta teoría que puedes utilizar también para tus diseños. 

En primer lugar te hablaremos de la idea de la aparición. Esta surge en el momento en el que percibimos e interpretamos un objeto basándonos en información que teníamos previamente. Se aplica generalmente a la hora de diseñar logos. 

En este ejemplo podemos ver que percibimos el objeto de forma total como figura completa mucho antes que las formas individuales ya que se trata de una silueta que conocíamos previamente. 

Pasamos a mencionar la cosificación. Nos permite reconocer objetivos incluso cuando están incompletos, cuándo faltan partes en ellos. En este caso una vez más nuestro cerebro hace que la percepción visual se complete con imágenes que ya están en nuestra memoria y que nos permiten llenar vacíos. 

En este ejemplo se puede observar cómo somos capaces de percibir figuras geométricas aunque no estén formadas del todo.

Posteriormente encontramos la idea de la multiestabilidad. Esta se basa en el modo en el que interpretamos objetos que son ambiguos o que se componen por varios conceptos. En estos casos nuestro cerebro se encarga de buscar una certeza. 

Entre los ejemplos más conocidos encontramos una famosa ilustración desarrollada por Edgar Rubin. El psicólogo danes formó esta imagen en la que se muestran dos formas, un rostro y un jarrón. Tu percepción visual va a identificar en primer momento una de las dos figuras, y tras analizarla podrás percibir sin problema ambas.

Y por último debemos mencionar la invariabilidad. Se basa en la capacidad que tiene el ser humano de reconocer elementos sea cual sea su posición, su escala o rotación. El cerebro puede percibir objetos desde diferentes perspectivas sin importar el hecho de que tengan diferente apariencia.

Conclusión de los Principios de Gestalt

¿Estás listo para aplicar a tus diseños estos principios? Ya has podido comprobar que son realmente útiles si tienes el objetivo de diferenciarte y crear un gran impacto en los consumidores de tu producto digital. 

Aprender a aplicar estos principios pueden favorecer la experiencia que el usuario tenga dentro de tu página web. Cómo ya te hemos contado en otros posts, esto se traducirá en un aumento de las ventas y por tanto de tus beneficios. 

Un diseño dinámico y diferente que sea capaz de captar la percepción del usuario hará que aumente el tiempo de permanencia incluso si es la primera vez que visita la web. Incorporar estos principios es relativamente fácil y puedes probar con los diseños que te resulten más exitosos. 

Nos encantaría que nos dejásteis en los comentarios nuevas ideas para generar imágenes sorprendentes aplicando los Principios de Gestalt. ¡Te leemos!

La entrada Principios de Gestalt | Qué son y cómo se aplican al diseño se publicó primero en Focux.

Esta metodología UX se ha convertido recientemente en una importante herramienta. Las empresas han comenzado a utilizar el Design Thinking para innovar y crear productos de mayor valor. Hoy te contamos cómo puedes aplicarlo tú y tener éxito. ¡Comenzamos!

¿Qué es Design Thinking? Conoce la historia del concepto

¿Qué es exactamente el Design Thinking? Hablamos de una metodología de trabajo diseñada para facilitar la resolución de problemas complejos. Pretende dar solución a problemas reales de los usuarios orientándose a la acción. Se utiliza por tanto para atajar problemas de diseño y desarrollo de productos y servicios de cualquier sector.

El término Design Thinking no es algo reciente. En 1959, John E.Arnold comenzó a utilizarlo en el ámbito de la ingeniería. No sería hasta años más tarde, concretamente en 1973, cuando Robert McKim lo introdujo en uno de sus libros. Por último, se trasladó hasta la Universidad de Stanford, en los Estados Unidos. 

Sin embargo, donde tuvo una importancia crucial fue en el año 1991. En ese momento, el concepto Design Thinking fue utilizado por David M.Kelley, fundador de la compañía IDEO. Dicha empresa se encargaría de ir trabajando el concepto poco a poco. A partir de ese momento, la metodología de la que te hablamos hoy ha tenido un éxito imparable.

Su nombre se traduce por ‘la forma en la que piensan los diseñadores’. Es por ello que usa la sensibilidad del diseñador y se centra tanto en la imaginación como en la lógica. Dicha metodología introduce equipos muy motivados que ponen al ser humano como centro de su proceso. Todo ello permite construir ideas que se basan en las emociones de las personas.

¿Para qué sirve la metodología Design Thinking? 

Lo que realmente ha hecho popular este método de trabajo es el hecho de que pueda adaptarse prácticamente a cualquier sector. No sólo se emplea en el ámbito tecnológico. Son muchas las empresas de todo tipo que a día de hoy lo implementan en sus sistemas de producción. 

Hay varios puntos a través de los que podemos explicarte para qué sirve el Design Thinking. ¡Te contamos cuáles son!

• Nos permite resolver problemas de una manera basada en la creatividad y la innovación. Podemos crear ideas que nunca antes se habían implementado utilizando para ello el pensamiento de usuario. 

• Ayuda a conocer la realidad a la que nos enfrentamos en el mercado. Nos ponemos en la piel del consumidor y así logramos entender sus necesidades a resolver. 

• Establece un método de trabajo rápido y exigente. No podemos fijar plazos muy largos ya que nuestro objetivo es salir al mercado en primera posición. Es por eso que de manera dinámica debemos crear soluciones con utilidad. 

• Convierte el trabajo en equipo en camino al éxito. Para usar el Design Thinking necesitamos diferentes perfiles profesionales. Todos ellos se unen para encontrar una solución aportando visiones únicas y necesarias. 

Fases principales del Design Thinking

Existen diferentes factores que pueden influir en los pasos a seguir en este método. El estilo usado por el propio diseñador o el objetivo de nuestro producto son algunos de ellos. De hecho, hoy en día podemos encontrar diferentes variantes de Design Thinking. 

Sin embargo, todos los tipos que han adoptado la metodología se componen por 5 fases de manera principal. Estas son: 

1. Empatizar: Comprender las necesidades, las características y los problemas de los usuarios es crucial. Esto nos permite hacernos con un conocimiento necesario para hacer propias sus motivaciones. No sólo debemos implicarnos en la solución del problema sino también en el propio entorno del mismo. Para realizar con éxito esta primera fase podemos usar técnicas como entrevistas, encuestas, focus groups o pruebas etnográficas. Si realmente hemos comprendido al usuario, obtendremos un buen resultado para nuestro producto. 

2. Definir: Vamos a poner el esfuerzo en sintetizar en conocimiento que hemos generado en la fase previa. Debemos centrarlo esta vez en el producto para generar una nueva perspectiva. Cribamos la información y nos quedamos con la que realmente aporta valor. Es así que definimos el problema y basándonos en la necesidad del usuario validamos nuestros hallazgos para comprobar que estamos en el camino correcto. Esta fase va a ser la base sobre la que desarrollaremos el enfoque que queremos dar. 

3. Idear: Es aquí donde generamos la mayor cantidad de opciones o ideas creativas. No debemos quedarnos con la primera alternativa, sino que debemos favorecer nuestro pensamiento expansivo e intentar elegir ideas que aporten soluciones visionarias. Este reto es principalmente creativo pero también es crucial para el Design Thinking. Podemos decir por tanto que es uno de los momentos más importantes del proceso. 

4. Prototipar: Consiste en hacer materiales las ideas que hemos creado. Cuando hablamos de prototipo hablamos de dibujo, modelo, boceto. Es la manera tanto de definir como de transmitir el concepto de forma dinámica. En esta etapa visualizamos del todo las posibles soluciones a nuestro alcance. Justo en este punto ponemos de manifiesto aquello que debemos mejorar para obtener con éxito un buen resultado final. Hemos de tener claro que el prototipo no es la solución definitiva, sino un paso intermedio hacia ella. 
5. Probar: Es una fase empírica que pretende validar la solución escogida. Nos ayuda a identificar mejores, fallos y problemas. Es importante ya que finalmente resolverá las necesidades de nuestro público objetivo. Durante este proceso evolucionaremos la idea hasta convertirla en la solución que buscábamos.

Estas fases del proceso de Design Thinking se usan además en el diseño de interfaz. Hemos elaborado una guía para tí en la que te contamos todo lo que debes hacer para alcanzar el éxito con tu diseño. ¡No te la puedes perder! 

Elementos característicos de la metodología

La metodología que te estamos mostrando es una herramienta muy eficaz para entrar en sintonía con los consumidores. Esta se basa principalmente en 7 elementos que sustentan sus principios. Estos han sido enunciados por la Universidad de Esan, especialmente por Daniel Aguilar, uno de sus profesores. ¡Te contamos cuáles son! 

• En el fracaso está el aprendizaje. El estudio que hagamos de las ideas generadas debe concluir con una solución que sea valiosa para el producto que tenemos. 

• La importancia de prototipar. Una de las bases del Design Thinking es desarrollar los prototipos que nos van a permitir entender cómo funcionan las ideas que generamos. 

• La base es la creatividad. Cada miembro del equipo que trabaja en esta metodología puede interpretar las soluciones bajo su propio enfoque creativo.

• Nos centramos en la empatía. Esta cualidad nos lleva a entender al usuario y por tanto a encontrar soluciones que entiendan sus necesidades. 

• Pueden existir a la vez varias ideas. Este hecho es el que va a impulsar que exista un pensamiento divergente. Lo importante es que tengamos una actitud propensa a explorar opciones. 

• Optimismo por bandera. El método Design Thinking es desde su origen optimista .Es por ello que se cree que cualquier propuesta puede resolverse con éxito y cualquier problema puede ser superado. 

• Siempre se debe iterar. Es un punto realmente importante porque nos lleva a la validación final de las ideas que hemos generado en el proceso de diseño. 

¿Cómo impulsarlo en nuestro proyecto? 

Para poder obtener unos buenos resultados hacia nuestro producto debemos centrarnos, como ya sabes, en la creatividad. Si utilizamos esta perspectiva, es importante que transmitamos al equipo una buena dosis de motivación. El líder o líderes del proyecto van a tener funciones cruciales a la hora de que el equipo sea capaz de generar nuevas ideas. Pueden hacerlo real siguiendo estos pasos.

En primer lugar debemos transmitir a todo el equipo una visión unitaria. Esto se hace con el fin de que todos puedan tener una base común sobre la que trabajar. Los objetivos finales del proyecto estarán claros y desde todos los perfiles se intentará conseguir lo mismo. 

Posteriormente se debe valorar la importancia de inspirar al equipo. La metodología Design Thinking busca expandir las ideas en todas las direcciones posibles, lo cual no es una tarea sencilla. Supone asumir un desafío que tendrá como meta solucionar los problemas según van surgiendo. 

Finalmente, se debe tener en cuenta que la innovación y la creatividad son los pilares sobre los que nos asentamos. Es por ello que te queremos dar algunas técnicas para fomentar estas aptitudes. Destacamos el método SCAMPER. 

Sus siglas hacen referencia a las palabras sustituye, combina, adapta, modifica, pon en diferentes usos, elimina y reduce. Aplicando estos pasos podemos descubrir funcionalidades para nuestro producto que se traducen en nuevos objetivos. 
Así mismo podemos usar otras técnicas como los mapas mentales o el Costumer Journey. ¿Te gustaría que te contáramos en un post las mejores técnicas creativas? Puedes dejárnoslo en los comentarios.

Conclusiones del Design Thinking

Cómo habrás podido comprobar a lo largo del post, la metodología Design Thinking es realmente efectiva a la hora de generar ideas creativas. Centrarse en el usuario y en sus problemas es lo que llevará al éxito a nuestro producto. 

Este método no sólo cuenta con un perfil polivalente para cualquier sector. Además tiene un increíble potencial transformador ya que nos ayuda en las fases en las que nos cuestionamos la utilidad de lo que creamos. 

Así mismo, con este proceso puedes trabajar y potenciar otros conceptos con más profundidad. Estos pueden ser la inteligencia emocional, la motivación, el liderazgo o la gestión de equipos. Viaja por todas las fases del Design Thinking y descubre una manera nueva de conseguir retos. 

Si quieres repasar todos estos conceptos y descubrir los mejores ejemplos de Design Thinking, no te pierdas nuestro vídeo en YouTube.

Hasta aquí llega el post de hoy. Esperamos que te haya sido útil y hayas disfrutado aprendiendo con Focux. Visita nuestro blog para aprender acerca del mundo digital y todos sus entresijos. ¡Volvemos pronto!

La entrada Design Thinking | Qué es y cómo se utiliza se publicó primero en Focux.

Antes de nada, queremos recordarte la procedencia del término UI. Procede del concepto User Interface, que se traduce en Interfaz del Usuario. Este área es el que se va a encargar de guiar a los usuarios durante su navegación web y de que este tome decisiones de manera natural.

¿Suena interesante, verdad? Pues en esta guía vamos a explicarte todo lo que necesitas saber sobre el diseño de interfaz. ¡Allá vamos!

¿Cuál es el papel del diseñador de interfaz? 

En el seno del User Experience existen numerosas áreas de especialidad y una de ellas es la del diseñador de interfaz. Este será el encargado de resolver o construir de manera gráfica la interfaz mediante la que el usuario interactúa con el producto. 

Es en este punto en el que debemos tener en cuenta que el proceso de experiencia de usuario es siempre cíclico, es decir, se repite hasta encontrar su mejor versión. Por ello, el papel del diseñador de interfaz debe basarse en el concepto user centric, que pone al usuario como centro de todo. Así, el diseño de interfaces tendrá como pilar el hecho de comprender las necesidades y problemas del consumidor y adaptar el producto a ellas. 

Una de las metodologías más comunes a seguir por el diseñador de interfaz es conocida como design thinking. ¡Te explicamos en qué consiste!

¿Qué es el Design Thinking? 

Se trata de una metodología UI que facilita el diseño y desarrollo de productos, en nuestro caso digitales, y pretende resolver todos sus problemas. A la hora de crear un producto exitoso, se compone de 5 fases que conforman el camino hasta el objetivo.

Empatizar: Consiste en conocer las necesidades y problemas del usuario y adaptarnos a ellos para resolverlos. Para ello utilizaremos métodos de investigación que te explicaremos a lo largo de esta guía. 

Definir: Una vez que somos conscientes de las necesidades de nuestro target, definiremos el problema y el alcance del proyecto. Para que esta tarea sea exitosa debemos estudiar minuciosamente las necesidades de nuestros usuarios. 

Idear: En esta etapa, a partir de las necesidades de los usuarios sacaremos ideas como solución al proyecto. Este reto debe ser creativo y debemos poner a disposición todas las herramientas necesarias para ello. 

Prototipar: A partir de la idea seleccionada, en papel o en digital elaboramos una maqueta o prototipo de lo que va a ser la solución. Más tarde la validaremos y comprobaremos si realmente resuelve las necesidades del público objetivo. 

Probar: Finalmente probaremos el prototipo elegido con los usuarios finales.

Los Principios de Gestalt para el diseño de interfaces

Existen una serie de pautas de diseño a seguir con la finalidad de que los productos digitales sean intuitivos y sencillos para los usuarios que los consumen. Entre dichas pautas encontramos lo que se conoce como Principios de Gestalt. Conocerlos nos va a ayudar a captar la atención de los usuarios mejorando la funcionalidad de nuestro diseño y potenciando la creatividad. 

Es una corriente psicológica que nació en Alemania a inicios del siglo XX  y explica cómo el ser humano percibe su entorno. La propia palabra Gestalt significa patrón o forma y con su teoría se intentó demostrar cómo el cerebro simplifica y organiza las figuras complejas para poder entender mejor el mundo.

¡Vamos allá con los Principios de Gestalt!

Principio de semejanza: Explica que como humanos tenemos tendencia a unir elementos aunque no estén próximos entre sí en el caso de que encontremos alguna relación entre ellos. Esta similitud puede ser en cuanto a forma, textura, tamaño o color entre otras características. 

Principio de proximidad: Nos cuenta que tendemos a ver como un sólo grupo aquellos elementos que se alineen de forma ordenada en un mismo espacio. 

Principio de continuidad: Enuncia que los seres humanos tendemos a agrupar elementos que se disponen en línea o en curva siempre y cuando lo hagan de manera ordenada. 

Principio de cierre: Se trata de que cuándo vemos una imagen incompleta, nuestro cerebro la rellena de manera automática con el concepto iconográfico que tenga de ella. 

Relación de figura-fondo: Habla de la tendencia del ojo humano a percibir el objeto o elemento principal sin prestar atención al fondo o a aquello que le rodea. Esto ocurre porque la mente humana no es capaz de interpretar un elemento como figura y fondo al mismo tiempo. 

Principio de simetría: Explica que los elementos que cuentan con cierta simetría y orden se perciben también como un sólo grupo. 

Principio de dirección común: La última de las leyes teoriza que se perciben como parte de un grupo aquellos elementos que forman un patrón en la misma dirección. 

Además de estos, existen una serie de principios de usabilidad enunciados por Jacob Nielsen, que puedes seguir en el proceso de diseño de interfaz. Aquí te dejamos uno de nuestros post en el que te los explicamos con detalle.

Investigación inicial para el diseño de interfaz 

En todo proyecto existen una serie de pasos iniciales que se deben seguir para sacarlo adelante. En el caso del diseño de interfaz, va a ser necesario llevar a cabo una investigación inicial mediante la que obtendremos datos necesarios para llegar al éxito. Desde Focux queremos explicarte cuáles son estos pasos y cómo sacar el máximo partido de cada uno de ellos.

Entender el problema de UI que queremos solucionar 

En primer lugar debemos identificar y comprender el problema respecto al diseño que queremos solucionar. Para ello es importante conocer las diferentes técnicas eficaces que existen. 

La primera y seguramente la más conocida es la de las 5W. Consiste en preguntarse factores cruciales sobre el proyecto que responda a dónde, cómo, cuándo, quién y por qué. Indagando en estas respuestas podremos obtener datos especialmente valiosos sobre los problemas que hayan surgido. 

Otra técnica es la de los 5 why, que consiste en preguntarse el porqué de cada cuestión sacando diferentes respuestas hasta 5 veces.

Una vez que hemos encontrado la técnica correcta para nuestro caso, podemos plantear el problema real identificando cuál es el estado actual del mismo y cuál es la meta que queremos conseguir.

 Conocer los tipos de investigación 

Ser consciente de los métodos de investigación que existen para aplicar al diseño UI es crucial. Nos servirá para conocer mejor a los usuarios, obtener información y así poder probar nuestra hipótesis. 

A continuación te mostramos alguno de los tipos que puedes emplear en función de si lo quieres hacer de modo formal o informal: 

Formal: Puedes utilizar el A/B testing, Analytics, los estudios etnográficos, las pruebas con usuarios, entrevistas y encuestas. 

Informal: Entre los métodos informales destacan las pruebas remotas, el Guerrilla Testing o los bocetos y mockups. 

La información que obtenemos a raíz de la investigación puede ser de dos clases.La primera es la cuantitativa, mediante la que podemos responder a preguntas de las que obtendremos información numérica. En segundo lugar, la cualitativa, que nos permite conocer observaciones, comentarios y sensaciones de los usuarios al usar el producto. Así podemos obtener información empírica. 

Va a resultar básico en cualquier investigación contar con una buena base de ambos tipos de información.

¿Qué es el Benchmarking? 

Uno de los tipos de investigación más innovadores y utilizados es el Benchmarking. Esta técnica consiste en analizar y comparar diferentes sitios de competidores que tratan de resolver el mismo problema que nosotros. 

A la hora de seguir este método debemos entender ciertas cuestiones y preguntarnos, qué están haciendo los competidores,qué funciona y qué no o cuáles son las expectativas de los usuarios. Así mismo deberemos fijar cuáles son las oportunidades de negocio que todavía no se han atacado o los patrones de diseño de interfaz que se están haciendo desde dentro de la industria. 

El ámbito del benchmarking es realmente amplio y por ello pronto te contaremos en un post todo lo que deberías saber sobre este método y cómo llevarlo a la práctica.

Realizar encuestas y entrevistas fijando el user persona

Para indagar más sobre las características, intereses y problemas de nuestros usuarios podemos utilizar las encuestas y entrevistas. Ambas herramientas nos permiten obtener información cualitativa y cuantitativa de forma económica y rápida. 

Posteriormente deberíamos definir quién es nuestro user persona. Son representaciones de nuestro tipo de usuario más común que nos sirven para identificar para quién estamos haciendo el diseño de interfaz. 

En cuanto a las encuestas, debemos tener en cuenta varios puntos para su realización: 

1. Definir el objetivo que nos interesa conseguir. 
2. Saber a qué tipo de usuarios queremos llegar. 
3. Cuidar la estructura de la encuesta.

Una vez que hemos obtenido los resultados analizaremos los patrones e identificaremos definitivamente las necesidades del producto para ponerle valor. Para hacer las encuestas podemos usar plataformas como TypeForm o Google Forms. 

En el caso de las entrevistas, contamos también con una serie de recomendaciones a seguir:

1. Debemos tener un guión. 
2. Buen método de grabación.
3. Tomar notas durante la entrevista. 
4. Actitud abierta y empática con el usuario. 
5. Crear una sintonía emocional con él. 

Organización de la información y bocetos para el diseño de interfaz

Una vez que hemos realizado la investigación pertinente siguiendo estos pasos, pasaremos a organizar toda la información. Así realizaremos los primeros bocetos de nuestro proyecto de diseño de interfaz.

En Focux te contamos cuáles son los siguientes pasos que tienes que cumplimentar para que tu proyecto sea absolutamente perfecto. El éxito está garantizado.

Análisis de interfaces

Es importante que tengamos claro cuáles son los elementos de la interfaz para poder construirla de manera eficiente. En primer lugar debemos prestar atención a los elementos de navegación. En este aspecto las solapas tienen que estar definidas, los niveles de navegación establecidos y los menús y acciones claros. Esto debe ser así para que el usuario en todo momento pueda acceder a lo que busca. 

De igual manera, los formularios deben presentarse con claridad y el contenido debe seguir una jerarquía lógica y ordenada. Las tipografías y la iconografía deben tener sentido y sintonía con el resto de los elementos como pueden ser los botones o carruseles. 

Por último se debe prestar atención a los resúmenes, los accesos y salidas y al propio login. Todo ello se relaciona además con la arquitectura de la información. 

Arquitectura de la información 

Se trata de una disciplina que organiza el contenido y los conceptos de forma ordenada. Tiene el objetivo de que la interfaz sea sencilla de usar. En caso del User Experience, significa estructurar el contenido para que sea accesible e intuitivo. Para cumplir con ello utilizaremos:

1. Sistemas de organización: tamaños, secuencias y temas.
2. Esquemas de organización: alfabético, cronológico, por temáticas. 
3. Información que se incluye en la barra de información.
4. Navegación lateral en la que se pueden ver las categorías.

Wireframes 

Una vez que hemos analizado los elementos que componen una interfaz y como se debe estructurar la información, elaboramos un wireframe. Se trata de bocetos que nos ayudan a definir la jerarquía de nuestros productos. Puede hacerse tanto en formato físico como digital.

Así representaremos de forma esquemática y sencilla cuál va a ser la estructura y diseño de la interfaz. En ellos no usaremos ni colores, ni tipografías ni elementos gráficos. Nos centraremos únicamente en la funcionalidad del sitio y en la experiencia que el usuario tendrá dentro de él. 

Si obtamos por elaborarlos en formato digital podemos usar Mockflow.

Realiza Guerrilla Testing 

Cuando tengamos claro el boceto que queremos seguir de manera esquemática, podemos usar técnicas de investigación para comprobar si va a tener éxito. Uno de esos métodos es el de Guerrilla Testing. 

Se trata de una forma de investigación informal que nos ayuda a comprobar los diseños que tenemos en mente a través de un feedback rápido por parte de los usuarios. Por lo general se hace en un lugar público, en una cafetería o en la calle. Y el promedio de personas a las que preguntaremos es de 10. 

El tipo de respuesta que recibiremos es cualitativa y esta nos permite validar nuestras ideas tanto a través de un prototipo como del producto final. 

Los pasos a seguir son los siguientes: 

• Revisar los diseños y anotar lo que queremos modificar o solucionar. 
• Preparar una guía para poder dirigir la entrevista. 
• Llevar a alguien que se encargue de tomar notas. 
• Buscar usuarios potenciales para entrevistar.
• Revisar y analizar los hallazgos.
• Iterar y planear nuevos test tan pronto como haya algo para validar. 

Elabora un Moodboard

En este punto es exactamente donde vamos a definir el estilo visual que va a tener nuestro producto. El moodboard es una colección de referencias visuales tales como fotografías, tipografías, iconografías, capturas de pantalla o cualquier ilustración que pueda servir de inspiración visual para lo que vamos a diseñar. 

Siempre que estemos haciendo un moodboard es importante que nos concentremos en el user persona que tenemos para que todo esté alineado y todo haga sentido con ese usuario.

Podemos incluir paletas de colores, cuestiones de branding, iconografía, soluciones de interfaces, tipografía, diferentes tipos de visualización. Así mismo el estilo de fotografías que queremos utilizar y agregar imágenes de nuestros tipos de usuarios.

Diseño de interfaz definitivo

A la hora de elaborar el diseño definitivo de la interfaz, es importante hacerlo para varios dispositivos. Tenemos que diseñar para móvil, ordenador y tablet. Para cumplir esta premisa existen dos metodologías:

Diseño adaptativo: En esta parte hemos de seleccionar los tamaños definidos de cada pantalla y diseñar a la perfección para cada uno de ellos. Aunque son muchas las ventajas, también nos puede ocasionar problemas en SEO. Además, si el usuario tiene un dispositivo más grande de lo que hayamos diseñado pueden quedar huecos. 

Diseño responsivo: Cuando se hace la implementación el diseño es totalmente fluido y se adapta a cualquier tipo de dispositivo. Es cierto que el tiempo de carga es más lento pero nos ayuda a mejorar el SEO y la experiencia a los usuarios.

A partir de aquí emplearemos lo que se conoce como Design System, herramienta vital a la hora de diseñar una interfaz. 

¿Qué es Design System? 

Una forma sencilla de iniciar un proceso de diseño es mediante el Design System. Este sistema se basa principalmente en una librería en la que almacenamos una colección de componentes que podemos reutilizar rápidamente. Para ello incluímos su código. 

Esta guía va a conformar la esencia de nuestro producto y va a ayudar a que todo el equipo pueda trabajar bajo los mismos cánones. Además, se va a conseguir que todos los elementos de la interfaz guarden relación entre sí y se dé un sentido único al proyecto. 

De lo que trata el Design System es de conseguir que todo el producto guarde una coherencia. No es sólo el hecho, por ejemplo, de que todos los botones tengan el mismo estilo. Con este sistema queremos definir un lenguaje, un tono, un estilo común que reme siempre en la misma dirección. Este método además nos ayuda a ahorrar tiempo y a mejorar la colaboración entre los diseñadores. 

Una manera simple de establecer un Design System es mediante la herramienta Atomic Design. 

Siguiente paso: User Testing 

Una vez que tengamos uno o varios prototipos finales, recurriremos al User Testing. Se trata de una herramienta de investigación formal que nos permite probar diferentes tareas con usuarios finales. Se recomienda llevar a cabo estas pruebas con un mínimo de 5 usuarios para así obtener de media un 80% de los problemas de usabilidad de nuestra interfaz.

Con ello conseguiremos que el prototipo obtenido sea de alta fidelidad y podamos validar con él el producto. Para ello nos tendremos que basar en el diseño que hemos obtenido anteriormente. Definiremos las tareas y determinaremos los pasos de interacción de manera que nuestro prototipo pueda simular un producto final. 

Con todo ello definido, pasaremos a usar una herramienta de prototipado, como Marvel.

Sirve para conectar nuestras pantallas y poder agregar interacciones entre otros pasos del proceso. Este punto es realmente importante ya que lo que queremos probar es que todas las fases que hemos desarrollado estén correctas. Una vez hecha esta investigación analizaremos el resultado para poder desarrollar el producto final. 

Entregamos al departamento de desarrollo

Una parte crucial de nuestro rol como diseñadores de interfaz es colaborar con nuestro equipo de desarrollo. Es importante que nuestro trabajo sea entregable para que las tareas sean sencillas y fluidas entre todos los miembros. 

Con el diseño definitivo aprobado y listo para desarrollarlo, podemos seleccionar diferentes herramientas para tramitar estas entregas. Una de ellas es Zeplin. Nos permite coordinar el diseño con el equipo de desarrollo para trabajar en conjunto y que estos puedan implementar lo que hemos creado. 

La gran ventaja de este tipo de herramientas es que es una manera de contar con un repositorio visual de nuestro diseño, aunar todo en un mismo lugar y permitir que todas las personas del equipo podamos usar un mismo lenguaje. 

Seguimos haciendo pruebas 

Con el proyecto entregado al equipo de desarrollo y estando el producto en funcionamiento con usuarios reales, es importante continuar haciendo pruebas. El ámbito de las pruebas de usabilidad es realmente amplio y aguarda numerosas formas. 

En función de cómo sea tu proyecto, los problemas que hayan surgido o las necesidades de tus usuarios, deberás realizar las pruebas de usabilidad de diferentes maneras. 

El equipo de FOCUX ha elaborado una guía para ti en la que te explicamos paso a paso todo lo que deberías saber sobre las pruebas de usabilidad una vez que has terminado el diseño de interfaces. ¡No te lo puedes perder!

Con todo lo que te hemos contado habrás caído en la cuenta de que el proceso de diseño de la interfaz es complejo. Debes estar atento a todos sus pasos y profundizar en cada uno de ellos para caminar hacia el éxito. 

Esperamos que te haya sido útil la información. Puedes seguir consultando nuestros posts para aprender sobre usabilidad y mucho más. Y además, te invitamos a dejar en los comentarios tus impresiones sobre el proceso de diseño de interfaz. ¡Nos leemos pronto!

La entrada Diseño de interfaz | Guía 2022 de UI design se publicó primero en Focux.