Comercio Electrónico UX para la Experiencia Móvil

Comercio Electrónico UX para la Experiencia Móvil

  13:00:00    Vladimir

---

Este articulo fue tomado de Toptal: https://goo.gl/TZ8Yhc
by Stelian Subotin - Designer @ Toptal (translated by Marisela Ordaz) 

El término “comercio móvil” fue introducido hace 20 años por Kevin Duffey cuando sugirió que un dispositivo móvil podría funcionar como un punto de venta minorista en el bolsillo de un cliente. Teniendo en cuenta las limitaciones tecnológicas de la época, ¿quién hubiera pensado que un día podríamos explorar, revisar y comprar bienes fácilmente en un pequeño dispositivo de bolsillo?

“No puedo exagerar lo mucho que los dispositivos móviles están cambiando la forma en que interactuamos con nuestros consumidores; tenemos que aceptar estos cambios.”
– Joel Anderson, CEO of Walmart

El asombroso crecimiento del comercio electrónico también ha impulsado el crecimiento del comercio electrónico móvil, ahora vale casi 700 billones. El comercio electrónico móvil es actualmente la porción más grande del gigantesco mercado en línea. Más del 80% de los estadounidenses han hecho una compra en línea en el último mes—hace tres años, el número fue solo del 11.6%. Un informe de Business Insider Intelligence sugirió que el comercio móvil aumentará hasta 45% en 2020. De acuerdo con una investigación de ComScore en 2016 hubo un aumento del 44% en el gasto a través de dispositivos móviles en comparación con 2015.

Aspectos de las estadísticas de compras de teléfonos inteligentes por Statista

A pesar del alto número de ventas, más del 60% de los usuarios todavía se siente preocupado por tener su información financiera pirateada cuando se usa un teléfono móvil. Sin embargo, la satisfacción del cliente sigue siendo bastante alta con los gigantes minoristas móviles como Amazon y Apple, ambos recibiendo una calificación de satisfacción de más del 80%.

Concepto de comercio electrónico móvil por Alex Khoroshok

Mejores Prácticas de Comercio Electrónico Móvil UX para el Éxito

Apoyo de Acercamiento de Imagen Mediante “Pellizcos” y Gestos de Doble Click

La gente está familiarizada con los gestos como tocar dos veces y pellizcar para acercar las imágenes en el móvil. Durante un estudio móvil de usabilidad de comercio electrónico, el Instituto Baymard encontró que, naturalmente, los compradores quieren poder inspeccionar el producto a fondo y les preocupan los pequeños detalles. Los usuarios que estaban interesados ​​en comprar un producto pero que no podían explorarlo acercándose, no se sentían cómodos comprándolo y, a menudo, no se comprometían con la venta.

Imágenes de producto ampliadas en la aplicación Overstock.

Es bastante sorprendente que de las 50 aplicaciones de comercio electrónico móvil más taquilleras, más del 40% no sea compatible con los gestos de zoom.
Incluso los sitios que ofrecían versiones de primeros planos de imágenes experimentaron tasas de rebote similares, lo que sugiere que la compatibilidad con los gestos de zoom de la imagen del producto en una aplicación móvil de comercio electrónico es fundamental.
Teniendo en cuenta el pequeño tamaño de pantalla de los dispositivos móviles, este es un problema específico de la plataforma. El soporte de al menos una de estas características colocará a una aplicación de la compañía en el 50% de las mejores aplicaciones de comercio electrónico, es decir, la lista de mayor recaudación.
Algunos factores a considerar:

• Las imágenes de baja resolución son el equivalente de las imágenes sin zoom. Los usuarios están interesados ​​en ver claramente los detalles de un producto y necesitan imágenes de alta resolución para hacerlo. La opción de ampliar una imagen de baja calidad es bastante inútil ya que no permite al usuario ver los detalles.
• El Instituto Baymard descubrió que el 50% de las aplicaciones no indican a los usuarios que pueden pellizcar o tocar dos veces las imágenes del producto. Indicar la disponibilidad del zoom de la imagen es importante. Aunque estos gestos son comúnmente conocidos por los usuarios de dispositivos móviles, aún debe mostrarse que están disponibles. Se recomienda el uso de iconos o representaciones visuales para hacer esto.

Proporcionar una Función de “Guardar” Para el Carrito de Compras

Como se mencionó anteriormente, el tamaño pequeño de la pantalla de los dispositivos móviles es el principal obstáculo cuando se trata de comercio electrónico móvil. El Instituto Baymard observó que más del 61% de los usuarios de dispositivos móviles utilizará a menudo sus escritorios para completar su compra en lugar de su teléfono.

Carritos de compra "Guardables" en las aplicaciones Nordstrom y Overstock.

La función “guardar carrito de compras” reduce el número de abandonos de carritos y permite a los compradores guardar artículos para una compra posterior. Carros de compras persistentes permiten a los clientes continuar sus compras sin la necesidad de buscar el producto deseado a su regreso—una característica que 55% de los compradores usaría.
A continuación se detalla cómo retener a estos clientes:

1. Haz que el carrito funcione como una lista de deseos guardando los artículos agregados al carrito.
2. Crea una opción para permitir que los compradores reciban correos electrónicos con artículos guardados. Muestra recordatorios de que pueden usar su escritorio para finalizar la compra.

Usa Formularios Descriptivos y Bien Etiquetados

La aplicación de mejores prácticas para formularios móviles es otra consideración. Es importante que el diseño de UX de una aplicación o sitio de comercio electrónico, al tiempo que elimine cualquier confusión, permita a los usuarios completar formularios lo más rápido posible.

Éstas son las mejores prácticas para la usabilidad de la forma móvil:

• Coloca las etiquetas de los formularios encima del formulario para mejorar la legibilidad, la facilidad de uso y la claridad. Explicar por qué se necesita cierta información reducirá la ansiedad del usuario al completar formularios en el dispositivo móvil.
• Haz coincidir las entradas de texto con el teclado apropiado. Visualiza un teclado de marcación cuando ingreses números de teléfono y dígitos de tarjetas de crédito y un panel de texto cuando ingreses direcciones y texto. Esto reducirá los errores del usuario y acelerará la finalización del formulario.
• Limita el número de campos de entrada para reducir el esfuerzo de tipeo. Menos campos de entrada generarán un formulario menos cargado y mejorarán el flujo de salida de UX.
• Avanza automáticamente cada campo en la pantalla cuando se complete. Hacer esto no obstruirá ninguna vista de los campos incompletos.
• Usa steppers en lugar de menús desplegables para reducir el esfuerzo de los compradores. Los steppers se utilizan para aumentar o disminuir el valor en una cantidad constante y son una solución más rápida para trabajar y más atractiva.

Formas claramente etiquetadas en la página móvil deSears.

Proporcionar Autosugestión Inteligente, Detección Automática, Búsqueda de Direcciones y Errores

