Analitika i testiranjeContent marketing

Zasloni mogu biti ultra široki, ali to ne znači da bi vaša web stranica trebala biti

Vjerojatno ste posjetili web stranicu čiji dizajn uključuje puna širina preglednika. Možda ste primijetili da sadržaj nije lako probaviti dok ste očima skenirali cijelu širinu stranice. To je zapravo dobro poznata čitljivost i korisničko iskustvo (UX) problem.

Istraživanje u tipografija a kognitivna psihologija sugerira da kraći redovi čine čitanje lakšim i ugodnijim. Kada su redovi teksta predugi, očima postaje veći izazov pratiti od kraja jednog retka do početka sljedećeg. To može dovesti do povećanog naprezanja očiju i poteškoća u upijanju sadržaja.

Povijest korištenja stupca

Znanost o korištenju stupaca je fascinantna i ukorijenjena u praktičnosti i čitljivosti.

  1. Povijesna perspektiva: Tradicija uskih stupaca u novinama može se pratiti do ranih dana tiskanih medija. Početkom 17. stoljeća, kada su se novine prvi put pojavile, često su se tiskale u jednom širokom formatu. Međutim, kako su novine evoluirale, izgled se promijenio i uključuje više stupaca. Ova je promjena djelomično potaknuta tehnološkim ograničenjima i ekonomskim čimbenicima. Tiskarski strojevi koji su se koristili u to doba bili su ograničeni u svojoj mogućnosti ispisa na širokim prostorima bez gubitka kvalitete, a uži stupci značili su da više teksta može stati na stranicu, čineći novine isplativijima za proizvodnju.
  2. Čitljivost i pokreti očiju: Iz znanstvene perspektive, širina novinskih stupaca usko je povezana s načinom na koji naše oči i mozak obrađuju pisane informacije. Optimalna duljina retka za čitljivost teksta obično je oko 50-60 znakova po retku.
  3. Utjecaj širine stupca na brzinu čitanja i razumijevanje: Studije su pokazale da uske širine stupaca mogu poboljšati brzinu čitanja i razumijevanje. To je zato što kraći redovi omogućuju brže kretanje očiju i lakše skeniranje teksta. Nasuprot tome, široki stupci mogu usporiti čitanje jer se čitateljevo oko mora značajno pomicati od retka do retka.
  4. Prilagodba modernom dizajnu: Dok je tradicionalni novinski format ostao isti, digitalni mediji morali su se prilagoditi različitim veličinama zaslona i navikama čitanja. Internetske novine i e-čitači često nude podesive širine stupaca kako bi se prilagodile osobnim preferencijama i različitim veličinama uređaja.

Načela izvedena iz dizajna novinskih stupaca također su utjecala na web dizajn. Web stranice često koriste uske tekstualne stupce ili rešetkaste rasporede za lakše čitanje, odražavajući stoljetnu mudrost dizajna izgleda novina.

Širina preglednika i razlučivost zaslona

Statistički, najčešće širine preglednika i rezolucije zaslona razlikuju se ovisno o vrsti uređaja. Ovdje je tablica koja prikazuje najčešće rezolucije i njihov postotak tržišnog udjela za mobilne, tabletne i stolne uređaje:

MobilniTabletadesktop
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%)

Ova statistika bi trebala značajno utjecati na dizajn web stranice. S obzirom na raznolikost razlučivosti zaslona, ​​pristup koji odgovara svima nije izvediv. Poduzeća moraju ulagati u dizajn prilagođen mobilnim uređajima, s obzirom na značajan udio prometa generiranog putem mobilnih uređaja (55.67%) i stolnih računala (42.4%).

Dizajniranje za ultraširoke zaslone možda nije najučinkovitiji pristup jer može dovesti do otežanog iskustva čitanja zbog većeg horizontalnog raspona teksta. Dizajneri obično koriste jednu standardnu ​​rezoluciju stolnih i mobilnih uređaja za skaliranje dizajna, osiguravajući glatko korisničko iskustvo na svim uređajima. Izbor između responzivnog i mobilnog web dizajna ovisi o ciljanoj publici i njihovim željenim uređajima.

Najbolje prakse dizajna ultraširokog preglednika

Dizajn korisničkih sučelja (UI) i osiguravanje pozitivnog korisničkog iskustva (UX) za ultraširoke zaslone uključuje nekoliko najboljih praksi. Ove prakse imaju za cilj optimizirati korištenje prostora, poboljšati čitljivost i osigurati jednostavnost navigacije. Evo nekoliko ključnih smjernica:

  1. Osjetljivi dizajn: Osigurajte da vaša web stranica ili aplikacija reagira, glatko se prilagođava različitim veličinama zaslona. Ovo je presudno za ultraširoke zaslone gdje se omjer širine i visine znatno razlikuje od standardnih zaslona.
  2. Kontrolirane širine stupaca: Ograničite maksimalnu širinu tekstualnih stupaca za tekstualni sadržaj. Široki stupci mogu otežati čitanje jer oko mora prijeći veliku udaljenost od kraja jednog retka do početka sljedećeg.

