5. Arhitectura informationala si design web; utilizabilitate; accesibilitate

Cursul de fata se concentreaza pe principalul produs media al Internetului: siteul web. Mai intai vom prezenta principalele stadii ale dezvoltarii unui site web. Apoi ne vom ocupa de arhitectura informatiei (scheletul oricarui site) si de designul web.

5.1 Etapele de dezvoltare a unui site (presupunem ca voi sunteti coordonatorii acestui site)

1. Misiune si viziune; obiective

Ce este site-ul (misiune, un paragraf de text), unde se va afla site-ul peste 2 ani (viziune), obiective concrete (daca pot fi identificate)

Ex:

PISIDIGI – Revista online pentru pisici.

Misiune: prezinta activitatea pisicilor online si le ofera acestora un cadru de manifestare digitala.

Viziune: peste 2 ani toate pisicile din Moldova vor chatui, scrie pe forum si vor folosi site-ul pisidigi.

Obiective: trafic – 1000 vizite pe zi in 2 ani, 250 membri activi (cel putin 30 de motani), profit: 200 lei

2. Publicul tinta

Acesta poate fi definit atat demografico-geografic (varsta, ocupatie, educatie, localizare) cat si din perspectiva Internetului: tip de acces internet, experienta de navigare pe web, tehnologie detinuta.

Exista 3 tipuri de audienta online:

  • captiva (inocentii, te iubesc orice faci)
  • non-captiva (browsuiesc prin zona…)
  • experta (surferi cu asteptari mari de la site-ul tau)

3. Evaluarea si inventarierea continutului (posibil)

Continutul poate fi de 4 feluri:

  • Static – se schimba la intervale mari de timp (zile/saptamani) costa cel mai putin
  • Dinamic – se schimba si in real time
  • Functional – implica aplicatii soft care trebuie dezvoltate de o echipa de programatori
  • Interactiv – implicarea publicului in dezvoltarea continutului

Continutul unui site se poate impartii in sectiuni si servicii. Sau putem spune ca un site complex are o platforma informationala (stiri, articole, documente, multimedia), una de comunicare (comentarii, forumuri, liste de email, newsleeters) si una de tranzactii (abonamente, comert electronic).

Intotdeauna trebuie sa ne intrebam cat continut avem si mai ales cat continut multimedia (audio, video, animatie) avem. Asta pentru ca e esential pentru etapa urmatoare

4. Buget

In functie de continut, organizatie, produs vom avea un anumit buget potential pentru site. Buget inseamna atat bani, cat si timp de dezvoltare, resurse umane, resurse tehnologice. Acum probabil ca vom face un compromis intre continutul potential inventariat la punctul 3 si ce se poate face practic. Costurile cresc de la static la dinamic si functional/interactiv.

Atunci cand e nevoie de dezvoltat aplicatii software, costurile cresc si de cele mai multe ori implica costuri recurente anual pentru administrare.

5. Arhitectura informatiei si design web

E momentul sa ne concentram pe constructia structurala, functionala si grafica a site-ului. Revenim ceva mai tarziu cu detalii

6. Dezvoltare tehnologica (software)

Deja am identificat necesitatile tehnologice/soft ale site-ului si acum e momentul in care programatorii (-ul) dezvolta sau implementeaza softurile cu pricina.

7. Publicarea continutului

Desi nu pare este probabil cea mai complicata parte a constructiei site-urilor. Cele mai multe proiecte web se gatuie la continut, sau in momentul constructiei, sau mai tarziu la actualizare.

8. Utilizabilitate/testare

In mod normal testarea viitorului site pentru usurinta folosirii (ergonomie, utilizabilitate, usability), ar trebui sa inceapa inca din etapa 1 sau 2. Noi, fiind romani, sa ne bucuram daca o facem macar in aceasta etapa.

Se testeaza folosind persoane care nu sunt la curent cu conceptul site-ului, si se testeaza rugand acesti utilizatori sa gaseasca informatii pe site, sa ghiceasca ce informatii se afla in fiecare sectiune, da duca la bun sfarsit o actiune oarecare.

De exemplu pentru un site care promoveaza evenimente si ofera sansa de a organiza evenimente online, o astfel de testare implica invitarea unor utilizatori obisnuiti, cu diverse niveluri de experienta online si fara sa cunoasca proiectul. Acestia vor fi rugati sa gaseasca un eveniment care este publicat pe site, sa inchirieze o locatie pentru eveniment, sa calculeze costurile, samd.

