Innhold
- 1. Prototyping er viktig
- 2. Prototyping på en skosnorring er mulig
- 3. Verktøy for å gjøre jobben din enklere
- 4. Bygg det ut på et rammeverk
- 5. Test dine antagelser
- 6. Få tilbakemelding eller gå hjem
- 7. Overgang til interaktiv og mobil: kjenn vilkårene for engasjement
- 8. Kjenn verktøyet ditt
- 9. Intet produkt er ferdig
- 10. Du er ikke av kroken
I lang tid var webdesign veldig lik utskriftsoppsett. Et nettsted kan være fylt med dynamisk innhold fylt fra en database, men de grunnleggende typografiske systemene i rutenettet styrte måten nettsteder ble designet på. Mye av navigasjonen vår var basert på emulering av fysiske systemer som mappefaner eller sider. Disse konvensjonene tillot oss å lage nettsteder raskt, og vi syntes alle trodde alt fungerte bra - og det var sannsynligvis for det meste.
De siste årene har alt blitt mer interessant, komplisert og interaktivt. Fra relativt små nettstedsdesigner til applikasjoner i flere lag, krever ethvert interaktivt design nå et nytt nivå av rask testing, prototyping og redesign før du bygger og lanserer et solid sluttprodukt. Behovet for en designer å være godt kjent med begrensningene og kreftene til plattformen de designer for har aldri vært viktigere. Dette er nye utfordringer for enhver designer som dykker i vannet i interaksjon, men det er akkurat her ting blir gøy.
1. Prototyping er viktig
Prototyping er ikke et alternativ. Som Hemingway var kjent for å si: "Det første utkastet til noe er dritt." Hvis testing eller prototyping ikke er en formell del av prosessen din, så er det endelige produktet ditt prototypen - og det er sannsynligvis dritt. Tidslinjer og budsjetter kan presse tekstforfattere, IA og prototyping fra måten du må ha. I så fall, finn en måte å skalere alt på, slik at du kan beholde en del testing og prototyping i prosjektet ditt. Din klient, teamet ditt eller investorene dine vil takke deg når avkastningen på investeringen øker.
Muligheten for god avkastning er et resultat av å teste interne, itereere og gjøre nødvendige og smarte endringer på et nettsted eller et produkt før de sendes til publikum. Hvis du ikke prototyper, viser du at du er villig til å la publikum bruke produktet ditt som om det var en prototype - en opplevelse som har potensial til å skade ditt merke og langsiktige mål.
2. Prototyping på en skosnorring er mulig
Budsjett og tid er alltid en begrensning, men hvis du jobber med en skoinnstrenging, har du fremdeles muligheter. En enkel penn- og papirskisse-prototype etterfulgt av en god spørsmåls- og svarperiode vil hjelpe deg å forstå hvordan verktøyet skal utformes for publikum.
3. Verktøy for å gjøre jobben din enklere
Et kraftig allsidig og effektivt verktøy for prototyping er Rapid Prototyping - noe jeg plukket opp fra Dan Rubin. Lag et sett med flate visuelle komposisjoner (JPG eller PNG) av visningene du vil teste. Plasser disse visningene som bakgrunn for kropp> element. Deretter plasserer du ankerlenker med faste høyder og bredder over designens handlingsområder ved hjelp av absolutt posisjonering.
Be en bruker om å fullføre en bestemt oppgave som "Finn en bok, legg den i handlekurven din, så sjekk ut", så se om de gjør det du forventer at de skal gjøre. Den eneste oppførselen noen lenkeområder vil vise er standard markør: peker på :sveve, men det er nok til å hjelpe brukeren med å flytte fra side til side.
Verdien av denne teknikken er at du kan gjøre ekstremt raske endringer i et Photoshop-dokument og eksportere det igjen som en JPG, og like raske endringer til absolutt plasserte lenker i HTML. Det er ganske freaking raskt.
I likhet med Mr Rubins eksempel ovenfor, gir Invision App deg muligheten til å bruke et design av hvilken som helst troskap fra grunnleggende bokser og piler hele veien gjennom ultra-hawt piksel-perfekte oppsett. Appen gir deg et rent og oversiktlig grensesnitt for å laste opp disse visningene, navngi dem, bestille dem og deretter tegne og kartlegge lenker til noen av visningene du har lastet opp. I hovedsak tar InVision den interaktive kodingen av hendene dine og gir deg et organisert rom for å holde oversikt over versjoner av prototyper underveis.
Enkelheten i systemet har vært en stor gevinst for oss på Zaarly, og vi bruker det regelmessig, spesielt når vi prototyper for vår iPhone-app. Det har vært spesielt viktig for oss å prototype for våre mobile plattformer. Samspillet som ligger i en ny type marked krever at vi utforsker hva som er tilgjengelig i iOS-konvensjonene og i noen tilfeller skaper nye interaksjoner. Vi er i stand til å teste og simulere opplevelsene før vi sender produktet til en halv million brukere - noe som gjør at vi kan fortsette å sende ofte, men med stor forsiktighet.
InVision har gratis og betalte kontoer for å matche dine behov, og de er ikke alene på blokken.
4. Bygg det ut på et rammeverk
Hvis verktøyet eller produktet ditt er komplekst og kan tåle å bygges ut mer omfattende, kan du virkelig gjøre mye skade med Sencha Touch, eller jQuery Mobile for håndholdte enheter, eller Twitter Bootstrap på nettet. Dette kan faktisk være gode verktøy for å bygge ut en app bare for å se om den har sving og styrke i samfunnet før du blir gal og lager din egen tilpassede HTML og styling. Et godt eksempel på dette er @ howells 52Network som er en fantastisk bruk av Bootstrap hacket.
5. Test dine antagelser
Få analyse- og hendelseslyttere knyttet til applikasjonen din. Dette lar deg se og teste antagelsene dine og se om brukerne oppfører seg slik du mistenker at de ville, eller om UX-en din trenger justering. Google Analytics er bra, men noe som sporer brukssaker per bruker bedre, vil være bedre. KISSmetrics er et flott verktøystrakt og konverteringssporing i dette området.
Et annet sunt alternativ er å bare sette designene dine foran folk med enkle spørsmål. Et av mine favorittverktøy er VerifyApp fra Zurb.
6. Få tilbakemelding eller gå hjem
Prototyping på alle nivåer er et kraftig tillegg til verktøysettet og ofte et absolutt must når du designer for interaktive nett- og mobilrom. Men prototyping er ikke et mål i seg selv. Vi prototype for å teste. Riktig brukbarhetstesting er en kunst og en vitenskap, men kan også gjøres med litt sunn fornuft.
- Velg folk som ligner publikum.
- Veiled folk løst med å gi dem overordnede oppgaver, ikke spesifikke handlinger på nettstedet.
- Ta omfattende og nyttige notater.
- Revider og test igjen.
7. Overgang til interaktiv og mobil: kjenn vilkårene for engasjement
Som en lang tid webdesigner var det alltid vanlig praksis å skrive min egen frontend-kode, og da prosjektstørrelsene vokste eller kodingen var strengere enn ferdighetssettet mitt kunne imøtekomme, stolte jeg på min kodingskunnskap for å holde jevn kommunikasjon med utviklerne på prosjekt. Dette har alltid vist seg å være nyttig for å holde visjonen om designet intakt til slutten.
Design for mobile nett-, iOS- og Android-plattformer har vært langt mer utfordrende. Hinder for programmeringsspråkene som er nødvendige for å skrive for disse plattformene, er uten tvil betydelig mer komplekse enn HTML / CSS og JavaScript. Det er ikke lenger en rimelig forventning for en designer å være allsidig både i visuell design og kode på dette nivået.
Det er et stort behov for at designeren oversetter arbeidet sitt ved hjelp av språk som er vanlig mellom designer og utvikler. For iOS, for eksempel, betyr dette å forstå nomenklaturen som Apple har lagt ut i deres retningslinjer for menneskelig grensesnitt. Det innebærer også å vite begrensningene og kreftene som er tilgjengelige for plattformen, og hvordan en utvikler sannsynligvis vil ønske å utarbeide en interaksjonsløsning som passer godt innenfor plattformen.
Kommunikasjon blir det viktigste verktøyet i et designer-utvikler forhold. Hvilke ting er enkle å implementere på mobil? Hvilke ting er mye vanskeligere (som for eksempel linjehøyde / ledende i innfødte iOS-visninger)? Nøkkelen her er at utviklingssystemene for iOS eller android er vesentlig forskjellige enn systemene for moderne webdesign.
Til syvende og sist bør begge disse håndverkerne være designinnstilte om de trener det visuelt eller i kode. Dette skaper et bånd som gir gode team og produkter som er verdt saltet.
8. Kjenn verktøyet ditt
Fullskala nett, mobilnett, Android, iPhone, iPad og andre enheter har hver sitt miljø og kultur som påvirker hvordan interaksjonsdesignet skal vurderes. Det er konvensjoner som hver plattform eller enhet har innebygd både programmatisk og kulturelt, som avhenger av internettets hastighet, bærbarhet, berøringsevne, verktøy og spill.
Hvis du prøver å ta på deg interaksjonsdesign, er det ikke en verdig måte å komme inn på å kopiere stilene til andre designers arbeid. Ta deg tid til å undersøke og vite hvordan brukerne bruker verktøyet du designer for, og som jeg har nevnt ovenfor, ikke bare stole på forskning eller intuisjon - test og prototype!
9. Intet produkt er ferdig
Jeg har nylig drevet en liten nettbutikk som produserer arbeid for klienter som hadde budsjett og fremsyn for å betale oss en gang på et prosjekt. Det beste vi kunne gjøre for disse klientene, eller så tenkte jeg den gangen, var å engasjere dem med den beste forskning og pre-lanseringstesting vi kunne få budsjettet for, bruke god designintuisjon, og deretter starte og be om god avkastning .
Når jeg begynner å våge å designe produkter, innser jeg mer hver dag at produktet aldri er komplett. Det er alltid testing som skal gjøres, folk å få tilbakemelding fra, og nye og bedre måter å prototype og design på.
Hvis du ikke er i et produktteam, er det fortsatt måter å engasjere kundene dine med disse verktøyene. Vurder å ta en testplan med kundene dine hver tredje måned i ett år etter lanseringen. Sett spesifikke mål med kundene dine, og hjelp deretter til å tilpasse nettstedet eller produktet for å oppnå disse målene og forbedre avkastningen. Gitt muligheten til å øke inntektene, kan jeg ikke tenke på en klient som ikke vil vurdere det.
10. Du er ikke av kroken
Hvis du går bort fra denne tanken om at nettstedene dine ikke krever prototyping eller en strengere forståelse av plattformene du designer for, tar du feil. Verden av innhold på nettet blir allsidig. Det vil være mobil, nettbrett og dynamisk gratis og interaktivt innhold som vinner ut på det statiske nettstedet.
