Toma el diseño de los mejores, pero prueba

 

Si estás diseñando una característica común siempre es una buena idea tomar la solución de Google como punto de partida. Pero todavía deberias probarlo! Incluso Google puede hacer las cosas mal. Aquí está un ejemplo de cómo.

Estuvimos trabajando para una empresa de juegos de deportes electronicos. Uno de sus servicios es un software que permite a los propietarios de servidores de juegos individuales mostrar anuncios a sus jugadores y obtener dinero por cada impresión.

Clic en la imagen para ver en grande

 

Una característica importante era mostrar algunos datos dependientes del tiempo (número de impresiones) y que los usuarios puedan comprobar los datos en distintos periodos de tiempo.

Investigaciones de Experiencia de Usuario y rediseño

Luego el usuario probo los diseños. Por que no lo intentas? Aqui te dejo una prueba:

Como podrias revisar el trafico durante el mes? Donde harias clic?

Bueno, probablemente fallaste, al igual que todos los usuarios en las pruebas de usuario fallaron. Todos pensaban que los botones "Día | semana | Mes" les llevaria al resultado deseado. Pero de hecho, estos botones están diseñados para ajustar la frecuencia de muestras en el gráfico:

Los usuarios no entienden estos botones en Google Analytics al igual como en nuestro diseño. Después de este hallazgo de la investigación decidimos añadir un poco de retoque que pudiese ayudar: un texto aclaratorio. ... Las pruebas de usuario revelaron bastante rápido que esto no ha solucionado el problema. ¿Por qué? Porque la gente no va a leer el texto aclaratorio si piensan que entendieron los botones correctamente. No tienen ninguna razón para leer.

Clic en la imagen para ver en grande

En este punto es importante señalar que estos botones implementan una función secundaria para nuestros usuarios. Este hecho, junto con la primera prueba donde los usuarios fueron engañarnos nos llevaron a la decisión de descartar esta función por completo, para una experiencia de usuario más ligera y más simple.

Aquí está el diseño final sin los botones engañosos.

Clic en la imagen para ver en grande

Que necesitas para hacer decisiones mas rápidas sobre un producto

Un producto popular y rentable no es más que una serie de decisiones de producto hechas de una manera correcta. Los gerentes de producto saben que al final del día los roadmaps, los backlogs y las estimaciones no cuentan en absoluto. Tenemos que construir algo que le encante a la gente y estén dispuestas a pagar. Y tenemos que llegar ahí, de lo contrario alguien más lo hará. Por lo que la parte más importante es hacer algunas decisiones críticas rápidas del productos. Si puedes hacerlo estarás dando un nuevo impulso a tu producto no tan brillante, obtener mejores números, y convertirte en un héroe en tu equipo. ¿Qué se necesita para tomar esas decisiones?.

Opciones, pero no las "primeras ideas"

No puedes tomar una decisión si no sabes cuáles son tus opciones. Eso es obvio. Pero la mayoría de las personas no toman el intercambio de ideas muy en serio. Y muchas personas piensan en sí mismos como una especie de extraña Steve Jobs, que puede descubrir las mejores soluciones solo. Además es un hecho que actuando de esta manera arruinas la moral moral del equipo, la triste verdad es que en la mayoría de los casos tus primeras ideas no son las mejores soluciones posibles. Por lo que un gerente de producto sabe dar espacio al equipo para idear. A veces incluso hay que empujarlos un poco para hacerlo. Los diseñadores son por lo general los tipos creativos. Es su profesión idear, para saber cómo hacerlo bien, y cómo involucrar a otras personas también. Un buen equipo de diseño puede ayudar mucho en la búsqueda de posibles soluciones a los problemas. Es muy fácil cuando alguien mapea el espacio de soluciones por ti y sólo tener que elegir la mejor dirección.

Percepciones de clientes frescos en lugar de opiniones

Muchos "líderes" seguros de sí mismos en la misma habitación, luchando sin fin sobre un tema. Te suena una situación familiar? Sorprendentemente, preguntar a la gente más inteligentes no siempre ayuda a tomar las mejores decisiones. Lo que ayuda es más y mejores percepciones de los clientes. Tienes que ser el que mejor conoce a los clientes. Tienes que saber sus dolores, luchas y éxitos. Sus problemas y objetivos. Incluso tienes que conocerlos mejor que ellos mismos. Al menos de acuerdo a tu dominio. Para lograr esto necesitas obtener ideas frescas de clientes con frecuencia. Por supuesto, puedes decir que esto consume mucho de tu tiempo, y es verdad. Tienes que hacer entrevistas, pruebas de usuario, investigaciones de campo, etc. en nuestra empresa, cuando trabajamos juntos con los equipos de productos no nos limitamos a delegar diseñadores, sino tambien a un investigador para experiencia de usuario (UX). Imagínese tener a alguien en su equipo, que aporta información fresca sobre el cliente todas las semanas. Sí, es tan liberador como suena. Estas ideas pueden ayudar a cortar el debate corto, y tomar mejores decisiones en un plazo breve.

