Diseño receptivo: mejores prácticas y consideraciones

Los sitios web receptivos son sitios web que se adaptan a todos los tamaños y resoluciones de pantalla, no solo en computadoras de escritorio, sino también en dispositivos móviles, tabletas y, a veces, incluso en televisores.

Según Statista, el tráfico móvil fue responsable del 52,64% de todo el tráfico global en 2017, lo que significa que un sitio web que no está bien optimizado para dispositivos móviles está perdiendo aproximadamente la mitad de su tráfico . Para finales de 2018, se espera que la cuota de tráfico global para dispositivos móviles crezca hasta el 79 %, lo que supone un aumento excepcional.

Las empresas que no tienen un sitio web móvil se están quedando atrás a un ritmo alarmante, porque 8 de cada 10 visitantes dejarán de interactuar con un sitio web que no se muestra bien en su dispositivo. Es demasiado fácil para los usuarios presionar el botón Atrás y probar un negocio rival en su lugar, y Google incluso clasifica los sitios web que no responden más abajo en su búsqueda .

Puede realizar la prueba de compatibilidad con dispositivos móviles de Google aquí.

¿Algo de esto significa que el móvil es más importante que el escritorio? No. El 83% de los usuarios móviles dicen que deberían poder continuar la experiencia en el escritorio si así lo desean.

Eche un vistazo a esta versión de eBay optimizada para dispositivos móviles en comparación con el aspecto que tendría si no estuviera optimizada para dispositivos móviles. ¿Considerarías siquiera la versión no optimizada?

Para diseñar sitios web que puedan competir en el Internet actual, los diseñadores web deben ser expertos en diseño web receptivo (RWD). ¿Por dónde deberían empezar?

Un enfoque móvil primero para el diseño web receptivo

El diseño web móvil primero significa diseñar primero el sitio web móvil y trabajar hasta la versión de escritorio. Hay una serie de razones por las que este enfoque funciona bien.

1. Los sitios web móviles tienen más problemas de usabilidad (esto se debe principalmente a la falta de espacio en la pantalla), por lo que es práctico y más eficiente que el enfoque principal esté en el diseño móvil.
2. Es más fácil ampliar la versión móvil que reducir la versión de escritorio (nuevamente, debido a la falta de espacio en los sitios web móviles).
3. El diseño web móvil primero ayuda a reevaluar lo que es visual y funcionalmente necesario.

Diseñar un sitio web como un sitio que responda primero a dispositivos móviles obliga a los diseñadores a hacer una serie de preguntas importantes porque hay menos espacio en la pantalla para trabajar. Estas son las preguntas que deben hacerse:

• ¿Es esta característica/función realmente necesaria?
• ¿Cómo podemos diseñar primero algo minimalista para dispositivos móviles que luego se adapte bien a las computadoras de escritorio?
• ¿Vale la pena el tiempo que tarda en cargarse en el móvil este efecto visual?
• ¿Cuál es el objetivo principal y qué elementos visuales ayudan a los usuarios a lograrlo?

Echaremos un vistazo a algunos ejemplos de diseño web receptivo en un momento. Por ahora, hablemos de qué dispositivos, tamaños de pantalla y navegadores web son relevantes hoy en día.

¿Qué resoluciones de pantalla son relevantes para el diseño web receptivo?

Estas son las resoluciones de pantalla más comunes entre los usuarios de dispositivos móviles, tabletas y computadoras de escritorio en todo el mundo. Como puede ver, existe una amplia gama de resoluciones, por lo que ni los dispositivos móviles, ni las tabletas ni las computadoras de escritorio dominan la participación de mercado en este momento; lo que esto nos dice es que los diseñadores deben considerarlos todos al pensar en un diseño web receptivo.

• 360x640 (móvil pequeño): 22,64%
• 1366x768 (portátil promedio): 11,98 %
• 1920x1080 (escritorio grande): 7,35 %
• 375x667 (móvil promedio): 5%
• 1440x900 (escritorio promedio): 3.17%
• 720x1280 (móvil grande): 2,74 %

