Cómo la revolución de la pantalla táctil está afectando la UX

La introducción de Windows 8 supuso 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 ido adaptando sutilmente OSX a lo largo del tiempo, optimizando las funciones que se comparten cada vez más. en sus sistemas operativos móviles y de escritorio. Si bien aún no hemos visto una Mac con pantalla táctil, es obvio que la revolución de la pantalla táctil se avecina con los usuarios que pasan cada vez más tiempo en sus dispositivos móviles que en las PC domésticas.

Teniendo esto en cuenta y una proporción cada vez mayor de navegación que se realiza 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 ni un teclado. Si bien la respuesta predeterminada a esto a menudo ha sido ‘¡simplemente cree 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 el grupo medio ocupado por teléfonos más grandes y pantallas de tableta.

Este artículo echará un vistazo a una serie de sitios que han adoptado diseños de sitios estándar y no convencionales para volverse más amigables con el tacto.

Sitios web enfocados frente a sitios web receptivos

Muchos sitios web han creado sitios subsidiarios o aplicaciones específicamente para usuarios de pantallas táctiles, para permitirles enfocarse en un tipo de usuario a la vez. Un problema es que, dado que los sitios web están separados, se basan en la redirección de URL, lo que a menudo puede provocar problemas como que el usuario sea enviado al sitio incorrecto desde los enlaces o una redirección deficiente como resultado de la necesidad de redirección a páginas formateadas para usuarios móviles.

Sin embargo, el mayor problema con los sitios web separados para usuarios móviles es que a menudo la versión móvil carece de las funciones o la información que recibe un usuario de escritorio; características e interfaces a menudo simplificadas, botones agrandados y opciones reducidas. Esto se puede resolver mediante el uso de un diseño «receptivo». Un sitio web receptivo está diseñado para ser visto fácilmente en ambas plataformas sin perder calidad en ninguna. Esto también tiene la ventaja de que solo se necesita 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 la página hacia arriba para desplazarse hacia abajo, sin embargo, en un escritorio, mueve la rueda de desplazamiento hacia abajo. Apple ha intentado corregir esto consolidando sus tecnologías de interfaz táctil en trackpads tanto en sus computadoras portátiles como en sus Mac de escritorio, sin embargo, los usuarios de PC o incluso los usuarios de Mac que usan ruedas de desplazamiento o controles deslizantes convencionales 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 exasperante que intentar hacer clic en un enlace para la página siguiente y, en su lugar, recibir accidentalmente una página o un anuncio. La falta de un cursor también significa que no puede tener estados de desplazamiento para explicar dónde va un enlace, qué significa una palabra o incluso en qué se puede hacer clic.

También existe una diferencia entre la precisión en las entradas móviles, ya que las pantallas táctiles pueden tener entradas resistivas o capacitivas que tienen sensibilidades variables y, posteriormente, la precisión se puede perder en las pantallas táctiles resistivas. Más allá de esto, los diseños deben incorporar dos resoluciones muy diferentes para dispositivos móviles que tienen dos orientaciones.

Orientación de la pantalla y relación de aspecto

Con múltiples resoluciones más allá de los tamaños de monitores normales, ya no puede pensar solo en términos de resoluciones de pantalla estandarizadas y movimiento vertical. Los rápidos cambios en el mercado de la tecnología han producido tamaños de pantalla que difieren del modelo y fabricante y con todos los rumores sobre los llamados relojes inteligentes podemos empezar a ver pantallas que ya no están restringidas a cuatro bordes. Las pantallas móviles añaden mayor complejidad debido al hecho de que se pueden ver tanto en modo vertical como horizontal mediante rotación.

La respuesta son diseños líquidos que se ajustan automáticamente a cualquier resolución y pueden adaptarse tanto para la visualización vertical como horizontal. Algunos sitios web utilizan 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.

Si bien los ratones se diseñaron específicamente con ruedas de desplazamiento para facilitar el desplazamiento vertical, muchos usuarios están migrando a paneles táctiles y pantallas táctiles, y dado que Apple ha adoptado la forma más innovadora de desplazamiento táctil, que es similar a 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 Kindle, así que, ¿por qué no implementarlo en la interfaz de usuario web? Muchos sitios de una sola página tienen un eje únicamente horizontal, sin embargo, a menudo tienen que usar botones para iniciar el desplazamiento, ya que es posible que los usuarios no comprendan 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 dos ejes, 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 sitios de doble eje, esto puede no ser tan simple, por lo que la navegación puede necesitar ser pegajosa, usando una barra de estilo HUD.