Voi stati langa testeri si urmariti cu atentie daca se descurca cu navigatia site-ului, daca inteleg ce se afla sub anumite butoane, daca folosesc serviciile asa cum le-ati imaginat. O sa constatati ca utilizatorii “obisnuiti” au comportamente total diferite de al vostru atunci cand navigheaza pe site-ul vostru. Nu sunt ei vinovati daca nu gasesc ceva. Voi sunteti. Nu comentati, doar notati.

9. Promovarea site-ului

Da, trebuie si asta. Il inscrieti in Google, Yahoo, ROL, kappa, Acasa, Trafic si pe unde mai credeti necesar. In functie de publicul tinta, promovarea mai importanta poate fi facuta cu afise, anunturi in camin, pe forum, evenimente, reclama in ziar, etc.

10. Lansarea la apa

Probabil ca tot va mai avea vreo 100 de erori (bugs), de la greseli de tipar la probleme de functionare a aplicatiilor sau grafica. Insa trebuie lansat la un moment dat. De obicei curatenia unui site se intinde pe primele luni de functionare.

11. Actualizare si administrare

Oricat ar fi de ciudat, trebuie sa ne gandim si la asta. Mai ales daca avem continut dinamic sau creat de utilizatori. Daca avem forumuri, acestea trebuie administrate (daca nu moderate). Daca avem o sectiune de stiri, acestea trebuie schimbate cel putin saptamanal. Daca avem si comert electronic trebuie sa ne pregatim cel putin psihic pentru o comanda de 10000 de goblenuri cu rapirea din serai de la o firma din Dubai.

O echipa de dezvoltare de site:

  • Manager de proiect (sef)
  • Information architect – coordonator editorial
  • Redactori (producatori de continut)
  • Designer
  • Software developer
  • Web marketing

5.2 Arhitectura informatiei

Ce face:

  • Organizeaza informatia
  • Determina functionalitatea site-ului
  • Determina cum se regaseste informatia pe site (navigatie, etichetare, cautare)
  • Determina modul in care site-ul se va adapta la dezvoltare si schimbare

Scheme de organizare a informatiei:

  • exacte (bune atunci cand stim exact ce cautam): alfabetic, cronologic, geografic
  • ambigue (bune cand nu stim prea bine ce e pe acolo): pe subiecte, obiective (ex: inscrieri, cumparaturi), audienta (ex: pentru profesori, pentru studenti, pentru viitori studenti), metaforice (ex: desktopul calculatorului e cea mai cunoscuta metafora), hibrid

Structuri informationale:

  • ierarhica:
    • superficiala (multe linkuri pe homepage care duc direct la informatia cautata la nivelul 2 in ierarhie, vezi weblogs)
    • adanca (cateva linuri pe homepage care pot duce la sectiuni, de unde avem linkuri catre subsectiuni si ajungem la informatia propriuzisa la nivelul 3, 4 sau mai mare)
  • hypertext: elementele informationale sunt legate unele de altele asociativ, fara nici o ierarhie sau o regularitate. Hipertextul functioneaza bine in combinatie cu structura ierarhica
  • baza de date relationala: informatia este structurata in tabele care sunt interconectate (Ex: tabelul studentilor din caminul C5 e conectat cu tabelul studentilor de la jurnalism, de cel al studentilor cu taxa, etc) Informatia poate fi extrasa si afisata in functie de criterii diverse

Navigatie

Atunci cand construim navigatia unui site trebuie sa pornim de la elementele de navigatie ale browserului. Chiar daca nu trebuie sa ne bazam pe ele, trebuie sa le avem in minte: butonul Home, butonul Back, butonul Forward, Bookmarks/Favorites si afisarea pe banda inferioara a browserului adresa URL a unui link pe care ne ducem cu mouse-ul.

Navigatia noastra trebuie sa ofere flexibilitate, redundanta si posibilitatea de a te misca orizontal intr-o structura ierarhica.

Tipuri de navigatie

  • Ierarhica
  • Globala (apare pe toate paginile siteului)
  • Locala (apare doar intr-o anumita sectiune din site si de obicei ofera acces catre subsectiunile respective)
  • Ad-hoc/contextual navigation (poate aparea atunci cand impartim un document mai mare in mai multe pagini/capitole, la unele actiuni de tipul cumparare, inscriere, slide show…)

