Cum se numeste…? – Anatomia unei pagini web

Am decis sa atac frontal problema diferitelor componente ale unei pagini web, intrucat in urma unor discutii am ajuns la concluzia ca desi persoanele tehnice sau care au fost expuse la informatie pot considera problema „banala”, informatia nu e tocmai la indemana atunci cand trebuie sa o mai si traduci sau interpetezi sau filtrezi.
Asa ca astazi disecam paginile de internet si componentele lor majore, si incercam sa aflam si niste bune-practici. 
homepage-cloudberries
Voi incepe cu o pagina „generala”, care poate foarte bine sa fie si un homepage (*), si apoi am sa continui cu o pagina standard de articol de blog, pentru ca altfel ajungeam sa am doar sagetele si numere pe schitza facuta de mine.

Am alcatuit mai jos doua wireframe-uri(**), si voi purcede la drum explicandu-le in ordinea numerelor de pe tricou. 😀

Anatomie pagina web-corcodus

  • 1 Antetul (Headerul)

Antetul de obicei este partea de sus a unei pagini si este partea dintr-o pagina care contine: numele site-ului, logo-ul, meniul principal al site-ului si alte elemente precum iconitele sociale si eventual un formular de cautare.

Poarta denumirea de antet pentru ca, de-a lungul timpului, pe hartia de scris dar si alte documente importante partea de sus a paginii continea informatiile de identificare ale persoanei sau companiei.  Antetul unui site poate fi si vertical, mai ales la unele site-uri sau teme mai noi.
Temele de WordPress au un fisier separat pentru antet, denumit header.php. Aici se poate adauga codul de urmarire de la G.Analitycs, se pot chema fonturi de genul celor de la G. Fonts, sau se pot adauga bannere care trebuie sa apara sus pe pagina, pe fiecare pagina.

Mare atentie la editare, pentru ca uitarea unei virgule poate strica afisarea intregului site. 

  • 2 Logo-ul

Logo-ul poate fi grafic, poate fi de tip text sau poate fi si text si grafica.

Atentie: este o diferenta intre logo si „Header Image”. De obicei logo-ul este un simbol, o marca a unui brand/blog/produs, si desi el poate aparea intr-o imagine de header, cele doua nu trebuiesc confundate. Logo-ul este ceea ce poti translata ulterior pe carti de vizita, in avataruri de social media, in semnatura de e-mail, etc.

  • 3 Meniul

Meniul, la fel ca antetul poate fi orizontal sau vertical.

Acesta poate fi static (adica atunci cand se da scroll in jos dispare din ecran), poate fi mobil (in sensul ca atunci cand se da scroll el ramane mereu in partea de sus a ecranului). El este gandit sa ofere o experienta de navigare cat mai placuta unui utilizator de site: ii pune la dispozitie cele mai relevante pagini (Despre, Contact), scoate in fata cele mai populare categorii de articole, sau alte utilitati de pe site (newsletter, blogroll etc.).

Unele site-uri (in speta teme) au optiunea de a seta meniuri secundare (fie deasupra/dedesubtul celui principal, fie in footer/subsol).

Exista doua mari greseli care pot fi facute legat de meniuri:
a. Sa nu le folosesti deloc (adica sa ai doar 1-2 pagini irelevante acolo).
b. Sa arunci in meniu toate paginile, categoriile, tag-urile si in general sa faci un mare talmes-balmes din el, a.i. el sa devina nu doar irelevant pentru vizitator ci de-a dreptul o sursa de frustrare.

Un alt termen important aici ar fi ideea de „bara de sus”. Avand in vedere ca designul astazi este atat inventiv cat si bogat in idei, „bara de sus” a unui site poate fi alcatuita din: date de contact, un meniu secundar, iconite sociale (social icons), un anunt de abonare la newsletter, samd. Meniul e meniu, si e atat de omni-prezent incat merita sa il cunosti pe nume. 🙂

Si inca ceva: un singur element de meniu, de exemplu: „Acasa”, nu este nici tab, nici buton, nici tocmai link-link. Se numeste simplu „Menu item” in limba engleza, si „element de meniu” in limba romana.

  • 4 Elemente secundare meniu (drop-down menu)

Atunci cand, precum in exemplul dat de mine mai sus, un meniu are si sub-pagini care sunt ordonate in meniu in functie de o alta pagina, ca sub-elemente, acest ansamblu se numeste „drop-down menu”. Pentru ca atunci cand cineva trece cu mouse-ul peste elementul de care apartin cele secundare, ele se afiseaza in jos, pornind de la primul element.
Daca o pagina este astfel adaugata ca sub-pagina in meniu, ea apartine nivelului doi de navigare.

Pot exista si pagini pe nivelul 3 sau 4, dar de la nivelul 3 in colo lucrurile devin din ce in ce mai complicate, si riscul de a frustra un utilizator (mai ales in navigarea pe mobil) e real. Si merita evitat.

  • 5 Continutul paginii

