Smashing Book 6 Extras: Aducerea personalității înapoi pe web

Aspectele web generice au devenit oarecum o denumire greșită în conversațiile care circulă în jurul designului web în aceste zile. Suntem plictisiți și puțin enervați de cât de previzibile și neinspirate au devenit majoritatea experiențelor web. Nu fără motiv, însă. Fiecare pagină de destinație pare să fie un geamăn față de aproape orice altă pagină web.

În antet, o imagine de erou convingătoare cu un titlu principal scurt este urmată de un subtitlu mai lung. Sub ele, blocuri uniforme de obiecte media sunt alternate - o imagine și câteva paragrafe de text. Mai întâi, text în stânga, imagine în dreapta; apoi imagine în stânga, text în dreapta. Clătiți și repetați. Fotografiile de profil rotunjite și o grilă pătrată de miniaturi completează imaginea, cu forme perfecte aliniate perfect de-a lungul grilei cu 12 coloane. Singurele variații provin de la tranziții sporadice de paralaxă și carusele notorii, poziționate în partea de sus sau de jos a paginii - sau poate ambele.

Nu este că cineva a impus aceste reguli sau limitări asupra producției noastre creative; de obicei, ele provin din motive bune și din cele mai bune intenții. La urma urmei, una dintre principiile principale ale designului web a fost întotdeauna crearea unei interfețe subtile, aproape invizibile și funcțională - o interfață care nu-i face pe utilizatori să gândească, unde mai puțin este mai mult, iar forma urmează funcției, unde simplitatea predomină - o interfață. unde totul se simte corect.

Cu toate acestea, atunci când totul este structurat într-un mod previzibil, nimic nu iese cu adevărat în evidență. Având în vedere cât de remarcabil de asemănătoare sunt numele, siglele, pictogramele, tipografiile, machetele și chiar nuanțele de degrade de pe butoanele de apel la acțiune, nu este surprinzător că utilizatorii noștri le este greu să facă distincția între mărci , produse și servicii în prezent.

Foarte puțini oameni ratează vremurile de aur ale infamului Flash, cu aspectele sale uimitor de experimentale și navigarea obscură cu carne de mister. Desigur, în multe cazuri, accentul s-a mutat de la crearea unei experiențe la simpla furnizare de conținut într-o formă structurată. Totuși, spre deosebire de vremurile acelea bune când vorbeam despre cât de minunate sau oribile erau site-urile web, astăzi majoritatea experiențelor sunt aproape invizibile , ceea ce face excepțional de dificil să te conectezi emoțional cu ele.

Dacă ți-aș cere să te gândești la un site web vizitat recent, care a lăsat o impresie de durată, memorabilă asupra ta, sau la ce site-uri web pe care le iubești și admiri cu adevărat pentru designul lor unic, sau ce site web a avut o personalitate cu adevărat remarcabilă, ai fi capabil să răspunzi la acestea. intrebari imediat? Ai putea oferi mai mult de unul sau două exemple? Sunt șanse să nu o faci.

Nu orice site trebuie să fie de neuitat. Nu înseamnă că site-urile web memorabile au performanțe mai bune sau ating indicatorii cheie de performanță mai buni. Cu toate acestea, dacă doriți ca produsul sau serviciul dvs. să iasă în evidență într-un mediu extrem de competitiv și provocator, trebuie să fiți diferit într-un fel. Mulți dintre noi ar considera că aceasta este sarcina echipei de marketing. La urma urmei, ar trebui să plaseze produsul în lumina potrivită, la locul potrivit, pentru publicul potrivit, la prețul potrivit. Cu toate acestea, într-o lume în care multe produse digitale sunt destul de utilizabile și bogate în funcții, aceasta ar fi o întreprindere descurajantă care ar necesita adesea luni de cercetare și testare ample, fără garanția unui rezultat de succes. Și chiar și atunci, cu excepția cazului în care ești extrem de bun la prezicerea și modelarea următorului lucru strălucitor, s-ar putea să nu fie suficient de bun.

Clienții sunt obișnuiți și se așteaptă la experiențe decente. Ele nu sunt întotdeauna rapide sau directe, dar pur și simplu din cauza numărului mare de oferte, există întotdeauna instrumente și servicii decente care ar fi suficient de bune.

Tindem să credem că ne raționalizăm deciziile la extreme, alegând cei mai buni candidați, dar nu este neapărat adevărat. Conform binecunoscutei teorii satisfăcătoare a lui Herbert A. Simon, avem tendința de a prefera prima opțiune care îndeplinește un prag de acceptabilitate, doar pentru că nu știm dacă putem găsi o opțiune mai bună sau cât de mult efort ar fi nevoie. Rareori studiem în detaliu întregul spectru de opțiuni (și uneori este aproape imposibil) și, ca urmare, ne mulțumim cu un candidat care ne satisface nevoile sau pare să răspundă majorității nevoilor.

Pentru a atrage atenția unui public, trebuie să fim mai buni decât „suficient de buni”. Nimic nu poate învinge cuvântul în gură, dar pentru a ajunge acolo trebuie să venim cu ceva care merită privit. Dacă ți-aș spune că există o scurtătură pentru a ajunge acolo?

Nu este vorba doar de preț. Nu este vorba doar de caracteristici. Nu este vorba doar despre alegerea poziției corecte a butoanelor sau a nuanțelor potrivite de culori în teste A/B nesfârșite. Și nu este vorba despre alegerea unei ilustrații simpatice de mascotă care să apară în campaniile de e-mail. În cele din urmă, este vorba despre crearea unei experiențe de care oamenii se pot îndrăgosti sau de care se pot conecta profund - o experiență care, desigur, conduce scopul site-ului, dar arată și latura umană a acestuia, precum personalitatea oamenii o construiesc, valorile și principiile lor, alegerile și prioritățile lor.

Aceasta înseamnă proiectarea vocii și a tonului, copierea interfeței și îmbrățișarea povestirii, autenticității, incluziunii și respectului; și toate acestea, în timp ce se stabilește un limbaj vizual unic susținut de compoziții originale de aspect și modele de interacțiune. Împreună cu mesajele clare și sincere, acestea creează o semnătură unică, care, utilizată în mod consecvent, face ca produsul să iasă în evidență de restul. Această sarcină poate suna la fel de descurajantă ca luni de cercetare de marketing, dar nu necesită neapărat o cantitate enormă de efort sau resurse.

În acest capitol, vom analiza câteva tehnici și strategii practice care vă pot ajuta să vă găsiți, să vă formați și să vă evidențiați personalitatea în mod eficient. Procedând astfel, vom explora modul în care acest lucru în mod constant s-ar putea integra în fluxurile de lucru de proiectare existente, împreună cu o mulțime de exemple pentru a vă oferi un început bun. Dar înainte de a ajunge acolo, trebuie să ne dăm seama cum modelele de design omniprezente și cele mai bune practici se potrivesc în ecuație.

Erupție prin efracție

Procesul creativ nu este liniar. Fiecare decizie de design – de la culori și tip până la aspect și interactivitate – ne cere să luăm în considerare opțiunile și să evaluăm combinațiile. În timp ce procesul creativ este adesea văzut ca un proces simplu, iterativ, în realitate este foarte rar să trecem fără probleme de la o machetă la alta printr-o serie de îmbunătățiri și ajustări. De cele mai multe ori, avem tendința de a pluti și de a diverge, îndreptându-ne dintr-o fundătură în alta, rezolvând conflicte și redirecționând direcția noastră creativă pe parcurs.

Acele fundături se întâmplă atunci când realizăm că nu ajungem nicăieri cu rezultatul expus pe pânza noastră digitală. Am fost acolo de atâtea ori, știm să explorăm teritorii neexplorate și cum să manevrăm flancurile și, pe măsură ce continuăm să ne sculptăm ideile, continuăm să facem progrese, îndreptându-ne încet, dar constant către un rezultat tangibil. Doi pași înainte, un pas înapoi, revizuirea a ceea ce am făcut până acum și rafinarea acelor pixeli prețioși - pe baza... sincer, pe baza intuiției și a experimentelor aleatorii. În cele din urmă, dus-întors ne aduce într-un loc calm, liniștit și frumos - exact acolo unde credem că am găsit o soluție - soluția .

Știm, desigur, că este puțin probabil ca acesta să fie acela , nu-i așa?

Această călătorie de la nimic la ceva nu este doar plină de micro-decizii conflictuale; este plin de necunoscute, capcane, frecări și constrângeri dificile, fie ele de natură tehnică sau sensibile la timp. Și în fiecare moment al procesului, creaturile frumoase și inofensive ale imaginației noastre pot fi zdrobite fără milă de realitatea dură a interviurilor cu utilizatorii și a revizuirilor clienților. Așa că ne învârtim dintr-o direcție în alta într-un loc fertil, dar remarcabil de ostil. Drept urmare, de obicei, nu ne putem permite luxul de a pierde timp, deoarece știm că calea către acel termen limită, care plutește inofensiv în viitorul îndepărtat, va fi plină de surprize și întoarceri neașteptate.

Pentru a evita pierderea timpului, ne bazăm pe lucruri care au funcționat bine în proiectele noastre anterioare — navigarea în afara pânzei, modelul acordeonului, imaginile de profil rotunjite și aspectul de grilă sfântă cu 12 coloane. Nu din lipsă de cunoștințe, abilități sau entuziasm ne întoarcem la toate acele practici consacrate - este doar infinit mai dificil și mai consumator de timp să venim cu ceva diferit de fiecare dată. Și pentru că ne lipsește timp, folosim toate acele modele de design minunate, încercate și testate - toate soluții tangibile și viabile pentru un anumit tip de problemă. Evident, acest proces ar putea fi ușor diferit pentru diferiți oameni, dar împărțit în esența sa, asta se întâmplă în culise, pe măsură ce progresăm în designul nostru.

Când am început să lucrăm la reproiectarea revistei Smashing Magazine acum câțiva ani, unul dintre primii pași pe care i-am făcut a fost listarea și explorarea componentelor și micro-interacțiunilor. Am creat aspectul articolului și un ghid de stil, tabele și formulare receptive și am folosit multe dintre cele mai bune practici stabilite pentru a le menține accesibile, rapide și receptive. Cu toate acestea, când am pus toate aceste componente perfecte împreună, ne-am dat seama că, deși funcționau bine ca soluții de sine stătătoare, pur și simplu nu au funcționat împreună ca un întreg. Elementele de bază ale sistemului nu au fost suficiente pentru a menține și susține sistemul. A trebuit să reproiectăm ceea ce am construit până acum și a trebuit să introducem conexiuni globale între acele componente care vor fi definite prin personalitatea și vocea și tonul noii identități.

