6 Principii de proiectare a interfeței și sfaturi pentru fiecare proiectant web trebuie să știe

Designul de interfață bun este ca aerul pe care îl respirăm - este acolo când aveți nevoie de el și îl folosiți fără să vă gândiți. Dacă ați folosit vreodată un design de interfață greșită, ați încercat să vă apropiați de un site, ați făcut clic pe el pentru că nu ați reușit să vă dați seama ce se întâmpla, nu ați reușit să finalizați o sarcină pe care ați avut-o în minte sau pur și simplu ați fost confuz, veți ști pericolul de a merge prost în acest domeniu.

Site-urile web nu sunt imagini frumoase, sunt acolo pentru a fi utilizate și consumate, așa că este destul de important ca, în calitate de web designeri, să petrecem o bună parte din timp gândindu-ne la utilitate. În acest articol vom lua în considerare unele dintre problemele mari de utilizare și sfaturile mele pentru a fi un designer de interfață mai bun.

Această postare este Ziua 7 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 6-a sesiune"

1 - Analizarea audiențelor


Când punem în aplicare Psdtuts +, luăm în considerare diferitele moduri în care oamenii vor folosi site-ul

În orice site web sunt implicate cel puțin trei părți distincte - clientul sau proprietarul site-ului, utilizatorii site-ului și designerul sau constructorul site-ului. De fapt, de multe ori există mai multe grupuri de utilizatori, câțiva diverși reprezentanți ai clienților și, eventual, câțiva oameni din echipa de proiectare. Acestea sunt tot ceea ce oamenii le place să se refere la părți interesate (un cuvânt care mă face să-mi imaginez o grămadă de oameni care dețin t-oase).

Acum, lucrurile despre părțile interesate sunt, de obicei, toată lumea vrea ceva diferit. Clientul dvs. are o agendă - fie că este plăcut șeful, făcând logo-ul mai mare și, bineînțeles, primind mesajul. Utilizatorii dvs. au o agendă - sarcinile pe care încearcă să le îndeplinească, informațiile pe care încearcă să le găsească. Și, bineînțeles, aveți o agendă - obțineți design-ul pe o galerie preferată CSS, plăcută șefului dvs., potrivită într-un design rapid înainte de ora 17, când ieșiți ...

Ei bine, în lumea părților interesate, este întotdeauna important să ne amintim că utilizatorii sunt pe primul loc. Dacă doriți un site de succes, trebuie să negociați propriile planuri cu nevoile clientului dvs., astfel încât utilizatorii să fie fericiți și să găsească ceea ce au nevoie. Acesta este motivul pentru care unul dintre primele lucruri pe care le faceți în planificarea unui site web este de a afla cine este publicul țintă.

Clase de public

Cuvintele vizate de public par să însemne că este vorba de un grup de persoane pe care vrem să le folosim. Realitatea este mai mult ca o mulțime de oameni care vor folosi site-ul dacă ne place sau nu, și este de până la noi să dau seama cum să servească aceste persoane. Așadar, prefer să mă gândesc la clasele de audiență, adică diferite grupuri de oameni care vor folosi un site.

Fiecare clasă de auditori va avea un set de sarcini pe care încearcă să le îndeplinească și informațiile pe care le interesează. Ca designer web, sarcina dvs. este să vă dați seama cine sunt aceste clase de oameni, ce doresc și cum vor utiliza site-ul . Pentru a complica problemele, puteți diviza în general o audiență în mai multe moduri diferite, dintre care unele vor fi mai utile decât altele.

De exemplu, în Psdtuts + ați putea spune că avem aceste patru clase de audiență:

  1. Photoshop și design Amatori
  2. Designeri web și grafici
  3. Calculatoare grafice
  4. Vizitatori de interes ocazional

Acum este probabil o metodă bună de segmentare a publicului dacă aș fi fost interesat de tipurile de conținut pe care le-am plasat pe site - de ex. ar trebui să avem mai multe tutoriale de design web sau mai multe tutoriale de amestecare 3d? Dar din punctul de vedere al utilizabilității site-ului nu este foarte util. Un alt mod de a distruge audiența este să spunem că avem aceste grupuri:

  1. Oameni pe o misiune de a învăța Photoshop
  2. Cititorii obișnuiți își păstrează abilitățile
  3. Cititorii obișnuiți care doresc să omoare timpul
  4. Cititorii obișnuiți care participă la comunitate
  5. Ocazional sau casual vizitatori