El objetivo principal de la autosugestión es facilitar y agilizar el llenado de formularios por parte de los usuarios. La sugerencia automática predice consultas de búsqueda comunes y ayuda a los compradores a encontrar productos más fácilmente. La usabilidad móvil se puede mejorar aún más utilizando la autodetección del tipo de tarjeta de crédito. Autodetección agiliza el proceso de compra al proporcionar retroalimentación inmediata para los tipos de tarjeta compatibles. La automatización de tantos procesos de entrada de datos como sea posible—preferiblemente con imágenes—mejora la experiencia del usuario y afectará positivamente las tasas de conversión.

Buscar con autosugestión en aplicaciones deEpsy y Toys"R"Us

La búsqueda y la validación de direcciones aceleran el proceso de finalización de la compra—varias API (como Google Places y USPS) permite una fácil implementación de esta característica. Proporcionar validación de entrada en línea para errores también es una práctica recomendada en el diseño de UX móvil. La falta de rendimiento rápido es una gran frustración para los compradores de comercio electrónico. Esto se puede mejorar proporcionando a los usuarios retroalimentación en vivo sobre su progreso (durante el pago, por ejemplo), especialmente cuando cometen un error inadvertido. Esto permite a los usuarios corregir sus errores de inmediato, lo que afecta la usabilidad de una manera positiva.

Usa Microinteracciones para mejorar las Compras Móviles UX

Las Microinteracciones son detalles en la interfaz de un producto destinadas a realizar una única tarea mientras se mejora el flujo natural del producto. Gustar y calificar un producto, elegir un color y tamaño y deslizar hacia abajo para actualizar los datos son ejemplos de microinteracciones.

Microinteracción de selección de color del producto en comercio electrónico móvil por Mykolas Puodziunas

Teniendo en cuenta lo comunes que son, las microinteracciones pueden ayudar o perjudicar el UX de una aplicación de comercio electrónico móvil.
Las microinteracciones se pueden usar para:

• Guiar al usuario a través de la aplicación de una manera más intuitiva;
• Transmitir un mejor sentido de confianza, reducir la ansiedad de los compradores y aumentar la comodidad psicológica general gracias a interacciones más naturales y fluidas;
• Prevenir errores futuros y proporcionar retroalimentación inmediata a los usuarios en función de las actividades que han completado; y/o
• Mejorar la interacción del usuario con la aplicación respondiendo a las notificaciones.

Proporciona una Interacción Fácil, Orientada al Pulgar

Comprender las formas más comunes en que los compradores tienen sus dispositivos móviles mejora la experiencia y usabilidad del usuario de comercio electrónico móvil. En 2013, Steven Hoober preguntó “¿Cómo los usuarios realmente tienen dispositivos móviles?” y observó cómo las personas interactúan y sostienen sus teléfonos inteligentes, y notaron tres patrones principales de comportamiento que debe guiar el diseño de UX móvil.

¿Dónde caen las manos y los pulgares en el dispositivo? UX orientada al uso del pulgar

La adaptación de las interfaces a la forma natural en que las personas utilizan los teléfonos celulares aumentará la comodidad del usuario y reducirá la ansiedad de los compradores. Los dispositivos móviles y los tamaños de pantalla varían, pero la “zona de pulgar” es un aspecto crítico del diseño y la experiencia del usuario sigue siendo la misma.

Diseñando alrededor de la “zona de pulgar”

• Resuelve posibles problemas con la navegación y exploración
• Mejora la interacción al acomodar gestos y alcance con un dedo
• Convierte mejor y aumenta la usabilidad al colocar elementos importantes zonas “fáciles de alcanzar”

Consideraciones para el Diseño de Comercio Electrónico Móvil Orientado a la Conversión

Demuestra un Sentimiento de Seguridad en las Aplicaciones de Comercio Electrónico Móvil

La Seguridad es una de las mayores preocupaciones para los usuarios mientras compran en dispositivos móviles. Comunicarles que sus transacciones son seguras agrega mucho valor a la percepción positiva que los compradores tienen hacia una tienda.

Uso de insignias de confianza en aplicaciones Walmart y Walgreens

Aquí hay algunas técnicas de diseño UX que comunican seguridad a los usuarios y reducen la ansiedad del usuario:

• Hacer que las etiquetas de los botones sean sugestivas y claras en cuanto a hacia dónde van los compradores. Palabras como “proceder”, “seguro” y “encriptado” fortalecerán la comodidad psicológica de los usuarios.
• Usa símbolos de bloqueo para garantizar a los compradores que sus transacciones son seguras.
• Usa credenciales de confianza de proveedores de seguridad como McAfee Secure y Norton. Esto ayuda a los usuarios a percibir positivamente un sitio web (estudio del Instituto Baymard).
• Aplicar principios de psicología del color en el diseño para una mejor percepción de confianza por parte de los compradores. Algunos de estos principios incluyen colores orientados a la audiencia y específicos del género.

Diseño de botones sugestivos en aplicaciones Dell

Prioriza la búsqueda (y manténla arriba del doblez)

Los compradores utilizan un sitio o aplicación móvil de comercio electrónico para explorar productos o comprar un producto en particular; en consecuencia, una búsqueda bien diseñada adquiere una importancia crítica para una aplicación móvil de comercio electrónico. eBay cree que su búsqueda en el sitio es una de los más importantes características para compradores móviles y lo enfatiza colocándolo en el centro y arriba de la interfaz.

Búsqueda en aplicaciones móviles de American Eagle Outfitters y L.L.Bean

Consideraciones importantes para la búsqueda móvil:

• ¡Asegúrate de que sea visible! Mantener la barra de búsqueda de fácil acceso y encima del doblez ofrece a los compradores una forma de buscar productos sin esfuerzo.
• Proporcionar búsqueda anticipada mediante el uso de datos adquiridos de patrones de búsqueda comunes y mostrar productos relacionados en las páginas de resultados de búsqueda.
• Ofrecer opciones avanzadas de filtrado que permitan a los clientes encontrar sus productos deseados de forma rápida y sin esfuerzo.

Un aspecto importante a considerar cuando se muestran formularios de búsqueda es que solo son valiosos en las primeras etapas de la interacción de un usuario con la aplicación. Los usuarios suelen buscar la aplicación al comienzo de su recorrido de compra, y puede haber instancias en las que mostrar un formulario de búsqueda más adelante en el camino puede dañar el UX.
Por ejemplo, durante el proceso de finalización de la compra, la búsqueda ya no es útil y solo distraerá porque podría hacer que los usuarios pierdan el enfoque y renunciar a su compromiso con la compra.

Proporciona un Pago Rápido, Fácil y Tranquilo

Los estudios han demostrado que el proceso de pago es la parte más estresante de completar una compra en línea. El Baymard Institute informa una tasa del 35% para abandono del carrito debido al requisito de crear una cuenta antes de comprar. Para disminuir las tasas de abandono del carrito, es importante diseñar un proceso de pago fácil y rápido que no solicite a los compradores que se registren primero.

Flujos en el proceso de compra delas aplicaciones móviles de Etsy y Ann Taylor