Când aplicăm modele de design la interfețele noastre, în esență reunim un grup de module libere sau interacțiuni care nu au nicio legătură cu orice altceva. În loc să ne întrebăm cum un anumit tipar ajută la determinarea scopului experienței, deseori explorăm o micro-problemă în mod izolat, punând împreună micro-soluții. Cu modelele de design, riscăm să adăugăm o componentă doar pentru că este la modă în zilele noastre - cum ar fi un efect de paralaxă, tranziții lente și de impact și fade-in-uri. Procedând astfel, uneori am putea pierde imaginea de ansamblu a rolului pe care îl va juca acea componentă la o scară mai mare și cum ar putea fi conectată la orice altceva. Drept urmare, producem modele fără suflet, plictisitoare, umflate cu compoziții generice și tratamente vizuale generice. Așa creăm ceva care arată ca orice altceva.

Totuși, nu este că modelele de design și cele mai bune practici sunt neapărat rele. Ele sunt doar o sabie cu două tăișuri care ajută și deranjează rezultatul vizual.,Când le aplicăm, trebuie să facem acest lucru cu grijă și atent. Ori de câte ori vă gândiți să rezolvați o problemă cu un model de design, este o idee bună să vă puneți câteva întrebări:

1. Ce problemă rezolvăm mai exact?
2. Este modelul într-adevăr cea mai bună soluție pentru problemă?
3. Cum experimentează oamenii această interacțiune și ce puncte de durere întâmpină în timp ce o fac?
4. Cum ne ajută această componentă să atingem obiectivul general al sistemului?
5. Cum conectăm acea componentă la restul sistemului, atât în ​​ceea ce privește estetica, cât și designul de interacțiune?
6. Soluția este într-adevăr înțeleasă universal sau trebuie să oferim mai multă claritate designului (etichete, copie mai bună, accesibilitate, înlocuirea pictogramelor cu cuvinte)?
7. Este o idee bună să păstrați modelul așa cum este în orice moment? Sau este mai bine să-l încărcați sau să o ajustați în mod condiționat, poate în funcție de vizualizare sau de câte ori a vizitat pagina un client?

În esență, încercăm să defalcăm un model de design explorând când și cum este util sau dăunător și cum ajută la atingerea obiectivelor noastre. Ieșim din tiparele previzibile, intrând în natura lor și înțelegem de ce le folosim de fapt. În primul rând, examinăm componenta în forma sa simplă, abstractă, fără contextul unde este utilizată în mod obișnuit și cum este de obicei proiectată; de exemplu, în loc să ne gândim la o navigare în afara pânzei care alunecă de la stânga la dreapta sau de la dreapta la stânga, ne uităm la modelul de interacțiune pe cont propriu - în esență, dezvăluire progresivă în care conținutul este ascuns în mod implicit și afișat la clic/ Atingeți. Apoi, pentru fiecare model, explorăm problemele și problemele de utilizare, le rezolvăm și apoi stilăm și proiectăm modulul într-un mod care să se simtă conectat la orice altceva. Ultimul pas ar putea fi ceva la fel de simplu ca o tranziție utilizată în mod constant, sau un model geometric sau o poziție neconvențională în aspect. În cele din urmă, odată ce totul este la locul său, reambalăm modelul de design și îl adăugăm în bibliotecă, gata pentru a fi servit pentru restul sistemului.

Desigur, cele mai bune practici și modelele de design sunt scurtături fantastice pentru a merge mai repede pe drumul cel bun. Ele ne permit să accesăm interacțiunile previzibile și cunoștințele secvențiale pe care majoritatea utilizatorilor noștri le vor avea. De fapt, ele sunt la fel de relevante astăzi precum au fost întotdeauna. Cheia constă în găsirea unei modalități de a le aplica în mod semnificativ în contextul limbajului vizual utilizat pe tot site-ul și în a ști când să le rupe în mod deliberat pentru a declanșa o conexiune emoțională.

Oamenii se conectează la oameni

Îți amintești vremurile bune când foloseam un „noi” omniprezent pentru a face micile noastre magazine web să pară mai mari decât erau de fapt? S-ar putea să fi fost singura persoană care lucrează independent de acasă în papuci și halat de baie, sau una dintre puținele persoane dintr-o agenție de design mică, dar acel „noi” profund a făcut ca compania să pară mai serioasă și, prin urmare, mai demnă de încredere, nu a făcut-o. aceasta? Ne-am prefăcut că suntem altcineva pentru a obține proiecte care altfel nu ni s-ar fi încredințat - și voi fi primul care să recunosc că sunt la fel de vinovat ca toți ceilalți.

În zilele noastre, când atât de multe lucruri din jurul nostru sunt exagerate și înșelătoare, autenticitatea rămâne una dintre puținele calități la care oamenii se conectează cu adevărat. Prea des, totuși, nu este expusă deloc prin intermediul unui site web, creând, din păcate, o imagine vagă a unei alte entități obscure acoperite cu fotografii de stoc corporative și jargon fără sens. Când fiecare brand promite să perturbe sau să fie diferit, nimic nu se simte cu adevărat perturbator sau diferit, iar acest lucru provoacă înstrăinare și scepticism.

Oamenii se pot conecta cu adevărat la mărcile în care au încredere, dar mărcile trebuie să câștige această încredere mai întâi. Evident, vine din recomandări de încredere și experiențe pozitive. Dar, în calitate de designeri care comunică în numele companiilor, cum obținem în mod eficient încrederea în oamenii care nu sunt încă conștienți de brand? După cum se dovedește, încrederea poate veni și din aspectul mărcii, care poate fi influențată de valorile, credințele, principiile și activitățile sale. Nu este ușor să te îndrăgostești de o companie sau organizație fără să cunoști pe cineva care o admiră aproape contagios. Este mult mai ușor să te conectezi cu oameni ale căror valori le susții și cu oameni care susțin credințele și principiile lor.

Dacă oamenii se conectează cel mai bine la oameni, poate dacă interfețele noastre ar reflecta valorile oamenilor care le-au creat, am putea fi cu un pas mai aproape de declanșarea acelei conexiuni emoționale dorite. Am mai fost acolo, bineînțeles, și de aceea îi arătăm pe o pagină „Echipă” sau în subsolul primei pagini pe cei care lucrează în companie, nu? Ei bine, haideți să privim asta dintr-o perspectivă puțin diferită.

Ce se întâmplă dacă ți s-ar cere să descrii personalitatea mărcii tale ? Ce adjective ai folosi? Gândește-te la asta un minut și notează-le.

Gata? Sunt șanse mari să găsiți răspunsuri comune și previzibile. Poate că au venit în minte cuvinte precum „simplu”, „curat”, „puternic”, „dinamic”, „flexibil” sau „bine structurat”. Sau poate „atent la detalii”, „concentrat”, „centrat pe utilizator” și „concentrat pe calitate”.

Puteți vedea o problemă cu aceste răspunsuri? Aceste cuvinte descriu mai degrabă intenția noastră decât personalitatea noastră. În timp ce primul este de obicei foarte specific și stabil, cel din urmă este de obicei foarte neclar și în continuă schimbare. Calitățile prezentate mai sus nu oferă un răspuns bun la întrebare, deoarece descriu cum vrem să fim percepuți , dar nu neapărat cum suntem de fapt. De fapt, de obicei, nu știm cu adevărat cine suntem sau cum suntem percepuți în afara bulei confortabile a companiei în care ne aflăm.

În schimb, ce se întâmplă dacă le-ai pune colegilor și clienților o întrebare puțin diferită: la ce le pasă cel mai mult în munca lor și ce prețuiesc cel mai mult la companie sau la produs. Poate că le pasă de diversitatea colegilor talentați, motivați, cunoscători și experimentați, dar și abordabili și umili? Poate este faptul că compania contribuie activ la proiecte pro bono pentru organizații non-profit care fac o diferență reală în lume. Poate pentru că sprijină școlile și nou-veniții în industrie oferind o bursă anuală. Sau pentru că leagă profiturile cu un bonus salarial corect pentru toți angajații. Sau doar pentru că vă permite să vă jucați cu cele mai recente tehnologii de lux și cu experimente nebunești și să contribui la open-source în cinci la sută din timpul tău de lucru. Compania nu are nevoie de ambiții uriașe, obiective idealiste sau de un mediu de lucru elegant pentru a ieși în evidență.

Notă secundară : Proiectarea unor experiențe umane înseamnă a fi amabil și umil și a sublinia calitățile care contează pentru companie și pentru utilizatori. Aceasta înseamnă evidențierea confidențialității, respectului, eticii și transparenței, dar și reflectarea personalității oamenilor care lucrează la produs .

Iată un exemplu. Compania dvs. ar putea să-i pese profund de diversitate, confidențialitatea datelor, accesibilitate și prețuri transparente. Aceasta ar însemna că interfața dvs. este accesibilă și sinceră, luați o poziție publică împotriva divulgării datelor clienților către terți și includeți funcții care sprijină compararea prețurilor fără a vă împinge agenda peste margine. Puteți evidenția aceste valori în mod proeminent împreună cu nivelurile de prețuri competitive și puteți măsura rezultatul.

Acum, puteți găsi un fir similar printre toate afirmațiile de mai sus? Deoarece provin din experiențe personale, par mult mai umani și mai identificabili decât termenii mai generali și abstracti cu care ați putea veni inițial.

De aceea, companii precum Slack sau MailChimp se simt mult mai tangibile decât mărci precum Uber sau General Electric. Ei folosesc microcopii și ilustrații ciudate și informale care reflectă latura lor umană. Ei nu strălucesc printr-o declarație de misiune sau comunicate de presă, ci prin ciudateniile din interfață și prin modul în care comunică public, prin e-mail sau pe canalele sociale. Acesta este fundamentul de bază al unui personaj profund integrat în experiența utilizatorului.

Pentru a evita o apariție generică, trebuie să vă definiți mai întâi personalitatea . Asta înseamnă să pui întrebările potrivite și să găsești răspunsuri corecte. Când am realizat interviuri cu utilizatorii cu cititorii noștri, ne-am dat seama rapid că aveau o perspectivă destul de diferită asupra mărcii Smashing decât noi. Sincer, am descris cu încredere brandul, enumerand toți suspecții obișnuiți, calitățile cu care probabil ați venit inițial. Adevărul a fost însă derutant: nu am fi putut fi mai departe de modul în care marca a fost percepută de fapt.

Ne-am dorit întotdeauna ca revista să fie o publicație profesionistă, respectabilă, cu o voce puternică în industrie, evidențiind munca importantă depusă de membrii comunității. Interviurile utilizatorilor au scos în evidență calități care nu descriu cu adevărat acest obiectiv în modul în care ne-am străduit întotdeauna. În schimb, am auzit cuvinte precum „informal”, „ciudat”, „prietenos”, „accesibil”, „de susținere”, „comunitate” și, cel mai important, „pisici”.

