Den mobile designprosessen

Hvis du er designer, er de gode nyhetene om mobilplassen dette: design er alt. Enten du bygger et verktøy eller et spill, har utseendet stor innvirkning på både popularitet og brukervennlighet. Roterte eller uorganiserte apps er vanskelig å forstå og vanskelig å bruke. Dette er ikke å si at et "seriøst verktøy" bør være pyntet med en overdrevet GUI. En flott app design er en som vil balansere utseende med funksjon.

Når det gjelder funksjon, er det sikkert noen områder av apputvikling som ikke er "designerens jobb" i seg selv, men har fortsatt stor innvirkning på designen konseptuelt og i applikasjonens kreative retning. Hvis du jobber med en app, og disse jobbene ikke fylles, finner du noen som har disse ferdighetene til å gjøre det, eller prøve. Hopp over disse trinnene kan føre deg til en kostbar revisjonsbane når brukerne finner at appen din mangler funksjonalitet eller har smertefulle designfeil.

Hva er applikasjonens primære oppgave?

Når en ide for en app har blitt generelt scoped ut, er det på tide å begrense programmets funksjonalitet til kjernen i hva appen gjør. De mest populære appene etablerer og vedlikeholder fokus på ONE primære oppgave. For å gjøre dette må du avgjøre hva den primære oppgaven er ved å lage en kortfattet forklaring på programmets hovedformål og dens målte publikum, også kjent som en produktdefinisjonserklæring.

Jeg vet at det høres geeky og ubrukelig, men dette er uttrykket du burde ha takket på veggen din hele tiden du jobber med designet. Det er kjernen i hva appen handler om. Så velg de få funksjonene som vil bli den mest brukte av de fleste brukerne dine og er mest hensiktsmessige for den mobile konteksten. En rask måte å gjøre dette på er å fylle ut disse blankene for programmet du jobber med:

(Din differensiator) (Din løsning) for (Ditt publikum).

Her er et eksempel på iPhone-appen "Bilder":

(Enkel å bruke) (digital fotodeling) for (uformelle iPhone-brukere).

Markedsundersøkelser

Markedsundersøkelser kan høres ut som en annen av de * gjengene * oppgavene, men hopper over dette trinnet er ... dumt. Hvis du ikke vil gjøre det, ansett noen andre som blir begeistret for denne typen arbeid. Ikke fall inn i fellen "Ingen andre har gjort dette", og "denne ideen er helt original" eller "Jeg vil holde ideen ren, beskyttet mot utvendig påvirkning." Hvis du kjøper inn i disse ideene, vil appen din vær perfekt, men bare for deg.

Trinn 1: Forbered deg på å sammenligne

Den beste måten å krysse referanse og dokumentere alle dere, er å lime den inn i et regneark eller tekstbehandlingsdokument. Du kan lage din egen, ELLER jeg har opprettet en på Google Dokumenter du kan bruke: Mobile App Research-regneark. Jeg har lagt inn eksempler som er relevante for appen vi skal jobbe med i denne artikkelen. Bare erstatt disse dataene med din egen! Dette gjør det fint og enkelt å krysse referanse til alle funksjonene, fordelene og teknologien som andre produkter tilbyr.

Trinn 2: Se etter eksisterende løsninger

Jeg sier "eksisterende løsninger" i stedet for "konkurranse" fordi ikke alle relaterte produkter vil konkurrere i mobilmarkedet. Noen kan være webapplikasjoner, stasjonære programmer eller til og med offline kilder i samme felt av interesse. Den beste måten å finne eksisterende produkter på, er å søke på alle forskjellige søkeord relatert til søknaden din på:

  • Google
    • begrense søket til "blogger" og "nyheter" for å få virkelig nye resultater
  • iTunes App Store
  • Android Marketplace

Trinn 3: Avdekke tekniske begrensninger

Under markedsundersøkelser være forberedt på å avdekke tekniske begrensninger du ikke hadde forventet. Som designer kan du si, "Hvem bryr seg? Det er utviklerens jobb! "Kanskje det, men du ville bli overrasket over hvor mange tekniske mulighetsdiskusjoner som kommer til å påvirke design! Tro meg, du vil være en del av den diskusjonen.

Eksempler på tekniske begrensninger kan være: Hva om du ville lage en app som vil tillate deg å blokkere anrop fra et bestemt nummer? Uh, iPhone SDK støtter ikke den funksjonaliteten. Alternativt, la oss si at jeg ønsket å lage en app som lar deg finne den nærmeste kaffebaren? Bed bedre om hvor mange treff appen din kan få, fordi Google og Yahoo! Begge begynner lading når du overskrider et visst daglig volum søkeforespørsler i appen din!

Trinn 4: Planlegging for fremtidig funksjonalitet

Dette er veldig viktig. Når du blir motløs ved å lære om alle de tingene som ikke er mulige i dag, gode nyheter - du kan fortsatt planlegge for dem i ditt design! Har den første iPhone et videokamera? Nei, men utviklere som hadde sitt spill, begynte å tenke på muligheter i det området som uunngåelig ville åpne opp i fremtiden.

