M-a rugat cineva sa îmi dau pu?in cu p?rerea despre un sit care în prezent e în construc?ie, anume Por?i de Emigrare. Întrucât situl e în construc?ie, nu am s? fiu nici prea dur, nici prea ironic (cel pu?in am s? încerc). O s? fie doar un alt post plictisitor, cu (sper eu) câteva sfaturi utile pe ici pe colo.

Observa?ie: Ce e scris mai jos e valabil doar la data la care scriu articolul, adic? 9 noiembrie 2006. Pagina fiind în construc?ie, unele lucruri probabil se vor mai schimba între timp.

Observa?ie 2: Când am publicat postul prima oar?, mi s-a atras aten?ia c? nu am vorbit deloc de p?r?ile bune ale sitului. Inten?ia mea nu a fost în nici un caz s? “desfiin?ez” situl, ci pur ?i simplu s? scriu despre câteva lucruri care mi-au s?rit în ochi ?i la care cred c? mai trebuie lucrat. Dac? nu am spus nimic despre con?inut, de exemplu, e pentru c?, la prima vedere, este bine structurat ?i accesibil (?i con?inutul conteaz? mult ). În?eleg c? s-a muncit mult la sit ?i c? mai este de munc?. ?i le urez autorilor spor la treab? ?i s? ias? un sit la care s? nu mai am ce cârcoti nici m?car eu.
A?a, hai s? vedem:

Pagina de intro

În general cam orice sit care începe cu o pagin? de selec?ie a limbii creeaz? o impresie negativ? înc? de la început. Eu în?eleg c? s-a lucrat la anima?ia pus? acolo deasupra steagurilor ?i mai atenueaz? din efect, dar oricum…O astfel de pagin? în general nu e o idee bun?.

Selec?ia limbii trebuie s? poat? fi f?cut? din orice pagin? a sitului, nu din „prima pagin?”. S? nu uit?m c? folosind un motor de c?utare cineva poate „nimeri” la un momentdat pe orice pagin? a sitului. Dac? persoana vorbe?te doar englez? ?i a nimerit pe o pagin? în român? ?i nu g?se?te imediat un mod de a schimba pe englez?, va presupune c? situl e doar în român? ?i va merge în alt? parte. Tot efortul de traducere a con?inutului în 2 limbi este astfel aproape inutil.

E de preferat, bineîn?eles, ca schimbarea limbii s? nu schimbe ?i pagina (userul s? nu fie trimis „acas?” adic?, ci s? r?mân? pe pagina curent?). E un pic mai mult de munc?, dar dac? se merit? s? traduci, se merit? s? oferi ?i acces a?a cum trebuie la traducere.

Bineîn?eles, prin antetul Http (dac? nu m? în?el) se cam poate descoperi ?i loca?ia de unde e accesat? pagina ?i se poate folosi automat limba potrivit?. Rezolvarea asta e mai dificil de implementat totu?i, pentru c? trebuie neap?rat evitat riscul de a bloca un user într-o anumit? limb? (el trebuie s? aib? în continuare posibilitatea de a schimba limba, iar dac? a ales o dat? englez?, englez? r?mâne, indiferent c? e el din România sau din Italia).

A?adar, varianta precedent? r?mâne cea mai la îndemân? ?i cea mai sigur?, a? zice eu.

De v?zut ?i ?ablonul de interfa?? corespunz?tor

Meniul

• Submeniurile într-un meniu în cascad? se deschid la mouse over, nu la click.
• Din câte în?eleg eu uitându-m? acolo, meniul era gata f?cut vertical ?i s-a ales pozi?ionarea curent? pentru ca meniul s? aib? loc s? se „deschid?” f?r? a acoperi nimic altceva. În plus, folosirea meniului în stânga paginii ar fi consumat mai mult spa?iu decât a?a cum este acum. De?i nu va prezenta dificult??i în utilizare, mie mi se pare totu?i cam ciudat? a?ezarea. Pentru a se face acest loc meniului, a fost sacrificat spa?iu de branding; sigla st? acum izolat? în centrul header-ului ?i nu prea se leag? cu titlul sitului ca pozi?ionare.

Un meniu orizontal mi s-ar fi p?rut mai potrivit. Dac? g?sirea unuia gata f?cut ar fi o problem?, a? sugera COOLjsMenu. , sau, dac? nu, Google(nu m-am putut ab?ine )

