Om Byggnaden Har

0
32

Vi har släppt ett par funktioner som nyligen vid CodePen att jag spelade en roll i. Det fick mig att tänka lite om processen. Det är alltid unika, och för en massa skäl. Låt oss undersöka det.

Vad var den gnista?

Funktioner börja med idéer.

Var det en stor ljus gnista som hände i alla plötsligt? Var det en liten gnista som hände för länge sedan, men har sakta vuxit ljusa?

Dokumentera idéer som kan hjälpa en hel del. Vi pratade om det på CodePen Radio nyligen. Om du faktiskt skriva ner idéer (både för din egen och som efterfrågas av användare), det kan förtydliga och kontextualisera dem.

Dokumentera alla idéer i Begreppet

Det är verktyg (t ex Uservoice) som är specifikt för användaren feedback vägledande funktion utveckling.

Personligen föredrar jag en blandning av en inre produkt vision med uppmätta kundernas önskemål, bor ljus på den offentliga färdplan.

Tillägg av design tillgångar på CodePen, en av de senaste har jag arbetat på, var mer av en långsamt intenifying gnista än en hot-och-snabb en. Det kommer från år av samlade användarnas önskemål. CodePen bör ha en färgväljare. Det skulle vara snyggt, skulle vi tänka. Det bör vara lättare att använda egna teckensnitt. Ja… vi också hoppa runt kopiera kod från Google Fonts hemskt regelbundet.

Då får vi ett mail från Unsplash det var i huvudsak hej, du vet, vi har ett API. Hmmmm. Du gör säkert! Den gnista, som då var gosh alla dessa saker känns riktigt kopplade. De är alla saker som kan hjälpa dig med design. Design tillgångar, som det var.

Vi skulle kanske kunna säga att detta är ett bra recept för att sparka igång en ny funktion: Det verkar som en bra idé. Din instinkt är att göra det. Du själv vill ha det. Du har tillräckligt med forskning för att användarna vill ha det också.

Medan du är där…

Gnistan har tänts. Det känns som en bra idé och bör göras nu. Vad händer nu?

När du arbetar på en ny funktion för ett befintligt projekt, du kan inte låta bli att tänka på där det passar är i de ansökningar som UI och UX. Kanske är det bara formgivaren i mig, men design-led-funktionen utvecklingen verkar verkligen vara vägen att gå. Bestäm först exakt vad det kommer att göra, vara som att använda, och ser ut, för att sedan bygga upp runt det.

Jag är alltid buzzkill när det gäller icke-UI och UX funktioner och förbättringar. Jag försöker att vända Låt oss byta till Postgres i Låt oss hitta en väg, om vi verkligen måste byta till Postgres, att ge något till användare när vi gör det. Men jag avvika.

Jag skulle satsa de flesta av de nya funktionerna är inte vi lägga till ett helt nytt område på webbplatsen. De flesta arbete är att lägga till/ta bort/raffinering mindre bitar för att det som redan finns.

I fallet av den nya designen tillgångar har vi höll på att bygga, det var klart att vi ville lägga till det i våra kod-editorn, eftersom det är där du skulle behöva dem. Vår tendens är i allmänhet låt oss göra en ny modal! Jag är inte anti-modal i en situation som denna. Klicka på en knapp, växla mentala sammanhang för en stund att hitta en design som tillgång, kopiera vad du behöver, så nära det och använda det. Plus att vi redan använder modals en hel del i editorn, så det finns ett inbyggt upp affordance att denna typ av interaktion.

Men en ny modal? Kanske. Vissa saker teckningsoption helt nytt UI. Den minut vi börja fundera på nya UI även om jag alltid anser att en woah det cowboy ögonblick. Inte på grund av att nya UI är svårt, i själva verket, eftersom det är alltför lätt. Jag skulle mycket hellre att förädla det vi redan har, när det är möjligt. Det är där den här funktionen tog oss.

Vi har redan ett medel-funktionen, som tillåter människor att ladda upp filer som är ganska ofta, design tillgångar! Varför inte kombinera dessa två världar? Och detta är den medan du är där… nu. Våra befintliga Tillgångar modal behövde lite kärlek i alla fall. Det är en liknande eftersläpning av idéer för att förbättra det.

Så detta blev en möjlighet att inte bara skapa en ny funktion, men rensa upp i en befintlig feature. Vi konkretiseras funktioner för befintliga tillgångar överföringar som ger enklare UX, som klicka-och-kopiera knappar och action-knappar som du kan använda för att lägga till Url: er som externa resurser, eller pop dem öppna i vår kapitalförvaltning editorn för att göra ändringar.

