Redaktørens merknad: Lubos Volkov er en erfaren designer som har jobbet eksternt med mange utviklere gjennom hele karrieren. Som produktdesigner hos ApeeScape samhandler Lubos daglig med teammedlemmer fra en rekke avdelinger, inkludert ingeniørfag, samfunn og innhold. Han er en talentfull designer hvis kommunikasjonsevner bidrar til hans suksess. I denne opplæringen deler Lubos sine erfaringer og måter å optimalisere designer-utvikler UI og UX arbeidsflyter som fører til kvalitetsprodukter levert innen, eller før fristen.

Arbeider med en flott designer eller designteam kan være en uvurderlig ressurs for ethvert team. Med klare kommunikasjonskanaler og frittflytende samarbeid, skal designeren gi deg alt du trenger for å få fart på byggeprosessen og begrense spørsmål og forvirring så mye som mulig.

Hva kan du, den UX-utvikler , gjøre for å sikre at produktet du har bygget blir levert i tide uten å ofre kvaliteten på brukergrensesnittet og brukeropplevelsen?

Mitt svar: Få designerne dine med fra dag én , og hold dem involvert gjennom hele UI / UX-utviklingsprosessen. Sørg for å etablere tydelige kommunikasjonslinjer og konsekvent meldingstjenester mellom utviklere og designere.

Har du alt du trenger?

Det verste som kan skje under implementeringen av ethvert brukergrensesnitt er __mangel på kommunikasjon mellom designeren og utvikleren __ (med mindre de er samme person) . Noen designere tror jobben deres er ferdig når PSD er sendt over. Men det er bare feil! Du må opprette en alltid pågående kommunikasjonsarbeidsflyt som varer utover levering av PSD-ene.

Prosjekter der designeren bare sender designfilene og utvikleren bare implementerer dem, er prosjektene som bare mislykkes.

I mange tilfeller vil det ta tid før designerne ser den faktiske UI / UX-designimplementeringen. Til deres overraskelse er bygningen ofte helt annerledes enn den første innsendingen. (Dette skjedde med meg mer enn en gang. Jeg har sendt over kildefiler med komplette beskrivelser og interaksjonsprototyper, men da jeg endelig så prosjektet, måneder senere, hadde det et annet oppsett, forskjellige farger og ingen interaksjoner på plass.)

Noen designere hater meg kanskje for dette, siden denne arbeidsflyten krever mye “ekstra” arbeid på deres side. Imidlertid er det bedre å lage og levere hele eiendeler og informasjon på en organisert måte for prosjektet og teamet som helhet.

Hvis en utvikler har alt de trenger foran seg, vil det øke prosessen. En ren PSD er bare ikke nok.

Hva trenger du for å få jobben gjort effektivt og effektivt?

Dette er eiendelene som en utvikler bør forvente av designeren å ta med seg UI / UX design til implementering:

• Ressursfil - Designeren bør plassere hvert element i appen i en fil. Denne filen skal inneholde knapper, avkrysningsbokser, topptekststiler, skrifter, farger osv. I utgangspunktet, basert på informasjonen i denne filen, skal utvikleren kunne gjenskape ethvert grensesnitt fra bunnen av. Det er mye lettere for en utvikler å eksportere et hvilket som helst element fra en enkelt PSD, enn å søke i flere filer etter det.

• Eiendeler - Forsikre deg om at utviklere får alle nødvendige eiendeler, da kildefiler ikke skal berøres lenger.

• Interaksjonsprototyper - Dager med “statiske skjermer” er for lengst borte. Å bruke smarte interaksjoner og animasjoner for å jevne ut UX-design arbeidsflyt og implementering, er en vanlig praksis nå. Men du kan ikke bare si 'dette vil gli inn fra venstre' til en utvikler. Designeren skal lage den faktiske prototypen for det interaksjonen. Prototypen skal inneholde informasjon som hastighet, hastighet osv., Og designeren forventes å spesifisere hver av disse verdiene.

• Navngivningskonvensjon - Be om en filnavnstruktur for å holde ting organisert. Det vil gjøre det lettere for dere begge å navigere i filer. (Ingen liker å ha ting skjult i en bakgrunnsmappe.)

• HDPI-ressurser - Vi lever i “vanskelige tider”, med den enorme tettheten på skjermene. Sørg for at designeren vil levere bilder i alle nødvendige oppløsninger, slik at applikasjonen din blir sprø overalt. Merk: bruk så mange vektorer som mulig; det kommer til å hjelpe deg mye (svg).

