Kuidas Clearleft ehitas Ameerika koodi

Autor: Peter Berry
Loomise Kuupäev: 20 Juuli 2021
Värskenduse Kuupäev: 13 Mai 2024
Anonim
Section 10
Videot: Section 10

Sisu

Bay Area mittetulundusühing Ameerika kood aitab USA valitsuse digiteenuseid muuta ilusaks, lihtsaks ja hõlpsasti kasutatavaks. Selle hiljutine saidi uuendamine, mis viidi läbi koostöös Suurbritannias asuva UX-i agentuuriga Clearleft, tõi samad väärtused ka tema enda veebipõhisele kohalolekule. Clearleftis tegeles visuaalse kujundusega Jon Aizlewood, esiosa ehituse eest hoolitses vabakutseline Anna Debenham, samal ajal kui Jeremy Keith jälgis tööd ja kirjutas JavaScripti. CfA-s tegeles UX-i evangelist Cyd Harrell IA-ga, CTO Mike Migurski viis muudatused ellu ja projekti juhtis vanemturundusjuht Dana Oshiro.

Mis olid projekti eesmärgid?

Mike Migurski: Meie esialgne mandaat oli asendada vana, kreemikas Code for America veebileht millegagi, mis nägi välja moodsam. Alustades projekti kallal töötamist 2013. aasta suvel, tegime kindlaks kolm eesmärki, mis aitaksid projekti paremaks muuta. Esiteks soovitas Cyd Harrelli uurimus meie valitsuse ja geekogukondade motivatsioonide kohta, et peaksime asendama saidi kõnepruugi millegagi, mis on otse publikule kirjutatud.


Teiseks keskendus GOV.UK-i käivitamine uue tähelepanu valitsuse veebisaitide rollile ja me soovisime, et linna- ja maakonnapartnerite nõustamisel saaksime kasutada sisukat kogemust. Lõpuks saime aru, et meil on tohutult palju ebajärjekindla välimusega saidikujundusi mitmesuguste algatuste jaoks, ja soovisime, et tulevaste projektide ehitamisel saaks kasutada paindlike, mobiilseadmetele mõeldud mustrite kogu.

Milliseid UX-i uuringuid te tegite?

Cyd Harrell: Kuna töötasime ka oma üldise kaasamismudeli või osalemise arhitektuuri kallal, tegime veebisaidi ümberkujundamiseks tüüpilisema uurimisstiili. Viisin läbi intervjuusid umbes 40 praeguse, varasema ja tulevase osalejaga meie erinevates programmides. Uurisin inimeste motivatsiooni meiega töötamiseks, nende teed huvist täieliku kaasamise kaudu ja rolli, mida veebisait nende teekonnal mängis.

Kõige huvitavam avastus, mis on suure osa uue veebisaidi kujunduse aluseks, oli äärmiselt suur soov oma ametialaseid oskusi lõplikult kasutada. Avalikud teenistujad ja kommertstehnoloogid on sellest erineval viisil blokeeritud ning Code for America tegevus pakub võimalusi nendest blokkidest mööda minna. Seega sai esmatähtsaks meie veebisaidile orienteerumine, et toetada inimesi tegutsemises ja näha nende tegevuse mõju võimalikult kiiresti. Seda näeme veelgi tugevdatuna, kui me saiti edasi arendame.


Kuidas töö jagunes?

Jeremy Keith: Tavaliselt, kui Clearleft on projektiga seotud, käsitleme asja UX-pooli, visuaalset kujundust ja mõnikord ka frontend-arendust (otsustame tahtlikult mitte backend-arendust teha). See projekt oli veidi erinev: Code for America oli juba läbi teinud suure siseauditi ja töötanud läbi soovitud kasutuskogemuse. See jättis meid tegema visuaalset kujundust ja frontendi arendamist. Töö edenedes lahendati kõik UX-i või teabearhitektuuriga seotud küsimused koostöös.

Kuidas suhtlemisega hakkama saite?