En annen grunn til å planlegge for fremtidig funksjonalitet er at applikasjonene skal kunne skalere eller vokse. Det samme som nettsteder, apps går ofte gjennom vekstspørter av en eller annen type. Noen ganger betyr det å legge til funksjoner eller innhold, noen ganger betyr det å peeling ting unna! Tenk på hvordan du kan opprettholde en balanse mellom kreativitet og modularitet. Tillater brikker å bli plugget inn og ut lett fra et oppsettsynspunkt, og du vil ha mye mindre hodepine nedover veien!

Målgruppe

Å vite målgruppen din er svært viktig for å definere en designstil, typografi og layout. Appellerer appen til regnskapsførere eller 18-25 år gamle spillere? Å ha denne informasjonen og dykke enda dypere for å utvikle "personas" er viktig for å forstå hva den demografiske ønsker å se, og sammenhengen der de skal bruke appen.

For eksempel er Mike Todd en 18-årig høyskole student i New York City. Dette forteller oss mye mer om Mike. Han er på college, rundt andre studenter, hans alder, de fleste med lignende tidsplaner. Mike vil kanskje ha et spill med 2-spiller interaksjon. Ville vi ha tenkt på 2-spiller interaksjon hvis vi bare kjente Mikes alder? Avhengig av appen, kanskje eller kanskje ikke. Uansett uttrekker personas rikdom til brainstorming og hjelper til med å tegne ut funksjonalitet som er viktig for målgruppen din, og viktig for designen.

Bruk saksscenarier

Når personas er definert, må tegnene plasseres i relevante, sann-til-liv, "mobile" forhold. Hvor er brukerne som bruker appen? Er de til fots, med bil eller tog?
Tre og åtti år gamle Bill kjører til et møte i sentrum av London og ønsker å stoppe for en kopp kaffe. Skal appen kreve at Bill trykker på skjermen flere ganger før han finner sin kaffebar? Absolutt hvis broren din eier en kroppsbutikk! Tenker gjennom ulike forhold brukerne befinner seg i, og ringer inn på scenarier der visse funksjoner gjentar seg, er nøkkelen til å definere hvilke skjermer du skal designe.

Sitemap

Sitemaps for mobil er kritiske for design. For å designe en flyt som er intuitiv, gir forståelsen av innholdet til innhold til annet innhold en måte å designe enkle og brukbare kontroller på. Mobilapp-sitemaps avviger fra nettstedkartkart, da mobilappene ikke skal presentere brukeren på flere måter å komme seg til ett sted. En dør til ett rom: det er det. Mobilbrukere har ikke tid til å gjøre feil feil, deretter gå "tilbake" og prøv å finne den riktige banen.

Wireframing og papir prototyping

Data som samles inn fra bruksscenarier, definerer innholdet og kontrollene som må være tilstede på skjermbildene som er definert i sitemap. Derfra må du designe et foreløpig oppsett som skal stå for hver av disse designelementene. Definer et rutenett og fastslå betydningen av informasjon ved hjelp av farge, form og størrelse på designelementer.

Ergonomisk sett holder brukerne berøringsskjerm mobile enheter på en måte som tommelposisjonen vanligvis peker mot midten av skjermen. Så hvis du vil navigere brukere rundt appen raskt, gi dem kontroller som gjør at de kan bevege seg rundt og holde enheten med bare en hånd!

Også vurdere ulike måter innholdet kan flytte på og av skjermen. For eksempel er mobile ark en fin måte å skjule håndterbare kontroller til brukeren er klar til å bruke dem.
Tenk på hvordan du kan minimere brukerinngang. Hvem vil bli slått ned ved å legge inn en haug med tekst? Gi brukerne et plukketabell slik at de kan velge et valg fra en meny i stedet.

I mobildesign vil papirprototyping spare deg mye tid. I likhet med hvilken som helst design- eller illustrasjonsprosess, kan du ha en iterasjon av designet ditt slik at du kan utforske et større utvalg av designalternativer i en dypere grad. Og med papirprototyping er det mindre "risiko", mindre vedlegg til et papirskrap enn en polert Photoshop-fil. For eksempel kan det være nyttig å jobbe med innleggsnotater for å kunne ordre, legge til eller slette skjermer til strømmen er riktig. Se denne Tumblr-tråden for en fin samling av mobile wireframes.

Opprette endelige filer

Når du har finjustert papirprototyper, er det på tide å bringe disse skissene til livs i Photoshop. Hvis du ikke allerede har det, hoppe tilbake til mitt forrige innlegg på iPhone Design Maler og ta noen få for å komme i gang. I den artikkelen finner du også spesifikasjoner for hvordan du konfigurerer filene dine med riktig størrelse og oppløsning. Hvis du er heldig nok til å jobbe med en utvikler som kan skille ut bilder for deg, vær så snill og organiser filen ved hjelp av mapper.

Konklusjon

Dette er absolutt en forkortet versjon av hvert trinn i den mobile designprosessen, så vær så snill å gi meg en kommentar nedenfor og gi meg beskjed om hvilket område du vil ha for meg å forklare på!

om forfatteren

Jen Gordon er en frilansdesigner som ble hardt mobilt i 2008. Siden da har hun designet dusinvis av grensesnitt for både iPhone og iPad. Når hun ikke er opptatt med å trykke piksler, liker hun å skrive om design og skape eiendeler for andre designere og utviklere å bruke. Nedenfor er en fantastisk iPhone Design Bundle hun har samlet spesielt for MobileTuts lesere!