Fundamentele reproiectării site-ului web – Un studiu de caz

Nu este neobișnuit să finalizezi un proiect de reproiectare a unui site web doar pentru a te uita în urmă și a te gândi: „Aș fi făcut lucrurile altfel dacă aș fi știut ce știu astăzi.”

Am fost cu toții acolo. Suntem entuziasmați de un nou proiect, bătăm în joc cu clientul, semnăm contracte și începem să facem joc de prototipuri. Viața arată bine, dar fundațiile proiectului sunt șubrede.

În mod inevitabil, revizuirile și scăderea domeniului de aplicare încep să se strecoare de îndată ce este prezentat primul concept de design și de acolo este în jos. Comunicarea se destramă, nimic nu decurge așa cum a fost planificat și, în cele din urmă, site-ul web nou proiectat seamănă cu monstruozitatea pentru care ați fost angajat să o remediați.

Designul de clasă mondială și experiența utilizatorului nu încep cu o machetă destul de bună – se bazează pe planificarea strategică și o viziune de design care se concentrează pe obiectivele companiei. Obiectivul principal nu poate fi „Să facem un site web mai frumos”.

Designerii site-urilor web sunt responsabili pentru experiența utilizatorului (UX) și interfața cu utilizatorul (UI). Este datoria noastră să ne asigurăm că utilizatorii au o experiență optimă de interacțiune cu interfețele pe care le proiectăm. Acest lucru necesită o planificare amănunțită chiar de la concepția unui proiect.

Acest articol prezintă un proces de încredere care vă va ajuta să vă asigurați că următoarea reproiectare a site-ului web este construită pe o bază solidă.

Valoarea reproiectării site-ului web Cercetarea pre-proiect

Pentru a demonstra procesul, să parcurgem fazele unei reproiectări a site-ului web finalizată pentru Archaeology Southwest, o organizație nonprofit care explorează și protejează siturile arheologice din sud-vestul Statelor Unite.

După o investigație preliminară a domeniului clientului și a concurenței, inspectați îndeaproape fiecare activ al site-ului web disponibil. Această analiză este facturată separat și are loc înainte ca o ofertă de proiect să fie scrisă vreodată. Lucrul în acest fel previne estimările ambigue sau umflate care rezultă atunci când designerii web încearcă să țină seama de problemele care ar putea apărea cu crawlere la suprafață mai târziu într-un proiect.

În cazul Arheologiei Sud-Vest, m-am confruntat cu un site care avea mare nevoie de atenție - munți și munți de conținut aglomerat în interiorul unui portal CMS antic. A fost rău, așa că mi-am propus să creez ordine.

Pasul 1: Familiarizați-vă cu conținutul

Când remodelați o casă, este important să încercați să salvați materiale valoroase înainte de ziua demolării. Același principiu se aplică și designului site-ului web. Trebuie să parcurgeți site-ul pagină cu pagină și să scoateți tot conținutul. În calitate de designeri, trebuie să ne dăm seama ce conținut merită să fie un tip de postare unic și ce pagini sunt statice.

Odată ce acest lucru este realizat, creați o strategie despre cum să organizați totul, dar nu decideți ce conținut ar trebui să rămână și ce ar trebui eliminat. De ce nu?

Când aveți de-a face cu afaceri și organizații din lumea reală, există o serie de persoane diferite responsabile pentru conținutul unui site, iar cantitatea de conținut care există poate fi uluitoare. Cea mai bună abordare este de a clasifica totul mai întâi.

De obicei, încep cu navigarea principală și merg pagină cu pagină. În acest fel, voi avea arhitectura informațională și harta site-ului jos înainte de prima întâlnire cu clientul.

Din păcate, situl Archeology Southwest nu a fost tipic. Cele mai multe link-uri nu erau accesibile prin navigarea de sus și erau ascunse în conținut. Aș fi avut o surpriză urâtă dacă aș fi citat proiectul doar pe baza navigației.

Vorbind cu diverși oameni din echipa clientului, am reușit să-mi fac o imagine mai bună a sferei proiectului și, după o întâlnire cu clientul, am putut să-i identific pe site-ul, fluxul de lucru, conținutul și caracteristicile. De acolo, am venit cu următoarele tipuri de conținut de bază (unele noi, altele existente):

Pasul 2: Creați focus. Simplifica. Organiza.