JK: Meil ​​oli iga päev kiire stand-up konverentskõne. Meie jaoks oli kõne päeva lõpus: 17.30. Kell oli 9.30 San Franciscos, just siis, kui inimesed sisenesid Code for America kontorisse. See õnnestus üllatavalt hästi. Kui meil oleks midagi vajaminevat, annaksime neile oma päeva lõpuks teada; siis oleks neil kogu see päev kokku pandud, nii et see ootas meid, kui järgmisel päeval tööle asume. Need Atlandi-ülesed vestlused olid alati toredad ja lühikesed. Need kestsid harva kauem kui 10 või 15 minutit. See oli piisavalt pikk, et kõik saaksid toimuvaga sammu saada. See pideva suhtlemise tase oli just õige: teel ei olnud ootamatuid üllatusi ega „suuri paljastusi”.


Kuidas kohandasite oma protsessi aja- ja eelarvepiirangute haldamiseks?

JK: Tiheda ajakava ja piiratud eelarvega töötamine tähendas, et otsused pidid toimuma kiiresti: meil ei olnud luksust kõike väga üksikasjalikult kaaluda.See tähendas, et ideedest tuli teada anda võimalikult kiiresti. Mõnikord oli see vaid visand paberil. Kui oleks vaja rohkem üksikasju, tuleks mängu Photoshop. Kui see oleks interaktsiooniküsimus, prooviksime mõne töökoodi kiiresti kokku panna.

Lühike ajakava tähendas ka seda, et disain ja arendus pidid toimuma kõrvuti: enne arenduse alustamist polnud lihtsalt piisavalt aega, et oodata, kuni kujundused on täiuslikult välja mõeldud. Ma arvan, et see mõjus positiivselt. Kujundusi uuriti Photoshopis, kuid need viimistleti brauseris.

Jon Aizlewood: Kummalisel kombel olid Brightoni ja San Francisco vahelised üheksa ajavööndit varjatud õnnistuseks. Igapäevased stand-upid võimaldasid meil sel päeval lõpetatud tööd läbi rääkida. Põhimõtteliselt oli iga päev sprint, mille lõpus oli taasesitus, nii et me kujundasime, arendasime ja kordasime iga päev õigeaegselt kell 17.30. See tähendas e-posti tennise puudumist, Basecampi romaanide puudumist ja väga vähest projektijuhtimist, kuna kõik olid täiesti kursis sellega, millega kõik tegelesid. Lisaks Google'i dokumentidele sisu, lehe kirjeldusdiagrammide ja muu jagamiseks otsustasime kasutada Trellot Kanbani stiilis lähenemisviisides Teha, Teha ja Valmis.

Kuidas iseloomustaksite projekti põhiväärtusi?

JA: CfA meeskond lasi osariigi agentuuril juba mõnda bränditööd teha, mis aitas saidi visuaalsele keelele tooni seada. Arendades seda keelt veebi jaoks, viisime läbi põhimõtted, mida CfA organisatsioonina kasutab, ja esindasime neid kasutajaliidese tugeva, julge paleti, suure tüpograafia ja üldise lihtsuse kaudu. Tahtsime, et see sait oleks võimas ja kommunikatiivne, isamaaline ja kõigile CfA liikumisest huvitatutele ligipääsetav.

MM: Kolm väärtust, mis tööd juhtisid, olid avatus, valuuta ja optimism. Idee on selles, et see on ligipääsetav ja tervitatav koht, mis jagab oma salakastet, et sait on ajakohane nii oma sisu kui ka selle tegeliku toimimise osas ning et kodanikud ja valitsused saavad teha koostööd, et asju paremaks muuta.

Tundub, nagu oleksite päris hästi läbi saanud. Kuidas see projekti mõjutas?

JK: Kui Jon on Clearlefti täiskohaga töötaja, on Anna vabakutseline. Kuid selle projekti puhul nõudsin, et ta mitte ainult ei tuleks Clearlefti kontorisse, vaid et ta istuks Joni kõrval. Nad ei tapnud üksteist. Tegelikult arvan, et neil oli väga lõbus. Projekti lõpuks oli Anna meid peaaegu veennud tema vastuolulise lähenemise teenuses, mis on dokumenteeritud saidil teamethod.co.uk. Alati oli tore päeva lõpetada Atlandi-ülese konverentskõnesega meie kolleegidele Code for America'is. Neil kolmel inimesel, kellega me seal suhtlesime, oli absoluutne rõõm töötada.

