Con Device Mode ponte en el lugar de los usuarios de dispositivos móviles y mejora su experiencia

Peter Nybro Pfeifer Enero de 2019 Móvil, Experiencia de Usuario y Diseño

Descubre cómo con Device Mode, una opción ofrecida por el navegador Chrome, podrás comprobar de primera mano cómo ven los usuarios de dispositivos móviles tu sitio web. Ponte en su lugar y descubre de forma rápida y sencilla cómo se comporta tu sitio según el móvil o tablet que usen.

As a marketing professional, business owner or optimizer, it's easy to fall into the trap of viewing your website only from your laptop or desktop computer. However, we must bear in mind that many of the users access your site from their smartphones and tablets on the way to work, back home, while they make a coffee or watch television. 

In fact, approximately half of all website traffic comes from mobile devices. 1 Currently, in Spain , 40% of transactions occur in this type of device. 2 and in  Western Europe it is around  40% 3.

It is likely that the way you see and test the operation of your website does not fit the reality, but it can be very cumbersome to test on several mobile devices.

What would be the solution?

Test Device Mode of Google Chrome 

With Chrome's Device Mode you can see and use your website on the mobile screen you want. You can also adjust it to the exact device that your clients are using (see Audiences / Mobile / Devices in Google Analytics).

With Device Mode you can also try the horizontal view and add the frame of the device to have a clearer idea of ​​how each user sees your website. You can also simulate fast or slow networks, or devices with lower performance CPUs to see how this might affect loading times.

At the end of the day, a single second of delay in the loading times of mobile devices has an impact of up to 20% on conversions. 4

UXGIF

How to activate Device Mode

Step 1:
Open your website in Chrome. 

Step 2:
Right-click anywhere on the screen and in the context menu, select "Inspect".

Step 3:
Click on the devices icon. (top of all to the left)

Paso 4:
En la barra de menú, haz clic en "Responsive" (adaptable) y selecciona el dispositivo para el que quieras optimizar tu sitio web. También puedes arrastrar los puntos de dirección para personalizar el tamaño de la pantalla. 

Qué puedes hacer en Device Mode

Cuando hayas activado Device Mode, podrás comprobar la apariencia y el funcionamiento de tu sitio web en varios dispositivos. Por ejemplo, es posible que veas que algunas páginas tienen demasiado texto, que los títulos son muy largos o que los usuarios tienen que ampliar o reducir la pantalla para leer el texto de los botones.

Comprueba que tu contenido más importante y las CTA están en la mitad superior de la página. Si los usuarios tienen que desplazarse para dar con el contenido interesante o hacer una compra, quizás deberías mover un poco el contenido hacia arriba.

TWG_First_steps_in_mobile_UX

Device Mode: merece la pena

Es muy útil comprobar el aspecto de tu sitio web y cómo funciona en realidad, y hacer las mejoras que sean necesarias. Por ejemplo, solo en los EE. UU., el 79 % de los usuarios afirma que es más probable que vuelva a visitar o comparta un sitio web móvil si es fácil de usar. 

Más del 90 % de los compradores B2B que han tenido una experiencia de compra positiva en el móvil afirma que es probable que repita con el mismo proveedor, frente a solo un 50 % de los usuarios que han tenido una experiencia de compra insatisfactoria en su dispositivo móvil.

Do not forget to visit your website with Device Mode every time you make a change or modify your design. It is also good to try it after the launch of new mobile devices to make sure you are up to date.

Los ingresos de Szkla procedentes del móvil se disparan un 60% interanual gracias a las mejoras de usabilidad