Odată ce tot conținutul este organizat în casete etichetate, este timpul să dezvoltați planul pentru o nouă structură, una care va prezenta conținutul în cea mai bună formă. Dar mai întâi trebuie să ne concentrăm.

Potrivit Archaeology Southwest, oamenii își vizitează site-ul web pentru a căuta informații despre proiectele în derulare, pentru a afla despre evenimentele viitoare și pentru a citi o revistă lunară. Aceste activități răspund la întrebarea „ Ce fac oamenii pe site?” dar nu dezvăluie de ce oamenii vizitează site-ul în primul rând.

„ De ce ” este punctul central al site-ului. Pentru a găsi focalizarea, priviți la nucleul organizației.

În acest caz, am identificat „locația” ca fiind inima Arheologiei Sud-Vest. Fără locație, nu ar exista situri arheologice, ruine și, cu siguranță, muzee sau exponate. Totul în arheologie se referă la locație.

Cu un accent identificat, putem simplifica și organiza. Pentru Archaeology Southwest, am început prin a împărți conținutul în categorii care nu erau legate de locații, cum ar fi paginile echipei și rapoartele anuale. După puțină îngrijire, am ajuns cu această hartă brută:

Imaginea de mai sus reprezintă cele două domenii de bază care au apărut: Lucruri de făcut și Locații . Lucruri de făcut (stânga) acoperă activitățile despre care un vizitator al site-ului le poate afla și le poate face. Locații (dreapta) se concentrează pe conținutul site-ului care are legătură cu anumite locații. De ce să-l structurați astfel?

Ideea este că un utilizator obișnuit s-ar putea să nu știe numele unui videoclip sau al unui proiect, dar va ști probabil numele unei locații. În acest fel, vizitatorii pot găsi conținut în legătură cu locația.

În plus, fiecare bloc de culoare din Locații reprezintă un tip de postare unic. Dintr-o perspectivă organizațională, expozițiile, cursurile și expozițiile online sunt toate evenimente de natură diferită.

În vechiul site Archeology Southwest, existau pagini statice separate pentru o revistă și un magazin online de unde vizitatorii puteau cumpăra revista. Pentru a face achiziția mai simplă, am integrat o opțiune de cumpărare în șablonul revistei.

Structura organizatorică rămasă a fost simplă:

• O pagină „Despre” pentru a afla mai multe despre organizație
• Un link direct către pagina „Magazin”.
• O pagină „Donație”.
• O nouă pagină „Actualizări”.

Magazinul și paginile de donații fac bani, așa că era esențial să fie incluse în navigarea principală.

Odată ce planul organizațional este complet, este timpul să conectați conținutul real.

Pasul 3: Implicați clientul

Harta site-ului include tipuri de pagini, dar nu include maparea conținutului. Designerii web experimentați știu că majoritatea problemelor apar atunci când un client începe să adauge conținut pe site-ul său. Pentru a evita această problemă, mențineți clientul conectat de la început.

Pentru Archaeology Southwest, am creat un Google Doc care includea harta site-ului și i-am cerut clientului să mapeze conținutul său vechi cu noua structură.

Dacă ceva nu s-a potrivit, am abordat-o mai târziu. Acesta este un pas critic. De ce? Pe lângă implicarea clientului în proces, descoperă probleme cu structura înainte de începerea implementării.

În acest caz, unele dintre elementele din meniul sitemapului au fost modificate și, deoarece clientul avea mai multe pagini de donație, era logic să creeze un tip de postare unic doar pentru asta.

Creați o structură vizuală prin wireframing

În acest pas, încep să dau lucrării o structură vizuală. Pentru ca sistemul să funcționeze bine și să integreze cu succes noțiunea că „totul este legat de locație”, am creat o relație bidirecțională între tipurile de postări.

Iată ideea de bază: atunci când vizitatorii vin pe site-ul web Archaeology Southwest și selectează Marele Canion, vor vedea informații despre acea locație, dar vor găsi și informații legate de proiecte, evenimente, expoziții și tot ceea ce administratorii site-ului marchează ca locație - specific.

Deoarece linkul este bidirecțional, vizitatorii pot ajunge și la Marele Canion vizitând o pagină de proiect. Până la urmă, am ajuns cu asta:

Pagina de index al locațiilor prezintă toate locațiile cu cele mai recente în partea de sus. Bara de căutare este primul lucru pe care utilizatorul îl vede când ajunge la pagină. Harta Google va ocupa aproximativ 80% din ecran. Acest lucru permite utilizatorilor să aleagă puncte de pe hartă și, pe măsură ce derulează sau caută, grila listei va apărea.

Pe o singură pagină de locație, corpul principal este în stânga, deoarece este cea mai importantă informație. Metainformațiile asociate sunt secundare, deci sunt în dreapta. Pentru a obține un aspect bine echilibrat, este esențial să existe o ierarhie distinctă între primul, al doilea și al treilea element bloc. Acest lucru permite ochiului să se miște fără efort între secțiuni.

În aspectul Arheologie Sud-Vest, ochiul utilizatorului începe cu antetul, apoi se mută la blocul de conținut și, în final, urmează în bara laterală din dreapta. Fiecare bucată de conținut asociat este afișată în ordinea relevanței. De exemplu, dacă utilizatorul citește despre Marele Canion, acest conținut va fi probabil urmat de fotografii și o hartă.

Deoarece acesta este în principal un site educațional, este important să aveți opțiunea „Legat de această locație”. Cu toate acestea, nu există mult conținut care este asociat în mod unic cu fiecare locație, așa că am combinat conținut rar folosit (dar înrudit) într-un singur bloc sub corp.

Plasarea revistelor și a videoclipurilor sub conținut similar adaugă elemente vizuale suplimentare și direcționează utilizatorii către pagina „Cumpără”. Pagina este completată prin afișarea locațiilor aferente. Aceasta este o modalitate excelentă de a atrage utilizatorii să exploreze în continuare site-ul. Următorul pas este continuarea acestei structuri pentru alte tipuri de postări.

Oferiți paginii de pornire un obiectiv clar

Cu un model general pentru tipurile de postări, mă pot concentra pe pagina de pornire. Primul pas este să vină cu obiectivul pentru pagina de pornire - aceasta este o parte importantă a designului UI. Cercetarea clientului a arătat că mulți utilizatori dau peste site fără să înțeleagă pe deplin ce este acesta. Prin urmare, o introducere și un text de bun venit trebuie să fie primul lucru pe care îl văd utilizatorii.

Noul focus central se învârte în jurul blocului secundar de locații. Acesta este urmat de tot ce se întâmplă la archaeologysouthwest.org (revista actuală, blog, evenimente, buletin informativ și așa mai departe). Iată o iterație a procesului de aspect:

Cu V1 (stânga), am proiectat un aspect de bază care seamănă cu pagina originală. Nu există prea multă ierarhie. Primul lucru pe care îl văd utilizatorii este locația prezentată, dar de acolo, probabil că se vor pierde în coloane.

Pentru V2 (centru), am creat o coloană separată care este mai ușor de urmărit pentru ochi. Cu toate acestea, încă poate fi îmbunătățit. Aici cunoașterea conținutului joacă un rol major. Știu că Archaeology Southwest nu are niciodată mai mult de două evenimente simultan, așa că nu are sens să avem spațiu pentru mai multe evenimente pe pagina principală.

În V3 (dreapta), m-am concentrat pe evenimentele viitoare. Dacă, dintr-un motiv oarecare, există mai mult de două evenimente, utilizatorul poate face clic pe butonul „Mai multe” și poate vedea restul. De asemenea, pun un accent suplimentar pe revista actuală, deoarece este generatorul de bani al clientului. Utilizatorii încep din partea de sus și își desfășoară drumul în jos într-un model F. Fluxul ochilor este:

Locație recomandată > Bun venit > Revista > Evenimente > Știri

Cu un cadru vizual și structura site-ului la locul lor, este mult mai ușor să consolidați caracteristicile și cum vor funcționa lucrurile. În acest moment, am o altă întâlnire cu clientul pentru a analiza funcționalitatea și fluxul de interacțiune cu utilizatorul, ambele fiind mult mai clare în această etapă.

Vor mai fi revizuiri mai târziu? Da, dar vor fi modificări, nu modificări ale întregului proces. Cel mai important, nu vor fi surprize.

Încorporați Ghidul de stil al mărcii

Acum vine partea interesantă - transformarea wireframes-urilor în ceva ce oamenii vor folosi și experimenta. Pentru acest proiect, mi-am propus să fac conținutul scris ușor de digerat prin implementarea culorilor mărcii și a tipografiei.

Experimentați cu combinații tipografice

