Anàlisi i provesContent Màrqueting

Les pantalles poden ser molt àmplies, però això no vol dir que la vostra pàgina web ho hagi de ser

És probable que hagis visitat un lloc web el disseny del qual incorpori amplada completa del navegador. És possible que hàgiu notat que el contingut no era fàcil de digerir, ja que els vostres ulls escanejaven tota l'amplada de la pàgina. En realitat, és una llegibilitat i una experiència d'usuari conegudes (UX) assumpte.

Investigació en tipografia i la psicologia cognitiva suggereix que les línies més curtes fan que la lectura sigui més fàcil i còmoda. Quan les línies de text són massa llargues, és més difícil per als ulls fer un seguiment des del final d'una línia fins al començament de la següent. Això pot provocar una major fatiga ocular i dificultat per absorbir el contingut.

Historial d'ús de la columna

La ciència de l'ús de columnes és fascinant i està arrelada en la practicitat i la llegibilitat.

  1. Perspectiva històrica: La tradició de les columnes estretes als diaris es remunta als primers temps dels mitjans impresos. A principis del segle XVII, quan van sorgir per primera vegada els diaris, sovint s'imprimien amb un sol format de full ample. Tanmateix, a mesura que els diaris van evolucionar, el disseny va canviar per incloure diverses columnes. Aquest canvi va ser impulsat en part per limitacions tecnològiques i factors econòmics. Les impremtes utilitzades en aquells temps eren limitades en la seva capacitat d'imprimir en espais amplis sense perdre qualitat, i les columnes més estretes significaven que hi podia cabre més text en una pàgina, fent que el diari fos més rendible de produir.
  2. Llegibilitat i moviment ocular: Des d'una perspectiva científica, l'amplada de les columnes dels diaris està estretament lligada a com els nostres ulls i cervell processen la informació escrita. La longitud de línia òptima per a la llegibilitat del text sol ser d'uns 50-60 caràcters per línia.
  3. Impacte de l'amplada de la columna en la velocitat de lectura i la comprensió: Els estudis han demostrat que les amplades de columnes estretes poden millorar la velocitat de lectura i la comprensió. Això es deu al fet que les línies més curtes permeten un moviment ocular més ràpid i una exploració de text més fàcil. En canvi, les columnes amples poden alentir la lectura, ja que l'ull del lector s'ha de moure de manera més significativa d'una línia a una altra.
  4. Adaptació al disseny modern: Si bé el format de diari tradicional s'ha mantingut, els mitjans digitals s'han hagut d'adaptar a diferents mides de pantalla i hàbits de lectura. Els diaris en línia i els lectors electrònics sovint ofereixen amplades de columnes ajustables per adaptar-se a les preferències personals i a diferents mides de dispositiu.

Els principis derivats del disseny de columnes de diaris també han influït en el disseny web. Els llocs web sovint utilitzen columnes de text estretes o dissenys de quadrícula per facilitar la lectura, cosa que reflecteix la saviesa centenària del disseny de maquetació de diaris.

Amplades del navegador i resolucions de pantalla

Estadísticament, les amplades i resolucions de pantalla més habituals del navegador varien segons el tipus de dispositiu. A continuació es mostra una taula que mostra les resolucions més habituals i els seus percentatges de quota de mercat per a dispositius mòbils, tauletes i ordinadors:

mòbilRajolaescriptori
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%)

Aquestes estadístiques haurien d'influir significativament en el disseny de la pàgina web. Donada la diversitat de resolucions de pantalla, no és factible un enfocament únic. Les empreses han d'invertir en un disseny sensible al mòbil, tenint en compte la part important del trànsit generat a través de dispositius mòbils (55.67%) i ordinadors de sobretaula (42.4%).

El disseny per a pantalles ultraàmplies pot ser que no sigui l'enfocament més eficaç, ja que pot provocar una experiència de lectura difícil a causa de l'abast horitzontal més llarg del text. Els dissenyadors solen utilitzar una resolució estàndard d'escriptori i mòbil per escalar els dissenys, garantint una experiència d'usuari fluida en tots els dispositius. L'elecció entre el disseny web responsiu i el disseny web per a mòbils depèn del públic objectiu i dels seus dispositius preferits.

Pràctiques recomanades de disseny de navegador ultra ample

Disseny d'interfícies d'usuari (UI) i garantir una experiència d'usuari positiva (UX) per a pantalles ultra-àmplies implica diverses pràctiques recomanades. Aquestes pràctiques tenen com a objectiu optimitzar l'ús de l'espai, millorar la llegibilitat i garantir la facilitat de navegació. Aquí hi ha algunes directrius clau:

  1. Responsive Design: Assegureu-vos que el vostre lloc web o aplicació respongui, adaptant-se amb fluïdesa a diferents mides de pantalla. Això és crucial per a pantalles ultra amples on la relació d'aspecte difereix significativament de les pantalles estàndard.
  2. Amplades de columna controlades: Limiteu l'amplada màxima de les columnes de text per al contingut amb molta text. Les columnes amples poden dificultar la lectura, ja que l'ull ha de recórrer una llarga distància des del final d'una línia fins al començament de la següent.

