¿Por qué la mayoría de las aplicaciones web solo están diseñadas para adaptarse a la mitad de la pantalla en un monitor grande?

Muchas compañías, y casi seguramente Facebook, LinkedIn y Quora, tienen datos que les indican las resoluciones de pantalla y los dispositivos que tienen sus usuarios. Al tomar decisiones de diseño, consideran:

  • qué% de sus usuarios tienen qué dispositivos y resoluciones
  • cuán costoso es diseñar, construir y mantener diferentes versiones de sus productos, y dónde es razonable dados los porcentajes mencionados anteriormente
  • Problemas de UX relacionados con la lectura de largas líneas horizontales de texto o con diseños muy diferentes en función de los tamaños de pantalla [1]

Son todas las temidas consideraciones de “compensación”. Un porcentaje tan pequeño de usuarios de Facebook + 1B accede a Facebook en, por ejemplo, monitores 4K, que sería una pérdida de tiempo y recursos construir una versión especial de Facebook que maneje de manera sensata todo ese patrimonio solo para aquellos pocos usuarios que podrían beneficiarse [ 2] Es mucho más importante adaptarse a las limitaciones que a los lujos de todos modos; Más personas quieren usar Facebook desde teléfonos con funciones que desde monitores 4K.

Por lo tanto, es probable que los porcentajes no lo admitan como una prioridad entre el resto. A medida que las pantallas más grandes y densas proliferan gradualmente y los diseños automáticos y otras tecnologías receptivas se vuelven más comunes, las aplicaciones y los sitios probablemente obtendrán más resolución independiente. Pero en los extremos, los diseños casi siempre se rompen de una forma u otra, y aquellos de nosotros con grandes monitores estamos actualmente en los extremos.

Notas
1. Paul Tomblin menciona esto pero sugiere que se trata del número total de palabras, lo cual no es así; las páginas del libro no tienen varios pies de ancho después de todo. La mayoría de los libros, especialmente los libros de texto, tienen una orientación “vertical” en lugar de “horizontal” por alguna razón. Y los periódicos usan columnas de ancho limitado no por la sabiduría convencional sino porque escanear líneas largas es difícil para las personas.
2. Ni siquiera está claro cuántas personas con pantallas gigantes querrían esto, ni cómo “desear” que esto conduzca a un mayor o mejor uso de Facebook (o Quora o LinkedIn). Algunas personas con pantallas de alta resolución —me por ejemplo— mantienen las ventanas del navegador relativamente estrechas; De todos modos, no uso la pantalla completa de todas las aplicaciones, y rara vez he pensado: “Hombre, ¡desearía que hubiera más de este sitio web en mi pantalla ahora mismo!” En otras palabras: la ventaja de un diseño de maximización del estado de la pantalla es incierta, a pesar de nuestras preferencias individuales.

Se me ocurren dos razones.

En primer lugar, hay un límite superior de cuán ancho puede ser un cuerpo de texto antes de que sea difícil de leer. Creo que generalmente se acepta que esto cae entre 50 y 75 caracteres. Un poco más y comienza a ser más difícil encontrar el comienzo de la siguiente línea a medida que lees.

En segundo lugar, diseñar un diseño fluido es difícil. Aunque css se puede usar para ajustar fácilmente el ancho de los elementos en una página de acuerdo con el ancho de la ventana gráfica (la mayoría de los diseños móviles simplemente ajustan los elementos al 100% de ancho usando css), cambiar la posición real de los elementos no es tan fácil, la mayoría de las veces no es así. necesariamente implicaría cambiar el marcado subyacente (estructura) de la página. Por lo general, el marcado está definido por el servidor del sitio web y no en el lado del cliente (en el navegador que usa JavaScript). Manipular el marcado usando javascript en el lado del cliente puede complicarse muy rápidamente, lo que hace que el mantenimiento sea una pesadilla.

En conjunto, las dos razones anteriores significan que el beneficio de diseñar, implementar y mantener un diseño de ‘pantalla extra ancha’ generalmente no vale la pena el esfuerzo. Además, puede que no sea necesariamente necesario usar todo ese espacio en la pantalla: la mayoría del contenido que debe mostrarse ya se tiene en cuenta.

Hice una pregunta similar ¿Por qué Quora solo usa el 40% de la pantalla? Puede encontrar alguna información allí.

El usuario de Quora mencionó:
Lo más probable es que mantenga la interfaz de usuario coherente en diferentes anchos de pantalla. El sitio está construido en el mínimo común denominador de anchos (para pantallas de escritorio y portátiles) y el resto (cuando está presente) está rellenado con espacios en blanco.

Básicamente, es más fácil de leer de esa manera frente a una página muy amplia. Ayuda a dirigir la vista hacia dónde ir, lo hace menos ocupado y facilita el desplazamiento de línea a línea, ya que puede ver el inicio y el final de cada línea de texto, en comparación con una página muy amplia. Es por eso que los periódicos también usan columnas estrechas.

En el pasado, lo hicimos porque el diseño receptivo aún no se inventó, pero todavía no me gusta ir más allá de 1400 px. Pero eso es mejor que 960 u 800 × 600.

Cuando me quejé de esto después de obtener un monitor 4K, me dijeron que la sabiduría convencional es que la mayoría de las personas no pueden o no leen el texto si hay más de un pequeño número de palabras en una línea.

Personalmente, creo que es falso, porque leo libros que tienen más palabras que ese Facebook.

Sea como fuere, terminé colocando 4 ventanas del navegador en mi pantalla.

Eventualmente todos lo harán, pero era bastante común detenerse en 1024px de ancho hace solo unos años.

Los marcos receptivos como bootstrap tienen límites superiores predeterminados de 1170.

More Interesting

¿Cuáles son las mejores aplicaciones / complementos web para aumentar la productividad en la computadora?

¿Es un buen momento para entrar en el diseño y desarrollo de aplicaciones web y móviles?

¿Las aplicaciones web serán el futuro (muy cercano) de la web?

¿Qué usan los profesionales si no es un CMS?

¿Cuáles son algunos ejemplos geniales y creativos de tutoriales de incorporación para aplicaciones web?

¿Cuáles son las ventajas competitivas de Pusher vs. PubNub?

¿Qué aplicaciones web muestran tutoriales interactivos antes de usar?

¿Java todavía se usa para aplicaciones web modernas o sitios web?

¿Cuál es el mejor editor de texto HTML 2016?

¿Cuál es la mejor manera para que los estudiantes de secundaria sin conocimientos de programación creen sus propias aplicaciones?

¿Deberíamos usar alguna solución de hosting de pago ya que hay una gran cantidad de proveedores y soluciones gratuitas (nicho) que parecen profesionales y cuestan menos (que el hosting tradicional) o son gratuitas y vienen con muchas características de la nueva era?

He desarrollado una herramienta web, ¿debería venderla o lanzarla gratis con anuncios?

¿Cuánto debo cobrar por un proyecto de diseño de interfaz de usuario?

¿Qué debo elegir para una aplicación web altamente personalizada en R, Shiny vs. OpenCPU?

¿Qué es un buen marco PHP como WordPress, pero para construir aplicaciones web? Necesito un marco que pueda manejar la administración de usuarios, el motor de plantillas, las actualizaciones de seguridad y que tenga buena documentación para el desarrollo.