Tipografia este parte integrantă a unui design web bun, așa că trebuie să ne dăm seama devreme de schema noastră de tipări. Majoritatea identității Archeology Southwest utilizează fontul Univers Condensed Light și Adobe Caslon. Nu existau reguli pentru momentul în care urma să fie folosit Adobe Caslon, dar am observat că nu era folosit la fel de des ca Univers.

Am efectuat un mic studiu de font pentru a vedea ce perechi creează cea mai bună senzație pentru o organizație nonprofit profesională. Cu toate acestea, nici nu am vrut ca schema mea de tip să arate prea diferită de garanția de marketing a clientului.

După ce am făcut comparații de fonturi, a devenit clar că Adobe Caslon ar trebui să fie fontul de titlu și Univers va fi folosit pentru subtitrări. Setarea titlurilor principale în majuscule de propoziție conferă mărcii o senzație mai personală, în timp ce toate majusculele creează mai mult o atmosferă corporativă.

Polizați aspectul și senzația site-ului web

Mi-am propus să creez o experiență ușoară și deschisă, astfel încât utilizatorii să simtă că Archaeology Southwest este atât abordabil, cât și extrem de competent. Pe baza datelor de analiză, majoritatea vizitatorilor folosesc browsere desktop (probabil pentru că majoritatea oamenilor vizitează site-ul pentru cercetare). Prin urmare, concentrarea mea inițială a fost proiectarea pentru utilizatorii de desktop.

Când veneau de pe computere desktop, am vrut ca vizitatorii să vadă imediat locația prezentată, textul de bun venit și evenimentele viitoare, urmate de o parte a titlului revistei. În acest fel, oamenii văd mai întâi despre ce este compania și ce promovează.

Pe dispozitivele mobile, prioritățile sunt puțin diferite. Deoarece utilizatorii accesează informații din mers, evenimentele sunt mai importante, așa că sunt plasate mai sus pe listă.

De asemenea, am actualizat butonul de donație din subsol pentru a fi mai prietenos, schimbându-l dintr-un buton într-o propoziție.

Terminare puternică: ține cont de detalii

Există două motive pentru care utilizatorii vin la pagina de detalii — fie că doresc să afle mai multe despre un reper, fie cunosc deja o locație și caută informații suplimentare (indicații de orientare, numere de telefon etc.). Prin urmare, este important să prezentați ambele opțiuni imediat, astfel încât utilizatorii să nu fie nevoiți să caute.

Am decis să despart coloana de detalii din zona de conținut pentru a-i da mai multă greutate și a face pagina mai interesantă. Acest lucru ajută la crearea unei ierarhii compoziționale, astfel încât, atunci când un vizitator vine pe pagină, va vedea mai întâi titlul paginii, urmat de o mică galerie de imagini și apoi de coloana de detalii.

Acest tip de design asigură că utilizatorii vor observa imediat detaliile suplimentare ale unei locații. O mică umplutură suplimentară în jurul coloanei menține ochii concentrați și facilitează scanarea informațiilor.

Vizualizarea mobilă se prăbușește așa cum ne-am aștepta. Conținutul șterge mai întâi și urmează metainformațiile. Am plasat ultimele videoclipuri și reviste pe pagina mobilă, deoarece sunt cele mai puțin importante pentru utilizatorii de dispozitive mobile. Alte pagini urmează aceeași structură pentru a crea un flux și o experiență consistente.

Reproiectarea web este construită pe o bază de planificare atentă

Privind înapoi la procesul de reproiectare a site-ului web, este evident că majoritatea timpului a fost dedicat organizării și planificării. Doar 30% din proiect a fost cheltuit pentru proiectarea site-ului.

Adesea, atunci când designerii își arată munca, ei nu reușesc să transmită cât de mult timp este dedicat elementelor de comunicare, ceea ce îi determină pe designeri fără experiență să sară direct în machete. Rezultatul? Proiecte deraiate și clienți nemulțumiți.

Pentru ca o reproiectare a site-ului web să aibă succes, trebuie făcută o planificare detaliată. Alocarea timpului pentru a efectua cercetări înainte de proiect, familiarizarea cu conținutul existent și implicarea clientului sunt pași cruciali.

În cele din urmă, nu există nicio cale de ocolire; calea către reproiectări uimitoare de site-uri web și încredere profesională este pavată de o abordare metodică a organizării proiectelor.