Estudios de usabilidad descubrieron que más del 60% de los usuarios tenían dificultades para encontrar la opción de pago de invitado; por lo tanto, la opción de pago de invitado debe ser claramente visible y de fácil acceso.

Diseños web animados de flujo de caja de comercio electrónico móvil por Michael Pons

Aquí hay algunas sugerencias para un mejor flujo de caja de comercio electrónico:

• Para promover el compromiso del usuario, etiqueta cada paso del proceso de compra numerando y mostrando el paso actualmente activo.
• Usa representaciones visuales como barras de progreso para mostrar y avanzar en el proceso de pago.
• Proporciona una opción para registrarse e iniciar sesión durante el proceso de pago pero haz una elección.
• Para reducir las tasas de ansiedad y rebote, sugiere a los usuarios que inicien sesión o se registren después de finalizar la compra si se han registrado como invitados.
• Aplicar técnicas progresivas de revelación para mejorar el enfoque del usuario y cargar contenido 30% más rápido.

En resumen: ¿Cuáles son algunas características clave del exitoso diseño de comercio electrónico móvil?

• Proporciona flujos rápidos y fáciles de registro y proceso de pago
• Inculca una sensación de seguridad y confianza al mostrar íconos, insignias, reseñas y testimonios apropiados
• Proporciona interacción diseñada alrededor de zonas amigables para el pulgar
• Utiliza navegación consistente y condensada
• Incorpora búsqueda rápida y fácil filtrado de productos
• Comprende el vínculo directo entre el estrés del usuario, la ansiedad y las tasas de conversión para aplicaciones móviles
• Proporciona experiencias rápidas y receptivas de sitios móviles
• Admite gestos para el zoom de la imagen del producto

El Espacio de Comercio Electrónico Móvil Sólo se Hará más Grande

Tendencias del comercio electrónico móvil muestran que el mercado de comercio electrónico móvil está creciendo exponencialmente y el crecimiento de la industria ha creado una multitud de beneficios para los vendedores. Sin embargo, con eso vinieron muchas mejores prácticas y estándares para el diseño de comercio electrónico móvil que los vendedores deben seguir si quieren tener éxito.

Aplicación de tienda de ropa por Vitaly Rubtsov

Los compradores esperan una aplicación móvil que funcione bien, se vea hermosa y se adapte a sus comportamientos. Aunque cada aplicación es diferente con sus propias limitaciones y objetivos, seguir los principios fundamentales descritos en este artículo ayudará a crear aplicaciones exitosas de comercio electrónico móvil.
Descarga una hoja de trucos de mejora de comercio electrónico móvil UX

Seguir Leyendo

La Guía Fundamental Para La Usabilidad Mobile

La Guía Fundamental Para La Usabilidad Mobile

  9:30:00    Vladimir

---

La usabilidad móvil no solo reduce el tamaño de un sitio web para adaptarse a varios dispositivos. Se trata de prestar atención a las formas en que las personas usan los dispositivos móviles y entender que la experiencia móvil es tan única como el usuario.

El diseño de usabilidad para dispositivos móviles se trata tanto de la forma en que se siente como de cómo se ve y cómo se comporta. Las personas usan sus dedos — o más específicamente y más a menudo, sus pulgares — para interactuar con la pantalla, en lugar de los proxies de escritorio tradicionales de un mouse y un teclado. Esto significa que el diseño móvil es una experiencia mucho más táctil que el escritorio. Los usuarios lo sienten tanto como lo ven.

Para bien o para mal, la barrera de los proxies de escritorio se ha ido, y los diseñadores móviles se enfrentan a un nuevo conjunto de principios de diseño de UX para la usabilidad.

Si bien no existe una solución única para la usabilidad móvil, simplemente debido a la gran variedad de tamaños en pantallas y dedos, los siguientes principios de usabilidad mueven las cosas en la dirección correcta:

1. Conoce a tus usuarios
2. Comprender el contexto
3. Sigue la regla de oro (s)
4. Pon el contenido primero
5. Manténgase en el objetivo (táctil)
6. Echo el mundo real con gestos
7. Usa divulgación progresiva

Nos adentraremos en ellos con más detalle más abajo en esta publicación, pero primero, analicemos algunos puntos clave del diseño optimizado para dispositivos móviles, así como los hallazgos de investigación y recomendaciones de destacados diseñadores en el campo.

Beyond Pixels - El diseño móvil se encuentra con el diseño industrial

Debido a que el diseño móvil es tan táctil, se mueve más allá del diseño visual y los píxeles en una pantalla. La usabilidad móvil requiere que los diseñadores consideren elementos de diseño industrial y factores humanos; es decir, diseño para objetos físicos reales. Si bien los diseñadores de UX móviles no están diseñando el producto físico en sí, los diseñadores de la interfaz móvil aún deben comprender cómo el usuario experimenta físicamente una aplicación.

¿Qué tiene que ver la usabilidad móvil con el diseño de la silla? Más de lo que piensas La silla Herman Miller Embody (de Herman Miller)

Las pantallas táctiles requieren diseñadores de UX para considerar ergonomía, mucho en el del mismo modo que los diseñadores de productos físicos. Debido a que las personas interactúan físicamente con dispositivos móviles, la comodidad es importante. Nadie quiere sentarse en una silla incómoda; de la misma manera, nadie quiere usar una aplicación que le cause dolor o incomodidad o que simplemente se sienta incómodo de navegar.

Del mismo modo que los diseñadores industriales dedican grandes cantidades de tiempo a investigar y observar a los usuarios, los diseñadores de IU móviles deben trabajar continuamente para observar, comprender y generar empatía para reconocer verdaderamente cómo las personas usan dispositivos móviles antes de saltar directamente al diseño de pantallas. Comprender cómo las personas usan los dispositivos implica dos cosas: la manera literal y física en que los tienen y el contexto en el que los usan. Ambas cosas son tan importantes para la usabilidad de una experiencia móvil como la pantalla se diseña a sí misma.

Usability Research: cómo las personas usan dispositivos móviles

Una de las figuras clave de la investigación móvil es Steven Hoober, diseñador de UX y presidente de 4ourth Mobile. En 2013, condujo una extensa investigación sobre cómo las personas sostienen y usan sus teléfonos y escribió sobre sus hallazgos en el artículo, ¿Cómo los usuarios realmente tienen dispositivos móviles?

Pero él no se detuvo allí. Su investigación continuó y, a medida que el campo crecía, comenzó a incorporar otros datos de investigación móvil.

En 2017, escribió una serie de tres partes para actualizar sus hallazgos iniciales, señalar nuevos aprendizajes clave y suplicar enfáticamente a los diseñadores que dejen de hacer referencia a su trabajo más antiguo como estándar. Él dice que una ilustración en particular (que se muestra a continuación), continúa circulando como el estándar de cómo los usuarios sostienen sus teléfonos, pero no es correcto como el único estándar.

La referencia frecuente, pero incorrecta, de cómo los usuarios tienen teléfonos (de UX Matters)

