9 sfaturi de design pentru a vă face un designer mai bun Web

Este probabil cea mai puțin glamoură parte a designului web, dar designul de informații nu este în niciun caz cel mai puțin important. Localizarea și consumarea informațiilor reprezintă sarcina web chintesentă, depășind cu mult cumpărăturile, jocul și comunicarea, toate acestea cuprinzând o bună parte a informațiilor. Modul în care utilizatorii găsesc și apoi se folosesc de toate informațiile respective sunt afectate de modul în care sunt structurate și prezentate. Astfel, fiecare designer de web ar trebui să fie echipat pentru a lua decizii calificate și informate cu privire la modul în care să facă acest lucru.

Această postare este Ziua 3 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua 2a sesiunii de sesiune"

1 - Fii metodic

Designul de informații este o problemă care devine din ce în ce mai complexă cu cât site-ul este mai mare. Cu toate acestea, chiar și un site web mic va beneficia de un proces metodic, pas cu pas, pentru a afla cum să comandați și să organizați conținutul site-ului. Iată câțiva pași simpli pe care ați dori să le urmați:

    1. Înțelegeți conținutul, procesele și scopul site-ului
      Este destul de greu să organizezi o grămadă de chestii dacă nu știi exact ce chestii este. Deci, prima dvs. sarcină este să vă concentrați asupra conținutului, proceselor și obiectivelor site-ului. Conținutul unui site înseamnă copia, imaginile, videoclipurile și alte materiale pe care vi le-ați dat sau le-ați informat despre faptul că trebuie să acceseze site-ul. Procesele unui site sunt sarcinile și fluxurile de lucru pe care utilizatorii vor trebui să le completeze pentru a interacționa cu un site. Și obiectivele site-ului se referă la ambii obiectivele clientului și ale utilizatorului.

      Deci, pentru un exemplu simplu de restaurant, puteți afla că aveți text pentru paginile de la 1 la 20, știți că utilizatorii vor încerca să îndeplinească anumite sarcini, cum ar fi efectuarea unei rezervări. De asemenea, s-ar putea să observați că obiectivele unui utilizator pe site sunt să afle ce oferă restaurantul, unde este amplasat și dacă există tabele și apoi faceți o rezervare. În final, obiectivele clientului ar putea fi să servească utilizatorul, dar și să le împingă către un set de specialități pe care le desfășoară.

    2. Prioritizați și căutați căile de utilizator
      Odată ce ați luat o înțelegere fermă a ceea ce intră pe site, puteți începe să acordați prioritate informațiilor și să aflați cum vor putea să treacă utilizatorii site-ul. Ce căi vor lua pentru a-și atinge obiectivele? Ce pagini sunt cele mai importante? Care ar trebui să fie văzute chiar în față și care sunt doar informații de susținere?

      Chiar și cu un exemplu simplu, cum ar fi site-ul nostru de restaurant, există multe modalități de a stabili informațiile. De exemplu, ați putea să apăsați imediat pe pagina de pornire sau să le legați în procesul de rezervare sau puteți să le folosiți în meniuri. În mod similar, s-ar putea să afli că având în vedere obiectivele clientului, veți avea o prioritate diferită în conținutul paginii. Poate clientul vă spune că nimeni nu poate găsi acest restaurant, așa că trebuie să faceți o pagină Cum să ajungeți aici și să o acordați o prioritate.

    3. Organizați informațiile
      Cu o înțelegere a ceea ce intră pe site și o înțelegere clară a modului în care elementele diferite se raportează la unii pe alții, cum vor dori utilizatorii să lucreze prin intermediul acestora și cât de importante sunt diferite secțiuni, puteți organiza acum informațiile despre site . Această organizare implică nu doar categorisirea paginilor - de exemplu imaginându-se că "despre companie" se potrivește sub o "filă" - dar chiar și chestionarea și rearanjarea conținutului care vi-a fost dat. Uneori, puteți găsi că este mai bine să combinați mai multe pagini, să rupeți o secțiune lungă, să transformați un text într-o reprezentare grafică mai simplă sau orice alt număr de rearanjări.

      Elaborați un sitemap sau un plan pentru modul în care informațiile vor fi amplasate într-un mod ierarhic. Deși sitemap-urile sunt de obicei doar un set de casete care indică pagini, puteți lucra în tot felul de informații suplimentare care explică modul în care site-ul va fi setat, inclusiv lucruri cum ar fi legături rapide de la pagina de pornire, trasee pe care un utilizator le poate lua printr-un sitemap.


