Mobile App Design Överväganden för webbdesigners
Överallt vänder du i dessa dagar människor pratar om mobilappar . Appar för detta, appar för det.
Statistiken har också varit snuskig. En ny studie av Kastby, visade att konsumenter spenderade 81 minuter per dag med mobila appar, jämfört med 74 minuter med websurfning.
Eftersom fler människor börjar spendera tid på apps jämfört med Internet kanske du undrar om mobilappdesign är ett område du bör börja utforska och hur överförbara dina webbdesign färdigheter är.
I det här inlägget checkade vi in med ett antal experter på området för att få sina perspektiv. Förena oss är Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark och JD Biersdorfer.
Robin Nixon
Robin Nixon är en teknisk författare och webbutvecklare, och är författare till den nya boken HTML5 för iOS och Android: En nybörjarguide .
s Vilka råd skulle du ge till webbdesigners som tänker komma in i området för mobilappdesign och utveckling?
Enligt min åsikt är det snabbaste sättet att komma till apputveckling att se till att du är uppdaterad med de senaste HTML-versionerna (version 5) och CSS (version 3), och är så flytande som möjligt med JavaScript, för ganska snart Det är troligt att det kommer att finnas lösningar för att skriva en enda webbapp som kan omvandlas till inhemska appar för alla iOS, Android, Web OS, Windows Phone och mer. Detta sparar dig från att behöva lära dig flera komplexa språk och utvecklingsmiljöer som Java, Objective C, .NET och så vidare och den tid som krävs för att porta ett projekt till flera olika enheter.
Till exempel, med en solid grundning i HTML, CSS och JavaScript, kan du enkelt montera stora webbapps som du också kan göra till fristående appar med hjälp av informationen i min bok HTML5 för iOS och Android, eller det finns produkter tillgängliga på Internet för att hjälp för att effektivisera processen.
Med Microsoft som nu anger att Windows 8-appar kommer att skapas i HTML och JavaScript finns det ännu mer anledning att se till att du har stark kunskap om dessa tekniker, särskilt eftersom Microsoft är känt att gå mot begreppet ett användargränssnitt senast 2015 (liknande den som ses nu i Windows Phone 7 - och speciellt den kommande Mango-uppdateringen).
Hur överförbar är webbkunskaper?
Webkunskaper är mycket överförbara mot apputveckling, om du använder de tre teknikerna HTML, CSS och JavaScript för att bygga dem. Men om du planerar att ta in den ursprungliga rutten och skriva dina appar i mål C (för iOS) eller Java (för Android), behöver du mer av en programmeringsbakgrund än en webbutveckling, och det finns en ganska brant inlärningskurva för varje .
Lyckligtvis är det för de allra flesta applikationer möjligt att använda webbteknologi för att uppnå liknande resultat för att skriva inkomstkod. Det är bara när du kommer till tidskritiska funktioner, till exempel höga ramhastighetskraven för snabba actionspel, som du måste återgå till modersmål i en enhet eller ett operativsystem.
Enligt din åsikt, vilken app (er) tycker du är bra exempel på en väl utformad app?
Jag gillar inte särskilt några speciella appar som representerar bra design eftersom det finns så många av dem, men eftersom du ställde frågan är det utan tvekan en enastående app Theodore Grays Elementen , som är en interaktiv 3D-prospektering av alla element, där du nästan kan tänka dig att röra dem eftersom du kan rotera varje prov, flytta dem med fingertips och till och med se dem i 3D. För mig är detta ett exempel på var en eBook (vilket är vad det här verkligen är) blir mycket mer än en enkel bok till eBook översättning (som de flesta andra e-böcker är), tar böcker på en helt ny nivå.
Elementen
Hur ser du den här tiden i webbdesign?
Robin Nixon: Jag tror att just nu är den mest spännande tiden för programmerare och utvecklare sedan början av 1980-talet, när mikrodatorer först blommade. När PC: n tog datatronan erbjöds bara Macs och Linux operativsystemet någon verklig konkurrens (och dyrbart lite därtill). Men nu är operativsystemet krig igen, den här gången drivs av exponentiell upptagning av mobila enheter som telefoner och surfplattor, och fenomenal nedladdning av appar till dem, vilket innebär att det finns en värld av möjligheter där ute. Enligt min åsikt, "det finns guld i dem kullar."
Aaron Maxwell
Aaron Maxwell är grundare av Mobile Web Up, a mobil webbdesign byrå.
Vad ska webbdesigners tänka på när de går in i området med webbapps?
Många av samma begrepp gäller fortfarande. Tänk på vilka åtgärder du vill att användaren ska kunna ta, vilka erfarenheter du vill att de ska kunna ha. Detta fokus är ofta det bästa stället att börja.
Menyer är mest effektiva när de inte överväldigar med för många val. Organisera till en hierarkisk, borra-ner struktur, med högst ett dussin val på varje nivå. Överväg om du använder en fliknavigering, hjälper användaren att snabbt ta de olika åtgärderna de behöver.
Spacing av element är knepigt på mobilen. Extra padding är en mycket användbar teknik på skrivbordet för semantisk gruppering; Du kan lägga en grupp widgets, bilder eller textrutor tillsammans som är relaterade och skilja dem från en annan grupp bara genom att separera vertikalt och horisontellt utrymme.
Men på en mobil skärm har du bara så mycket fastighet att jobba med. Så designern måste vara mer ekonomisk med hur element är separerade i rymden, vadderar med bara några pixlar i stället för dussintals. Detta kan fungera genom att inkludera andra signaler. Avrundade hörn runt en omkrets hjälper till att gruppera. Och olika bakgrundsfärger kan också kommunicera en förändring av sammanhanget.
Vad du slipper är minst lika viktigt som vad du lägger in. Tänk på det så här: varje objekt du lägger till i inställningsmenyn, till exempel, har en kostnad i komplexitet, i tid och med användarens uppmärksamhet. Noggrant överväga om någon funktion eller element är värt det, särskilt med tanke på de typ av högdistraherande miljöer som mobila appar tenderar att användas.
Vilka apps exemplifierar du enligt din mening bra design?
Det är viktigt att studera andra mycket framgångsrika mobilappar för att hitta vad som är effektivt. Titta på de kända namnen: Facebook, Skype, vilken Twitter-klient som helst är den mest populära i veckan. Fråga vänner och familj vilka appar de använder mest, och försök att räkna ut varför. (Hint: De kanske inte medvetet vet varför, så att fråga dem direkt hjälper inte mycket.) Studie Mobila användargränssnitt.
Sarah Lynn
Sarah Lynn är webbdesigner och kreativ och ägare till Sarah Lynn Design.
Hur föreslår du att designers bör gå om att lära sig mobilappdesign?
Jag har hittat några av de bästa sätten att lära sig att designa för appar, genom att undersöka marknaden. Titta på några av de appar där ute, analysera deras funktionalitet, vilka element de utnyttjar som redan ingår i telefonens erbjudanden och hur de kan förbättras för att vara lättare att använda. Studiera interaktionerna mellan olika element och hur olika appar jämför varandra. Många företag har redan lagt in tid för att göra omfattande användartestning. Lär av vad de har utvecklat redan och hitta sätt att bygga på dem och göra dem bättre.
Det finns många bra böcker där ute för att komma igång. En som jag starkt rekommenderar är en bok av Suzanne Ginsburg med titeln Utforma iPhone Användarupplevelse . Om du självklart är intresserad av IOS-marknaden. Det talar om användartestning och hur man planerar för en appdesign. Ett bra ställe att börja när du är osäker på hur man ska gå om processen med att designa en app.
Att lära sig hur man får feedback från användarna och planerar hårt på papper innan man går till datorn är en stor skicklighet för alla appdesigners (eller interaktivare i allmänhet). Ett annat bra sätt att lära sig är att komma i kontakt med en appdesigner som redan producerar bra jobb. Be dem att vara mentor och ge dig några tips som de är villiga att erbjuda. De flesta designers är villiga att spendera några ögonblick av sin tid om du frågar snyggt. Få feedback från dina vänner och andra designers du kanske vet. Visa dem dina prototyper och få feedback.
Hur är överlåtbara webbdesignskunskaper enligt din åsikt för att designa för appar?
Något överföringsbart. Jag skulle säga att det faller mer inom interaktionsdesign som helhet. Vilket omfattar dem båda.
Det finns många olika saker du måste tänka på, beroende på storleken på enheterna, kraven på de olika plattformarna, och helt enkelt på grund av hur användarna interagerar med appar jämfört med en webbplats. Mobila användarprofiler kan variera ganska, från den typiska mobilanvändaren, till den mobila användaren, som helt enkelt är för lat för att ta tag i sin bärbara dator och använder sina appar samtidigt som de hänger runt huset. mönster och design för att passa olika livsstilar kan vara liknande i en mening att utforma en webbplats. Oavsett vilket medium du alltid vill utforma den runt din målgrupp.
Att lära sig att tänka i ett mindre och ofta mindre flexibelt format kan vara utmanande. Detsamma gäller att tänka på landskapet mot vertikal och hur du kan anpassa din app till jobbet på båda sätten. Använda mobilenhetens inbyggda verktyg är en annan anledning till att undersöka är så viktigt när det gäller att designa appar. Det är nästan bäst att välja en plattform och lära sig ins och outs av det, snarare än att försöka lära dem alla. Det kan vara ganska skrämmande och överväldigande om du försöker lära dig allt på en gång.
Precis som vilket som helst nytt medium, krävs det villighet att lära sig och hålla sig ajour med den snabba marknaden för att bli framgångsrik.
Mike Gualtieri
Mike Gualtieri, är en huvudanalytiker vid Forrester Research och författaren till den nya rapporten, Mobilappdesign bästa praxis .
Vad behöver en formgivare för appar vara uppmärksam på när han utformar en bra användarupplevelse?
Användarens förväntningar är högre för mobilappar än för webbplatser. Apples iPhone apps tog designkaket till mobilappar. Funktionerna för beröring och gest ger också nya sätt att interagera med appar. Det första steget att utforma bra apps är att förstå dina användare bättre än de förstår sig själva. Traditionell kvantitativ och kvalitativ forskning är viktig för att skapa personligheter (fiktiva personer som representerar dina användare). Stor design kommer från fantasi-designer som föreställer vad en användare skulle hitta användbar, användbar och önskvärd i samband med appen.
För mobila appar i synnerhet bör designers överväga de fem dimensionerna av mobil design kontext: plats, lokomotiv, omedelbarhet, intimitet och enhet.
Källa: Forrester Research, Inc.
Vilka råd skulle du ge till webbdesigners att tänka på att flytta i den här riktningen?
Gör det. Mobilappdesign för smartphones och surfplattor är ett växande tillfälle. Alla behöver bra design. Det finns tre vägar till mobilapputveckling:
- Native apps. Om du har Javascript-färdigheter har du lite programmeringsförmåga. Bli inte skrämmad av mål C för iPhone eller Java för Android. Tumma genom en bok på antingen och du kommer att kunna få en snabb uppfattning om det här är något du kan hantera. Inte alla webbdesigners kommer att kunna utan vidare utbildning.
- HTML5. Apps
- Hybrid. Är en inbyggd applikation som gör HTML5 inuti den.
Alla dessa utvecklingsvägar kräver design.
Josh Clark
Josh Clark är en designer, utvecklare och författare till Tapworthy: Design Great iPhone Apps och Bästa iPhone Apps: Guiden för diskriminerande nedladdare .
Vilka råd skulle du ge till webbdesigners som är intresserade av att flytta till appdesign och utveckling? Vad behöver de för att lära sig?
När det gäller den faktiska designtekniken kan det inte ens vara nödvändigt att lära sig mycket mer. Du kan göra några mäktiga imponerande appgränssnitt genom att använda våra provade och sanna vänner HTML, CSS och JavaScript. Jag pratar inte bara om traditionella webbapps här, men också så kallade "hybrid apps". Det här är appar vars gränssnitt är utformade med HTML men levereras som inbyggda appar till de olika appbutikerna. Det är som att distribuera din webbapp genom appbutiken. För webbdesigners är detta ett tillgängligt sätt att komma igång med att designa webbprogram utan att lära sig ett programmeringsspråk.
Jonathan Stark har skrivit två stora böcker som ger en översikt över hur man gör det med ett open source-projekt som heter PhoneGap, som buntar din webbapp till sin egen webbläsare som en inbyggd app: Bygga iPhone Apps med HTML, CSS och JavaScript och Bygg Android Apps med HTML, CSS och JavaScript .
Det här är saken: Medan du kan göra anmärkningsvärda saker med HTML5 och CSS3 kan dessa tekniker inte helt matcha polska och pizazz av Real McCoy apps, programvara som är byggt med enhetens modersmål. Om du vill bygga appar med ögonblicksgrafik, animeringar, inbyggda widgets och full tillgång till hela enheten, är det bättre att du går inbyggd. Det betyder att du måste ange iPhone-appar i Objective-C, Android-appar i Java och så vidare. Det här är inte kidding-runt programmeringsspråk och de kan representera en brant stigning för webbdesigners att lära sig. Om du går den vägen kanske du vill samarbeta med en mer erfaren kodare som hjälper till att göra dina mönster till liv. Under tiden kan dock experimentera med att designa appar med HTML, CSS och Javascript vara ett bra sätt att lära känna plattformen och till och med bygga snabba prototyper för inbyggda appar.
När det gäller själva själva själva designprocessen skiljer sig utformningen av mobila upplevelser på viktiga sätt från skrivbordsdesign. De två gotchasna för nykomlingar är ergonomi och kontext.
För pekskärmsenheter har du ergonomiska problem som är värda till gud. Du utformar ett gränssnitt för fingrar och tummar, och det betyder att du måste överväga problem med comfortwhere kommer din tumme naturligtvis att vila på skärmen? Mer än det finns synlighetsproblem. När du arbetar ett gränssnitt för hand, döljer du uppenbarligen skärmen. Det betyder att du måste designa dina kontroller så att de inte störa innehållet. Båda dessa överväganden - komfort och synlighet - förklara varför de flesta pekskärms smartphones visar sina huvudkontroller och navigering längst ner på skärmen. Det är där din tumme kommer att vila när du använder telefonen med en hand, och det betyder också att du kan arbeta kontrollerna utan att komma i vägen för innehållet. Detta är exakt det motsatta av vad vi brukar på skrivbordet där primära menyer och kontroller går överst på skärmen.
Det andra området som är nytt att tänka på är kontext. Hur och var ska folk använda den här appen? Hur påverkar det deras prioriteringar och de funktioner du borde lägga fram och i centrum? Du måste vara försiktig här. En myt har utvecklats för att det bara finns en typ av mobilanvändare: skyndade, i en rush, distraherad. Det är verkligen fallet ibland, men inte hela tiden. Mobil är inte bara på språng: det är på soffan, i köket, väntar på flygplatsen för ett försenat flyg. Alla dessa situationer är ögonblick när din publik har mycket uppmärksamhet på reservdelar och kan verkligen spendera tid med din app. Samtidigt kan mobila enheter också göra mer än stationära datorer eftersom de är laddade med alla dessa sensorer som effektivt ger dem supermakter: GPS, mikrofon, kamera, beröring, gyroskop, kompass. Denna enhetskontext bildar hur din publik använder sin telefon och förväntar dig att använda din app.
Allt detta innebär att du måste överväga hur enhetskontextet påverkar användarprioriteringarna, och dessa prioriteringar kommer sannolikt att skilja sig från skrivbordsprioriteringar. Men det är en knepig vridning mot detta: du kan inte förväxla det här sammanhanget med användarens avsikt. Det finns en gemensam instinkt för att förenkla mobila appar, för att göra dem skrivbordslitteratur. Det är fel. Vi gör allting på våra telefoner dessa dagar, och varje gång du säger "Folk vill inte göra det på mobilen", har du fel. Vi har alla haft den erfarenheten där du går till en webbplats på din smartphone, och du stöter på den mobila versionen av webbplatsen, där de har tagit bort exakt den funktion eller innehåll du letar efter. Bara för att du är på en liten skärm betyder sällan att du vill göra mindre. Det är som att säga det bara för att en paperback-bok är mindre, borde vi ta bort kapitel. Förvirra inte innehållsinnehållet med avsikt.
Vad jag säger är att jag tror att mobila appar och webbplatser i de flesta fall ska ha tematiskt liknande innehåll och funktioner till sina kusiner. Presentationen och prioriteten kan mycket väl ändras för att passa mobila mindsets, men innehållet ska nästan alltid vara detsamma. Faktum är att mobila versioner i många fall bör göra mer, eftersom enheterna har kapacitet för mer. Därför kan Amazons mobilapp göra saker som webbplatsen inte kan göra: skanning streckkoder, till exempel, att leta upp objekt.
För webbdesigners innebär det att du måste börja tänka mer flexibelt om hur man bygger webbplatser. Vi har gjort det fel i över 15 år, bygga webbplatser bara för skrivbords surfning. Det är inte vad webben designades för. Den var utformad för att vara plattneutral, som ska visas på vilken typ av skärm eller enhet som helst. Du vet bara inte hur din webbplats kommer att ses nu. Det finns en jillion-enhet med alla olika formfaktorer som kan komma åt din webbplats nu, och det betyder att det är viktigt att bygga webbplatser som kan anpassa sig till vilken enhet som helst. För de flesta av oss är det här ett nytt sätt att tänka på att bygga webbplatser - det handlar inte om att skapa en separat mobilwebbplats och en separat skrivbordswebbplats. Istället innebär det att man bygger en enda webbplats som elegant anpassar sig till varje enhetens begränsningar och förmågor.
Vi är mycket lyckliga här på planeten jorden att vi bor tillsammans med universums smartaste kille om hur man utformar denna typ av mottagliga hemsida, och han heter Ethan Marcotte. Ethan skrev bara en bra ny bok kallad Responsive Web Design som beskriver hur man ska gå om byggarbetsplatser som anpassar sin design och funktioner för vilken enhet som helst. Han är ett geni, och du kan också vara ett geni genom att läsa sin bok. Dessa saker är lika viktiga för vår hantverks hälsa och framtid som webbstandardkampanjen under det senaste decenniet. Varje webbdesigner bör lägga undan några timmar för att slå tillbaka den boken.
JD Biersdorfer
JD Biersdorfer är en teknisk journalist och författare till flera böcker om gadgets inklusive Bästa iPhone Apps .
Enligt din åsikt, vilket ger en väldesignad app och bra användarupplevelse?
Efter att ha tittat på 400-500 appar för boken, Bästa iPhone Apps, tycker jag att de appar som fungerar bäst är de där användargränssnittet är speciellt utformat för den lilla telefonen och inte appar som tar skrivbordet tillvägagångssätt (med massor av ikoner och menyer) och försök att packa för mycket in i utrymmet. En bra app är också en stabil app-testad och relativt kraschfri.
Finns det några speciella appar som kommer att tänka på att vara bra designexempel?
Även om jag inte inkluderade det i boken då jag tyckte det var rörigt och krasligt, har "AccuWeather" omgjort sin iPhone app till ett riktigt vackert väderprogram med stor, färgstark grafik och ett ganska intuitivt gränssnitt så att du inte gör det måste gräva runt flera skärmar bara för att se hur varmt det är - och hur varmt det blir. De fria och betalade programmen skiljer sig något i konstruktionen, men båda använder samma visuella element för att snabbt förmedla väderförhållandena.
AccuWeather
Jag gillar också "Kayak" -appen för de saker som utvecklarna lagt in det förutom den vanliga flyg-och-hotell-bokningsdelen. Till exempel finns det en sektion du kan knacka på för att ta reda på hur mycket varje flygbolag tar ut dig för att kolla påsar, en annan för att ta reda på vilka butiker och restauranger som finns i den flygplats du är fast i, en valutakonverterare och till och med en packning checklista att göra Det är en väl avrundad praktisk resepapp som är lätt att navigera.
News-wise tror jag fortfarande att "BBC News" -appen är bra för rubrikhundar. Appens skapare lyckas hitta ett läsligt sätt att sätta nio topprapporter (med rubriker och små bilder) på startskärmen, tillsammans med en Breaking News-banner och en knapp för att knacka så att du kan höra live streaming BBC Radio. Det är väldigt enkelt att redigera kategorierna av nyheter du vill följa och det finns länkar till populära inspelade video- och ljudklipp som du kan strömma, som det korta World News Summary-videon.
Det här inlägget fördes till dig genom förskjutningen broschyrutskrift Företag, Next Day Flyers.
Vilka är dina erfarenheter med mobilappdesign? Vilka apps tycker du visar goda designprinciper och användargränssnitt? Låt oss veta i kommentarerna nedan.