• Triunghiul care apare la mouse-over pe elementele din meniu nu merge prea bine acolo. Se schimb? deja culoarea la hover, butonul se apas? la click, ceea ce e foarte bine ?i suficient. Nu ?tiu cum s? explic, dar triunghiul ?la la hover mi se pare în plus.

Cuvinte în englez?

Nu face?i ca la mine pe blog! Dac? pagina e în român?, atunci în român? s? fie. „Powered by” nu are ce c?uta acolo, ?i nici „Home”, ?i nici „Link-uri” sau „Newsletter”.

De altfel, „powered by” oricum nu ar avea ce c?uta acolo. „Powered by” spui când ceva se mi?c? pe situl t?u ?i a fost f?cut de altcineva. Se refer? în general la firme de design sau dezvoltare web. De exemplu când ai luat un forum de pe net trebuie s? scrii „powered by PhpBB”, pentru c? a?a zic ei. Sau când iei un meniu, scrii „powered by COOLjsMenu ”. Powered by Caritas? Nu e o imagine prea bun?, nu? Caritas nu face nici design, nici programare :p Dar probabil “powered by” a fost doar uitat acolo ?i oricum urma s? fie scos ?i eu vorbesc aiurea acuma..:|

SEO (sau „dac? vrei s? ai vreo ?ans? s? te g?seasc? Google, cite?te aici”)

Aten?ie! Titlul paginii ?i sigla Caritas sunt într-un obiect Flash, împreun? cu meniul, unde nu vor fi g?site de Google. Dac? trebuie musai ca pagina s? aib? Flash (eu am o antipatie a?a pentru Flash, pentru cei care nu ?tiu), ave?i grij? ca titlul ?i sigla s? fie disponibile în mod text.
?i eventual citi?i aici despre cum se pot face obiectele programatice accesibile

Observa?ie: meniul pe care l-am men?ionat eu mai sus e meniu javascript ?i nu va fi v?zut nici el de motoarele de c?utare. Eu nu l-am folosit, dar b?nuiesc c? e ok pentru cazurile când nu te intereseaz? SEO sau nu ai cuvinte cheie în meniu.

M? opresc aici. Dac? sunt lucruri pe care le-am uitat, sper c? le observ? altcineva ?i ni le spune ?i nou?.

În rest, spor la instalarea forumului!

Am intrat mai demult pe situl Poli Ia?i, pentru c? eram ?i eu curios cam ce sit are echipa ora?ului nostru. ?i nu c? a? fi subiectiv, dar am fost pl?cut surprins.

Pagina principal? e curat?, strucurat?, echilibrat?, robust?. Culorilor clubului sunt folosite inteligent în crearea elementelor grafice ?i interactive. Sigla e a?ezat? cu grij?, la loc de cinste (?i f?r? probleme de decupaj ) , dar brandul este sus?inut ?i înt?rit de toate elementele paginii.

Meniul

Meniul pe 2 nivele este potrivit pentru cantitatea de informa?ie existent?.
Decalarea de 2 secunde pân? la dispari?ia submeniului evit? “pierderea” accidental? a selec?iei curente.
Butonul “Contact”, care este link în sine ?i nu are un submeniu, comunic? acest lucru în 2 feluri: cursorul diferit ?i culoarea u?or diferit?.

Pagina principal? – con?inut

Con?inutul primei pagini, organizat pe 3 coloane, mi s-a p?rut suficient de util:

1. Coloana din stânga

• Sec?iune de C?utare în stânga sus
• Etapa precedent? – rezultatul Politehnicii în prim plan, ?i celelalte rezultate pe scurt
• Etapa viitoare – meciul Politehnicii în prim plan ?i celelalte meciuri pe scurt

2. Coloana din centru:

• ?tiri ?i evenimente
• Clasament.

3. Coloana din dreapta – în special pentru utilizatori înregistra?i:

• Newsletter, Sondaj, Chat, Forum

Pân? acum am spus numai lucruri bune. Dar ar fi suspect s? fie chiar a?a. Mai sunt ?i probleme, ?i o s? începem s? le g?sim, încet-încet.

C?utarea

