miércoles, 14 de febrero de 2018

La Guía Fundamental Para La Usabilidad Móvil

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.
Herman Miller encarna la silla. El diseño industrial se encuentra con el diseño móvil
¿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 actualice sus hallazgos iniciales, señale nuevos aprendizajes clave, y suplique 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 zona de deslizamiento del pulgar en los dispositivos móviles que afecta la usabilidad del móvil
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).
Formas usuarios mantienen sus teléfonos móviles afectan a la usabilidad
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.
Mapa de calor que muestra el patrón de la F-investigación de usabilidad
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.
El objetivo del área de visualización principal del centro de una pantalla aumenta la usabilidad del móvil
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.
Dispositivos móviles: la forma típica en que un usuario tiene una tableta
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. (deDesigning 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 sobre la usabilidad es clave para entender a los usuarios
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.
Conocer el contexto en el que las personas usan dispositivos es importante para la usabilidad del dispositivo móvil
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.
El diseño receptivo juega un papel importante en la usabilidad del móvil
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.
Priorizar el contenido para el diseño de ux móvil
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.
Usabilidad móvil para tabletas: mueva la navegación hacia el lado 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.
El tamaño del objetivo táctil es importante para la usabilidad del móvil
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.

6. Eco gestos y movimientos del mundo real

Permite a los usuarios deslizar, voltear y pellizcar con microinteracciones apropiadas, pero presta atención a las leyes de la física, o más específicamente a las leyes del movimiento. Ten en cuenta que la respuesta del diseño debe tener sentido según la acción que realice el usuario.
Por ejemplo, si un usuario simplemente desliza una tarjeta en la pantalla, el movimiento de la tarjeta que se mueve fuera de la pantalla debería parecer proporcional a la fuerza aplicada, lo que significa que probablemente no debería deslizarse lentamente o volar demasiado rápido.
Pantalla móvil con acción de deslizar
Las pantallas deslizan y desplazan en función de los gestos realizados por el usuario. (Diseño de John Francis )
Las microinteracciones en dispositivos móviles ayudan a darle vida a la aplicación y le brindan un contexto adicional basado en el tacto. Para obtener más información sobre cómo mejorar las experiencias con microinteracciones, lea el artículo del diseñador Ondřej Dostál, Better UX Through Microinteractions.
Punto clave: los gestos y las interacciones hacen que una UI móvil se sienta más natural para el tacto, pero no se exceda.

7. Usa la divulgación progresiva

Esto significa brindar al usuario el contenido correcto, así como la cantidad correcta de contenido, en el momento adecuado y las posibilidades de obtener más cuando lo necesiten.
En la práctica, eso significa que los diseñadores deben evitar bombardear al usuario con todo el contenido a la vez, pero al mismo tiempo, la información más importante no debe esconderse detrás de la navegación. Asegúrese de que las necesidades principales del usuario se encuentran con el contenido principal revelado, y luego agregue controles para permitir al usuario profundizar más si así lo desea.
La aplicación Fresh Air maneja la divulgación progresiva de forma elegante e intuitiva al solo mostrar la temperatura y la precipitación actuales en su pantalla principal, y luego permite al usuario desplazarse horizontalmente (usando gestos y acciones relevantes) ) para información meteorológica hora por hora.

La aplicación Fresh Air utiliza la divulgación progresiva para ofrecer primero a los usuarios el contenido más importante. (De Fresh Air)
Punto clave: muestra solo lo que más le importa a los usuarios y asígnales los controles que necesitan para encontrar el resto a medida que lo requieran.

Poniendo todo junto

El diseño móvil es más amplio y más complicado que una pantalla o un dispositivo, y las experiencias móviles no son universales. Al seguir algunos principios generales de usabilidad y pensar un poco como un diseñador industrial, los diseñadores móviles pueden cumplir con los estándares ergonómicos básicos y hacer que la experiencia móvil sea cómoda y agradable para los usuarios, sin importar qué dispositivo usen o dónde lo estén usando.

Referencias y lecturas adicionales

A continuación encontrará una lista de las fuentes utilizadas en este artículo y recomendaciones para lecturas adicionales para obtener más información sobre cómo mejorar la usabilidad móvil.
Los artículos de Stephen Hoober sobre UX Matters cubren una amplia gama de la investigación y la ciencia detrás del diseño para la usabilidad móvil:
Para una visión en profundidad de la usabilidad móvil y el diseño para varios tipos de pantalla, lee el libro de Josh Clark, Designing for Touch, así como una descripción general de su presentación Un evento aparte: Diseñando para tocar.
The Scientific World Journal publicó un artículo de investigación, Evaluación heurística sobre interfaces móviles: una nueva lista de verificación, con un PDF muy detallado de dispositivos móviles directrices específicas basadas en 10 heurísticas de usabilidad para diseño de interfaz de usuario de Jakob Nielsen.
Este articulo fue escrito por Christine Esoldo. Originalmente publicado en Toptal.

jueves, 8 de febrero de 2018

Comercio Electrónico UX para la Experiencia Móvil

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 compras de comercio electrónico móvil
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%.
flujo de aplicación en comercio electrónico móvil
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.
página móvil del producto comercio electrónico ux
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 en la compañía del 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 un obstáculo principal 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.
función de guardado del carrito de compras en comercio electrónico móvil ux
Carritos de compra "Guardables" en las aplicaciones Nordstrom yOverstock.
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.
Formularios de registro ux de comercio electrónico móvil
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.
búsqueda sugestiva de comercio electrónico móvil ux
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.
Microinteracciones de comercio electrónico ux
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 comportamientoque debe guiar el diseño de UX móvil.
Diseño orientado al pulgar de comercio electrónico móvil ux
¿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.
proporcionar una sensación de seguridad en el comercio electrónico móvil con insignias de confianza
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 de comercio electrónico móvil ux
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 de comercio electrónico móvil
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 de pago de comercio electrónico móvil ux
Flujos en el proceso de compra delas aplicaciones móviles de Etsy yAnn 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.
Flujo de salida de comercio electrónico móvil ux
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.
Experiencia de compra de comercio electrónico móvil ux
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

Este articulo fue escrito por Stelian Subotin. Originalmente publicado en Toptal.