del story board al mvp de alta fidelidad
DESCRIPTION
Compendio de herramientas para construir wireframes y prototiposTRANSCRIPT
+
+
Del story board al MVP de alta fidelidad Andrés Cuéllar [email protected] [email protected] @nfcue
+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?
+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
+ 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
+ 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
+Planos: Según estructura
n Architecture map o Mapa de arquitectura
+ Planos: Según estructura n Architecture map o Mapa de arquitectura
+Planos: Según contenidos
n Blueprint o Diagrama o flujo de contenido
+Planos: Según contenidos
n Blueprint o Diagrama o Flujo de contenido
+ Maquetas
n Mockups
n Prototipo
n WireFrame
n Sketch
+ Maquetas: según su nivel de detalle n Sketch: boceto, bosquejo.
+ Maquetas: según su nivel de detalle n Prototipos de baja fidelidad
n http://pencil.evolus.vn
+ 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
+ Wireframe n Tienen más detalle que el sketch pero sin darle detalles
gráficos
+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
+ 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
+ Según nivel de detalle n Story Board: secuecia de wireframes que muestran cómo se
realiza una tarea. También llamado Tumbnail Sketchs
+ 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
+ Modelo Invest de los story board n Independiente
n Negociable
n Valiosa
n Estimable
n Pequeña (small)
n Testeable
+ 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
+ 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.
+ Ejemplo
+ Ejemplo
+ Ejemplo
+ Ejemplo
+ 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.
+ 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.
+ 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.
+ 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.
+ 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);
+ 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);
+Prototipo de alta fidelidad
+Prototipo de alta fidelidad
+Lo que buscamos.
+ Resumiendo.
+Diseño adaptable
n Es una respuesta actual frente a las necesidades de los diferentes dispositivos
+ Y el estándar? Actualmente existen propuestas, pero el estándar se definirá en el futuro
+ Reutilizar soluciones Usar diseños de plantillas que ya resolvieron el problema
http://getbootstrap.com/2.3.2/#examples
+ Según estructura http://www.layoutit.com/
http://jquerymobile.com/
+ 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/
+ 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
+ MEDIA QUERIES
n http://mediaqueri.es
+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*/
}
+ 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.
+@media screen and { max-width:
800px} {
}
@media screen {max-width:600px} {
}
@media screen {max-width:960px} {
}
Casos típicos
+ 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.
+ 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.
+ Insertar imágen Img {
Max-width:100%;
Height:auto;
}
max-width en contenedores
container{
width:800px;
max-width: 90%
}
+ 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/
+ 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
+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
+ 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
+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
+
Muchas gracias!