Continutul paginii reprezinta totalul elementelor dintr-o pagina care nu tin de Antet, Bara laterala sau de Subsol. Am tinut sa mentionez ca sectiune separata Continutul paginii intrucat de obicei in WordPress ea este alcatuita cu ajutorul unui fisier separat (pentru articole el este single.php, pentru pagini este page.php, pentru homepage este main-index.php, sau o variatiune pe aceasta tema – dar exista fisiere separate penteu arhive, cautari si sa mai departe). De obicei continutul poate fi impartit in mai multe zone, si pe acestea le vom discuta in partea a doua a articolului de fata.

  • 6 Slider (carusel)

Sliderul (sau caruselul, desi exista sustinatori pentru ambele denumiri), a devenit o parte omniprezenta din viata site-urilor in ultimii ani. E atat de ubicuu incat unii utilizatori il pot chiar ignora cu desavarsire. Desigur, facut cum trebuie, el va prezenta vizitatorilor acele informatii vizuale necesare pentru o prima impresie favorabila.

Cateva greseli des intalnite:

a. Folosirea unui numar de slide-uri(***) prea mare (dupa 5, orice e prea mult).

b. Folosirea unor imagini prost alese: prea mici, sau prea mari. Prea urate, sau disonante cu restul paginii.

c. Adaugarea unui slider atunci cand o singura imagine ar fi mai de impact, si mai utila. In acest caz sliderul ar fi inlocuit cu un header image.

  • 7 Paginatie

Paginatia este acea zona care poate contine fie butoane de inainte/inapoi, fie paginile anterioare/urmatoare, numerotate. Uneori in loc de paginatie, unele site-uri folosesc endless-scroll (****), insa acesta poate pune probleme de SEO, de navigatie sau pur si simplu poate deveni enervant pentru utilizatori pentru ca tinde sa continue sa incarce continut la infinit.

  • 8 Subsolul (Footerul)

Subsolul este ultima parte a fiecarei pagini. El poate sa contina cateva informatii sumare: un meniu prescurtat/secundar, date de contact si linkuri sociale. De asemenea poate contine o zona de widgeturi, unde se pot adauga componente precum: casute de abonare, facebook like box, sau linkuri utile.

Si aceasta zona este alcatuita pe WordPress cu ajutorul unui fisier separat, anume footer.php. Aici se pot adauga/modifica informatii de copyright, sau alte scripturi de tracking, in caz de nevoie.

Anatomie pagina web-1-corcodus

  • 9 Zona de continut

Aceasta zona este practic aceeasi cu cea de la numarul 5, si include in sine doua zone principale: partea de continut dinamic (titlu, corpul articolului etc.) si bara laterala.

  • 10 Bara laterala (Sidebar)

Unele pagini sau articole, in functie de optiunile temei pot avea aceasta zona ascunsa, sau ea poate lipsi de tot. Aici de obicei se pot adauga widgeturi care sa inlesneasca utilizatorului navigarea si intelegerea site-ului. Scopul cu aceasta zona este sa prezinti informatie utila (articole populare, articole comentate, editoriale), sau de fidelizare (linkuri sociale, optiune de abonare etc.). Tot aici se pot afisa si eventuale reclame sau bannere de sustinere a unor parteneri, cauze importante, samd.

La fel ca la meniu exista doua principale greseli:

a. Nefolosirea acestei zone, daca ea exista.

b. Aglomerarea cu informatii pe cat de inutile, pe atat de „zgomotoase”: countere (numar vizite, tari de origine, stegulete sau altele similare), mii de linkuri in blogroll, bannere fara numar, etc.

  • 11 Titlul paginii

Titlul paginii marcheaza debutul zonei de continut „dinamic”, adica care nu este generat de Antet, Bara laterala sau Footer. De obicei titlul paginii este si titlul articolului, dar de exemplu pe o pagina care listeaza articole din aceeasi categorie (deci o pagina care arhiveaza articolele din categoria X), titlul acelei pagini va fi „Categoria X”.

  • 12 Meta-informatii (Autor, Publicare, Categorii etc. )

Aceasta zona poate sa apara si in alte pagini, de ex. pe homepage sau in arhive, de obicei langa titlul articolului. Ea ofera vizitatorilor detalii importante despre articole, cum ar fi: autorul, data publicarii si ce categorii sau tag-uri au fost folosite pentru a incadra articolul.

  • 13 Corpul articolului

Corpul articolului cuprinde textul, imaginile, alte fisiere media adaugate in text, si zona de final unde in general sunt adaugate butoanele sociale si articolele conexe.

Aceasta este zona cea mai importanta dintr-un site, mai ales in cazul blogurilor, pentru ca zona aceasta este de fapt ceea ce urmareste un vizitator sa citeasca.

Tot restul informatiilor sunt secundare si e bine sa tii minte acest lucru: cand alegi o tema, cand adaugi informatie, reclame, cand iei decizii in proiritizarea informatiei afisate.

  • 14 Subtitluri (Headings)