Acum, nu am vrut niciodată ca moștenirea noastră să fie pisici, dar nu depindea cu adevărat de noi în acest moment. În 2012, dragul nostru ilustrator Ricardo Gimenes a ales să aducă la viață o pisică Smashing ca mascota pentru prima noastră conferință Smashing. Nu a existat o decizie conștientă pro sau contra. Nici măcar nu am discutat în mod corespunzător, pentru că nu știam dacă oricum vom găzdui mai multe conferințe în viitor. Această mică decizie a pus în mișcare ceva pe care nu l-am putut respinge ani mai târziu. Deoarece conferințele s-au dovedit a deveni unul dintre produsele noastre centrale, le-am promovat puternic în mailing-urile, anunțurile, postările de lansare și mesajele pe rețelele sociale.

De-a lungul timpului, fiecare conferință a trebuit să suporte o ilustrație proprie a pisicii și toate aceste pisici s-au confruntat cu clienții noștri din nou și din nou de ani de zile. Ilustrațiile cu pisici au influențat puternic percepția mărcii fără ca noi să o promovăm sau să o ghidăm în mod activ. Așa că a trebuit să luăm o decizie: fie să lăsăm pisicile să dispară încet în uitare, fie să le integrăm puternic în noul design. Probabil că ați descoperit până acum cu ce ne-am stabilit. Până în acest moment, avem peste 70 de pisici ciudate și prietenoase care rătăcesc liber pe noul site web Smashing Magazine.

Cu toate acestea, pe cât de mult poate ajuta o mascota să facă brandul mai accesibil, rareori este suficient pentru a transmite întreaga poveste. Interviurile ne-au ajutat, de asemenea, să ne dăm seama cât de important era de fapt aspectul comunitar al Smashing Magazine. Cuvintele „comunitate” și „oameni” au apărut foarte mult în interviurile utilizatorilor, și nu fără motiv – revista nu ar exista fără contribuții umile și generoase open-source ale oamenilor din culise. Designul nostru nu l-a reflectat cu adevărat. Așa că am ales să ne schimbăm ușor atenția către evidențierea oamenilor din culise - autori, editori și membri ai comunității. Afișarea oamenilor în evidență a devenit un alt atribut care definește semnătura noastră de design - și asta explică de ce miniaturile autorilor ocupă o poziție atât de importantă în design și de ce evidențiază autorii care publică pe propriile lor bloguri sau pe alte platforme pe prima pagină.

Ce înseamnă totul pentru tine? Pune întrebări pentru a scoate la iveală calitățile umane care se află în inima companiei. Acest lucru vă va oferi o bază pe care să construiți un limbaj vizual - un limbaj care vă va traduce calitățile în designul interfeței. Fiecare companie are într- un fel o semnătură unică și adesea aceasta se reflectă prin oamenii care lucrează acolo. În cele din urmă, este doar să găsești timpul și curajul să-l explorezi – și să acceptăm faptul că defectele și ciudateniile noastre fac parte din el la fel de mult ca marile noastre ambiții și bunele noastre intenții.

Personalitatea nu este niciodată perfectă

În calitate de designeri, ne mândrim adesea că suntem perfecționiști. Fiecare pixel trebuie lustruit, fiecare unghi trebuie să fie corect și toate componentele trebuie aliniate la grilă. Vă amintiți acea discuție fără sfârșit despre raza perfectă a border-radius pe butoanele de îndemn? După o dezbatere elocventă și îndelungată, echipa de proiectare se hotărăște în cele din urmă pe 11px, doar pentru a trece la 13px câteva luni mai târziu, doar pentru a reveni la 12px până la sfârșitul anului. În multe companii, aceste schimbări sunt determinate de numeroase teste A/B în curs, în care nimic nu este lăsat la voia întâmplării și totul - de la ipoteze la decizii de proiectare - trebuie mai întâi testat și dovedit.

Ne străduim neliniștit să ajungem la cea mai eficientă, cea mai performantă soluție - o soluție care este exactă. Cu toate acestea, nu ne călărim până la moarte încercând să îmbunătățim aceeași componentă minuscul din nou și din nou, doar pentru a găsi o variantă puțin mai bună a acesteia, cu toate acele modificări minime, microscopice?

Espen Brunborg, liderul creativ al unei agenții de design grafic din Norvegia, sugerează să nu efectuați niciodată teste A/B singur. ¹ Potrivit lui Espen, testele A/B ne ajută să atingem un maxim local al experienței utilizatorului, dar adesea ele nu sunt suficient de ample pentru a cuprinde imaginea de ansamblu în întregime, împiedicându-ne efectiv să atingem un maxim global . ² De aceea, pe lângă testele A/B (în care sunt testate microcopie și culori și poziții în aspect), ei rulează așa-numitele teste A/Z , testând un design „de bază” existent față de modele complet diferite. Diferențele lor nu stau doar în nuanța unui buton sau a unei copii, ci și în aspect și tratamente vizuale absolut diferite. Branding-ul și principiile de bază rămân aceleași, dar aproape totul continuă să evolueze. Acest lucru îi permite lui Espen și echipei sale să atingă noi maxime absolute în ceea ce privește conversia și KPI la fiecare câteva luni.

¹ Jakob Nielsen a scris un articol numit „Putting A/B Testing in Its Place” în 2005. Articolul evidențiază unele dintre limitările și dezavantajele testării A/B; mai ales, că nu ar trebui să fie niciodată singura metodă utilizată într-un proiect - observarea comportamentului utilizatorului generează adesea informații mai profunde.

² Bill Buxton a fost probabil primul care a discutat această problemă în cartea sa Sketching User Experiences încă din 2007. Potrivit lui Bill Buxton, designerii ajung adesea cu o problemă locală de alpinism atunci când designul ajunge la un nivel maxim local.

Într-una dintre conversațiile noastre cu ani în urmă, Elliot Jay Stocks, care a fost implicat în reproiectarea revistei Smashing Magazine din 2012, a menționat pe scurt un detaliu bun al procesului său de design care mi-a rămas cu mine de ceva timp. El a spus că un design bun posedă una dintre cele două calități: fie este absolut perfect din toate punctele de vedere, cu aliniere, dimensionare și ierarhie perfecte (ceea ce este de obicei destul de greu de realizat), fie este în mod deliberat imperfect în câteva moduri consistente (ceea ce este mult mai ușor de realizat). Potrivit lui Elliot, într-un design bun nu ar trebui să existe nimic între ele. Cu alte cuvinte, butoanele ar trebui fie să fie perfect aliniate la grilă, fie deloc aliniate - compensate cu 20-30 de pixeli și mai mult. A fi deconectat doar de câțiva pixeli s-ar simți greșit, în timp ce a fi oprit cu 20–30 de pixeli pare deliberat și, prin urmare, mai puțin deteriorat.

Deci, ce se întâmplă dacă, în loc să căutăm soluția perfectă pentru fiecare componentă, am alerga și am testa diverse expresii ale personalității noastre? În designul interfeței, ar însemna direcții creative complet diferite. Poate un aspect cu mai multe coloane cu o tipografie îndrăzneață, față de un aspect geometric cu o singură culoare de accent? Ce se întâmplă dacă, în loc să cauți rotunjimea perfectă a unui buton, ai introduce în mod deliberat ușoare inconsecvențe? O animație personalizată pe unul dintre butoanele de îndemn sau o plasare dinamică a unei imagini în afara casetei în care ar trebui să fie plasată de obicei? Sau poate rotiți un subtitlu cu 90 de grade? Personalitatea poate fi exprimată în multe moduri complet diferite, așa că sarcina este de a descoperi variații care sunt suficient de promițătoare pentru testare.

O personalitate nu este niciodată perfectă, așa că poate nici site-urile noastre web nu ar trebui să fie perfecte. Ce se întâmplă dacă înființați o tablă de artă vizibilă public în compania dvs., cu magneți reprezentând calitățile pe de o parte și magneți reprezentând componente sau tratamente vizuale pe cealaltă parte și apoi vă ciocniți aleatoriu unul împotriva celuilalt pentru a produce o direcție vizuală pentru următorul test A/Z? Aplicați perfecționismul la nivelul de detaliu necesar pentru a produce modele în mod deliberat imperfecte.

Această abordare nu va câștiga întotdeauna, dar completată cu teste A/B, s-ar putea să vă aducă la noi culmi pe care altfel nu le-ați putea atinge. În cele din urmă, dorim ca clienții să se îndrăgostească de experiența lor și, în consecință, de brand, să formeze o legătură de durată. O interfață în mod deliberat imperfectă, dar umană, ne poate ajuta să ajungem acolo. Este nevoie să găsiți o singură calitate distinctă pe care nimeni altcineva nu o are și să o creșteți.

Alege un lucru și sporește-l

În interfețele noastre, personalitatea poate fi exprimată printr-o semnătură de design - un tratament vizual recurent, vocea și tonul copiei sau un model de interacțiune utilizat în mod constant de la o pagină la alta. Ar putea fi tentant să explorezi un amestec divers de tratamente sofisticate, neconvenționale, care ar putea fi văzute în interfață, la kilometri distanță de cursorul mouse-ului. Cu toate acestea, aceasta este o rețetă pentru o experiență dezastruoasă care prioritizează expresia unui designer față de intențiile utilizatorilor. Oricât de îndrăzneață este personalitatea, semnătura sa de design ar trebui să rămână subtilă.

Când a lucrat cu Dan Mall la reproiectarea Smashing, un detaliu interesant pe care Dan l-a prezentat chiar la începutul proiectului a fost rolul semnăturii în rezultatul final. Potrivit lui Dan, alegerea câtorva expresii distincte, concurente ale personalității este adesea prea mult: este suficient să alegi doar un mic detaliu și să-l ridici până la capăt. În termeni mai practici, asta înseamnă să alegeți un model și să îl folosiți în mod consecvent, peste tot : pe fiecare pagină și în fiecare interacțiune cu utilizatorul. Cum găsești acel detaliu sacru? Te întorci la rădăcinile companiei.

În primele zile ale Smashing Magazine, nu aveam deloc branding. Am ales o temă WordPress destul de aleatorie, am plasat numele în Arial și asta a fost tot. În cele din urmă, la începutul anului 2007, Ryan Denzel din Africa de Sud a conceput logo-ul Smashing Magazine, care includea o litera S înclinată cu 11,6 grade. În ciuda modificărilor minore ale nuanței și culorilor logo-ului, am rămas fideli designului timp de peste un deceniu și, odată cu recenta reproiectare, nu ne-am gândit să-l schimbăm. Cu toate acestea, când căutăm o semnătură de design care să fie profund legată de brand, am luat de fapt înclinarea logo-ului foarte aproape de inima noastră - de la bun început.