Números, pero de mas importancia, mejores preguntas

Impulsado por los datos de la empresa, ¿cierto? En nuestro mundo digital tenemos el lujo de tomar decisiones basadas en hechos concretos. ¿O no es asi?. La mayoría de la gente subestima el esfuerzo necesario para obtener datos útiles. Las mejores empresas han dedicado equipos de datos. Si no tienes uno todavía puedes nombrar a alguien de tus desarrolladores para ayudarle a responder a las preguntas basadas en datos reales. También necesitarás a alguien que puede hacer las preguntas correctas. Cuando diseñamos aplicaciones que require hacer un montón de preguntas como por ejemplo: "¿cuantos usuarios han probado esta caracteristica dentro de la primera semana?" Muchas veces no podemos obtener respuestas de la parte tecnológica. En pocas palabras: tener a alguien que puede hacer las preguntas correctas y alguien que pueda extraer los datos y llegar a una respuesta.

Participación: el factor más importante de la velocidad

Las cosas pueden ser muy lentas cuando alguien que tiene que estar disponible no esta allí. Lo mejor es cuando todo el mundo está en la oficina cuando se trata de tomar decisiones. Trabajamos largas semanas de metas para diseñar y aprendimos que necesitamos estar todos en las reuniones semanales de diseño. Así que invitamos a un líder de negocios (probablemente podrias ser tu?) Y alguno de los desarrolladores a asistir. Nuestro diseñador puede presentar las ideas que se le ocurrieron, nuestro investigador puede presentar los puntos de vista de los usuarios y por el lado del negocio y el desarrollo juntos podemos tomar decisiones.

 ¿Qué pasa si algunos altos directivos tienen que estar involucrados también en una gran organización? Mi mejor consejo es identificar los puntos de decisión más importantes, y empezar a organizar una reunión de 2-3 semanas antes. Es necesario un poco de experiencia para saber cuándo esos puntos vendrán, pero no es imposible. Por lo general tenemos un plan corto semana a semana durante los próximos 1o 2 meses, por lo que sabemos cuando vamos a necesitar que los otros participen.

Terreno común, ayudar a otros a decidir sin ti

A veces ni siquiera tienes que estar involucrado en la toma de decisiones. Si todo el mundo está en la misma sintonia, tus compañeros de equipo pueden tomar decisiones sin ti. ¿Cómo se puede confiar en sus promotores y otras personas para saber todo sobre el negocio y tomar las decisiones correctas todo el tiempo?. Si a veces toman parte en las sesiones de reflexión y talleres van a saber las cosas básicas y no vendrán a ti todo el tiempo. Por ejemplo, cuando comenzamos a trabajar con un nuevo equipo que usualmente hacemos un taller de personalidad en conjunto para aclarar que estamos construyendo para la aplicación y cuáles son sus objetivos, problemas y motivaciones.

Necesita estas 5 puntos para tomar mejores decisiones de un producto más rápido. Tener a alguien para encontrar posibles soluciones, escuchar información sobre el cliente cuando se elige a partir de ellos, sumergirse en los números cuando es necesario, invitar a todos a construir una base común y estar ahí en los momentos importantes.

UX: Diseño de radio botones (radio buttons)

Los radio botones son elementos esenciales en un formulario.  Se utilizan cuando hay una lista de dos o más opciones que se excluyen mutuamente, y el usuario debe seleccionar exactamente una opción. En otras palabras, al hacer clic en un botón de radio no seleccionada se anulará cualquier otro botón que fue seleccionado previamente en la lista.

Los radio botones son geniales cuando se usan correctamente - impide que los usuarios introduzcan datos erróneos, ya que sólo se muestran las opciones legales y cuentan con una gran cantidad de características interesantes, tales como la navegación por teclado y la representación fiable en todas las plataformas. En este artículo de hoy, vamos a la vista general de directrices prácticas para los radio botones (radio buttons) que se han elaborado a partir de las pruebas de usabilidad.

De donde surgió el nombre de radio botones?