Hvis du finner noe annet som mangler under implementeringen, ikke vær redd; ping designeren og be om det. Hopp aldri over, og skimp aldri! Du er medlemmer i samme team, og din jobb er å levere et best mulig produkt. Hvis en designer mislykkes, mislykkes du også.

Arbeid pågår

Bruk designerne dine under UI / UX-utviklingsprosessen. Ikke hold dem på sidelinjen, og vent at de bare 'skyver pikslene.' En designer ser mulige innovasjoner allerede før implementeringen starter. For å dra nytte av dette, hold dem i løkken. Gi dem tilgang til å se og teste arbeidet som pågår. Jeg er godt klar over at ingen liker å dele uferdige prosjekter. Men det er mye lettere å gjøre endringer midt i en bygning enn på slutten. Dette kan spare deg for tid og forhindre unødvendig arbeid. Når du har gitt designeren en sjanse til å teste prosjektet, ber han ham lage en liste over problemer og løsninger, og foreslå forbedringer.

Hva skal jeg gjøre når en utvikler har en idé som vil endre utseendet til en applikasjon? Diskuter det med designer , og tillat aldri en utvikler å modifisere designet uten å rådføre seg med designeren. Denne arbeidsflyten for design vil sikre at bygningen holder seg på sporet. En flott designer har en grunn for hvert element på skjermen. Å ta ut et stykke, uten å forstå hvorfor det er der, kan ødelegge brukeropplevelsen av produktet.

UI / UX Design Project Management

Designere tror at utviklere kan gi et design liv på en dag, eller til og med på en time. Men som flott design, tar god utvikling tid og krefter. Hold din engstelige designer i sjakk ved å la ham se fremdriften i bygningen. Å bruke ekstern prosjektadministrasjonsprogramvare for å sikre at alle revisjoner blir redegjort for, er en fin måte å sikre at du ikke går glipp av viktig informasjon som er diskutert i en e-postkonversasjon eller en Skype-økt. Og la oss være ærlige: noen ganger kommuniseres ikke endringer og aktiviteter før de skjer.

Uansett hvilken løsning du bruker, vær sikker på at velg en arbeidsflytprosess som hele teamet vil vedta og konsekvent bruke. På teamet vårt prøvde jeg å presse Basecamp fordi det var det jeg brukte, men våre front-end-utviklere trodde det hadde begrensede funksjoner. De brukte allerede annen prosjektledelsesprogramvare for å spore feil, fremgang osv., Som JIRA, GitHub og til og med Evernote. Jeg forsto at prosjektsporing og -administrasjon burde holdes så enkelt som mulig, så jeg overførte arbeidsflyten for UI-design til JIRA. Jeg ville forsikre meg om at de forsto arbeidsflyten og fremgangen min, men jeg ville ikke at de skulle føle at design var en annen ting å administrere.

Her er noen forslag til et prosjektledelsesverktøy:

• Basecamp - Sporer fremdriften for design- og utviklingsrelaterte oppgaver, og lar deg enkelt eksportere oppgaver. Den har også en enkel mobilklient.
• JIRA - En fullt tilpassbar plattform hvor du enkelt kan sette opp tilpassede tavler for forskjellige områder. Organiser for eksempel tavler for å spore aktiviteter som back-end, front-end, design osv. Jeg synes mobilklienten er litt svak, men det er en flott løsning for større team og inkluderer en bug tracking-funksjon.
• E-post - Dette er flott for å sette opp en samtale eller sende bilder. Men vær så snill vær forsiktig hvis du bruker e-post for tilbakemelding. Ting kan lett gå seg vill.

Du kan også prøve Trello og annen programvare for prosjektledelse, men den mest brukte i vår bransje er Basecamp og JIRA. Igjen, det viktigste er å finne et prosjektledelsessystem som alle kan bruke på en jevnlig basis, da det ellers er et vanskelig punkt.

UX-design og utvikling kommer sammen

Designeren og utvikleren er en kraftig kombinasjon. Sørg for å brainstorme UI og UX sammen så ofte som mulig. Utviklere bør være villige til å hjelpe en designer med å tenke ideer, mens en designer skal ha minst grunnleggende kunnskap om teknologien som brukes.