Explorările timpurii de design cu Andy Clarke au folosit înclinarea în mod constant pentru fiecare element vizual de pe site. Această semnătură a fost transmisă și în designul final. Astăzi, toate pictogramele, imaginile autorului, steagurile conferinței, siglele forumului de muncă, ilustrațiile de pe panourile de produse și coperțile de cărți de pe paginile produselor sunt toate înclinate constant. Acest mic detaliu nu distruge experiența, dar oferă un tratament vizual unic designului, care se distinge clar de orice altceva.

Desigur, am reproiectat înclinarea prin proces, îndepărtându-ne de la 11,6 grade la 11 grade și adăugând rotunjime de 11px tuturor componentelor. Luni mai târziu, culorile îndrăznețe, tipografia și aspectul au intrat în joc, susținând ciudatul și stilul informal al elementelor înclinate – toate trecând încet în cele din urmă în machetele de design.

În acest moment, ați putea fi ușor îngrijorat că nu aveți cu adevărat niciun element distinctiv care ar putea fi promovat pentru a deveni semnătura dvs. Este posibil să nu aveți înclinarea sau o anumită paletă de culori care iese în evidență. După cum se dovedește, orice poate deveni o semnătură de design. În secțiunile următoare, vom explora câteva exemple și idei pe care le-ați putea folosi pentru situația dumneavoastră particulară.

De ce ilustrațiile personalizate funcționează mai bine decât fotografiile de stoc

Odată ce calitățile personalității au fost identificate, următorul pas este traducerea acestor calități într-un limbaj vizual distinct. Inițial se întâmplă prin culoare și tipografie, așa că atunci când definiți stilul vizual, căutați aceste calități în combinațiile de culori și familiile de tipuri.

Probabil cel mai simplu mod de a crea propria semnătură de design este să folosești ilustrații personalizate concepute special pentru brand. Fiecare artist are propriul stil unic și, spre deosebire de imaginile de stoc sau de fotografiile de stoc care adesea impun aspectul generic în machete, ilustrațiile personalizate conferă mărcii o voce și un ton unic. Nu trebuie să treceți peste bord și să creați zeci de ilustrații; doar câțiva ar face probabil. Gândiți-vă la înlocuirea tuturor fotografiilor stoc pe care le-ați achiziționat cu ilustrații personalizate - acest lucru ar trebui să vă ofere o bază suficient de bună pentru a începe.

Atlassian este un exemplu minunat de stil ilustrativ aplicat temeinic și frumos la fiecare punct de contact al experienței. Ilustrațiile sunt mai accesibile decât fotografiile de stoc. Observați, totuși, că acestea apar rareori pe un fundal simplu - sunt susținute de paleta de culori și de opțiunile tipografice care completează stilul ilustrației.

De ce ilustrațiile personalizate nu sunt suficiente pentru a ieși în evidență? Pentru că, la fel ca multe alte atribute de pe web, și stilul ilustrativ urmează tendințe. Comparați stilul lui Atlassian cu limbajul vizual al lui Slack. Da, detaliile fine sunt diferite, dar combinațiile de culori pastelate sunt asemănătoare. Ilustrațiile din aceste proiecte diferite ar putea coexista în mod fericit într-un singur site web, iar mulți clienți nu ar observa o diferență.

Un stil vizual distinct necesită o atenție suplimentară asupra altor elemente de pe pagină, în primul rând fundalurilor, tipografiei, formelor și aspectului. Observați cum toate aceste elemente joacă împreună pe Bond. Ilustrațiile nu sunt doar adăugate la o pânză albă goală, ci interacționează cu fundalul, culorile textului și aspectul.

Medium folosește un stil asemănător colajului pentru toate ilustrațiile sale de pe paginile de destinație și paginile de ajutor. Cheia este că ilustrațiile sunt utilizate în mod constant pe pagini. S-ar putea să nu aibă sens pentru fiecare vizitator, dar contribuie la aspectul vizual unic al mărcii.

Asigurarea de sănătate este un mediu foarte competitiv și nu deosebit de prietenos și nici transparent pentru cetățeni și afaceri. Cu ilustrații personalizate, GIF-uri animate subtile și redactare simplă, Oscar, un nou venit în industrie, pare mai accesibil și mai accesibil.

WebConf.Asia este un site web pentru conferințe cu combinații de culori vii și fundal și componente cutituite concepute ca și cum ar fi tridimensionale . Acest lucru este suficient pentru a distinge designul. Tratamentul vizual produce profunzime, care este folosită pentru difuzoare, discuții și navigație principală.

Bandenjager folosește forme și compoziții înclinate în mod constant pe butoanele de îndemn, în navigare și chiar în selectorul de cantitate de pe pagina produsului. Aceasta este semnătura lor de design. Observați cum chiar și micro-componentele, cum ar fi etichetele produselor, folosesc același model.

Proiectul Maru Mori folosește o formă de copac... peste tot, însoțind ilustrații personalizate care evidențiază activitățile în desfășurare ale fundației.

Storytrail le permite vizitatorilor să exploreze orașele cu un ghid interactiv, completat cu videoclipuri și fotografii. Fiecare oraș are propria semnătură, care este o linie orizontală ondulată, conturând cel mai important reper al orașului. Orașele diferă în curbele liniilor, iar designul folosește linii ca semnătură pentru animații, tranziții și aranjarea elementelor în aspect.

Haufe folosește fundaluri suprapuse pentru a adăuga mai multă dinamică designului. Structura principală a rețelei este derivată din litera H, care este personajul principal al identității companiei. Toate componentele sunt așezate pe grilă pentru a susține acea trăsătură de personalitate. Un joc frumos de fotografii, compoziții originale și o varietate de fundaluri geometrice simultan.

Un alt mod de a atrage atenția este prin adăugarea aleatoriei compozițiilor tale. Portofoliul lui Rich Cahill conține ilustrații împărțite în trei părți verticale, compensate aleatoriu pe orizontală și colorate cu un set de culori predefinite. Nu este chiar atât de greu să adaugi un pic de personalitate pentru a ieși în evidență. Este un exemplu frumos de introducere a haosului în limbajul de proiectare prin combinarea părților previzibile ale sistemului în moduri aparent aleatorii, imprevizibile.

Lynn Fisher adaugă, de asemenea, ceva aleatoriu portofoliului ei. Aspectul se schimbă complet între diferite puncte de întrerupere, creând o experiență total diferită pe dispozitivele mobile și desktop. Chiar și favicon-ul se schimbă și dinamic.

Când luați în considerare direcția vizuală a unui site, este o idee bună să luați în considerare stilul de ilustrare personalizat, fundalurile, tipografia și formele. Stabiliți conexiuni puternice între toate aceste atribute prin reutilizarea deciziilor de proiectare, cum ar fi alegerea culorilor și spațierea. În timp ce procedați astfel, desigur, nu ar strica să evitați opțiunile previzibile utilizate pe scară largă peste tot în altă parte. Una dintre modalitățile eficiente de a realiza acest lucru este urmărirea tendințelor de design în curs, apoi alegeți-o pe cea mai răspândită și... zdrobiți-l în bucăți .

Alegeți o tendință și spargeți-o în bucăți

Când a vorbit despre design minunat, Yves Saint-Laurent, un cunoscut designer de modă francez, a remarcat odată că „Modele se estompează; stilul este etern.” Potrivit lui Saint-Laurent, pentru a crea modele atemporale, este important să țineți cont de tendințe, dar să serviți o interpretare a tendințelor prin prisma propriului stil personal. Nu asta vedem de obicei pe web.

Este aproape ironic că a devenit la modă să nu-ți placă tendințele în zilele noastre și din motive întemeiate: de obicei, scopul lor principal este înfrumusețarea vizuală, mai degrabă decât să conducă intenția unui designer și, adesea, nu adaugă prea mult experienței dincolo de frecare, confuzie, și fluiere fanteziste și clopoței. Nu e de mirare că designerii au început să riposteze cu „designuri brutale” – site-uri web care își propun să prezinte esența unui site web în forma sa nestructurată, expunând funcțiile site-ului la extreme. ³

³ Este de remarcat faptul că brutalismul în arhitectură este caracterizat de o estetică nepreocupată, nu de o estetică ruptă intenționat. Atunci când este aplicat designului web, acest stil merge adesea împreună cu convențiile de design și principiile directoare încălcate în mod deliberat.

În timp ce fac acest lucru, designerii încalcă adesea în mod deliberat modelele de design, practicile de utilizare și tendințele de design. La prima vedere ar putea apărea ca modele create cu unicul scop de a fi diferite, dar pentru că au o personalitate izbitoare, ei atrag atenția asupra lor. Desigur, uneori par a fi prea exagerați în modul în care întorc în mod deliberat spatele principiilor de design bine stabilite. Nu toată lumea își poate permite și nu toată lumea s-ar simți confortabil să conecteze o astfel de estetică neconvențională la marca lor.

O strategie puțin mai pragmatică, desigur, trăiește undeva între design-uri generice și design-uri brutaliste. Pentru a ajunge acolo, puteți alege o tendință, găsiți o perspectivă unică și aplicați personalitatea dvs. De exemplu, dacă vedeți multe site-uri web care folosesc animații netede și mătăsoase, gândiți-vă cum s-ar potrivi în povestea dvs. și găsiți întorsătura care ar îmbogăți-o și ar face-o mai personală. Împărțiți tendința în bucăți pentru a înțelege mecanica sa și ce se întâmplă în culise, apoi răsuciți unele părți din ea, reambalați și integrați-l în designul dvs.

În loc să utilizați animații care sări, puteți introduce o întârziere artificială , încetinind efectiv aspectul elementelor de pe pagină. Dacă majoritatea imaginilor de profil pe care le vedeți au o formă circulară perfectă, încercați să veniți cu o altă formă care să funcționeze bine pentru a afișa avatarele. Dacă majoritatea fotografiilor sunt dreptunghiulare, gândiți-vă la o altă formă care ar putea face treaba bine.

În loc să utilizați tranziții în afara pânzei, gândiți-vă la un anumit tip de tranziție sau animație care ar reflecta cel mai bine marca dvs. Pentru mai multe entități corporative, o tranziție rapidă ar putea funcționa cel mai bine; pentru proiectele creative, o tranziție puțin mai jucăușă și lentă ar putea fi o mai bună. Waaark este un exemplu minunat al acestuia din urmă. Dacă toate tranzițiile ar fi eliminate, site-ul web al portofoliului ar arăta aproape ca orice alt portofoliu de acolo.

