+
+
Del story board al MVP de alta fidelidad Andrés Cuéllar @nfcue
+
Preguntas del cliente al emprendedor ¿Realmente entiendes lo que quiero alcanzar/realizar? ¿Si uso tu producto alcanzaré los resultados que busco?
¿Si tu producto falla, ¿Estarás conmigo apoyándome?
+
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 n PAY: pago
clientes
de búsqueda
para obtener datos de prospectos de
+ Landing Page y redes sociales Usar esta página para conseguir clientes, capturar sus datos y realizar métricas n Permanencia n Número
de registro
n Cantidad n Relación n Validar
en la página
visitantes
registros/visitas
hipótesis
+
Planos: Según estructura n
Architecture map o Mapa de arquitectura
+ Planos: Según estructura n
Architecture map o Mapa de arquitectura
+ n
Planos: Según contenidos Blueprint o Diagrama o flujo de contenido
+ n
Planos: Según contenidos 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, estadisticas 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
+ 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 n
Planteamiento del problema
El cliente ha solicitado la posibilidad de buscar proveedores de cuidado de salud por especialidad proveedor dentro de un sitio de selección doctor.
n
Requisitos Muestra Declaración:
La pantalla de búsqueda de proveedor debe ofrecer la posibilidad de buscar proveedores por especialidad profesional.
+ Ejemplo n
Caso de uso 1.
El cliente selecciona el proveedor de búsquedas. El sistema obtiene una lista predefinida de especialidades proveedor y rellena la lista especialidad. El sistema muestra el mecanismo de búsqueda de proveedores.
n
Alt 1: Si no hay coincidencias, el sistema muestra un mensaje que indica que no se encontraron coincidencias. Fin caso de uso.
El cliente selecciona una especialidad profesional e inicia la búsqueda. El sistema obtiene una lista de proveedores que coinciden con la búsqueda de especialidad profesional. [Alt 1] El sistema muestra una lista de proveedores que coinciden con la búsqueda. [Alt 2] n
Fin caso de uso
n
Alt 2: Si hay más partidos que el usuario puede ver, el sistema proporcionará la capacidad de mostrar varias páginas.
+ Ejemplo Criterio de aceptación:
n
El mecanismo de búsqueda de proveedores tiene la capacidad de entrar en una especialidad.
Busque proveedores por especialidad profesional.
n
Descripción:
n
La búsqueda de especialidad tendrá una lista de especialidades de proveedores entre los que elegir.
n
Busca a través de la especialidad proveedor devolverá una lista de especialistas coincidentes o un mensaje que indica que no hay coincidencias.
Como usuario de búsqueda de proveedores, necesito la capacidad de buscar proveedores por especialidad para que pueda referirse de manera más eficiente a los pacientes a especialistas.
n
Si hay más resultados que los que caben en una página, el sistema le proporciona la capacidad de ver la lista de páginas o secciones
n
+ 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-ofusing-media-queries-for-responsive-web-design/ http://www.splashnology.com/article/70-examples-ofmodern-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.
+ Casos tĂpicos @media screen and { max-width: 800px} { } @media screen {max-width: 600px} { } @media screen {max-width: 960px} { }
+ 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, initialscale=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-2012storyboarding-creando-storyboards-con-powerpoint/
n
Bajo ios
n
http://www.migueldiazrubio.com/2012/01/03/desarrolloios-primeros-pasos-con-storyboard/
n
Storyboard
n
https://www.video2brain.com/mx/videos-31819.htm
+ Consultar n
http://www.splashnology.com/article/70-examples-ofmodern-responsive-web-design/2537/
n
http://owltastic.com
n
http://webdesignerwall.com/tutorials/5-useful-css-tricksfor-responsive-design
n
http://www.creativebloq.com/responsive-web-design/buildbasic-responsive-site-css-1132756
n
http://thesiteslinger.com/blog/responsive-design-whyyoure-doing-it-wrong/
n
http://blog.ikhuerta.com/transforma-tu-web-en-responsivedesign
+
Referencias n
http://www.mountaingoatsoftware.com/system/asset/file/ 259/User-Stories-Applied-Mike-Cohn.pdf
n
http://www.mountaingoatsoftware.com/blog/advantages-ofthe-as-a-user-i-want-user-story-template
n
http://www.scrumalliance.org/community/articles/2010/ april/new-to-user-stories
+
Muchas gracias!