Când se critică o interfață grafică de obicei sunt enunțate argumente subiective - culorile nu sunt zmeurii, forma butoanelor este ”prea rotundă” sau ”insuficient de modernă”.
Există și abordări formale, obiective. Spre exemplu, în compania Palm exista rolul de ”tap counter” - cineva care număra de câte apăsări cu stiloul este nevoie pentru a efectua un lucru cu PDA'ul (dispozitiv de mărimea unui smartphone, cu touch-screen și stylus - ca un Galaxy Note, dar disponibil cu aproape 2 decenii în urmă).
O altă abordare este keystroke level modeling, ea operează cu ceva concret și cuantificabil - timpul. Metoda compară câteva interfețe și răspunde la întrebarea în cât timp un utilizator va efectua o sarcină?”.
Aceasta se face prin descompunerea unui proces, precum ”crearea unui fișier nou” sau ”achitarea unei facturi” într-un set de acțiuni primitive: pregătire mentală, apăsare de buton, trecerea de la mouse la tastatură, poziționare de mouse și reacția sistemului.
| Simbol |
Explicație |
În română |
Timp (s) |
| M |
Mental preparation |
Omul gândește înainte de a acționa |
1.35 |
| K |
Keying |
Apăsarea pe un buton |
0.2 |
| H |
Hovering |
Trecerea mâinii de la tastatură la mouse și invers |
0.4 |
| P |
Pointing |
Poziționarea mouse-ului într-un punct anumit |
1.1 |
| R |
Reaction |
Timpul în care sistemul reacționează |
|
Evident, aceste metrici variază de la om la om, în funcție de experiență și starea psihosomatică. Valorile din tabel au fost determinate experimental, observând un număr mare de indivizi și notând performanța acestora.
Timpul propriu-zis nu este chiar atât de important. Metoda își păstrează utilitatea chiar dacă le-am nota pe toate cu X, Y și Z. Ideea este că poți determina că într-o interfață durata este, de exemplu, 3X+4Z, secunde iar în alta este X+2Z secunde (așadar a doua variantă e mai bună).
Componenta cea mai simplă e reacția sistemului. Dacă timpul de reacție depășește 250ms - omul consideră că ceva nu e în regulă și de obicei mai apasă încă o dată pe buton, sau cel puțin are impresia că sistemul frânează sau nu percepe corect comenzile. Este important ca în situațiile în care un proces va dura mai mult decât atât - pe ecran să se afișeze un careva feedback - o roată care se rotește sau un indicator de progres. Dacă nu faci acest lucru - vei vedea că oamenii deschid 3 ferestre de Firefox în loc de una; sau că au cumpărat produsul de 2 ori din greșeală. Toate acestea sunt efectele absenței unui feedback adecvat.
Din ceea ce ai citit până acum, poți face câteva observații:
Un trackpoint este mai eficient decât un mouse - deoarece timpul pentru operația H (hovering, trecerea de la mouse la tastatura) e redus, pentru că fizic mâinile sunt mai aproape de tastatură și distanța parcursă e mai mică.
Pe un touch-screen P include K - atunci cînd ai ajuns cu degetul într-un loc specific - ai și apăsat pe acel loc, adică apăsarea pe buton nu te costă nimic (K = 0).
Pe un touch-screen nu există H - adică nu trebuie să treci de la mouse la tastatură, sau invers.
Operațiunile H și P sunt cele mai scumpe - o interfață care impune trecerea frecventă de la mouse la tastatură este mai lentă decât una care se bazează exclusiv pe tastatură. În acest moment utilizatorii vim zâmbesc triumfător (ambii).
Keystroke level modeling în practică
Un exemplu - cum scriu cuvântul ”zmeuriu”? Pentru aceasta trebuie să mă gândesc la ceea ce vreau să fac, apoi să apăs pe butoanele respective, adică: M K K K K K K K. Rezultatul este 1.35 + 0.2*7 = 2.75 secunde.
Atrage atenție faptului că expresia scrisă nu a fost M K M K M K M K M K M K M K, adică nu au fost 7 eforturi mentale pentru fiecare apăsare, ci doar unul, la început. Restul apăsărilor s-au făcut într-un regim automatizat, grație memoriei kinestetice. E similar cu mersul pe bicicletă - gândești doar atunci când trebuie să decizi, după asta totul e automatizat, mușchii lucrează autonom și nu trebuie să conștientizezi fiecare mișcare.
De fapt, există un set de reguli de simplificare, despre care poți afla din Wikipedia, sau din publicația în care s-a propus modelul (e din anii '80, o poți găsi pe scholar.google.com). Voi omite acele detalii, pentru că termenii pe care i-am definit până acum sunt suficienți pentru a face o analiză comparativă obiectivă.
În calitate de exemplu voi studia interfața online de achitare a facturilor oferită de Moldova Agroindbank și de Fincombank. Le-am ales pe acestea deoarece am avut oportunitatea de a le utiliza pe ambele. Una din ele mi-a cauzat o traumă psihologică, aceasta e unul din factorii care m-a determinat să scriu articolul.
Înainte de a porni la drum, trebuie să considerăm următoarele aspecte:
- Pentru achitarea unei facturi trebuie să indici prestatorul de servicii și numărul facturii
- Uneori trebuie să indici și suma pe care o achiți (e.g. atunci când achiți parțial)
- Uneori trebuie să transmiți indicațiile contoarelor (la Moldova-Gaz sau la Infocom
- Unele facturi au întotdeauna același număr (e.g. Starnet sau Moldtelecom) iar altele au numere variabile, care se incrementează lunar (e.g. Union Fenosa sau Infocom)
- De regulă, oamenii plătesc mai multe facturi dintr-o mișcare (așteaptă să vină toate, apoi pleacă la bancă)
- De regulă, oamenii achită facturi de la aceeași prestatori de servicii în fiecare lună
- Rareori oamenii plătesc și alte facturi - spre exemplu dacă te-a rugat o colegă să plătești pentru ea
Sarcina imaginară pe care o rezolvăm este să achităm facturile câtorva prestatori de servicii:
- Starnet - 82971, 155 lei
- Moldtelecom - 6429765, 12 lei
- Union fenosa - 2000981543, 209 lei
- Moldova-gaz - 45/8209162, 28.55 lei, indicațiile contorului 345
- Infocom - 326995231, 55.14 lei, indicațiile contorului 402
Acum hai să urcăm în mașina timpului, să mergem înapoi cu un deceniu și să proiectăm toate astea pe interfața Fincombank și vedem cum se atinge obiectivul ”să achit facturile pentru luna noiembrie”.
Vedem o listă cu toți prestatorii de servicii care au legătură cu Fincombank și introducem numerele facturilor în câmpurile respective.
Primul în listă este Starnet; operația arată în felul următor: ne gândim ce vrem să facem, punem mâna pe mouse, mișcăm cursorul în câmpul respectiv, facem click pe el, ne pregătim mental să scriem numărul facturii, trecem mâinile pe tastatură și facem acest lucru. În termenii KLM asta sună în felul următor:
| M |
ne gândim ce vrem să facem |
1.35s |
| H |
punem mâna pe mouse |
0.4s |
| P |
poziționăm cursorul |
1.1s |
| K |
apăsăm pe butonul drept de pe mouse |
0.2s |
| M |
pregătire mentală pentru a scrie numărul facturii |
1.35s |
| H |
ne întoarcem la keyboard |
0.4s |
| K |
introducem 5 cifre |
0.2s*5=1s |
Sau într-o linie: M H P K M H K K K K K = 1.35 + 0.4 + 1.1 + 0.2 + 1.35 + 0.4 + 0.2*5 = 5.8s
Apoi pentru Moldtelecom - gândim, punem mâna pe mouse, trecem la câmpul respectiv, etc.: M H P K M H K K K K K K K = 1.35+0.4+1.1+0.2+1.35+0.4+0.2*7 = 6.4s
Union fenosa: M H P K M H K K K K K K K K K K = 1.35+0.4+1.1+0.2+1.35+0.4+0.2*10 = 6.8s
Moldova gaz: M H P K M H K K K K K K K K K K = 1.35+0.4+1.1+0.2+1.35+0.4+0.2*10 = 6.8s
Apoi apăsăm pe butonul ”vizualizați facturile”, adică: M H P K = 1.35+0.4+1.1+0.2 = 3.05s
În rezultat trecem la un alt ecran, unde vedem un rezumat cu lista tuturor facturilor selectate, suma totală și câmpurile în care voi introduce datele contoarelor și sumele care trebuie achitate.
Cred că deja te-ai săturat să vezi aceste secvențe de litere și sumele secundelor. Totuși trebuie să facem un efort în numele științei și să ducem treaba la capăt.
În ecranul de mai sus, voi introduce suma pentru Starnet (M H P K M K K K K K), datele contorului pentru Infocom (M H P K M K K K). Apoi voi selecta numărul cardului din dropdown-menu (M H P K P K), voi introduce luna (M H P K P K) și anul expirării (M H P K P K). Voi apăsa pe butonul ”achitare” (M H P K), apoi ”confirmare” (M H P K).
În final voi vedea asta.
Aceste operațiuni consumă 29.55 secunde. Iar în total, sarcina achitării facturilor pentru noiembrie a durat 5.8+6.4+6.8+6.8+3.05+29.55 = 58.4 secunde.
Comparativ cu durata unei călătorii la bancă, așteptarea în rând, forfoteala cu banii, distragerea de la serviciu și comisionul achitat - este un rezultat excelent.
Ce ar mai putea face Fincombank pentru a îmbunătăți interfața? Dacă te întorci la punctele de mai sus, în care am descris cum de obicei durează ritualul achitării facturilor, vei găsi răspuns la întrebare. Gândește un pic, apoi citește mai departe.
.
.
.
.
.
- Lista prestatorilor de servicii include multe companii cu care nu am nicio legătură. Fincombank ar putea memoriza care sunt facturile pe care le-am achitat luna precedentă și să le afișeze doar pe acelea. Restul furnizorilor să fie accesibili dacă apăs pe butonul ”vezi lista completă”
- Numerele unor facturi sunt constante, de exemplu la Moldtelecom sau Starnet - totuși eu trebuie să le introduc de fiecare dată, în fiecare lună. Interfața ar putea completa acel câmp cu valoarea lunii precedente, iar eu o voi modifica dacă e necesar (spre exemplu, dacă achit pentru altcineva)
- În aceeași ordine de idei, interfața poate extrapola care va fi numărul facturii Infocom, Union Fenosa - utilizând numărul lunii precedente. Îl voi corecta, dacă e necesar.
Legea lui Hick zice că efortul necesar pentru a face o alegere crește odată cu numărul de opțiuni disponibile.
Evident, dacă reducem numărul opțiunilor - simplificăm problema. În cazul Fincombank, mă refer la lista completă a prestatorilor de servicii, care conține elemente irelevante din punctul meu de vedere. Cu cât mai multe servicii pot fi achitate prin această bancă, cu atât mai mult efort trebuie să depun când aleg câmpul în care scriu numărul facturii.
În general, concluzia este că interfața Fincombank este simplă, clară și că mai poate fi îmbunătățită.
Înainte de a efectua aceeași analiză pentru Agroindbank, îți sugerez să miști mai departe cana cu ceai de la computer.
Voi începe cu introducerea unui alt concept, acel al modelului unui sistem. Când un om interacționează cu un sistem, acesta își construiește un model mental, care descrie cum crede omul că se poartă sistemul. Există și modelul de sistem, care descrie comportamentul de facto a acestuia.
Dacă totul e bine, ceea ce crede omul coincide cu realitatea și atunci așteptările utilizatorului și comportamentul sistemului coincid. În caz contrar apare frustrarea și tensiunea dintre om și sistem, în popor asta se numește user interface friction.
Modelul mental pe care mi l-am construit atunci când foloseam serviciul Agroindbank este foarte diferit de modelul real al sistemului. Consecința - deseori dau de anumite erori, sau nu știu ce vrea sistemul de la mine și repet acțiunile mele, variindu-le un pic, cu speranța că de data aceasta fac ”cum trebuie”.
Logica MAIB este următoarea - mai întâi trebuie să adaugi un furnizor la lista ta, apoi ei automagic vor primi datele despre factură. M-a bucurat acest fapt când am folosit sistemul pentru prima oară, presupuneam că ei au mers pe calea cea mai zmeurie - în loc să mă impună să introduc manual numerele facturilor, o fac ei. Eu va trebui doar să confirm intenția de a plăti.
Chiar din prima clipă am fost prins în capcană. Care din opțiuni trebuie s-o aleg? Eu am ales ”plata facturilor”.
Răspunsul corect era, ”setare furnizori servicii”.
Aici trebuie să atragi atenție unui mic detaliu - ești impus să selectezi numărul contului, chiar dacă ai un singur cont. În termenii keystroke level modeling, această operațiune costă M H P K secunde. Are sens să alegi când ai din ce alege, dar când este o singură opțiune - întrebarea este irelevantă.
Am repetat același lucru pentru mai multe facturi. Câteva luni mai târziu am dat de o astfel de eroare:
Citind codul erorii am presupus că ceea ce am scris în câmpul „alias” deja am scris în una din lunile precedente. Am vrut să mai adaug niște caractere, dar am constat că lungimea câmpului e limitată la vre-o 9 simboluri.
Am fost salvat de opțiunea ”redactarea furnizorilor” în meniu - m-am dus acolo și am șters furnizorul, ca să-l pot adăuga din nou prin punctul ”setarea furnizorilor”. Ajuns acolo, trebuia din nou să introduc un alias și codul facturii. Aici interfața încalcă o altă lege fundamentală:
Niciodată nu pierde input-ul primit de la utilizator. Tot ce a fost scris/setat/configurat de om, trebuie să fie păstrat și reciclat.
Apropo, după ce adaugi un furnizor de servicii, apare o fereastră cu un buton care trebuie apăsat, altfel nu poți merge mai departe. Aici MAIB ar fi trebuit să arate un overlay non-invaziv (i.e. non-modal) undeva în partea de sus a ecranului, așa cum face Gmail atunci când expediezi un mesaj. Astfel - știi că acțiunea s-a finalizat cu succes și nu ești forțat să faci M H P K pentru a scăpa de fereastră. Notificări de același tip apar și atunci când ștergi un furnizor.
Acum te întrebi probabil, de ce am decis să adaug din nou furnizorul, în loc să extrag automat datele despre factură în baza informațiilor introduse luna precedentă? Păi - așa am vrut, dar iată ce mi-a zis sistemul:
Atunci când totul e bine, trebuie să alegi sus lista furnizorilor, apoi să apeși ”solicită factura”. După aceasta alegi o singură factură din listă și apeși ”mai departe”.
Atenție, aici MAIB iarăși a preluat de la mine careva input și apoi l-a aruncat - sus am ales mai mulți furnizori, dar jos aleg o singură factură. Când vreau să achit următoarea factură și ajung din nou la acest ecran, va trebui să aleg iarăși furnizorul.
După cum ți-ai dat seama, MAIB nu oferă posibilitatea de a plăti toate facturile într-o mișcare, trebuie să repet o anumită secvență de pași pentru fiecare factură în parte.
Iar dacă într-o lună vreau să ajut un prieten plătindu-i factura, va trebui mai întâi s-o înregistrez în lista de furnizori.
Pentru fiecare factură procesul implică câteva ferestre de confirmare, apoi îmi vine un email cu un cod unic (trebuie să trec în alt tab sau fereastră de browser, să găsesc mesajul lor, să selectez codul, apoi Copy/Paste).
Probabil te întrebi de ce nu calculez și aici fiecare pas, exprimându-l prin termeni precum M P H K. Păi - aș putea s-o fac, dar ar lua mult mai mult timp și nu ar adăuga valoare acestui articol. Chiar fără de a face toată aritmetica, știu că rezultatul va fi cardinal diferit.
Sistemul de online banking de la MAIB include o funcție foarte utilă - la momentul ieșirii din cont îți arată cât timp ai petrecut în sistem.
18 minute și 24 secunde.
Ce poate face Agroindbank pentru a îmbunătăți interfața? Este o întrebare complexă, deoarece soluția implică o oarecare doză de re-proiectare, o schimbare de paradigmă. Faptul că un concurent (cu un design grafic din mileniul precedent) rezolvă problema de optsprezece ori mai repede înseamnă că abordarea ta este pe alocuri sub-optimală.
Problema principală este diferența mare dintre modelul utilizatorului și acel al sistemului - nici acum nu sunt sigur că am înțeles cum funcționează site-ul Agroindbank. Probabil, un inginer de la MAIB care citește acest articol de mai multe ori îmi răspunde imaginar ”băi %cuvânt rău%, aici trebuia să faci %acțiune-corectă%, nu %acțiune-greșită%!”, în așa caz îți sugerez să repeți experimentul cu mama ta și să vezi pe ce apasă ea.
Testul mamei e o practică bună, deoarece îți dă șansa să vezi cum o persoană de altă generație percepe sistemul alcătuit de tine. Faptul că persoana dată îți este apropiată reduce probabilitatea că vei avea o atitudine ostilă și față de ea și vei admite pentru măcar câteva clipe posibilitatea că sistemul tău într-adevăr are unele lacune.
Concluzii
În rezultatul acestei lecturi, sper că vei învăța să aplici keystroke level modeling atunci când ai dezbateri cu colegii în privința unui design de interfață. Trebuie să admit că de mai multe ori am fost în situația în care existau contradicții care se rezolvau prin vot - implementam varianta care a fost aleasă de majoritate, nu neapărat și cea mai bună.
Trebuie să menționez și anumite limite despre care trebuie să fii conștient. Acest instrument îți arată care opțiune este mai rapidă, dar asta nu înseamnă că opțiunea dată este și cea mai estetică sau mai simplă de înțeles.
Spre exemplu, în editorul vim poți face multe lucruri foarte repede, prin câteva comenzi magice - dar te asigur că mama ta nu va putea s-o facă. Așadar, viteza nu este unica variabilă pe care trebuie s-o optimizezi.
De asemenea, keystroke level modeling nu răspunde la întrebarea ”cum să fac mai bine?”. Cu alte cuvinte, el zice doar că varianta A e mai bună decât B, dar în niciun fel nu te ajută să înțelegi dacă există și varianta C care e mai bună decât astea două.
Întrebarea din urmă se rezolvă printr-o altă metodă, care ține de conceptul de eficiență informațională, pe care posibil îl voi discuta în viitor.
Iată o lecție de la UTM în care explic aceste idei și ofer alte exemple:
De asemenea, cartea ”The humane interface” de Jeff Raskin este sursa din care am aflat eu despre această metodă și o recomand tuturor care sunt interesați în proiectarea interfețelor pentru oameni.