Implement Consulting Group folosește o animație geometrică scurtă și subtilă pentru a evidenția articolul prezentat pe site. Imaginile din prim-plan și de fundal sunt puțin decalate și animate, cu o formă geometrică în fundal și o previzualizare a poveștii în prim-plan. Este suficient pentru a oferi experienței ceva personalitate.

Imaginați-vă pentru o secundă că trebuie să vă reproiectați proiectul în desfășurare, dar nu puteți utiliza forme de bază, cum ar fi cercuri, dreptunghiuri sau triunghiuri. Ce ai alege? Știm cu toții că există o cantitate infinită de opțiuni, dar de ce atunci suntem atât de des constrânși de alegeri foarte previzibile și foarte utilizate? Ce nu este nici un cerc, nici un dreptunghi, nici un triunghi? Ei bine, elementele înclinate sau înclinate nu sunt. Nici literele și tipografiile mari. Nici ilustrațiile personalizate receptive sau iconografia nu sunt. Nici spații albe, audio și video. Nici tranziții și animații. Nici aproape nicio altă formă creată printr-un poligon, cu conținut încorporat prin măști SVG.

District0x este o rețea de piețe și comunități descentralizate. Site-ul folosește forme personalizate, tranziții fine și animații pentru a oferi o experiență distinctă. Fără dreptunghiuri sau cercuri. Și observați cât de bine funcționează împreună culorile, imaginile de fundal și tipografia pe site.

Nu este că toate formele de bază ar trebui ignorate și respinse de acum înainte, desigur. Evitarea formelor de bază în mod deliberat este unul dintre primele exerciții pe care le facem atunci când încercăm să venim cu o direcție artistică puțin mai originală. Odată ce ați venit cu o idee decentă fără forme de bază, puteți începe să le aduceți înapoi cu moderație atunci când este necesar. Sunt șanse mari, totuși, ca tu să poți scăpa cu totul fără ele.

Fă-i pe oameni să gândească

De ce atunci când ne încurcăm într-un oraș străin și proprietarul unui magazin de suveniruri încearcă cu disperare să ne atragă atenția pe stradă și să promoveze o vânzare, trecem în grabă; totuși intrăm încet într-un magazin de suveniruri frumos proiectat, care este tăcut și umil chiar după colț? Poate pentru că căutăm experiențe autentice, oneste și respectuoase și avem tendința de a ignora tot ceea ce nu se potrivește. În cartea sa fantastică Blink, Malcolm Gladwell a subliniat un fenomen interesant legat de modul în care oamenii își prețuiesc experiențele.

Potrivit lui Gladwell, avem tendința de a fi mai mulțumiți de experiențele noastre atunci când ne simțim apreciați, ascultați și înțeleși. Medicii care au nevoie de o cantitate disproporționată de timp ascultând, punând întrebări și luând notițe cu pacienții lor tind să obțină recenzii semnificativ mai bune și evaluări mai mari, în ciuda faptului că alți medici ar putea fi la fel de competenți și cunoscători. S-ar putea să sară la concluzii corecte mai repede, dar eficiența lor nu provoacă încredere și conexiune în pacienții lor. Desigur, în primul rând dorim ca problema să fie rezolvată, dar ne place și să ne îndrăgostim de o personalitate fermecătoare, înțelepciune, expertiză și bunătate umană.

Știm până acum că putem activa conexiuni umane prin încorporarea compasiunii în interfețele noastre. Cu toate acestea, aceste conexiuni nu se întâmplă doar peste noapte, ci necesită timp. Dar unde ne lasă în era gratificării instantanee și a interfețelor invizibile, când a devenit esența muncii noastre să evităm întreruperile și distragerile și să creăm o cale clară pe care clienții să o urmeze fără probleme? Dacă nu ar trebui să-i facem pe oameni să gândească, cum avem șansa de a stabili o conexiune emoțională în primul rând?

O facem încetinind. În mod deliberat. Făcând oamenii să gândească. Nu prea mult. Numai un pic. Doar cât să se simtă apreciați, să zâmbească sau să devină curioși. Facem acest lucru adăugând frecare. Câteva denivelări ici și colo, suficiente pentru a oferi șansa de a fi confruntat direct cu personalitatea infuzată în interfețele noastre. S-ar putea chiar să însemne derutarea clientului din când în când, doar pentru a permite o recuperare rapidă din acea confuzie, cu o strop de emoție pozitivă în ochii lor. Așa apar experiențe memorabile.

Totul este puțin dezamăgit pe BAO London — spațierea, combinațiile de culori, aspectul formularului, ierarhia, butoanele, cursorul, casetele luminoase, ilustrațiile. Această ruptură consecventă a tiparelor previzibile face ca site-ul web să pară interesant și atrăgător. Rupând lucrurile încet și deliberat, câte o componentă la un moment dat. Acesta nu este un site web obișnuit de restaurant.

Totul este departe pe site-ul Hans Brinker Budget Hostel și se face și în mod deliberat. Pensiunea se lupta să vândă camere, deoarece concurența era destul de dură în Amsterdam. În loc să îmbunătățească designul, au înrăutățit să se încadreze bine în povestea lor. Dacă nu o poți face mai bună, înrăutățește. Chiar dacă nu ai un produs minunat de vândut, este întotdeauna posibil să închei o poveste în jurul lui și să-l faci mai interesant. Aproape fiecare element de pe pagină face oamenii confuzi în mod activ — de la combinația de culori la tipografie la interacțiuni. A funcționat totuși – acum se extind la Lisabona.

Acum, desigur, nu le va plăcea tuturor, iar unii oameni vor găsi că este enervant, confuz, înșelător, copilăresc sau doar exagerat. Așa cum ne este dificil să ne conectăm la unii oameni, s-ar putea să întâmpinăm aceeași problemă cu o interfață care încearcă să-și arate latura umană. Dar nu merită? Poate că în vremuri în care totul este remarcabil de asemănător și nu reprezintă cu adevărat nimic, merită să ne străduim ca produsul nostru să fie iubit cu adevărat de mulți oameni, cu prețul de a fi cu adevărat displacut de unii oameni, mai degrabă decât să nu provoace niciun sentiment.

În interviul său „How I Built This” la NPR, Mike Krieger, co-fondatorul și mintea creativă din spatele Instagram, a menționat că, în loc să petreacă o cantitate semnificativă de timp încercând să înțeleagă de ce oamenii au abandonat serviciul, unul dintre principiile fundamentale care stimulează creșterea se concentrează asupra clienților care vă iubesc profund produsul și care rămân în preajmă ani de zile. Acordând prioritate clienților existenți și ceea ce le place cu adevărat la produsul dvs., este posibil nu numai să îi atașați la produsul dvs., ci și să stimulați marketingul din gură, care este infinit mai eficient decât paginile de destinație tradiționale.

Totuși, nu înseamnă că nu ar trebui să avem grijă de experiențele pe care clienții le au atunci când abandonează produsul sau, și mai rău, că ar trebui să le îngreunăm să plece. Calitățile umane ale interfeței ar trebui să strălucească în mod constant prin toate punctele de contact ale experienței - și este valabil atât pentru onboarding, cât și pentru offboarding. De fapt, acesta din urmă este adesea neglijat, deoarece nu este considerat ca fiind atât de important - la urma urmei, în momentul în care clientul se va confrunta, aproape că a abandonat produsul.

Offboarding Matters

La fel cum relațiile umane se termină uneori brusc și prost, lăsând o consecință negativă de durată, la fel și relațiile noastre cu produsele digitale. Este foarte puțin probabil ca o persoană care abandonează un produs cu o călătorie misterios de lungă prin redirecționări de anulare să laude produsul prietenilor și colegilor. Oamenii pleacă din motive foarte diferite și uneori nu are nimic de-a face cu serviciul sau cu experiența. S-ar putea să fi trecut mai departe sau să vrea doar să economisească bani pentru ceva mai important, sau poate că au găsit o alternativă care se potrivește mai bine nevoilor lor.

Ce se întâmplă dacă în momentul plecării îi facem să se simtă profund apreciați și înțeleși? Desigur, odată cu reproiectarea Smashing Magazine, nu am petrecut prea mult timp proiectând UX-ul offboarding, dar a fost important pentru noi ca experiența să se potrivească bine cu personalitatea generală a interfeței. Când clienții noștri își anulează abonamentul, îi salutăm cu o notificare respectuoasă și chiar încurajatoare, oferindu-le un mic cadou pentru a rămâne cu noi atât de mult timp și explicând ce se întâmplă cu datele lor personale.

Rezultatul a fost surprinzător: am descoperit că clienții care anulează abonamentul și trec prin UX offboarding, uneori tind să fie și mai dornici să ne recomande prietenilor și străinilor lor, decât unii membri fideli care rămân mult timp. Ei pur și simplu admiră cât de respectuos și grijuliu tratăm decizia lor și că nu scoatem toate trucurile umbroase din tranșee pentru a le îngreuna plecarea.

Faceți plictisitul interesant

Este dificil să introduci elemente jucăușe într-o experiență care, altfel, este foarte corporativă și formală. Cu toate acestea, ori de câte ori proiectați o anumită interacțiune, fie că este la fel de simplu ca trecerea unui buton sau trecerea de la o secțiune la alta sau completarea unui formular, există întotdeauna spațiu pentru a face experiența puțin mai interesantă.

De exemplu, dintre toate elementele minunate ale formularului de pe o anumită pagină, ce ar putea fi mai puțin interesant decât o intrare „Titlu”? Uneori apar alături de butoanele radio sau de un meniu derulant, cerând riguros clienților informații foarte personale despre starea lor civilă, fără niciun motiv evident. Și exact acesta este momentul în care îl putem face să strălucească frumos. O modalitate excelentă de a crea experiențe memorabile este să adaugi un pic de surpriză în punctul în care este cel mai neașteptat . Alegeți partea cea mai plictisitoare și inobservabilă a experienței și încercați să o faceți interesantă. Acum, există vreo modalitate de a face această interacțiune mai interesantă?

Atunci când creează un cont nou pe Boden, clienții sunt uimiți de o selecție destul de neobișnuită de opțiuni, de la amiral la lider de escadrilă și baronesă. Cine nu și-a dorit să fie lider de escadrilă la un moment dat în viața lui? Această mică decizie de design stârnește zâmbete și îi îndeamnă pe clienți să împărtășească această bijuterie prietenilor și colegilor lor. Apropo, lista de opțiuni este destul de lungă.

Austin Beerworks este doar una dintre multele fabrici de bere locale din SUA. Când clienții intră pe site, ca întotdeauna, li se solicită o verificare a vârstei care ar trebui să se asigure că depășesc o anumită limită de vârstă. Majoritatea oamenilor – sincer sau necinstit – ar face clic pe „Da” și ar merge mai departe, dar dacă clientul alege să facă clic pe „Nu”, ei pornesc într-o călătorie „alege-ți-aventura-propria” pentru a fi ghidați către un videoclip care descrie cel mai bine personalitatea lor.

