Joel on Software

Joel on Software Joel despre Software

 

Designul interfetei utilizator pentru programatori
Capitolul 1
Capitolul 2
Capitolul 3
Capitolul 4
Capitolul 5
Capitolul 6
Capitolul 7
Capitolul 8
Capitolul 9

Alte articole din "Joel on Software" in Romaneste

Alte articole din "Joel on Software" in engleza

Scrie-i autorului (numai in engleza)

 

Designul interfetei utilizator pentru programatori
Capitolul 7: Proiectand pentru oameni care au lucruri mai bune de facut cu viata lor, partea a doua


De Joel Spolsky
Tradus de catre

 

Cosmin Calian


27 Aprilie, 2000

Cand Macintosh-ul era nou, Bruce "Tog" Tognazzini a scris un editorial despre UI in revista dezvoltatorilor Apple. In editorialul lui, discuta o multime de probleme de design UI interesante trimise de cititori. Aceste editoriale continua si in ziua de azi pe site-ul lui de web. Acestea au fost colectionate si infrumusetate in cateva carti extraordinare, cum ar fi Tog on Software Design, care e o distractiva si o excelenta introducere in designul UI. (Tog on Interface a fost chiar mai buna, dar nu mai este editata.)

Tog a inventat conceptul menu bar-ului inalt de o mila pentru a explica de ce menu bar-ul pe Macintosh, care este intodeauna lipit de partea de sus a ecranului fizic, este cu mult mai usor de utilizat decat menu bar-urile din Windows, care par in interiorul fiecarei ferestre aplicatie. Cand vrei sa accesezi meniul File in Windows, ai o tinta cam de de o jumatate de inch lata si un sfert de inch inalta pentru a reusi. Trebuie sa misti si sa pozitionezi mouse-ul destul de precis atat pe dimensiunea verticala cati si pe cea orizontala.

Dar pe un Macintosh, poti izbi mouse-ul in partea de sus a ecranului, fara a tine seama de cat de sus izbesti, si se va opri la muchia fizica a ecranului - pozitia corecta verticala pentru a folosi meniul. Deci, efectiv, ai o tinta care este inca de o jumatate de inch lata, dar inalta de o mila. Acum doar trebuie sa ai grija la pozitionarea orizontala a cursorului, nu verticala, si astfel sarcina de a face click pe un element de meniu este mult mai usoara.

Bazat pe acest principiu, Tog are un test cunoscut: care sunt cele cinci puncte pe ecran care sunt cel mai usor de atins (de punctat) cu mouse-ul? Raspunsul: toate cele patru colturi ale ecranului (unde literalmente poti izbi instantaneu mouse-ul fara a tinti in nici un fel), plus, pozitia curenta a mouse-ului, deoarece deja se afla acolo.

Principiul menu bar-ului inalt de o mila este destul de bine cunoscut, dar nu trebuie sa fie totalmente evident, pentru ca echipa Windows 95 a pierdut complet din vedere esentialul cu butonul Start, pozitionat aproape in coltul jos stanga al ecranului, dar nu exact . De fapt, este cam la 2 pixeli distanta de baza si 2 pixeli de stanga ecranului. Deci, de dragul catorva pixeli, Microsoft literalmente "smulge infrangerea din dintii victoriei", scrie Tog, si face cu mult mai grea accesarea butonului start. Ar fi putut fi o mila patrata, absolut trivial de atins cu mouse-ul. De dragul a ceva, nu stiu ce, nu este. Doamne fereste!

In capitolul anterior, am vorbit despre cum utilizatorii urasc cititul, si il vor evita, doar daca nu cumva nu isi pot finaliza sarcina. Similar:

Utilizatorii nu pot controla mouse-ul foarte bine. 

Nu vreau sa spun asta literalmente. Ce vreau sa spun este ca, ar trebui sa iti proiectezi programul astfel incat sa nu necesite o extraordinara agilitate in folosirea mouse-ului pentru a-l utiliza bine. Top sase motive:

  1. Uneori oamenii folosesc dispozitive de pointare ne-optime, cum ar fi trackball-urile, trackpad-urile, si chestia mica rosie de pe ThinkPad, care sunt mai greu de controlat decat adevaratele mouse-uri.
  2. Uneori oamenii folosesc mouse-uri in conditii proaste: un birou ingramadit; un trackball murdar facand mouse-ul sa sara; sau chiar mouse-ul insasi este o clona de $5 care pur si simplu nu merge bine.
  3. Unii oameni sunt incepatori cu calculatoarele si inca nu si-au dezvoltat capacitatile motorii pentru a folosi corect mouse-urile.
  4. Unii oameni literalmente nu vor avea niciodata capacitatile motorii pentru a folosi mouse-urile precis. S-ar putea sa aiba artrita, tremuraturi, sindrom de tunel carpial; s-ar putea sa fie foarte tineri sau foarte batrani; sau orice alte disabilitati.
  5. Multi oameni gasesc ca e extrem de dificil sa faca dublu-click fara a misca putin mouse-ul. Ca urmare, deseori trag icon-urile pe ecran cand vor sa lanseze aplicatii. Poti recunoaste acesti oameni dupa desktop-urile lor care sunt dezordonate, deoarece in jumatate din incercarile lor de a lansa ceva, sfarsesc prin a muta in schimb.
  6. Chiar in cele mai bune situatii, utilizarea extensiva a mouse-ului pare lenta oamenilor. Daca constrangi oamenii sa execute o operatie multi-pasi folsind mouse-ul, s-ar putea sa aiba impresia ca sunt tinuti in loc, care ca urmare face UI-ul sa para nereceptiv, care, cum ar trebui sa stii deja, ii face nefericiti.

