domingo, 4 de mayo de 2014

Usabilidad para tu web desde iPad

La usabilidad de un sitio web es un punto muy importante para tener en cuenta si quieres que tu web sea exitosa. Actualmente, el uso de dispositivos móviles crece exponencialmente. Muchas personas consideran más fácil y cómodo acceder a Internet desde sus celulares, tabletas o iPads. A continuación podrás encontrar recomendaciones para que tu sitio sea más usable cuando los usuarios accedan al mismo de un dispositivo iPad.

1. Incluye un “favicon” específico para el iPad

Cuando visualizas una página web con el iPad tienes la opción de “Añadir a la página de inicio”.  Esta opción crea un acceso directo en el escritorio cuyo ícono es una zona de la web y resulta poco reconocible. Para evitar esto, puedes personalizar el ícono de tu sitio. La imagen debe ser de 72x72 (también puede ser 57X57, propio del iPhone, pero la resolución será menor). En el siguiente ejemplo se muestra el escritorio con dos enlaces sin favicon personalizado (seleccionados en rojo), y un favicon de acceso directo personalizado (seleccionado en verde).

2. No utilices Flash

Desde el iPad, de forma estándar, no se puede visualizar Flash ni se puede descargar el plugin para visualizarlo. De hecho, Adobe anunció que abandona Flash para dispositivos móviles. Recordemos que dar una alternativa a Flash es un requerimiento de las WCAG 1.0, por tanto, si tu web fuera accesible también lo sería en un iPad.
3. Comprueba que los campos del formulario capten el foco y lo hagan en un orden lógico
Cuando seleccionas un campo de texto se muestra el teclado de pantalla del iPad. Sobre este teclado aparecen dos enlaces “Anterior” y “Siguiente”. Mediante estos enlaces el usuario se mueve a los campos siguientes y anteriores.

El elemento con foco es el elemento que actualmente recibe los eventos de entrada. Si hay cuatro campos de texto en una ventana, el que tiene el foco es en el que el usuario puede introducir texto, en la imagen es el primer campo. Asegúrate de que todos los campos capten el foco y que sigan el correcto orden, ya que para lo usuarios es molesto tener que volver a la pantalla para seleccionar un campo que no toma el foco. Este es también un requerimiento de las WCAG, por tanto, volvemos a ver que si tu web es accesible también será más fácil de usar en el iPad.
4. Ayuda al usuario a rellenar los campos del formulario: indica el tipo de campo
Al rellenar formularios con el iPad es molesto que no reconozca el tipo de dato que se pide y, en función del mismo, muestre la versión del teclado adecuada. Sin embargo hay una manera de hacerlo:
Campo texto: <input type="text" /> 
Campo url: <input type="url" /> 
Campo numérico: <input type="number" /> 
Campo email: <input type="email" />
Los navegadores que no soportan HTML5 lo obviarán y los tratarán como campos de tipo texto (type="text").
5. Recuerda que no tienes mouse
Comprueba que tus eventos de mouse funcionan en la pantalla táctil.
6. Recuerda que se navega con el dedo
La zona de la yema con la que pulso mide más o menos 1cm x 1cm. Ten cuidado con el tamaño y la separación entre los enlaces y los botones para que sea fácil seleccionarlos sin tener que hacer zoom.
Para ello puede ser muy útil cargar una hoja de estilo en cascada (CSS). Éstas permiten definir estilos de formato que pueden ser replicados a múltiples páginas web. Puedes aplicar una hoja de estilo en cascada específica para el iPad, donde el tamaño y los márgenes sean mayores.
El siguiente es un formulario visualizado con Explorer:

Aplicándole CSS : <link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="ipad.css"/>, presenta los elementos más grandes y separados:

Por ejemplo, en la web de Zara vemos que los iconos son muy pequeños y tanto estos como los menús están muy juntos y resulta muy difícil pulsarlos con el dedo, le vendría bien una CSS específica:
7. Revisa la visualización en vertical y en horizontal
Recuerda que si giras el iPad, tu web también rota y se adapta al ancho vertical u horizontal. Quizás te puede interesar una CSS diferente para cada caso.
En este ejemplo de sativapedia.com, en horizontal la web se ve bien, pero en vertical no se adapta y el contenido queda cortado.

8. Cuidado con los plugins para escuchar música y ver vídeo
No uses plugins basados en Flash. Por ejemplo en www.masvoces.org con el iPad no se visualiza el reproductor de audio porque está basado en Flash.
Una buena idea es pasarse a las etiquetas HTML5 <audio> y <video>. Puedes consultar reproductores de video y audio basados en HTML5 para aplicarlos a tu sitio.

Podemos concluir que debemos chequear constantemente nuestra web e identificar los puntos débiles de la misma. Además, es imortante adaptarnos a las nuevas tecnologías si queremos que nuestro sitio sea eficaz y fácil de usar en diferentes dispositivos, actuales y venideros. 

2 comentarios:

  1. Muy interesante, encontré unos 5 consejos prácticos para mejorar la usabilidad en los iPhones:
    1. Aumentar el tamaño del texto.
    2. Resaltar en negrita las fuentes del sistema.
    3. Activar la etiquetas ON/OFF.
    4. Mejorar la apariencia de la pantalla de inicio.
    5. Reducir los mareos a causa de los efectos de movimiento.
    En este link lo explica con imágenes: http://www.ipadizate.es/2013/10/05/ios-7-ajustes-usabilidad-mejorar-experiencia-77129/

    ResponderEliminar
  2. Muchas gracias por tu aporte ! Esos 5 consejos son items muy importantes que también debemos tener en cuenta la momento de diseñar una página para lograr que sea usable y accesible desde un iPhone!

    ResponderEliminar