Cui nu-i place să nu-i placă un pop-up? Cu toate acestea, ferestrele pop-up pot fi și ele interesante. Volkshotel folosește cel mai enervant de încântător pop-up de acolo, frumos ilustrat ca o persoană care ține o pancartă în fața site-ului. Pe măsură ce vizitatorii trec cu mouse-ul peste el pentru a-l închide, fereastra pop-up se îndepărtează pe furiș, făcându-l puțin mai dificil să-l închidă. Personal, mi-aș dori ca fiecare site web să aibă un pop-up ca acesta.

Tympanus 3D Room Exhibition nu pare deosebit de excepțional până când vizitatorul alege să interacționeze cu ea. Când treceți de la o pagină de detalii a expoziției la alta, în loc să încărcați o altă pagină, utilizatorul este mutat dintr-o cameră în alta într-un spațiu 3D. Neașteptat și memorabil.

Care este o interacțiune puțin mai comună pe web? Forme, în toate aromele și înfățișările lor diferite. De fapt, sunt șanse mari să ai un fel de introducere de autentificare și parolă pe site-ul tău și, desigur, aceasta este o interacțiune destul de plictisitoare. Adăugarea unui personaj care răspunde la intrarea unui utilizator ar putea condimenta puțin lucrurile. Drept urmare, este posibil ca oamenii să petreacă mai mult timp interacționând cu formularul înainte de a se conecta. Aceasta este o implicare mai bună la îndemână. Personajul Yeti al lui Darin Senneff face exact asta.

Strategia este simplă: alegeți un model predictibil, plictisitor, studiați așteptările utilizatorilor și... rupeți-le fără milă adăugând ceva neașteptat și înălțător. Vă rugăm să rețineți că aceasta nu înseamnă că nu se poate folosi doar de dragul de a o rupe; mai degrabă, este vorba de a face o mână de elemente plictisitoare mai interesante prin adăugarea unor tratamente neconvenționale la designul lor.

Găsiți un punct de durere și rezolvați-l bine

Poți auzi voci agitate de scepticism șoptind din colțul camerei? Nu orice setare corporativă va susține o ilustrație personalizată funky, o animație ciudată sau o interacțiune neconvențională. O identitate vizuală uimitoare s-ar putea să nu se încadreze cu adevărat în prezența dvs. digitală, ilustrațiile personalizate s-ar putea să nu se încadreze în buget și s-ar putea să nu doriți să depășiți așteptările clienților oricum.

În aceste cazuri, este posibil să doriți să explorați un traseu ușor diferit. Dacă nu vă puteți transmite personalitatea printr-o estetică sau interacțiune neconvențională, o alternativă este să o transmiteți printr-o soluție superioară a problemelor . Înseamnă că trebuie să descoperi momente dureroase de interacțiune – când clienții sunt enervați sau dezamăgiți sau confuzi – pe site-uri similare și să găsești prin soluții experimentale și aparent exagerate pentru a încerca să depășești experiența pe care o oferă concurenții tăi. Acceptă o problemă și abordează-o cu meticulozitate, înainte.

În mod surprinzător, de cele mai multe ori aceste puncte dureroase nu sunt caracteristici speciale; este complexitatea percepută a interacțiunii și lipsa de transparență. Prea multe câmpuri de formular; investiție prea mare de timp; o interacțiune prea lentă; prea multe întrebări repetate; prea multe cerințe inutile. Unghiul este de a găsi o modalitate de a face interacțiunile aparent complexe înșelător de ușoare, depășind astfel așteptările.

Este de la sine înțeles că rezolvarea unui anumit punct de durere nu va ajuta prea mult dacă elementele de bază nu sunt acoperite corespunzător. Accesibilitatea, performanța, ierarhia vizuală adecvată și comportamentul receptiv sunt pilonii de bază ai fiecărei experiențe și trebuie să fie luate în considerare mai întâi.

SBB Mobile este o aplicație elvețiană de planificare a călătoriilor care permite clienților să verifice orarul trenurilor și să cumpere bilete de tren. Pe cont propriu, este un planificator de călătorie ca orice aplicație similară de acolo, cu excepția unui singur lucru. Aplicația oferă un „orar de atingere”; clienții își pot defini destinațiile comune și le pot aranja pe o grilă. Pentru a cumpăra un bilet de la Zurich la Lausanne, de exemplu, este suficient să trasați o linie pe rețeaua care leagă Zurich și Lausanne și apoi să confirmați selecția. Rezervarea biletelor nu a fost niciodată atât de rapidă și ușoară. Acesta este un exemplu grozav de simplitate a unei interacțiuni convenționale complexe, în special pentru persoanele care fac naveta frecvent. De asemenea, este o semnătură de design unică pe care nimeni altcineva nu o are (încă).

De ce ar fi nevoie pentru a oferi o experiență de redare video remarcabilă? Ar putea suna la fel de simplu ca proiectarea unei piese și a unui degetul mare cu câteva bifături pe pistă pentru sărituri rapide. Cu toate acestea, dacă studiați problemele comune pe care utilizatorii le întâmpină frecvent, veți găsi o problemă specială care iese în evidență. Oamenii tind să întrerupă videoclipurile și apoi să continue vizionarea mai târziu, dar restabilirea stării în care lucrurile au fost lăsate este inutil de complexă în multe interfețe de utilizare a playerelor video.

De fapt, s-ar putea să întâlnești oameni care notează marca temporală exactă când au întrerupt videoclipul, doar pentru a reveni la el mai târziu pe alt dispozitiv - dar, din nou, în majoritatea interfețelor de utilizare este imposibil să sari exact la o anumită secundă și majoritatea timp trebuie să ghiciți și să atingeți corect poziția unui deget mare pe pistă. În același mod, săriți înapoi și înainte cu 30 de secunde sau chiar cu câteva minute poate fi remarcabil de provocator, mai ales pe mobil, deoarece majoritatea interfețelor nu sunt proiectate în funcție de acel caz special.

Nu numai că YouTube oferă controale complet accesibile pentru navigare, dar conține și o previzualizare a cadrelor cheie cu miniaturi care apar la trecerea cursorului și navigare prin tastatură - și stochează starea curentă a videoclipului, permițând clienților să salveze o anumită marca temporală cu o adresă URL unică. pentru a continua vizionarea mai târziu. YouTube conține, de asemenea, multe videoclipuri lungi, cum ar fi documentare sau tutoriale, astfel încât utilizatorii pot glisa degetul mare pe verticală pentru a ajusta scara piesei și, prin urmare, să sară la punctul de interes mai precis. Din păcate, doar câțiva utilizatori cunosc această funcție, iar interacțiunea nu este deosebit de explicită, dar cei care știu despre aceasta, o folosesc frecvent. Un punct dureros, rezolvat bine.

Majoritatea publicațiilor academice conțin zeci de note de final, note de subsol și referințe, enumerate în ordinea apariției. Dacă un cititor este interesat de o anumită notă de subsol, trebuie să sară la sfârșitul articolului pentru a-l citi, apoi să sară înapoi pentru a continua să citească articolul. Această experiență poate fi puțin prea obositoare pentru o utilizare frecventă, dar este experiența implicită cu care suntem obișnuiți cu toții.

Harvard Law Review rezolvă această problemă într-un mod diferit. Referințele sunt întotdeauna situate chiar lângă punctul în care sunt menționate. Fiecare notă laterală și notă de subsol fie apare pe părțile laterale pe ecrane mai mari, fie afișată în linie printr-un acordeon. Odată ce un utilizator a apăsat pe nota de subsol, aceasta se extinde în întregime, în timp ce nota de subsol se transformă într-un buton de „închidere”. O problema simpla rezolvata bine.

Imaginați-vă că doriți să rezervați o vacanță minunată cu familia, dar încă nu v-ați ales datele. Ai o idee când ai vrea să mergi și ai o oarecare flexibilitate în ceea ce privește datele următoarei vacanțe. DoHop permite utilizatorilor săi să aleagă o dată flexibilă pentru călătorie; de exemplu, anumite luni ale anului sau un anumit anotimp (iarnă sau toamnă, poate). Apoi sugerează date și un interval de timp cu cel mai bun preț. Și dacă aveți un weekend de sărbătoare legală care urmează în câteva săptămâni și ți-ar plăcea să-ți faci un plan, RoutePerfect vă sugerează un traseu în funcție de preferințele dvs. Acesta este un adevărat caz problemă rezolvat bine. Majoritatea site-urilor web de călătorie solicită date specifice pentru zborurile de intrare și de ieșire.

Soluțiile bune necesită timp și concentrare. Ne cer să înțelegem cu adevărat ce puncte dure se confruntă mai întâi cu utilizatorii. Este posibil ca utilizatorii să nu fie foarte buni la articularea acelor puncte de vopsea, așa că am dezvoltat o tehnică simplă care ne ajută să ajungem la rădăcina problemei.

Le cerem testerilor să finalizeze o anumită sarcină pe site-ul web al unui concurent și să înregistreze sesiunea lor pe video, împreună cu o cameră web, folosind dispozitivul cu care sunt obișnuiți. Ar putea fi la fel de ușor ca să găsești un articol într-un catalog sau să verifici într-un magazin cu amănuntul sau să găsești o anumită secțiune în navigare. Desigur, le observăm comportamentul și le punem întrebări dacă ceva pare a fi neobișnuit, dar prea des multe lucruri care se întâmplă în timpul sesiunilor trec neobservate - sunt prea greu de observat imediat. De aceea, revizionam sesiunile înregistrate de utilizatori în mișcare lentă , deseori încetinind redarea de cinci sau șase ori.

Căutăm mișcări repetate și lovituri imprecise, precum și expresii faciale și gesturi negative. Mai precis, căutăm mici momente de disperare — momente trecătoare de confuzie când mișcările sau gesturile nu au niciun sens: învârtirea în jurul unui buton sau a unui link iar și iar; concentrarea asupra unui anumit element interactiv mult prea mult timp; selectând același text de câteva ori la rând și apoi continuând navigarea fără a acționa asupra lui. Sesiunile de redare au loc de obicei imediat după test, așa că avem în continuare posibilitatea de a pune întrebări și de a ne valida ipotezele cu testerul. Chiar și câteva înregistrări oferă de obicei informații utile - și nu necesită multe resurse sau investiții mari. De asemenea, este o idee bună să examinați jurnalele de asistență pentru clienți și să întrebați echipa de asistență despre reclamațiile obișnuite.