C?utarea func?ioneaz?, ?i prezint? rezultatele organizate dup? tipul lor: ?tiri, Meciuri, Juc?tori etc. Num?rul de rezultate g?site eu l-a? fi pus la început: “Am g?sit x rezultate în y categorii”. La urm? nu are nici o relevan??, mai ales c? toate cele x rezultate sunt afi?ate.

Un lucru de l?udat este apari?ia formularului de c?utare avansat?, pe lâng? rezultatele în sine. Din p?cate, aceast? zon? nu este îngrijit? aproape deloc: alinierea nu e corect? ?i spa?iul ocupat ar fi putut fi mai mic f?r? a afecta claritatea.

O filtrare … “inedit?”

Problema mea cea mai mare este totu?i…chiar în mijlocul paginii principale!

Con?inutul este organizat în dou? categorii: ?tiri ?i Evenimente. Cam discret? diferen?a, dup? p?rerea mea. Dar ce e mai ciudat e un lucru pe care nu l-am mai v?zut în nici un alt loc: Butoanele care selecteaz? cele 2 categorii sunt…în mijlocul con?inutului!! Pagina începe cu un articol, care e probabil articolul zilei, urmeaz? o scurt? zon? de “pronostic” pentru meciul urm?tor, apoi cele 2 butoane, apoi restul articolelor. M-am uitat atent: articolul “principal” se schimb? ?i el în func?ie de categorie. Deci nu exist? scuza c? butoanele ar fi doar pentru restul articolelor. Nu, ele schimb? tot, deasupra ori dedesubt. Interesant.

În partea de jos mai este un filtru pentru articole, de data asta dup? subiect. Un lucru bun, dar dup? p?rerea mea locul filtrului era tot în partea de sus – eventual ni?te taburi sau ceva similar.

Clasamentul

Ca s? termin?m cu coloana din mijloc, nu prea am în?eles culorile alese pentru clasament. Contrastul e slab, ?i clasamentul face not? discordant? cu restul designului. Cel pu?in a?a mi se pare mie.

Pagina principal? = Pagin? de ?tiri?

Un alt lucru care nu mi-a pl?cut a fost c? pagina principal? seam?n? izbitor de mult cu sec?iunile de ?tiri. Din punctul meu de vedere, ar fi fost suficient ca pe pagina principal?, în zona central?, s? apar? articolul zilei, link la ?tiri, sec?iunea de pronostic ?i clasamentul – adic? s? fie eliminate celalte ?tiri (sau cel mult foarte condensate) În felul ?sta ar urca ?i clasamentul mai sus, nu ar fi la dou? ecrane distan??.

În rest – con?inut bun, cu mici probleme de prezentare

Am aruncat o privire ?i pe restul paginilor. Cantitatea de informa?ii este mai mult decât satisf?c?toare ca s? nu zic impresionant?, dar probleme mai apar pe alocuri: probleme de aliniere la sec?iunile de meciuri, CAPS la numele juc?torilor ?i a?ezare mai pu?in îngrijit?.

Înregistrarea – inten?ii bune, realizare slab?

Mi-au pl?cut inten?iile bune din sec?iunea de Înregistrare. Situl chiar vorbe?te cu userul ?i îl trateaz? “uman”, explicându-i cu r?bdare procesul ce va urma. Aceast? abordare a dialogului contribuie pozitiv la experien?a utilizator, dar modul de realizare în aceast? situa?ie nu e prea reu?it: Textul e prea amplu ?i trimite controalele înafara p?r?ii vizibile a ecranului. Astfel, la orice problem? în verificarea formularului, userul este întors la pagin?, dar problema nu este vizibil?. De-abia dac? intuie?te c? ceva nu a mers bine, va da scroll pân? în josul paginii ?i va putea vedea eroarea: “User deja existent”.

În plus, mesajul de eroare are aceea?i culoare ca restul textului de pe pagin? ?i este cu atât mai greu de distins.

Concluzii

M? opresc aici. Probabil ar mai fi de spus, dar deja cred c? am spus prea multe. R?mân la impresia mea bun? despre acest sit. Nu pentru c? ar avea ceva spectaculos sau o interac?iune extraordinar?. Ci doar pentru c? e mult mai mult decât a?teptam de la situl unei echipe de mijlocul clasamentului (?i asta în vremurile bune) de la noi.

P.S. Era s? uit: Am fost informat c? situl a fost f?cut de New Flavour.

?i-a pl?cut articolul? Aici îl po?i vota pe Blogoree.