Cleaing upp går för UI-design-arbete, front-end-kod, och back-end-kod. Säkert CSS, som läsare av denna webbplats vet! Funktioner är en bra ursäkt för storstädning.

Som kan arbeta på det?

Det är en stor fråga att svara på när det kommer till nya funktionen utveckling. Även små grupper (som jag) är indelade i mindre per-funktionen grund.

För att komma fram till svaret till en ny funktion, kan det vara oerhört positiva till en ark som sucker. Ett ark är ett dokument som du konstruera i början av att bygga en ny sak där du kollar in vad som krävs.

Det tvingar dig att inte tänka snävt om vad du är på väg att göra, men i stort sett. På det sättet undviker du situationer där du är som jag kommer att bara lägga till den här lilla kryssrutan över här … 7 månader senare, 2,427 filer rörd … klart!

Ett ark dokument kan vara så här:

  • Översikt. Förklara vad du bygger och varför.
  • Alternativa lösningar. Har du tänkt på flera sätt att närma sig detta?
  • Front-end översikt. Inklusive design, tillgänglighet och prestanda.
  • Back-end-översikt.
  • Data Överväganden. Gör detta tryck på databasen?
  • API och tjänster överväganden.
  • Kundtjänst överväganden. Är det sannolikt att detta kommer att orsaka mer eller mindre stöd?
  • Övervakning, loggning och analytics överväganden.
  • Säkerheten.
  • Testa överväganden.
  • Gemenskapens säkerhet.
  • Kostnadsaspekter.

Om du har gått igenom hela listan på allvar och skrivit upp allt, kommer du att vara i mycket bättre form. Du kommer att veta exakt vad denna nya funktion kommer att vara närmare att uppskatta en tidslinje.

Synnerligen viktigt är att du vet vem du behöver för att arbeta på den.

Denna passage, från Fabricio Teixeira, ringar sant:

Designers har att förstå hur digitala produkter fungerar än ytskiktet, och hur även de allra minsta design beslut kan skapa en krusning effekt på många andra ställen.

Du måste ta med andra discipliner till bord när man börjar tala om en “liten förändring” i din produkt. Det finns en god chans att “mindre designändringar” egentligen inte existerar.

När det kom till vår design tillgångar mini-funktionen, en av de stora anledningarna till att vi kunde hoppa på det var för att, förutsatt att vi begränsat vad det kommer att göra på rätt sätt (se nästa avsnitt), 90%+ av arbetet skulle kunna utföras av en enda front-end-utvecklare/designer. Vem som helst, jag hade mest öppna schema, så att jag kunde ta på den.

Vissa har kanske de flesta funktionerna, krävs mer tvärvetenskapligt team. Stora funktioner, på vårt lilla team, tar oftast bara om alla.

Version En mot Framtiden

Det är mycket troligt att du kommer att omfattningen ner dina idéer till något hanterbart. Det är så frestande att gå jätte med idéer, men ju större du går, desto långsammare går du. Jag är säker på att vi har alla varit i situationer där även små funktioner som tar tre gånger så lång som du förväntar dig av dem.

Jag försöker att vara en kille fastnar saker ur dörren, åtminstone när jag är på en plats där jag vet att refininements och polska är inte önskedrömmar. Jag brukar hitta mer problem med scope creep och förseningar än saker som kommer ut för snabbt.

När det kom till vår design tillgångar har, som jag nämnde, jag ville omfattning det till en nästan front-end-bara-projektet till en början så att det inte kräver en massa av oss att arbeta på det. Det var balanseras med det faktum att det var jag säker på att vi kan göra det ganska bra utan att behöva massor av backend arbete. Jag skulle inte hamstring en funktion bara för att människor tillgänglighet skäl, men ibland stjärnorna anpassa på det sättet.

Färg-picker-en del av design tillgångar modal är ett bra exempel på det. Direkt vi ansåg att någon kanske vill spara sina egna favorit färger som en palett. Kanske på en per-Pen grund eller globala till deras konto. Jag tror att det är en snygg idé, men det kräver en del användare databasen arbete för att förbereda oss för det. Det verkar som en ganska liten sak, men vi skulle definitivt ta vår tid med något som att se till att databasen förändringar abstrakta nog att vi inte bara dunka på en “favorit färger” – kolumnen, men ett system som skulle skala på lämpligt sätt.

Så en enkel färgväljare kan vara “v1”! Inga problem! Få denna sak ur dörren. Se hur folk använder det. Se vad de frågar efter. Sedan förfina den och lägga till det som behövs.

