Despre viaţă şi interacţiune

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!