Acum ceva vreme am ajuns ?i eu întâmpl?tor pe nike.com, ?i de acolo unde era oare s? merg dac? nu la Nike Basketball? Acum a venit vremea s? povestesc ?i altora despre ce e pe acolo…

Experien?a utilizator

La fel ca mai toate reclamele Nike, po?i vedea lini?tit Nike Basketball numai de pl?cere. La urm?, dac? ai ?i bani s? cumperi, e ?i mai bine.
B?nuiesc c? asta a fost ?i ideea pe care a fost construit situl, ?i…a fost o idee bun?. Experien?a utilizator e la ea acas? pe Nike Basketball, a?a cum ar trebui s? fie pe orice sit bun de comer? electronic. Faptul c? Nike vinde în primul rând brand ?i mai apoi produse este demonstrat din nou, dac? mai era nevoie. Prezentare de excep?ie, efecte speciale, ritm, atmosfer? ?i mult baschet. Zeci de juc?tori, to?i înc?l?a?i (ghici?i cu ce), din când în când un buton discret de Buy. Când ai terminat cu distrac?ia, po?i merge ?i în Product Room, unde prezentarea e mai ceva ca într-un magazin adev?rat.

Interac?iune

Interac?iunea discret? ?i transparent? completeaz? experien?a utilizator. Mi-a pl?cut în special meniul retractabil din zona prezent?rii produsului Zoom Lebron 3 (eu cel pu?in a?a am dat peste respectivul meniu). Meniul apare, î?i arat? repede ?i frumos ce are de oferit, ?i apoi se retrage cuminte în partea de dreapta-jos. “Când ai nevoie de mine, aici m? g?se?ti”, pare s? spun?…

În continuare, v? las s? vede?i singuri…Experien?a utilizator nu poate fi povestit?

De citit ?i: Situl s?pt?mînii – Intro

Situl UAIC va fi reconstruit. Era ?i timpul…Noul design va fi realizat de Adi, ?i a?tept?m cu ner?bdare rezultatele. Pân? atunci, putem s? spunem câte ceva despre varianta actual?, ca s? ?tim de unde plec?m…

Prima impresie

Sit realizat neprofesionist, cu un design mult sub prestigiul Universit??ii ?i elemente grafice statice ?i animate realizate de amatori. Schema de culori a paginii principale orientat? pe nuan?e de crem ?i maro contrasteaz? într-un mod nepl?cut cu sigla universit??ii ?i cu nuan?ele hyperlink-urilor. Cele 3 semne de exclamare ce urmeaz? cuvintelor „Bine a?i venit” accentueaz? impresia negativ? a primei vizite ?i lipsa de profesionalism a realiz?rii sitului.

Accesibilitate

Prefer s? încep cu accesibilitatea, pentru c? vorbim despre un sit public, ?i problemele de accesibilitate g?site aici sunt…s? zicem foarte greu de tolerat.

Html invalid

Am folosit validatorul de html de la W3.Org pentru a verifica prima pagin? a sitului ?i am g?sit numeroase probleme (prima dintre ele fiind lipsa DOCTYPE-ului)

Elementele Html nu sunt folosite corect

De exemplu, pentru marcarea titlurilor ?i subtitlurilor de pagin?, autorii au folosit elementele HTML font ?i em, în loc de h1-h5, cum ar fi fost normal. Aparatele de citit nu vor recunoa?te acest text ca titlu sau subtitlu, prin urmare nu vor putea reda corect ?i eficient con?inutul paginii (Multe astfel de sisteme enumer? mai întâi subtitlurile unei pagini, pentru ca utilizatorul s? poat? alege sec?iunea care îl intereseaz?)

Imaginile nu au atribut ALT

Imaginile nu ofer? con?inut echivalent pentru persoanele nev?z?toare. Aceasta este o directiv? WCAG de prioritate 1 ?i nerespectarea ei denot? inexisten?a oric?rei inten?ii de design pentru accesibilitate.

Layout bazat pe tabele

Pozi?ionarea bazat? pe tabele este în general nerecomandat?, dar neinterzis? de WCAG, care impune doar o liniarizare corect? a con?inutului pentru acest caz. Surprinz?tor, în ciuda num?rului serios de nivele de imbricare a tabelelor, con?inutul pare s? se liniarizeze corect pentru situl UAIC.