Los radio botones fueron nombrados después de los botones físicos utilizados en las radios de coches viejos para cambiar las estaciones - cuando uno de los botones se ha pulsado, otros botones se soltarían, dejando un único botón en estado"empujado". El radio boton orientado al software fue modelado después de estos botones de radio físicos.

Utiliza radio botones solamente para configuraciones

Utiliza los radio botones para cambiar una configuración, no como botones de acción para ejecutar comandos. Además, los ajustes modificados no deben entrar en vigor hasta que el usuario hace clic en el botón de acción (etiquetado como "Continuar" o "Guardar", por ejemplo). Si el usuario hace clic en el botón Atrás o Cancelar, los cambios realizados en los radio botones en la página deben ser descartados y los ajustes originales restaurados.

Si se utilizan los botones de radio sólo para afectar la manera en que se realiza una acción , a menudo es mejor presentar variaciones de acciones en su lugar. Si lo haces, permites a los usuarios elegir la acción adecuada con una sola interacción.

Orden lógico para opciones

Se deben colocar las opciones en un orden lógico, de la mayor probabilidad de ser seleccionada para menos, de la operación más simple a la más compleja, o de menor a mayor riesgo. el orden alfabético no es recomendable, ya que depende del idioma y por lo tanto no es localizable.

Las opciones debe ser comprensivas y claramente distintivas

Los mayores problemas de usabilidad para los radio botones provienen de etiquetas que son vagas, engañosas, o describen opciones que son imposibles para los usuarios promedio de entender. La ayuda contextual puede aliviar este último problema, pero es mejor que el usuario pruebe cualquier conjunto importante de los controles para interacción.

Siempre ofrecen una selección por defecto

Uno de las 10 heurística de diseño de IU dice que los usuarios deben ser capaces de deshacer (y rehacer) sus acciones. Esto significa que las personas puedan establecer un control de interfaz de usuario de nuevo a su estado original. En el caso de los radio botones esto significa que los radio botones siempre deben tener exactamente una opción pre-seleccionada. Selecciona la manera más segura (para evitar la pérdida de datos o el acceso al sistema) y la opción más segura y privada. Si la la seguridad no es un factor, selecciona la opción más probable o conveniente.

Si los usuarios podrían tener que abstenerse de hacer una selección, debes proporcionar un radio botón para esta opción, tal como una etiqueta "Ninguna." Ofreciendo a los usuarios una opción explícita, neutral para hacer clic es mucho mejor que la que requiere el acto implícito de no seleccionar a partir una lista.

Prueba diseñar tus listas verticalmente

Los radio botones horizontales son a veces difíciles de escanear y localizar. La disposición horizontal de los botones de radio también puede hacer que sea difícil de saber con qué label del botón de opción corresponde: ya sea la que esta antes o después del radio botón. El posicionamiento vertical de los radio botones es más seguro.

Trata de diseñar tus listas verticalmente, con una opción por línea. Si aún necesita una disposición horizontal con múltiples opciones por línea, asegúrate de que el espacio de los radio botones y labels sea absolutamente claro que la opción va con cada label. Por ejemplo, se debe evitar una situación como ésta, en que es muy difícil ver el botón de opción correcta para hacer clic para la opción cuatro.

Utiliza labels tags como areas clickables

Los radio botones son muy pequeñas de naturaleza, y, por lo tanto, de acuerdo con la ley de Fitts,  puede ser difícil de hacer clic o tap. Para ampliar el área de destino, permite a tus usuarios seleccionar una opción pulsando o tocando no sólo ese radio botón, sino también el label o palabras asociadas. Permite a tus usuarios seleccionar una opción, es decir que haga clic en el propio radio botón de sí o en su label correspondiente.

Los buenos radio botones horizontales se pueden encontrar en la aplicación de Duolingo: que han utilizado un clásico de los radio botones horizontales, pero hicieron los objetivos visualmente distinguibles y lo suficientemente grande para dispositivos táctiles.

Utiliza radio botones en lugar de dropdown

Si es posible, utiliza los radio botones en lugar de los dropdown. Los botones de radio tienen una menor carga cognitiva porque hacen visibles todas las opciones para que los usuarios puedan comparar fácilmente.

En caso de que tenga menos de 7 opciones que usted debe considerar el uso de radio botones. Tus usuarios podrán escanear inmediatamente la cantidad de opciones que tienen y lo que cada una de esas opciones son, sin hacer clic (o escribiendo) nada para revelar esta información.

Evita controles anidados

