Page 1

+


+

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 ¿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, 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-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!

Del story board al MVP de alta fidelidad  

Compendio de herramientas para construir wireframes y prototipos

Read more
Read more
Similar to
Popular now
Just for you