VândPupăză

Icon

Bine o zis cine o zis cand o zis ce o zis

I duplicate states. A lot!

Am descoperit pe pielea mea urmatoarea ordine nefasta a comenzilor pentru tabul “States” in interfata Fireworks: operatiunea “Delete” este imediat sub “Duplicate”.

fireworks_ux_blooper

E o greseala in designul de interfata pentru ca mi se intampla des sa-mi fuga cursorul pe stergere cand de fapt vreau sa duplic ceva.
Situatia e agravata de faptul ca nu pot folosi comenzile Copy / Paste mult mai naturale in aceasta circumstanta. Totusi, pot sa dau “Undo”.

Argumentul logic

Conform legii lui Fitts un element de interfata este cu atat mai usor de actionat cu cat efortul de a ajunge la el este mai mic (viteza cursorului / precizie / acceleratie).

In general in interfete vei vrea sa pui butoanele care declanseaza actiuni distructive in pozitii care obliga utilizatorul sa depuna un efort considerabil mai mare decat pentru a actiona alte comenzi mai des utilizate. Facand asta impiedici executarea accidentala unor actiuni radicale.

Nu confunda aceasta opinie cu a face un workflow complicat de stergere in orice situatie. Daca interfata se ocupa de distrugerea unor elemente actiunea cea mai importanta este “delete” deci vrei ca declansatorul sa fie mai proeminent.

Navigare mai rapida cu preload inteligent

Poti fura niste milisecunde dintr-o actiune cu mouse-ul daca te folosesti de evenimentul onMouseDown() din DOM.
Anticipezi logic actiunea de click odata ce butonul mouse-ului este apasat asa ca poti declansa un fir de executie in JS imediat ce ai inregistrat inceputul.

Acest truc iti permite sa “furi” cateva milisecunde pretioase din timpul unui download.

Un truc poate fi aplicat cu success este sa te folosesti de onMouseOver pe controalele dintr-o galerie foto intr-un sistem de livrare prin AJAX.

Mi se pare o actiune logica sa incepi preload-ul in background a pozei determinate de un thumbnail cand ai o constructie de navigatie similara cu cea de la Flickr. Din punct de vedere al interfetei ai putine motive sa faci hover peste acele imagini daca nu doresti sa navighezi prin galerie.

Photo Gallery Controls on Flickr

Desigur, e o jonglerie de performanta. Daca lansezi prea multe download-uri bazate pe actiuni incomplete ale userului poti deteriora experienta, dar cred ca daca iti gandesti bine planul de preload iti poti face galeria sa para mai rapida (as in responsive) pentru ca te folosesti de milisecundele dintre onMouseDown() si onClick()-ul complet pentru a incarca in browser o parte din continut.

Foloseste onMouseDown cu responsabilitate!
Uneori imi dau seama ca fac un click din greseala si imi mut cursorul de pe link, apoi dau drumu butonului. Asta impiedica actiunea de click.

Input cu format inflexibil

Cand iti trebuie continut dintr-un input cu un format special si ti-e lene sa aplici niste logica sau expresii regulate pe server poti folosi un plugin de jQuery care iti ajuta userul sa introduca datele corect.

Mi se pare un plugin indispensabil celor care prezinta formulare care cer date / numere de telefon intr-un format inflexibil.

Acest plugin iti poate reduce numarul de useri frustrati care primesc o eroare dupa submitarea formularului pentru ca au uitat sa introduca o cratima intre prefix si numarul de telefon.

Niciodata nu ar trebui sa te bazezi pe datele prelucrate doar pe client pentru ca JavaScript-ul se poate dezactiva si cineva iti poate face ravagii pe server.

Ce e gresit fundamental la iTunes

Pentru a-ti pune continut pe iPod trebuie sa folosesti programul iTunes de la Apple.

In iTunes pot sa imi copii manual continutul pe player sau pot alege sincronizare automata.

Cei care au conceput functia de sincronizare automata la iTunes presupun ca nu s-au gandit ca vom ajunge in asa hal incat sa detinem mai multe masini de lucru.