Finn ut arbeidsflyten for design sammen. Ikke bare blindt implementer det designerne dine lager. Vær proaktiv, og lag noe som ser vakkert ut og har en flott brukeropplevelse, ved å dra nytte av de to forskjellige perspektivene dine. Designere tenker utenfor boksen og ser sprø animasjoner, ideer, piksler og knapper, mens utviklere ser teknologien, fartsdumper og begrensninger.

Etter min erfaring er hver designer gal av piksler og interessante konsepter. Men noen ganger kommer en designer til et punkt når de har en idé, men utvikleren skyver tilbake og sier: 'Dette kommer ikke til å fungere bra når den er implementert. Det vil være problemer med ytelsesforbruk ”. Nylig ønsket jeg å implementere et modalvindu med uskarp bakgrunn, men denne uskarpheten forårsaket tunge lastetider. For å løse dette problemet, foreslo utvikleren å bruke et vanlig overlegg i fullfarge, som lastes raskere og beholder bildekvaliteten. Designere, vær oppmerksom: Ikke kompromitter brukeropplevelsen for designet.

Feedback loop

Tilbakemeldinger fra designeren er avgjørende, og det må skje så ofte som mulig. Det er sannsynligvis det mest tid (og energikrevende) du vil gjøre. Men du må adoptere det for å kunne levere perfekte resultater. Her er et par tips om hvordan du kan gjøre tilbakemeldingene dine perfekte.

• Vær visuell - Tilbakemeldinger må være så spesifikke som mulig. Den beste måten å gjøre den nøyaktig er å ta et enkelt skjermbilde og markere et problem du vil fikse. Det ville vært enda bedre hvis du hadde bilder av en nåværende implementering vs hvordan det skal se ut . Visuell kommunikasjon vil eliminere 50% av spørsmålene.

• Vær beskrivende - Tilbakemeldinger skal være nøyaktige. Du kan ikke bare si 'flytt denne knappen opp'. Designeren må spesifisere hvor mange piksler en knapp skal bevege seg, hvilken polstring som skal brukes osv. Alltid inkludere en forklaring på problemet og riktig løsning for det. Det kommer til å ta mye tid, men det er verdt det.

• Vær tålmodig - Husk at designeren og utviklerne ikke har samme fokus. Hvis utviklere ikke helt forstår ideen til en designer, kan det føre til forvirring og dårlige beslutninger. I begge tilfeller må begge sider være tålmodige og villige til å hjelpe de andre teammedlemmene. Noen ganger er det veldig tøft, men det er en myk ferdighet som hver designer og utvikler bør lære.

Det er ganske åpenbart at disse tingene må kombineres for å gjøre dem til en passende arbeidsflyt for design. Men hvilket verktøy kan faktisk hjelpe deg med å gi tilbakemeldingen?

• E-post - Jeg er ikke redd for å si at dette fortsatt er den vanligste plattformen for å levere tilbakemeldingene. Det er helt greit å bruke det, hvis du vil følge noen enkle regler.
  • Bruk først en e-posttråd for tilbakemelding. Ikke legg hver enkelt tilpasning til en ny e-post med et annet emne.
  • For det andre, opprett listen over rettelser. Prøv å sette deg ned og tenke på alle justeringer eller reparasjoner du har lagt merke til.
  • Og til slutt, ikke send enorm liste på en gang. Prøv å bryte det ned til mindre individuelle lister og gå del for del.

• Skype (Hangouts) - Stemme er veldig kraftig verktøy for tilbakemeldingen. Du kan umiddelbart stille og svare på spørsmål. Men pass på å ta notater og sendes over oppfølgingsmeldingen (e-post) etter samtalen.

• Samarbeidsverktøy - For å være ærlig er jeg ikke en stor fan av samarbeidsverktøy. Men de har en stor fordel. De hjelper deg med å holde tilbakemeldinger på plass. Det er raskt å stille og svare på spørsmål, og det blir der for alltid.

Her er noen av de gode verktøyene:

Kommentar om tilbakemelding:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Samarbeidsverktøy:

• http://www.invisionapp.com/
• https://basecamp.com/

Konklusjon

Etablere et arbeidsflyt for UI / UX-design som holder kommunikasjonslinjene åpne gjennom hele design- og utviklingsprosessen. Dette vil tillate deg å implementere gode ideer, forutsi potensielle problemer og prioritere viktige problemer.

Utvikleren og designeren kan lage flotte ting sammen så lenge de er villige til å jobbe som en team . Lær av hverandre og designveiledninger som denne!