Mobilappdesignhensyn for webdesignere
Overalt du slår i disse dager, snakker folk om mobilapper . Apper for dette, apper for det.
Statistikken har også vært svimlende. En nylig studie av Flurry, viste at forbrukerne brukte 81 minutter per dag ved hjelp av mobile apps, sammenlignet med 74 minutter med nettsurfing.
Ettersom flere mennesker begynner å bruke tid på apper sammenlignet med Internett, kan du lure på om mobilappdesign er et område du bør begynne å utforske og hvor overførbare dine webdesignevner er.
I dette innlegget sjekket vi inn med en rekke eksperter på feltet for å få sine perspektiver. Sammen med oss er Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark og JD Biersdorfer.
Robin Nixon
Robin Nixon er teknisk forfatter og nettutvikler, og er forfatter av den nye boken HTML5 for iOS og Android: En nybegynners guide .
Hva slags råd vil du gi til webdesignere som tenker på å komme inn i området for mobilappdesign og utvikling?
Etter min mening er den raskeste måten å komme inn i apputvikling, å sikre at du er oppdatert med de nyeste HTML-versjonene (versjon 5) og CSS (versjon 3), og er like flytende som mulig med JavaScript, fordi ganske snart Det er sannsynlig at det vil være løsninger for å skrive en enkelt webapp som kan omdannes til innfødte apps for alle iOS, Android, Web OS, Windows Phone og mer. Dette vil spare deg for å lære flere komplekse språk og utviklingsmiljøer som Java, Objective C, .NET og så videre, og tiden som kreves for å sende et prosjekt til flere forskjellige enheter.
For eksempel, med en solid jording i HTML, CSS og JavaScript, kan du enkelt sette sammen store nettapps som du også kan konvertere til frittstående apper ved å bruke informasjonen i boken HTML5 for iOS og Android, eller det finnes produkter tilgjengelig på Internett til Hjelp strømlinjeforme prosessen.
Med Microsoft som nå sier at Windows 8-apper vil bli opprettet i HTML og JavaScript, er det enda mer grunn til å sikre at du har sterk kunnskap om disse teknologiene, særlig siden Microsoft er kjent for å bevege seg mot konseptet med et enkeltbrukergrensesnitt innen 2015 (ligner på den som ses nå i Windows Phone 7 - og spesielt den kommende Mango-oppdateringen).
Hvor overførbare er nettferdigheter?
Web ferdigheter er svært overførbare mot app utvikling, hvis du bruker de tre teknologiene av HTML, CSS og JavaScript for å bygge dem. Men hvis du planlegger å ta den innfødte ruten og skrive appene dine i mål C (for iOS) eller Java (for Android), trenger du mer programmeringsbakgrunn enn en webutvikling en, og det er en ganske bratt læringskurve for hver .
Heldigvis, for de aller fleste apper, er det mulig å bruke webteknologier for å oppnå lignende resultater for å skrive inn kode. Det er bare når du kommer til tidskritiske funksjoner, som for eksempel de høye rammebetingelsene i hurtige action-spill, at du må gå tilbake til morsmålet til en enhet eller et operativsystem.
Etter din mening, hvilke app (er) tror du er gode eksempler på en godt designet app?
Jeg liker egentlig ikke å nevne noen spesielle apps som representerer god design siden det er så mange av dem, men siden du spurte spørsmålet, utvilsomt er en fremragende app Theodore Grey s Elementene , som er en interaktiv 3D-utforskning av alle elementene, der du nesten kan tenke deg å berøre dem fordi du kan rotere hver prøve, flytte dem om med fingertipsene dine, og til og med se dem i 3D. For meg er dette et eksempel på hvor en eBok (som er dette egentlig er) blir langt mer enn en enkel bok til eBook oversettelse (som de fleste andre eBooks er), og tar bøker til et helt nytt nivå.
Elementene
Hvordan ser du denne gangen i webdesign?
Robin Nixon: Jeg tror at akkurat nå er den mest spennende tiden for programmerere og utviklere siden tidlig på 1980-tallet, da mikrodatamaskiner først blomstret. Når PC-en tok computertronen, ga bare Macs og Linux-operativsystemet noen ekte konkurranse (og dyrebar lite på det). Men nå er operativsystemets kriger på igjen, denne gangen drevet av eksponentiell opptak av mobile enheter som telefoner og tabletter, og fenomenal nedlasting av apper for dem, noe som betyr at det er en verden av muligheter der ute. Etter min mening, "det er gull i dem bakker."
Aaron Maxwell
Aaron Maxwell er grunnlegger av Mobile Web Up, a mobil webdesign byrå.
Hva bør webdesignere tenke på når de går ut på området med webapplikasjoner?
Mange av de samme konseptene gjelder fortsatt. Som designer, tenk på hvilke handlinger du vil at brukeren skal kunne ta - hvilke opplevelser du vil at de skal kunne ha. Dette fokuset er ofte det beste stedet å starte.
Menyer er mest effektive når de ikke overvelder med for mange valg. Organiser inn i en hierarkisk, drill-down struktur, med ikke mer enn et dusin valg på hvert nivå. Vurdere om bruk av en flippingsnavigasjon vil hjelpe brukeren raskt å ta de forskjellige handlingene de trenger.
Spacing av elementer er vanskelig på mobilen. Ekstra polstring er en veldig nyttig teknikk på skrivebordet for semantisk gruppering; Du kan legge sammen en gruppe widgets, bilder eller tekstbokser som er relaterte, og skille dem fra en annen gruppe bare ved å separere vertikalt og horisontalt mellomrom.
Men på en mobil skjerm har du bare så mye eiendom å jobbe med. Så designeren må være mer økonomisk med hvordan elementene er romlig skilt, polstring med bare noen få piksler i stedet for dusinvis. Dette kan fungere ved å inkludere andre signaler. Avrundede hjørner rundt omkretsen bidrar til å gruppere. Og forskjellige bakgrunnsfarger kan også kommunisere en konverteringskonfigurasjon.
Det du utelater, er minst like viktig som det du legger inn. Tenk på det slik: Alle ting du legger til i innstillingsmenyen, for eksempel, har en kostnad i ekstra kompleksitet, i tid og oppmerksomhet fra brukeren. Vurder nøye om noen funksjon eller element er verdt det, spesielt vurderer de slags høyt distraheringsmiljøer som mobilappene pleier å bli brukt til.
Etter din mening, hvilke apps eksemplifiserer god design?
Det er viktig å studere andre svært vellykkede mobilapper for å finne ut hva som er effektivt. Se på de berømte navnene: Facebook, Skype, uansett Twitter-klienten er mest populær denne uken. Spør venner og familie hvilke apps de bruker mest, og prøv å finne ut hvorfor. (Hint: De kan ikke bevisst vite hvorfor, så spør dem direkte vil ikke hjelpe mye.) Studie Mobil UI-mønstre.
Sarah Lynn
Sarah Lynn er en webdesigner og kreativ og eier av Sarah Lynn Design.
Hvordan foreslår du at designere bør gå om å lære mobilappdesign?
Jeg har funnet noen av de beste måtene å lære å designe for apps, ved å undersøke markedet. Se på noen av appene der ute, analyser funksjonaliteten deres, hvilke elementer de bruker som allerede er en del av telefonens tilbud og hvordan de kan forbedres på for å være enklere å bruke. Undersøk samspillet mellom ulike elementer og hvordan forskjellige apps sammenligner med hverandre. Mange bedrifter har allerede satt seg tid til å gjøre omfattende brukertesting. Lær av det de allerede har utviklet og finne måter å bygge på dem og gjøre dem bedre.
Det er mange flotte bøker der ute for å komme i gang. En jeg anbefaler på det sterkeste er en bok av Suzanne Ginsburg tittel Utforming av iPhone-brukeropplevelsen . Hvis du selvfølgelig er interessert i IOS-markedet. Det snakker om brukertesting og hvordan man planlegger en appdesign. Et flott sted å starte når du ikke er sikker på hvordan du skal gå om prosessen med å designe en app.
Lære å få tilbakemeldinger fra brukerne og tungt planlegge på papir før du går til datamaskinen, er en god ferdighet for enhver appdesigner (eller interaktiv designer generelt). En annen fin måte å lære er å komme i kontakt med en appdesigner som allerede produserer godt arbeid. Be dem om å være mentor og gi deg noen tips de er villige til å tilby. De fleste designere er villige til å tilbringe noen øyeblikk av sin tid hvis du spør pent. Få tilbakemelding fra dine venner og andre designere du kanskje kjenner. Vis dem dine prototyper og få tilbakemelding.
Hvor overførbare er etter din mening webdesign ferdigheter for å designe for apps?
Noe overførbar. Jeg vil si det faller mer i samspillet som en helhet. Som omfatter dem begge.
Det er mange forskjellige ting du må vurdere, på grunn av størrelsen på enhetene, kravene til de forskjellige plattformene, og bare på grunn av måten brukerne kommuniserer med apps i forhold til et nettsted. Mobilbrukerprofiler kan variere ganske mye, fra den typiske mobile brukeren til den mobile brukeren, som bare er for lat til å ta tak i sin bærbare datamaskin, og bruker applikasjonene sine mens de henger rundt huset (selv inkludert.) Så studerer disse mønstre og design for å passe forskjellige livsstil kan være like i en viss grad å designe et nettsted. Uansett hvilket medium du alltid ønsker å designe rundt målgruppen din.
Lære å tenke i et mindre, og ofte ganger mindre fleksibelt format kan være utfordrende. Det samme gjelder for å tenke på landskapet mot vertikal og hvordan du kan tilpasse appen din til jobb på begge måter. Utnyttelse av mobilenhetens innebygde verktøy er en annen grunn til at forskningen er så viktig når det gjelder å designe apper. Det er nesten best å plukke en plattform og lære ins og outs av det, i stedet for å prøve å lære dem alle. Det kan være ganske skremmende og overveldende hvis du prøver å lære alt på en gang.
På samme måte som ethvert nytt medium krever det villighet til å lære og holde seg oppdatert med det raske markedet for å lykkes.
Mike Gualtieri
Mike Gualtieri, er en hovedanalytiker ved Forrester Research og forfatteren av den nye rapporten, Mobile App Design Best Practices .
Hva trenger en designer for apper å være spesielt oppmerksom på når det gjelder å designe en god brukeropplevelse?
Brukerens forventninger er høyere for mobilapper enn de er for nettsteder. Apples iPhone apps brakte design-cachet til mobilapper. Dessuten gir berørings- og gestegenskapene nye måter å interagere med programmer. Det første trinnet for å designe flotte apps er å forstå brukerne bedre enn de forstår seg selv. Tradisjonell kvantitativ og kvalitativ forskning er viktig for å skape personas (fiktive personer som representerer brukerne). Flott design kommer fra fantasi-designer som forestiller seg hva en bruker vil finne nyttig, brukbar og ønskelig i sammenheng med appen.
Spesielt for mobile apps bør designere vurdere de fem dimensjonene av mobil design kontekst: plassering, lokomotiv, umiddelbarhet, intimitet og enhet.
Kilde: Forrester Research, Inc.
Hvilke råd vil du gi til webdesignere tenker på å flytte i denne retningen?
Gjør det. Mobilappdesign for smarttelefoner og nettbrett er en voksende mulighet. Alle trenger flott design. Det er tre baner til mobilapputvikling:
- Native apps. Hvis du har Javascript-ferdigheter, har du noen programmeringsevner. Ikke bli skremt av mål C for iPhone eller Java for Android. Tommel gjennom en bok på enten, og du vil kunne få en rask ide om dette er noe du kan takle. Ikke alle webdesignere vil kunne uten videre opplæring.
- HTML5. Apps
- Hybrid. Er en innfødt applikasjon som gjør HTML5 inne i det.
Alle disse utviklingsveiene krever design.
Josh Clark
Josh Clark er en designer, utvikler og forfatter av Tapworthy: Design Great iPhone Apps og Beste iPhone Apps: Guiden for diskriminerende nedlastere .
Hvilke råd vil du gi til webdesignere som er interessert i å flytte inn app design og utvikling? Hva trenger de å lære?
Når det gjelder den faktiske designteknologien, kan det ikke engang være et behov for å lære mer. Du kan lage noen mektige imponerende appgrensesnitt ved hjelp av våre prøvde og ekte venner HTML, CSS og JavaScript. Jeg snakker ikke bare om tradisjonelle webprogrammer her, men også såkalte "hybrid apps". Dette er apps hvis grensesnitt er utformet med HTML, men leveres som innfødte apps til de ulike appbutikkene. Det er som å distribuere din webapp gjennom appbutikken. For webdesignere er dette en tilgjengelig måte å komme i gang med å designe webapps uten å lære et programmeringsspråk.
Jonathan Stark har skrevet to flotte bøker som gir en oversikt over hvordan man gjør dette ved hjelp av et åpen kildekodeprosjekt kalt PhoneGap, som bunter din webapp til sin egen nettleser som en innfødt app: Bygg iPhone Apps med HTML, CSS og JavaScript og Bygg Android Apps med HTML, CSS og JavaScript .
Her er tingen: Mens du kan gjøre bemerkelsesverdige ting med HTML5 og CSS3, kan disse teknologiene ikke helt samsvarer med polsk og pizazz av Real McCoy apps, programvare bygget med enhetens morsmål. Hvis du vil bygge apps med øyehopping grafikk, animasjoner, innfødte widgets og full tilgang til hele enheten, er du bedre i å gå innfødt. Det betyr at du må kode iPhone apps i Objective-C, Android apps i Java, og så videre. Dette er ikke-spøkende programmeringsspråk, og de kan representere en bratt stigning for webdesignere å lære. Hvis du går den ruten, vil du kanskje ønske å samarbeide med en mer erfaren koder som gjør at designene dine kommer til liv. I mellomtiden kan det eksperimentere med å designe apper med HTML, CSS og Javascript imidlertid være en fin måte å bli kjent med plattformen og til og med bygge raske prototyper for native apps.
Når det gjelder selve prosessprosessen, varierer utformingen av mobile opplevelser på viktige måter fra desktopdesign. De to gotkene for nybegynnere er ergonomi og kontekst.
For berøringsskjerm enheter, har du ærlige til gud ergonomiske problemer å kjempe med. Du designer et grensesnitt for fingre og tommelfinger, og det betyr at du må vurdere problemer med komfort, hvor kommer tommelen din naturlig på skjermen? Mer enn det er det synlighetsproblemer. Når du jobber med et grensesnitt for hånd, skjuler du tydeligvis skjermen. Det betyr at du må designe kontrollene dine slik at de ikke forstyrrer innholdet. Begge disse overvektene - komfort og synlighet - forklare hvorfor de fleste touchscreen-smarttelefoner viser hovedkontrollene og navigasjonen nederst på skjermen. Det er der tommelen kommer til hvile når du bruker telefonen med en hånd, og det betyr også at du kan arbeide kontrollene uten å komme i veien for innholdet. Dette er akkurat det motsatte av det vi er vant til på skrivebordet der primære menyer og kontroller går til toppen av skjermen.
Det andre området som er nytt å vurdere er kontekst. Hvordan og hvor vil folk bruke denne appen? Hvordan påvirker det deres prioriteringer, og funksjonene du bør sette foran og sentrum? Du må være forsiktig her. En myte har utviklet seg at det bare er en slags mobil bruker: skyndte seg, i et rush, distrahert. Det er sikkert tilfelle noen ganger, men ikke hele tiden. Mobile er ikke bare på farten: det er på sofaen, på kjøkkenet, og venter på flyplassen for en forsinket flytur. Alle disse situasjonene er øyeblikk når publikum har stor oppmerksomhet på reservedeler og virkelig kan bruke tid med appen din. Samtidig kan mobile enheter også gjøre mer enn stasjonære datamaskiner fordi de er lastet med alle disse sensorene som effektivt gir dem supermakt: GPS, mikrofon, kamera, berøring, gyroskop, kompass. Denne enhetskonteksten former hvordan publikum bruker telefonen og vil forvente å bruke appen din.
Alt dette betyr at du må vurdere hvordan enhetskonteksten påvirker brukerprioriteringer, og disse prioritetene vil sannsynligvis være forskjellig fra skrivebordsprioriteter. Men det er en vanskelig vri på dette: Du kan ikke forveksle denne konteksten med brukerens hensikt. Det er et vanlig instinkt å oversimplisere mobilapper, for å gjøre dem til skrivebordslitteratur. Det er feil. Vi gjør alt på våre telefoner i disse dager, og hver gang du sier, "Folk vil ikke gjøre det på mobilen", har du feil. Vi har alle hatt den erfaringen hvor du går til et nettsted på smarttelefonen din, og du støter på den mobile versjonen av nettstedet, der de har fjernet nøyaktig den funksjonen eller innholdet du leter etter. Bare fordi du er på en liten skjerm betyr det sjelden at du vil gjøre mindre. Det er som å si at bare fordi en paperback-bok er mindre, bør vi fjerne kapitler. Ikke bland innholdet i innholdet med hensikt.
Det jeg sier er at jeg tror at mobilapplikasjoner og nettsteder i de fleste tilfeller skal ha tematisk liknende innhold og funksjoner til sine desktopfettere. Presentasjonen og prioriteten kan meget vel endres for å passe mobile mindsets, men innholdet bør nesten alltid være det samme. Faktisk, i mange tilfeller bør mobilversjonene gjøre mer, fordi enhetene er i stand til mer. Derfor kan Amazons mobilapp gjøre ting som nettstedet ikke kan gjøre: skanningstrekkoder, for eksempel, å slå opp elementer.
For webdesignere betyr dette at du må begynne å tenke mer fleksibelt om hvordan du bygger nettsteder. Vi har gjort det galt i over 15 år, bare å bygge nettsteder for desktop surfing. Det er ikke hva nettverket var designet for. Den ble designet for å være plattformnøytral, som skal vises på en hvilken som helst type skjerm eller enhet. Du vet bare ikke hvordan nettstedet ditt skal sees nå. Det finnes en jillion-enhet alle med forskjellige formfaktorer som kan nå nettstedet ditt nå, og det betyr at det er viktig å bygge nettsteder som kan tilpasses til hvilken som helst enhet. For de fleste av oss er dette en ny måte å tenke på å bygge nettsteder - det handler ikke om å skape et eget mobilnettsted og et eget skrivebordsside. I stedet betyr det å bygge et enkelt nettsted som elegant tilpasser seg hver enhets begrensninger og evner.
Vi er veldig heldige her på planeten jorden at vi bor sammen med universets smarteste fyr om hvordan å designe denne typen lydhør nettside, og han heter Ethan Marcotte. Ethan skrev bare en flott ny bok kalt Responsivt webdesign som beskriver hvordan man skal gå om byggeplasser som tilpasser design og funksjoner for enhver enhet. Han er et geni, og du kan også være et geni ved å lese sin bok. Dette er like viktig for helsen og fremtiden til vårt håndverk som webstandardkampanjen i det siste tiåret. Hver webdesigner bør legge til side noen få timer for å banke tilbake den boken.
JD Biersdorfer
JD Biersdorfer er en teknologi journalist og forfatter av flere bøker på gadgets inkludert Beste iPhone Apps .
Etter din mening, hva gir en godt designet app og god brukeropplevelse?
Etter å ha sett på 400-500 apper for boken, Best iPhone Apps, tror jeg at appene som fungerer best er de der brukergrensesnittet er spesielt utformet for den lille telefonskjermen, og ikke programmer som tar skrivebordet tilnærming (med masse ikoner og menyer) og prøv å kramme for mye inn i rommet. En god app er også en stabil app-testet og relativt krasjfri.
Er det noen spesielle apps som kommer til å huske på å være gode designeksempler?
Selv om jeg ikke inkluderte den i boka på den tiden fordi jeg fant det rotete og krasj, har "AccuWeather" redesignet sin iPhone-app til et virkelig flott værprogram med stor, fargerik grafikk og et ganske intuitivt grensesnitt, slik at du ikke gjør det må grave rundt flere skjermer bare for å se hvor varmt det er - og hvor varmt det vil være. De gratis og betalte appene varierer litt i designet, men begge bruker de samme visuelle elementene for å formidle værforholdene raskt.
AccuWeather
Jeg liker også "Kayak" -appen for tingene utviklerne legger inn i tillegg til den vanlige fly-og-hotellet-bestillingsdelen. For eksempel er det en del du kan trykke for å finne ut hvor mye hvert flyselskap koster deg å sjekke poser, en annen for å finne ut hvilke butikker og restauranter som er i flyplassen du sitter fast i, en valutakonverter og til og med en pakke sjekkliste for å gjøre Det er en godt avrundet praktisk reise app som er lett å navigere.
News-wise, tror jeg fortsatt at "BBC News" -appen er flott for overskriftshunder. Appens skapere klarer å finne en lesbar måte å sette på ni topphistorier (med overskrifter og små bilder) på startskjermen, sammen med en Breaking News-banner og en knapp for å trykke slik at du kan høre live streaming BBC Radio. Det er veldig enkelt å redigere kategoriene av nyheter du vil følge, og det er lenker til populære forhåndsinnspilt video og lydklipp du kan streame, som den korte World News Summary-videoen.
Dette innlegget ble brakt til deg med offset hefte utskrift Company, Next Day Flyers.
Hva er dine erfaringer med mobilappdesign? Hvilke apps tror du viser gode designprinsipper og brukergrensesnitt? Gi oss beskjed i kommentarene nedenfor.