Análise e probasMarketing de Contido

As pantallas poden ser ultra-anchas, pero iso non significa que a túa páxina web debería ser

É probable que teñas visitado un sitio web cuxo deseño incorpore ancho total do navegador. Quizais teñas notado que o contido non era fácil de dixerir xa que os teus ollos escaneaban todo o ancho da páxina. En realidade, é unha lexibilidade e unha experiencia de usuario coñecidas (UX) asunto.

Investiga en tipografía e a psicoloxía cognitiva suxire que as liñas máis curtas fan que a lectura sexa máis fácil e cómoda. Cando as liñas de texto son demasiado longas, é máis difícil para os ollos rastrexar desde o final dunha liña ata o comezo da seguinte. Isto pode levar a unha maior fatiga ocular e dificultade para absorber o contido.

Historial de uso da columna

A ciencia do uso das columnas é fascinante e está enraizada na práctica e na lexibilidade.

  1. Perspectiva histórica: A tradición das columnas estreitas nos xornais remóntase aos primeiros tempos dos medios impresos. A principios do século XVII, cando xurdiron os xornais, adoitaban imprimirse nun só formato de folla ampla. Non obstante, a medida que evolucionaron os xornais, o deseño cambiou para incluír varias columnas. Este cambio foi impulsado en parte por limitacións tecnolóxicas e factores económicos. As imprentas utilizadas naqueles tempos eran limitadas na súa capacidade de imprimir en espazos amplos sen perder calidade, e as columnas máis estreitas significaban que podía caber máis texto nunha páxina, o que facía que o xornal fose máis rendible de producir.
  2. Lexibilidade e movemento dos ollos: Desde unha perspectiva científica, o ancho das columnas dos xornais está intimamente ligado á forma en que os nosos ollos e cerebros procesan a información escrita. A lonxitude de liña óptima para a lexibilidade do texto adoita ser duns 50-60 caracteres por liña.
  3. Impacto do ancho da columna na velocidade de lectura e comprensión: Os estudos demostraron que o ancho de columna estreito pode mellorar a velocidade de lectura e a comprensión. Isto débese a que as liñas máis curtas permiten un movemento ocular máis rápido e unha dixitalización de texto máis sinxela. Pola contra, as columnas anchas poden retardar a lectura xa que o ollo do lector ten que moverse de forma máis significativa dunha liña a outra.
  4. Adaptación ao deseño moderno: Aínda que o formato de xornal tradicional mantívose igual, os medios dixitais tiveron que adaptarse a diferentes tamaños de pantalla e hábitos de lectura. Os xornais en liña e os lectores electrónicos adoitan ofrecer anchos de columna axustables para acomodar as preferencias persoais e os diferentes tamaños de dispositivos.

Os principios derivados do deseño das columnas dos xornais tamén influíron no deseño web. Os sitios web adoitan usar columnas de texto estreitas ou esquemas de cuadrícula para facilitar a lectura, o que reflicte a sabedoría centenaria do deseño de deseño de xornais.

Ancho do navegador e resolucións de pantalla

Estatisticamente, os anchos de navegador e as resolucións de pantalla máis comúns varían segundo o tipo de dispositivo. Aquí tes unha táboa que mostra as resolucións máis comúns e as súas porcentaxes de cota de mercado para dispositivos móbiles, tabletas e de escritorio:

móbilComprimidoEscritorio
360 × 800 (11.65 %)768 × 1024 (26.96 %)1920 × 1080 (22.7 %)
390 × 844 (7.26 %)810 × 1080 (9.68 %)1366 × 768 (14.47 %)
414 × 896 (5.66 %)1280 × 800 (6.76 %)1536 × 864 (10.41 %)
393 × 873 (5.16 %)800 × 1180 (5.04 %)1440 × 900 (6.61 %)
328 × 926 (3.84 %)962 × 601 (2.99 %)1600 × 900 (3.8 %)

Estas estatísticas deberían influír significativamente no deseño da páxina web. Dada a diversidade de resolucións de pantalla, non é viable un enfoque único para todos. As empresas deben investir en deseño sensible aos móbiles, tendo en conta a parte importante do tráfico xerado a través de dispositivos móbiles (55.67%) e escritorios (42.4%).

Deseñar para pantallas ultra anchas quizais non sexa o enfoque máis eficaz, xa que pode levar a unha experiencia de lectura difícil debido á maior extensión horizontal do texto. Os deseñadores adoitan usar unha resolución estándar de escritorio e móbil para escalar deseños, garantindo unha experiencia de usuario fluida en todos os dispositivos. A elección entre un deseño web receptivo e móbil depende do público obxectivo e dos seus dispositivos preferidos.

Mellores prácticas de deseño de navegadores ultra anchos