Evita los radio botones anidados con otros radio botones o casillas de verificación. Siempre debes mantener todas las opciones en el mismo nivel para evitar confusiones.

Utiliza animación y retroalimentacion visual

Las animaciones bien diseñadas hacen que la experiencia se sienta manipulado. Elementos de la interfaz de usuario como radio botones deben aparecer tangible, a pesar de que están detrás de una capa de vidrio. Las indicaciones visuales y de movimiento de entrada se reconocen inmediatamente y añaden claridad a través de reacciones visuales a la entrada del usuario.

Una casilla de verificación seria una mejor opción?

Si sólo hay dos opciones, se puede utilizar una sola casilla en su lugar. Sin embargo, las casillas de verificación son adecuados sólo para convertir una sola opción de encendido o apagado, mientras que los botones de radio se pueden utilizar completamente para diferentes alternativas.

Debes recordar siguientes momentos si ambas soluciones son posibles:

Alternativas. Utilice los radio botones si el significado de la casilla de verificación no está aclarado o no es completamente obvio. En el siguiente ejemplo, las opciones son tan opuestas que los radio botones son la mejor opción.

Asistentes

Debe utilizar los radio botones en las páginas del asistente para realizar las alternativas claras, incluso si una casilla de verificación sea aceptable. Diseños con un radio botón seleccionado por defecto hacen una fuerte sugerencia para el usuario. La opción por defecto puede llevar a los usuarios a tomar la mejor decisión, y puede aumentar su confianza a medida que avanzan.

Sí o No es respuesta sencilla. El uso de una casilla de verificación es correcta cuando se tiene una sola pregunta sencilla y el usuario va a responder "sí" o "no".

Conclusión

En el diseño de los radio botones lo más importante a seguir son las normas de diseño, ya que esto aumenta la capacidad de los usuarios para predecir lo que un control va a hacer y cómo se va a operar. Por el contrario, en violación de las normas hace que la interfaz de usuario se sientan frágiles - como si cualquier cosa puede ocurrir sin previo aviso.

Diseña con cuidado. Los radio botones son fáciles de probar usando prototipos en papel, por lo que no es necesario poner en práctica cualquier cosa para ver si los usuarios entienden el control y pueden usarlo correctamente.

Encuentra fuentes gratis en el nuevo sitio de Google

 Clic en la imagen para ver en grande

Google ahora dispone de 800 fuentes con licencia gratuita y un nuevo sitio asombrosamente funcional para encontrarlas.

Gracias a las plataformas de suscripcion como TypeKit la licencia para fuentes web no es tan caro o dificiles de encontrar nunca mas. Sin embargo, hay muchas opciones de fuentes libres como las fuentes de Googl, una coleccion de mas de 800 familias de fuentes de codigo abierto sin costo alguno para su uso en linea.

 Clic en la imagen para ver en grande

Ahora utilizando fuentes de Google. Una nueva pagina de inicio ahora te permite buscar estilos de fuente de acuerdo al grosor y la inclinacion, al mismo tiempo que la vista previa de las opciones en una cuadricula de campos de texto que en realidad se puede escribir en el interior para probar las fuentes al instante.

Ahora adelante, ve y prueba la fuente Roboto de Google y muestrasela a tus clientes para que se sorprendan!.

UX: 10 verdades duras acerca de los usuarios

Puede ser dificil para los diseñadores dar un paso atras y ver una aplicacion o un sitio web con los ojos de un usuario. Aqui te damos una guia para que puedas empezar.

Luego de cierta cantidad de tiempo en la industria del diseño probablemente has escuchado referirse a los usuarios como "tontos". La gente habla de tener interfaces "tontas", diseñar para "el mas bajo comun denominador" e intentar hacer las aplicaciones "a prueba de idiotas".

Los diseñadores se lo repiten a si mismos de vez en cuando. Los diseñadores realmente terribles lo expresan repetidas veces.

"Bueno, simplemente no podes atarlos de manos por mucho."

Este tipo de pensamiento descuenta un componente clave de un buen diseño: la psicología humana. Entender algunos conceptos básicos del comportamiento de los usuarios, a continuación y luego aplicarlos al diseño, es una de las cosas más importantes que una empresa puede hacer. Aquí hay 14 cosas que debe saber acerca de las personas que utilizan tus sitios web y aplicaciones.

1. Son más inteligentes de lo que piensas