După ce am realizat că au existat atât de multe informații despre piețe, credem acum că un wiki este cel mai eficient mod de organizare

2 - Gândește-te din cutie

Site-urile cu o complexitate rezonabilă pot fi rearanjate și reorganizate mulți căi diferite. Un site pe care l-am lucrat la organizarea și reorganizarea a nenumărate ori este FlashDen. Am pierdut numărul de ori de câte ori m-am uitat la acel meniu și l-am rearanjat. În unele cazuri, noi doar mutăm paginile în seturi și grupuri diferite, astfel încât acestea să pară mai logice, iar în altele am introdus mai multe gândiri extra-box.

De exemplu, cu câteva luni în urmă meniul a devenit excesiv de complex, astfel încât am eliminat o grămadă de elemente de meniu mai "pufoase" și am creat un blog care acum găzduiește competiții, buletine de știri, link-uri de subsite și alte pagini care au fost aglomerate în meniu.

Recent am constatat că avem multe dintre ceea ce eu numesc "rătăcitori" - adică pagini fără o casă în meniu. Dintr-un punct de vedere al designului informațional, cei rătăciți sunt teribili - chiar nu-mi amintesc cum să ajung la unii dintre ei! Soluția de data aceasta este de a construi un sistem wiki, un conținut de top de la țevi în meniul din spatele scenei, iar apoi să folosești wiki-ul pentru a găzdui niveluri mai profunde de informații cu propriile facilități de căutare, etichetare și clasificare.

Punctul din experiențele mele cu FlashDen este că organizarea informațiilor nu trebuie să fie neapărat necesară pentru a le pune în meniuri și submeniuri. S-ar putea să găsiți că unele informații nu ar trebui să fie pe un site sau că necesită un subsite sau că trebuie să faceți altceva altceva. Cu FlashDen am avantajul că au trecut aproape 3 ani acum că m-am uitat la conținut și încă până astăzi găsesc noi aranjamente și soluții.

A fi un designer eficient al informației și pentru a găsi cele mai optime soluții necesită adesea gândirea din cutie. Desigur, spunând "gândiți-vă în afara casetei" este mult mai ușor de spus decât de a face! Uneori suntem constrânși într-o cutie pe care nu o putem vedea nici măcar. Cu ceva timp în urmă am auzit de un experiment în care o grămadă de bug-uri de sărituri au fost plasate într-o cutie de sticlă și de-a lungul timpului au învățat să sară atât de înaltă. Atunci când capacul de sticlă a fost înlăturat, bug-urile au continuat să sară la fel, înălțimea limitată, fără să-și dea seama că ar putea dacă ar fi vrut să iasă.

Deci, cum depășiți o cutie pe care nu o puteți vedea? Simplu! Cu ajutorul altor persoane care nu sunt restricționate de aceleași probleme pe care le aveți. Pentru desenele complexe de informare, îi voi cere adesea altor persoane idei organizaționale, oferindu-le doar o problemă brută și nu permutările mele. Obținerea de a spune ideile unui programator sau opiniile unui utilizator vă vor surprinde adesea, deoarece perspectivele acestora sunt complet diferite de ale tale proprii și nestingherite de aceleași moduri de gândire stabilite.


Dacă cineva are un site imens, acesta trebuie să fie Chevron. Cum ai organiza toate aceste informații?

3 - Păstrați structura echilibrată

Când organizați seturi mari de informații, o întrebare evidentă care apare mereu este cât de adâncă sau cât de largă ar trebui să fie navigația dvs. Adâncimea se referă la câte straturi de categorii și subcategorii există, în timp ce lățimea este despre cât de multe din fiecare nivel există. Trucul este să găsești echilibrul. Dacă există prea multe elemente pe un singur nivel - mai ales la nivelul de vârf - riscați să confundați utilizatorul. Pe de altă parte, dacă un utilizator trebuie să facă clic pe mai multe niveluri, riscați să-i pierdeți.