Privind în acest fel, veți vedea că diferite tipuri de auditori vin la Psdtuts + cu un scop diferit în minte. Din această descompunere am putea deduce că persoanele din categoriile 1 și 2 sunt cel mai probabil să lovească sistemul nostru Plus, categoriile 1 și 4 vor fi interesate de grupul Flickr și așa mai departe. Apoi, estimați diferite dimensiuni ale grupurilor de public și veți avea o idee despre ceea ce este cel mai puțin important pe site.

Prioritizarea sarcinilor utilizatorilor

Odată ce ați identificat seturi de utilizatori, ați dat seama ce vor să facă pe site și cât de mari și importante sunt diferitele seturi, puteți stabili prioritățile pentru diferitele sarcini ale utilizatorilor. Este important faptul că obiectivele dvs. client / proprietar intră în joc aici, deoarece ele vor influența importanța diferitelor grupuri de utilizatori.

Așa că înapoi la exemplul nostru Psdtuts +, una dintre cele mai importante sarcini ale utilizatorilor se înscrie în sistemul Plus, deoarece este ceea ce plătește pentru site, deci chiar dacă "Oamenii aflați într-o misiune de a învăța Photoshop" nu este un grup de audiență atât de mare ca "Cititorii obișnuiți care caută să ucidă timpul" și "Cititorii obișnuiți care participă la comunitate", sunt totuși mai importanți. În consecință, oferim un spațiu al ecranului cel mai bun (în partea dreaptă sus a barei laterale) într-o cutie despre conectarea la Plus.

"Cititorii obișnuiți care participă la comunitate", pe de altă parte, este un grup destul de mare dar se întâmplă, de asemenea, să fie un grup de persoane care sunt atât de familiarizate cu site-ul și sunt dispuși să facă ceva mai mult de lucru, deci ceva asemănător cu grupul Flickr poate sta jos pe bara laterală unde este accesibil, dar nu imediat.

Partea Instinct, Analiza părții, Partea comună

La sfârșitul zilei, găsirea grupurilor de audiență, ceea ce vor și va face este un amestec de instinct, analiză și bun simț. De multe ori mă simt ca și cum am realizat presupuneri educate, în timp ce sunt sigur că pe proiecte cu un buget mare poți să faci anchete și să fii puțin mai sigur. Cred că indiferent de nivelul dvs. de calificare și buget, deși este un obicei bun de a scrie o scurtă analiză a diferitelor grupuri. Adesea, te forțează să vezi relații și probleme pe care nu le poți gândi altfel.

Apoi, puteți prezenta analiza dvs. clientului. În cele mai multe cazuri, ar trebui să găsească că vă pot spune lucruri despre grupurile de audiență pe care nu le-ați fi știut altfel. Și cu cât știți mai mult despre utilizatori, cu atât mai bine puteți crea un site pentru ei.


2 - Puteți învăța multe prin vizionarea oamenilor


Este destul de fascinant (și infuriant) uitam ce fac oamenii de fapt pe un site

Cea mai bună modalitate de a ști cum oamenii vor folosi un site web este să le urmărească. Aceasta se numește testarea utilizatorilor și de mult timp am avut impresia că a fost ceva de făcut doar agenții interactive mari și interesante. Sigur, pentru a face testul oficial al utilizatorilor este probabil ceva ce nu se încadrează în bugetul majorității proiectelor de web design, dar există destul de multe lucruri pe care le puteți face chiar dacă sunteți doar un tip care stă într-un subsol ținând proiecte web pe eLance.

Testarea utilizatorilor este bună pentru dvs. ca designer web

Primul lucru pe care trebuie să-l recunoașteți este că atunci când efectuați orice fel de testare a utilizatorilor, acesta vă va face un designer de web mai bun. Veți vedea exact modul în care utilizatorii utilizează desenele dvs. web și există șanse mari să fiți surprinsi de modul în care o fac. Lucrurile pe care credeți că sunt evidente adesea nu sunt, textul pe care credeți că a explicat ceva - nu se poate citi nici măcar și, în general, utilizatorii fac lucruri pe care nu ar trebui să le facă. Chiar dacă singurul utilizator de testare pe care îl faceți vreodată este să îi cereți unor prieteni să folosească un site în timp ce îi respectați, veți fi deja mai bine pentru el, indiferent de proiectul în sine.

Există testarea corectă a utilizatorilor