Con?inutul este la urm?

De?i paginile se liniarizeaz? corect, con?inutul efectiv al unei pagini este întotdeauna la urm?. Întrucât nu exist? o „scurt?tur?” c?tre con?inut , acesta va fi citit de c?tre sistemele ajut?toare doar dup? terminarea de citit a tuturor leg?turilor din ambelor meniuri. Destul de enervant, b?nuiesc…

Meniul este greu de citit

Culorile alese pentru meniu afecteaz? foarte mult lizibilitatea acestuia. Link-urile selectate curent în meniu sunt extrem de dificil de citit chiar de c?tre o persoan? f?r? probleme de vedere (text galben pe fundal crem). Dar ?i linkurile ne-selectate prezint? probleme: contrastul cu fundalul este mult prea slab, ?i unele persoane vor avea dificult??i în citirea meniului.

Interac?iune

Lipse?te link pe logo.

De obicei se recomand? folosirea siglei / antetului unui sit drept leg?tur? c?tre pagina principal?. Pentru UAIC, doar „Bine a?i venit!!!” trimite la pagina principal?. ?inând cont c? meniul (?i implicit acest link) este vizibil tot timpul, lipsa leg?turii de pe sigl? nu este totu?i chiar atât de grav?. Dar merit? men?ionat?.

Schimbarea limbii nu este corect?.

La trecerea de la varianta în englez? c?tre cea în român? ?i invers, utilizatorul este întotdeauna trimis c?tre pagina principal?, ?i nu c?tre cea curent?, cum ar fi corect.

Detalii de contact

La o universitate de talia UAIC, ne-am fi a?teptat s? g?sim ?i adresa de mail a secretariatului (de exemplu) în detaliile de contact, ?i nu doar pe cea a Webmasterului. Oricum, sunt date numerele de telefon, iar datele de contact sunt prezente pe orice pagin?, ceea ce e bine.

Formularul de înregistrare

„Confirma?i password”

Nu am în?eles folosirea denumirii de „password” în loc de „parol?” pentru formularul de înregistrare în limba Român?.

Lipsesc Termeni ?i condi?ii

Userul trebuie s? „fie de acord” cu „condi?iile de mai sus”, dar controlul cu Termeni ?i Condi?ii, prezent mai jos de altfel, este complet gol.

Dropdown sau Textbox

Îmi place abordarea de la „Departament” ?i „Rol”: Dac? op?iunea userului nu se g?se?te în dropdown, poate scrie altceva în textbox. Cele dou? sunt desp?r?ite de un simplu „sau”, suficient de u?or de în?eles (cel pu?in pentru mine).

Câmpurile obligatorii sunt marcate

De?i cam multe, câmpurile obligatorii sunt marcate, ceea ce e bine. Interesant îns? ce se întâmpl? când totu?i nu le completezi… Zbang: „Login!!!” (unde Zbang = Dialog modal, ?i Login e câmpul necompletat)

În rest, e bine

Nu am g?sit alte probleme majore de interac?iune. Situl este unul informa?ional, deci interac?iunea oricum e destul de sumar? (nu se putea gre?i în foarte multe locuri). Forma de navigare aleas? este cea cu meniu principal arborescent în stânga ?i meniu secundar în dreapta. Este o alegere suficient de potriv?, ?inând cont ?i de cantitatea de informa?ie de prezentat. De?i are probleme de accesibilitate, meniul interac?ioneaz? corect, ?i marcheaz? prin culoare calea curent? (ar fi de preferat breadcrumbs, dar s? ne mul?umim cu atât…)

M? opresc aici. Prefer s? nu mai desfiin?ez ?i designul, pentru c? sunt al?ii care probabil ?tiu mai bine s? fac? asta. În rest, spor la munc? lui Adi. Sper?m s? ias? cât mai bine

Voi începe azi o tradi?ie (care sper s? continue), ca din când în când, în mod ideal o dat? pe s?pt?mân?, s? aleg un sit ?i s? îmi spun p?rerea despre el.

Am s? aleg situri care mi se par prea rele, sau prea bune, sau pur ?i simplu interesante. Dac? a?i vrea s? comentez un sit anume, spune?i-mi, ?i dac? nu sunt prea multe cereri la rând, probabil se rezolv?.

A?a c?..enjoy!