Aplicaciones, Diseño UX, Diseño web

El arte del dibujo UX y el prototipado de papel.

Consejos y trucos de “prototipado en papel”.

¿Cuándo está lista tu idea para ponerla delante de la gente?

Esta es probablemente la pregunta con la que todo emprendedor lucha. Como propietario de un producto o empresario, siempre somos muy escépticos acerca de sacar a la luz las ideas tempranas.

Estando en el ecosistema de inicio desde hace bastante tiempo, he validado esta afirmación con mi experiencia: ¡Su idea está lista para ser puesta en frente de personas con los primeros trazos de tinta sobre papel! Los bocetos en papel o el dibujo de la pizarra nunca se miran hacia abajo. Más bien, a menudo se predica que muestre su diseño lo antes posible para que tenga un amplio rango de cambios.

¿Cuándo son útiles los prototipos de papel?

Los prototipos de papel son útiles en casi todas las etapas del proyecto. Es posible que desee volver con una modificación de diseño durante el desarrollo intermedio o incluso el lanzamiento posterior. ¡La mayoría de las veces desea visualizar rápidamente nuevas ideas y estallar con lápiz y papel incluso cuando tiene el diseño de alta fidelidad listo! Es más rápido comunicar y validar cambios de diseño en papel que en diseños de Photoshop de alta fidelidad.

Los diseñadores utilizan diferentes tipos de bocetos en función de con quién están trabajando y lo que necesitan para comunicarse. Los bocetos en papel son excelentes cuando …

  1. El diseñador / gerente de producto está pensando en todas las ideas iniciales que pasan por su cabeza,
  2. perfilar los pasos en un flujo de usuario
  3. Explorar y validar variedad de diseños.
  4. y para mostrar la estructura básica de la aplicación



Etapas del prototipo de papel.

Los diseñadores eligen entre bocetos en papel de baja fidelidad y bocetos en papel de alta fidelidad en función de con quién se comunican.


Bocetos de baja fidelidad.

Bocetos en papel de baja fidelidad.

¡Estos son principalmente los bocetos que haces para ti mismo mientras piensas! Puedes usar estos bocetos básicos para:

  • Para auto-lluvia de ideas, y
  • Discusión interna del equipo



Bocetos de alta fidelidad.

Bocetos en papel de alta fidelidad.

Los bocetos de alta fidelidad son el siguiente nivel de bocetos cuando desea colocar sus diseños frente al usuario y los clientes. Incluye bocetos detallados, forma de botones, colores e imágenes, etc.

La mayoría de los diseñadores crean un prototipo digital en esta etapa ( aunque, también puede crear un prototipo con bocetos de baja fidelidad ). Los bocetos de alta fidelidad se pueden utilizar para:

  • Discusiones con clientes.
  • Pruebas con usuarios reales.

Bocetos de alta fidelidad es un paso que realmente no debes saltear. ¿Por qué? Cuanto más pueda iterar y eliminar ideas en papel, más rápido se moverá con sus diseños digitales.

Consejos para hacer prototipos de papel kickass!

1. Explorar diferentes variedades de elevaciones y sombras.

Sombras y elevaciones en papel prototipo.

Los diseñadores son muy particulares sobre las sombras y la visión realista. Además, ofrece una perspectiva mucho mejor cuando está validando sus diseños con usuarios o clientes. Doble cintas de doble cara para elevar la capa o desplegar para obtener la sombra y la elevación.


2. Toma imágenes de bocetos en papel y crea un prototipo digital.

La creación de prototipos digitales de sus bocetos en papel garantiza que sus usuarios / clientes / compañeros de equipo entiendan la interacción del usuario en la aplicación, que de otro modo es una mera conjetura.

La creación de un prototipo garantiza que los usuarios puedan tener una representación realista de la aplicación:

  • Temporizadores para pantalla de bienvenida y onboarding.
  • Usa los menús desplegables de la forma en que estarían en la aplicación (Capas)
  • Encabezados fijos y pie de página, etc.
 
Crea prototipos digitales.


3. Usa marcadores más gruesos para mostrar diferentes secciones.

Por lo general, cuando tiene demasiadas cosas para mostrar en los bocetos, a menudo se vuelve demasiado agrupado y la audiencia (usuario / cliente / compañero de equipo) enfrenta una gran dificultad al tratar de entender qué grupo de elementos pertenece a una sección. ¡Es más de un collage! :PAG