Pe vremuri, cand lucram la Excel, laptopurile nu aveau dispozitive de pointat incorporate, si atunci Microsoft a facut un trackball atasabil care se conecta intr-o parte a tastaturii. Ei, un mouse este controlat cu incheietura mainii si majoritatea degetelor. Aceasta este foarte similara cu scrierea, si probabil ti-ai dezvoltat capacitati motorii foarte precise pentru scriere in scoala elementara. Dar un trackball este controlat in intregime cu degetul mare. Ca urmare, e mult mai greu sa controlezi un trackball cu acelasi grad de acuratete ca si un mouse. Majoritatea oamenilor descopera ca pot controla un mouse pana la unul sau doi pixeli, dar pot controla un trackball pana decat pana la 3 sau 4 pixeli. In echipa Excel, intodeauna am indemnat oamenii sa incerce noile lor UI-uri cu trackball-ul, in loc sa le incerce doar cu un mouse, pentru a vedea cum s-ar simti oamenii care nu sunt capabili sa duca mouse-ul exact unde doresc ei.

Unul din elementele UI care ma deranjeaza cel mai mult este dropdown combo list box-ul. E acela care arata ca acesta:

Cand faci click pe sageata jos, se expandeaza:

Gandeste-te cate mouse click-uri distincte vor fi necesare pentru a alege, sa zicem, Times New Roman. Intai, trebuie sa dai click pe sageata jos. Apoi, folosind scroll bar-ul, trebuie sa faci scroll atent pana cand Times New Roman este vizibil. Multe din aceste liste dropdown sunt cu nepasare proiectate sa arate doar doua sau trei obiecte la un moment dat, astfel acest scrooling nu este prea usor, in special daca ai o multime de fonturi. Implica ori tragerea indexului (cu un asa mic interval de miscare, e improbabil ca aceasta va functiona), sau facand in mod repetat click pe a doua sageata jos, sau incercand sa faci click in zona dintre index si partea de jos -- care eventual nu va mai functiona cand indexul ajunge destul de jos, enervandu-te chiar mai mult. In final, daca reusesti sa aduci Times New Roman in vedere, trebuie sa faci click pe el. Daca nu nimeresti, o iei din nou de la inceput. Acum inmulteste cu 10, daca, sa zicem, vrei sa folosesti un font fantezist pentru prima litera in fiecare din capitolele tale, si esti chiar nefericit. 

Neinsemnatul control dropdown este cu atat mai enervant, caci exista o solutie asa simpla: doar fa dropdown-ul destul de lung pentru a contine toate optiunile. 90% din combo box-uri nici macar nu folosesc tot spatiul disponibil pentru a se desfasura, ceea ce e un pacat . Daca nu exista destul spatiu intre edit box-ul principal si baza ecranului, controlul dropdown ar trebui sa creasca pana cand cuprinde toate obiectele, chiar daca trebuie sa se intinda de la partea de sus a ecranului fizic pana la baza ecranului fizic. Si atunci, daca inca sunt mai multe obiecte decat pot sa incapa, fa scroll automatic pe masura ce mouse-ul se apropie de margine, in loc sa ii ceri utilizatorului sa se incurce cu un scrollbar minuscul.

Mai mult, nu ma obliga sa fac click pe mica sagetuta din dreapta edit box-ului inainte sa faci sa se desfasoare combo-ul: lasa-ma sa fac click oriunde in combo box. Aceasta extinde tinta click de zeci de ori si face mult mai usor de atins tinta cu mouse pointer-ul.

Sa ne ocupam de alta problema de folosirea mouse-ului: edit box-urile. S-ar putea sa fi observat ca aproape orice edit box pe Macintosh foloseste un font voluminos, lat, clar   numit  Chicago care arata cam urat si deranjeaza la nesfarsit designerii grafici. Designerii grafici (spre deosebire de designerii UI) au fost invatati ca fonturile subtiri, cu spatiere variabila sunt mai gratioase, arata mai bine, si sunt mai usor de citit. Toate acestea sunt adevarate. Dar designerii grafici si-au deprins abilitatile pe hartie , nu pe ecran. Cand ai nevoie sa editezi text, spatierea fixa are un avantaj major fata de fonturile cu spatiere variabila: e mai usor sa vezi si sa selectezi litere inguste ca "l" si "i". Am invatat aceasta lectie dupa ce am urmarit un batran de saizeci de ani intr-un test de utilizabilitate chinuindu-se sa editeze numele strazii sale, care era ceva de genul Fillmore Street. Foloseam Arial de 8 puncte, deci edit box-ul arata ca acesta:

Observa ca I-ul si L-urile sunt literalmente late de un pixel. Diferenta dintre litera I mic sand si litera L mic este la propriu un pixel. (In mod similar, este aproape imposibil sa vezi diferenta dintre literele mici "RN" si "M", astfel in acest edit box ar putea fi de fapt Fillrnore.)

Exista foarte putina lume care ar observa daca a tastat gresit Flilmore sau Fiilmore sau Fillrnore, si chiar daca ar observa, le-ar fi al naibii de greu incercand sa foloseasca mouse-ul pentru a selecta si a corecta litera nedorita. De fapt, ar avea dificultati chiar si la folosirea cursorului clipitor, care este lat de doi pixeli, pentru a selecta o singura litera. Uite cu cat mai usor ar fi fost daca am fi avut un font voluminos (afisat aici cu Courier Bold)

Bine, OK, ocupa mai mult spatiu si nu pare asa grozav designerilor tai grafici. Impaca-te cu ideea! E mult mai usor de utilizat;  pare chiar mai placut de utilizat deoarece in timp ce utilizatorul tasteaza, textul e definit, clar si e mult mai usor de editat.


 

Un tipar obisnuit de gandire de programator: exista doar trei numere: 0, 1, si n. Daca n este permis, toate n-urile sunt la fel de probabile. Acest tipar de gandire vine din convingerea (probabil adevarata) ca nu ar trebui sa ai nici o constanta numerica in codul tau exceptand 0 si 1. (Constantele altele decat 0 si 1 sunt sunt privite ca "numere magice". Nici macar nu vreau sa intru in detaliile aceastei probleme.)

Astfel, de exemplu, programatorii tind sa creada ca daca programul tau iti permite sa deschizi documente multiple, trebuie sa iti permita sa deschizi  infinit de multe documente (cat iti permite memoria), sau cel putin 2^32, singurul numar magic pe care programatorii il admit. Un programator ar tinde sa priveasca cu dispret la un program care te-a limitat la 20 de documente deschise. Ce-i 20? De ce 20? Nu-i nici macar o putere a lui 2!

O alta implicatie a toate n-urile sunt la fel de probabile este ca programatorii au tins sa creada ca daca utilizatorilor li se permite sa redimensioneze si sa mute ferestre, ar trebui sa aiba flexibilitate completa asupra unde sunt mutate, pana la ultimul pixel. In consecinta, pozitionarea unei ferestre la 2 pixeli de partea de sus a ecranului este "la fel de probabil" ca pozitionarea ferestrei exact in partea de sus a ecranului.

Dar nu-i adevarat. Se pare ca, exista o multime de intemeiate pentru care s-ar putea sa vrei o fereastra exact in partea de sus a ecranului (maximizeaza eficienta de folosire a spatiului ecran), dar nu exista nici un motiv pentru a lasa 2 pixeli intre partea de sus a ecranului si partea de sus a ferestrei. Deci, in realitate, 0 este mult mai  probabil decat 2.

Programatorii de la Nullsoft, creatorii WinAmp-ului, au reusit cumva sa evite gandirea-de-programator care a ne-a limitat pe toti restul timp de o decada. WinAmp are o grozava caracteristica. Cand incepi sa tragi fereastra aproape de marginea ecranului, ajungand in limita a cativa pixeli, automat se  aliniaza perfect cu marginea ecranului. Care probabil, este exact ceea ce doreai, din moment ce 0 e mult mai probabil decat 2. (Fereastra principala a Juno are o caracteristica similara: este singura aplicatie care am vazut-o vreodata care e "inchisa" pe ecran si nu poate fi trasa mai departe de margine.)

Pierzi putin din flexibilitate, dar in schimb, obtii o interfata utilizator care admite ca manuirea precisa a mouse-ului este dificila, si atunci de ce ar trebui? Aceasta inovatie (care fiecare program ar putea-o folosi) usureaza povara managementului ferestrelor intr-un mod inteligent. Examineaza-ti indeaproape interfata utilizator, si mai slabeste-ne. Presupune ca suntem gorile, sau poate urangutani destepti, si intr-adevar avem probleme cu mouse-ul.



> Capitolul 8

Acest articol a aparut initial in engleza cu numele User Interface Design for Programmers Chapter 7: Designing for People Who Have Better Things To Do With Their Lives, Part Two  

Joel Spolsky este fondatorul Fog Creek Software, o mica firma de software din New York City. El a absolvit Universitatea Yale si a lucrat ca programator si manager la Microsoft, Viacom si Juno.


Continutul acestor pagini reprezinta opinia unei singure persoane.
Tot continutul Copyright ©1999-2005 de Joel Spolsky. Toate Drepturile Rezervate.

FogBUGZ | CityDesk | Fog Creek Software | Joel Spolsky