Ellos simplemente no se preocupan por el aprendizaje de tu sistema. A ellos no les importa. Puede ser tan fácil olvidar lo poco que depende el mundo fuera de la industria de la tecnología de lo que depende de la tecnología personal en la forma en que hacemos. A menos que la tecnología se haga necesaria en la vida de las personas, pueden llegar a funcionar bastante bien sin ella. Aun cuando la tecnología es vital para su trabajo, a menudo pueden obtener mediante el aprendizaje solamente las partes que necesitan.

2. Tienen otras cosas que hacer

El objetivo de la mayoría de los usuarios no es gastar todo su tiempo en un sitio web. Es salir del sitio web. Los buenos diseñadores lo saben y se cuecen en sus productos.

Si Google se hubiese diseñado para mantener a los usuarios en su sitio de búsqueda, no lo usarían. Otros motores de búsqueda serían más rápidos y menos intrusivos. En la mayoría de los casos, debes centrarte en cómo hacer que tu sitio o aplicación que consuma lo más mínimo que se requiere de tiempo. Lo mas conveniente. Lo mas valioso de usar, ya que ayudara a los usuarios a seguir adelante con sus vidas en lugar de tratar de enredarselas.

3. Tienen un "modo de hacer"

Tu sabes esa cosa que cada uno cree acerca de que los usuarios no estan dispuestos a leer durante el uso de una aplicación? Hay una razón para ello. 
No están en modo de lectura. Están en el modo de "hacer". Todos lo tenemos. Obtenemos en una misión para completar una tarea, y vamos ciegos a lo que no nos podría ayudar a completarlo.El "Modo de hacer" tiene una enorme ventaja. Ayuda a los usuarios ignoran las distracciones y obstáculos que les impiden llegar a donde quieren ir. Imagínese lo que sería conducir si no se pudiesen ignorar las distracciones. En constante exploración de vallas publicitarias, la lectura de las ventanas de mostradores en tiendas, echando un vistazo a las pequeñas señales con púas en el suelo en las intersecciones. No es un defecto el que la gente lea menos, mientras este en el modo de hacer. Es una habilidad de supervivencia.

4. Se "satisfacen"

La mayoría de las veces, la gente necesita solamente lo suficiente para sobrevivir. Por lo que sólo aprenden eso que consideran mucho. Puede ser que incluso aprendan a hacer algo por la via equivocada. No importa el tiempo que tome, todavía pueden conseguir lo que necesitan.