El truco es comenzar con un marcador gris claro (20 a 30% de gris), y agregar progresivamente capas de detalles con marcadores y bolígrafos más oscuros. A medida que las páginas se llenan de ideas, vuelva con un marcador más oscuro (60% de gris) o un bolígrafo, y agregue más detalles para las partes que desee.

Precaución  : si comienza a dibujar con un bolígrafo y luego ingresa con un marcador, es probable que la tinta del bolígrafo se desprenda del alcohol en el marcador.

Prueba estos conjuntos de marcadores


4. Si tiene un color de tema para la aplicación, use papeles de colores de ese tono

Por lo general, tengo papeles de diferentes colores en mi kit de papelería para poder usarlos mientras creo estos prototipos de alta fidelidad. Las ventajas de esto son:

  • Ayuda a mantener la consistencia en todo el prototipo de papel.
  • Reduce la carga de colorear manualmente secciones más grandes.
  •  
  •  
  •  

5. Tome copias de xerox de sus dibujos de baja fidelidad (bocetos en blanco y negro) y pruebe las variaciones de color

A menudo es un misterio por qué un determinado tono de azul se comporta mejor que el otro. ¡Otro hecho es que puedes descifrar tales misterios solo cuando pruebas! Cuanto antes valide esto, mejor será para el proyecto en términos de costo, esfuerzo y tiempo.

Una salida fácil es tomar copias xerox de los bocetos en blanco y negro y probar diferentes tonos en él, en lugar de dibujar el mismo conjunto de pantallas una y otra vez.

Ultimas palabras

Se ha escrito mucho a través de Internet y también escuchamos a muchas personas hablar sobre la importancia de los bocetos en papel, pero desafortunadamente parece que muy pocas personas hacen bocetos. Recientemente tuvimos una encuesta en línea para comprender el punto de dolor de los diseñadores con prototipos de papel. Al final resultó que, la mayoría de los diseñadores se abstienen de hacerlo debido al esfuerzo extra y el tiempo involucrado en el proceso.



Traducido al español de :  https://goo.gl/q3uy5h
Compartido con fines educativos.

0

Blog, Branding, Diseño UX

Plantillas de investigación UX 

Existe un procedimiento estándar y aceptado para la investigación de usuarios. Por lo general, es algo como esto:

  1. Encuentra usuarios con quienes hablar.

  2. Programe pruebas de usuario y entrevistas.

  3. Sintetice los hallazgos en un informe de investigación.

  4. Construye una nueva característica.

  5. Enjuague y repita.

La gran cantidad de información que recopila cuando habla con sus usuarios hace que sea tentador implementar algo simple y repetible. Pero estas metodologías establecidas pueden hacer que sea más difícil llegar al punto de la investigación del usuario: identificar cómo crear un mejor software para sus usuarios.

Esto se debe a que la forma en que ejecuta su investigación depende en gran medida de las preguntas que hace y del producto que está creando.

Obtenga un paquete maestro de 15 plantillas de “Investigación del usuario” gratis
User Research

 

 

0

Aplicaciones, Diseño UX, Diseño web
Diferencia entre una aplicación móvil y una aplicación web

Existe una idea errónea de que las aplicaciones móviles y  web  son la misma cosa, pero en realidad, las dos son muy diferentes.

No solo existen diferencias para el usuario; también se desarrollan y se implementan de manera diferente, por lo que es importante no confundir a los dos.

En primer lugar, puede ser útil distinguir entre aplicaciones web y sitios web. En pocas palabras, una aplicación web es un sitio web que está diseñado de forma fluida, respondiendo a la vista en un teléfono inteligente. Hay muchos tipos diferentes de sitios web, algunos son estáticos y rara vez se actualizan, mientras que otros son receptivos y tienen mucha interactividad. Las aplicaciones web, específicamente, funcionan como aplicaciones descargables, pero todo desde la comodidad del navegador de su teléfono.

¿Pero cuál es la diferencia entre una aplicación móvil y una aplicación web? Vamos a ver.

Aplicaciones móviles vs. aplicaciones web

Las aplicaciones móviles nativas están diseñadas para una plataforma específica, como iOS para Apple iPhone o Android para un dispositivo Samsung. Se descargan e instalan a través de una tienda de aplicaciones y tienen acceso a los recursos del sistema, como el GPS y la función de la cámara. Las aplicaciones móviles viven y se ejecutan en el dispositivo mismo. Snapchat, Instagram, Google Maps y Facebook Messenger son algunos ejemplos de aplicaciones móviles populares.