Elemente de navigatie:

  • Bare de navigatie – Navigation bars: sunt la fel de eficiente orizontale sau verticale. Foarte apreciate de publicul occidental sunt asa numitele “tabs” pe care le gasiti implementate foarte elegant de Amazon.com
  • Frames – sunt tot mai mult “out of fashion”, prezentand o serie de dezavantaje: se pierde notiunea de pagina de web pentru ca vedem mai multe pagini simultan, nu mai fuctioneaza corect prietenul nostru Back din browser, nu functioneaza bine nici Favorites/Bookmarks, sunt greu accesibile pentru persoanele cu handicap
  • Meniuri Pull-down/rollover: cool, greu de folosit, de obicei subsectiunile care se rostogolesc acopera o parte din continut, trebuie sa nu va tremure mana pe mouse cand incercati sa ajungeti in sub-sub-sectiunea dorita. Evitati-le pe cat posibil.
  • Navigatie Remote – rar folosita, se poate sa nu o fi intalnit niciodata. Butoanele de navigatie plutesc intr-o alta fereastra decat continutul (cam cum plutesc meniurile in Photoshop)
  • Cuprins – nu radeti, exista documente care se preteaza la un cuprins (documentele de pe www.w3c.org)
  • Index – este o lista alfabetica a tuturor termenilor de interes de pe un site, cu linkuri spre paginile respective
  • Harta site (site map) – structura ierarhica a site-ului, realizata doar cu text (nu imagini!!) cu fiecare sectiune si subsectiune link spre repctivele pagini
  • Tur – daca sunteti amabili cu vizitatorii vostri le puteti oferi un tur al site-ului in care le explicati ce si cum (film, slide show sau flash)

Etichetare – labeling

Termenul se refera la cum denumim sectiunile, serviciile si alte elemente din site. Exista etichetare in cadrul navigatiei: denumirile scrise pe butoane, explicate pe larg folosind atributul “alt”. Exista de asemenea cuvintele cheie (keywords, indexing terms) – care se scriu in tagurile meta. Foarte importanta este etichetarea linkurilor, despre care am vorbit in cursul 3.

Etichetarea mai implica si titlurile articolelor, elementele grafice si multimedia.

Importante la etichetare sunt consecventa in terminologie (limba de lemn sau limba de acasa) si in granularitate (elemente eflate la acelasi nivel in ierarhie trebuie sa contina aproximativ acelasi tip si volum de informatie).

5.3 Web design

Probabil ca aici asteptati reteta magica a designului siteului personal. Nu egzista. Exista doar o serie de reguli fundamentale de care trebuie sa tineti seama atunci cand veti negocia cu designeri adevarati:

  1. Designul serveste/ajuta/sustine continutul (de asta scoala de design se termina cu designul unui scaun). Ganditi-va ce public aveti, ce fel de continut si tine-ti seama de asta la alegerea solutiilor de design (culori, fonturi, imagini, tehnologi)
  2. Designul trebuie sa fie consecvent (cum spun englezii “consistent”) insa nu trebuie sa fie plictisitor. Sectiunile site-ului vostru trebuie sa arate similar insa nu identic (ex: BBC)
  3. Creati o ierarhive vizuala clara: ce e mai important e mai mare, elementele conectate/similare trebuie sa fie conectate si vizual, daca ceva e parte a altceva asta trebuie sa se si vada
  • Nu ezitati sa folositi conventiile online. Designerii se vor opune consecvent folosirii unor conventii pentru ca e impotriva ideii de creativitate. Insa conventiile web sunt foarte bune.
  • Ganditi-va la indicatoarele rutiere si la cele cu numele strazilor. Exista conventii, arata asa cum ne asteptam si sunt plasate acolo unde ne asteptam. Asa e si pe internet. Ne asteptam sa fie link spre home pe sigla site-ului, ne asteptam sa fie linkurile albastre si subliniate, ne asteptam ca site-urile ziarelor sa aiba fond alb.
  • Divizati pagina in zone clar delimitate vizual pentru continut diferit: navigatie, articlo, coloana laterala, caseta. Ce este click-abil (sic!) trebuie sa fie evident si vizual.
  • Ganditi-va de la inceput la structura grafica a site-ului: una, 2, 3 coloane sau mai multe? Totul depinde de continut. Cat continut este? Cat de mari sunt articolele? Se citesc online sau doar se scaneaza? Exista multe titluri si subtitluri?
  • Aveti nevoie de o coperta (splash screen) pentru site? De cele mai multe ori nu, dar poate ca avem un public distribuit omogen intre romana, engleza si franceza si atunci o coperta e utila. In functie de varsta publicului, tipul de conexiune al acestuia si subiect decidem daca avem multe imagini/grafica sau putine.
  • Alegeti o structura de culori (3-4 in functie de culorile organizatiei). Alegeti variante pentru background tinand cont ca alb inseamna seriozitate iar negru creativitate. Ganditi-va daca aveti nevoie de tehnologii suplimentare html-ului (flash, filme, gif animat).
  • Porniti la drum cu o cercetare serioasa asupra cum arata site-urile concurente cu al vostru. Incercati sa echilibrati diferitele viziuni ale echipei (cei de la marketing au o alta perspectiva decat tehnicul, seful sigur gandeste altfel)

