Crea tu startup
User experience dise帽o

Manual b谩sico de UX para emprendedores

Carlos es emprendedor. Pero est谩 atascado con su proyecto (una app). 驴El problema? Necesita crear un prototipo para testear y validar con clientes, pero no sabe de dise帽o ni de UX (experiencia de usuario) y no tiene ni idea de por d贸nde empezar.聽

Si est谩s emprendiendo con un proyecto digital y t煤 tambi茅n te sientes un poco como Carlos, no puedes perderte este post.

Manuel Medina, (Consultor de Experiencia de Usuario en Santander Global Tech y emprendedor), nos desvel贸 en una TalkX de Santander X los 3 pasos y los muchos recursos disponibles para prototipar y darle vida a tu proyecto digital con un dise帽o profesional, atractivo y que genere una percepci贸n positiva en el usuario.

Lo primero, unas nociones b谩sicas de UX:

Diferencia UX vs UI聽

Cuando vas a desarrollar un producto digital, una web… necesitas hacerlo teniendo en cuenta la experiencia de usuario (UX o user experience), facilitando y pensando en el camino que debe recorrer el usuario para llegar a su objetivo de la manera m谩s sencilla, intuitiva y c贸moda posible.

Las siglas UX est谩n relacionadas con la planificaci贸n del boceto, ese prototipo que muestra el contenido y c贸mo se va a interactuar dentro de tu web o app: primero bocetas la estructura a nivel baja fidelidad (sin mucho detalle y sin ser definitivo: men煤s, contenido m谩s importante arriba, bloques y secciones鈥 a煤n no es momento de poner iconos ni pensar en dise帽os espec铆ficos).

En una etapa posterior ya te adentras en el dise帽o, la interfaz de usuario (UI o user interface): la parte m谩s visual, la apariencia de tu estructura y de las acciones de tu producto digital. Aqu铆 es donde se aplica la creatividad, conceptos de dise帽o, gama crom谩tica, iconograf铆a, tipograf铆a…

 

3 pasos (y muchas herramientas) para crear tu prototipo

 

1. Haz tu boceto en papel (s铆, en papel)

Es importante dibujarlo a mano, porque al hacerlo de forma manual, activamos el hemisferio creativo del cerebro. Necesitas plasmar la estructura b谩sica y los contenidos, as铆 como los botones principales que te har谩n pasar de una pantalla a otra. A veces ayuda ponerlo en v铆deo (grabar papel tras papel las diferentes pantallas, replicando las acciones que debe hacer el usuario en cada una).聽

boceto papel-Kellysikkema

Fuente: Kelly Sikkema – Unsplash

 

2. P谩salo a prototipo digital o Wireframe

Al pasar tu boceto de papel a digital dejar谩s bloques con X para identificar d贸nde va a ir una fotograf铆a o ilustraci贸n. Las im谩genes pueden no ser definitivas, pero quiz谩s ya sabes que necesitas tener una tab bar (men煤 en la parte inferior de la pantalla con iconos para pasar de una secci贸n de la app a otra). Vas viendo c贸mo va a ser tu men煤, qu茅 partes van a aparecer destacadas, qu茅 notificaciones, qu茅 campos tendr谩 tu buscador… Hay varias herramientas que puedes usar:

  1. Sketch + Marvel o Invision: a nivel profesional se usa Sketch en entorno Mac. Para crear las interacciones (navegar entre pantallas) te apoyas en otras apps, como Marvel o Invision
  2. Figma: es un software online, por lo que se puede usar tanto en Mac como en PC. Lo bueno es que es sencillo y puedes hacer la interacci贸n de Marvel o Invision dentro de ella. Tiene 30 d铆as de prueba, puedes hacer tests de usuario y del producto final, se puede configurar para tener diferentes usuarios… Adem谩s tiene un p谩gina de ayuda.聽
  3. Otras: hay m谩s disponibles, como Axure o Adobe XD鈥 pero no son tan recomendables para alguien que est谩 emprendiendo.聽

Pero aunque esto te puede agobiar, tienes que saber que cuentas con muchos recursos para inspirarte a la hora de hacer tu prototipo digital:

Y para soluciones mobile tambi茅n tienes:

Adem谩s puedes utilizar una herramienta como Design System, una librer铆a de componentes visuales donde puedes aplicar botones, elementos de formulario, iconograf铆a鈥 simplemente arrastrando desde su librer铆a hasta tu producto. Ahorrar谩s tiempo dise帽ando botones, el walk-through (las pantallas que te van saliendo cuando te descargas una app para mostrarte c贸mo se usa), etc.聽Para Sketch es gratuito, para Figma tiene un coste, pero facilita mucho la vida.

wireframe

Fuente: marvelapp

3. Aplica el dise帽o visual

Ya est谩s en el paso final, en la “alta fidelidad”, es decir, un dise帽o mucho m谩s aproximado a lo que se construya en el futuro: ya aparecen colores, iconos dentro de los tab bar, tipograf铆a final鈥 Para ese dise帽o te puedes apoyar en estas otras herramientas:

1. Paleta de colores

Una vez que tienes ya los elementos de tu pantalla, el software y la estructura, 驴qu茅 colores usas? Es importante diferenciar entre colores primarios y secundarios: los primarios est谩n en tu logo y los secundarios se relacionan y conectan con el logo. Tengas o no tengas ya tu logo, para elegir los colores que visualmente funcionan juntos puedes usar:聽

Acu茅rdate de la regla 60-40 para tus colores cuando est谩s trabajando en una app m贸vil o una web (sobre todo en una app m贸vil):

Necesitas un 60% de contenido visual con colores primarios (para que el usuario, sin ver el logotipo, identifique que est谩 dentro de tu aplicaci贸n o web), y el 40% restante en colores secundarios.

2. Ilustraciones

3. Fotograf铆as

Hay decenas im谩genes libres de derechos:solo necesitas referenciar el enlace o el autor en alguna parte de la web o de la app. El portal m谩s conocido es Unsplash, pero tienes muchos m谩s bancos de im谩genes para encontrar la foto perfecta.

4. Fotomontajes

Para presentaciones o vender tu app descargas un fondo en formato fichero PSD (Photoshop) y le a帽ades un pantallazo de tu app, que quiz谩s no est茅 construida pero queda m谩s real y vende mucho, a la hora de conseguir financiaci贸n o demostrar que tu aplicaci贸n ya est谩 pr谩cticamente en producci贸n.

dise帽o visual UX

Fuente: Santander Global Tech

 

Si te interesa indagar m谩s en el tema UX, puedes suscribirte a blogs donde encontrar谩s informaci贸n actualizada en temas que van cambiando cada pocos meses, por ejemplo:

https://www.smashingmagazine.com/

https://www.nngroup.com/

 

Esperamos que este post te haya servido de ayuda a la hora de construir tu prototipo digital. Si te ha gustado, 隆comparte!

Share this Story
Ver m谩s Articulos Relacionados
Ver m谩s en Crea tu startup

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Las 10 preguntas que le har铆as a una inversora top sobre tu startup

Seguro que t煤 tambi茅n te haces estas 10 preguntas a las que nos contest贸 Susana Garc铆a Robles (experta en mercados emergentes, inversi贸n de impacto y emprendimiento femenino).

Promueve:

junio 2020
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930