El 30% de todas las compras en línea ahora sucede en los teléfonos móviles. Y cuando se trata de compras, los usuarios quieren experiencias de los recientes móviles. Por lo tanto, es simplemente esencial para ayudar a que los usuarios progresen a través de cada etapa de este proceso con el mínimo esfuerzo.

No hay una sección en la aplicación móvil que sea más crítica para la conversión de la pantalla del producto, ya que los clientes necesitan información adecuada acerca de un producto antes de que lo compren en línea. En este artículo voy a hablar de las pantallas de productos y destacar algunos elementos importantes de cada pantalla del producto - imágenes del producto, descripción y del botón de acción "añadir al carrito".

¿Qué es una pantalla de producto?

Las pantallas de los productos son en donde los usuarios toman decisiones clave de conversión, tales como: agregar a la canasta, añadir a la lista, hacer una reserva, un “llame ahora”, completar un formulario, etc. Las páginas de productos eficaces utilizan una combinación de texto e imágenes para mostrar información sobre los productos, disponibilidad, precio y una forma clara de comprar el artículo.

Imágenes de los productos

Las imágenes de los productos venden el artículo. Como se suele decir, una imagen vale más que mil palabras. Independientemente de su producto, ya sea audífonos o juguetes, el que sea el elemento más importante en la página. Las imágenes pueden ser una poderosa manera de captar la atención de los usuarios y diferenciar a que su producto sea un tanto emocional.

Utilice la imagen héroe y colóquela encima de la tapa

Una buena imagen “héroe” hace todo el trabajo duro por usted. La imagen principal del producto debe estar por encima de la tapa con el fin de ofertar su mercancía con prioridad. No haga que los usuarios se desplacen con el fin de ver la imagen “héroe” para ver un producto.

Proporcionar una galería de imágenes

Las imágenes se utilizan para conseguir una sensación para que de alguna manera el producto se vea mejor. Por lo tanto, mientras más productos tengan imágenes mostradas en la pantalla será mucho mejor:

- Es importante mostrar todos los lados del producto.

- Los usuarios confían a menudo que la imagen del producto evalué sus características. Debe proporcionar imágenes que muestren los detalles y características. Por ejemplo, si usted está vendiendo un receptor de audio, las imágenes expuestas deben mostrar los puertos de entrada y salida en la parte posterior para ayudar a que el usuario entienda esas características.

- Para optimizar el uso de la galería de fotos, se deben tener las imágenes de uso asociados con los detalles de los productos destacados en la descripción del producto.

Posición horizontal para las imágenes de producto

Los usuarios deben ser capaces de pasar con el dedo rápidamente desde la pantalla a través de los artículos de las imágenes puestas horizontalmente, y no tener que desplazarse hacia abajo para ver una serie de imágenes.

Tenga solamente activos de alta calidad

Debe proporcionar imágenes únicas de alta calidad de los productos, vídeos y otros activos con el fin de captar la atención de los usuarios desde la aplicación. Asegúrese de que sus imágenes sean del tamaño adecuado para las pantallas y en todas las plataformas:

Para los activos gráficos de Android, estos deben ser XHDPI (o XXHDPI)

iOS recomienda que proporcionen activos 3x @ para el iPhone 6 Plus y activos @ 2x para todos los demás dispositivos IOS de alta resolución.

Los activos no deben aparecer pixelados

Los usuarios deben poder hacer zoom fácilmente en una imagen del producto para inspeccionar con más detalle, haciendo doble clic o seleccionando un botón de zoom. Esto es especialmente importante para las tiendas de ropa donde los consumidores están más preocupados por los detalles. Las imágenes con zoom-in también necesitan mantener en alta calidad.

Descripción del producto

La descripción del producto debe cubrir lo que hace el producto, la forma en que haga que la sensación del usuario sea atrayente para el producto que busca y cómo este va a hacer mejor para la vida del usuario. Este debe ser fácil para obtener una visión general y de búsqueda (encontrar una información específica).

El éxito de los productos que se venden vía online