Esto se llama satisficing. Es un término promovido por Steve Krug en su libro seminal sobre la utilidad de la web "No me hagas pensar" (Don't make me think).

Satisficing es sólo lo que suena (un acrónimo de las palabras "satisfacer" y "sacrificio"). Y esto, también, es una habilidad de supervivencia. No hay suficientes horas en el día, o en la vida, para convertirse en maestros de todo lo que tocamos.

La mayoría de las cosas, sólo aprendemos lo suficiente para sobrevivir.

5. Ellos no usan el software de la manera que tu quieres

 No importa la cantidad de trabajo que has puesto en él, lo primero que la gente hace cuando se pone frente a una aplicación con cualquier cantidad razonable de complejidad es que empiecen a usarlo de una manera que no habias anticipado.

A veces es un arrastre grande. Pero a veces esto conduce a una oportunidad.

Cuando los primeros usuarios de Twitter querían hacer referencia hacia otra persona, que precedian el nombre de usuario de la otra persona con el símbolo @. Cuando querían hacer referencia a un tema en particular que alcanza más allá de sus líneas de tiempo personales, utilizaban hashtags. Twitter no tenia un diseño para cualquiera de estas situaciones. Los usuarios sólo comenzaron a hacer lo que querían. Twitter continuo con el desarrollo para el soporte de estas dos funciones. Lo siguiente es, todo el mundo está hablandose el uno al otro y descubriendo todo tipo de temas que posiblemente ellos no pudieron haber contemplado previamente.

Tomalo para lo que es: una oportunidad de ver un diseño a través de los ojos de otra persona. Para aprender cómo otras personas interpretan los elementos de diseño cuando no saben lo que tu sabes acerca de diseño web.

6. Se basan en patrones 

Los patrones ayudan a la gente a aprender a trabajar con una nueva aplicación o sitio,como se podria configurar y cuánto tiempo podría tomar.

Compras un producto en un sitio web de tiendas, y sabes cómo trabaja la mayoría de los otros sitios. Las experiencias son similares, por no decir casi idénticos, en la mayoría de los sitios de comercio electrónico ya que el patrón funciona bien para el caso de uso y porque ayuda a las expectativas de la gente.

La capacidad para detectar patrones de uso también sienta las bases para los elementos en un diseño que se destacan. Los elementos importantes, como los botones que indican cómo suscribirse, o enviar o guardar o publicar. En un enorme número de casos, los botones que desencadenan estas acciones se muestran en un color o la forma (o ambos) diferente en comparación con los demás.

Cuando podemos ver patrones, vemos lo que rompe los patrones.

7. Un millon de cosas compiten por llamar su atencion

Ahora mismo, mientras lees este artículo, es probable que tengas un montón de otras cosas que compiten por tu atención. Razón de más para que en un diseño se deba tener un sentido impecable de lo que el usuario quiere lograr.

Una deliberado y claro proceso de un solo paso a la vez en un flujo de trabajo es vital. Obligando a la gente a serializar (en lugar de ser multitarea) puede ayudarlos a ser más productivos en tu aplicación. Cuanto el usuario sea capaz de continuar hacia adelante, mejor. Aumenta las probabilidades que él o ella sea capaz de terminar una tarea sin irse fuera a hacer otra cosa. 

8. Ellos ven lo que hay

 
Hay una gran diferencia entre lo que piensas que has puesto en una pantalla y lo que el usuario piensa que has puesto en una pantalla. Y entre usted y el usuario, sólo una de las dos percepciones importa.

El efecto es una falta de comunicación. Que quería decir esto. El usuario pensó que tu querías -- la mayoria es porque eso es lo que realmente pusiste en la pantalla. 

Es un problema clásico. Cuando se sabe mucho acerca de la web y se está diseñando para ello, llevas una tonelada de información relacionada contigo en el proyecto. Sólo el usuario no tiene idea del por qué existe este elemento o por que hace lo que hace. Y el usuario no tiene el beneficio de tenerte para que se lo expliques.

Los usuarios ven lo que está realmente allí. No es lo que tu piensas que está allí.

9. Mienten

La gente parece conocerse bastante bien a sí mismos cuando se les hacen preguntas hipotéticas. Y sin embargo, cuando en realidad están en una situación, que van a hacer algo completamente diferente.
No es porque quieren mentir. Ellos simplemente no pueden ayudarse a sí mismos. Se necesita una gran cantidad de auto-conocimiento para saber cómo le gustaría realmente actuar en una situación dada, y pocas personas tienen eso.
Esta es sólo una de las formas en que mienten. Aquí están algunas otras:

• Durante una prueba de usabilidad, los testeadores califican una tarea como si hubiera sido muy fácil después de pasar cinco minutos para poder comprender lo que tenian que hacer.
• En un estudio, dirian que tendría que utilizar algo cuando no lo harían. (Ellos simplemente no lo sabrán hasta que tengan en sus manos una nueva función).
• En persona, te dirán que son "conocedores de la web", y luego se quedan perdidos alrededor de la pantalla del ordenador durante varios minutos tratando de hacer las cosas que tu y yo estamos acostumbrados a hacer todos los días.

La lista continua. Estos son sólo algunos que pueden ser relevantes para tu trabajo como diseñador.

10. No saben lo que es posible

 
Muy pocos usuarios de tecnología son también diseñadores. Cuando te dicen que la forma en que les gustaría algo para trabajar, por lo general es de acuerdo a su visión global - una solución que haría que su problema sea un poco menos molesto, pero no una que borra fundamentalmente las causas del problema.

Cuando los usuarios buscan en una aplicación, están haciendolo con la perspectiva que ellos consideran apropiado de cómo la utilizan. Así que tienen dificultades para articular lo que realmente necesitan o desean de una aplicación que pueda resolverles un problema. Ellos no saben cómo solucionar el problema, sólo saben que quieren lo arreglar. Por lo que hacen sugerencias.

Tu trabajo es tomarlos con un grano de sal. Leer entre lineas. Ver lo que realmente está causando su problema.

Notificaciones push nativas con Angular 2

Las notificaciones push pueden ser de utilidad si estas desarrollando una aplicacion en la que necesitas mantener la usuario informado de eventos. En este articulo voy a mostrarte como desarrollar una pequena aplicacion en Angular 2 que mostrara una notificacion push.

La API de Notificaciones permite a las páginas web controlar la visualización de las notificaciones para el usuario final - las cuales exceden el nivel superior en el contexto de navegación, por tanto, puede aparecer incluso el usuario ha cambiado pestañas o se mueve a una aplicación diferente. La API está diseñada para ser compatible con los sistemas de notificación existentes en diferentes plataformas.                                                                                            - Mozilla

El API de notificaciones ha estado disponible desde hace algunos navegadores desde hace un tiempo, y con la reciente promoción de Angular 2 a Release Candidate (yay!), pensé traer este potente API para el mundo angular a manera de una biblioteca, haría más accesible y reutilizable este API para los desarrolladores. Puede ver ng2-notifications aqui

Demo

En el siguiente demo las notificaciones pueden ser personalizadas y mostradas utilizando ng2-notifications. Te invito a que lo intentes personalmente:

Empecemos

npm install ng2-notifications --save

La sentencia "import" puede ser incluida en cualquier componente de Angular 2

import { PushNotificationComponent } from 'ng2-notifications';

@Component({
 ...
 directives: [PushNotificationComponent]
})

Ahora la directiva de notificacion puede ser utilizada dentro del template del componente de esta forma:

<push-notification 
  title="Getting Started"
  body="A simple npm install can get you there"
  icon="https://goo.gl/3eqeiE">
</push-notification>

La sintaxis

Una de las caracteristicas mas poderosas de Angular 2 es su marcado declarativo. Con ng2-notifications una notificacion push puede ser escrita en Angular 2 con el uso de literals o mis favoritas data bindings.

<push-notification 
  title="notification.title"
  body="notification.body"
  icon="notification.icon">
</push-notification>

Donde en el componente de clase una propiedad de notificacion podria verse de esta manera:

export class AppComponent {
  public notification: any = {
    title: 'New Angular 2 Library!',
    body: 'ng2-notifications',
    icon: 'https://goo.gl/3eqeiE'
  };
}

No se ve tan mal, cierto? Otras propiedades incluyen las siguientes:

{
  tag: string, // optional, no default value
  dir: string, // defaults to 'auto', options: ['ltr','rtl']
  data: any,   // optional, no default value
  lang: string // defaults to browser's language, ['en-US', ...]
}

Construyendo la libreria

La libreria ng2-notifications es solamente un wrapper para el API de Notificaciones Web, es abstracto y simplifica el proceso de solicitar al usuario permiso para las notificaciones y expone una facil y predecible API en forma de un componente de Angular 2.

@Directive({
  selector: 'push-notification'
})

Puedes preguntarte, por que no utilizar en su lugar un componente?, bueno, un componente es solo una directiva mas una vista, en este caso una vista no es requerida desde que la interfaz de usuario, es por eso que se vera diferente en cada navegador.

Ademas, el library agrega dos propiedades utiles: [closeDelay] y [when]. El close delay hace exactamente lo que estas pensando, cierra la notificacion despues de "n" milisegundos. La propiedad when es utilizada para activar la notificacion dada una expresion booleana. Es como un "ng-show".

Entender el ciclo de vida de una directiva en Angular 2 es crucial para mostrar y ocultar notificaciones al momento adecuado: cuando la directiva compila, cuando las propiedades de los datos cambia y cuando la directiva es eliminada del componente padre.

import {
  Directive,
  EventEmitter,
  OnInit,
  OnChanges,
  OnDestroy,
  Input,
  Output
} from ‘@angular/core’;

 A partir de la declaracion de importacion anterior podemos ver tres importantes API de Angular que nos pueden ayudar a enlazar determinados estados de directivas implementando estas en nuestra declaracion de directivas en la clase.

export class PushNotificationComponent implements 
  OnInit, OnChanges, OnDestroy {
    ...
}

Al observar el nuevo API de directivas en Angular 2 era obvio que el API @input y @output podrian haber sido aprovechados para comunicacion bidireccional. Algunas de las entradas y salida se pueden definir de la siguiente manera:

@Input() public title: string;
@Input() public body: string;
@Input() public icon: string;

@Output() public onClick: EventEmitter<any> = new EventEmitter();
@Output() public onClose: EventEmitter<any> = new EventEmitter();

Estas entradas y salidas son las que nos permiten leer los datos de las propiedades y que ejecutan callbacks luego que los eventos son disparados. Este ultimo se puede expresar asi en el marcado:

<push-notification 
  ...
  (action)="notification.action($event)">
</push-notification>

Estas son solo algunas de las partes cruciales para construir directivas en Angular 2. Para ver el codigo completo, visita el proyecto en GitHub: https://github.com/alexcastillo/ng2-notifications

¿Cómo encontrar audiencia de mercado haciendo entrevistas en un mes?

¿Alguna vez has intentado construir un producto? o has enfrentado un problema cuando no sabias como dar forma a tu idea? Este es un caso de estudio de como hemos encontrado respuestas para estas preguntas y como hemos encontrado audiencia en un mercado repleto de competencia con solo hablar a las personas.

La idea

Necesitabamos construir un producto unico para los comerciantes para el mercado de valores. Alguna vez has escuchado mencionar de este sector de mercado? Pues, son personas que ven docenas de pantallas frente a ellos y en donde se muestra el aumento del precio de petroleo.

Asi que la pregunta que nos planteabamos era: cual podria ser un buen producto para ellos?, que pagarian por ello? Para responder a estas dos preguntas necesitamos saber cuales son sus preocupaciones principales. Cuales son los puntos mas criticos que podemos resolver exitosamente para que esten contentos?

Nos sentamos sobre la mesa y nos pusimos a pensar acerca de estas interrogantes. Imagino que alguno de ustedes haria lo mismo, pero nos dimos cuenta que las respuestas eran demasiado obvias, no solo para nosotros.

El proceso

En lugar de pensar en sus desafios por horas, ingrese a mi Facebook e hice una busqueda de grupos como "comerciantes del mercado de valores" y empece a publicar anuncios en estos grupos.

Hey, estamos empezando el desarrollo de un nuevo producto para comerciantes, pero no sabemos si estamos locos. Tengo mucha curiosidad de conocer tu opinion, puedo contactarte?

Tambien hice un anuncio publicitario de con imagenes llamativas que lo hacen marcar la diferencia.

En los siguientes dias nos llegaron muchos mensajes de comerciantes de alrededor del mundo y organizamos muchas reuniones por Skype. Todas las llamadas fueron grabadas y al final del dia siempre invertia unas horas creando un reporte de las entrevistas. Esta fase tomo alrededor de dos semanas.

Las preguntas que se realizaron en la entrevista estaban apuntando a lss siguientes problemas, los cuales te menciono a continuacion:

¿Cuál es su principal reto en el comercio?
¿Que es lo que mas le da preocupaciones?
¿Por que esto es un problema para usted?
¿Como ha intentado resolverlo?
¿Cuanto tiempo y dinero invierte para soluciones?
¿Puede brindarnos un ejemplo de cuando se ha producido este problema recientemente?

Despues de aproximadamente 20 entrevistas vi el panorama mas amplio. Casi todos ellos mencionaron las mismas respuestas para las preguntas, recogi las respuestas en la mesa e inicie a utilizar colores para diferentes categorias, al igual que algunos comerciantes se encuentran con problemas tecnicos o de aspectos psicologicos de la negociacion. Los diferentes colores representaban diferentes problemas.

Aqui les muestro los resultados:

 Clic en la imagen para ver en grande

 Puedes ver en esta tabla que muchas de las entrevistas enfrentan problemas psicologicos relacionados con su proceso de negociacion. Por ejemplo, "Emciones principalmente cuando estas en el comercio. El miedo, la codicia, la esperanza, la ansiedad ...".

Resultados

Basandonos en las entrevista recolectamos algunas ideas de los tipos mas importantes de problemas y queriamos que fuese con un publico amplio. Fuimos de nuevo en el mismo proceso: Facebook, una imagen bonita y los dirijimos a la pagina donde se encontraron con la encuesta. Una encuesta exactamente con las mismas preguntas que hice durante las entrevistas telefonicas. Esta vez nuestro publico meta fue mas amplio. Casi el 50% relleno la encuesta y nos brindaron su direccion de correo para ponernos en contacto con ellos mas tarde. Este experimento se llevo otras dos semanas. 

Te sorprenderia si te dijera que obtuvimos respuestas diferentes que obtuvimos en las entrevistas? No, no ocurrio. Despues de analizar 50 encuestas regresamos exactamente a los mismos resultados que habiamos conseguido a partir de las entrevistas. 

La sensacion era de extasis. Encontramos algo. Habiamos encontrado un problema unico que no se ha solucionado en un mercado lleno de muchos usuarios. Fue como sentir mariposas en el estomago.

Conclusion

Puedes tener muchas suposiciones sobre tu audiencia, sus problemas, soluciones o simplemente nada. Pero la mejor manera de construir un producto es empezar por preguntar. Pregunta acerca de sus habitos, retos, problemas y soluciones. Cuantas mas preguntas puedas hacer mejor sera el producto que puedas contruir. Claro que esta es una primera fase y nuestro producto podria fallar en cualquier momento por algun pequeño detalle, pero creo que si te preocupas por tu audiencia desde el inicio nunca podras construir grandes productos.