Las cosas solían ser mucho más fáciles antes de que tuviéramos acceso a Internet en nuestros teléfonos y tabletas. Tener una presencia en línea requería la creación de un sitio web que solo se podía ver en la pantalla de una computadora de escritorio o portátil. Sin embargo, ahora se debe examinar y acomodar una variedad de tamaños de pantalla, que van desde pantallas más grandes de computadoras de escritorio y portátiles hasta pantallas diminutas de teléfonos móviles y tabletas, especialmente porque si un sitio web no aparece correctamente en un dispositivo en particular, el usuario se irá de inmediato.
El diseño receptivo y el diseño adaptable son dos técnicas para garantizar que un sitio web sea adecuado para dispositivos móviles, tabletas, computadoras portátiles y pantallas de PC. Si bien ambos tienen como objetivo abordar el mismo problema, utilizan enfoques distintos.
Conocer las diferencias entre estas dos técnicas puede ayudarlo a determinar qué estrategia es la mejor para su próximo proyecto de UX.
Definiremos el diseño receptivo y adaptable en esta publicación, luego veremos los beneficios y los inconvenientes de cada uno.
1. ¿Qué es el diseño receptivo y cómo funciona?
Un sitio web creado con un diseño receptivo ofrece el mismo contenido para todos los dispositivos, pero es fluido y cambia su diseño y apariencia según el tamaño y la orientación del dispositivo.
Los desarrolladores utilizan CSS para garantizar que cada página del sitio pueda reformatearse de acuerdo con el tamaño de la ventana gráfica del usuario y que el sitio solo tenga una base de código. Los puntos de interrupción se utilizan para informar al sitio cuándo debe modificarse para cumplir con varios tamaños de pantalla.
¿Cuál es el resultado final? En una pantalla grande de computadora de escritorio, el sitio puede tener un diseño de cuatro columnas, un diseño de tres columnas en una pantalla de computadora portátil más pequeña, un diseño de dos columnas en la pantalla de una tableta y un estilo de una sola columna en un teléfono móvil. Descubrirá la misma información central y el mismo diseño en un sitio web receptivo sin importar qué dispositivo esté usando.
Según Amy Schade de Nielsen Norman Group, los diseñadores de UX que trabajen en un diseño receptivo deberán colaborar estrechamente con los desarrolladores para garantizar que el diseño se adapte a diferentes tamaños de pantalla. La experiencia del usuario cambiará cuando cambien los componentes de la página, por lo tanto, depende del diseñador de UX asegurarse de que el sitio siga siendo utilizable a medida que cambia. Un enfoque para hacer esto es garantizar que la información más crítica tenga prioridad en todos los dispositivos, particularmente en las pantallas más pequeñas.
2. ¿Qué es el diseño adaptativo y cómo funciona?
El diseño adaptativo crea un diseño de sitio web único para la pantalla de cada dispositivo. El sitio detecta el tamaño de la pantalla a medida que se carga y ofrece el diseño que se diseñó para esa ventana gráfica. De hecho, puede diseñar una experiencia de usuario única para cada uno de los seis tamaños de pantalla más frecuentes: 320 px, 480 px, 760 px, 960 px, 1200 px y 1600 px.
Sin embargo, dado que el diseño de un sitio web para seis tamaños de pantalla distintos requeriría mucho tiempo, el esfuerzo puede limitarse consultando las estadísticas de usuario de una versión existente del sitio para establecer los tamaños de pantalla en los que las personas lo visitan con mayor frecuencia. Por ejemplo, si las estadísticas revelan que la mayoría de las personas acceden al sitio a través de su iPad de Apple y su teléfono inteligente Samsung Galaxy, crearía la experiencia del usuario exclusivamente para esos dos tamaños de pantalla en lugar de los seis.
3. Las ventajas y desventajas del diseño receptivo
El beneficio principal del diseño receptivo, desde el punto de vista de un diseñador de UX, es que requiere mucho menos esfuerzo para construir y mantener que el diseño adaptable. Además, las páginas web receptivas admitirán un sinfín de tamaños de pantalla, lo cual es una noticia maravillosa dada la frecuencia con la que se producen tamaños de pantalla nuevos e inusuales. Debido a que los sitios receptivos se consideran aptos para dispositivos móviles, tienen un mejor rendimiento en los resultados de los motores de búsqueda.
Los sitios web receptivos, por otro lado, necesitan código adicional de los desarrolladores, e incluso cuando un diseñador de UX y un desarrollador colaboran estrechamente para garantizar que el diseño se pueda leer en tantos dispositivos como sea posible, es difícil administrar el diseño en cada dispositivo. Como consecuencia, es posible que un sitio web no esté diseñado para brindar una experiencia de usuario óptima en ciertos dispositivos. Además, dado que el código del sitio web completo se proporciona independientemente del dispositivo utilizado para ver el sitio, un sitio receptivo puede tardar más en cargarse. La experiencia del usuario puede verse perjudicada como resultado de esto.
El diseño receptivo suele ser el método preferible para optimizar un sitio web en todos los dispositivos debido a su flexibilidad, especialmente cuando el sitio se está construyendo desde cero y tiene una gran cantidad de páginas web.
4. Las ventajas y desventajas del diseño adaptable
Puede ser más sencillo para un diseñador de UX crear los múltiples diseños necesarios para un diseño adaptable, ya que solo implica producir estructuras alámbricas para el ancho establecido de cada tamaño de pantalla. Por lo tanto, el diseñador de UX tiene control total sobre cada diseño y puede garantizar que la experiencia del usuario esté optimizada para cada tamaño de pantalla. Como consecuencia, el diseñador de UX podría incorporar información diferente para varios tamaños de pantalla si cree que tiene sentido.
Un sitio adaptado para un negocio de entrega de comidas, por ejemplo, tendría una pantalla de inicio de computadora de escritorio con selecciones de restaurantes y categorías de alimentos, así como una capacidad de búsqueda de ubicación de restaurantes. Por otro lado, en un teléfono móvil, la página de inicio del mismo sitio podría incluir simplemente la opción de búsqueda de ubicación del restaurante.
Los sitios adaptables son más simples de construir para los desarrolladores y se cargan significativamente más rápido que los sitios receptivos, ya que solo proporcionan el código requerido para el tamaño de pantalla dado.
El diseño adaptativo, por otro lado, puede ser mucho para un diseñador de UX. Si bien es factible restringir el esfuerzo diseñando solo para dos o tres de los seis tamaños de pantalla típicos, esto dará como resultado que el sitio no se formatee correctamente si las personas lo ven en un dispositivo para el que no fue preparado. Incluso si se admiten los seis tamaños de pantalla, los tamaños de pantalla raros seguirán sin ser compatibles.
El momento óptimo para aplicar el diseño adaptativo es cuando está rediseñando o mejorando su sitio web. El diseño adaptativo, por ejemplo, puede ser la solución ideal si un cliente requiere un diseño móvil para un sitio web existente que no tiene intención de cambiar.
5. Las conclusiones más importantes
Ahora debería tener una comprensión fundamental del diseño receptivo y adaptable, así como las ventajas y desventajas de cada uno. Tenga en cuenta estas cosas cuando elija qué técnica funcionaría mejor para su próximo proyecto UX:
Desde una computadora de escritorio gigante hasta un teléfono móvil diminuto, un diseño receptivo puede modificar su diseño y apariencia de acuerdo con el tamaño de la pantalla del dispositivo en el que se ve.
Un diseño adaptable requiere la producción de un diseño único para cada dispositivo que visitará el sitio web.
El diseño receptivo requiere menos esfuerzo por parte de un diseñador de UX, pero deberá colaborar con el desarrollador para garantizar que el diseño del sitio se pueda usar en todos los tamaños de pantalla.
El diseño adaptativo requiere la creación de hasta seis versiones separadas de un solo sitio web para varios tamaños de pantalla. Si bien esto requiere mucho esfuerzo, le permite al diseñador de UX mejorar la experiencia del usuario para cada uno de los dispositivos cubiertos por estos diseños.
Los sitios más grandes que se construyen desde cero generalmente se benefician del diseño receptivo.
Los sitios más pequeños que se están renovando pueden beneficiarse del diseño adaptativo.