Anna Debenham: Me olime võrdsetel alustel - Code for America inimesed teavad tõesti oma asju, nii et nad suutsid anda uskumatult kasulikku tagasisidet ja ennetada probleeme. Süsteemi ülesehitamine oli vaid üks osa protsessist. Mis tegelikult määrab projekti edukuse, põhineb sellel, kui lihtne on Code for America'l seda kuude ja aastate jooksul hooldada ja sellele tugineda.

Milliseid tehnoloogiaid kasutasite?

PKr: Meil ​​paluti tarnida CSS-faile, mitte Sassi, kuid kasutasime arendamise käigus ikkagi Sassi, et aidata näiteks px-väärtuste teisendamist remdiks ja värvimuutujate salvestamist. Prototüüpide mallid ehitati Jekylliga ja seda kasutati lõpuks otse saidil, kuna lehed on salvestatud staatiliste HTML-failidena andmebaasi asemel, muutes teiste inimeste jaoks koostöö lihtsaks. Ülesannete haldamiseks kasutasime pigem Trellot kui kraami seinale toppimist, et iga hetk saaks igaüks sisse pista ja näha, mis pooleli on. Jon kasutas kujunduste jaoks Photoshopi. See pani mind palju vanduma, nii et ta ei kasuta enam Photoshopi ja kasutab selle asemel Sketchi.

Seadmete testimiseks ja veaparandamiseks oli Ghostlabist suur abi. Ma saaksin prototüüpi lokaalselt muuta, töölaual brauserit värskendada ja see värskendaks automaatselt kõigi seadmete brausereid. Prototüübi jaoks kasutasime GitHubi alates esimesest päevast ja projekti lõpu poole esitati seal vead. Nüüd asuvad kõik saidifailid, nii et muudatusi on lihtne teha.

Jon kirjeldas seda kui unistuste projektile kõige lähemat asja. Kuidas?

JA: Ma arvan, et see on pideva dialoogi ja avatud ja ausat tagasisidet pakkuva kliendi kombinatsioon - minu jaoks - mis tahes projekti edu nurgakivi. Igapäevased sprindid hoidsid kõike keskendunult ja õigel rajal ning CfA inimesed olid vastuvõtlikud, kiiresti tegutsevad ja teadsid, millest nad räägivad. See ei tee haiget, et nad on lihtsalt väga tore kamp inimesi, kes teevad head tööd hea eesmärgi nimel. Kokkuvõttes oli see ideaalne segu.

PKr: Code for America usaldas meid toimetama ja natuke katsetama - nad olid ideedele väga avatud. Samuti aitas see, et neile meeldisid kõik kujundused ja nad jagasid meie huumorimeelt!

Kuidas koostasite mustrikogu?

PKr: Code for America saatis meile hiljuti koostatud brändistiili juhendi. Samal ajal kui Jon hakkas mallide üle pilkama, valisin selle läbi ja võtsin välja mõned asjad, mida me veebisaidi jaoks vajame: fondid, värvid, ikoonid ja pildid. Kui olime valmis makette koostama, jagasin kujunduse mustriteks - eraldi sisumooduliteks - ning ehitasin kõik need ja katsetasin seda erinevates seadmetes. Igapäevase püsti tõusmise ajal käisime läbi uued mustrid ja vaatasime neid koos brauseris.

See oli tore, sest koodi olemasolu mustri kõrval tähendas mõnikord, et Code for America andis meile tehnilist tagasisidet nii HTML-i kui ka kujunduste kohta. Poole tee peal lisasin seadmete testimise hõlbustamiseks mustrikogule vaate “lapitöö”, et saaksime mustreid kontrollida nende täislaiusel, mitte konteinerisse mähituna.

Miks te raamatukogu jagasite?