Dacă doriți să efectuați testări formale ale utilizatorilor, una dintre metodele cele mai simple și mai puțin costisitoare este să utilizați evaluarea euristică a lui Jakob Neilsen. În ciuda numelui înfricoșător, acesta este de fapt un set de porci de cobai care folosesc un site și apoi îi evaluează în funcție de o mulțime de criterii speciale numite heuristici. Setul de euristici cel mai frecvent utilizat este setul de Neilsen de 10 euristici de utilizare si procesul actual de efectuare a testelor este explicat de Neilsen intr-un articol destul de usor de inteles.

Lucrul elegant despre evaluarea euristică este că nu aveți nevoie de foarte mulți oameni pentru a testa, de fapt 5 persoane ar trebui să găsească aproximativ 75% din toate problemele de uzabilitate, în timp ce dublarea la 10 va ajunge doar până la 85%. Îmi imaginez că cei 5 oameni trebuie să fie destul de diversi, totuși, deoarece ideea este că oamenii vor avea tendința de a găsi diferite probleme.

Potrivit unui studiu de caz, "raport beneficiu-cost pentru un proiect de evaluare euristică de 48: Costul utilizării metodei a fost de aproximativ 10.500 USD, iar beneficiile așteptate au fost de aproximativ 500.000 de dolari" (Neilsen 1994) - care sună destul de uimitor, deși știu că nu am lucrat la foarte multe proiecte în care aș fi putut să mai mișcă un plus de 10 mii după client.

Și există o testare riguroasă a utilizatorilor

Doar pentru că nu aveți un $ 10,500 răcoros pentru a arunca în jur, nu înseamnă că nu puteți beneficia de testarea utilizatorilor deși! La sfarsitul zilei, tot ce aveti nevoie este doar cateva persoane (a.k.a. prieteni) cu care puteti sa petreceti 10 minute cu. Mai întâi trebuie să organizați ceva pentru a le testa. Acest lucru poate fi orice, de la hârtie și pixuri wireframes la machete Photoshop la un site de jumătate de lucru. Apoi, ar trebui să dați niște idei despre ceea ce căutați, ce sarcini o persoană va încerca pe site și să clarifice în mintea ta ceea ce așteptați să vedeți.

Acum, stai pe cobai jos, sfătuiți-i să înțeleagă ce încearcă să realizeze - adică "Încerci să cumperi un bilet la Fiji și ai ajuns la această pagină ...", apoi să le arăți setul de imagini JPEG sau bucăți de hârtie sau site-ul oaselor goale. Dacă nu este ceva care este efectiv funcțional (adică un set de JPG sau hârtie) atunci tu să producă funcționalitatea - fie prin explicarea a ceea ce se întâmplă atunci când "dau clic" undeva, fie prin schimbarea la următorul ecran pe care îl văd.

Personal, cred că JPG-urile sunt cele mai bune pentru că puteți urmări unde se mișcă mouse-ul persoanei, văd ceva care se apropie de ceea ce vor vedea, dar în același timp nu trebuie să fi plecat și să construiți un site complet.

În timp ce testezi, nu trebuie să spui prea mult, să-ți amintești că ești observarea! În final, veți petrece încă câteva minute, întrebându-le dacă aveți întrebări "De ce naiba ai făcut clic acolo acolo? și de a face orice note de care aveți nevoie "Nota pentru sine, face ca butonul mult mai mare".

Si asta e! Nu aveți nevoie de un strat de laborator alb, nu aveți nevoie de echipament special, nu aveți nevoie de nimic ... cu excepția unor prieteni sau a unor persoane pe care le puteți mita - care nu sunt ei înșiși designeri de web.

Servicii plătite de terțe părți

După ce am scris toate acestea, mi sa părut că s-ar putea să existe niște servicii terțe relativ ieftine, care să ofere teste de utilizator. Destul de sigur, există o companie numită UserTesting.com care vă va oferi un videoclip și un rezumat scris al unei persoane reale care utilizează site-ul dvs. începând de la 19 USD pentru un singur tester până la 100 de testeri pentru 1.699 USD. Nu pot spune cât de obiectiv sunt acești oameni, dar trebuie să spun că cheltuiesc 100 de dolari pentru a obține 5 persoane pentru a trece printr-un site nu este prea rău pentru un proiect de dimensiuni mici și mijlocii. Dacă altceva nu știe cu siguranță că sună impresionant atunci când îi spui clientului dvs. că veți organiza un set de teste de utilizator!

