Amplificador de audio de alta fidelidad para sistemas activos de ...
Del story board al MVP de alta fidelidad
-
Upload
yoeldata-localdata -
Category
Documents
-
view
228 -
download
5
description
Transcript of Del story board al MVP de alta fidelidad
![Page 1: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/1.jpg)
+
![Page 2: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/2.jpg)
+
Del story board al MVP de alta fidelidad Andrés Cuéllar [email protected] [email protected] @nfcue
![Page 3: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/3.jpg)
+Preguntas del cliente al emprendedor
¿Si tu producto falla, ¿Estarás conmigo apoyándome?
¿Realmente entiendes lo que quiero alcanzar/realizar?
¿Si uso tu producto alcanzaré los resultados que busco?
![Page 4: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/4.jpg)
+Vamos a validar
Los pivotes son de gran importancia pues nos permiten saber si el bien o servicio que ofrecemos realmente esa supliendo las necesidades de alguien.
Validar hipótesis, necesidad que solucionas
Validar características propuestas del producto de acuerdo a las necesidades del cliente
![Page 5: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/5.jpg)
+ Landing Page y redes sociales
La página de aterrizaje busca generar trafico/tracción en pro del producto/servicio
n PUSH: atraer clientes a partir de la referencia de otr@s usuari@s de nuestro servicio o producto. Redes sociales, MailCheap
n PULL: adds, adworks, motores de búsqueda
n PAY: pago para obtener datos de prospectos de clientes
![Page 6: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/6.jpg)
+ Landing Page y redes sociales
Usar esta página para conseguir clientes, capturar sus datos y realizar métricas
n Permanencia en la página
n Número de registro
n Cantidad visitantes
n Relación registros/visitas
n Validar hipótesis
![Page 7: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/7.jpg)
+Planos: Según estructura
n Architecture map o Mapa de arquitectura
![Page 8: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/8.jpg)
+ Planos: Según estructura n Architecture map o Mapa de arquitectura
![Page 9: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/9.jpg)
+Planos: Según contenidos
n Blueprint o Diagrama o flujo de contenido
![Page 10: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/10.jpg)
+Planos: Según contenidos
n Blueprint o Diagrama o Flujo de contenido
![Page 11: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/11.jpg)
+ Maquetas
n Mockups
n Prototipo
n WireFrame
n Sketch
![Page 12: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/12.jpg)
+ Maquetas: según su nivel de detalle n Sketch: boceto, bosquejo.
![Page 13: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/13.jpg)
+ Maquetas: según su nivel de detalle n Prototipos de baja fidelidad
n http://pencil.evolus.vn
![Page 14: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/14.jpg)
+ Antes de los wireframes n Entrevistas con el cliente y el equipo de desarrollo para
definir los requisitos, los objetivos y el público
n Definición de la arquitectura de información o mapa web
n Verificar el contexto: problemas de usabilidad y accesibilidad, estadísticas de acceso, test con usuarios y retroalimentación de estos
n Bechamarking o estudio comparativo de la competencia
![Page 15: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/15.jpg)
+ Wireframe n Tienen más detalle que el sketch pero sin darle detalles
gráficos
![Page 16: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/16.jpg)
+Herramientas para wireframes y mockups
n Project pencil http://pencil.evolus.vn
n Powerpoint Storyboarding (Microsoft office+visual studio 2012)
n mockingbird https://gomockingbird.com/mockingbird/
n Mockflow http://www.mockflow.com/apps/
n Axure http://www.axure.com
n Junstinmind http://www.justinmind.com
n Framebox http://framebox.org/KSCS
n Balsamiq http://balsamiq.com/products/mockups/
n Ux Pin http://uxpin.com//
n Hotgloo http://www.hotgloo.com
n Documento de referencia http://issuu.com/yoeldatalocaldata/docs/art__culo1_2
![Page 17: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/17.jpg)
+ Herramientas ideales para.. n Propiciar la comunicación entre clientes y emprendedores
n Integrar a l os usuarios
n Generar recursos conceptuales a los desarrolladores previos
n Evaluar el sistema desde el primer momento
n Generar documentación de sistema como de las tareas a realizarse
![Page 18: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/18.jpg)
+ Según nivel de detalle n Story Board: secuecia de wireframes que muestran cómo se
realiza una tarea. También llamado Tumbnail Sketchs
![Page 19: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/19.jpg)
+ Historia de usuario n Es una representación de un requisisto de un sistema o
producto, escrita en lenguaje de negocio (bien sea el lenguaje del cliente/usuario) de manera de frase concisa, que exprese el deseo o las necesidades de un interesado.
Atributos deseables en una historia de usuario
![Page 20: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/20.jpg)
+ Modelo Invest de los story board n Independiente
n Negociable
n Valiosa
n Estimable
n Pequeña (small)
n Testeable
![Page 21: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/21.jpg)
+ Estructura de un historyboard
n Identificar la historia (de que tratata)
n Titulo de la historia
n Descripción de la historia… Mike cohn
n Yo quiero <meta/deseo/funcionalidad> para que <beneficio>
n Criterios de aceptación. Escenarios que especifican la forma en que el sistema debe responder a cada criterio… resultado esperado. Por cada escenario debería existir un prototipo de GUI
![Page 22: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/22.jpg)
+ Cómo se generan entonces las historias de usuario
Los emprendedores (incluyendo desarrolladores) deben reunirse con el cliente candidato. Se deben hacer preguntas orientadas más que a descubrir la lógica del negocio actual, a conocer la necesidades, aspectos inoperantes del mismo o situaciones sensibles a ser mejoradas.
![Page 23: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/23.jpg)
+ Ejemplo
![Page 24: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/24.jpg)
+ Ejemplo
![Page 25: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/25.jpg)
+ Ejemplo
![Page 26: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/26.jpg)
+ Ejemplo
![Page 27: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/27.jpg)
+ Producto mínimo viable n El producto mínimo viable, término que popularizó
Eric Ries, consiste en hacer un experimento para corroborar o descartar una hipótesis invirtiendo para ello los mínimos recursos (tiempo, dinero, esfuerzo) posibles
n La hipótesis suele referirse a la presunción de que el producto es viable, es decir, el mercado está dispuesto a usar nuestro producto y a pagar por él.
![Page 28: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/28.jpg)
+ Producto mínimo viable n El producto mínimo viable es una versión de un nuevo
producto que permite recoger la máxima cantidad de aprendizaje validado por los clientes con el menor esfuerzo.
n A pesar del nombre, no se trata de crear productos mínimos. No es construir algo rápido, de cualquier manera. Sólo vale si sirve para aprender sobre lo que necesita el usuario.
![Page 29: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/29.jpg)
+ Producto mínimo viable n Gestionar un producto mínimo viable requiere esfuerzo,
hablar con clientes u obtener métricas y analíticas.
n Hay quien define a un producto mínimo viable como lo mínimo por lo que estaría dispuesto a pagar un cliente.
![Page 30: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/30.jpg)
+ Producto mínimo viable n la estrategia del MVP no siempre es necesario colocar un producto
en el mercado;
n a veces es suficiente con poner una oferta en una landing page, comprar unos anuncios a través de Google para generar tráfico y ver las conversiones que se producen (clics, emails capturados, ventas, shares, etc.,) según sea el objetivo de su oferta.
![Page 31: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/31.jpg)
+ Producto mínimo viable Para corroborar o descartar esa hipótesis nos servimos de un
experimento:
n sacar una versión temprana del producto;
n hacer una pregunta directa a nuestros potenciales clientes sobre su interés en nuestro producto; de desarrollo);
![Page 32: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/32.jpg)
+ Producto mínimo viable n presentar un producto que todavía no existe (pero
haciendo ver que sí existe) para captar los datos y el feedback de potenciales clientes;
n una campaña con AdWords que dirija visitas a una landing page del producto (aún inexistente o en fase de desarrollo);
![Page 33: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/33.jpg)
+Prototipo de alta fidelidad
![Page 34: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/34.jpg)
+Prototipo de alta fidelidad
![Page 35: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/35.jpg)
+Lo que buscamos.
![Page 36: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/36.jpg)
+ Resumiendo.
![Page 37: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/37.jpg)
+Diseño adaptable
n Es una respuesta actual frente a las necesidades de los diferentes dispositivos
![Page 38: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/38.jpg)
+ Y el estándar? Actualmente existen propuestas, pero el estándar se definirá en el futuro
![Page 39: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/39.jpg)
+ Reutilizar soluciones Usar diseños de plantillas que ya resolvieron el problema
http://getbootstrap.com/2.3.2/#examples
![Page 40: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/40.jpg)
+ Según estructura http://www.layoutit.com/
http://jquerymobile.com/
![Page 41: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/41.jpg)
+ Responsive Web Design
http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/
http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
![Page 42: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/42.jpg)
+ Interfaz gráfica Redimensionamiento manual del browser Visualización previa en dispositivos Páginas simples http://bradfrostweb.com/demo/ish/ MEDIA QUERIES http://mediaqueri.es
![Page 43: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/43.jpg)
+ MEDIA QUERIES
n http://mediaqueri.es
![Page 44: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/44.jpg)
+Media Queries n Condiciones en cs:
@media screen and (max-widht:[ANCHO]px)
/*Usamos este ancho o menos de pantalla*/
@media screen and (min-widht:[ANCHO]px
/*Usamos este ancho o más de pantalla*/
}
@media screen and (min-widht:[ANCHO X]px and (max-width:[ANCHO Y]px)
{
/*Nuevas reglas con este ancho o más de pantalla*/
}
![Page 45: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/45.jpg)
+ Casos típicos
n Un dispositivo móvil normalmente se usa en vertical, y por lo general adopta una resolución de 320 px de ancho
n De manera horizontal este se adapta al tamaño real de la pantalla, pero suele ubicarse entres los 400 px y 600 px.
n Las tabletas la resolución depende del dispositivo como tal, pero en los modelos más vendido esta alrededor de 600 px a los 1024 px.
![Page 46: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/46.jpg)
+@media screen and { max-width:
800px} {
}
@media screen {max-width:600px} {
}
@media screen {max-width:960px} {
}
Casos típicos
![Page 47: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/47.jpg)
+ Trucos n Compatibilidad con IE
Agregar línea en la etiqueta <HEAD>
<!—[if It 9]><script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]-->
n No manejar atributo style=”” manejar todos los estilos desde css.
![Page 48: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/48.jpg)
+ Zoom <meta name=”viewport” content=”width=device-width, initial-
scale=1.0” />
<meta name=”viewport” content=”width=[pixeles del mínimo ancho para visualizar bien la web]” />
n El tamaño de los contenedores en porcentajes en vez de pixeles. Width=”50%” y no width=”500px”. Igual tratamiento para propiedades omo: margin, Font-size, padding.
![Page 49: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/49.jpg)
+ Insertar imágen Img {
Max-width:100%;
Height:auto;
}
max-width en contenedores
container{
width:800px;
max-width: 90%
}
![Page 50: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/50.jpg)
+ Recomendaciones n Buscar punto de inflección
n Usar referencia css para emplear propiedades y reglas estándart consultando compatibilidad multibrowser
n www.w3school.com
n https://developer.mozilla.org/en-US/
![Page 51: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/51.jpg)
+ Herramientas que ofrece @appsicesi
n Adobe fireworks cs6
n Adobe Extension manager cs 6
n Office 2011
n Android sdk mac os
n Microsoft Bizpark
n Eclipse sdk 3.7
n Hosting y dominio
n 20 equipos macbook
![Page 52: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/52.jpg)
+Tutoriales n con power point
http://javiersuarezruiz.wordpress.com/2012/10/01/vs-2012-storyboarding-creando-storyboards-con-powerpoint/
n Bajo ios
n http://www.migueldiazrubio.com/2012/01/03/desarrollo-ios-primeros-pasos-con-storyboard/
n Storyboard
n https://www.video2brain.com/mx/videos-31819.htm
![Page 53: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/53.jpg)
+ Consultar
n http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
n http://owltastic.com
n http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
n http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756
n http://thesiteslinger.com/blog/responsive-design-why-youre-doing-it-wrong/
n http://blog.ikhuerta.com/transforma-tu-web-en-responsive-design
![Page 54: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/54.jpg)
+Referencias
n http://www.mountaingoatsoftware.com/system/asset/file/259/User-Stories-Applied-Mike-Cohn.pdf
n http://www.mountaingoatsoftware.com/blog/advantages-of-the-as-a-user-i-want-user-story-template
n http://www.scrumalliance.org/community/articles/2010/april/new-to-user-stories
![Page 55: Del story board al MVP de alta fidelidad](https://reader033.fdocuments.net/reader033/viewer/2022042616/568bd95f1a28ab2034a6cbf3/html5/thumbnails/55.jpg)
+
Muchas gracias!