Entonces, ¿qué interfaz de usuario debería utilizar su sitio web?

Obviamente, no todas las IU son adecuadas para todos los tipos de sitios web, así que 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 de mayor edad que probablemente usará una computadora de escritorio, pero aún puede necesitar botones más grandes y una interfaz de usuario más clara. No tiene sentido crear la interfaz de usuario más innovadora imaginable si nadie puede entender cómo usarla, así que recuerde siempre crear una interfaz de usuario que un usuario pueda ver y saber instantáneamente cómo usarla.

Menú radial

Un menú radial, también conocido como menú circular, es un menú contextual circular que utiliza un contexto multidireccional en lugar de la altura o el ancho como 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 drásticamente la experiencia de los usuarios de una pantalla táctil en el sitio web, y se extiende a los thumbsticks como los que se usan en las consolas de juegos, en algunos lugares se utilizan menús radiales, ya que permite que los juegos se transfieran fácilmente a la PC. Como tales, los usuarios de escritorio tampoco salen perdiendo, ya que sigue siendo cierto que los menús radiales pueden simplificar listas largas en categorías simples, lo que aumenta la facilidad de uso o la productividad en un sitio web.

Los menús radiales son una excelente manera de mostrar información sensible al contexto, un ejemplo de esto es hacer clic en una imagen de un plato en un sitio de comida y tener la opción de retuitear, 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 usar cuando están estáticos en lugar de dinámicos, ya que esto puede generar dificultades en la selección de objetos, como en sitios como Phong, en este caso, especialmente cuando se utiliza un ratón como seguimiento del cursor, resulta especialmente poco intuitivo.

Eskeuomorfismo

El diseño eskeuomórfico imita el aspecto y la funcionalidad de un objeto cotidiano para crear una interfaz de usuario intuitiva, algo que recientemente ha pasado de moda, especialmente desde que Scott Forstall renunció a Apple y el diseño plano de Sir Jony Ive se hizo cargo de iOS y probablemente OS X en el futuro. El eskeuomorfismo había sido una gran parte del impulso de Apple hacia un diseño más intuitivo, recientemente con Contactos en Mac diseñados como una libreta de direcciones real, o Kiosco e iBooks en iOS como estanterías reales. Este diseño es uno de los que obviamente beneficia 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 usa cualquier interfaz de usuario, siendo este el punto del skeuomorfismo, para traer una dimensión extra de familiaridad al unir fuerzas con objetos reales para que el usuario sepa instantáneamente cómo interactuar con ellos. Un diseño esqueuomórfico exitoso significa que con solo echar un vistazo a la página web sabrá para qué se usa el tema / la página, lo que hace que la información sobre herramientas al pasar el mouse y los resaltados de enlaces sean obsoletos.

Marcar UI

Esta es una combinación de los dos anteriores donde toda la interfaz de usuario forma un dial simple; 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 música, donde los diales se usan a menudo para mezclar una pista y controlar el volumen. En el caso de la etiqueta de red SHSK’H utilizan un tipo modificado de interfaz de usuario de dial para seleccionar la pista que desea reproducir.

El movimiento minimalista

El minimalismo es donde un sitio web se reduce a sus elementos esenciales desnudos. Esto es excelente para los usuarios móviles, ya que reduce los tiempos de carga y el uso de datos, además de permitir 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 desnudar los sitios a lo esencial y ha formado un nuevo estilo conocido como diseño plano. Esto se basa en 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 decirle a los usuarios qué hacer, una interfaz de usuario finalmente puede ser una herramienta, en lugar de duplicar también su función. un mentor. El diseño plano se ha caracterizado durante mucho tiempo por el uso de colores de bloque llamativos, pero con la introducción de iOS7, los degradados han ocupado su lugar en el mundo del diseño plano sin bordes, extrayendo la elegancia de lo chillón.

Finalmente, terminaré este artículo con un sitio que hace las cosas de manera 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 fácil de tocar pero sin obstaculizar su accesibilidad para los usuarios de escritorio, en dispositivos de pantalla táctil más pequeños, sin embargo, el usuario es enviado a un redireccionamiento enfocado con una interfaz móvil.

El diseño simple funciona maravillosamente para mostrar todo su portafolio de una manera profesional mientras conserva 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 elecció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 ha hecho como resultado de las pantallas táctiles? ¿El estado estacionario es cosa del pasado? Háznoslo saber en los comentarios.

Imagen destacada / miniatura, toque la imagen a través de Shutterstock.