Mobile App Design Overvejelser for Web Designers
Overalt vendes i disse dage folk taler om mobil apps . Apps til dette, apps til det.
Også statistikken har været svimlende. En nylig undersøgelse af Flurry, viste, at forbrugere brugte 81 minutter om dagen ved hjælp af mobilapps, sammenlignet med 74 minutters websurfing.
Da flere mennesker begynder at bruge tid på apps sammenlignet med internettet, kan du undre dig over, om mobilappdesign er et område, du bør begynde at udforske, og hvordan overførbare dine webdesignevner er.
I dette indlæg har vi tjekket ind med en række eksperter på området for at få deres perspektiver. Sammen med os er Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark og JD Biersdorfer.
Robin Nixon
Robin Nixon er en teknisk forfatter og webudvikler og er forfatter til den nye bog HTML5 til iOS og Android: En nybegyndervejledning .
s Hvilke råd vil du give til webdesignere, der tænker på at komme ind i området for mobilappdesign og -udvikling?
Efter min opfattelse er den hurtigste måde at komme ind på app-udvikling på at sikre, at du er opdateret med de nyeste HTML (version 5) og CSS (version 3) standarder og er så flydende som muligt med JavaScript, fordi det er ret snart Det er sandsynligt, at der vil være løsninger til at skrive en enkelt webapp, der kan omdannes til native apps til alle iOS, Android, Web OS, Windows Phone og meget mere. Dette vil spare dig for at lære flere komplekse sprog og udviklingsmiljøer som Java, Objective C, .NET og så videre, og den tid det tager at sende et projekt til flere forskellige enheder.
For eksempel kan du med en solid jordforbindelse i HTML, CSS og JavaScript nemt samle store webapps, som du også kan konvertere til selvstændige apps ved hjælp af oplysningerne i min bog HTML5 til iOS og Android, eller der er tilgængelige produkter på internettet til hjælpe med at strømline processen.
Med Microsoft, der nu siger, at Windows 8-apps vil blive oprettet i HTML og JavaScript, er der endnu mere grund til at sikre, at du har stærk viden om disse teknologier, især da Microsoft er kendt for at bevæge sig mod begrebet en enkelt brugergrænseflade inden 2015 (svarende til den ses nu i Windows Phone 7 - og især den kommende Mango opdatering).
Hvor overførbare er webkvalifikationer?
Web færdigheder er meget overførbare til app udvikling, hvis du bruger de tre teknologier af HTML, CSS og JavaScript til at bygge dem. Men hvis du planlægger at tage den oprindelige rute og skrive dine apps i mål C (for iOS) eller Java (til Android), så har du brug for mere af en programmeringsbakgrund end en webudvikling, og der er en ret stejl indlæringskurve for hver .
Heldigvis er det for langt de fleste apps muligt at bruge webteknologier til at opnå lignende resultater til at skrive indbygget kode. Det er først, når du kommer til tidskritiske funktioner, som f.eks. De høje rammebetingelser i hurtige actionspil, at du skal vende tilbage til modersmålet på en enhed eller et operativsystem.
Efter din mening, hvilke app (er) tror du er gode eksempler på en veldesignet app?
Jeg kan ikke godt lide at nævne nogle specielle apps som at repræsentere godt design, da der er så mange af dem, men siden du stillede spørgsmålet, er det uden tvivl en fremragende app Theodore Grays Elementerne , som er en interaktiv 3D-udforskning af alle de elementer, hvor du næsten kan forestille dig at røre dem, fordi du kan rotere hver prøve, flytte dem om med fingerspidserne og endda se dem i 3D. For mig er dette et eksempel på, hvor en eBook (som det virkelig er) bliver langt mere end en simpel bog til eBook-oversættelse (som de fleste andre eBøger er), og tager bøger til et helt nyt niveau.
Elementerne
Hvordan ser du denne gang i webdesign?
Robin Nixon: Jeg tror, at lige nu er den mest spændende tid for programmører og udviklere siden begyndelsen af 1980'erne, hvor mikrocomputere først blomstrede. Når pc'en tog computertronen, tilbød kun Mac'er og Linux-operativsystemet nogen reel konkurrence (og dyrebar lidt derpå). Men nu er operativsystemet krige på igen, denne gang drevet af den eksponentielle optagelse af mobile enheder som telefoner og tablets og den fænomenale downloading af apps til dem, hvilket betyder, at der er en verden af muligheder derude. Efter min opfattelse er der guld i dem bakker.
Aaron Maxwell
Aaron Maxwell er grundlægger af Mobile Web Up, a mobil webdesign bureau.
Hvad skal webdesignere tænke på, da de påbegynder området for webapps?
Mange af de samme begreber gælder stadig. Som designer skal du tænke over hvilke handlinger du vil have brugeren til at kunne tage, hvilke erfaringer du vil have dem til at kunne have. Dette fokus er ofte det bedste sted at starte.
Menuer er mest effektive, når de ikke overvældes med for mange valg. Organiserer i en hierarkisk, boret ned struktur, med ikke mere end et dusin valg på hvert niveau. Overvej, om du bruger en flad navigation, hjælper brugeren hurtigt med at tage de forskellige handlinger, de har brug for.
Spacing af elementer er vanskelig på mobilen. Ekstra polstring er en meget nyttig teknik på skrivebordet til semantisk gruppering; Du kan placere en gruppe widgets, billeder eller tekstbokse sammen, der er relaterede, og skelne dem fra en anden gruppe, blot ved at adskille vertikalt og horisontalt rum.
Men på en mobil skærm har du lige så meget fast ejendom at arbejde med. Så designeren skal være mere økonomisk med, hvordan elementer er rumligt adskilt, polstring med blot nogle få pixels i stedet for snesevis. Dette kan fungere ved at inkludere andre signaler. Afrundede hjørner omkring en omkreds hjælper med at gruppere. Og forskellige baggrundsfarver kan også kommunikere en ændring af konteksten.
Det, du udelader, er mindst lige så vigtigt som det du lægger i. Tænk på det som sådan: Hver ting, du tilføjer til indstillingsmenuen, har for eksempel en omkostning med øget kompleksitet i brugerens tid og opmærksomhed. Overvej omhyggeligt, om nogen funktion eller element er det værd, især i betragtning af de slags højdistraheringsmiljøer, som mobilapps er tilbøjelige til at blive brugt.
Hvilke apps viser efter din mening godt design?
Det er vigtigt at studere andre meget succesrige mobilapps for at finde ud af, hvad der er effektivt. Kig på de berømte navne: Facebook, Skype, uanset Twitter-klienten er mest populær i denne uge. Spørg venner og familie, hvilke apps de bruger mest, og prøv at finde ud af hvorfor. (Hint: de kan ikke bevidst vide hvorfor, så spørger dem direkte, hjælper det ikke meget.) Studie Mobile UI-mønstre.
Sarah Lynn
Sarah Lynn er webdesigner og kreativ og ejer af Sarah Lynn Design.
Hvordan foreslår du, at designere bør gå om at lære mobilappdesign?
Jeg har fundet nogle af de bedste måder at lære at designe for apps ved at undersøge markedet. Kig på nogle af de apps derude, analysere deres funktionalitet, hvilke elementer de bruger, der allerede er en del af telefonens tilbud, og hvordan de kan forbedres på for at være lettere at bruge. Undersøg samspillet mellem forskellige elementer og hvordan forskellige apps sammenligner med hinanden. Mange virksomheder har allerede lagt tid til at udføre omfattende brugertest. Lær af, hvad de allerede har udviklet, og find måder at bygge på dem og gøre dem bedre.
Der er mange gode bøger derude for at komme i gang. En jeg stærkt anbefale er en bog af Suzanne Ginsburg betegnet Design af iPhone User Experience . Hvis du selvfølgelig er interesseret i iOS-markedet. Det taler om brugertest og hvordan man planlægger et app design. Et godt sted at starte, når du ikke er sikker på, hvordan man skal gå om processen med at designe en app.
Lær at få feedback fra brugere og planlægge hårdt på papir, inden de går til computeren, er en stor færdighed for enhver app designer (eller interaktiv designer generelt). En anden god måde at lære er at komme i kontakt med en app designer, der allerede producerer godt arbejde. Bed dem om at være mentor og give dig nogle pointers, de er villige til at tilbyde. De fleste designere er villige til at tilbringe et par øjeblikke af deres tid, hvis du spørger pænt. Få feedback fra dine venner og andre designere, du måske kender. Vis dem dine prototyper og få deres feedback.
Hvor overførbare er efter din mening webdesign færdigheder til design for apps?
Noget overførbart. Jeg vil sige det falder mere inden for interaktionsdesign som helhed. Hvilket omfatter dem begge.
Der er mange forskellige ting, du skal overveje på grund af størrelsen af enhederne, kravene til de forskellige platforme, og simpelthen på grund af den måde, brugerne interagerer med apps i forhold til en hjemmeside. Mobilbrugerprofiler kan variere ganske lidt fra den typiske on-the-go-mobilbruger til den mobile bruger, der simpelthen er for doven til at gribe deres bærbare computer og bruger deres apps, mens de hænger rundt i huset (selv inkluderet). Så studerer disse mønstre og design til at passe til forskellige livsstil kan være ens i en forstand at designe et websted. Uanset hvad mediet du altid søger at designe det omkring din målgruppe.
At lære at tænke i et mindre og ofte mindre fleksibelt format kan være udfordrende. Det samme gælder for at tænke på landskabet vha. Lodret og hvordan du kan tilpasse din app til arbejde på begge måder. Udnyttelse af mobilenhedens indbyggede værktøjer er en anden grund til, at forskningen er så vigtig, når det kommer til at designe apps. Det er næsten bedst at vælge en platform og lære ind og ud af det, i stedet for at forsøge at lære dem alle. Det kan være ret skræmmende og overvældende, hvis du forsøger at lære det hele på én gang.
Ligesom ethvert nyt medium kræver det vilje til at lære og holde sig ajour med det hurtige marked for at være vellykket.
Mike Gualtieri
Mike Gualtieri, er en hovedanalytiker hos Forrester Research og forfatteren af den nye rapport, Mobile App Design Best Practices .
Hvad skal en designer til apps være opmærksom på i udformningen af en god brugeroplevelse?
Brugernes forventninger er højere for mobilapps, end de er til websites. Apples iPhone apps bragte design cachet til mobile apps. Funktionerne til berøring og gestus giver også nye måder at interagere med apps. Det første skridt til at designe gode apps er at forstå dine brugere bedre, end de forstår selv. Traditionel kvantitativ og kvalitativ forskning er vigtig for at skabe personas (fiktive mennesker, der repræsenterer dine brugere). Stort design kommer fra fantasi-designer, der forestiller sig, hvad en bruger ville finde nyttige, brugbare og ønskelige i forbindelse med appen.
For især mobile apps bør designere overveje de fem dimensioner af mobil design kontekst: placering, lokomotiv, umiddelbarhed, intimitet og enhed.
Kilde: Forrester Research, Inc.
Hvilke råd vil du give til webdesignere, der tænker på at bevæge sig i denne retning?
Gør det. Mobilappdesign til smartphones og tablets er en voksende mulighed. Alle har brug for et godt design. Der er tre stier til udvikling af mobilapps:
- Native apps. Hvis du har Javascript-færdigheder, så har du nogle programmeringsevner. Må ikke blive skræmt af mål C for iPhone eller Java til Android. Thumb gennem en bog på enten, og du vil kunne få en hurtig ide, hvis dette er noget du kan tackle. Ikke alle webdesignere vil kunne uden videreuddannelse.
- HTML5. Apps
- Hybrid. Er en indbygget applikation, der gør HTML5 inde i den.
Alle disse udviklingsveje kræver design.
Josh Clark
Josh Clark er designer, udvikler og forfatter af Tapworthy: Design Great iPhone Apps og Bedste iPhone Apps: Vejledningen til diskriminerende Downloaders .
Hvilke råd vil du give til webdesignere, der er interesseret i at flytte ind i app design og udvikling? Hvad skal de lære?
Med hensyn til de faktiske designteknologier er der måske ikke engang behov for at lære mere. Du kan lave nogle mægtige imponerende appgrænseflader ved hjælp af vores prøvede og ægte venner HTML, CSS og JavaScript. Jeg taler ikke kun om traditionelle webapps her, men også såkaldte "hybrid apps". Disse er apps, hvis grænseflader er designet med HTML, men leveres som indbyggede apps til de forskellige app-butikker. Det er ligesom at distribuere din webapp gennem appbutikken. For webdesignere er dette en tilgængelig måde at komme i gang med at designe webapps uden at lære et programmeringssprog.
Jonathan Stark har skrevet to fantastiske bøger, der giver et overblik over, hvordan man gør dette ved hjælp af et open source-projekt kaldet PhoneGap, som bundter din webapp til sin egen browser som en indbygget app: Opbygning af iPhone Apps med HTML, CSS og JavaScript og Opbygning Android Apps med HTML, CSS og JavaScript .
Her er sagen: Mens du kan gøre bemærkelsesværdige ting med HTML5 og CSS3, kan disse teknologier bare ikke helt matche polsk og pizazz af Real McCoy apps, software bygget med enhedens modersmål. Hvis du vil bygge apps med øjenbrynende grafik, animationer, indfødte widgets og fuld adgang til hele enheden, er du bedre til at gå indfødt. Det betyder, at du skal kode iPhone apps i Objective-C, Android apps i Java, og så videre. Disse er ikke kidding-around programmeringssprog, og de kan repræsentere en stejl stigning for webdesignere at lære. Hvis du går den rute, vil du måske være partner med en mere erfaren coder for at gøre dine designs til liv. I mellemtiden kan eksperimenter med at designe apps med HTML, CSS og Javascript være en god måde at lære om platformen og endda bygge hurtige prototyper til native apps.
Hvad angår selve selve designprocessen, varierer design af mobile oplevelser på vigtige måder fra desktop design. De to gotchas til nybegyndere er ergonomi og kontekst.
Til touchscreen-enheder har du ærlige til gud ergonomiske problemer at kæmpe med. Du designer en grænseflade til fingre og tommelfingre, og det betyder at du skal overveje problemer med komfort, hvor kommer tommelfingeren naturligvis på skærmen? Mere end det er der synlighedsproblemer. Når du arbejder en grænseflade for hånd, dækker du tydeligvis skærmen. Det betyder at du skal designe dine kontroller, så de ikke forstyrrer indholdet. Begge disse overvejelser - komfort og synlighed - forklare, hvorfor de fleste touchscreen-smartphones viser deres hovedstyring og navigation nederst på skærmen. Det er her, hvor tommelfingeren kommer til hvile, når du bruger telefonen med en hånd, og det betyder også, at du kan arbejde kontrollerne uden at komme i vejen for indholdet. Dette er nøjagtigt det modsatte af, hvad vi er vant til på skrivebordet, hvor primære menuer og kontroller går til toppen af skærmen.
Det andet område, der er nyt at overveje, er kontekst. Hvordan og hvor vil folk bruge denne app? Hvordan påvirker det deres prioriteter og de funktioner, du skal sætte foran og midt? Du skal være forsigtig her. En myte har udviklet sig, at der kun er en slags mobilbruger: skyndte sig i et rush, distraheret. Det er helt sikkert tilfældet, men ikke hele tiden. Mobile er ikke bare på farten: det er på sofaen, i køkkenet, der venter i lufthavnen for en forsinket flyvning. Alle disse situationer er øjeblikke, hvor dit publikum har masser af opmærksomhed på reservedele og virkelig kan bruge tid sammen med din app. Samtidig kan mobile enheder også gøre mere end stationære computere, fordi de er fyldt med alle disse sensorer, der effektivt giver dem supermagter: GPS, mikrofon, kamera, touch, gyroskop, kompas. Denne enhedskontekst udformer, hvordan dit publikum bruger deres telefon og vil forvente at bruge din app.
Alt dette betyder, at du skal overveje, hvordan enhedens kontekst påvirker brugerprioriteringer, og disse prioriteter vil sandsynligvis adskille sig fra skrivebordets prioriteter. Men der er et vanskeligt vrid på dette: Du kan ikke forveksle denne sammenhæng med brugerens hensigt. Der er et fælles instinkt til at oversimplificere mobile apps, for at gøre dem til desktop-pc'er. Det er forkert. Vi gør alt på vores telefoner i disse dage, og hver gang du siger, "Folk vil ikke gøre det på mobilen", er du forkert. Vi har alle haft den oplevelse, hvor du går til en hjemmeside på din smartphone, og du er ramt af den mobile version af webstedet, hvor de har fjernet nøjagtigt den funktion eller det indhold, du leder efter. Bare fordi du er på en lille skærm betyder det sjældent, at du vil gøre mindre. Det er som at sige, at bare fordi en paperback-bog er mindre, bør vi fjerne kapitler. Forstyr ikke enhedens indhold med hensigt.
Hvad jeg siger er, at jeg tror, at mobilapps og websites i de fleste tilfælde skal have tematisk lignende indhold og funktioner til deres desktopfætre. Præsentationen og prioriteten kan meget vel ændres for at passe til mobile mindsets, men indholdet skal næsten altid være det samme. Faktisk skal mobilversionerne i mange tilfælde gøre mere, fordi enhederne er i stand til mere. Derfor kan Amazons mobilapp gøre ting, som hjemmesiden ikke kan gøre: scanning stregkoder, for eksempel at søge efter elementer.
For webdesignere betyder det, at du skal begynde at tænke mere fleksibelt om, hvordan du opbygger websites. Vi har gjort det forkert i over 15 år, kun at bygge hjemmesider til desktop browsing. Det er ikke, hvad nettet er designet til. Det var designet til at være platformneutral, der skal vises på enhver form for skærm eller enhed. Du ved bare ikke, hvordan dit websted vil blive set nu. Der er en jillion-enhed alle med forskellige formfaktorer, der kan få adgang til dit websted nu, og det betyder, at det er vigtigt at opbygge hjemmesider, som kan tilpasses til en hvilken som helst enhed. For de fleste af os er dette en ny måde at tænke på at bygge hjemmesider - det handler ikke om at oprette en separat mobilwebsite og en separat desktopwebsite. I stedet betyder det at opbygge en enkelt hjemmeside, der elegant tilpasser sig hver enkelt enheds begrænsninger og evner.
Vi er meget heldige her på planeten Jorden, at vi bor sammen med universets smarteste fyr om, hvordan vi designer denne slags lydhør hjemmeside, og han hedder Ethan Marcotte. Ethan skrev bare en stor ny bog kaldet Responsive Web Design der beskriver hvordan man skal gå om byggepladser, der tilpasser deres design og funktioner til enhver enhed. Han er et geni, og du kan også være et geni ved at læse sin bog. Disse ting er lige så vigtige for vores håndværks sundhed og fremtid som webstandardkampagnen i det sidste årti. Hver webdesigner bør lægge et par timer til at slå den bog tilbage.
JD Biersdorfer
JD Biersdorfer er en teknologi journalist og forfatter af flere bøger om gadgets herunder Bedste iPhone Apps .
Hvad mener du efter en veldesignet app og god brugeroplevelse?
Efter at have kigget på 400-500 apps til bogen, Bedste iPhone Apps, tror jeg, at de apps, der fungerer bedst, er dem, hvor brugergrænsefladen er specielt designet til den lille telefonskærm og ikke apps, der tager skrivebordets tilgang (med masser af ikoner og menuer) og forsøge at kramme for meget ind i rummet. En god app er også en stabil app-velprøvet og relativt krasjfri.
Er der nogle specielle apps, der kommer til at tænke på at være gode designeksempler?
Selvom jeg ikke inkluderede det i bogen på det tidspunkt, fordi jeg fandt det rodet og kedeligt, har "AccuWeather" redesignet sin iPhone app til et rigtig smukt vejrprogram med stor farverig grafik og en temmelig intuitiv grænseflade, så du ikke gør det skal grave rundt adskillige skærme bare for at se, hvor varmt det er - og hvor varmt det bliver. De gratis og de betalte apps varierer lidt i designet, men begge bruger de samme visuelle elementer for hurtigt at formidle vejrforholdene.
AccuWeather
Jeg kan også lide "Kayak" appen for de ting, som udviklerne satte i det ud over den sædvanlige fly-og-hotel-booking-del. For eksempel er der et afsnit, du kan trykke for at finde ud af, hvor meget hvert flyselskab opkræver dig for at tjekke tasker, en anden for at finde ud af, hvilke butikker og restauranter der er i lufthavnen, du sidder fast i, en valutaomregner og endda en pakke tjekliste for at gøre Det er en velafrundet praktisk rejseapp, der er let at navigere.
Nyhedsorienteret tror jeg stadig, at "BBC News" -appen er god til headhounds. Appens skabere formår at finde en læselig måde at sætte ni tophistorier (med overskrifter og små billeder) på startskærmen sammen med et Breaking News-banner og en knap til at trykke så du kan høre live streaming BBC Radio. Det er meget nemt at redigere de kategorier af nyheder, du vil følge, og der er links til populære forudindspillede video- og lydklip, du kan streame, som den korte World News Summary-video.
Dette indlæg blev bragt til dig ved modregningen hæfteudskrivning firma, næste dag flyers.
Hvad er dine oplevelser med mobilappdesign? Hvilke apps synes du at vise gode designprincipper og brugergrænseflade? Lad os vide i kommentarerne nedenfor.