De hecho, a partir de sus escritos de 2017, hay seis maneras distintas en que los usuarios pueden sostener sus teléfonos, con 75% usando solo el pulgar para tocar la pantalla y menos del 50% sosteniendo su teléfono con una sola mano (Diseño para Fingers, Touch y People Parte 1).

Hay seis formas comunes en que las personas tienen sus teléfonos (de UX Matters )

Con estos hallazgos, está claro que el escritorio tradicional patrón en forma de F en el que los usuarios hacen dos horizontales los movimientos oculares a través de la pantalla seguidos de un movimiento vertical en el lado izquierdo no coinciden con el diseño móvil.

Los mapas de calor del patrón F del grupo Nielsen Norman de los estudios de seguimiento visual (de Nielsen Norman Group )

Si bien la mayoría de los diseñadores de UX están profundamente familiarizados con el patrón de forma de F para leer contenido web en el diseño de escritorio, no es un patrón que se traduzca bien en dispositivos móviles.

La ausencia del patrón de forma de F en los dispositivos móviles también es una de las razones para evitar el uso del menú de hamburguesas para colapsar la navegación principal u ocultar el contenido importante, y por qué el diseño del dispositivo móvil debe manejarse de forma diferente a la del escritorio.

Si no es el patrón F, ¿entonces qué?

Los usuarios de dispositivos móviles tienden a mirar primero al centro de la pantalla. El centro también representa el lugar más fácil para que puedan alcanzar y tocar con los pulgares en la mayoría de los teléfonos inteligentes. La precisión del tacto disminuye a medida que los usuarios alcanzan las esquinas más externas de la pantalla.

Los usuarios ven y tocan el centro de la pantalla con mayor frecuencia. (de UX Matters)

Por supuesto, el móvil no se detiene en los teléfonos. Los usuarios todavía tienden a usar sus pulgares cuando sostienen una tableta pero, por lo general, no sostienen el dispositivo de la misma manera que sostienen un teléfono. En cambio, tienden a sostener tabletas de los lados, con ambas manos, y usan los pulgares para tocar la pantalla.

Los usuarios tienden a sostener las tabletas desde los lados, ya sea en modo retrato o paisaje, y usan dos pulgares para tocar la pantalla. (de Designing for Touch )

7 Principios rectores para dispositivos móviles

Debido a las variaciones en el tamaño de los dispositivos móviles y a la forma en que las personas los usan, no existe un estándar de diseño de “talla única”. Más bien, es un conjunto de principios y conceptos que los diseñadores deben entender para mejorar la usabilidad móvil.

Los siguientes principios ayudan a los diseñadores a tener en cuenta el tacto y la ergonomía para que las experiencias móviles sean más agradables y fáciles de usar:

1. Conoce a tus usuarios

El primer error que un diseñador puede cometer en el diseño de dispositivos móviles es asumir que todos usan un dispositivo de la misma forma que lo hacen o usan el mismo dispositivo que usan. Intenta evitar esta suposición.

El siguiente error es suponer que todos los datos existentes de investigaciones anteriores, ya sea de fuentes secundarias o de investigaciones primarias realizadas anteriormente, son verdaderos para los usuarios para siempre. Los usuarios cambian, las tecnologías cambian y el comportamiento del usuario puede variar ampliamente, por lo que la investigación continua es clave para mantenerse actualizado.

En su investigación, Steven Hoober estableció seis formas en que los usuarios pueden sostener un teléfono inteligente, pero sus usuarios objetivo pueden mantener su teléfono principalmente de una de las formas menos comunes. Por ejemplo, una aplicación diseñada para que las personas mayores puedan registrar información sobre sus medicamentos probablemente tenga algunos requisitos únicos. Este grupo demográfico en particular puede experimentar impedimentos que podrían afectar la forma en que sostienen (y ven) un dispositivo móvil; esto es importante para entenderlo como diseñador.

La investigación de usabilidad para el diseño móvil debe incluir observar a los usuarios con sus dispositivos en sus entornos naturales.

Hay varias formas de obtener información sobre los usuarios. Un buen lugar para comenzar es con análisis web, si están disponibles, y descubriendo qué dispositivos usan los usuarios. Otra opción es encuestar a los usuarios sobre sus dispositivos, así como sobre las actividades para las que los utilizan. El muestreo de experiencia es otra opción para atrapar a los usuarios en determinados momentos. Y la investigación más poderosa de todas: observar a los usuarios en la naturaleza usando sus dispositivos.

Punto clave: investiga y observa a los usuarios con sus dispositivos móviles para comprender realmente cómo diseñar para ellos.

2. Comprender el contexto de uso

Esto está estrechamente relacionado con Conocer a tus usuarios, pero vale la pena tu propia convocatoria porque es muy importante. Móvil literalmente significa “capaz de moverse libremente.” La mayoría de las personas no se quedan quietas o concentran el 100% de su concentración en sus dispositivos cuando usan una aplicación móvil. A menudo hacen otras cosas: caminar por la tienda, mirar televisión, hacer ejercicio, sentarse en un restaurante o conducir.

Dónde las personas usan sus dispositivos es tan importante como la usan, y eso puede afectar el diseño y la experiencia en general. Por ejemplo, una aplicación en ejecución probablemente tiene casos de uso muy diferentes que una aplicación bancaria.

El contexto es clave: las diferentes aplicaciones móviles tendrán diferentes contextos y lugares donde se usarán.

Comprender dónde y cómo los usuarios interactúan con un diseño móvil, así como qué hacen mientras usan su dispositivo puede ayudar a los diseñadores a crear aplicaciones que funcionen para sus usuarios.

Puntos clave: los usuarios hacen todo tipo de cosas mientras usan sus dispositivos móviles y probablemente no le darán toda la atención a una aplicación.

3. Seguir la(s) regla(s) de oro

Debido a que los usuarios navegan los dispositivos móviles principalmente con sus pulgares, los diseños móviles deben diseñarse para pulgares en lugar de clics del mouse. Esto significa que todo lo que un usuario necesita para acceder a la pantalla debe estar a una distancia fácil de alcanzar de sus pulgares, sin que sea necesario estirar o retorcer sus manos de forma no natural.

Esta es una de las razones por las que el diseño receptivo es tan importante y por qué es preferible un diseño de una sola columna en el móvil a múltiples columnas. El uso de varias columnas reduce automáticamente el tamaño real de la pantalla y coloca parte del contenido importante fuera de la zona secundaria, lo que dificulta el acceso de los usuarios.

Un diseño de una sola columna hace que sea más fácil para un usuario navegar con sus pulgares que un diseño de varias columnas.

Punto clave: asegúrese de que el contenido clave y la navegación estén al alcance de la mano.

4. Pon el contenido primero

Este tiene claras raíces en el diseño industrial. Como señala Josh Clark en Designing for Touch, uno de los principales principios del diseño industrial es que el contenido siempre debe aparecer por encima de los controles para que las manos de los usuarios no bloqueen su línea de visión.

En el diseño web tradicional, la navegación es lo primero en la parte superior de la pantalla y el contenido está por debajo de ella, pero el diseño industrial es el opuesto y el diseño móvil debe seguir su ejemplo.

