Mișcarea, contrastul și ierarhia sunt bugete de atenție. Cheltuite peste tot, e ca și cum nu le-ai cheltui nicăieri.

Fiecare element care se mișcă, pulsează sau strălucește cere ceva din atenția vizitatorului. O pagină în care totul cere atenție este o pagină în care nu o primește nimic.

Bugetul de atenție

Tratează contrastul ca pe un buget. Fiecare ecran primește un singur punct principal de atenție, iar restul se așază în raport cu el. Când cineva cere ca un al doilea element să „iasă mai mult în evidență”, răspunsul onest este că altceva trebuie să iasă mai puțin. Nu există o versiune de „totul este accentuat” pe care ochiul unui vizitator să o trăiască efectiv ca accent — o trăiește ca zgomot, iar zgomotul este exact ce sare atenția unui vizitator pe drumul spre a găsi ceva care chiar arată important.

De ce e greu de impus intern

Fiecare parte implicată într-un proiect are un motiv pentru care elementul ei contează. Marketing vrea vizibilă insigna de promoție. Vânzări vrea vizibil numărul de telefon. Produsul vrea vizibilă evidențierea noii funcționalități. Fiecare cerere este rezonabilă izolat, iar o pagină construită aprobând fiecare cerere izolat ajunge cu o duzină de lucruri care se luptă pentru singurul loc pe care poate să îl ocupe întâi ochiul unui vizitator. Soluția nu este să spui nu vreunei cereri individuale — este să faci vizibil compromisul: să cazi de acord, înainte ca pagina să fie construită, asupra singurului lucru pentru care este ecranul acesta, astfel încât orice altă cerere să fie evaluată în funcție de ce fură din atenție, nu doar de ce adaugă.

Mișcare cu rost

Mișcarea își merită locul când explică o relație: de unde a venit un panou, ce tocmai a făcut un control, care element este acum selectat. Mișcarea care există ca să demonstreze că se poate mișca ceva costă timp de încărcare și, pe o pagină lungă, costă răbdare. Un efect de paralax pe o imagine de hero nu spune unui vizitator nimic despre pagina pe care se află. O tranziție care arată un card extinzându-se în vederea detaliată pe care a deschis-o îi spune exact unde se află și cum să se întoarcă — asta e diferența dintre mișcare decorativă și mișcare care face o treabă, și de obicei se vede printr-o singură întrebare: dacă am elimina animația asta, ar fi interfața mai greu de înțeles, sau doar mai puțin aglomerată?

Ierarhia este o secvență, nu un layout

Ierarhia vizuală este de multe ori tratată ca o problemă de layout — text mai mare sus, mai mic dedesubt. De fapt este o problemă de secvențiere: în ce ordine trebuie să întâlnească ochiul unui vizitator informația ca pagina să aibă sens? O pagină de prețuri unde prețul are aceeași mărime ca lista de funcționalități nu a eșuat la layout; a eșuat să decidă ce trebuie să vadă întâi un vizitator. Odată decisă secvența, mărimea, greutatea și poziția sunt doar uneltele care o impun — și funcționează doar pentru că tot ce nu este primul în secvență a fost făcut deliberat să arate ca și cum nu ar fi primul.

Reguli practice pe care le ținem

• O singură acțiune principală pe ecran, fără ambiguitate vizuală — dacă un vizitator ar putea întreba rezonabil „ce sunt eu chemat să fac aici”, ierarhia încă nu și-a făcut treaba.
• Animații sub 300 ms pentru orice se află pe drumul interacțiunii, pentru că orice durează mai mult se citește ca interfața fiind lentă, nu ca interfața fiind rafinată.
• Respectă preferința pentru mișcare redusă — este o alegere declarată, nu un indiciu, iar construirea în jurul ei ca gând ulterior înseamnă de obicei că interfața se strică exact pentru vizitatorii care au cerut să nu li se arate mișcare.
• Dacă un efect la hover este singurul mod de a descoperi ceva, acel ceva este de nedescoperit pentru jumătate din traficul tău — oricine e pe un dispozitiv tactil nu declanșează niciodată un hover.
• Grupează acțiunile înrudite și pune-le pe cele nelegate destul de departe cât un clic greșit să fie greu. Un buton de ștergere lângă un buton de salvare este o decizie de design care va costa la un moment dat pe cineva date reale.