För att vara helt ärlig, det har inte varit en massa feedback på det. Det är oftast en för att vinna kolumn. Människor högt älskade det är säkert bättre, men det är sällsynt. När produkter och göra vad man vill, oftast bara tyst och contentfully gå om sin verksamhet. Men om du får i deras sätt, åtminstone på en viss skala, de kommer att berätta för dig.

Kanske en dag kommer vi att se över utformningen tillgångar området och göra ett v2! Sparade favoriter. Mer bild-sökning. Mer söka i allmänhet. Bättre minne för vad du har använt tidigare och visar dig de saker snabbare. Denna typ av förädling kan kräva ett annat team. Det är också lika tillfredsställande av ett projekt som v1, om inte mer så.

Här är en bättre titt på vad v1 visade sig vara:

Ett annat exempel… CodePen nya Externa Tillgångar

På tal om att förfina en funktion! Låt oss karta här saker till en annan funktion som vi nyligen arbetat på CodePen. Vi bara fräschas hur våra Tillgångar området fungerar. Detta är vad det ut nu:

Det är ganska osannolikt att de flesta människor har ett starkt minne av hur det var innan. Detta är inte så annorlunda. Den stora UI skillnaden är att stora sökrutan. Innan ingångar var sökfält, typeahead stil. Vi är fortfarande med typeahead, men har flyttat det till en sök-rutan, vilket jag tycker är en starkare affordance.

Rör sig där typeahead sker en liten förändring faktiskt, men vi hade massor av bevis för att människor hade ingen aning om vi ens bjuds det på. Använda visual search affordance helt fixar det.

En annan betydande UX förbättring kommer i form av de mindes resurser. När du väljer en resurs, det minns du gjorde, och ger dig en liten knapp för att lägga till det igen. Hej! Det är en hel del som favoriting design tillgångar, är inte det?! Bra att vi inte gör som “favorit färger” databas kolumn eftersom vi redan är att se platser en mer abstrakt system skulle vara användbart.

I detta fall, vi bestämde oss för att spara dem som favoriter i localStorage. Nu får vi experimentera med ett ANVÄNDARGRÄNSSNITT på ett sätt som hanterar favoriter, men ändå inte behöver röra den databas riktigt ännu. Fördelen med att flytta den till den databas som favoriter av något slag kunde följa med en användare i olika webbläsare och träning och grejer utan att oroa dig för att förlora dem. Det är alltid en v3!

Det var också en del bakom kulisserna uppdateringar här, internt, vi är bara så glada över. Att typeahead har? det sökningar som tio-eller hundratusentals av resurser. Det är en hel del data. Innan detta, vi hanterade det genom att inte ladda ner som data förrän du klickar på en typeahead området. Men sen gjorde vi hämta den. En stor del av JSON-vi har lagrade på våra egna servrar. En stor del av JSON som gick ut data regelbundet och som är nödvändiga för oss att uppdatera hela tiden. Vi hade ett system för att uppdatera den, men det krävs fortfarande arbete. Det nya systemet använder CDNjs API för direkt, vilket innebär att ingen stor nedladdning någonsin behov av att ta plats och resurser är alltid uppdaterad. Tja, så uppdaterad som CDNjs är, hur som helst.

På tal om en v3, vi har redan massor av idéer för det. Speed är en lätt oro. Hur kan vi snabba upp sökningen? Hur kan vi tillämpningsområde dessa resultat av popularitet? Hur kan vi slappna av och gissa bättre vad som resurs för dig som letar efter? Förmodligen mest påtagligt, hur kan vi öppna upp detta till resurser på npm? Vi hoppas kunna åtgärda alla dessa saker. Men som tur är, inget av det som hålls upp för att få en bättre sak ut genom dörren nu.

Att Linda Upp

Lite av en vandring va?

Definitivt en del ofullständiga tankar här, men har utveckling har varit på ol’ hjärnan en hel del på sistone och jag ville få ner något. Så många av oss utvecklare leva i denna cykel hela vår karriär. En hel del av oss som har en betydande säga i vad vi bygger och hur vi bygger det. Det är otroligt mycket att tänka på som är relaterade till allt detta, och förmodligen inget uppenbart uppsättning bästa praxis. Det är alltför stor, alltför oklar. Kan du inte hålla den i handen och säga att detta är hur vi gör har utveckling. Men du kan tänka dig riktigt hårt om det, har vissa principer som fungerar för dig, och försöka göra det bästa du kan.