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" />
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.
Muy interesante, encontré unos 5 consejos prácticos para mejorar la usabilidad en los iPhones:
ResponderEliminar1. 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/
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