Daca bifez sincronizarea automata aceasta imi va exermina tot continutul de pe iPod si imi va copia doar ce am selectat de pe masina curenta. E o prostie magistrala pentru ca am doua masini de lucru: un PC si un Mac.

  • de pe PC imi iau muzica ocazional.
  • Mac-ul este masina de zi cu zi pe care am podcast-uri care se updateaza zilnic: stiri de pe CNN, stiri tehnice de la CNET, Yahoo Developer Center podcast, animatii … chestii cat se poate de legale.

Totusi, ca sa imi sincronizez doar podcasturile trebuie sa fac o actiune de click pe un nenorocit de buton. Asta mi-e pedeapsa pentru ca nu ii dau voie lui iTunes sa imi “automatically manage music and video” – actiune care mi-ar rade toata muzica.

Apple presupune in iTunes ca am o singura masina sau sunt un fel de ciudat care isi sincronizeaza toate compurile pe care lucreaza – greseala!

Cat timp sunt la servici am iPod-ul in dock (o caruta de bani si ala) care e tot timpul conectat la Mac. Mi-ar placea ca atunci cand sunt gata de plecare sa am deja cele mai proaspete podcasturi gata copiate pe dracovenia aia de player.

Dar nu, acum trebuie sa am rabdare sa dau un click pe “Sync” si sa astept copierea continutului – uneori cativa giga seriosi de video / audio.

iTunes are multe greseli dar imposibilitatea de a sincronza separat continutul video / muzica / apps  in functie de masina la care e conectat playerul mi se pare un bug fundamental. In bug tracker-ul de la Adobe acesta ar figura la severitatea cea mai mare: Crash / Data loss.

Aici Apple pierde puncte cu galeata din partea mea pentru ca imi folosesc zilnic iPod-ul.

Adobe Community Help OpenSearch

In ultimul sprint de la Community Help am lucrat la implementarea OpenSearch pentru browsere ca Firefox 2+ si Internet Explorer 7+ care suporta formatul.

Este unul din pasii pe care ii facem sa venim in intampinarea comunitatii si sa facem serviciul de cautare util cat mai multor utilizatori.

OpenSearch este un set de formate open-source care, printre altele, permite agregarea de rezultate de cautare. Community Help foloseste unul din formate pentru XML descriptor files care sunt consumate de browsere pentru integrarea de seach engines in aplicatii.

Firefox incepand cu versiunea 2 si Internet Explorer incepand cu versiunea 7 au suport pentru integrarea de motoare de cautare specializate direct in interfata. La o cautare specifica per produs, Community Help iti ofera posibilitatea sa adaugi un motor de cautare specializat pe produsul selectat direct in interfata browser-ului.

Pentru o cautare pe Flex in Community Help, daca folosesti un browser care suporta OpenSearch, vei fi promptat sa iti instalezi un search engine plugin care iti permite sa refaci cautarile pe Flex mult mai usor, direct din browser.

adobe community help open search for flex
User prompt pentru instalarea plugin-ului de Flex OpenSearch

flex openseach in firefox 3 browser
Motorul de cautare Adobe Community Help pentru Flex integrat in Firefox 3

Cu putin de magie JS tinem minte ce ai instalat deja si nu te mai intrebam a doua oara. Daca alegi sa inchizi prompt-ul intelegem ca nu vrei sa te mai batem la cap si nu iti mai aratam mesajul pentru ca te deranjeaza. (pentru nici un alt produs)

(Sidenote: API-ul de OpenSearch pentru Firefox este implementat incomplet si gresit de 4 ani. Poate voi avea acordul ca vreodata sa contribui si sa il fixez pentru ca are potential si e pacat sa fie defect.)

Exista posibilitatea pentru power-users sa isi puna keywords pentru anumite seach-uri din setarile browser-ului. Acest lucru poate li se pare mai comod. OpenSearch, evident, nu li se adreseaza.

Daca ai ceva sa ne spui despre Community Help te rog sa ne trimiti niste feedback. Nu e o masina corporatista care triaza mesajele, chiar noi, echipa de dezvoltare, le citim.

Ideile se nasc din probleme

Am gasit pe frontnews.ro un articol destul de prost.
De curiozitate am mai stat prin site ca sa ma minunez.

Pe langa interfata foarte groaie am dat iar de developeri lenesi.
Pagina de inscriere la newsletter are greseli din punct de vedere al consistentei si al usability-ului