Trebuie să rețineți că puteți utiliza cu adevărat un serviciu de genul acesta, cu un site Web de lucru efectiv. Dacă încercați să faceți testarea la etapa machetei Photoshop sau la scena de tip hârtie și stilou, atunci veți avea unele dificultăți!

Instrumente de analiză a lansării postului

În această zi și vârstă există o mulțime de instrumente statistice pe care le puteți utiliza pentru a testa modul în care oamenii utilizează un site. Iată câteva instrumente pentru analiza:

  1. Analiza clicurilor - CrazyEgg, acoperire de site Google Analytics, ClickHeat
    Cu aceste servicii puteți vedea căile de căldură ale locurilor în care oamenii fac clic. Singura pe care am folosit-o este cea din Google Analytics (faceți clic pe Conținut> Suprapunere site în meniul lateral). Acestea sunt destul de îngrijite pentru a vedea aproximativ unde majoritatea oamenilor se întâmplă pe o anumită pagină, dar, desigur, nu știți nimic altceva despre ceea ce fac sau încearcă să realizeze utilizatorii, deci într-adevăr este doar o jumătate din poveste.
  2. Analiza traseului -Cele mai bune pachete de analiză
    Identificând ce căi pe care utilizatorii le iau prin intermediul unui site pot fi determinate de pachete de statistici cum ar fi Google Analytics. Între stabilirea obiectivelor, canalelor și evenimentelor, urmărirea paginilor de ieșire, precum și doar navigarea în funcție de conținut și analizarea căilor de navigare, există cu adevărat mai multe informații decât cele pe care le puteți scutura. Personal, mi se pare un pic copleșitor uneori și doar într-adevăr utilizează obiective și canale, dar cred că este mai bine să ai mai mult decât ai nevoie decât să fii nevoitor.
  3. Testarea separată - Cele mai bune pachete de analiză
    Testul separat este atunci când alternați între două versiuni diferite ale unei pagini pentru a vedea cum fiecare face conversia. Este o tehnică destul de la îndemână pentru a afla cum să optimizați vânzările și paginile de destinație, în special, dar le puteți folosi pe orice tip de interfață.

3 - "Nu mă face să cred" ... prea mult


Ce titlu! Ce carte!

Do not Make Me Think este titlul unei cărți faimoase de către expertul în utilitate, Steve Krug și aproape sumarizează utilitatea în acea singură declarație. Un design utilizabil nu ar trebui să implice gândirea, ar trebui să fie evident ce să facă și când să facă. În cartea Krug explică faptul că utilizatorii folosesc site-uri într-o manieră foarte diferită de modul în care am vrea să credem că fac (ceva care va deveni clar atunci când faceți un pic de testare a utilizatorilor!) Și că este important să știți acest lucru, astfel încât să puteți design-le în mod corespunzător. Prin faptul că nu complicați textul, proiectând pentru scanare, acceptând că oamenii nu vă vor citi instrucțiunile lungi și așa mai departe, puteți lucra cu realitatea obiceiurilor și comportamentului utilizatorilor pentru a produce mai multe modele utile.

S-ar putea să te întrebi de ce am adăugat "... prea mult" la această rubrică. Ei bine, trebuie să recunosc că mă deranjează faptul că site-urile web ale experților de uzabilitate precum Steve Krug și Jakob Neilsen sunt la fel de blestemați, de bază. Presupun că înțeleg de ce o fac, dar nu mă deranjează să mă gândesc puțin la utilizatori dacă înseamnă un impact vizual mai bun. Cred că sunt mai mult de un tip de utilizare a mesajului 37Signals decât un devotat al lui Jakob Neilsen.


4 - Navigare și orientare


Adobe.com face o treabă bună cu traseul său de pescuit, pentru a vă informa despre unde vă aflați pe site-ul gigant.

Nu cred că aș putea să scriu un articol despre designul interfeței fără a se atinge de subiectul călătoriei în jurul unui site. Regulile cardinale de navigație sunt:

  1. Utilizatorii ar trebui să poată întotdeauna să lucreze acolo unde se află pe un site
    Aceasta se numește orientare și puteți obține un rezultat bun prin elemente de meniu evidențiate, trasee de pescuit și titluri. Fiind capabil să vă orientați pe un site este cheia pentru a fi ușor de înțeles și de utilizat. În lumea reală, echivalentul fizic al orientării sunt semne de stradă, ele vă anunță unde vă aflați acum.
  2. Navigarea ar trebui să rămână consecventă
    Nu este nimic mai confuz decât a avea o bara de meniu să se deplaseze în altă parte, să se schimbe dramatic sau să dispară. Navigarea unui site este unul dintre cele mai importante instrumente pe care le utilizează vizitatorii pentru a înțelege un site. În lumea reală echivalentul fizic al navigației este o hartă a străzilor, să vă dați seama unde puteți merge.