Subtitlurile sunt intalnite: in text, atunci cand le adaugi tu. In bara laterala, ca titluri ale widgeturilor, sau ca titlu pentru articolele conexe, zona de butoane sociale, zona de comentarii sau pentru formularul de comentarii.
Mai mici decat titlul, marcate in cod ca avand importanta secundara, ele ajuta vizitatorul sa parcurga rapid pagina, pentru a afla daca informatia de pe pagina ii e utila sau nu.

  • 15 Butoane Sociale (Social Sharing)

Dezbaterile legate de utilitatea si oportunitatea acestor butoane sub fiecare articol sunt in toi. Unii spun ca incarca inutil o pagina (si ca aspect, dar si ca timp de incarcare). Altii sustin ca solicita prea mult baza de date.
Altii pur si simplu ca cifrele de pe aceste mici butoane dau o imagine buna despre cat de popular e un articol. Indiferent de partea pe care te afli, tine minte un singur lucru: cu cat mai putine butoane, cu atat mai bine. Utilizatorul nu va folosi 10 optiuni, indiferent cat de mult ii place un articol. In plus, daca o retea de socializare nu e deloc populara in domeniul in care scrii (de exemplu digg, sau tumblr), mai bine nu le afisa pe site.

  • 16 Articole conexe

Afisarea de articole conexe (adica pe teme similare, din aceeasi categorie, sau care pot fi utile cititorului pentru ca sunt pe subiecte apropiate) este atat o curtoazie facuta cititorilor, cat si o metoda de  a mentine un cititor pe site-ult au mai mult timp. Alege sa afisezi aici articole cat mai putine (dar cat mai bine alese), si sa nu incarci prea tare zona de jos a articolului cu prea multe optiuni pentru vizitator.

  • 17 Zona de comentarii

Zona de comentarii este foarte importanta pentru dezvoltarea unei comunitati, chiar daca in ultima perioada comentatorii din blogosfera sunt mai greu de atras in conversatie. Totul depinde de subiectele abordate si de cum se construieste o comunitate care in timp sa intretina atmosfera. 🙂

  • 18 Formular de comentarii

Formularul de comentarii este si el relevant, deoarece poate imbie utilizatorii sa comenteze sau ii poate respinge. In functie de aspect si de usurinta cu care poate fi folosit, acesta este fie un ajutor de nadejde sau un impediment in a comenta pe un blog.

 

Glosar secundar:

* Homepage – este pagina principala a unui site, pagina de „Acasa”, prima pe care o vad utlizatorii cand acceseaza un site in mod direct.

** Wireframe – este o metoda grafica de a reprezenta un site, fara a folosi elemente complexe sau componte directe. Poate contine texte si imagini temporare, sau poate fi facuta din cvasi-elemente, precum cele doua studii de caz de mai sus. Wiregraming-ul este scheletul unui site, care testeaza functionalitatile unui site, si permite o asezare im pagina a tuturor elementelor necesare. De asemenea, wireframingul este o etapa importanta in construirea unui site de la zero, si preceda designul grafic.

*** Slide – este componenta de baza a unui slider/carusel. Este o „pagina”, felie de slider.

**** Endless Scroll – estea acea tehnica unde paginatia e inlocuita cu actiunea de scroll, si continutul se incarca succesiv pe masura ce userul ajunge din ce in ce mai jos in pagina.

Sper ca acest articol sa iti fie de folos, indiferent daca esti blogger incepator sau pur si simplu ai nevoie de un site si vrei sa stii ce sa ii ceri celui care ti-l va construi.

As vrea sa stiu daca aveti si alte intrebari legate de limbajul tehnic, caz in care as putea face un articol nou cu mai multi termeni, un fel de mic dictionar.

alaxandra

Owner la CloudBerries
Sunt pasionata de frumos, de internet si de comunitati. De tot ce inseamna Open Source. De animale. Detin doua pisici si un acvariu "mititel" de 130 l.

Sunt Managing Partner la cea mai faina agentie de WordPress Cloudberries, si impreuna cu sotul meu o crestem dintr-un start-up de webdesign in ceva ce va insemna managementul prezentei online pentru clienti super-faini. 🙂

Ultimele postari ale lui alaxandra (vezi toate)



10 răspunsuri la “Cum se numeste…? – Anatomia unei pagini web”

  1. Ramo spune:

    Mulțumim pentru tot ce ne înveți!

  2. zgomotoasa spune:

    Wow, ce articol complex și fain. Sărut mâna pentru informație 😀

  3. AdelaE spune:

    Multumim pentru toate informatiile. Stii vreun pluging bun pentru articolele conexe? 🙂

  4. Ce fain…ai muncit ceva!!!! Multumiiiim!

  5. Mara spune:

    Multumim pentru complexitatea articolului!

Care este parerea ta?