Cómo probar su sitio web de WordPress para obtener problemas de uso móvil

Hace casi dos años, escribí una publicación sobre los aspectos clave del diseño de la experiencia del usuario que debe concentrarse al diseñar para dispositivos móviles. Esa publicación ha identificado cuatro prioridades móviles UX: áreas táctiles, navegación, formularios e interacciones. Han pasado dos años desde entonces y las cosas se han mudado al mundo del desarrollo web. Aunque afirmaría que se han movido mucho más lento en el desarrollo móvil en los últimos dos años que en los dos años anteriores a la publicación. Aunque el iPhone ha estado en 2007 y Android desde 2008, los desarrolladores web no han involucrado realmente con el diseño móvil y móvil durante varios años. Apple ha insistido durante años que los sitios web funcionan bien en su condición de escritorio, incluso cuando se han reducido para que se ajusten en pequeños navegadores y duraron algo de tiempo para que los interrogatorios de los medios se utilicen en la mayoría de los sitios web de láminas de estilo. Al principio, se centró en la apariencia y en cómo se veía el sitio, pero luego llegó el uso. Comenzamos a darnos cuenta de que usar un sitio web en un dispositivo portátil es una experiencia diferente al usar una computadora portátil o escritorio de computadora y desarrollamos cómo diseñamos y desarrollamos para dispositivos móviles.
Entonces, diría que las prioridades de UX para el móvil que enumeré en mi última publicación no han cambiado mucho en los últimos dos años. Sin embargo, agregaré otra prioridad: la velocidad. Un sitio que no cobra rápidamente no será agradable de visitar y hará que muchas personas lo abandonen antes de que aparezca la pantalla inicial. Muchos dispositivos móviles tienen conexiones a Internet más rápidas ahora que sus homólogos de escritorio; A menudo detengo mi wifi cuando trato de conectarme a un servicio público lento y uso 4G en su lugar. Si alguna vez ha intentado usar el wifi en un tren, sabrá de lo que estoy hablando. Pero aún tiene que probar el rendimiento de su sitio en su escritorio y móvil. En esta publicación, veré cómo puede probar su sitio en función de esos criterios. Identificaré algunas de las herramientas que puede usar para probar su sitio móvil y emular dispositivos móviles a los que puede no tener acceso. Los dispositivos móviles prueban el primer método de prueba obvio es el uso de un dispositivo móvil. Pocos de nosotros podemos permitirnos tener un stock totalmente representativo, pero es lógico tener una o dos para probar cosas. El uso de un iPhone reciente y un dispositivo Android cubrirá la mayor parte del uso móvil y siempre agregará más a su prueba que solo el uso de un emulador o simulador.
Si sostiene un dispositivo que ejecuta su sitio en su mano, le permite experimentar el uso de ese sitio más profundo que su vista en una pantalla. Te ayuda a probar interacciones, animaciones y velocidad. Independientemente de otras herramientas que use, siempre comenzaría con un dispositivo móvil. Las cosas que mejor puede probar en un dispositivo móvil son: las áreas tocadas navegan a través de su sitio e interactúan con todos los botones, enlaces y menús usando sus dedos o dedos grandes. Pruébelo con otros usuarios (¡tal vez personas con manos grandes!). Las áreas palpables deben tener al menos 44 píxeles cuadrados y también deben ser fáciles de identificar.
La navegación, desde que escribí mi última publicación sobre UX Mobile, los menús de hamburguesas se han vuelto cada vez más extendidos en los sitios móviles. En un dispositivo, puede verificar si alguna animación funciona sin problemas y si el icono del menú es fácil de tocar con el dedo o el pulgar.
Formularios: completar los formularios es, sin duda, una de las cosas menos amigables que puede hacer en el móvil. Al probar formularios en un dispositivo móvil, podrá verificar si sus formularios funcionan bien con la finalización automática y que cualquier desplazamiento que necesite obtener entre el campo. .
Interacciones: verifique si los enlaces son fáciles de alcanzar con el dedo o el pulgar, si algún proceso que se ejecuta durante las interacciones no tiene problemas y que los usuarios reciben información sobre lo que está sucediendo. Si su sitio interactúa con aplicaciones de terceros (por ejemplo, YouTube), puede probar si la aplicación correcta se abre de su sitio utilizando un dispositivo con esa aplicación instalada. Vite-tre para ejecutar su sitio en uno o más dispositivos móviles a través de 4G y wifi y también por 3g. Vale la pena mantener los dispositivos más antiguos para que pueda probarlos, no todos sus visitantes (de hecho, no muchos de ellos) tendrán el último dispositivo.
Probar sitios de desarrollo en un dispositivo móvil Uno de los desafíos cuando se trata de pruebas de UX móviles es acceder a la copia de desarrollo local de un sitio en un dispositivo móvil. Después de todo, no puede ejecutar MAMP en un teléfono móvil.
Pero hay una manera de evitar esto. Puede acceder al servidor local a través del dispositivo móvil, siempre que esté en la misma red que el escritorio. Para un sitio de WordPress, necesita una configuración adicional, pero significa que puede acceder directamente al sitio en localhost. Si no desea pasar por todo esto para una prueba rápida, otra opción es crear una versión de puesta en escena de su sitio en el servidor. De esta manera, puede probar en un dispositivo móvil y obtener el beneficio de las pruebas (en dispositivos móviles y de escritorio) en el mismo entorno en el que el sitio se encontrará cuando esté disponible.
Una vez que haya configurado esta configuración, puede probar las áreas táctiles de su sitio, navegar, forma, interacciones y velocidad como se indicó anteriormente, y, utilizando un sitio de preparación, obtenga una prueba de velocidad mucho más precisa. Usar las herramientas de desarrolladores de su navegador para probar su sitio móvil, otra opción, que uso a medida que desarrollaré y antes de que esté listo para probar en un dispositivo real, es usar las herramientas proporcionadas en el navegador. Cambiar dispositivos en Chrome en Google Chrome, puede ver el sitio como se vería en una serie de dispositivos Android, activando y desactivando la visualización móvil. Haga clic derecho en su página, seleccione Inspeccionar en el menú, luego haga clic en el icono de conmutación de conmutación de la ventana Inspector: luego le brinda una vista de su sitio en un dispositivo móvil. Seleccione el menú desplegable Responsivo en la parte superior de la pantalla y luego elija entre los dispositivos disponibles:
Esto significa que puede ver cómo funciona su sitio y probar la experiencia del usuario en una amplia gama de dispositivos sin tener que poseerlos todos.
El modo de diseño receptivo de Safari Safari también tiene la opción de ver su sitio, ya que se vería en un iPhone o iPad. Desarrollo de acceso> Ingrese el modo de diseño receptivo y se le ofrecerá una serie de opciones. Puede seleccionar diferentes dispositivos Apple y ver cómo se ve su sitio:
Esta es una forma útil de ver cómo se ve su sitio en iPhones más antiguos y más nuevos, así como en iPads. ¿Qué puedes probar en un navegador? Entonces, con estas herramientas, puede probar muchos aspectos de su UX móvil, pero algunas cosas simplemente no son las mismas: áreas tangibles: no puede hacer mucho aquí que verificar si sus áreas palpables no se encogen misteriosamente En diferentes tamaños de pantalla que no tendrías acceso.