PKr: Miks mitte olla tore asi, miks mitte? Lõppude lõpuks, kui teie veebisait on avalik, on CSS ja HTML juba allika vaatamise kaudu saadaval. Raamatukogu pole mitte ainult suurepärane õppevahend teistele, vaid ka selle lisamine GitHubi tähendab, et inimestel on koht, kus soovitada veaparandusi või täiustusi. Samuti on teadmine, et kood jääb nähtavale, hea stiimul paremaks ja läbimõeldumaks hinnakirjutamiseks.

Miks te alfa väljalaske tegite?

MM: Valisime paaril põhjusel alfa väljalaske kuus nädalat enne saidi peamist käivitamist. Esiteks tahtsime olla kindlad, et meie kogukonnal on võimalus uut saiti enne selle asendamist vaadata ja uurida, ning kasutada ära GitHubi sisu, et saata parandusi ja täiendusi. Teiseks seisame organisatsioonina valitsuspartnerite jaoks väledate / lahjade arengumetoodikate taga ja tahtsime seda juttu kõndida. Samuti on üleminekut vähem stressirohke, kui saate seda teatud aja jooksul tükkhaaval käitada. Isegi praegu jääb vana sait kättesaadavaks.

Kuidas sa vanalt saidilt sisu üleviimisega hakkama said?

MM: Sisu ränne oli kõige suurem töö. Hakkasime sõnu liikuma mitu kuud enne visuaalse kujundamise faasi jõudmist, kirjutades ja lihtsustades jaotisi Valitsused ja Kodanikud lehekülgi, et see kajastaks meie põhifookust. Dana Oshiro, Cyd Harrell ja mina pidasime pool tosinat leheküljekutsu, kus kärpisime ja sujuvamaks muutsime sisu, seadistasime ümbersuunamisi ja lõime uusi lehti. Danal on sellel teemal suurepärane ajaveebipostitus ‘Inetu pardipoja testimine’.

Kui Clearlefti töö oli tehtud, oli jaanuarikuu agressiivne tõuke ülejäänud lehtede ülekandmiseks. Dana tegi lõviosa sellest tööst, Cydi ja minu enda käe all tehti palju copy / paste jõupingutusi. See ei olnud glamuurne töö: pidime eemaldama vana saidi stiililehtede jaoks optimeeritud märgistused, kaardistama ümbersuunamised, et olemasolevad lingid ei ebaõnnestuks, pilte ja linke teisaldama ning pidevalt testida linke kahe saidi vahel. Veidi Pythoni koodi aitas testimisel, jagatud arvutustabel aitas meil koordineerida ja tohutu arv HTTP-ümbersuunamisi viis üllatuse 404 minimaalseks. Pärast alfaväljastamist aitas meie kogukond meil lehe sisu probleemide kaudu täiendada ja päringuid esitada.

Kas sellel projektil oli tunnuslaul?

JA: Naljakas, mida peaksite küsima. Seal on see film, kus on nukud, Matt Damon ja palju vandumist. Meie päevad ei saanud alata enne, kui selle konkreetse filmi tunnuslaulu mängiti vähemalt üks kord täies mahus. Ameerika kood, kurat jah!

Rohkem Detaile
Kuidas luua 3D-kujunduse kiireid prototüüpe
Loe Rohkem

Kuidas luua 3D-kujunduse kiireid prototüüpe

Modo uuel Me hFu ioni pi tikprogrammil on intuitiivne puuvaade, mi võimaldab teil vi uali eerida kõiki oma Me hFu ion-objekti võrgu ilmi ja nende loogili i koo toimeid. Kujundu te kiire...
Kuulsad Disney tegelased vahetavad sugusid
Loe Rohkem

Kuulsad Disney tegelased vahetavad sugusid

Kun titudeng TT Brent veedab tõepoole t liiga palju aega tumblrile ja pole pii avalt aega lõpetami ek . Kuid võib-olla pole ee ajaka utu nii ebaproduktiivne, kui e ialgu arvati?Illu tre...
Te ei usu, et need graffiti mudelid on tõelised
Loe Rohkem

Te ei usu, et need graffiti mudelid on tõelised

Oleme näinud tänavakun ti u kumatuid näiteid - in tallat ioonide t graffitini pole meil kunagi puudu tänavapõhi e t in pirat iooni t. Kuid me pole kunagi varem näinud mid...