Pruebas móviles: interfaz de usuario

Suponga que estamos usando una aplicación móvil y, curiosamente, experimenta la siguiente situación:

  • Falta la alineación del botón.
  • El texto se está recortando.
  • El control del calendario se está recortando.

De hecho, esta es una experiencia desagradable para cualquiera de los usuarios. Para asegurarnos de brindar una excelente experiencia a nuestros usuarios, se recomienda encarecidamente la prueba de interfaz de usuario móvil.

La primera área para explorar en su plan de prueba es la interfaz de usuario. Es su trabajo como evaluador confirmar que su aplicación cumple con ciertas expectativas, tales como:

  • Esquema de color general / tema del dispositivo
  • Estilo y color de los iconos
  • Indicadores de progreso cuando se cargan las páginas
  • Menús y cómo se invocan y los elementos típicos que contienen
  • Capacidad de respuesta general de las aplicaciones en este dispositivo

Analicemos más sobre los conceptos básicos de las pruebas de interfaz de usuario móviles.

Orientación / resolución de pantalla

El contenido web debe verse y sentirse bien en una amplia variedad de dispositivos y condiciones de red. Por lo general, es una buena idea probar su página web con las resoluciones de pantalla de uso común para que pueda estar seguro de que su página es utilizable.

Si tiene un diseño de varias columnas, es posible que también desee verificar que sus columnas se alineen correctamente y aún se puedan ver cuando su visitante tiene una resolución más baja. También es importante conocer las resoluciones de pantalla estándar:

  • 640 × 480
  • 800 × 600
  • 1024 × 768
  • 1280 × 800
  • 1366 × 768
  • 1400 × 900
  • 1680 × 1050

Herramientas disponibles

Hay bastantes herramientas disponibles en el mercado para hacer que las pruebas de IU móviles sean más fluidas y sencillas. Por ejemplo

  • Extensión de Google Chrome
  • Screenfly
  • Pila de navegador

Entendamos un poco más sobre estas herramientas y su utilidad.

Extensión de Google Chrome

Es una función gratuita disponible con el navegador web Google Chrome. Aquí hemos dado una explicación paso a paso de cómo probar la web móvil con la extensión de Google Chrome:

Step 1 - Abra el sitio web que se está probando en el "navegador web Google Chrome".

Step 2- Presione F12. Abrirá la ventana de la herramienta del desarrollador, como se muestra en la siguiente captura de pantalla.

Step 3- Haga clic en el icono similar al dispositivo móvil. Consulte la siguiente captura de pantalla.

Step 4- Seleccione el dispositivo móvil con el que desea probar el sitio web. Puede elegir los diferentes dispositivos disponibles para realizar la verificación de la interfaz de usuario.

Screenfly

Screenfly es una herramienta gratuita y fácil de usar. Para usar esto, solo necesita escribir Quirktools en su navegador web. Verá la siguiente pantalla.

Ingrese al sitio web bajo prueba y haga clic en Go. Seleccione el dispositivo móvil en el que desea ver el sitio web.

BrowserStack

Es otra gran herramienta para realizar pruebas de interfaz de usuario móvil. Proporciona resultados maravillosos. Aunque es una herramienta de pago, puede aprovechar una ruta gratuita registrándose en BrowserStack con una dirección de correo electrónico válida.

Pantallas táctiles

Pantallas multitáctiles frente a pantallas de un solo toque

Si su dispositivo y aplicación admiten funciones multitáctiles, como el efecto de pellizcar para hacer zoom en el iPhone, asegúrese de incluir muchos casos de prueba que impliquen tocar la pantalla en más de un lugar simultáneamente, especialmente mientras se escribe en el teclado virtual.

Toque largo vs toque corto

Si bien no existe el concepto de un doble clic en dispositivos de pantalla táctil (aunque podría haberlo, si se implementa específicamente en su aplicación), algunos dispositivos, como los teléfonos inteligentes Android, distinguen entre toques largos y toques cortos. Al presionar y mantener presionado un elemento, aparecerá un menú contextual en el medio de la pantalla, mientras que al hacer clic corto en el mismo elemento, se realizará automáticamente la primera acción en ese menú contextual.

Tamaño y posición del botón

Asegúrese de que los botones e íconos sean lo suficientemente grandes y lo suficientemente alejados de los bordes de la pantalla para que un dedo grande pueda hacer clic en ellos fácilmente.

Teclas blandas y duras

Teclados blandos

A menudo, hay varios casos especiales y casos de esquina que son importantes para los usuarios finales.

  • ¿Aparece automáticamente el teclado virtual si la acción principal del usuario es ingresar algún texto?

  • ¿La primera capa del teclado virtual incluye las teclas de método abreviado "@" y ".com" si el campo resaltado es para ingresar direcciones de correo electrónico?

  • ¿Se puede descartar el teclado virtual y volver a mostrarlo fácilmente?

  • ¿Se pueden utilizar indistintamente los teclados duro y blando (si el dispositivo tiene ambos)?

Teclas duras

Asegúrese de incluir muchas pruebas sobre el uso de las teclas físicas disponibles del dispositivo, como Inicio, Inicio, Menú y Atrás. Todos estos deberían interactuar con su aplicación de manera similar a como interactúan con las aplicaciones nativas del dispositivo.

Trackballs, ruedas de seguimiento y paneles táctiles

Si su dispositivo no tiene una pantalla táctil, es aún más importante verificar que la navegación por la pantalla sea lo más sencilla posible para el usuario. En estos casos, el usuario puede confiar en una bola de seguimiento, una rueda de seguimiento o un panel táctil para moverse de un objeto a otro.