Una bona regla general és mantenir l'amplada de columnes d'entre 60 i 75 caràcters per línia.

  1. Ús de quadrícules: Implementar un sistema de graella per organitzar el contingut de manera eficaç. Les quadrícules ajuden a crear un disseny equilibrat i poden ser útils per gestionar els espais en blanc a pantalles ultraàmplies.
  2. Zonament: divideix la pantalla en zones diferents per a diferents tipus de contingut o interacció. Això ajuda els usuaris a navegar per la interfície de manera més intuïtiva i redueix la càrrega cognitiva.
  3. Navegació de la barra lateral: Penseu en utilitzar barres laterals per a la navegació i informació addicional. Això utilitza l'espai horitzontal addicional de manera eficaç sense afectar l'àrea de contingut principal.
  4. Disseny jeràrquic: Utilitzeu una jerarquia visual clara per guiar l'ull de l'usuari a través del contingut. Això és especialment important en pantalles més grans amb un major risc de desorientació.
  5. Alineació consistent: Mantenir la coherència de l'alineació a la interfície. Els elements desalineats poden ser més notables i distreure en pantalles més amples.
  6. Àrees de contingut enfocades: Creeu àrees enfocades per a contingut important per cridar l'atenció de l'usuari. Això es pot aconseguir mitjançant colors contrastants, variacions de mida o elements gràfics.
  7. Eviteu el desplaçament horitzontal: El desplaçament horitzontal pot ser desorientador i s'ha d'evitar. Dissenyeu dissenys que s'adaptin al contingut verticalment, fins i tot en pantalles més àmplies.
  8. Optimitzar per a la llegibilitat: Assegureu-vos que la mida del text, l'interlineat i l'elecció del tipus de lletra estiguin optimitzats. El text massa petit o petit pot ser difícil de llegir en una pantalla gran.
  9. Facilitació de la multitasca: Com que les pantalles ultraàmplies ofereixen més espai, dissenyeu interfícies que facilitin la multitasca, com ara múltiples finestres o panells oberts.
  10. Accessibilitat: Tingueu en compte l'accessibilitat, assegurant-vos que tots els usuaris, independentment del seu dispositiu, puguin accedir i utilitzar el vostre lloc de manera eficaç.
  11. Proves a través de dispositius: Proveu el vostre disseny en diversos dispositius, inclosos monitors ultra amples, per assegurar-vos que s'escala i funcioni bé en tots els escenaris possibles.
  12. Utilitzeu imatges d'alta resolució: Utilitzeu imatges d'alta resolució que no es pixelin en pantalles més grans, mantenint la qualitat visual de la vostra interfície.
  13. Espais en blanc equilibrats: Utilitzeu els espais en blanc amb prudència per crear un disseny que no se senti ple de gent, però que faci servir de manera eficaç l'ampli espai de la pantalla.

Recordeu que la clau per a un disseny d'interfície d'usuari/UX eficaç per a pantalles ultra-àmplies no és només augmentar els elements per omplir l'espai, sinó més aviat una organització i adaptació reflexiva del contingut per millorar la implicació i l'experiència dels usuaris.

Per a algunes mides de lletra mitjanes, l'amplada de 75 caràcters (inclòs l'espai entre caràcters) en píxels seria aproximadament la següent:

  • Tipus de lletra de 10 punts: 375.0 píxels
  • Tipus de lletra de 12 punts: 450.0 píxels
  • Tipus de lletra de 14 punts: 525.0 píxels
  • Tipus de lletra de 16 punts: 600.0 píxels
  • Tipus de lletra de 18 punts: 675.0 píxels
  • Tipus de lletra de 20 punts: 750.0 píxels

Aquests càlculs suposen que l'amplada d'un caràcter en una font mitjana és aproximadament la meitat de la seva alçada, inclòs un espai entre caràcters. Per tant... una pantalla ampla de 1920 píxels pot requerir dividir-se en diverses columnes per maximitzar la llegibilitat.

La decisió sobre quines dimensions del lloc web s'ha d'utilitzar s'ha de basar en les dades demogràfiques del públic objectiu, com ara l'edat, el sexe, la ubicació i els ingressos, ja que poden determinar els dispositius que utilitzen.

Google Analytics 4: resolucions de pantalla

Si voleu revisar el comportament posterior dels vostres visitants, GA4 pot proporcionar-ho Informes > Usuari > Tecnologia > Visió general.

Assegureu-vos de filtrar les vostres dades per als caps de setmana o fora de l'horari, esdeveniments i conversions... és possible que trobeu informació i oportunitats per presentar millor el vostre contingut en funció de quan i per què els visitants interactuen en funció de la resolució de la seva pantalla.

Resolució de pantalla GA4 per usuari

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.