Navegación: puede verificar si sus áreas de navegación se muestran según lo desee en una variedad de dispositivos y tamaños de pantalla.

Los formularios que completan los formularios serán más fácil como usted en un escritorio, por lo que el UX no se puede probar de esta manera, pero puede verificar si todo está en el lugar correcto y no está interrumpido.

Interacciones: puede probar cualquier animación o proceso y verificar que funcione en una variedad de tamaños de pantalla, pero tenga cuidado de que la forma en que los administran esos dispositivos solo se pueden probar en el dispositivo.

Speed-Si su sitio contiene contenido diferente en el móvil, puede ejecutar un verificador de velocidad para comparar, pero tenga cuidado de que no sea realmente representativo en el escritorio.
Sin embargo, hay una manera de acercarse a la experiencia del dispositivo móvil en el escritorio. Eso es usar un emulador.
El uso de dispositivos móviles emuladores de un emulador o simulador le dará un equilibrio entre el uso de un dispositivo real y las pruebas en el navegador de escritorio. Están diseñados para darle algo más cercano a la experiencia de prueba del dispositivo sin tener que mantener uno. La diferencia entre un emulador y un simulador es que un emulador utiliza el sistema básico para emular todos los aspectos de lo que prueba. Un simulador no desciende tan profundo y solo simulará la experiencia móvil. Encontré una gran analogía en Stackoverflow: “Si un simulador de vuelo pudiera transportarlo de A a B, entonces sería un simulador de vuelo”. Android Emulator Android emulará su experiencia de navegación en su sitio en una amplia variedad de dispositivos Android. Para instalarlo, necesitará Android Studio SDK. Tenga en cuenta que estas herramientas son gratuitas. No entraré en detalles sobre su configuración aquí, porque es un proceso bastante largo, que cambia con las nuevas versiones, pero puede obtener instrucciones completas en el sitio web de Android Emulator.
El emulador de iOS como Google para Android, Apple tiene un simulador para el sistema operativo iOS que se ejecuta en iPhone y iPad. Para usarlo, necesitará Xcode, que incluye la aplicación del simulador. Está diseñado para pruebas de aplicación, pero también se puede usar para ejecutar Safari y probar su sitio.
Emulador Opera El navegador Mobile Opera se usa en más teléfonos de los que cabría esperar.Su navegador clásico funciona en teléfonos más antiguos y a menudo es el mejor navegador disponible para ellos.Como desarrolladores web, tendemos a asumir que todos tienen la última tecnología móvil, pero no el caso.Si su sitio tendrá mucho tráfico de partes del mundo donde el uso del teléfono inteligente es más pequeño o de secciones de la población que prefieren teléfonos más simples, entonces vale la pena probarlo en el trabajo.El emulador móvil lo opera para probar su sitio en el navegador de ópera en una variedad de dispositivos.Es el más fácil de usar de todos los emuladores, que es una de las razones por las que me encanta.
¿Qué puedes probar con un emulador? El uso de un emulador o simulador de escritorio no agrega una gran cantidad a la experiencia de prueba con las herramientas del navegador, porque aún puede sostener su sitio en su mano y no puede probar cosas como áreas palpables. Sin embargo, es un paso antes de los instrumentos del navegador cuando se trata de probar interacciones y animaciones, ya que se ejecutarán en el entorno móvil y no en el escritorio. Entonces, si su sitio contiene el código que se ejecutará de manera diferente en el móvil, vale la pena usar estas herramientas. Y si tiene un número significativo de visitantes que usan teléfonos más antiguos o básicos, entonces el uso del emulador móvil es una buena idea. Recuerde probar su sitio para UX Mobil si es como yo, hará su desarrollo en un automóvil de escritorio (o computadora portátil). Le brinda acceso a múltiples herramientas, editores de código y una instalación local con MAMP. Pero antes de iniciar su sitio, no debe olvidar probarlo en al menos un dispositivo móvil, para verificar si la experiencia del usuario es fluida y agradable. Los dispositivos móviles tienen diferentes desafíos de UX que no siempre puede probar en un navegador de escritorio. No podrá comprar todos los dispositivos que sus visitantes potenciales podrían usar, por lo que, además de usar uno o dos dispositivos físicos, puede usar las herramientas que identificamos anteriormente para probar en una amplia gama de medio y para asegurarse de que las personas Visite su sitio en cualquier dispositivo tendrá una gran experiencia. ¡Como la conversación! ¿Qué herramientas considera útiles al probar la experiencia móvil de WordPress?
Etiquetas:
móvil
receptivo

medio de prueba