Diseño de Productos Digitales: Del Prototipo a la Experiencia Mobile

Clase 13 de 35 • Curso de Diseño de Interfaces Móviles

Clase anteriorSiguiente clase

Resumen

Vamos a trabajar sobre el proyecto que estuvimos trabajando en el Curso de Diseño de Interfaces y UX

Hellen Alexandra Rozo Suarez

student•

Pasos para interfaz:

Definir el producto y la idea del producto
Definir el timeline del usuario (viaje del usuario para llegar a la solución de lo que busca)
Hacer encuestas: para validar la perspectiva del usuario
Conocer las unidades de información que tendrá la app, entender la información para representarla a los usuarios
Customer journey: conocer las actividades y pasos que el usuario priorizaría
Protopersonas: idear un tipo de usuario que tiene sus cualidades, pain points y necesidades, sería el usuario ideal del producto.
Caso de uso: contar una historia respecto como una persona se puede relacionar con el producto, de acuerdo al protopersona se realiza una narrativa.
Definir las funcionalidades: a partir de un MVP (mínimo producto viable)
Definir diagrama de flujo: del producto (inicio sesión, menú, buscar, destino individual, etc).
Wireframes: cuando se tiene claro el flujo que tendría el usuario, se pasa a hacer los wirframe teniendo en cuenta la unidad de información que se desea representar. Se puede iterar varias veces y es fácil hacerlo en papel.
Terminar en la computadora: creando las diferentes pantallas y poder entregar un UI kit a los desarrolladores (user interface kit, es un archivo que incluye varios elementos ya prediseñados (como por ejemplo: botones, iconos, tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario).

Juan Reyes

student•

Herramientas para poder conocer más a tu usuario.

Protopersona
Representación de tu usuario ideal.
( Existen también User Persona, la diferencia es que el User Persona esta más completo).

Casos de Uso
Se cuentan historias donde personas estén relacionadas con nuestro producto.

Customer Journey
Con esta herramienta para poder entender un poco mejor el recorrido del usuario antes de hacer un objetivo.

Formulario
Encuestas a personas que empaten con nuestro producto.

Juan Reyes

student•

Y existen un sin fin de formas de conocer a nuestro usuario y poder empatizar más.

Los cursos de Desing Thinking, User Research y Lean Ux te ayudarán mucho a eso.

Natanael Becerra Andrade

student•

Protopersonas, casos de estudio junto con el customer Journey van muy de la mano. Pero como se inician comúnmente? Se empieza con un doc sobre un caso hipotético de uso, no?

Ernesto Cruz Bravo

student•

“Nosotros no contamos como usuarios” a la hora de diseñar

Alejandro Sol Villaseñor

student•

Exacto eso es una buena practica a la hora de diseñar una aplicación por que permite ver tu producto desde la perspectiva del usuario real.

Daniel Morales

student•

Hice el curso de Curso de Diseño de Interfaces y UX, y el proyecto es totalmente diferente.

Juan Diego Villamizar

student•

Definir el producto
disitintos usuarios del producto
casos de uso
protopersonas
customer journey
wireframe
terminar en la computadora

Adaptacion a mobile

Yessica Alondra Avila Sánchez

student•

Más sobre mobile web:

http://www.torresburriel.com/weblog/2014/08/26/como-disenar-una-web-mobile/

Alejandro Sol Villaseñor

student•

Gracias por el aporte!

Antonio herazo

student•

Hola Cual es el orden de los cursos de la carrera de Diseño de Interfaces (UI) por ejemplo el curso de Diseño de interfaces y UX aprece despues de este curso, entonces estoy perdido, alguna ayuda porfa, Gracias

Diego Fernando Arósquipa Rojas

student•

Personalmente, te recomiendo iniciar con el "Curso de Diseño de Prototipos". Se mete desde un inicio al diseño de interfaces con "Figma" utilizando una forma de diseño super útil y ordenada llamada Atomic Design. Luego ya puedes ir tomando los otros cursos si quieres profundizar en los distintos elementos para movil y desktop así como otras metodologías de trabajo.

David Behar

student•

Yo recomiendo empezar en mobile, hacerlo mobile first

Duvan Carvajal

student•

Yo recomiendo conocer primero al usuario, que tipos de usuarios tendremos y que problema vamos a solucionarles. Teniendo esto en cuenta podemos optar si nuestra solución se necesita mas en Dekstop o en Mobile.

También, no debemos olvidar que mobile first no es lo mismo que mobile only 😄

Jorge Arturo Mendoza Peralta

student•

Buen resumen de todo el proyecto desarrollado en el curso, fue casi como repetirlo de nuevo XD.

Italika México

student•

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

El proceso de ideación y planeación es muy importante
Podemos hacer encuestas para entender a nuestros usuarios
El customer Journey es muy importante para entender el camino del usuario
Cuando pensamos en las funcionalidades es importante pensar en términos de MVP
El primer proceso es el Sign in para luego pasar al Home
El papel es un gran amigo
UI Kit es lo que necesitan los desarrolladores para empezar a escribir código
Lo ideal es iniciar con la versión mobile

Natanael Becerra Andrade

student•

Protopersonas, casos de estudio junto con el customer Journey van muy de la mano. Pero como se inician comúnmente? Se empieza con un doc sobre un caso hipotético de uso, no?

JVN PURPLE

student•

Protopersonas, es un ejercicio para imaginarnos a ese ++usuario ideal ++que nos gustaria use nuestro producto, al realizarlo está bueno pensar en distintos tipos de usuarios por lo menos 5.
Al diseñar nuestro producto, lo hacemos pensando en el usuario y si bien quizá ya tenemos una idea preconcebida de como es ese usuario que va a usar nuestra plataforma es necesario ampliar nuestro diseño a otros tipos de usuarios y tenerlos en cuenta.
Los casos de uso es otro ejercicio para imaginarnos una ves tengamos ya a nuestras _Protopersonas _ Una narrativa de uso “Stories” en la que pensamos a detalle como es que nuestro usuario va a utilizar nuestro producto en que situaciones y en que condiciones, esto nos ayuda a entender mejor como deberíamos diseñar teniendo en cuenta el uso de nuestro producto en la vida real, en diferentes situaciones. Esto lo podemos imaginar teniendo en cuenta la data adquirida al hablar o encuestar a posibles usuarios.
Y por ultimo el Customer Journey es un mapa en el que intentamos plasmar todo el recorrido que creemos hará nuestro usuario al usar nuestro producto, desde que nace la necesidad por usar nuestro producto hasta que satisface su necesidad.
Es un ejercicio que involucra todas las posibles instancias por las que va a pasar nuestro usuario al usar nuestro producto como herramienta, piensa en que le recorrido del usuario no es lineal si no mas bien repetitivo y constante.

Espero haberme explicado bien, soy un asco explicándome.

Alejandro Sol Villaseñor

student•

Gracias por los aportes, son muy buenos!

Diana arias

student•

http://emptystat.es/page/2

jesus garcia

student•

A mi no me interesa trabajar en un proyecto ya iniciado! :(

Cornelio Reyes

student•

alguien tendra en link para : Curso de Diseño de Interfaces y UX ? ... Gracias.

Diego Perdomo

student•

Hay 3 plataformas de Mobile:

Web: es el proceso más mecánico.
- La experiencia debe ser lo más parecida a la parte desktop.
- Se sigue consumiendo desde un navegador -> va a estar consumiendo los mismos servicios y usando el mismo código.
Android
IOS

Wilmer Vera

student•

No salen los videos en el App ??

Néstor Gabriel Naula López

student•

😄

Diana arias

student•

Ejemplos de Empty Spaces

Nasser Emil Issa Tavares

student•

Proceso de diseño de cualquier producto

Definir bien el producto con todas las características.
Tener en cuenta cuales van a ser los distintos usuarios de estos productos.
Pensar en términos de casos de usos (definir acciones primarias y secundarias).
Pensar en protopersonas (ese “usuario ideal” que nos gustaría use nuestro producto).
Pensar en el Custumer Journey (el mapa en el que intentamos plasmar todo el recorrido que creemos hará nuestro usuario al usar nuestro producto, desde que nace la necesidad por usar nuestro producto hasta que satisface su necesidad).
Pensar por wireframes (los planos, el diseño en si)
Terminar el proyecto en una computadora o móvil