Debido a la forma en que los usuarios ven y tocan las pantallas, el contenido más importante debe estar en el centro de la pantalla con los otros controles de navegación clave en la parte inferior.

Poner el contenido clave por encima de los controles ayuda a mejorar la usabilidad móvil.

En las tabletas, este consejo cambia solo un poco, pero aún se centra en permitir al usuario navegar tocando con los pulgares y evitar que los dedos bloqueen el contenido. El contenido importante y los controles de navegación ahora deberían moverse hacia los lados de la pantalla.

Diseño de la aplicación móvil en una tableta (por Cuong Vu )

Punto clave: coloca el contenido más importante en el centro de la pantalla y coloca los controles de navegación principales en el lugar que sea más apropiado para el dispositivo y donde los dedos no bloqueen la vista del contenido.

5. Mantente en (Touch) Target

No importa cuál sea el dispositivo, el móvil requiere diseño para el tacto. Pero el tacto es impreciso. No hay dos usuarios con el mismo tamaño exacto, y no es tan simple como dar cuenta de un clic del mouse.

Según Josh Clark, fundador de la agencia UX Big Medium y autor de Designing for Touch, un número realmente importa en usabilidad móvil: 44.

El objetivo táctil óptimo es de 7x7mm, lo que se traduce en píxeles equivale a aproximadamente 40. Pero para tener en cuenta varios tamaños de visualización, 44 píxeles es el espacio ideal para cubrir las zonas táctiles y evitar el error del usuario.

Los cuadrados azules inferiores muestran 44 píxeles (con un relleno de 20 píxeles) como objetivo táctil, que es lo mínimo que un diseñador debe considerar para la usabilidad móvil.

Hacer los objetivos táctiles un poco más grandes ayuda a cubrir los contextos y las circunstancias en las que los usuarios interactúan con su dispositivo, a menudo sin prestarle toda su atención (consulta Entienda el contexto de uso).

Punto clave: el tacto es impreciso e impredecible. Agrande el área del objetivo táctil para acomodar.

Este articulo fue tomado de Toptal: https://goo.gl/LkccWw

Seguir Leyendo

Herramientas de Línea de Comando para Desarrolladores

Herramientas de Línea de Comando para Desarrolladores

  8:55:00    Vladimir

---

En el mundo en línea de hoy, la batalla para atraer a los usuarios continúa con furia, con los fabricantes de aplicaciones que prefieren aplicaciones móviles o web. Las aplicaciones de escritorio son cada vez menos relevantes. Por otra parte, también tienden a ser nada más que clientes ricos de aplicaciones web: Electron es la plataforma popular de elección.

¿Significa esto que pronto abandonaremos el escritorio como plataforma? No, por supuesto que no, yo no diría eso. Además, aunque las aplicaciones GUI parecen haberse estancado recientemente, hay un segmento de aplicaciones de escritorio que continúa creciendo.

¿Alguna vez has visto alguna película con hackers? La mayoría de las veces, estas personas se muestran trabajando frente a monitores que muestran algún tipo de terminal (generalmente con un fondo oscuro y un primer plano claro). Esta terminal, a su vez, tiende a estar inundada de caracteres que aparentemente tienen algún significado para la persona que los lee.

Tales representaciones de hackers en acción a menudo son burladas por desarrolladores profesionales, e incluso hay algunos programas que simulan varios efectos de “hackers”, solo por diversión.

Sin embargo, en el mundo real, las herramientas de línea de comandos no se utilizan por su valor de entretenimiento.

Por qué todavía utilizamos las herramientas de interfaz de línea de comandos

Este artículo se centra en el aspecto práctico del uso de herramientas de interfaz de línea de comandos (CLI). Conocer los comandos de la CLI y usar herramientas de calidad puede hacerlo más productivo y también pueden abrir las puertas a varios enfoques de la automatización que son mucho más prácticos con las interfaces textuales que con las aplicaciones GUI.

Puede mejorar al realizar tareas repetitivas en GUI, hasta el punto de que sus múltiples clics se escuchen como uno solo. El problema es que esto no mejorará la eficiencia de un script especializado. Además, realizar las mismas operaciones de forma manual introduce tanto una carga cognitiva adicional como una mayor posibilidad de error humano. Como de costumbre, dependemos de computadoras para manejar tareas que los humanos pueden considerar aburridas, repetitivas o abrumadoras.

Vale la pena saber que una herramienta de terminal puede ofrecer varios tipos de interfaces. Hay elementos no interactivos como ls, que simplemente toman los parámetros y proporcionan la salida. Existen interfaces interactivas o semi interactivas que se encuentran con mayor frecuencia en los gestores de paquetes. (“¿Está seguro de que desea continuar con la instalación desde un origen no verificado?”) Luego, hay interfaces de usuario textuales (TUI), que son aplicaciones de GUI interactivas diseñadas para ajustarse a las limitaciones de una terminal. Probablemente el más famoso es Midnight Commander (mc), un clon extremadamente popular (de los años 90) Norton Commander.

Herramientas esenciales de la línea de comandos

Si deseas convertirse en un habitante de la consola, debe equiparse con un conjunto mínimo de herramientas de desarrollo de línea de comandos: lo esencial. Las cosas con las que definitivamente no puede vivir son una shell interactiva (apunta a algo moderno con una conveniente terminación de pestañas) y un editor de texto.

Ahora, mencionaré UNIX philosophy, que a menudo es la base de las decisiones de diseño tomadas por los autores de la herramienta, ya sea conscientemente o no. Algunos de los puntos clave se pueden resumir de la siguiente manera:

• Trata todo como un archivo.
• Haz una sola cosa, pero hazlo bien.
• Leer desde entrada estándar, escribir en salida estándar y comunicar errores a un flujo de error estándar.
• Cuando haya tenido éxito, devolverá el código 0. Un valor distinto de cero significa un error (que puede especificarse mediante el código de retorno exacto).
• Permitir encadenamiento de comando y scripting.

Cáscara

Lo primero que verá al abrir una terminal es un shell. Esta es la parte que hace posible la interacción entre el usuario y la máquina. Interpreta tus comandos, los divide en nombres de programas y argumentos, y ejecuta todos los comandos de shell que le arrojas.

Históricamente, ha habido muchos tipos diferentes de shell. Entre los más populares se encuentran csh (C Shell) y varias implementaciones de Bourne Shell (generalmente conocido simplemente como sh). Bourne Shell se extendió a Korn Shell, que también ganó algo de tracción y todavía está siendo utilizado por sus entusiastas. Csh es actualmente el shell predeterminado en algunos sistemas BSD, mientras que casi todos los demás sistemas operativos tipo UNIX prefieren algún tipo de Bourne Shell. Las distribuciones de Linux tienden a favorecer bash mientras que Mac OS X viene con zsh como la opción predeterminada.

Existen otras posibilidades, pero son mucho menos populares, excepto Microsoft PowerShell en sistemas Windows. PowerShell está inspirado en parte por los shells interactivos de UNIX como zsh y en parte por .NET runtime. En lugar de tratar todo como texto, un concepto común en el mundo UNIX, permite la manipulación de datos orientada a objetos.

