Conţinut
- O metodologie receptivă
- Cum păstrez conținutul mai întâi?
- De ce?
- 01. Definiți obiectivele companiei și ale utilizatorilor
- 02. Trimiteți-le la fiecare șansă pe care o aveți
- 03. Nu vă fie teamă să împingeți înapoi
- 04. Împingeți-vă și propria echipă
- 05. Definiți toate nevoile de conținut din față
- Cum abstractizez conținut din prezentare?
- Trebuie să nu ne mai gândim la conținut în ceea ce privește aspectul
- Forțați clienții să își planifice conținutul independent de design
- Finalizați conținutul înainte de proiectare
- Folosiți conținut real - de fiecare dată
- Deci, cum funcționează wireframele pentru proiecte de design receptive?
- Schițare
- Cadrul în browser
- Adnotări
- Folosiți conținut real în wireframes
- Cum proiectez mai întâi pentru ecrane mici?
- Proiecte abstracte de pe dispozitive la început
- Utilizați plăci stil
- Creați o armonie a interfeței
- Vizualizați totul în browser
- Faceți un echilibru cu programele statice
- Concluzie
Să fim clari: designul este soluția numai dacă se concentrează pe problemele mai profunde la îndemână, de ce se află în spatele tuturor. Un proces solid ar trebui să ne ghideze întotdeauna munca, dar trebuie să adoptăm ceva mai flexibil. Mediul nostru s-a dovedit în cele din urmă a fi fluid, deci nu ar trebui procesul nostru? Gândiți-vă la proiectarea sistemului: trebuie să vedeți atât imaginea întreagă, cât și detaliile minuscule. Imposibil? Departe de!
Frank Chimero o spune frumos în cartea sa The Shape of Design: „Există o parte în care artistul se retrage de la șevalet pentru a obține o nouă perspectivă asupra operei. Pictura este o parte egală aproape și departe: când este aproape, artistul lucrează din greu pentru a-și pune amprenta; când este departe, el evaluează lucrarea pentru a-i analiza calitățile. Se dă înapoi pentru a lăsa lucrarea să-i vorbească ”.
Trebuie să ne lăsăm munca, mediul, să ne vorbească. Odată cu creșterea designului receptiv, în sfârșit ne îmbrățișăm mediul așa cum ar fi trebuit să fie: fluid. Este un moment strălucit pentru a face un pas înapoi și a evalua munca, a analiza și a îmbrățișa un nou mod de a face lucrurile, un nou proces. Au trecut vremea machetelor statice și a proiectanților web care nu înțelegeau codul. Este timpul pentru un proces receptiv.
O metodologie receptivă
Vom oferi marele secret pentru un proces solid chiar la începutul acestui articol. Pentru că suntem nebuni așa. Gata? Un proces receptiv este un proces responsabil. Vag? Poate. Prost? Nu. La fel ca mișcarea standardelor web de dinainte, designul receptiv împinge web-ul înainte cu metode viitoare.
Ca orice proces de proiectare, ar trebui să se concentreze asupra „de ce” din spatele tuturor. Deci, de ce există site-uri web? Pentru a livra conținut. Acest lucru ar putea fi bazat pe sarcini, social, informațional ... nu contează. Totul se rezumă la acest lucru: începeți cu motivul, conținut bine structurat și interacțiuni importante.
Iată întrebările pe care le auzim cel mai des despre procesul nostru de proiectare receptivă.
Cum păstrez conținutul mai întâi?
Cu toții suntem atât de optimiști la începutul unui proiect. „Mai întâi conținut!” spunem. „Obiective de utilizator! Amintiți-vă ce este important! ” E adevarat. Dar ce înseamnă? Cum implementați un proces de conținut?
Chiar dacă știți (sau credeți că știți), este ușor să uitați pe măsură ce un proiect progresează. Proiectele pe termen lung au tendința de a continua și continua (și continuă ... și continuă ...). Nu ne mai gândim la de ce și începem să ne concentrăm asupra cum. Ne păcăim pe noi înșine gândind că proiectele noastre pot fi împărțite în faze separate de „descoperire” și „dezvoltare” care pot exista independent.
Adevărul este că trebuie să ne întrebăm tot timpul de ce. Indiferent cât de mult crezi că știi, indiferent cât ai făcut planificarea - de fiecare dată când iei o decizie, de fiecare dată când proiectezi un buton sau scrii un titlu, trebuie să întrebi ...
De ce?
De ce fac asta? Cine este pentru? Ce obiectiv de afaceri îl va ajuta pe clientul meu să-l atingă? Ce nevoie va ajuta utilizatorii să se adreseze? Nu păstrați mai întâi conținutul. Păstrați mai întâi motivul.
Acest lucru îl face să sune ușor. Dar, pentru a o face bine, va trebui să împingeți. Împingeți-vă clienții și echipa pentru a le defini mai întâi de ce. Nu Lorem Ipsum, nu „vom ajunge la asta mai târziu”. Fă-ți tema! Toate modurile dvs. trebuie să înceapă cu un motiv solid. La Yellow Pencil, aceasta a însemnat mari schimbări în modul în care lansăm, estimăm, bugetăm și planificăm proiecte. A trebuit să ne străduim să obținem buget și timp pentru a face cercetări, strategii și planificare solide. S-ar putea și tu. Dar, odată ce clienții și echipele dvs. văd avantajele enorme ale definirii nevoilor de conținut din față, nu vor mai privi niciodată înapoi.
Și este treaba noastră să îi educăm. (Citiți cartea excelentă a lui Mike Monteiro Design is a Job dacă doriți să aflați mai multe despre relațiile cu clienții.) Clienților le este greu să înțeleagă valoarea de a face toate aceste cercetări și să lucreze în față. Și de ce ar trebui? Nu primesc nimic „terminat” la sfârșit - și prea des primesc doar o factură și un document Word mare.
Nu este vina lor - este vina noastră. Este responsabilitatea noastră să facem o treabă mai bună pentru a demonstra această valoare. La fiecare pas al drumului, trebuie să readucem totul la motivul foarte important.
Acest lucru este deosebit de important pentru un design receptiv. Un site web receptiv nu necesită mult mai mult efort de dezvoltare, dar înseamnă mult mai multă planificare. Cu toate acestea, planifică că ar fi trebuit să facem tot timpul. Asistați la actualul ciclu de proiect de reproiectare la fiecare trei ani. Vrei să faci asta în continuare? Sigur nu.
Deci, iată trei pași pentru a păstra conținutul pe primul loc în procesul de proiect.
01. Definiți obiectivele companiei și ale utilizatorilor
Stabiliți o listă prioritară a obiectivelor de afaceri și ale utilizatorilor pentru proiectul dvs. Ce își doresc cel mai mult utilizatorii dvs. să știe sau să facă? Faceți-vă cercetările. Faceți inferențe în cunoștință de cauză, nu presupuneri sălbatice. Convingeți toate părțile interesate să fie de acord.
02. Trimiteți-le la fiecare șansă pe care o aveți
De fiecare dată când luați o decizie, de fiecare dată când cineva propune o nouă caracteristică sau un element de design sau o pagină de conținut, determinați-i să mapeze cererea la un obiectiv de afaceri și utilizator. Ce nevoie reală va îndeplini această caracteristică? Care este motivul real? (Sugestie: „Pentru că vreau” sau „Îmi place foarte mult albastrul” sau „toată lumea este pe Facebook” nu contează.)
03. Nu vă fie teamă să împingeți înapoi
Aceasta poate fi una dificilă. Relațiile cu clienții pot fi delicate și poate fi tentant să renunți la lupta pentru a câștiga războiul. Dar amintiți-vă, suntem cu toții împreună! Nu este afacere vs utilizator; noi vs ei.
Satisfacerea nevoilor utilizatorilor este cel mai bun mod de a satisface nevoile afacerii. Pentru că fără utilizatorii noștri, nu avem o afacere! Clienții (clienții buni) nu te angajează să spui „da” la toate. Deci, dacă clientul dvs. cere ceva care nu își va îndeplini obiectivele sau nevoile utilizatorilor, nu vă fie teamă să-i provocați. Nu este vorba despre ego. Este vorba despre crearea celei mai bune soluții posibile.
04. Împingeți-vă și propria echipă
Aceasta poate fi, de asemenea, o provocare atunci când lucrezi în cadrul unei echipe creative. Separarea rolurilor - designul vizual, experiența utilizatorului, arhitectura informației, strategia de conținut, producția de conținut - poate duce la comunicare greșită. Ne ocupăm, suntem copleșiți de e-mailuri. Este greu să rămâi cu un proiect de la început până la sfârșit, mai ales după ce munca „ta” este terminată.
Relația echipei tale este cel puțin la fel de importantă ca relația cu clientul tău. Trebuie să ne reamintim de ce, la fel ca și clienții noștri. Colaborarea este esențială. Nu poți pur și simplu să „predi” un plan de conținut, sau fireframes sau modele. Pe cât posibil, trebuie să lucrăm mână în mână. Este ușor să „terminați” un produs livrabil și să treceți la altceva. Este mult mai dificil să rămâi cu un proiect când lucrurile devin dificile.
O abordare în cascadă a muncii creative pur și simplu nu funcționează. Munca agilă și colaborativă între membrii echipei asigură rezultate mai bune.
05. Definiți toate nevoile de conținut din față
Iată lucrul: site-urile web receptive durează mai mult timp pentru a planifica. Nu mai planificăm doar un singur context. Planificăm toate contextele despre care știm acum și unele care nu există încă.
Dar este nevoie de mult mai puțin timp pentru a planifica toate acele complexități din față decât pentru a vă întoarce și a modifica funcțiile și funcțiile pe care nu le-ați luat în considerare. Deci, petreceți timpul / efortul / bugetul. Forțează-ți clienții și echipa să-și definească (și să se angajeze!) Tot conținutul lor înainte de a intra în design. Utilizați tabele de pagini. Folosiți conținut structurat. Rezervați-vă conținutul acum! Sau plânge mai târziu.
Cum abstractizez conținut din prezentare?
Auzi multe despre internet-o-sferă. Dar stai, ce? Și așteptați - de ce?
Pentru că prezentarea se poate (și se va) schimba. Modul în care am conceput site-urile web acum 15 ani este aproape de nerecunoscut din modul în care le prezentăm acum. Dar știi ce nu s-a schimbat? Cuvinte. Încă îi folosim. Internetul există în principal pentru conținut (bazat pe text). Îl folosim în continuare pentru rezolvarea problemelor de informare; pentru a îndeplini sarcini. Dar dacă conținutul dvs. depinde de un mijloc de prezentare (pagini introductive Flash, cineva?) Există o probabilitate reală că acesta nu va putea fi utilizat în câțiva ani. Și asta e de rahat.
Trebuie să nu ne mai gândim la conținut în ceea ce privește aspectul
Noi (ca industrie) ne-am instruit clienții să se gândească la conținut în ceea ce privește aspectul. „Puneți-l în bara laterală”, spunem noi. „Asta ar trebui să meargă în subsol.” Stop! Încetează. Stop. Nu este vorba despre locație. Este vorba despre prioritate. Care este conținutul cel mai important pentru utilizatorii dvs.? Pentru că ghici ce: aspectul se schimbă în contexte. (Probabil) nu va exista o bară laterală pe designul dvs. cu ecran mic.
Super-meniul uriaș pe care îl dorește clientul tău? Nu voi zbura pe un iPhone.
Forțați clienții să își planifice conținutul independent de design
Bine, nu trebuie să-i forțezi. Incurajeaza-i. Incurajeaza cu tarie. Tabelele de pagini sunt excelente pentru asta. Dacă nu l-ați citit deja, mergeți imediat la Strategia de conținut pentru web a lui Kristina Halvorson și Melissa Rach pentru mai multe informații despre cum să le creați. Organizați-le în ordine de prioritate. Nu faceți referire la locație sau aspect. Acest lucru vă va ajuta clienții să se gândească la conținutul lor într-un mod mai productiv și, de asemenea, va face procesul de creare a conținutului în mișcare, înainte de finalizarea wireframe-urilor sau a proiectării.
Finalizați conținutul înainte de proiectare
Bine, acest lucru nu este întotdeauna posibil. Dar cu cât mai multă incertitudine puteți elimina înainte de a începe să proiectați, cu atât mai puțin va trebui să vă întoarceți și să schimbați lucrurile mai târziu.
Folosiți conținut real - de fiecare dată
Dacă este posibil, utilizați conținutul de casete marginale - arătați clienților dvs. cele mai complicate pagini, imagini și meniuri. Acest lucru va evita surprizele mai târziu în proces, când își vor vedea conținutul cel mai dezordonat în produsul finit.
Cadrele de sârmă funcționale, în browser, fac diferența. Permiteți clienților dvs. să observe conținutul lor în mișcare și schimbare într-o gamă de dimensiuni de ecran. Indicați-l în timp ce vă prezentați wireframe-urile (faceți prezentări în persoană, nu?) Demonstrați-le cum prioritatea informațiilor lor rămâne aceeași pe dimensiunile ecranului, în timp ce aspectul se schimbă.
Deci, cum funcționează wireframele pentru proiecte de design receptive?
Credem ferm că proiectarea interacțiunii pentru RWD trebuie să intre rapid și des în browser. Este aproape imposibil să creezi un document static care să descrie totul. Sigur, am putea crea un document care să demonstreze trei, patru sau cinci puncte de rupere, dar aceasta este doar o fracțiune din poveste. Dar toate momentele dintre punctele de întrerupere? Asta se întâmplă în browser.
Schițare
Totuși, este bine să puteți schița rapid ideile în colaborare. Acest lucru nu trebuie să se întâmple în niciun mediu anume, dar există doar ceva despre creion pe hârtie. Întregul punct aici este să scoți ideile rapid și iterativ. Ne place să schițăm oricând este posibil și există chiar și o aplicație pentru acest lucru: UI Sketcher.
Cadrul în browser
Iată biletul real pentru noi. Ne place să refolosim tiparele și sistemele atunci când demonstrăm RWD în browser. Desigur, am putea crea propriul nostru sistem de la zero de fiecare dată, dar asta nu ne ajută pe noi sau pe clienții noștri.
De asemenea, ne place să folosim cadre de prototipare cu reacție rapidă, cum ar fi Bootstrap-ul Twitter sau Zurb’s Foundation. Ne aplecăm personal către Fundație pentru că se potrivește fluxului nostru de lucru. Ar fi minunat dacă oricare dintre ele ar adopta o abordare cu ecran mic, cu lățime de bandă mică, dar prima este modul în care rulăm.
Adnotări
Adnotările pentru filele RWD sunt esențiale, dar, aflăm, sunt adesea trecute cu vederea. Spune-l cu voce tare: documentare, documentare, documentare! Am văzut câteva exemple de acest lucru de la prieteni și credem că juriul este în continuare cel mai bun mod de a adnota în mod corespunzător wireframe-uri care răspund în browser. După cum sa menționat mai sus, folosim în mod regulat Foundation by Zurb și ne place să folosim suplimentul Reveal pentru a afișa adnotările noastre. Aceste adnotări apar doar pentru ecrane mai mari și în mod ideal pot fi activate și dezactivate.
Folosiți conținut real în wireframes
A existat o mulțime de dezbateri în jurul Lorem Ipsum în ceea ce privește wireframe-urile și machetele de proiectare, dar dacă nu aveți conținut real în wireframe-urile dvs., o faceți greșit. Conținutul informează deciziile de interacțiune și vă spune când se va sparge un design. Cum poate Lorem Ipsum să facă asta?
Cum proiectez mai întâi pentru ecrane mici?
De ani de zile am proiectat cu o rezoluție specifică în minte. A fost o setare implicită. Fie că schițăm în notebook-uri, căramămuri în OmniGraffle, lucram în Photoshop sau proiectam în browser, știam care va fi dimensiunea pânzei noastre. Acele zile au trecut. Suntem credincioși uriași în proiectarea pentru ecranul mic și îmbunătățim progresiv. Deci, cum își modifică un designer fluxul de lucru de la o dimensiune fixă a pânzei la una fluidă?
Proiecte abstracte de pe dispozitive la început
Cu excepția cazului în care proiectăm pentru un anumit dispozitiv, este esențial să nu ne mai gândim la dispozitive și să începem să ne gândim la experiențe. Toate următoarele tehnici îi ajută pe proiectanți să își construiască experiențele în timp ce pot rămâne agnostici (până la un punct).
Utilizați plăci stil
Folosiți Style Tiles pentru a stabili direcția și a itera rapid. Plăcile de stil permit unui proiectant să stabilească direcția unui sistem de proiectare fără a fi prea specific. Creatorul lor, Samantha Warren, îi descrie astfel:
„Plăcile de stil sunt pentru atunci când un moodboard este prea vag și un comp este prea literal. Plăcile de stil stabilesc o conexiune directă cu elementele de interfață reale, fără a defini aspectul. ”
Creați o armonie a interfeței
Imaginați-vă o pânză cu toate elementele vizuale și interactive reunite. Nu pentru a vedea un anumit aspect al interfeței de utilizare, ci pentru a vedea cum funcționează împreună toate elementele. Aceasta este o pânză de armonie a interfeței. O pânză de armonie a interfeței permite unui designer să păstreze ideile la un loc, dar să nu se concentreze pe nici o dimensiune a ecranului. În plus, este o modalitate excelentă de a comunica eficient și de a documenta elementele proiectate, mai degrabă decât de a produce un ghid complet de stil.
Dacă sunteți interesat să citiți mai departe, două articole excelente despre subiectul armoniei interfeței pot fi găsite aici și aici.
Vizualizați totul în browser
Totul trebuie reunit în browser. Aici prinde viață designul interfeței. Este crucial să vezi cum interacționează conținutul real cu elementele vizuale. Nu există nicio modalitate de a face acest lucru corect într-un mediu static. Trebuie să vedeți cum va răspunde în mediul nativ.
Faceți un echilibru cu programele statice
Există un flux între browser și programele statice, cum ar fi Photoshop. Ar trebui să existe un echilibru care să permită crearea sistemului de proiectare într-un mod fluid și natural. Sigur, acest lucru se va întâmpla în Photoshop, dar un designer care proiectează în mod receptiv trebuie să învețe cum să gândească creativ și în browser.
Concluzie
Încă o dată, cu sentiment: începeți cu motivul, cu un conținut bine structurat și interacțiuni importante. Concentrați-vă mai întâi pe ecranul mic și pe lățimea de bandă scăzută și îmbunătățiți progresiv conceptele de receptivitate. Mediul nostru este major. Avem șansa de a face lucrurile corect și de a schimba lumea, câte un proiect web la un moment dat.
Descoperiți cele mai bune 20 de instrumente de încadrare a firelor pentru designeri
Steve Fisher coordonează cercetarea, analiza, proiectarea și strategia la Yellow Pencil din Canada și vorbește despre subiecte precum RWD, UX și open source. Alaine Mackenzie este strateg de conținut la Yellow Pencil.