Al igual que con el desglose de dispositivos, debemos segmentar los datos por ubicación para que coincidan con los datos demográficos de los usuarios (o los datos demográficos anticipados de los usuarios) de nuestro público objetivo. También vale la pena atender a las resoluciones que están ganando popularidad, porque si bien algunos tamaños de pantalla actualmente no son tan comunes, pueden serlo en el futuro. Esto ayudará a los diseñadores receptivos a crear una experiencia de usuario preparada para el futuro que funcionará incluso cuando cambie la cuota de mercado.

Por ejemplo, las resoluciones 360x640 (que se corresponden mayoritariamente con los dispositivos Samsung que utilizan Android) han subido un 5,43% en el último año. Los diseñadores pueden usar información valiosa como esta para decidir los puntos de interrupción de respuesta clave antes de comenzar el diseño de un sitio web.

¿Qué navegadores web son populares hoy en día?

El diseño web receptivo se trata de ofrecer una experiencia perfecta en cualquier dispositivo, y dado que los diferentes navegadores web representan las páginas web de diferentes maneras, los sitios web deben probarse para garantizar que sean compatibles con una variedad de navegadores web móviles y de escritorio.

Aunque hacer que un sitio web se escale a los puntos de interrupción de respuesta correctos es principalmente responsabilidad de un desarrollador web, es el diseñador web quien decide exactamente cómo se adaptará un sitio web receptivo a varios tamaños de pantalla para crear una experiencia de usuario óptima.

Aquí hay un desglose mundial de la cuota de mercado de los navegadores web para dispositivos móviles y de escritorio.

• Cromo: 55,04%
• Safari: 14,86%
• Navegador UC: 8.69%
• Firefox: 5,72%
• Ópera: 4,03%
• Internet Explorer: 3,35%

El diseño receptivo no se trata solo de "hacer que todo encaje", también se trata de adaptarse a las capacidades del hardware del dispositivo y del navegador web , así como a la resolución del dispositivo. Un ejemplo de esto podría ser que, si bien Google Chrome admite el overscroll-behavior: (que define lo que sucede cuando el usuario se desplaza demasiado hacia el borde de la ventana gráfica), no es compatible con ningún otro navegador web.

Mejores prácticas de diseño receptivo

eliminar la fricción

Como se mencionó anteriormente, un enfoque móvil primero para el diseño web receptivo ayudará a los diseñadores a evaluar qué es realmente necesario para que el usuario logre su objetivo principal.

A medida que desarrollamos la versión para tabletas (y luego la versión de escritorio), podemos comenzar a pensar en los objetivos secundarios y las microinteracciones, los flujos de usuarios y las CTA (llamadas a la acción) que hacen que esos objetivos de los usuarios sean alcanzables. Lo que es más importante es que nos centremos primero en los objetivos principales del usuario y eliminemos cualquier fricción innecesaria que no ayude ni a los objetivos principales ni a los secundarios.

Un objetivo principal podría ser la compra de un producto, mientras que el objetivo secundario podría ser suscribirse a un boletín informativo (lo que podría conducir a una compra más adelante).

Aquí hay un excelente ejemplo de cómo eliminar la fricción: dado que las interfaces de usuario móviles suelen ser más difíciles de navegar, sería mejor cambiar a un pago de una página para las tiendas de comercio electrónico móviles y solo habilitar el pago de varios pasos para las tiendas de comercio electrónico de escritorio.

Diseño para pulgares

El diseño web receptivo es complicado en el sentido de que los usuarios interactuarán con el sitio web de escritorio a través de clics, pero la versión móvil a través de toques y deslizamientos. Hay diferencias físicas también. Los usuarios de escritorio suelen tener sus computadoras en una superficie, mientras que los usuarios móviles sostienen sus dispositivos en sus manos. Estas diferencias cambian significativamente la forma en que los diseñadores de la interfaz de usuario móvil diseñan los objetivos táctiles y otros elementos importantes de la interfaz de usuario con los que interactúan los usuarios.

Echemos un vistazo a algunos ejemplos:

• La gente normalmente espera que la navegación principal del escritorio esté en la parte superior; sin embargo, en dispositivos móviles, debe estar en la parte inferior. Los pulgares no llegan a la parte superior cómodamente.
• Otros elementos interactivos también deben ser de fácil acceso. Esto significa mantenerlos en el centro de la pantalla porque es más difícil que los pulgares alcancen los lados y las esquinas de las pantallas de los dispositivos.
• Para que se puedan tocar con facilidad, los enlaces importantes y los CTA deben tener una altura de al menos 44 px (los objetivos de toque más pequeños son malos para la usabilidad).

Lectura recomendada: La guía fundamental para la usabilidad móvil.

Aproveche el hardware nativo de los dispositivos móviles

El hardware móvil (como la cámara del dispositivo o los servicios de GPS) no está reservado específicamente para aplicaciones nativas y, como se mencionó anteriormente, el diseño web receptivo no se trata solo de "hacer que todo encaje". También se trata de adaptarse a las capacidades del dispositivo. En el caso del diseño web móvil, dado que los dispositivos móviles tienen cámaras fáciles de usar, algunas microinteracciones, como la entrada de datos, en realidad son más fáciles en pantallas más pequeñas siempre que los sitios web aprovechen el hardware nativo disponible.

Echemos un vistazo a algunos ejemplos:

• Escaneo de tarjeta de crédito/recarga (porque los formularios suelen ser complicados en dispositivos móviles)
• Compartir fotos en las redes sociales, porque los medios ya están en su dispositivo
• Autenticación de dos factores (porque ya está en su dispositivo móvil)
• Comprobación rápida de acciones/análisis (porque las aplicaciones móviles simplifican la información)
• Realizar una búsqueda web con voz (porque manos libres es más fácil que escribir)

Hacer diseños fluidos/adaptables por defecto

No todos los usuarios tendrán su navegador de escritorio maximizado. Esto significa que, si bien los diseñadores deben tener en cuenta los puntos de interrupción de respuesta de los dispositivos que utilizan los usuarios hoy en día, también deben tener en cuenta lo que ocurre entre esos puntos de interrupción.

Los puntos de interrupción receptivos se deben usar para "refluir" el diseño y el contenido a un nuevo dispositivo, pero para tener en cuenta todos los tamaños intermedios (por si acaso), los diseños deben ser fluidos (es decir, se adaptan/estiran de forma natural como el cambia el tamaño del navegador).

Tenga en cuenta estos consejos cuando diseñe diseños fluidos/adaptativos:

• Las unidades de porcentaje permitirán que los elementos sean fluidos.
• Establecer anchos mínimos y máximos puede habilitar el escenario "pero no vaya más pequeño/más grande que esto".
• Los formatos de imagen SVG se pueden escalar hacia arriba y hacia abajo sin perder calidad y son independientes de la resolución (a diferencia de los JPG y PNG, que no lo son).

No te olvides de la orientación horizontal

Anteriormente hablamos sobre puntos de interrupción de respuesta específicos, pero también debemos considerar que esas ventanas móviles también se pueden mostrar en orientación horizontal. Si bien la implementación de un diseño fluido técnicamente hará que el contenido se adapte, perder una buena parte de la vista vertical puede ser un obstáculo para la usabilidad y la accesibilidad.

Las navegaciones suelen ser seguras (a veces son mejores, en realidad, ya que los usuarios suelen navegar en orientación horizontal con dos pulgares), pero el desplazamiento se vuelve significativamente más difícil, lo que es menos que óptimo ya que se requiere que el usuario se desplace más en horizontal.

Es posible que los diseñadores también deseen considerar el diseño para los puntos de corte del paisaje; por ejemplo, los elementos en mosaico que se apilan verticalmente en dispositivos móviles podrían mostrarse como un control deslizante con botones de navegación izquierdo y derecho, lo que significa que el usuario no tiene que desplazarse.

Recuerde, la tipografía también puede ser receptiva

Aunque los diseñadores de UX suelen utilizar unidades de píxeles para diseñar sitios web, en la web real, un punto ya no equivale necesariamente a un píxel, porque los diferentes dispositivos tienen resoluciones diferentes. El iPhone X, por ejemplo, tiene 458 PPI (píxeles por pulgada), por lo que cuando los tamaños de píxeles son cada vez más pequeños, podemos lograr gráficos más nítidos en el mismo espacio físico (Apple llama a esta tecnología "Retina" y Android la llama “hDPI”).