O regulă bună este păstrarea numărului de opțiuni la un anumit nivel la 4 - 8. Dacă aveți 8 elemente de nivel superior, fiecare cu 8 subcategorii și fiecare cu 8 subcategorii, veți avea suficient spațiu pentru o Site-ul 512 de pagini. Desigur, lucrurile rareori fac lucrurile să se echilibreze atât de bine. Din nou, trebuie să aveți grijă să nu aveți o parte grea și o parte ușoară. De exemplu, pe un site cu câteva sute de pagini, dacă puneți a lua legatura sus la un nivel superior undeva, sunt sanse sa nu aiba 8 subcategorii cu 8 sub-subcategorii. Este mai probabil ca asta a lua legatura va fi o secțiune destul de simplă - chiar și pentru un site complex.

Pe de altă parte, dacă nu puneți ceva asemănător a lua legatura la nivelul de vârf, puteți obține o profunzime mai echilibrată a informațiilor, dar riscați să nu aveți o sarcină importantă pentru utilizatori, deoarece va fi greu să aflați cum să găsiți informațiile de contact. O soluție simplă la această problemă ar putea fi adăugarea "legăturilor rapide" în care le oferiți un utilizator câteva opțiuni pe pagina de pornire pentru a sari mai adânc în structură fără a naviga în mod obișnuit.


Pe NETTUTS am decis să facilităm obiceiurile de utilizare cu plasarea butonului demo și a butonului sursă.

4 - Proiectare pentru scanare, scanare și sărituri

Nu știu despre tine, dar este foarte rar că voi citi pe deplin o pagină Web. Indiferent dacă este vorba de a citi instrucțiuni, termeni și condiții, sau doar o copie obișnuită, de cele mai multe ori scufund, scanez și sărind. Presupunând că nu sunt singurul care face acest lucru, este logic să proiectezi pagini pentru a facilita acest mod de a consuma informații.

Nu împachetați informațiile cheie în pachete de text - evidențiați-le. Nu dați utilizatorilor paragrafe cu privire la sfîrșitul lor, întreruperi-le cu titluri, subpoziții, puncte glonte, diagrame, orice ar fi nevoie! Gândiți-vă la modul în care un utilizator va folosi site-ul dvs. și îl va proiecta pentru a facilita utilizarea acestuia.

Un bun exemplu de proiectare pentru consumul de utilizatori este pe site-ul nostru sora NETTUTS, un site pe care majoritatea dintre voi stiti ca publica tutoriale despre subiectele de dezvoltare web. Acum, pe NETTUTS am observat devreme că cei mai mulți oameni, vizionând mai întâi un tutorial, săriți până la capăt, unde încearcă să găsească un link către un demo și / sau un cod sursă, astfel încât să poată decide dacă tutorialul merită citit în primul loc. Odată ce am realizat acest lucru, a fost o chestiune simplă să adăugăm butoane speciale Demo și Source și să le plasăm în mod constant în partea de sus a tutorialelor. Această ajustare simplă pentru a se potrivi design-ului nostru cu modelele de consum ale utilizatorilor ne-a atins mult de feedback fericit.


PatternTap este un loc bun pentru a obține idei și a vedea cum alți oameni proiectează articole și informații textuale

5 - Design text care vrea să fie citit

Nu sunt sigur dacă imbatranesc sau dacă îmi petrec tot timpul în fața unui ecran mă face să fiu drăguț, dar în ultima vreme mă deranjează foarte mult când sunt prezentat cu text care nu mă obligă să Citește. Scopul unui design al site-ului este, de obicei, transmiterea de informații și, mai mult, textul scris, astfel încât concentrarea pe afișarea acestuia ar trebui să fie o prioritate.

Folosind prea mici dimensiuni ale fontului, un contrast scăzut între text și culoarea de fundal sau folosirea greșită a textului deschis pe fundal întunecat sunt toate păcatele de design pe care le-am făcut vinovați cu toții (de multe ori cu mine!) Dar dincolo de acestea, există și alte modalități prin care designul dvs. poate face vizitatorul să citească. Scopul este de a proiecta astfel încât aspectul dvs. să se concentreze pe vizitatori pe copie și să-i conducă în cu titluri, subpoziții, delimitări, pullquotes și alte tehnici pentru tragerea ochiului.


Un exemplu simplu de ghidare a utilizatorilor prin intermediul unui site - Ghidul 4 pasi al ThemeForest