Las aplicaciones web, por otro lado, se acceden a través del navegador de Internet y se adaptarán a cualquier dispositivo en el que las visualice. No son nativas de un sistema en particular y no necesitan descargarse ni instalarse. Debido a su naturaleza receptiva, se parecen y funcionan mucho como las aplicaciones móviles, y aquí es donde surge la confusión.

Consideremos la aplicación nativa de Yelp frente a la aplicación web Yelp.com . Si instala la aplicación Yelp en su teléfono móvil y luego accede a Yelp.com a través del navegador de su teléfono, verá que la aplicación web se ha creado para verse y sentirse como la aplicación móvil nativa: enciende la barra de su navegador, y cuando te desplazas hacia abajo, bloquea la barra de búsqueda en su lugar.

Designux Peru - aplicacioness moviles y web - sitios web - tiendas en linea - diferecnai entre aplicaciones moviles y web


Si bien los diseños son similares y siguen las mismas fuentes y combinaciones de colores, estos son esencialmente dos productos diferentes.

“Las aplicaciones web necesitan una conexión a Internet activa para poder ejecutarlas, mientras que las aplicaciones móviles pueden funcionar sin conexión. Las aplicaciones móviles tienen la ventaja de ser más rápidas y eficientes, pero requieren que el usuario descargue regularmente las actualizaciones. Las aplicaciones web se actualizarán a sí mismas.”

 

0

Diseño UX, Programación
Este es un tema que se suele debatir constantemente, un tema sin duda importante :
¿ deberían los diseñadores aprender a codificar?
Podemos pasarnos horas en un debate sobre qué habilidades pertenecen a quién, pero como la mayoría de los diseñadores sabrán, en realidad, las líneas se están difuminando continuamente, y es casi imposible trabajar dentro de los límites de una sola descripción del trabajo. En la industria del diseño competitivo en constante evolución, hay una discusión más relevante en juego. Cada vez más, nos preguntamos, ¿Cómo pueden los diseñadores mantener su ventaja y ser más ágiles? ¿Cómo pueden colaborar de manera más efectiva para crear excelentes productos finales? En este post, no vamos a volver a analizar temas sobre si los diseñadores deberían aprender a codificar o no. En cambio, vamos a considerar una pregunta diferente:

¿cómo puede aprender a codificar para que pueda convertirse en un mejor diseñador?

 

Enriquece tu trabajo

Independientemente de si los diseñadores necesitan saber cómo codificar, no se puede negar que el dominio de nuevas habilidades enriquecerá significativamente el trabajo que usted hace. Esto es cierto para cualquier profesión: para progresar, debes aprender continuamente y esforzarte por superarte. La industria del diseño es, por naturaleza, uno de los campos más progresivos para trabajar. Los mejores diseñadores piensan de manera innovadora y constantemente buscan innovar, y aprender nuevas habilidades es parte de esto. Como diseñador, naturalmente enfoca su trabajo desde una perspectiva de diseño. Pero, ¿y si pudieras ver las cosas desde un punto de vista diferente? es decir, a través de la lente de un desarrollador? Las habilidades de aprendizaje frontend ampliarán sus horizontes mucho más allá del diseño, descubrirá enfoques nuevos, desarrollará nuevas formas de pensar y aprenderá a considerar su trabajo de manera más objetiva.

“Los mejores diseñadores piensan de manera innovadora” 


Conviértase en un mejor colaborador

Los grandes diseñadores son maestros de la empatía , y no solo del usuario. Si puedes empatizar con tus compañeros de trabajo, estás en una posición mucho mejor para colaborar. Esto es especialmente valioso cuando se trata de trabajar con desarrolladores. El aprendizaje de las habilidades frontend clave le permitirá comprender y comunicar de manera efectiva los requisitos técnicos del diseño. Pero ¿Por qué es importante? Pensemos en un problema común; una discrepancia entre lo que el diseñador quiere y lo que el desarrollador puede ofrecer. Para superar este colapso en la comunicación, los diseñadores y desarrolladores deben hablar el idioma del otro. Los diseñadores que pueden “hablar” frontend tienen una comprensión mucho mejor de lo que es posible desde una perspectiva de desarrollo. Entonces concluimos que con algunas habilidades frontend fundamentales en tu haber, puedes comenzar a diseñar tanto para el desarrollador como para el usuario. Incluso si no tiene acceso directo al código en su trabajo diario, puede diseñar con el conocimiento de cómo se implementará su visión.

 



“El código es realmente otra herramienta para diseñar cosas”
0