Prima pagina – Homepage

Contine:

  • Site ID (logo/sigla/nume) si misiune
  • Ierarhia (navigatia globala)
  • Mesaj de bun venit foarte important daca aveti mai putin de 10 000 de cititori pe zi. E un paragraf care spune bun venit, ce e site-ul, ce gaseste lumea in el si de ce e f….ere de important sa fi pe site-ul asta si nu pe altul (scuzati franceza).
  • Cautare (daca exista)
  • Oferte de continut – de genul Avem de tate: pizza, bulion.
  • Continut actualizat: stirile de pe prima pagina
  • Reclame: bannere mari si mici, late si inguste, pe care nu le doriti, nu le cereti…
  • Scurtaturi spre diverse servicii/oferte
  • Login (daca e cazul)

Probleme la homepage:

  • Toata lumea implicata in proiect vrea sa primeasca o bucatica (daca se poate in partea de sus – “primul ecran”). E ca terenul in Copou
  • Toata lumea isi da cu parerea despre ea. Nimeni nu o sa-si bata capul cum arata pagina de contact.
  • Trebuie sa primeasca toate tipurile de vizitatori (pentru site-ul jurnalisticii si profesori, si studenti, si viitori studenti)
  • Trebuie sa raspunda la 4 intrebari: ce e asta, ce pot sa gasesc aici, ce pot face aici, de ce aici si nu in alta parte

4 metode de a distruge un homepage:

  • Un banner mare sus su prea multe bannere (vezi www.gsp.ro)
  • Promovam totul
  • Schimb de bannere (reclame care nu intereseaza publicul)
  • Prea multe date cerute de la utilizatori

5.4 Utilizabilitate – Usability

Foarte multe din cele spuse in acest curs se refera la asta. In plus va recomand testul portbagajului (The Trunk test):

Daca un utilizator a fost inchis intr-un portbagaj si apoi este scos afara si vede o pagina oarecare (interioara) de pe site-ul vostru trebuie sa poata raspunde imdediat la urmatoarele intrebari:

  • Pe ce site sunt? (ID/nume/logo)
  • Pe ce pagina sunt? (numele paginii)
  • Ce contine acest site? (sectiunile din navigatia globala)
  • Ce optiuni am aici? (navigatia locala)
  • Unde sunt in ierarhia generala a site-ului (indicatii de tipul “You are here”, care se numesc “breadcrumbs” dupa firimiturile de paine din Hensel si Gretel)
  • Cum caut ceva? (Search)
  • Cum ma intorc la prima pagina a site-ului (buton de home)

Pentru utilizabilitate o resursa buna (dar nu singura!!) este http://www.useit.com/

5.5 Accesibilitate (pentru persoanele cu handicap si nu numai)

E foarte bine sa va ganditi si la asta din mai multe motive:

  • E o practica corecta din toate punctele de vedere
  • Daca reprezentati o institutie publica, sau aveti clienti/vizitatori din afara e foarte probabil sa incalcati ceva legi de combatere a discriminarii
  • Accesibilitatea e un standard al dezvoltarii web, deci va aduce avantaje si pe termen lung

Deci uitati-va putin la recomandarile de accesibilitate ale W3C http://www.w3.org/WAI/ si apoi tineti-va de capul dezvoltatorilor site-ului sa tina cont de ele, cel putin la nivelul A. Exista 3 nivele de conformitate cu prevederile consortiumullui: A, AA, AAA.

Daca site-ul vostru nu atinge nici macar primul dintre ele (A), atunci cu siguranta ca e incaccesibil persoanelor care navigheaza fara mouse, fara imagini, cu browser liniar (fara tabele), care nu disting foarte bine culorile.

Pentru cei interesati: se poate instala un Web Accesibility Toolbar care va va da o idee cam cum se vede site-ul vostru fara anumite tehnologii/culori: http://www.visionaustralia.org.au/info.aspx?page=61

Comments are closed.