- Cuando un layout creado para móvil se expande tal cual a desktop, las imágenes, el texto y los espacios en blanco se agrandan en exceso, y la usabilidad empeora por la dispersión de contenido, donde la información queda esparcida en páginas largas
- Como más del 55% del tráfico web mundial proviene de móviles, el enfoque mobile-first se usa ampliamente, pero cuando se combina con minimalismo y diseños centrados en imágenes grandes, la densidad de información en desktop baja mucho
- En 13 pruebas cualitativas de usabilidad que compararon layouts dispersos y compactos, las páginas dispersas hicieron más difícil encontrar y comprender la información
- El contenido disperso aumenta el scroll y los clics, elevando el costo de interacción, y puede obligar a recordar información relacionada a través de varias pantallas, lo que deriva en mayor carga cognitiva, frustración y menor confianza
- En desktop, la información importante y relacionada debería agruparse dentro del mismo viewport, y los patrones pensados solo para móvil, como los acordeones, deberían usarse de forma limitada
Qué es la dispersión de contenido
- La dispersión de contenido es el fenómeno por el cual el contenido de una página web responsiva se ve excesivamente grande y estirado en pantallas grandes de laptop o desktop
- Cuando una página mobile-first se renderiza en desktop, las imágenes que cubren la pantalla, los textos inflados y el exceso de espacio negativo generan páginas largas que requieren más scroll
- Si la dispersión aparece solo en algunas secciones, puede no ser un gran problema de usabilidad, pero si domina la mayor parte de la página, su efecto acumulado suele ser negativo
- En dispositivos de pantalla grande, la dispersión de contenido incrementa la carga cognitiva, el costo de interacción, la dificultad para comprender el contenido y la frustración del usuario
Tendencias de diseño que generan dispersión de contenido
- El enfoque mobile-first consiste en diseñar primero para móvil y luego ajustar para tablet y desktop
- Como más del 55% del tráfico web mundial proviene de dispositivos móviles, este enfoque se usa ampliamente
- El minimalismo elimina elementos de diseño que no son necesarios para la función principal o el mensaje del sitio web
- Para evitar una impresión visual recargada, usa mucho espacio negativo
- Esto puede reducir la cantidad de contenido visible en un solo viewport y producir páginas largas con baja densidad informativa
- El diseño centrado en imágenes grandes está vinculado con la tendencia moderna de usar imágenes de alta resolución a gran escala en la web
- Las imágenes grandes pueden atraer la atención, pero también pueden dispersar demasiado el contenido textual
- Que una página de desktop tenga algunas imágenes grandes puede funcionar bien
- Pero si hay demasiadas, el contenido textual entre ellas termina fragmentado por toda la página
Cómo se hicieron las 13 pruebas de usabilidad
- La prueba combinó 13 pruebas cualitativas de usabilidad con entrevistas semiestructuradas
- La comparación se hizo entre combinaciones de dos layouts y dos tipos de página
- Layouts: compacto, disperso
- Tipos de página: homepage, página de producto
- En total se usaron 4 prototipos
- Los prototipos dispersos se reconstruyeron a partir de páginas web reales de desktop con baja densidad de contenido, mucho espacio negativo y texto grande
- Las versiones compactas se crearon por separado usando el mismo contenido que las páginas originales
- Los usuarios realizaron actividades abiertas en los 4 prototipos y luego participaron en discusiones de seguimiento comparando las dos versiones de cada tipo de página
- La metodología completa del estudio está en una página metodológica aparte
Problemas de usabilidad causados por el contenido disperso
- Cuando la dispersión aparece a lo largo de gran parte de la página, puede afectar fuertemente la experiencia general del usuario
- Los principales problemas son los siguientes
- Aumento de la longitud de la página y del costo de interacción
- Mayor carga cognitiva
- Dificultad para formar un modelo conceptual de la página
- Más frustración
- Menor confianza
-
Más scroll y más clics
- La dispersión de contenido crea páginas largas que requieren más scroll, y elementos de diseño pensados para móvil, como los acordeones, exigen más clics para acceder al contenido
- Cuando un sitio web mobile-first se renderiza en pantallas grandes, el contenido se dispersa y genera páginas largas; este efecto se intensifica cuando se combina con minimalismo y diseño centrado en imágenes
- Si el contenido queda repartido entre varios viewports, se vuelve más difícil encontrar información específica dentro de la página
- En las pruebas, los participantes tuvieron más dificultades para encontrar información en la página de producto dispersa que en la versión compacta
-
Problemas en desktop de los patrones exclusivos de móvil
- Los acordeones pueden servir en móvil para plegar mucha información en un espacio reducido, acortar la página y ayudar al usuario a ir directo a las áreas de interés
- En pantallas grandes, donde el problema de las páginas largas es relativamente menor, los acordeones pueden fragmentar el contenido y aumentar mucho el costo de interacción para encontrar información importante
- Un participante comentó que, en el acordeón de información del producto del prototipo disperso, tuvo que abrir y cerrar cada ítem para leer la información
- Otro participante evaluó que la página compacta era mejor porque requería menos clics y la información estaba justo enfrente
-
Aumento de la carga cognitiva
- A medida que las imágenes crecen y el espacio negativo se amplía, el contenido textual se fragmenta entre varios viewports
- Cuando el contenido relacionado se corta por pantallas, al usuario le cuesta verlo como una sola unidad
- Para emitir juicios o tomar decisiones, debe recordar información de distintos viewports o hacer scroll hacia adelante y atrás, y la capacidad de la memoria de corto plazo puede verse fácilmente sobrepasada
- El layout compacto muestra más información dentro del mismo viewport, reduce la carga cognitiva y ofrece una experiencia de exploración más fluida
- La naturaleza de las imágenes también influye en la percepción de fragmentación
- Las imágenes informativas pueden implicar menos carga adicional aunque se muestren grandes en pantallas amplias, porque el usuario les dedica tiempo para obtener información útil
- Las imágenes decorativas no aportan valor informativo, por lo que el usuario las pasa por alto, pero debe desplazarse por grandes ilustraciones para llegar al contenido útil, empeorando la sensación de fragmentación
Impacto en el modelo conceptual y la confianza
- Las páginas dispersas dificultan evaluar los conceptos que transmite el sitio web y formar un modelo conceptual debido a la mayor longitud de la página y la carga sobre la memoria de trabajo
- En el prototipo de homepage, los participantes señalaron que, en lugar de ver 4 o 5 propuestas al mismo tiempo para entender el alcance, tenían que recordarlas mientras trataban de comprenderlas, lo que lo hacía más difícil
- En la página de producto, cuando elementos clave para decidir una compra —como precio, detalles del producto y reseñas— estaban dispersos entre varios viewports, el usuario tenía que consumir y recordar la información por separado
- Cuando la información importante está junta o distribuida en menos viewports, es más fácil construir una comprensión conceptual del producto o de la propuesta de valor
- La ilusión de completitud puede volverse más pronunciada en sitios web dispersos
- Los bloques de color pueden crear líneas horizontales fuertes en el viewport, o el espacio negativo amplio puede hacer que parezca que la página ya terminó
- Si no hay señales de scroll que indiquen que hay más contenido, el usuario puede pasar por alto información
- Cuando los problemas de usabilidad se acumulan, un sitio web disperso puede parecer escaso en contenido y difícil de acceder
- Algunos usuarios pueden sentir que la empresa está ocultando información, y en ese caso la confianza puede disminuir
- Los usuarios prefirieron especialmente los layouts compactos cuando su objetivo era explorar el sitio web y comprender en general qué ofrece
Cuándo la dispersión de contenido puede ayudar
- Aunque si toda la página está dispersa el impacto acumulado en usabilidad suele ser negativo, en ciertas situaciones puede contribuir positivamente a la experiencia
- Si se reduce la cantidad de contenido visible en un viewport, el usuario puede concentrarse en una sola pieza de contenido destacado a la vez, y también puede disminuir la percepción de sobrecarga informativa
- Reducir la densidad de contenido dentro del viewport para destacar información puede ser útil en los siguientes casos
- Cuando hay contenido complejo que debe entenderse por partes
- Cuando el usuario necesita familiarizarse con el contenido mostrado y demasiada información podría abrumarlo
- Cuando se muestran imágenes de alto valor
- Las fotos grandes de producto pueden aportar valor al permitir que el usuario examine con facilidad sus detalles
- Las imágenes con alto valor informativo pueden justificar la dispersión, pero las imágenes de relleno o usadas solo por interés visual generan dispersión sin beneficios adicionales
- En el prototipo de homepage, como el valor de las imágenes era menor, se observaron menos efectos positivos de la dispersión de contenido
Recomendaciones para diseñar en desktop
- Se debe evaluar por separado el renderizado en desktop
- Si en desktop grandes partes de la página quedan excesivamente estiradas, conviene considerar un rediseño que facilite escanear el contenido importante
- Hay que evaluar el valor que aportan las imágenes
- Conviene priorizar imágenes grandes que ayuden a entender el contexto del producto o servicio
- Hay que juzgar si el valor de la imagen compensa la dispersión que produce en desktop
- El contenido importante y relacionado debe agruparse dentro del mismo viewport
- Hay que considerar qué información es más relevante para entender la oferta y elegir diseños que reduzcan el scroll de ida y vuelta
- Se deben limitar las interacciones y elementos de diseño exclusivos de móvil
- Hay que reducir el uso de acordeones en desktop
- Conviene considerar un diseño adaptativo que muestre el mismo contenido de una forma más amigable para desktop
- La dispersión debería usarse de forma limitada como estrategia para enfocar la atención en puntos clave o contenido complejo
Conclusión
- El contenido disperso en páginas minimalistas de desktop puede reducir distracciones y enfocar la atención en puntos clave o información compleja
- Pero si toda la página se construye siguiendo mobile-first, minimalismo y diseño centrado en imágenes, los problemas de usabilidad en desktop aumentan
- Cuando el contenido se estira y fragmenta a través de varios viewports, al usuario le resulta más difícil consumir y comprender la información
1 comentarios
Opiniones de Hacker News
Danny O'Brien mantenía el viejo blog Oblomovka y, hacia 2007, acuñó la palabra hinternet.
En esa época, Internet era un lugar operado por la élite técnica para sí misma, al que la gente común empezaba a entrar; hinternet era la idea de que existían por separado una Internet con tecnología y valores refinados, y una Internet de spam de Viagra y banners emergentes.
Antes, la élite técnica podía evitar casi por completo la hinternet, como quien evita un barrio peligroso, pero la gente común no tenía esos mecanismos de discernimiento y terminaba con una experiencia de Internet mucho más inferior.
Ahora, la mayor parte de Internet se ha convertido en hinternet, y sistemas esenciales como bancos, hipotecas, pagos de autos y servicios públicos también se diseñan con enfoque mobile-first, usando técnicas oscuras que se rompen en plataformas abiertas con el pretexto de la “verificación de usuarios reales”.
Si la hinternet de antes era un callejón turbio donde vendían relojes falsos, la de ahora se parece más a una distopía de integración vertical de la información operada por organismos cuasigubernamentales desde atrás, y para iniciar sesión en el IRS hay que usar id.me, una plataforma de gestión de identidad que incluso vende cosas.
Hay intentos de cultivar pequeños jardines refinados, pero su éxito es irregular, y desde el punto de vista individual hay muy pocos incentivos para participar en la hinternet salvo para lo estrictamente necesario.
Visto así, el “diseño web mobile-first” no es más que un síntoma separado de un contexto más amplio.
De un lado están las élites cultas de la academia, el ejército y el gobierno como fundadores legítimos; del otro, las masas que llegaron después de Eternal September.
Al final, la idea es que recién llegados como comerciantes, especuladores y estafadores se naturalizaron como empresas y bancos del nuevo mundo; si se ve la era puntocom como una historia de colonización, la élite queda como los pueblos originarios desplazados de su propia tierra, y eso encaja bien con las narrativas actuales.
Pero lo que falta en esta fábula es la gente común real.
Las puntocom, la Web 2.0 y la construcción de imperios, desde 1997 hasta alrededor de 2010, siguieron siendo fenómenos periféricos en los que el dinero y el poder existentes se trasladaron a Internet y se sumaron unos pocos “emprendedores” rudos; el 99% siguió siendo espectador y ahora, por así decirlo, terminó arreado al corral.
La posibilidad de una Internet de la gente sigue existiendo, pero casi no ha resuelto problemas clásicos como los free riders y la tragedia de los comunes, y a estas alturas “Web 3.0 y la web blockchain” parece estar muerta.
Para volver a una Internet pública, de alta calidad y grande, hay que mirar con más detenimiento la historia y las narrativas de Internet, y quiénes son sus verdaderos grupos de interés.
No sé si se refiere a la Internet difícil de usar de los 90 centrada en IRC y Usenet, o a la Internet clandestina de los 90 con contenido ilegal en hosting gratuito.
No veo bien en qué se parece la Internet de los 90, con foros, IRC, spam de Viagra y goatse, a la Internet esterilizada de hoy, dominada por patrones oscuros y unas pocas megaempresas.
El uso del móvil no reduce el analfabetismo informático; más bien lo aumenta, y la gente hace clic en enlaces equivocados, instala barras de herramientas en el navegador y luego se va infectando cada vez más de patrones oscuros.
Veo este estado con bastante frecuencia cuando familiares me contactan por problemas con la computadora.
Siempre me downvotean cuando uso expresiones como “phonish” o “phonishness”, pero siento que los smartphones empeoraron la vida en vez de mejorarla, e hicieron que la gente sirviera a las computadoras.
Espero la próxima plataforma.
Fuera de la carpeta de spam, casi no tengo exposición, y el resto está todo curado para convertirse en una zona “aceptable” o en algo parecido a una residencia privilegiada en Internet.
No tengo dinero, pero en términos de conocimiento soy rico; parece una estructura tipo tragedia de los comunes, donde los analfabetos tecnológicos sirven de escudo de carne para anuncios y servicios pagos como YouTube.
Con el tiempo se vuelve cada vez más claro que frontend probablemente sea la parte más difícil del stack.
La gente cree que si arma a las apuradas una app Bootstrap React ya queda perfecta, pero escribir una UI compleja que funcione en todos los navegadores, dispositivos, tecnologías de asistencia e idiomas es extremadamente difícil.
Hace falta un conocimiento profundo de HTML, CSS y las API web relacionadas, y los buenos ingenieros de frontend son muy escasos incluso en las big tech.
Los diseñadores UX que piensan también en estas cosas son aún más raros, y alguien así vale un millón de dólares.
Al final me pasé a diseño, porque si igual no iba a recibir respeto, al menos no tenía que seguir corriendo en la cinta sin fin de aprender tecnologías nuevas.
También hice desarrollo backend y tiene sus propias dificultades, pero si se trata de dinero, elegiría backend antes que frontend.
Después de haber hecho diseño, backend y frontend, en mi cabeza se formaron dos ejes: reconocimiento e intromisión.
El diseño recibe mucho reconocimiento porque el resultado es visual, pero cualquiera opina sobre “cómo hacerlo mejor” y se mete con facilidad.
En backend, nadie se mete salvo otros ingenieros, pero cuando está bien hecho simplemente funciona como si así tuviera que ser, así que es difícil que te reconozcan el mérito.
El frontend está en un punto intermedio: si se ve bien y funciona bien recibe cierto reconocimiento, pero aunque la app sea rápida y responsiva, más o menos la mitad del crédito puede terminar yendo al diseñador.
Al mismo tiempo, la gente dice “debería comportarse así” tomando como referencia otras apps, y el desarrollador frontend tiene que hacer que de alguna manera funcione entre lo que aprobó el diseñador y lo que soporta el backend.
Se cansan de pelear todo el día con colegas que saben programar pero no tienen sensibilidad de diseño, y las características que hacen a un buen ingeniero frontend también facilitan pasarse a roles con menor costo psicológico.
Los desarrolladores frontend tratan con humanos subjetivos, no con máquinas objetivas; también tienen que tratar con diseñadores y product managers, y están limitados por los ingenieros backend y la infraestructura.
Tienen que hacer que funcione en múltiples dispositivos y navegadores, usar frameworks elegidos por otros y no romper nada.
Mis respetos a todos los desarrolladores frontend.
Todo tenía padding: el texto tenía padding, la caja que envolvía el texto tenía padding, y la fila de la tabla que contenía esa caja tenía todavía más padding.
Como resultado, en una pantalla común de 1080p apenas entraban unas 4 filas de tabla, y cada fila contenía muy poca información real.
Además, por alguna razón, el tamaño de la letra estaba definido según el ancho del viewport, lo que la hacía casi inutilizable en pantallas antiguas 4:3.
Pensemos en sistemas que tienen que procesar miles de millones de eventos por día, semana o mes, y encargarse de caché de datos, data warehouses, notificaciones en tiempo real, volumen de trabajos en cola, diversas solicitudes de API, sincronización entre sistemas backend, múltiples almacenes de datos, escalado multirregión, redundancia y respuesta ante fallas de backend.
En el software web complejo, estos problemas de backend son comunes.
El frontend conectado a ese backend normalmente tiene menos probabilidades de que algo explote a medianoche por procesos automáticos del backend, o de tener que preocuparse por la cantidad de usuarios y el volumen de datos.
Por difícil que sea el desarrollo inicial del frontend o su mantenimiento ante cambios en los navegadores, una vez terminado el desarrollo, es código estático que interactúa con subsistemas mucho más complejos, y esos subsistemas requieren atención constante cada vez que cambian los datos y las necesidades del negocio.
El problema no es mobile-first contra desktop, sino los diseñadores que todavía no entienden que la web es contenido dinámico que debe fluir según el tamaño y la forma de la pantalla del usuario.
La web no es un medio estático como el papel, ni está atada a un tamaño y una forma específicos, así que no debería tratarse así.
Un “diseñador” web no debería intentar encajar a la fuerza el contenido en un tamaño o una resolución de píxeles específicos; como las resoluciones de pantalla y las relaciones de aspecto son tan variadas, el contenido tiene que poder fluir para adaptarse a ellas.
También para usuarios con discapacidad visual que necesitan aumentar el tamaño de la fuente: si el contenido se rompe mucho al ampliar la tipografía, la accesibilidad empeora de forma importante.
Esas páginas también tienen que funcionar en navegadores móviles y de escritorio, y verse bien en ambos, pero no es tan difícil.
Solo toma un poco más de tiempo, y las media queries más algo de JavaScript lo hacen posible.
Al mismo tiempo, incluso para quienes llevamos mucho tiempo en esto, es un terreno caótico.
Hoy en día intento involucrarme lo más posible en la etapa de diseño aprovechando mi experiencia en diseño, y después de implementar y desplegar, lo manejo en plan “avísenme todo lo que se rompa en viewports raros que solo usa el 1% de los usuarios”, para corregirlo durante la revisión o en producción con parches de CSS y media queries por viewport.
Hay una razón por la que la longitud de línea del texto en todos los libros impresos es más o menos similar, y el ancho de lectura siempre debe estar limitado.
El ancho puede ser de 300px o de 1920px; se puede usar mouse, solo táctil, ambos o ninguno de los dos.
Menús hamburguesa e íconos pictográficos, en serio
Entiendo por qué se usan en móvil
Si solo hay espacio para el contenido, tiene sentido dejar unas pocas funciones como íconos pequeños y ocultar el resto de las acciones en un menú hamburguesa
Pero si hay espacio, usarlos así es terrible
En el mejor de los casos agregan pasos; en el peor, provocan accidentes mientras uno experimenta para averiguar qué hace cada ícono
Si deshacer funcionara bien, al menos sería tolerable, pero parece que también decidieron que eso podía estar roto
Como en las antiguas Apple HIG, en escritorio las acciones usadas con frecuencia deberían sacarse del menú y ponerse en botones con etiqueta, para que el usuario pueda responder “¿qué puedo hacer?” sin jugar a las escondidas
Deshacer es difícil de agregar después, así que debería estar desde el principio para reducir el costo de experimentar
Lamentablemente, el diseño móvil tomó el control tan por completo que, aunque casi toda la app vaya a usarse en escritorio y haya alguien adentro defendiendo el diseño de escritorio, el diseñador de UI elige hamburguesas, pictogramas y un deshacer roto
Además, los modales también volvieron con todo, pero por mi presión arterial tengo que parar acá
Incluso un teléfono económico de hace 5 años como el moto e4 tiene pantalla de 1280x720, y hay píxeles de sobra para poner etiquetas a los íconos
Los íconos pictográficos son casi un diseño que dice: “odiamos a nuestros usuarios y queremos que lo sepan”
Los menús hamburguesa también se pueden eliminar en muchos casos si uno mira la cantidad de opciones
La app de Gmail podría poner los íconos en una barra horizontal, pero usa hamburguesa; y si el espacio fuera tan importante, no habrían agregado también una barra inferior para Chat, video y Spaces
Me preocupa un poco que los usuarios no se den cuenta de que hay más opciones para desplazar, pero lo prefiero a un menú hamburguesa que se abre y tapa el contenido
Porque se pueden ver todas las opciones y sus palabras correspondientes
En escritorio no hace falta manejarlo así
Pero creo que a los diseñadores les gustan porque facilitan mantener un diseño consistente en varios idiomas
Por ejemplo, una localización al alemán puede ser difícil de acomodar
También agregaría las opciones dependientes del contexto ocultas
Las opciones deshabilitadas, es decir en gris, al menos muestran la posibilidad de que se pueda hacer algo si se cumplen las condiciones, y eso está bien
Pero el diseño moderno oculta esas opciones, y si no conoces la condición mágica que las hace aparecer, nunca las ves
Unifi de Ubiquiti es un ejemplo
En la página para administrar puertos de switch no hay opción “Select All”; primero hay que seleccionar al menos un puerto para que esa opción aparezca mágicamente
No solo está oculta, sino que además el contexto es incorrecto
Si hubiera estado como una casilla deshabilitada, todos se habrían dado cuenta de inmediato de lo obviamente tonto que es que una casilla “Select All” esté deshabilitada cuando no hay ningún puerto seleccionado
Se intimidan fácilmente si hay demasiadas cosas en pantalla, y son justamente ellos quienes dominan los focus groups
Por eso parece que los diseñadores quedaron atados a esta única regla horrible
Este estudio no tiene sentido en términos prácticos
Esas páginas no están diseñadas para transmitir la máxima información en el mínimo espacio, sino para vender un producto
Si se quiere afirmar que hay un impacto negativo por la dispersión del contenido, habría que medirlo según el objetivo para el que fue diseñada la página
Aquí se estudiaron explícitamente páginas de comercio electrónico y de producto, así que las métricas relevantes son qué página hizo que el producto se percibiera como más valioso, cuál tuvo mayor conversión, cuál tuvo mayor NPS o cuál generó más simpatía por la marca
Un parlante portátil no se vende por sus especificaciones, sino por la imagen aspiracional de usarlo en la playa
Si despliegas el acordeón de detalles del producto y preguntas “¿qué tan bien sientes que entendiste la propuesta que comunicó esta página?”, obviamente obtendrás una puntuación más alta en la encuesta
Si la página más densa convirtiera mejor, eso sí sería sorprendente
Es como diseñar un estudio sobre lo malos que son los asientos rígidos de un auto de F1, pegarles un montón de espuma y luego probar cuál es más cómodo, para finalmente declarar que es mejor porque obtuvo más puntaje de comodidad, cuando la única métrica original era el tiempo de vuelta
Las decisiones de diseño que critica el artículo no son resultado del diseño mobile-first
De hecho, los sitios web de fines de los 2000, antes de que el diseño responsivo se volviera común, también se veían así
Por ejemplo Apple: https://www.versionmuseum.com/history-of/apple-website
Básicamente compara la densidad de información de folletos de marketing o carteles publicitarios y luego dice que no transmiten todo, pero ese es precisamente el objetivo
Un anuncio no es una hoja de especificaciones, sino algo pensado para generar deseo por el producto en quien lo ve
Pero para mí, más bien puede ser una señal fuerte de tonterías de baja calidad
Muchos sitios web cambian por completo la UI cuando cambias el tamaño de la ventana
A veces quiero que el navegador ocupe solo la mitad del monitor y poner otra cosa al lado, pero en los sitios web modernos, al reducir la ventana la UI se vuelve inutilizable, así que a menudo no se puede
Cuando se hace bien es excelente, pero también es cierto que muchos sitios actúan de forma demasiado agresiva, como si solo hubieran probado realmente dos categorías de tamaño
Me pregunto si te refieres a que, al reducir la vista, ya no se puede acceder a funciones y contenido
Odio los sitios web que ponen el contenido útil en una columna delgada al centro
Lo peor es que incluso sitios que antes eran normales se van arruinando
Suele pasar cuando llega un nuevo responsable y quiere “reimaginar” el producto con una visión “mobile-first”
Patreon es un buen ejemplo reciente
Y en algunos casos, el sitio web normal desaparece por completo y lo reemplazan con una crapp como Venmo, Amazon Alexa o Chamberlain
Lo realmente incómodo es que no existe una buena alternativa táctil para hover
Es un elemento de UX demasiado útil como para descartarlo al pasar a mobile-first
En lo demás, está más cerca de “no es tan difícil”
Entre los problemas por resolver, lograr que se vea razonablemente bien en varios tamaños de pantalla está bastante abajo en términos de tiempo y complejidad
Al menos así lo uso en Firefox móvil para ver el texto alternativo de una imagen
Probablemente sea posible detectar el hover real, pero salvo que se use un stylus, creo que la UX sería mala
Como diseñador web, discrepo un poco
Los ejemplos del artículo funcionan mejor con contenido simple por pantalla
Son más fáciles de captar visualmente, y la versión comprimida tiene muchos diseños multicolumna que personalmente no me gustan
Una alta densidad de contenido encaja en aplicaciones de escritorio, pero no en sitios que básicamente son sitios web tipo folleto
Es bueno que no sea solo la impresión de alguien
Me cuesta creer que, tras décadas de evolución y pruebas, las páginas de marketing no hayan llegado a lo que los usuarios realmente quieren, y no a lo que dicen querer
Para los nativos de internet, hacer scroll es una acción muy natural
También es útil aprovechar una pantalla grande para comparar visualmente, pero los ejemplos del artículo no son buenos
Dice que “se colocó la misma información en una grilla 2x2 para permitir comparar varios servicios al mismo tiempo”, pero no sé qué habría que comparar
Son servicios distintos
Me gusta el ejemplo de las especificaciones de productos, pero eso se parece más a un problema objetivo de usabilidad que exige más clics para ver más información
Hay que notar que las capturas están “reducidas”, por eso la composición multicolumna se ve más rica y visualmente más atractiva
Estoy totalmente a favor de aprovechar el espacio horizontal, pero lo que hemos aprendido sobre los botones de llamada a la acción conduce a diseños de un solo elemento
Más que los sitios tipo folleto o de comercio electrónico, me irrita más el diseño mobile-first en sitios de productividad e interfaces de herramientas
¿Quién suele acceder a esas herramientas desde un teléfono?
Ya era doloroso ingresar con el teclado móvil los nombres y direcciones de empleadores y domicilios anteriores, pero ingresar fechas fue peor
Como el selector de fecha empezaba en el mes y año actuales y solo permitía desplazarse de a un mes, para ingresar mi fecha de nacimiento habría tenido que tocar unas 550 veces
Hasta me dieron ganas de denunciarlo ante la EEOC porque afecta de forma desproporcionada a los trabajadores mayores, una clase protegida, pero no era una buena forma de presentarme ante RR. HH. de mi nuevo empleador
En la práctica termina pareciéndose a la vista de pantalla pequeña, y eso es un requisito de WCAG