Uso claro formato

La descripción del producto debe tener un formato claro, como el n formato de una lista o la presentación con un bulletpoint, para que sea fácil de captar en una lectura visual rápida. Las características clave del producto debe estar enfocada para animar a los usuarios a que estos añadan los productos a la cesta.

Texto de fácil lectura

El tamaño y el diseño de su texto pueden tener un impacto enorme en la experiencia de leer algo en la pantalla. Se espera que el usuario pase mucho más tiempo procesando el texto más pequeño. Como resultado, los usuarios están dejando a la mayor parte de la información. Ya sea que usted este haciendo un diseño, tenga en cuenta de hacer el trabajo de esta manera:

Tamaño de fuente - Para que el texto sea legible, siempre se debe utilizar un tamaño de fuente que sea igual o superior a 11 puntos (incluso cuando los usuarios seleccionan un tamaño pequeño de texto); y el tipo de letra utilizado en toda la aplicación debe ser coherente. Una buena regla general es utilizar 30-40 caracteres por línea en los dispositivos móviles.

Contraste - Asegúrese de haya suficiente contraste perceptible entre el contenido de la aplicación y el fondo, especialmente cuando se utiliza fuera de la luz solar. WC3 (revisión del código web) de las Directrices de Accesibilidad para el Contenido Web establecer normas mínimas para el contraste para que los usuarios con moderadamente baja visión pueden leer su copia. De acuerdo con la WC3, la relación de contraste entre un color y sus rangos de fondo se basan en su luminancia de 1-21, o la intensidad de la luz emitida.

Espaciado - Cuando se trata de pantallas pequeñas, el espacio es una consideración clave. Una buena separación ayuda a la legibilidad. No deje que superposición de texto. Mejore la legibilidad mediante el incremento de la altura de la línea o el espaciado entre caracteres.

Llamado para la acción del botón

Los usuarios no deberían tener que buscar llamada a la acción - la cuenta primaria (por ejemplo, "Añadir a la cesta", "Reservar") debe ser el más prominente con el botón en la pantalla, y los ojos de los usuarios, naturalmente, deben ser atraídos hacia él. Las cuentas secundarias (por ejemplo, "Compartir", "Añadir a la lista de favoritos") debe estar en estrecha proximidad a la cuenta primaria.

Prueba para una cuenta primaria

Utilice el test de estrabismo para ver cuán prominente es el botón. Basta con el estrabismo y desdibujar la página. ¿Qué significa el botón más que cualquier otro elemento? Si la respuesta es no, entonces hará que se destaque, dándole un color único, no lo utilice en ningún otro sitio en la página o que sea más grande y más audaz que el texto.

Botón de acción primaria es pegajoso

Es una buena práctica tener un botón de llamada a la acción por encima del pliegue. Se debe diseñar el botón principal de llamada a la acción para ser persistentemente visible incluso cuando se desplace el usuario en la pantalla, haga que este se adjunte en la parte inferior de la pantalla. Esto hará que sea posible a los usuarios para que actúen en cualquier momento dado.

Que los controles más usados sean lo suficientemente grandes

Que sea fácil para los usuarios interactuar con los controles haciendo que estos sean fácilmente usados y controlados con un solo toque.

Android - recomienda controles tengan un toque de destino al tamaño de 48dp para los elementos en pantalla, como botones, iconos, pestañas con iconos, etc.

IOS - recomienda controles sangrables que tengan un objetivo de toque en pantalla en unos 44 x 44 puntos.

Proporcione comentarios visuales después de una acción primaria

Cuando los usuarios agregan un elemento al carrito, la falta de retroalimentación puede hacer que se pregunten si la acción ha sido procesada.

La retroalimentación reconoce las acciones de las personas. Las aplicaciones que proporcionan una sutil animación u otro tipo de retroalimentación visual, eliminan estas conjeturas para el usuario.

Sobre el autor: Nick Babich es un desarrollador de software y autor de un blog dedicado a la usabilidad.

"Y... no olvide de usar iconos en su proyecto de diseño".