Aunque Microsoft PowerShell es bastante popular en el ámbito de Windows, muchos programas con orígenes de UNIX (los más notables son Git, Autotools o Make) tienden a preferir alguna variación de Bourne Shell. Debido a esto, han nacido proyectos como msys (incluido con Git para Windows), Cygwin, o el reciente [WSL] de Microsoft. Si deseas una sensación similar a Linux en Windows, MSys es la mejor opción aquí. Si desea un entorno Linux con todas las funciones capaz de ejecutar binarios estándar de Linux, entonces WSL es el camino a seguir. Para algo intermedio: API de UNIX, pero compilada como un ejecutable de Windows (solo úsala cuando realmente sepas por qué la necesitas) -Cygwin es la respuesta.

Editor

Una vez que te familiarices con tu shell, querrás adquirir algunas habilidades útiles. Como la mayoría del trabajo de codificación gira en torno a la escritura de texto (código, README, mensajes de confirmación), un buen conocimiento de los editores de texto interactivos es esencial. Hay muchos para elegir, y dado que un editor es una de las herramientas más necesarias para cualquier desarrollador, probablemente haya tantas opiniones sobre cuál editor es el mejor.

La mayoría editores de texto populares pueden separarse en dos grupos básicos: Editores de texto simple y editores de texto programables.

Ambos pueden ser excelentes para escribir código, pero, como su nombre lo indica, los programables ofrecen la capacidad de dar forma y personalizar el editor para que se ajuste perfectamente a sus necesidades. Sin embargo, esto tiene un precio, ya que también tienden a tener una curva de aprendizaje más pronunciada y pueden requerir más tiempo para establecerse.

Editores de texto básicos

Entre los editores de texto simple, GNU Nano es el más extendido. En realidad, es un clon del editor pico, por lo que si uno no está disponible en su sistema, puede probar el otro. Otra alternativa más moderna para ambos es el editor micro. Si quieres algo simple y extensible al mismo tiempo, este es un buen lugar para comenzar.

Editores de texto programables

Muchos desarrolladores dependen de editores programables de diferentes campos, como Vim y GNU Emacs. Ambos editores pueden ejecutarse en la consola o en modo GUI, y ambos tuvieron un impacto en los enlaces de teclas encontrados en otro software. Ambos ofrecen no solo una API sino también lenguajes de programación reales incorporados. Emacs se centra en LISP y Vim usa su propio VimL, ​​pero también ofrece interfaces con otros lenguajes de scripting populares (como Lua, Perl, Python o Ruby). También vale la pena mencionar un enfoque más reciente de Vim, llamado Neovim, ya que está empezando a recibir seguidores serios.

Puede ser algo confuso, pero también hay un editor llamado vi que es un predecesor de Vim (que, dicho sea de paso, significa “Vi mejorado”). Es mucho más simple que Vim, pero si tienes suficiente confianza para escribir en Vim, no debería ser un desafío para ti si te resulta necesario usar vi.

Dado que pico/GNU Nano y vi/Vim generalmente están preinstalados en varios sistemas, es una buena idea al menos comprender sus conceptos básicos (salir de Vim es un problema notoriamente difícil para los principiantes). De esta manera, si necesita editar algo en una máquina remota, estará listo independientemente de qué editor ya esté allí. En su dispositivo privado, puede usar cualquier editor que le resulte más cómodo.

Editor de sistema predeterminado

Una última cosa a tener en cuenta es que su sistema puede tener lo que se llama un editor predeterminado.

La variable de entorno $ EDITOR apunta al editor predeterminado y en los shells compatibles con Bourne (sh, bash, ksh, zsh) puede verlo ingresando echo $ EDITOR. Si el valor difiere de su elección personal, puede configurarlo agregando export EDITOR = my-awesome-editor a la configuración en tiempo de ejecución de tu shell ( ~ / .profile, ~. / Bashrc, ~ /. zshrc, y así sucesivamente).

Otros programas, como los sistemas de control de versiones y los clientes de correo, usarán este editor cuando necesiten una entrada de texto más larga.

Multiplexor

Tan pronto como comiences a hacer cosas serias en CLI, te encontrarás con la limitación de poder mantener abierta solo una aplicación en un momento dado. Al codificar, es posible que desee editar el código, ejecutarlo, corregir los errores y ejecutar nuevamente. Al buscar un error, es posible que desee enumerar los registros y ver qué se registra cuando envía una solicitud al servidor. Normalmente, esto significa cambiar constantemente entre las dos aplicaciones o abrir varias ventanas de terminal.

Aquí es donde un multiplexor de terminal puede ayudarte. Cuando se habla de multiplexores, algunas personas asumen inmediatamente que el tema es de Pantalla GNU. Fue la primera herramienta extendida de su tipo y sigue siendo muy popular hoy en día (a menudo se instala por defecto). Su reemplazo moderno es tmux que, como era de esperar, significa “terminal multiplexer.”

Estos dos le permiten tener más de una ventana abierta en una sesión de terminal determinada y cambiar entre esas sesiones libremente. Permiten dividir las ventanas en paneles, lo que ayuda a ejecutar varias aplicaciones al mismo tiempo y observar su salida en tiempo real (sin cambiar las ventanas). Además, funcionan en modo cliente-servidor, lo que significa que puede separarlos en cualquier momento dado y regresar más tarde para continuar el trabajo justo donde lo dejó. Esta última característica llevó a la popularidad de Screen cuando las personas querían sesiones persistentes IRC.

Para la mayoría de los casos de uso, GNU Screen o tmux deberían ser geniales para ti, pero si por alguna razón consideras que son demasiado pesados ​​en recursos, también hay alternativas más ligeras. Hay dtach / atach y está abduco. Tienen un alcance limitado a propósito, pero pueden realizar bien sus respectivos deberes.

Administrador de paquetes

En este punto, puede comenzar a pensar en instalar todo el software antes mencionado en su máquina. Un problema es que cada una de las herramientas tiene instrucciones de instalación diferentes. A veces, necesitas descargar fuentes y compilarlas tú mismo, a veces obtienes el binario autónomo, y algunas veces obtienes lo que se llama paquete binario, que generalmente significa un ejecutable comprimido junto con algunos metadatos.

Para facilitar el proceso de instalación de software, los creadores de sistemas operativos llegaron con el concepto de administradores de paquetes. En pocas palabras, un administrador de paquetes es como una tienda de aplicaciones para CLI y aplicaciones de escritorio. Precede a las tiendas de aplicaciones reales por algunas décadas. El problema es que casi todos los sistemas tienen su propio administrador de paquetes. Debian, Ubuntu y las distribuciones derivadas de GNU / Linux usan APT, las distribuciones basadas en Red Hat prefieren yum o DNF, otras distribuciones de Linux tienen medios más exóticos para instalar software y también lo hacen los diferentes clones de BSD. Además de los administradores de paquetes integrados, también hay instalados por el usuario como Chocolatey para MS Windows y Homebrew para Mac OS X/Mac OS. Cuando desee escribir instrucciones sobre cómo instalar su programa, puede terminar escribiendo casos para cada uno de esos sistemas. Parece demasiado, ¿no?

