En los primeros días de diseñar sitios web para dispositivos móviles, la mayoría de los desarrolladores bifurcaron su oferta de productos. Lanzaron una versión de escritorio completamente funcional y luego una versión «optimizada para móviles» que eliminó gran parte de la marca y las imágenes para acomodar las capacidades limitadas y la velocidad de la red de los teléfonos con barras de caramelo y las redes inalámbricas 3G.
Los teléfonos inteligentes contemporáneos, sin embargo, pueden renderizar páginas Web tan eficientemente como los PCs de escritorio, a través de redes inalámbricas tan buenas o mejores que las líneas DSL de ayer.
El diseño, entonces, vuelve a converger a una única interfaz de usuario. Pero el riesgo para los diseñadores no es que un smartphone o una tableta no pueda ofrecer un sitio web moderno y con capacidad de respuesta. Más bien, es que el método de entrada de datos del usuario en un dispositivo con pantalla táctil requiere cambios significativos en el diseño del sitio subyacente. Los días de construir un sitio web asumiendo que los visitantes tienen un teclado y un ratón se han acabado.
Reglas básicas de diseño de la pantalla táctil
Diseñar para una interfaz Web con pantalla táctil requiere una evolución del enfoque tradicional de monitor/ratón/teclado del pasado. En particular, debe tener en cuenta las interacciones como los gestos, los toques y la entrada multitáctil.
- El golpeteo no es preciso – A menos que el cliente tenga los dedos de un niño pequeño, incluso con los controles de software muy precisos, puede ser difícil de golpear y ser preciso.
- Los gestos son diferentes de los toques – Para desplazarse por una página larga en una pantalla táctil, el usuario pasa un dedo hacia arriba/em> por la ventana del navegador. Esto puede no parecer significativo hasta que te des cuenta de que al navegar con un ratón, mueves el ratón hacia abajo .
- Dos (y más) toques con los dedos -Un usuario puede usar varios toques con los dedos en el dispositivo al mismo tiempo para controlarlo. Estas derivaciones adicionales pueden significar algo específico dependiendo del sistema operativo del dispositivo del usuario.
- Dispositivos de alto brillo – Las pantallas de la mayoría de las tabletas con pantalla táctil están hechas de un vidrio resistente. Este material puede ser muy difícil de leer, con mucho resplandor, en situaciones de luz brillante. Además, con todos los toques, obtienen huellas digitales y manchas en la pantalla que pueden afectar el aspecto de sus páginas.
- Teclado en pantalla -Aunque algunos usuarios tienen un teclado inalámbrico que conectan a sus tabletas, la mayoría de los usuarios de tabletas usan el teclado en pantalla para ingresar datos. La entrada en el OSK puede resultar en algunos errores tipográficos hilarantes, además de ser incómodo de usar durante períodos de tiempo prolongados.
Reglas básicas de diseño de móviles
Debido a estas características del dispositivo, los diseñadores Web deben enfatizar varias reglas básicas de diseño para los usuarios de pantallas táctiles:
- No coloque los elementos en los que se puede hacer clic demasiado cerca -No hay una regla rápida que defina cuán cerca está, pero las listas de enlaces, especialmente en un tamaño de fuente pequeño, pueden ser difíciles de navegar al hacer clic con un dedo gordo. Puede ser molesto tener que acercar el zoom para intentar hacer clic en un enlace. Este principio es válido tanto para los botones como para los enlaces.
- Las jerarquías pueden ser difíciles de mantener abiertas – Una forma popular de menú dinámico usa JavaScript para abrir un submenú cuando el usuario hace clic y luego pasa el ratón sobre el submenú. Estos estados pueden ser muy difíciles o imposibles de usar en las pantallas táctiles porque no permanecen abiertas o no se cierran.
- Mover enlaces y áreas en las que se puede hacer clic lejos del borde derecho de la ventana -La mayoría de las personas son diestras y tienden a desplazarse por ese lado de la pantalla. Dado que el desplazamiento se realiza con un gesto, a veces es posible iniciar el deslizamiento en un enlace por error. Los usuarios pueden molestarse si quieren desplazarse por la página y, en su lugar, acaban tocando accidentalmente un enlace. Al mover sus enlaces fuera del lado derecho, usted puede ayudarles a evitar este inconveniente.
- No hay ratón -Y esto significa que no hay puntero del ratón . No debe confiar en que el puntero del ratón cambie para ayudar a indicar que se puede hacer clic en algo.
- Los estados Hover no existen -Como corolario de lo anterior, ya que no hay ratón, no hay nada con que flotar. Se hace clic en un enlace o no en un dispositivo con pantalla táctil, por lo que los usuarios no pueden inferir ninguna información útil de estados como cambios de color, consejos de herramientas o cambios en la barra de estado.
- Los fondos negros mejoran el resplandor -Un sitio con un fondo negro puede ser muy difícil de leer en un dispositivo con pantalla táctil debido al resplandor. El negro hace que las huellas dactilares de los dispositivos se muestren más claramente, difuminando la pantalla. Y el negro puede convertir la pantalla en un espejo que refleja el rostro de los usuarios a menudo más que el texto en la pantalla.
- Los bloques largos de texto en los formularios son difíciles de escribir -Aunque es posible escribir novelas enteras en un iPad o en una tableta Android o Windows, a la mayoría de la gente no le gusta usar el teclado en pantalla para grandes extensiones de texto. Cuanto más pueda su diseño hacer que la entrada de datos sea lo más corta y fácil posible, mejor.
El aspecto más importante del diseño con las pantallas táctiles en mente es probar sus páginas en un dispositivo con pantalla táctil. Aunque hay muchos emuladores de iPad y Android disponibles, y muchas tabletas de Windows, todavía no proporcionan la sensación de una pantalla táctil. No se puede decir que los enlaces están demasiado cerca o que los botones son demasiado pequeños – o que el resplandor hace que la página sea demasiado difícil de leer – a menos que saque una tableta y la pruebe antes de de lanzar el nuevo diseño de su sitio web.