6 - Ghidați utilizatorul atât între pagini, cât și prin pagini

Mai devreme am menționat Căile de utilizator - care sunt moduri în care utilizatorii vor avea tendința să traverseze un site Web. Multe dintre acestea se vor întâmpla pur și simplu prin felul în care se comportă oamenii, dar cu planificarea puteți alege modul în care un utilizator va fi ghidat atât printr-o singură pagină, cât și pe mai multe pagini. Odată ce cunoașteți căile specifice, puteți lucra în ghiduri vizuale și linkuri pentru a le ajuta să se deplaseze pe acea cale.

De exemplu, pe FlashDen, atunci când ajunge un nou utilizator, scopul nostru este să-i facem să se înregistreze, să găsească fișiere, să depună bani și apoi să cumpere aceste fișiere. Așadar, le dăm mai întâi un rezumat al procesului pe patru etape de pe pagina de pornire, apoi la fiecare oprire există indicii pentru a îndruma utilizatorul către pasul următor. În următoarea noastră reproiectare sper să fac această cale și mai evidentă, deoarece este esențial ca site-ul să funcționeze așa cum ar trebui. Rețineți că calea pe care o descriu nu este de 4 pagini, ci 4 de sarcini. De exemplu, găsirea de fișiere poate implica utilizatorul uitând la zeci de pagini, dar este o sarcină discretă. Căile de utilizator nu trebuie să fie prin paginile setate, ele pot să includă la fel de ușor sarcinile stabilite!


Cartea foarte utilă a lui Steve Krug!

7 - Nu complicati prea mult lucrurile

Ar trebui să se înțeleagă că simpla este mai bună pentru utilizatori decât complicată. Cu toate acestea, este prea ușor să supracomplicați desenele. Știu că adesea fac lucrurile să pară mai complicate, astfel încât să am mai multe elemente vizuale pe o pagină de lucru (rău Collis, rău Collis!) Un alt păcat suprasolicitator folosește cuvinte inutile pe butoane și apeluri la acțiune. Steven Krug în cartea sa excelentă "Do not Make Me Think" dă exemplul unui site ipotetic de angajare cu un buton care citește:

  • Locuri de munca
  • Oportunitati de angajare
  • Locuri de munca-o-RAMA

Unul dintre acestea este clar, unul este rezonabil evident, iar unul este - bine cine știe.


Informațiile pot fi prezentate mai mult decât text!

8 - Vizualizarea informațiilor

În calitate de designeri, noi, mai mult decât majoritatea, cunoaștem valoarea unei viziuni bune. Și există o mulțime de oportunități de a schimba sau vizualiza unele date, concepte sau informații. Acest articol foarte așa cum vă amintiți începe cu o diagramă foarte elementară a modului în care se referă designul interfeței, designul de informație și designul estetic. Aceste imagini nu numai că descompun textul, dar sunt și mai memorabile și vă oferă posibilitatea de a aduce o pagină la viață.

DoshDosh au un articol interesant despre vizualizarea informațiilor, diagrame și ceea ce autorul numește infografice care merită să fie verificate, chiar dacă este doar pentru a vedea exemplele genial de grafică.


Analizând căile și obiectivele nu a fost niciodată mai ușoară datorită unor instrumente precum Google Analytics

9 - Analizați-vă designul de informații

Designul de informații este unul din acele lucruri greu de obținut chiar la prima încercare. Deci, odată ce ați construit un site, ar trebui să îl analizați pentru a vedea modul în care oamenii folosesc și digera informațiile, modul în care se comportă și unde vă puteți îmbunătăți designul.

Un instrument util în această privință este Google Analytics. De exemplu, în cazul în care am menționat mai devreme Căile de utilizator, Google Analytics vă permite să urmăriți căile prin pagini utilizând funcția Obiective. Ați creat o secvență de pagini, iar Google Analytics va raporta procentajul% din vizitatorii care o realizează (și prin extensie clicați) în fiecare punct.

O altă funcție de analiză pe care o puteți utiliza este urmărirea termenilor de căutare, care vă permite să vedeți ce căutăm utilizatorii în câmpul de căutare al propriului site. Știind ce caută oamenii vă spune ce informații trebuie să fie mai ușor disponibile!

Această postare este Ziua 3 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua 2a sesiunii de sesiune"