Afortunadamente, el último de los sistemas mencionados, Homebrew, puede ser el más portátil, gracias a Linuxbrew, un puerto de Homebrew para sistemas GNU / Linux. Lo curioso es que incluso funciona en WSL si quieres tener una experiencia de usuario similar en Microsoft Windows. Ten en cuenta que WSL no es oficialmente compatible.

Entonces, además de la portabilidad, ¿qué más puede ofrecer Homebrew? En primer lugar, no interfiere con los paquetes del sistema, por lo que todo lo que instala reside en una capa separada del sistema operativo. Además, no se necesitan permisos de raíz para instalar paquetes. Por lo tanto, puedes tener paquetes de sistema que sean estables y probados, pero al mismo tiempo verifica tus versiones más nuevas sin sacrificar la estabilidad del sistema.

Si querías probar los editores, mencioné anteriormente que todo lo que necesita hacer en un sistema con Homebrew o Linuxbrew es ejecutar este comando:

brew install emacs micro nano vim neovim

La Cosa Brillante

Lo que ya hemos discutido es indudablemente útil para el trabajo. Pero también hay aplicaciones que, aunque no son necesarias, aún brindan comodidad a la vida cotidiana. Puede que no los necesites, pero siempre vale la pena conocerlos.

Filtro interactivo

Buscar el historial de comandos puede ser tedioso. Mientras que bash y zsh tienen teclas Ctrl + R, solo muestra una sustitución a la vez. Además, debe ingresar el texto exacto que utilizó anteriormente. Como esta es una operación bastante común, una vez que comienzas a usar la línea de comando, parece un buen lugar para mejorar.

Filtros interactivos, como fzy, percol, peco o fzf lo ayudan a filtrar largas líneas de texto. Este puede ser el historial de comandos antes mencionado, todas las líneas de código en un directorio de proyectos, o una lista de nombres de archivos generados por find.. La idea general es presentarle primero todas las líneas disponibles y luego confiar en los algoritmos de búsqueda difusa para filtrar todo lo que no coincida.

Por ejemplo, al vincular Ctrl + R a fzf, se muestra una lista de los comandos más recientes, que puede navegar hacia arriba y hacia abajo con flechas, o puede escribir git para mostrar solo los comandos que tienen Git en algún lugar dentro. Personalmente, cuando trabajo con una shell que no tiene un filtro interactivo, de repente me siento un poco perdido. ¡Esta característica es realmente convincente!

Además, puede hacer que tu filtro interactivo esté disponible dentro de tu editor de texto programable. De esta forma, tendrás capacidades de búsqueda unificadas entre tu shell y tu editor.

Este articulo fue tomado de Toptal: https://goo.gl/8gfWFD

Seguir Leyendo

bobj is undefined

bobj is undefined

  14:46:00    Vladimir

---

Hace poco me pidieron instalar una aplicación web en un Windows Server 2012, al tratar de  imprimir el reporte me presentaba el error “JavaScript runtime error: ‘bobj’ is undefined”; buscando por ahí he encontrado algunas soluciones prácticas; yo he utilizado la opcion N° 4 para poder solventar mi problema.
Para corregir estos error las soluciones van en base a la carpeta aspnet_client; puedes ir probando a ver cual de estas soluciones caben en tu problema. Las voy a listar desde la mas facil; hasta la mas “complicada” ya depende como tu lo veas

1. Carpeta aspnet_client

La solución mas facil de todas; verifica que la raíz de tu aplicación se encuentre la carpeta aspnet_client (la raiz es donde tienes el archivo web.config) pégala y vuelve a intentar imprimir el reporte

2. Carpeta crystalreportviewer

En caso de haber realizado el paso anterior y que no haya funcionado puedes probar lo siguiente; revisa los errores que te muestra el explorador (F12 > depurador) ahi te mostrará un mensaje; en mi caso

Me indica la ruta donde debe estar ubicada la carpeta c:\inetpub\wwwroot\aspnet_client\system\_web\4_7_2053, al revisar la ruta el directorio no se encontraba, lo que hice fue hacer una copia de la carpeta 4_0_30319 y renombrarla como 4_7_2053.

3. Dentro de la MasterPage o WebForm

Si despues de los pasos anteriores aun no ha funcionado, prueba con registrar dentro de la MasterPage o WebForm (de acuerdo a tu necesidad) la siguiente linea de código:

<script language="javascript" type="text/javascript" src="/crystalreportviewer13/js/crviewer/crv.js"></script>

Con esto forzamos a que busque en la ruta especificada.

4. Cambio Web Config

Si ya probaste los métodos anteriores y aun asi no funciona; puedes intentar lo siguiente

• Ve a la ruta “C:\inetpub\wwwroot\aspnet_client\system_web\4_0_30319” en el servidor web
• Copia la carpeta “crystalreportviewers13” y pégala dentro de la aplicacion.

Pega el siguiente código dentro del web config

<configSections>
<sectionGroup name=“businessObjects“>
<sectionGroup  name=“crystalReports“>
<section name=“rptBuildProvider” type=“CrystalDecisions.Shared.RptBuildProviderHandler,
CrystalDecisions.Shared, Version=13.0.2000.0, Culture=neutral,PublicKeyToken=692fbea5521e1304,  Custom=null“ />
       <section  name=“crystalReportViewer” type=“System.Configuration.NameValueSectionHandler“ />
</sectionGroup>
</sectionGroup>
</configSections>

<businessObjects>
<crystalReports>
<rptBuildProvider>
<add embedRptInResource=“true“ />
</rptBuildProvider>
<crystalReportViewer>
<add  key=“ResourceUri” value=“~/crystalreportviewers13“ />
</crystalReportViewer>
</crystalReports>
</businessObjects>

Y con esto ya deberías poder ver tus reportes. Nada mas añadir que en algunas ocasiones en el tag “<add  key=“ResourceUri” value=“~/crystalreportviewers13“ />” funciona con ~ o a veces sin ~
Estos son todos los métodos que se puede encontrar rondando por la web.
Créditos:
https://adilmca.wordpress.com/2013/04/08/visual-studio-2012-crystal-report-not-working-on-windows-server-2012-0x800a1391-javascript-runtime-error-bobj-is-undefined/
https://social.msdn.microsoft.com/Forums/en-US/ef56f72b-7ede-47d8-ba9e-9e63b9ac0203/bobj-is-undefined
http://vbpuntonet.blogspot.com/2017/08/error-bobj-no-esta-definido.html
Les dejo el web config de ejemplo https://1drv.ms/u/s!AkIUzZGwM02Jgd9ABgajqbdPLlFi8w

Seguir Leyendo

Crear un CAPTCHA para .NET

Crear un CAPTCHA para .NET

  10:03:00    Vladimir

---