Dobro pravilo je održavanje širine stupca od 60-75 znakova po retku.

  1. Korištenje rešetki: Implementirajte mrežni sustav za učinkovitu organizaciju sadržaja. Mreže pomažu u stvaranju uravnoteženog izgleda i mogu biti korisne u upravljanju razmakom na ultraširokim zaslonima.
  2. zoniranje: Podijelite zaslon u različite zone za različite vrste sadržaja ili interakcije. Ovo pomaže korisnicima da se intuitivnije kreću sučeljem i smanjuje kognitivno opterećenje.
  3. Navigacija na bočnoj traci: Razmislite o korištenju bočnih traka za navigaciju i dodatne informacije. Ovo učinkovito iskorištava dodatni vodoravni prostor bez utjecaja na područje glavnog sadržaja.
  4. Hijerarhijski raspored: Upotrijebite jasnu vizualnu hijerarhiju kako biste vodili oko korisnika kroz sadržaj. Ovo je osobito važno na većim zaslonima s većim rizikom dezorijentiranosti.
  5. Dosljedno poravnanje: Održavajte dosljednost poravnanja preko sučelja. Neusklađeni elementi mogu biti uočljiviji i ometati na širim zaslonima.
  6. Fokusirana područja sadržaja: Stvorite fokusirana područja za važan sadržaj kako biste privukli pozornost korisnika. To se može postići korištenjem kontrastnih boja, varijacija veličine ili grafičkih elemenata.
  7. Izbjegavajte vodoravno pomicanje: Horizontalno pomicanje može dezorijentirati i treba ga izbjegavati. Dizajnirajte izglede koji prilagođavaju sadržaj okomito, čak i na širim zaslonima.
  8. Optimizirajte za čitljivost: Provjerite jesu li veličina teksta, prored i izbor fonta optimizirani. Premalen ili skučen tekst može predstavljati izazov za čitanje na velikom zaslonu.
  9. Olakšavanje višezadaćnosti: Budući da ultraširoki zasloni nude više prostora, dizajnirajte sučelja koja olakšavaju multitasking, poput višestrukih otvorenih prozora ili ploča.
  10. Pristupačnost: Imajte na umu pristupačnost, osiguravajući da svi korisnici, bez obzira na njihov uređaj, mogu pristupiti i učinkovito koristiti vašu stranicu.
  11. Testiranje na više uređaja: Testirajte svoj dizajn na različitim uređajima, uključujući ultraširoke monitore, kako biste bili sigurni da se skalira i dobro radi u svim mogućim scenarijima.
  12. Koristite slike visoke rezolucije: Koristite slike visoke razlučivosti koje se ne pikseliraju na većim zaslonima, održavajući vizualnu kvalitetu vašeg sučelja.
  13. Uravnoteženi razmak: Koristite razborito razmake kako biste stvorili izgled koji ne djeluje pretrpano, a učinkovito iskorištava prostrani zaslon.

Upamtite, ključ učinkovitog UI/UX dizajna za ultraširoke zaslone nije samo povećanje elemenata za popunjavanje prostora, već promišljena organizacija i prilagodba sadržaja kako bi se poboljšao korisnički angažman i iskustvo.

Za neke prosječne veličine fonta, širina od 75 znakova (uključujući razmak između znakova) u pikselima bila bi otprilike sljedeća:

  • 10pt font: 375.0 piksela
  • 12pt font: 450.0 piksela
  • 14pt font: 525.0 piksela
  • 16pt font: 600.0 piksela
  • 18pt font: 675.0 piksela
  • 20pt font: 750.0 piksela

Ovi izračuni pretpostavljaju da je širina znaka u prosječnom fontu otprilike pola njegove visine, uključujući razmak između znakova. Dakle… široki zaslon od 1920 piksela može zahtijevati razbijanje u više stupaca kako bi se povećala čitljivost.

Odluka o tome koje će se dimenzije web stranice koristiti trebala bi se temeljiti na demografskim podacima ciljne publike, uključujući dob, spol, lokaciju i prihode, jer oni mogu diktirati uređaje koje koriste.

Google Analytics 4: razlučivost zaslona

Ako želite pregledati naknadno ponašanje svojih posjetitelja, GA4 vam to može pružiti Izvješća > Korisnik > Tehnički > Pregled.

Obavezno filtrirajte svoje podatke za vikende ili izvan radnog vremena, događaje i konverzije… možda ćete pronaći uvid i prilike da bolje predstavite svoj sadržaj na temelju toga kada i zašto posjetitelji stupaju u interakciju na temelju rezolucije zaslona.

GA4 rezolucija zaslona prema korisniku

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.