Cómo la revolución de la pantalla táctil está afectando UX
La introducción de Windows 8 hizo una revisión masiva de la interfaz de usuario de Windows en línea con la interfaz de Windows Phone para ser más intuitiva para las personas que usan pantallas táctiles, y Apple ha adaptado sutilmente OSX a lo largo del tiempo, simplificando las funciones que se comparten cada vez más. a través de sus sistemas operativos móviles y de escritorio. Si bien todavía no hemos visto una Mac con pantalla táctil, es obvio que la revolución de la pantalla táctil se nos avecina y los usuarios pasan cada vez más tiempo en sus dispositivos móviles que las PC hogareñas.
Con esto en mente y una proporción cada vez mayor de navegación que tiene lugar en teléfonos inteligentes y tabletas, los sitios web deben decidir cómo se adaptarán a las personas que acceden a su contenido sin un mouse y un teclado. Mientras que la respuesta predeterminada a esto ha sido 'simplemente hacer una interfaz móvil separada', una solución que ha funcionado bien en el pasado en dispositivos móviles más pequeños como teléfonos, hay muy poco margen para que el grupo intermedio ocupe un teléfono más grande y tableta muestra.
Este artículo analizará una serie de sitios que han disminuido tanto en diseños de sitios no convencionales como estándar para que sean más fáciles de usar.
Sitios web enfocados vs. sitios web receptivos
Muchos sitios web han creado sitios subsidiarios o aplicaciones específicamente para usuarios de pantallas táctiles, para permitirles concentrarse en un tipo de usuario a la vez. Uno de los problemas es que, dado que los sitios web son independientes, dependen de la redirección de URL que a menudo puede provocar problemas como el envío al sitio equivocado desde los enlaces, o una mala redirección como resultado de la necesidad de redirección a páginas formateadas para usuarios móviles.
Sin embargo, el mayor problema con sitios web separados para usuarios de dispositivos móviles es que la versión móvil carece de características o información que recibe un usuario de escritorio; características e interfaces a menudo simplificadas, botones ampliados y opciones reducidas. Esto se puede resolver mediante el uso de un diseño "receptivo". Un sitio web receptivo está diseñado para verse fácilmente en ambas plataformas sin perder calidad en ninguno de los dos. Esto también tiene el beneficio de que solo se debe diseñar un sitio web, en lugar de dos, sin embargo, esto a menudo resulta en compromisos para ambas plataformas.
Diferencias básicas de diseño
Existen diferencias obvias entre una pantalla táctil y un escritorio en las que debe pensar al crear su sitio web. En una pantalla táctil desliza hacia arriba la página para desplazarse hacia abajo; sin embargo, en un escritorio, mueve la rueda de desplazamiento hacia abajo. Apple ha intentado corregir esto al consolidar sus tecnologías de interfaz táctil en trackpads en sus Macs portátiles y de escritorio, sin embargo, los usuarios de PC o incluso los usuarios de Mac que usan ruedas de desplazamiento convencionales o controles deslizantes para desplazarse por las páginas web están en desventaja.
Los botones deben ser mucho más grandes en los dispositivos móviles, ya que tocar no es tan preciso como hacer clic con el mouse, no hay nada más irritante que tratar de hacer clic en un enlace para la página siguiente y accidentalmente volver a enviar una página o un anuncio. La falta de un cursor también significa que no puede tener estados de vuelo estacionario para explicar dónde va un enlace, qué significa una palabra o incluso qué se puede hacer clic.
También existe una diferencia entre la precisión de las entradas móviles, ya que las pantallas táctiles pueden tener entradas resistivas o capacitivas que tienen sensibilidades variables y, por consiguiente, la precisión puede perderse en las pantallas táctiles resistivas. Más allá de esto, los diseños deben incorporar dos resoluciones muy diferentes para los dispositivos móviles que tienen dos orientaciones.
La orientación de la pantalla y la relación de aspecto
Con múltiples resoluciones más allá de los tamaños normales de monitor, significa que ya no puede pensar solo en términos de resoluciones de pantalla estandarizadas y movimiento vertical. Los rápidos cambios en el mercado tecnológico han producido tamaños de pantalla que difieren del modelo y del fabricante, y con todos los rumores sobre los llamados relojes inteligentes, podemos comenzar a ver pantallas que ya no están restringidas a cuatro fronteras. Las pantallas móviles agregan mayor complejidad debido al hecho de que se pueden ver tanto en modo retrato como en modo paisaje mediante rotación.
La respuesta son los diseños de líquidos que se ajustan automáticamente para cualquier resolución y se pueden adaptar tanto para el retrato como para el paisaje. Algunos sitios web usan un diseño líquido que cambia drásticamente el aspecto del sitio web para optimizar la facilidad de control y utilizar todo el potencial de la pantalla en función de su orientación.
Mientras que los ratones fueron diseñados específicamente con ruedas de desplazamiento para un desplazamiento vertical sencillo, muchos usuarios están migrando a pantallas táctiles y táctiles, y dado que Apple ha adoptado la forma más innovadora de desplazamiento táctil que es arrastrar una página en lugar de desplazarse, la idea más creativa de el desplazamiento horizontal puede no estar fuera de discusión. La mayoría de las aplicaciones utilizan el desplazamiento horizontal como herramienta y, con mucho, el mayor éxito en el desplazamiento horizontal es el tipo de letra, ¿por qué no implementarlo en su interfaz de usuario web? Muchos sitios de una sola página tienen un único eje horizontal, sin embargo, a menudo tienen que usar botones para instigar el desplazamiento ya que los usuarios pueden no entender el formato no estándar.
El desplazamiento horizontal puede ser similar al desplazamiento vertical en términos de diseño; sin embargo, el uso de ambos puede abrir la posibilidad de desplazamiento de doble eje, que puede no funcionar en el navegador. A muchos usuarios les gusta estar anclados a un eje, obviamente este suele ser el eje x, que es estático, por lo que si los usuarios se pierden en la página, pueden simplemente desplazarse hacia arriba y volver a la navegación principal. En los sitios de doble eje, esto puede no ser tan simple, por lo que la navegación puede necesitar ser adhesiva, utilizando una barra de estilo HUD.
Entonces, ¿qué interfaz de usuario debería usar su sitio web?
Obviamente, no todas las UI son adecuadas para todo tipo de sitios web, por lo tanto, hágase algunas preguntas básicas: ¿Quién es su público objetivo? ¿Qué estás tratando de "vender"? ¿Qué impresión quieres dar? Es más probable que las personas más jóvenes usen pantallas táctiles que un grupo demográfico más antiguo que probablemente usará una computadora de escritorio, pero aún así pueden necesitar botones más grandes y una IU más clara. No tiene sentido crear la interfaz de usuario más innovadora que se pueda imaginar si nadie puede entender cómo usarla, así que recuerde siempre crear una interfaz de usuario que el usuario pueda ver y saber cómo usarla al instante.
Menú radial
Un menú radial, también conocido como menú circular, es un menú contextual circular que utiliza el contexto multidireccional en lugar de la altura o el ancho como la herramienta de selección.
Esta es una gran forma de diseño intuitivo que evita que los usuarios se pierdan en docenas de submenús. Otra ventaja es que un usuario de pantalla táctil tiene un mejor control sobre las listas desplegables normales, ya que el control direccional es más preciso que tocar. El uso de menús radiales en formularios y sitios web podría mejorar dramáticamente la experiencia de los usuarios de pantallas táctiles en el sitio web, y se extiende a los thumbsicks como los que se usan en consolas de juegos, en algún lugar se usan menús radiales, ya que permite que los juegos se transfieran fácilmente a la PC. Como usuarios de escritorio no se pierden, ya que sigue siendo el caso que los menús radiales pueden simplificar largas listas en categorías simples que aumentan la facilidad de uso o la productividad en un sitio web.
Los menús radiales son una excelente manera de mostrar información contextual, un ejemplo de esto es hacer clic en una imagen de un plato en un sitio de comida y recibir la opción de retweeting, el enlace de la receta, la lista de ingredientes o guardar la imagen. Sin embargo, debe tener cuidado de que su menú siga siendo accesible y simple, de lo contrario, puede abrumar fácilmente al usuario, especialmente al combinar símbolos y palabras en el mismo menú radial. Los menús radiales son mucho más fáciles de utilizar cuando son estáticos que dinámicos, ya que esto puede ocasionar dificultades en la selección de objetos, como en sitios como Phong , en este caso, especialmente cuando se usa un mouse como el seguimiento del cursor, lo hace especialmente poco intuitivo.
Skeuomorfismo
El diseño Skeuomorphic imita el aspecto y la funcionalidad de un objeto cotidiano para crear una interfaz de usuario intuitiva, algo que se ha desactualizado recientemente, especialmente desde que Scott Forstall renunció a Apple y el diseño plano de Sir Jony Ive asumió iOS y probablemente OS X en el futuro. Skeuomorphism había sido una gran parte de la presión de Apple hacia un diseño más intuitivo, recientemente con Contactos en Mac está diseñado como una libreta de direcciones real, o Newsstand e iBooks en iOS que son estantes reales. Este diseño es el que beneficia más obviamente a los usuarios de la interfaz táctil, ya que no interactuamos con el mundo que nos rodea con un cursor.
La familiaridad se suma a la intuición cuando se utiliza cualquier interfaz de usuario, siendo este el punto de skeuomorphism, para traer una dimensión extra de familiaridad al unir fuerzas con objetos reales para que el usuario sepa cómo interactuar con él. Un diseño skeuomorphic exitoso significa que con solo echar un vistazo a la página web sabrá para qué es el tema / se utiliza la página, haciendo obsoleta la información sobre herramientas mouseover y los destacados de enlace.
Dial UI
Esta es una combinación de ambos, donde la interfaz de usuario completa forma un simple dial; el diseño se asemeja a un menú radial, pero en lugar de girar en el centro, seleccionando desde allí, el dial gira a un único punto de selección. Esto es muy efectivo en casos como la música, donde los diales a menudo se usan para mezclar una pista y controlar el volumen. En el caso de la etiqueta de red SHSK'H usan un tipo modificado de IU de marcado para seleccionar qué pista quieres tocar.
El movimiento minimalista
El minimalismo es donde un sitio web se despoja de sus elementos esenciales. Esto es ideal para los usuarios de dispositivos móviles ya que disminuye los tiempos de carga y el uso de datos, y permite que el usuario pueda acceder a toda la información necesaria en una interfaz clara que es más fácil de usar para resoluciones más pequeñas. El minimalismo actual ha ido más allá de despojar a los sitios de lo esencial, y ha formado un nuevo estilo conocido como diseño plano. Esto depende de la creencia de que la intuición ya no es necesaria en el diseño ya que las interfaces y su uso se han convertido en una parte tan importante de la vida que el diseño puede ir más allá de decirles a los usuarios qué hacer, una IU puede finalmente ser una herramienta en lugar de duplicarla. un mentor. El diseño plano se ha caracterizado por el uso de colores de bloque en negrita, pero con la introducción de iOS7, los degradados han tomado su lugar en el mundo del diseño plano sin bordes, extrayendo elegancia de lo chillón.
Finalmente, terminaré este artículo con un sitio que hace las cosas un poco diferente. Thibaud es un desarrollador creativo que ha diseñado un creador de sitios web de cartera conocido como Pikibox. El sitio web es extremadamente amigable para el tacto pero sin obstaculizar su accesibilidad para usuarios de escritorio, en dispositivos de pantalla táctil más pequeños, sin embargo, el usuario es enviado a una redirección enfocada con una interfaz móvil.
El diseño simple funciona maravillosamente al mostrar todo su portafolio de una manera profesional, manteniendo un aspecto nuevo y divertido que es extremadamente intuitivo. Por supuesto, una gran parte del diseño está en manos del usuario, pudiendo alterar la ubicación de la navegación y ajustar cómo se usa espacialmente, lo que algunos dirían que no constituye exactamente una opción de diseño. La versión de escritorio viene en cuatro estilos, y los invito a jugar con ellos, y sacar sus propias conclusiones sobre si esto es simplemente indeciso o enormemente creativo.
¿Qué compromisos has realizado como resultado de las pantallas táctiles? ¿El vuelo estacionario es una cosa del pasado? Háganos saber en los comentarios.
Imagen / miniatura destacada, toque la imagen a través de Shutterstock.