Hola a todos, como el titulo lo dice; el día de hoy voy a mostrarles como añadir un captcha para nuestras aplicaciones en .NET.

¿Que es un CAPTCHA?

“Captcha o CAPTCHA son las siglas de Completely Automated Public Turing test to tell Computers and Humans Apart (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos).¹​ Este test es controlado por una máquina, en lugar de por un humano como en la prueba de Turing. Por ello, consiste en una prueba de Turing inversa.” Wikipedia
Para empezar con este pequeño tutorial voy a crear un nuevo proyecto, el cual va a ser realizado en Visual Studio 2013, voy a iniciar un Nuevo Proyecto > Visual C# > Web > Aplicación web ASP.NET

Se me abrirá una nueva ventana para escoger el tipo de proyeto web que deseo implementar, por el momento y ya que no voy a hacer nada mas, voy a escoger una plantilla de proyecto vacía (Empty).

Opcional

Para darle un toque “bonito” instale Bootstrap en el proyecto desde NuGet, el cual me coloca tres carpetas:

• Content
• fonts
• Script

Formulario Captcha

Ahora si, para lo que estamos aquií; voy a crear un nuevo formulario que tendra por nombre frmCaptcha el cual lo utilizaré en un nuevo formulario al que le pondre frmRegistro donde se realizará la validación.
A continuación les dejo el código que utilicé en frmCaptcha, cabe destacar que en este formulario no se realizó ninguna modificacion en el aspx.
Tambien comentar que hay algunas referencias adicionales que hay que añadir

• System.Drawing
• System.Drawing.Drawing2D
• System.Drawing.Imaging

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Captcha
{
    public partial class frmCaptcha : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Bitmap objBitmap = new Bitmap(130, 80);
            Graphics objGraphics = Graphics.FromImage(objBitmap);
            objGraphics.Clear(Color.White);
            Random objRandom = new Random();
            objGraphics.DrawLine(Pens.Black, objRandom.Next(0, 50), objRandom.Next(10, 30), objRandom.Next(0, 200), objRandom.Next(0, 50));
            objGraphics.DrawRectangle(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(0, 20), objRandom.Next(50, 80), objRandom.Next(0, 20));
            objGraphics.DrawLine(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(10, 50), objRandom.Next(100, 200), objRandom.Next(0, 80));
            Brush objBrush =
                default(Brush);
            //create background style  
            HatchStyle[] aHatchStyles = new HatchStyle[]  
            {  
                HatchStyle.BackwardDiagonal, HatchStyle.Cross, HatchStyle.DashedDownwardDiagonal, HatchStyle.DashedHorizontal, HatchStyle.DashedUpwardDiagonal, HatchStyle.DashedVertical,  
                    HatchStyle.DiagonalBrick, HatchStyle.DiagonalCross, HatchStyle.Divot, HatchStyle.DottedDiamond, HatchStyle.DottedGrid, HatchStyle.ForwardDiagonal, HatchStyle.Horizontal,  
                    HatchStyle.HorizontalBrick, HatchStyle.LargeCheckerBoard, HatchStyle.LargeConfetti, HatchStyle.LargeGrid, HatchStyle.LightDownwardDiagonal, HatchStyle.LightHorizontal  
            };
            //create rectangular area  
            RectangleF oRectangleF = new RectangleF(0, 0, 300, 300);
            objBrush = new HatchBrush(aHatchStyles[objRandom.Next(aHatchStyles.Length - 3)], Color.FromArgb((objRandom.Next(100, 255)), (objRandom.Next(100, 255)), (objRandom.Next(100, 255))), Color.White);
            objGraphics.FillRectangle(objBrush, oRectangleF);
            //Generate the image for captcha  
            string captchaText = string.Format("{0:X}", objRandom.Next(1000000, 9999999));
            //add the captcha value in session  
            Session["CaptchaVerify"] = captchaText;
            Font objFont = new Font("Consolas", 20, FontStyle.Bold);
            //Draw the image for captcha  
            objGraphics.DrawString(captchaText, objFont, Brushes.Black, 20, 20);
            objBitmap.Save(Response.OutputStream, ImageFormat.Gif); 
        }
    }
} 

Ahora una vez realizado el formulario frmCaptcha podemos continuar con el formulario frmRegistro el cual va a contener un control asp:Image donde haremos la llamada a nuestro formulario frmCaptcha.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmRegistro.aspx.cs" Inherits="Captcha.frmRegistro" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Registro Usuario</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server" class="form-horizontal">
        <div>
            <fieldset>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="fa fa-info-circle"></span>&nbsp;Formulario para registro de nuevo usuario</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label">Nombre</label>
                            <div class="col-lg-4">
                                <asp:TextBox ID="txtNombreUsuario" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label">E-mail</label>
                            <div class="col-lg-4">
                                <asp:TextBox ID="txtCorreoUsuario" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label">Usuario</label>
                            <div class="col-lg-4">
                                <asp:TextBox ID="txtLoginUsuario" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label">Password</label>
                            <div class="col-lg-4">
                                <asp:TextBox ID="txtPasswordUsuario" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-4">
                                <asp:Image ID="Image1" runat="server" Height="55px" ImageUrl="~/frmCaptcha.aspx" Width="186px" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label">Codigo Verificacion</label>
                            <div class="col-lg-4">
                                <asp:TextBox ID="txtVerificacionUsuario" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNombre" class="col-lg-2 control-label input-sm text-danger" runat="server" id="mensajeAlerta"></label>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-4">
                                <asp:Button ID="btnRegistro" runat="server" Text="Registrarse" CssClass="btn btn-primary" OnClick="btnRegistro_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</body>
</html>

Ahora no queda mas que realizar la validación en el formulario una vez que el usuario de clic en el botón de registro, yo coloque un label mensajeAlerta en el cual voy a mostrar un mensaje en caso de que sea incorrecta la validación del Captcha.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Captcha
{
    public partial class frmRegistro : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnRegistro_Click(object sender, EventArgs e)
        {
            //Verifico el Captcha
            if (txtVerificacionUsuario.Text == Session["CaptchaVerify"].ToString())
            {
                //En el caso de que sea correcto se puede colocar el código aqui
                //Se puede utilizar un Response.Redirect([url destino])
            }
            else
            {
                this.mensajeAlerta.InnerText = "Por favor ingrese el codigo de verificación";
            }
        }
    }
}

Y aqui para terminar, voy a dejarles el formulario terminado.


Tambien quiero señalar que hay otros Captcha que están listos para usarse, uno de ellos el cual es muy completo es el Captcha de Google el cual tiene información muy detallada acerca de su uso y el cual lo trataré en un futuro.
Adicional a este existen otros como:

• TheCAPTCHA
• Securimage
• ReCAPTCHA
• JCAPTCHA
• 3DCaptcha
• ProtectWebForm.com

Todos estos y muchos mas documentados en este link
Para terminar nada mas acotar que este pequeño tuto fue tomado de http://programacion.net/articulo/como_crear_un_captcha_con_una_aplicacion_asp_net_1695 pero con un pequeño toque de mi autoría.

Seguir Leyendo