+

+

Del story board al MVP de alta fidelidad Andrés Cuéllar afcuellar@icesi.edu.co andres.cuellar@gmail.com @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!