Esto significa que un tamaño de fuente de 16 px, por ejemplo, se vería más grande o más pequeño en algunos dispositivos dependiendo de su resolución. Los desarrolladores web suelen utilizar unidades em para definir los tamaños de fuente, que son un tipo de unidad receptiva donde 1em es igual a 1 punto.

Las herramientas de transferencia de diseño como Zeplin, Sympli, Marvel e InVision pueden ayudar a los diseñadores a colaborar con los desarrolladores en asuntos que son una responsabilidad conjunta. Mientras que los diseñadores ejecutan el diseño y los desarrolladores ejecutan el código, en su conjunto, el flujo de trabajo del diseño del producto es un esfuerzo de equipo que requiere una comunicación sólida.

Consejos y prácticas recomendadas para la optimización del rendimiento del diseño receptivo

El diseño web receptivo no se trata solo de cómo se ve, sino también de cómo actúa y se siente. Adaptar los sitios web para que se carguen más rápido en el dispositivo deseado es igualmente importante.

Lazy Load Imágenes y videos no vitales

Las imágenes y los videos constituyen una gran parte del tamaño total de descarga de un sitio web, pero no es necesario cargarlos todos a la vez. Hay dos escenarios en los que se puede retrasar la representación de los medios: el contenido de la mitad inferior de la página se puede cargar a medida que el usuario se desplaza por debajo de la página, y los medios que bloquean la representación deben descargarse solo después de que se hayan descargado el diseño y el contenido. Esta práctica se denomina carga diferida, en la que la carga de elementos pesados ​​y sin importancia se retrasa para mejorar el rendimiento de la página.

Carga condicional

Algunos elementos del sitio web no están destinados a usuarios móviles o, al menos, no valen la pena la carga cognitiva adicional. Queremos que nuestros sitios web móviles sean simples, por lo que tiene sentido ocultar elementos en ciertos escenarios. Dicho esto, tenemos que asegurarnos de que no estamos desperdiciando recursos del navegador y ancho de banda cargando estos elementos incluso cuando están ocultos; por lo tanto, es una buena práctica incluir solo estos elementos en ciertas condiciones.

Una vez más, un desarrollador puede lograr esto con código; sin embargo, los diseñadores pueden mejorar el rendimiento de la página comunicando las condiciones de cuándo y dónde ciertos elementos deben y no deben existir.

Imágenes receptivas

Como se mencionó anteriormente, algunos dispositivos muestran más píxeles por pulgada, lo que puede provocar que las imágenes se vuelvan borrosas si no se exportan con la resolución correcta. Dependiendo de la resolución del dispositivo, algunos requerirán imágenes del doble (@2x), triple (@3x) e incluso cuádruple (@4x) del tamaño. Los navegadores web ahora admiten el elemento <picture> , que elige la resolución de imagen correcta según el dispositivo.

Los diseñadores que crean sitios web receptivos pueden adaptar las imágenes al dispositivo correcto asegurándose de exportar en todas las resoluciones utilizadas en los dispositivos actuales (si no está seguro, pregunte a su desarrollador; la comunicación es clave cuando se trata de un diseño web receptivo).

Conclusión

El wireframing puede ayudar a eliminar los pliegues al principio del proceso de diseño, y esto funciona bien cuando se adopta un enfoque móvil primero para el diseño web receptivo. Tal vez haya un punto crítico de respuesta que necesite atención adicional, o tal vez haya un concepto que simplemente no es efectivo en términos de capacidad de respuesta móvil. Es mejor encontrar los baches en el camino más temprano que tarde (es decir, antes de agregar estética visual).

Las herramientas de diseño modernas como Adobe XD, Marvel e InVision permiten que los equipos prueben prototipos en dispositivos reales, analicen los comentarios en contexto y, en general, colaboren como equipo hasta que el diseño funcione en todos los escenarios.

Emplear un flujo de trabajo de experiencia de usuario optimizado en el que el diseño receptivo esté impulsado por pruebas internas y comentarios garantizará que la experiencia del usuario funcione sin problemas en todas las plataformas y resoluciones de pantalla antes de que se presente a un usuario real por primera vez.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas