En los primeros días del diseño de 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 dispositivos móviles" que eliminó gran parte de la imagen y la imagen para adaptarse a las capacidades limitadas y la velocidad de la red de los teléfonos Candy Bar y las redes inalámbricas 3G.
Sin embargo, los teléfonos inteligentes contemporáneos pueden representar páginas web con la misma eficiencia que las PC de escritorio, a través de redes tan buenas o mejores que las líneas DSL de ayer.
El diseño, entonces, converge de nuevo a una interfaz de usuario único. Pero el riesgo para los diseñadores no es que un teléfono inteligente o una tableta no puedan representar un sitio web moderno y sensible. Más bien, es que el método de entrada 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 mouse han terminado.
Reglas básicas de diseño de la pantalla táctil
El diseño de una interfaz web compatible con pantalla táctil requiere una evolución del enfoque tradicional de monitor-mouse-teclado del pasado. En particular, debe acomodar interacciones como gestos, toques y entradas multitáctiles.
- Hacer tapping no es exacto.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 tocar y ser preciso.
- Los gestos son diferentes de los grifos.Para desplazar una página larga en una pantalla táctil, el usuario desliza un dedo arriba la ventana del navegador Esto puede no parecer significativo hasta que te das cuenta de que al navegar con un mouse, mueves el mouse abajo .
- Dos (y más) toques con los dedos.Un usuario puede usar múltiples toques con los dedos en el dispositivo al mismo tiempo para controlarlo. Esos toques 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 brillo, en situaciones de luz brillante. Además, con todo el toque, obtienen huellas dactilares y manchas en la pantalla que pueden afectar la apariencia de sus páginas.
- Teclado en pantalla.Si bien algunos usuarios tienen un teclado inalámbrico, se conectan a sus tabletas, la mayoría de los usuarios de tabletas usan el teclado en pantalla para ingresar datos. La entrada de OSK puede dar lugar a algunos errores tipográficos divertidos, además de ser incómodo de usar durante largos períodos de tiempo.
Debido a estas características del dispositivo, los diseñadores web deben enfatizar varias reglas de diseño básicas para usuarios de pantallas táctiles:
- No coloques elementos en los que se pueda hacer clic demasiado juntos.No hay una regla estricta que defina qué tan cerca está demasiado cerca, pero las listas de enlaces, especialmente en un tamaño de fuente pequeño, pueden ser difíciles de navegar al hacer clic (tocar) con un dedo gordo. Puede ser molesto tener que hacer zoom solo 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 utiliza JavaScript para abrir un submenú cuando el usuario hace clic y luego pasa el mouse sobre el submenú. Estos estados pueden ser muy difíciles o imposibles de usar en pantallas táctiles porque no se mantienen abiertos o no se cierran.
- Mueva los enlaces y las á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 hacia 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 desean desplazarse por la página y, en su lugar, terminan tocando accidentalmente un enlace. Al alejar los enlaces del lado derecho, puede ayudarlos a evitar este inconveniente.
- No hay ratón.Y esto significa que no hay ratón. puntero . No debe confiar en que el puntero del mouse cambie para ayudar a indicar que se puede hacer clic en algo.
- Los estados flotantes no existen.Como corolario de lo anterior, ya que no hay ratón, no hay nada con lo que flotar. Un enlace hace clic (tocado) o no en un dispositivo de pantalla táctil, por lo que los usuarios no pueden inferir ninguna información útil de los estados de desplazamiento, como los cambios de color, las sugerencias de herramientas o los cambios de la barra de estado.
- Los fondos negros realzan el resplandor.Un sitio con un fondo negro puede ser muy difícil de leer en un dispositivo de pantalla táctil debido al resplandor. El negro hace que las huellas dactilares en los dispositivos se vean más claramente, borrando la pantalla. Y el negro puede convertir la pantalla en un espejo reflejando que los usuarios se enfrentan a menudo más que el texto en la pantalla.
- Los bloques largos de texto en formularios son difíciles de escribir.Si bien es posible escribir novelas completas en un iPad o en una tableta de Android o Windows, a la mayoría de las personas no les gusta usar el teclado en pantalla para largos tramos de texto. Cuanto más pueda hacer su entrada de datos lo más breve y fácil posible, mejor.
El aspecto más importante del diseño con pantallas táctiles en mente es prueba tus páginas en un dispositivo de pantalla táctil. Si bien 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 Usted lanza su nuevo diseño de sitio web.