Deseño de interfaces de usuario (UI) e garantindo unha experiencia de usuario positiva (UX) para pantallas ultra anchas implica varias prácticas recomendadas. Estas prácticas teñen como obxectivo optimizar o uso do espazo, mellorar a lexibilidade e garantir a facilidade de navegación. Aquí tes algunhas pautas clave:

  1. Proxecto Responsive: Asegúrate de que o teu sitio web ou aplicación responde, adaptándose con fluidez aos diferentes tamaños de pantalla. Isto é crucial para pantallas ultra anchas onde a relación de aspecto difire significativamente das pantallas estándar.
  2. Ancho de columna controlado: limita o ancho máximo das columnas de texto para o contido con moito texto. As columnas anchas poden dificultar a lectura, xa que o ollo ten que percorrer unha longa distancia desde o final dunha liña ata o comezo da seguinte.

Unha boa regra xeral é manter o ancho das columnas con 60-75 caracteres por liña.

  1. Uso de Grids: Implementar un sistema de cuadrícula para organizar o contido de forma eficaz. As cuadrículas axudan a crear un deseño equilibrado e poden ser útiles para xestionar espazos en branco en pantallas ultra anchas.
  2. Zonificación: divide a pantalla en zonas distintas para diferentes tipos de contido ou interacción. Isto axuda aos usuarios a navegar pola interface de forma máis intuitiva e reduce a carga cognitiva.
  3. Navegación da barra lateral: Considere o uso de barras laterais para a navegación e información adicional. Isto utiliza o espazo horizontal extra de forma eficaz sen afectar a área de contido principal.
  4. Disposición xerárquica: Empregue unha xerarquía visual clara para guiar o ollo do usuario a través do contido. Isto é especialmente importante en pantallas máis grandes con maior risco de desorientación.
  5. Aliñación consistente: Manter a coherencia do aliñamento na interface. Os elementos desalineados poden ser máis perceptibles e distraer en pantallas máis anchas.
  6. Áreas de contido enfocadas: Crea áreas enfocadas para contido importante para chamar a atención do usuario. Isto pódese conseguir mediante cores contrastantes, variacións de tamaño ou elementos gráficos.
  7. Evite o desprazamento horizontal: O desprazamento horizontal pode desorientar e debe evitarse. Deseña deseños que acomoden o contido verticalmente, mesmo en pantallas máis anchas.
  8. Optimizar para a lexibilidade: Asegúrate de optimizar o tamaño do texto, o interlineado e a elección da fonte. O texto demasiado pequeno ou limitado pode ser un reto de ler nunha pantalla grande.
  9. Facilitación multitarefa: Dado que as pantallas ultra-anchas ofrecen máis espazo, deseña interfaces que faciliten a multitarefa, como varias fiestras ou paneis abertos.
  10. Accesibilidade: Teña presente a accesibilidade, asegurándose de que todos os usuarios, independentemente do seu dispositivo, poidan acceder e utilizar o seu sitio de forma eficaz.
  11. Probas entre dispositivos: proba o teu deseño en varios dispositivos, incluídos monitores ultra anchos, para garantir que se escala e funciona ben en todos os escenarios posibles.
  12. Use imaxes de alta resolución: Utiliza imaxes de alta resolución que non se pixelen en pantallas máis grandes, mantendo a calidade visual da túa interface.
  13. Espazo en branco equilibrado: utiliza os espazos en branco con criterio para crear un deseño que non se sinta abarrotado pero que utilice de forma eficaz a ampla pantalla inmobiliaria.

Lembre, a clave para un deseño de UI/UX eficaz para pantallas ultra-anchas non só consiste en ampliar os elementos para encher o espazo, senón na organización e adaptación do contido pensada para mellorar o compromiso e a experiencia dos usuarios.

Para algúns tamaños de letra medios, o ancho de 75 caracteres (incluído o espazo entre caracteres) en píxeles sería aproximadamente o seguinte:

  • Tipo de letra de 10 puntos: 375.0 píxeles
  • Tipo de letra de 12 puntos: 450.0 píxeles
  • Tipo de letra de 14 puntos: 525.0 píxeles
  • Tipo de letra de 16 puntos: 600.0 píxeles
  • Tipo de letra de 18 puntos: 675.0 píxeles
  • Tipo de letra de 20 puntos: 750.0 píxeles

Estes cálculos supoñen que o ancho dun carácter nunha fonte media é aproximadamente a metade da súa altura, incluíndo un espazo entre os caracteres. Así que... unha pantalla ancha de 1920 píxeles pode requirir dividirse en varias columnas para maximizar a lexibilidade.

A decisión sobre as dimensións do sitio web a utilizar debe basearse na demografía do público obxectivo, incluíndo idade, sexo, localización e ingresos, xa que poden ditar os dispositivos que usan.

Google Analytics 4: Resolucións de pantalla

Se queres revisar o comportamento posterior dos teus visitantes, GA4 pode proporcionar isto Informes > Usuario > Técnica > Visión xeral.

Asegúrate de filtrar os teus datos para fins de semana ou fóra do horario, eventos e conversións... podes atopar información e oportunidades para presentar mellor o teu contido en función de cando e por que os visitantes interactúan en función da súa resolución de pantalla.

Resolución de pantalla GA4 por usuario

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.