Odată ce am identificat unele probleme, explorăm soluții care ar oferi mai multă claritate și ar ușura interacțiunea, uneori prin proiectare fără un anumit limbaj vizual în minte. Ideea este să găsim un model de interacțiune care să fie mult mai superior experienței pe care clienții au avut-o pe site-urile concurenței. Producem apoi o machetă digitală și invităm aceiași clienți să încerce să rezolve aceleași sarcini, împreună cu un nou grup de testeri care nu au văzut încă ambele interfețe. Măsurăm timpul necesar pentru a finaliza o interacțiune și le cerem să aleagă ce interacțiune consideră mai simplă și mai utilă și de ce. În mod surprinzător, interacțiunile mai rapide nu sunt neapărat percepute ca fiind mai rapide, iar interacțiunile mai lente nu sunt neapărat percepute ca fiind mai lente. Pe baza acestui lucru, repetăm ​​și evoluăm acele prototipuri. În multe feluri, acele puncte dureroase devin inima experienței noastre pe care o abordăm mai întâi și din care radiam întreaga experiență. De aceea, uneori, în loc să facem un test pe site-ul unui concurent, testăm propriile soluții în același mod.

Soluțiile bune declanșează un atașament emoțional cu sau fără estetică sau interacțiune neconvențională. Cu cât puteți aborda mai multe puncte dureroase în cadrul interfeței dvs., cu atât este mai probabil ca diferența de experiență să fie observată. Doar câteva site-uri web ajung pe barele de instrumente ale browserului clienților, așa că gândiți-vă la acel punct de durere și la singura soluție care i-ar determina să facă exact asta.

Depășirea așteptărilor în mod implicit

Iată o altă întrebare pentru tine: dintre toate experiențele hoteliere pe care le-ai avut vreodată, care sunt cele mai memorabile? Gândește-te o clipă. Gândește-te la ce i-a făcut atât de speciali și de ce sunt atât de memorați. Ar fi putut fi un fundal natural extraordinar, sau personal remarcabil de atent, sau un bufet de mic dejun generos. Sau ceva cu totul diferit. De fapt, pentru mulți dintre noi ar fi putut fi un cămin destul de mediu la fel de mult ca o cabană rafinată de 5 stele în Alpii elvețieni. Mediul contează, dar nu numai mediul contează.

Motivul pentru care aceste experiențe sunt memorabile este că nu sunt medii. ⁴ De fapt, sunt chiar opusul mediei într-un *cum* fel, deoarece *ceva* era excepțional la ei. Nu este neapărat hotelul în sine - este momentul și oamenii cu care se întâmplă să petrecem aceste experiențe. Un hotel bun oferă o setare care permite experiențe minunate, la fel și o interfață bună pentru site-ul web. Un hotel *memorabil* adaugă un detaliu fin experienței care depășește așteptările noastre și o face fără să ne spună din timp. La fel și site-urile web memorabile.

⁴ Conform regulii de vârf a lui Daniel Kahneman, avem tendința de a judeca experiențele în mare măsură pe baza modului în care ne-am simțit la apogeu (adică, punctul cel mai intens) și la sfârșit, mai degrabă decât pe suma totală sau media fiecărui moment al experienta. Efectul apare indiferent dacă experiența este plăcută sau neplăcută. Alte informații în afară de vârful și sfârșitul experienței nu se pierd, dar nu sunt folosite. Asta înseamnă că putem accesa părțile foarte negative și foarte pozitive ale experienței și le putem modifica pentru a crea o conexiune emoțională.

După cum Brene Brown, profesor de cercetare la Universitatea din Houston, a exprimat atât de frumos în cărțile ei despre empatie, „un design bun este o funcție a empatiei, în timp ce designul non-empatic este auto-indulgent și centrat pe sine”. Cheia, atunci, este să empatizezi cu clienții atât în ​​experiențele lor negative, cât și în cele pozitive, mai degrabă decât să-ți împingi propria agendă. Pentru clienții noștri, acea atenție deosebită acordată câteva detalii mici poate face toată diferența din lume. Așa că am putea presăra puțină bunătate umană ici și colo, adăugând un plus de valoare în tăcere, fără măcar să menționăm asta. Acest detaliu fin ar putea fi la fel de simplu ca o ilustrație de profil personalizată, bazată pe fotografia pe care a încărcat-o clientul. Ar putea fi o scrisoare de mulțumire scrisă de mână, semnată de întreaga echipă și trimisă prin poștă bună. Ar putea fi, de asemenea, o rezolvare neașteptat de simplă a unei probleme după ce a fost făcută o greșeală.

Într-o setare de comerț electronic, ar putea însemna posibilitatea de a modifica sau anula o comandă finalizată în termen de cinci minute după finalizarea cu succes a comenzii. Pe de o parte, ar putea ajuta un client să evite o interacțiune care necesită timp cu echipa de asistență; și pe de altă parte, imaginați-vă doar aspectul de pe fața clientului când își dă seama că data rezervării a fost greșită, dar este posibil să anulați rezervarea printr-un clic pe un buton - fără nicio taxă aplicată.

În același mod, o interfață ar putea sugera unui client conectat să folosească un cod de cupon salvat sau să-l informeze despre o rezervare similară - și, prin urmare, potențial duplicată - făcută cu ceva timp în urmă. Personalitatea mărcii strălucește cel mai bine în acele mici momente în care îi ajută pe clienți să prevină greșelile. Acționând din când în când în numele experienței, mai degrabă decât al afacerii, interfața îl face pe client să se simtă cu adevărat apreciat, respectat și ajutat, iar asta funcționează mult mai bine decât orice copie ingenioasă a interfeței.

O modalitate de a preveni greșelile este prin scrierea unor mesaje de eroare adaptative și utile. Acesta este unul dintre cele mai evidente puncte de frustrare pentru clienți și este remarcabil cât de puțin efort este depus în experiența de recuperare, deseori revenind la mesaje generice și abstracte. Poate că nu costă o vânzare, dar pot afecta percepția pe termen lung a mărcii. Persoanele care se confruntă cu probleme irecuperabile în timpul uneia dintre interacțiunile cheie de pe un site tind să nu-l folosească deloc în viitor, deoarece se așteaptă ca problema să apară și în alte interacțiuni.

În general, mesajele de eroare merită puțin mai mult credit decât li se acordă de obicei. Prin natura lor, ele apar în punctul în care progresul clientului este blocat. Acesta este și punctul în care clienții trebuie să încetinească și să acorde toată atenția pentru a rezolva problema. Acest lucru este destul de neobișnuit pentru întregul spectru de experiențe de pe un site și putem folosi situația în avantajul nostru pentru a infuza un pic de personalitate experienței. De fiecare dată când interfețele noastre nu îndeplinesc așteptările, ar trebui să o vedem ca pe o oportunitate de a crea un impact memorabil în procesul de recuperare rapidă. Dacă reușim să transformăm o supărare în sentimentul de a fi apreciați sau înțeleși pe parcurs, s-ar putea să ne îndreptăm pe drumul cel bun.

Unul dintre primele lucruri la care am început să lucrez când ne-am angajat în reproiectare a fost completarea foilor de calcul elaborate cu formulări alternative pentru mesajele noastre de eroare de plată. Totuși, nu a fost făcut cu intenția de a testa A/B mesajul de eroare „cel mai performant”; s-a făcut în primul rând pentru a descoperi expresii mai bune ale personalității prin interfață. Pe cont propriu, mesajele de eroare nu prea au sens, dar se potrivesc bine în povestea spusă pe site. Evident, încercăm să facem cât mai dificil posibil să facem greșeli în primul rând, dar odată ce a apărut o eroare, încercăm să folosim atât copywritingul adaptiv, cât și jucăuș pentru a aborda problema, ridicând și zâmbetul ocazional.

Seek critical pain points that customers often experience on the site by looking into customer support logs and user interviews, and design these experiences with extra care and attention. It goes without saying that a quirky personality won't help much if the customer isn't able to solve a problem, so take care of the basics first. Ultimately, it doesn't take that much effort to turn negative experiences into positive ones — it's just a matter of having it on your to-do list when designing an interface.

The Two Sides Of Personality

As much as we love sharing our experiences and showing our better side to people around us, we can't stand that one person spending the entire evening talking about themselves. In our interfaces, every time we add yet another parallax transition or a slow bouncy animation to people who have seen it a dozen times already, we are essentially letting the interface highlight its fanciness without helping the user along the way. Eventually, after a few visits, all those whistles and bells that achieve a strong first impact become annoying as they add too much friction.

Nimeni nu iubește personajele centrate pe sine, așa că nici un site web nu ar trebui să fie egocentric. Semnătura de design nu ar trebui să aibă niciodată rolul principal în experiența utilizatorului, deoarece nu este niciodată motivul principal pentru care oamenii accesează site-ul web. Ar trebui să fie umil și să rămână în umbră, vizibil, dar fără a împiedica fluxul lin cu care s-au obișnuit vizitatorii frecventi.

În discursul ei strălucit despre proiectarea animațiilor, Val Head, un designer din Pittsburgh, SUA, a sugerat să folosească animațiile proeminente cu multă moderație, deoarece acestea ar trebui rezervate pentru ocazii foarte speciale, în timp ce micro-animațiile subtile ar putea însoți utilizatorul pe tot parcursul drumului. Val sugerează să folosiți animația numai pentru compozițiile cheie ale poveștii dvs., cum ar fi trimiterea unei campanii de marketing sau favorizarea unui articol sau vizualizarea unei pagini de achiziție de succes, în timp ce totul ar trebui să rămână calm și normal. Cu această idee în minte ne-am putea gândi să ne proiectăm interfețele cu două tipuri de interacțiuni: cele proeminente „showroom”, folosite rar; și cele subtile „cal de bătaie”, folosite frecvent.

Rezervă tratamente vizuale și interacțiuni speciale pentru ocazii speciale, dar și încorporează tratamente subtile utilizate în mod constant pe întregul site. Twitter, de exemplu, folosește o animație elaborată atunci când un utilizator „imite” un tweet. Facebook afișează o animație de confetti atunci când felicitați un prieten de ziua lui sau de nuntă. În cazul lui Smashing, folosim culori vibrante și ilustrații de pisici ca semnătură pentru showroom-ul nostru, în timp ce înclinarea, animațiile de tip hover și umbrele de sub ele formează semnătura calului de lucru.

Suntem obișnuiți cu ideea ca design-urile noastre să se adapteze la portul de vizualizare sau la condițiile rețelei, dar ar putea merita să ne gândim la ajustarea designului în funcție de frecvența de utilizare. Tehnica este adesea numită reducerea progresivă , în esență o simplificare dinamică a unei interfețe pe măsură ce utilizatorii se familiarizează cu ea. Ideea este simplă: identificați caracteristicile majore din interfața dvs. și atribuiți niveluri acestor caracteristici. Apoi, urmăriți utilizarea de către utilizator prin monitorizarea frecvenței de utilizare într-o anumită perioadă de timp și creați profiluri de competență pentru utilizator. Pe baza nivelului actual, puteți ajusta apoi componentele interfeței pentru a reduce ținerea mâinii.