Screenshot frontnews.ro

Frontend News usability

Greseli:

  1. Desi textul sugereaza trei nivele de frecventa “instant, zilnic saptamanal” sunt controale doar pentru doua intervale “zilnic” si “saptamanal”.
  2. Controlul de tip checkbox pentru frecventa nu este potrivit.
    Se preta un radio button group.
    Ori zilnic / ori saptamanal. Asta scutea o verificare de inclusivitate in codul server side. (“saptamanal” include “zilnic”, deci daca ambele sunt selectate se va face default pe “saptamanal”).

Ce mi-ar placea sa vad

Un newsletter system ceva mai inteligent. Mai ales pentru o aplicatie cu un volum mare de date si categorii.

Un scenariu simplu: in jobul de zi cu zi e important sa primesc frecvent stiri despre “Social & Economic” insa timpul nu imi permite sa urmaresc zilnic “Arts & Lifestyle”. Vreau o interfata care imi permite sa ma inscriu la intervale de frecventa diferite in functie de categorie.

Acum vreau un sistem suficient de abstractizat incat sa poata fi implementat cu usurinta in proiecte care necesita  newsletter management.

Tocmai ti-am dat o idee de afacere / proiect. E un sambure.
Crezi ca poti face ceva stralucit din asta?

Ce exista deja

Evident ca viata ne-ar fi mult mai simpla daca mai multi oameni ar fi power users, ar sti ce inseamna feed-uri si RSS, ar folosi agregatoare de continut si ar avea portabilitatea datelor pe infrastructuri “cloud” de tip Netvibes si Google Reader.

Nu vom ajunge niciodata la aceasta nirvana tehnologica pentru ca userii nu sunt tech-savvy, nu sunt interesati sau au un simt acut de posesivitate a datelor: “ceea ce e in inbox e la mine”.

Adoptia tehnologiei evolueaza in ritmul celor mai dezinteresati oameni.

Nu-mi plac developerii lenesi

In aplicatiile in care premiti comunitatii sa faca input de date, te expui unui risc mare. Pe de-o parte ai crackerii iubiti de toata lumea, iar in aceeasi oala ai mucosii care profita de slabiciunile sistemului tau.

Mucosii vand sau inchiriaza ceva, iar la input-ul de pret pun o valoare absurda care le permite sa apara in capul listei pe sortarile dupa pret. Minte-ma si spune-mi ca nu sortezi des ascendent dupa pret.

Toate aceste rezultate sunt miselii care polueaza lista si fac experienta utilizatorului cu atat mai frustranta.

Dupa principiul “prost e ala care da, nu ala care cere” vina pentru porcovenii iti apartine daca esti developer.

Daca un buton de “raportare abuz” implica prea multa munca si responsabilitate din partea ta macar fii inteligent.

Outsmart the slacker – incepe prin a-ti construi un bullshit-filter:

  • Refuza din start preturile absurde – ex: 0 RON
    Daca aplicatia ta accepta elemente gratuite, da-le un checkbox pentru asta.
  • Vezi media preturilor din clusterul de rezultate si verifica extremele.
    Garsoniera la 1 RON?! Macar trece rezultatul intr-o lista spre review.
  • Analizeaza continutul mesajului dubios de ieftin
    De regula mucosii trec mai multi itemi in acelasi mesaj in care ofera si preturi suplimentare. Cauta expresii “valutare” ex: /\d+ ron/gi (cauta secvente de oricate cifre urmate de textul RON case-insensitive)Din nou, daca ti-e frica, trece-l la review.
  • Tine un log al activitatilor dubioase ale unui user.
    La un moment dat trebuie sa pui piciorul in prag
  • Nu fi lenes, fa un sistem de “raportare abuz”
    Comunitatea este mai binevoitoare decat crezi. Doar fa operatiunea cat de simpla posibil.
  • Daca esti de-a dreptul de lenes, macar arunca un ochi din cand in cand pe aplicatia ta si scoate prostiile.

Stiu ca suna drept moft, dar dracu’ e in detalii. Aplicatia ta este cu atat mai utila cu cat reduce nivelul de zgomot si ofera rezultate de calitate.

Nu uita ca utilizatorul este sfant!