Innhold
- Taktisk prototyping
- Skisse
- Mobile maler
- Skisse og hensynsløs redigering
- Visualisere data på en liten skjerm
- Papir prototyping
- Papir prototyping grunnleggende
- Papirprototyping og berøringsskjermer
- Interaktiv prototyping på enheten
- Mobil prototype på skjermen
- Mobil nettleserprototype
- Mobil prototype ved hjelp av presentasjonsprogramvare
- Plattformspesifikk prototype
- Fordeler og ulemper med vanlige verktøy for prototyping på enheten
- Grunnleggende om prototype på skjermen
Dette er et redigert utdrag fra kapittel 6 av The Mobile Frontier: En guide for utforming av mobile opplevelser, utgitt av Rosenfeld Media.
Uansett ”hvorfor” for din spesielle prototype, er det å velge riktig prototypemetode for ditt mobile UX-prosjekt som å velge en god bok. Det er utallige alternativer å velge mellom, så hvordan velger du den rette? I likhet med å spørre deg selv: "Hvilken type bok er jeg i humør for?", Innebærer det første trinnet i å identifisere riktig prototypemetode å spørre: "Hvilken type designutforskning skal jeg begynne på?". I motsetning til å velge riktig lesestoff fra utallige bokgenrer, mobile prototypemetoder har en tendens til å falle i to grunnleggende sjangre: 'taktisk' (som vi vil se på i utdraget nedenfor) og 'opplevelsesmessig' prototyping.
Mens jeg har kategorisert mobil prototyping i de to sjangrene - taktisk og opplevelsesmessig - er det ingenting som hindrer deg i å 'krysse bekker'. For eksempel er det helt greit å bruke en opplevelsesmessig prototypemetode, for eksempel storyboarding, i et mer taktisk prosjekt og omvendt. Imidlertid er det første punktet i den mobile UX-beslutningsprosessen å identifisere arten av prosjektet du tar på deg. Det vil hjelpe deg med å identifisere designprototypemetodene som passer best for prosjektet ditt, og vil sannsynligvis være mest verdifulle for deg når du begynner å designe for mobilmediet.
Taktisk prototyping
De tre taktiske prototypemetodene jeg finner meg selv til gjentatte ganger og som har vist seg å være de mest verdifulle er:
- Skisse
- Papirprototyping
- Interaktiv prototyping på enheten
Skisse
Det er få ting som er mer direkte og effektive enn å kjøre en penn på tvers av papir, og det er det som gjør skisser til en så kraftig designferdighet og prototypemetode. Enten det er på en tavle, oppskriftskort eller bruk av tilpassede plattform-UI-stensiler og skisseputer, er skisser uten tvil min favoritt form for prototyping fordi den er direkte, generativ, billig og
lar deg utforske ideer med lavt engasjement. På grunn av dets generative egenskaper er skisser den perfekte aktiviteten i de forskjellige fasene av ethvert designprosjekt. Jeg bruker skisser for å jobbe meg gjennom tøffe ideer for skjermflyter og layouter, og jeg synes at det er en aktivitet som er best egnet for å kommunisere skjermbaserte opplevelser.
Mobile maler
Kan du ikke tegne? Ikke et problem. De fleste mobile programvareplattformer har sjablonger som kan kjøpes online. Disse sjablongene er livreddere hvis du er selvbevisst om dine skisseevner. For en relativt lav økonomisk investering, kommer de godt med for alle som er interessert i å sette mobile ideer raskt på papir.
Skisse og hensynsløs redigering
Å skissere ideene dine tidlig og ofte er et viktig skritt i å skape intuitive grensesnitt som 'snakker sin makt'. Et intuitivt grensesnitt, for ethvert medium, har lenge vært kjennetegnet på en god brukeropplevelse. Imidlertid gjør de iboende kognitive begrensningene ved mobil design det enda viktigere å lage intuitive grensesnitt. Flotte mobile grensesnitt er som en lysbryter eller en handlekurv. De snakker sin makt.
Brukergrensesnitt som uttaler sin makt har råd som innbyr til utforskning; deres design gir brukerne interaksjonssignaler. Sammenlign forskjellene mellom en webside designet for en PC-opplevelse og en lignende opplevelse skreddersydd for en mobil enhet. Den store skjermen på en PC-opplevelse gir mer plass til å kommentere forventningene. I mobil må alternativene være tydelige. Designelementene må umiddelbart kommunisere til brukeren hvordan de kan omgås dem.
For å skape grensesnitt som sier sin makt, må designere som er nye for mobil, vokse hensynsløse redigeringsevner. Nådeløs redigering handler om å kvitte seg med fremmet tekst, visuelle behandlinger og tøffe overganger. Det handler om å kombinere alle designelementene - skjermdesign, interaksjoner, overganger, strømmer, visuelle behandlinger, haptikk og lyd - for å lede folk gjennom informasjon raskt og intuitivt. Akkurat som en topiar kunstner som beskjærer et tilgrodd tre i form av en elefant, handler nådeløs redigering om å temme kaoset og være i stand til å gjøre kuttene nødvendige for at en visjon skal få form. Nådeløs redigering handler om å ta gode beslutninger. Det handler om å lære å si nei.
Visualisere data på en liten skjerm
Å lære å visualisere data effektivt på en liten mobilskjerm er en viktig mobil ferdighet å mestre. Å tegne på indekskort tidlig i designprosessen er en praksis som gjør at du kan eksperimentere med forskjellige ideer og samtidig gi deg realistiske størrelsesbegrensninger.
Papir prototyping
En papirprototype er i utgangspunktet en papirmodell av skjermbasert produkt eller tjeneste. I likhet med skissering krever papirprototyper en beskjeden tid og liten økonomisk investering, samtidig som du får midler til å jobbe generativt og iterativt med designene dine. Papirprototyping er en flott teknikk for å jobbe gjennom detaljene i skjermflyter og sekvensering, samt validere avgjørelser om skjermoppsett, knappeplasseringer og grove ideer for berøring og gest.
Det jeg liker best med papirprototyper er at de er en håndgripelig måte å teste ut dine interaksjonsideer med brukerne og samle tilbakemeldinger på et tidlig stadium i designprosessen. For designere som er nye for mobil, er prototyper av papir en ideell måte å ta designforutsetningene dine for en prøvekjøring tidlig og ofte - og forhindre at prosjektets slutt føles som en dødsmarsj. En prototype av papir kan gi muligheten for en rask iterasjon av et enkelt konsept eller muligheten til samtidig å jobbe gjennom flere designretninger.
Papir prototyping grunnleggende
Papirprototyper er en fin måte å jobbe gjennom designideene dine tidlig i designprosessen. Trinnene som er beskrevet nedenfor, hjelper deg med å lage papirprototyper uten problemer.
1. Bestem nøkkelinteraksjonene: Sjansen er at det ikke er nødvendig å lage en papirprototype av en komplett mobilapplikasjon eller et nettsted. I stedet vil du sannsynligvis prototype nøkkelinteraksjoner. Det første trinnet i papirprototypeprosessen er å identifisere nøkkelinteraksjonene du vil prototype og de sentrale spørsmålene du vil at prototypen skal svare på.
2. Skisse skjermoppsett: Deretter bestemmer du hvilke typer skjermoppsett som best vil formidle informasjon til brukerne dine. Uansett om du bruker indekskort, spesialiserte papirmaler eller kompiler som er opprettet på en datamaskin, handler dette trinnet om å bestemme hvordan du kan formidle informasjon og intuitivt svinge folk gjennom en serie skjermer for å få dem til den informasjonen de trenger.
3. Bestem skjermflyt / sekvensering: Kartlegg individuelle skjermoppsett og flyt av disse skjermene. Det er prosessen med å identifisere hva som går hvor og hva brukerne vil se når de navigerer gjennom systemet du lager. Denne prosessen vil hjelpe deg med å identifisere primære og sekundære navigasjonselementer og hvordan du effektivt kartlegger det underliggende systemet med nøkkelinteraksjonene.
4. Forbered interaktive elementer: Papirprototyper gjør det mulig å forfalske noe nivå av interaktivitet. Ta gjerne med og opprett elementer som tekstinnføring, tastaturer, varsler, utheving og plukkere i prototypen din. Det vil hjelpe deg med å få en mer nøyaktig følelse av brukeropplevelsen.
5. Ta prototypen din for en prøvekjøring: Når du har opprettet alle elementene, kan du ta prototypen din med på prøvekjøring med kolleger eller venner. Identifiser hva som fungerer og hva som trenger ytterligere forbedring eller modifikasjoner.
Papirprototyping og berøringsskjermer
I nyere tid har moderne smarttelefoner beveget seg vekk fra interaksjoner som er startet av fysiske knapper som firetastetaster og oppringingsplater til fordel for berøringsskjermer og gestbaserte interaksjoner. Dette er en trend som sannsynligvis ikke vil endre seg når som helst snart. Å gjøre overgangen fra GUI, musebaserte interaksjoner til berøringsskjerm / gestbaserte interaksjoner kan utgjøre en uventet og betydelig utfordring for designere som er nye for mobil. Papirprototyping er en flott metode for å jobbe gjennom nøkkelforskjellene mellom NUI og GUI-paradigmer.
Interaktiv prototyping på enheten
Den dag i dag blir jeg fortsatt litt svimmel når jeg ser en tidlig prototype på enheten av mobildesignarbeidet mitt. Det er noe med å se alle elementene - skjermoppsettet, interaksjonen flyter, bevegelsene - kommer sammen som ... vel, det er spennende og litt magisk.En del av den magien kommer av det faktum at med mindre du har noen alvorlige mobilprogrammeringsevner, har det historisk sett vært en utfordring å få designarbeidet ditt på en enhet og oppleve det. Mens det å få en prototype på enheten har sine hindringer, er det betydelige fordeler. Bortsett fra den helt fantastiske følelsen av å se arbeidet ditt på en enhet, gjør prototyper på enheten deg og andre til å kritisk evaluere designbeslutningene dine. Etter hvert som mobil UX blir mer utbredt, vil det sannsynligvis bli lettere å se ditt tidlige designarbeid på en mobil enhet. Inntil da er det noen metoder på enheten du kan prøve:
- Mobil prototype på skjermen
- Mobil nettleserprototype
- Mobil prototype ved hjelp av presentasjonsprogramvare
- Plattformspesifikk prototype
Mobil prototype på skjermen
En prototype på skjermen er i utgangspunktet en papirprototype som blir portet til en mobil enhet ved å snappe bilder av skjermene med enhetens kamera. Å lage en mobil prototype på skjermen innebærer å lage skitser med lav troskap, importere dem til en mobilenhet og se dem gjennom et program som en lysbildefremvisning på kameraet til den mobile enheten.
Mobil nettleserprototype
En nettleserprototype er ganske enkelt en prototype som blir gjengitt ved å bruke nettleseren til mobilenheten din, som bruker HTML og annen nettleserbasert programmering som JavaScript. Skjermbilder kan opprettes ved hjelp av HTML, noe som potensielt er et flott alternativ, spesielt hvis du bygger et mobilnettsted og er dyktig i HTML. Men for de som er mindre kjent med omfattende markeringer, kan du enkelt laste opp en serie sammenkoblede bildekart over skjermoppsett og se dem gjennom telefonens nettleser.
Mobil prototype ved hjelp av presentasjonsprogramvare
Å lage prototyper ved hjelp av presentasjonsprogramvare som Apple Keynote eller Microsoft PowerPoint er en effektiv måte å prototype interaktivitet og overganger på en mobil enhet. Du kan enkelt laste ned plattformkomponenter fra nettet, bygge prototypen din ved hjelp av presentasjonsprogramvaren, finjustere interaksjonene og overgangene som er inkludert i programvaren, og laste ned filen til din mobile enhet.
Mens designere bruker forskjellige typer verktøy for å dokumentere sine trådrammeideer, dukker presentasjonsprogramvare opp som et favorittverktøy i UX-mobilområdet. I tillegg til å spesifisere plassering av designelementer på en skjerm, gjør presentasjonsprogramvare designere i stand til å gjøre sitt arbeid om til lavprioritering på prototypene på enheten. I stedet for flate, statiske dokumenter, tilbyr presentasjonsprogramvare designere muligheten til å eksperimentere med overganger og interaktivitet.
Keynotopia er en fantastisk ressurs for Keynote-prototyper. Nettstedsskaperen, Amir Khella, har satt sammen en virkelig nyttig samling av maler som har en omfattende samling av standardkontroller og widgets. Bare dra disse visuelle elementene på plass for å bygge mock-ups som vil kjøre på en mobil enhet. Travis Isaacs har også skapt en flott online ressurs for å lage prototyper med presentasjonsprogramvare som Keynote. Nettstedet hans, Keynote Kungfu, inneholder store ressurser for å lage prototyper på enheten.
Plattformspesifikk prototype
Hvis du er typen designer som liker å brette opp ermene og komme inn i koden, kan det være veien å gå med å investere i SDK (programvareutviklerpakken) og lage prototypen din ved hjelp av programmeringsspråket til en målplattform. Denne tilnærmingen lar deg lage prototyper ved hjelp av innfødt kode, og mens det er arbeidskrevende, gir det mest interaktivitet av enhver prototypemetode.
Fordeler og ulemper med vanlige verktøy for prototyping på enheten
Selv om det ikke er en liten oppgave å få en interaktiv prototype i gang på en enhet, er det mulig. Tabellen nedenfor skal hjelpe deg med å få en følelse av fordelene og ulempene med vanlige mobile prototypeverktøy, samt hjelpe deg med å bestemme hvilken type prototype som er best gitt prosjektets ressurser.
Grunnleggende om prototype på skjermen
Jeg er en sketcher, ikke en koder, så prototyping på skjermen er min favoritt prototypemetode på enheten. Selv om det ikke er bra å uttrykke detaljert interaktivitet og overganger mellom skjermer, er det en enkel måte å få arbeidet ditt på en enhet raskt. Her er det grunnleggende som beskrevet av Diego Pulido i sin artikkel publisert av UX Magazine:
1. Skisse skjermoppsett:
2. Skann eller fotografer skissene:
3. Gjør eventuelle nødvendige størrelsesjusteringer av filene:
4. Lagre størrelsen på bildene som er endret i et filformat som støttes av mobilenheten. Organiser alle skjermbildene i riktig rekkefølge for scenariet. Vær oppmerksom på sekvenseringen av skjermene og merk filene i samsvar med dette.
5. Importer filene til mobilenhetens fotogalleri:
6. Klikk og sveip bort:
Dette er et redigert utdrag fra kapittel 6 av The Mobile Frontier: En guide for utforming av mobile opplevelser, utgitt av Rosenfeld Media. Bruk rabattkoden NETMAG12, bra for 20% avslag på alle produkter som er kjøpt fra Rosenfeld Media