Cea mai bună modalitate de a înțelege de ce navigarea și orientarea sunt atât de importante este să vă imaginați dacă ați fost brusc transportat într-un oraș străin și l-ați spus să ajungeți undeva, captura fiind că nu existau semne de stradă și periodic harta dvs. s-ar rearanja, și să reapară. Durerea este mai puțin pe un site web, dar numai pentru că un clic de mouse te scoate de acolo!

Există o mulțime de alte convenții și idei despre ceea ce face o bună navigare / orientare - dar totul este subordonat acestor două reguli.


5 - Faceți-vă problemele ale tale


Deși mai multe despre dezvoltarea de web decât de design, cartea 37signals are câteva secțiuni interesante despre lucrul la propriile probleme. Și cea mai bună din toată cartea este liber pentru a citi online.

Nici o problemă nu este mai clară decât a ta. Acesta este unul dintre motivele pentru care noii antreprenori sunt întotdeauna sfătuiți să înceapă afaceri care își rezolvă propria problemă. De asemenea, designerii web pot beneficia de soluționarea problemelor pe care le-au experimentat ei înșiși. Există ceva despre experiența durerii de la prima mână, care explică exact cum ar putea fi mai bine lucrurile.

Deoarece este puțin probabil să alegeți să lucrați numai pe site-urile cu care aveți experiență directă, o metodă mai bună este de a obține experiență cu site-urile pe care lucrați. Puteți face acest lucru fie prin:

  1. Utilizarea site-ului curent (dacă există) pentru clientul dvs.
  2. Folosind site-urile concurentului care fac lucruri similare

Cel mai important lucru pe care trebuie să-l notează este că atunci când spun "folosiți", nu vreau să spun că trebuie doar să faceți clic pe câteva secunde și să notați această listă de sarcini. Vreau să spun într-adevăr utilizați un site. Aflați câteva sarcini tipice (de ex. "Trebuie să contactez biroul de vânzări din Delaware", "Vreau să fac o rezervare") și apoi să le execut complet. Când înțelegeți cu adevărat sarcinile și problemele pe care le va întâmpina un utilizator pe un site web, veți putea să proiectați o soluție mult mai bună.


6 - Convențiile sunt atât familiare, cât și ușoare


Icoanele reprezintă un excelent exemplu de convenții. Uitați-vă la pictogramele de mai sus și vedeți câte vă fac automat să vă gândiți la o anumită sarcină sau acțiune. De altfel, aceste pictograme sunt disponibile pe o licență Creative Commons prin Web Appers

A trecut mult peste un deceniu de când web-ul a devenit mainstream și în acel moment există multe lucruri despre modul în care site-urile web arată și funcționează, care au devenit acceptate în general. De exemplu, atunci când faceți clic pe un buton care spune "Acasă" pe care vă așteptați să mergeți la pagina de start, nu vă așteptați să mergeți la o pagină care arată casa unei persoane. Sună evident și prost, dar atunci sunt convențiile.

Ca un corolar al vârstei noastre anterioare "Do not Make Me Think", folosind standardele acceptate înseamnă exact asta, utilizatorii nu trebuie să gândească. Dacă plasați bara de navigare în subsolul fiecărei pagini, veți avea ocazia să confundați, să vă deranjați și să părăsiți utilizatorii. Dacă utilizați pictograme obișnuite în scopuri mai puțin frecvente, nu etichetați articolele în mod corespunzător, nu dați "Sunteți sigur?" confirmări pentru acțiuni ireversibile și așa mai departe, riscați să vă alienați pe utilizatori și acesta este ultimul lucru pe care doriți să-l faceți.

Sigur că sunt momente în care este posibil să nu urmați metodele convenționale, dar ar trebui să aveți motive întemeiate să faceți acest lucru și să faceți tot ce puteți pentru a clarifica ceea ce faceți.

Această postare este Ziua 7 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 6-a sesiune"