Culoarea face mai multă treabă decât recunosc de obicei echipele

O paletă de brand cu mai multe culori de accent creează tentația de a le folosi pe toate pe un singur ecran, pentru că fiecare culoare, individual, arată corect față de ghidul de brand. Ghidul rareori spune ce se întâmplă când apar patru dintre ele împreună, luptând pentru aceeași greutate vizuală. În practică tratăm culoarea la fel ca mișcarea: un accent per ecran pentru lucrul care contează cel mai mult, cu tot restul retras spre tonuri neutre până vine rândul acelui ecran să conteze. Un brand care arată vibrant pe tot site-ul și reținut pe orice ecran individual a făcut de obicei asta corect. Un brand care arată vibrant pe fiecare ecran individual, de obicei, nu — a mutat pur și simplu zgomotul de pe un ecran pe toate.

Testarea ierarhiei fără un studiu de utilizatori

Nu ai nevoie de un laborator ca să verifici dacă funcționează ierarhia unui ecran. Mijește ochii la el, sau micșorează fereastra browserului până când textul se estompează în forme, și notează unde aterizează întâi privirea ta. Dacă nu este lucrul pe care l-ai intenționat, nicio cantitate de copywriting sau ajustare de culoare de mai târziu nu va repara asta — formele fac o afirmație pe care cuvintele nu au prins-o din urmă încă. E o verificare de cinci secunde și prinde o categorie de problemă scumpă de diagnosticat odată ce o pagină a fost lansată și cifrele arată pur și simplu mai rău decât te așteptai, fără un motiv evident.

Mobilul strânge bugetul, nu îl relaxează

Pe un ecran mic există mai puțin loc de cheltuit atenție pe orice nu este acțiunea principală, ceea ce înseamnă că disciplina opțională pe desktop devine obligatorie pe mobil. O acțiune secundară care stă confortabil lângă cea principală pe un ecran lat trebuie să concureze efectiv pentru aceeași lățime de deget pe un telefon, iar o ierarhie care nu a fost niciodată stabilită ferm se vede imediat ca un ecran înghesuit cu trei butoane de greutate vizuală similară și niciun pas următor clar. Majoritatea site-urilor au acum trafic majoritar mobil, ceea ce face din asta constrângerea mai grea de proiectat, nu una secundară — mobilul nu este o versiune mai mică a layoutului de desktop; este versiunea cu cel mai puțin loc pentru indecizie.

Unde greșește asta la scară

Un singur ecran proiectat cu un buget de atenție clar nu este greu de nimerit. Eșecul apare în timp, pe măsură ce un produs adună funcționalități și fiecare nouă adăugare vine cu propriul apel la acțiune, propria insignă sau propria evidențiere, fiecare părând rezonabilă. Șase luni mai târziu, pagina principală are patru butoane „principale”, trei elemente animate și un punct de notificare pentru ceva ce nu își amintește nimeni că a adăugat vreo notificare. Nimeni nu a luat o singură decizie proastă. Sistemul pur și simplu nu a avut niciun mecanism care să întrebe ce înlocuia noua adăugare, iar atenția care nu este apărată activ ajunge cheltuită de oricine o cere cel mai recent.

Pe scurt

Atenția este o resursă fixă pe orice ecran dat. Fiecare element care cere o parte din ea o ia din altceva, indiferent dacă a intenționat cineva compromisul acela sau nu — așa că fă compromisul deliberat, decide ce contează cel mai mult pe ecranul acesta și lasă tot restul să conteze vizibil, deliberat, mai puțin.