După cum a observat Allan Grinshtein, merită remarcat în acest moment că competența unui utilizator într-un anumit produs scade în timp fără utilizare (cunoscută și sub denumirea de decădere a experienței), așa că dacă frecvența de utilizare și volumul de utilizare ale unui utilizator au scăzut, atunci interfața acestuia ar trebui regresează cu un nivel sau două, în funcție de cât de mult a scăzut numărul lor. Această regresie automată este necesară pentru a echilibra progresia; fără ea, pierzi capacitatea de a răspunde pe deplin la schimbările dinamice ale comportamentului utilizatorului, adaugă Dan Birman în articolul său.

Cu cât clienții vizitează mai des site-ul, cu atât sunt mai puțin probabil să se confrunte cu ceva care i-ar încetini. Prin urmare, ar putea fi o idee bună să eliminați lent semnăturile showroom-ului cu o frecvență tot mai mare de utilizare, poate eliminând efectele de paralaxă sau accelerând tranzițiile pentru utilizatorii care revin. În cele din urmă, totul ține de coregrafie: nu fi acea persoană la o cină care umple camera cu o poveste amplă a vieții lor.

Semnătura din centrul designului Procesul de proiectare este o creatură mitică. Toată lumea reușește cumva să creeze propriul flux de lucru, unelte și procese, dar este foarte rar ca cineva să fie cu adevărat mulțumit de ele. Când vine vorba de infuzarea personalității în design, când și unde ar fi punctul potrivit pentru a o include în procesul de proiectare?

Într-una dintre discuțiile sale din 2014, Patty Toland, designer senior UX de la Filament Group din Boston, a menționat ierarhia priorităților pe care echipa le folosește atunci când proiectează și construiește experiențe receptive. Scopul principal al procesului este de a crea „cea mai slabă, cea mai rapidă încărcare, cea mai optimizată pagină”. Fundamentul principal este și a fost întotdeauna o experiență complet accesibilă, în care textul, imaginile, datele, diagramele, audio, video, formularele și așa mai departe sunt toate accesibile pe scară largă și funcționează pe deplin în forma lor implicită. Aplicat contextului procesului de proiectare, înseamnă un marcaj semnificativ și relații bine definite între componente.

Cu componente accesibile gata de a fi servite, următorul pas este să vă îngrijiți de amploarea designului. Acolo intră în joc deciziile privind grila, dimensiunea conținutului, ordinea și aranjarea, precum și punctele de întrerupere. Adesea proporțiile vor fi definite folosind wireframes de conținut : machete low-fidelity cu casete gri; înălțimea fiecărei casete proporțional cu celelalte definește greutatea acesteia în aspect. Uneori adăugăm note despre personalitate în blocurile de conținut și apoi le reflectăm atunci când vine vorba de design vizual.

Cu prototipuri de joasă fidelitate, următorul pas pentru design este să câștigi stil, cu logo-ul, culorile mărcii, fonturile personalizate, tranzițiile și animațiile adăugate la mix. Uneori, această ierarhie va fi mapată perfect în ordinea în care scriem componentele React și proprietățile CSS cu Sass. Chiar și sarcinile aparent fără legătură, cum ar fi denumirea BEM pentru clase, se vor întâmpla și în această ordine. Prototipurile vor câștiga mai întâi clase de utilitate abstracte, iar relațiile mai elaborate vor fi reflectate prin nume de clase mai specifice pe tot parcursul procesului. Procesul stabilește o separare clară a responsabilităților pentru module.

Acest proces pare plauzibil la început, dar ridică o întrebare foarte critică: ce pagini să proiectezi și să prototipezi mai întâi? Când începem să proiectăm, proiectăm mai întâi inima experienței: partea cea mai critică și de impact a experienței. Mai precis, încercăm să surprindem însăși esența experienței explorând interacțiunile cheie, apoi o descompunem în componente reutilizabile și apoi radiam spre exterior din acea esență. Pentru o revistă online, ar fi mai întâi experiența de lectură și tipografia. Pentru o pagină de destinație, ar fi mai întâi planurile de preț și o comparație de caracteristici.

Pentru un site de comerț electronic, înseamnă să căutați mai întâi componentele care ar alcătui o pagină de produs extraordinar de relevantă și utilă. Aceasta înseamnă miniaturi mari ale imaginilor, redactare concisă, prețuri transparente, evaluări și mărturii expuse, ancore psihologice și butoane de îndemn. Deciziile de proiectare vizuală luate acolo sunt apoi traduse în alte părți ale interfeței, în special în formulare și etichete și mesaje de eroare la finalizare. Abia atunci, în cele din urmă, ajungem la paginile de categorii și la paginile de întrebări frecvente care trăiesc la marginile exterioare ale spectrului de experiență. Undeva între ele explorăm prima pagină, dar de obicei o proiectăm mai târziu decât la începutul procesului - în momentul în care ne-am stabilit deja o identitate puternică, așa că folosim prima pagină pentru a o amplifica și explora în mod proeminent, eventual cu un design îndrăzneț care ar prezenta principalele calități ale personalității.

Vă amintiți conexiunile generale menționate mai devreme în capitol? O parte critică a procesului de proiectare este conectarea modulelor, astfel încât acestea să nu apară ca soluții independente atunci când sunt puse împreună în interfață. Când avem suficiente module pentru a construi primul prototip, sărim în browser și construim mai întâi mobil. În acest proces ne decidem în cele din urmă asupra grilei și aspectului și structurii și implementăm conexiunile dintre module. De fapt, pentru noi, semnătura este acea legătură magică care leagă lucrurile.

De aceea începem să ne gândim la semnătura designului atunci când începem să proiectăm inima experienței și, uneori, chiar înainte de asta. Foile de calcul care explorează mesajele de eroare, experimentele vizuale despre forme și culori și tip, precum și interviurile cu utilizatorii ne ajută să ajungem acolo. În cele din urmă, deciziile luate pentru primul prototip pot fi reutilizate pentru alte pagini, totuși, uneori, trebuie să rulăm procesul de la început, deoarece unele pagini vor fi în mod clar unice, cum ar fi pagina de destinație sau prima pagină. Ei vor prezenta în continuare relații cu orice altceva, deoarece sunt proiectați și construiti folosind trăsăturile de personalitate care au fost consolidate până în acest moment.

Aceste relații ar pune apoi baza principală a unui sistem de proiectare, împreună cu componentele și exemplele de interfață în uz. Prea des ghidurile de stil arată o componentă izolat, împreună cu numele claselor Sass și un fragment de cod, fără a include modul în care ar trebui să apară și să se comporte acea componentă în raport cu alte module de pe pagină. Exemplele contează atât pentru designeri, cât și pentru dezvoltatori și oferă un motiv bun pentru a vizita și pentru a menține actualizat sistemul de proiectare pe termen lung.

Adesea, creăm hărți de călătorie a utilizatorului pentru a înțelege fluxul prin care trec utilizatorii pentru a-și îndeplini sarcinile și, având în vedere trăsăturile de personalitate, le-am putea chiar completa cu storyboard-uri, adăugând câteva elemente de personalitate în diferite puncte ale experienței utilizatorului. În plus, în contextul sistemelor de proiectare, am putea explora nu numai componentele în mod izolat, ci și modul în care limbajul de proiectare poate folosi componente pentru a încetini sau accelera experiența sau pentru a oferi un impact mai mare sau mai mic, precum și un aspect dinamic și static. compoziții — foarte asemănător cu interacțiunile cu showroom-ul și calul de lucru.

Puteți chiar să le imprimați și să le puneți ca magneți pe un storyboard, astfel încât designerii să le poată muta liber și, astfel, să exploreze modalități de a combina componente previzibile în moduri imprevizibile. Acesta este ceea ce face Andrew Clarke atunci când încorporează direcția artistică și povestirea în desenele sale - la fel ca designerii de benzi desenate aranjează cadrele în funcție de dinamica narativă și impactul atunci când prezintă o poveste comică.

Semnătura designului se află chiar în centrul designului. Este o componentă care conectează componentele din interfață și este ceea ce îi ajută pe designeri să rămână pe drumul cel bun atunci când întrețin sau dezvoltă un limbaj de design. Decizia asupra trăsăturilor de personalitate ajută mai întâi să conducă direcția designului și poate fi doar o constrângere suficient de bună pentru a dizolva intențiile și obiectivele inițiale în atribute tangibile, distinse, care ar putea deveni în cele din urmă inima experienței.

Încheierea

Oricât de mult ne-am putea lăsa seduși de farmecul unui site web, până la urmă, scopul principal al acestuia nu ar trebui să fie auto-indulgența. Expresiile personalității site-ului permit conexiuni emoționale cu clienții și vizitatorii și, pentru că sunt umani prin natura lor, conturează o cale către interfețe autentice, oneste și respectuoase. Depinde de noi să ne dăm seama cum să modelăm acea cale și rezultatul care ne așteaptă.

Acum, s-ar putea să nu fie pentru toată lumea și poate că nu orice site are nevoie de o personalitate în primul rând, sau poate ar trebui să fie subtil și să se exprime în mici nuanțe ici și colo. Sper că, în oricare dintre aceste cazuri, odată ce răsturnați ultima pagină a acestei cărți, veți avea o centură de idei și tehnici suficient de bună pentru a crea experiențe unice și umane - experiențe de care oamenii s-ar putea îndrăgosti.

Aș dori să exprim sincera recunoștință lui Jen Simmons, Rachel Andrew, Andrew Clarke, Dan Mall, Espen Brunborg și Elliot Jay Stocks pentru munca inspirată, contribuțiile și ajutorul în discutarea ideii de direcție artistică pe web și pentru realizarea web mai divers și mai experimental. De asemenea, aș dori să mulțumesc lui Marko Dugonjic (revizorul principal al capitolului), Albertei Soranzo, Sashka Maximova, Lilia Zinchenko, Stefan Bucher, Benoit Henry, Nils Mielke, Thord D. Hedengren și Bertrand Lirette pentru revizuirea capitolului, deoarece precum și comunitatea noastră fantastică, care a împărtășit tehnici și lecții învățate din munca sa pentru ca toată lumea să le folosească. Ești cu adevărat uluitor!

Noul Smashing Book 6 este acum disponibil pentru precomandă. Conține tot ce trebuie să știți despre cum să abordați noile aventuri pe care le aduce designul și dezvoltarea web. Fără teorie, doar lucruri care au funcționat în practică.