Overwegingen bij het ontwerpen van mobiele apps voor webontwerpers
Overal waar je tegenwoordig bent, hebben mensen het over mobiele apps . Apps hiervoor, apps daarvoor.
De statistieken zijn ook nogal onthutsend geweest. Een recente studie van Flurry, toonde aan dat consumenten 81 minuten per dag gebruikten met mobiele apps, vergeleken met 74 minuten surfen op het web.
Naarmate meer mensen tijd aan appms besteden in vergelijking met internet, vraagt u zich misschien af of mobiel app-ontwerp een gebied is dat u moet gaan verkennen en hoe overdraagbaar uw webontwerpvaardigheden zijn.
In dit bericht hebben we ingecheckt met een aantal experts in het veld om hun perspectieven te krijgen. Lid worden van ons zijn Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark en JD Biersdorfer.
Robin Nixon
Robin Nixon is een technische auteur en webontwikkelaar en is de auteur van het nieuwe boek HTML5 voor iOS en Android: een beginnershandleiding .
Welk advies zou u geven aan webontwerpers die denken over het betreden van het gebied van ontwerp en ontwikkeling van mobiele apps?
Naar mijn mening is de snelste manier om bij de ontwikkeling van apps te komen, ervoor te zorgen dat je up-to-date bent met de nieuwste HTML (versie 5) en CSS (versie 3) -standaarden, en zo vloeiend mogelijk bent met JavaScript, want vrij snel het is waarschijnlijk dat er oplossingen zullen zijn voor het schrijven van een enkele webapp die kan worden omgezet in native apps voor iOS, Android, Web OS, Windows Phone en meer. Dit voorkomt dat u meerdere complexe talen en ontwikkelingsomgevingen zoals Java, Objective C, .NET, enzovoort, moet leren en de tijd die nodig is om een project naar verschillende apparaten te porteren.
Als u bijvoorbeeld een goede basis hebt in HTML, CSS en JavaScript, kunt u eenvoudig geweldige webapps samenstellen die u ook kunt veranderen in zelfstandige apps met behulp van de informatie in mijn boek HTML5 voor iOS en Android, of er zijn producten beschikbaar op internet om helpen bij het stroomlijnen van het proces.
Nu Microsoft stelt dat Windows 8-apps worden gemaakt in HTML en JavaScript, is er nog meer reden om te zorgen dat u een sterke kennis van deze technologieën hebt, vooral omdat Microsoft er naar uit is in 2015 op weg te zijn naar het concept van één gebruikersinterface (vergelijkbaar met degene die nu te zien is in Windows Phone 7 - en vooral de aangekondigde Mango-update).
Hoe overdraagbaar zijn webvaardigheden?
Webvaardigheden zijn zeer overdraagbaar naar app-ontwikkeling, als u de drie technologieën van HTML, CSS en JavaScript gebruikt om ze te bouwen. Maar als u van plan bent de native route te nemen en uw apps te schrijven in Objective C (voor iOS) of Java (voor Android), dan heeft u meer van een programmeerachtergrond nodig dan een webontwikkeling en is er een vrij steile leercurve voor elke .
Gelukkig is het voor de overgrote meerderheid van de apps mogelijk om webtechnologieën te gebruiken om vergelijkbare resultaten te bereiken als het schrijven van native code. Pas wanneer u tijdkritieke functies bereikt, zoals de hoge framesnelheidvereisten van snelle actiespellen, moet u terugkeren naar de taal van een apparaat of besturingssysteem.
Welke apps zijn volgens u volgens u goede voorbeelden van een goed ontworpen app?
Ik wil niet echt vermelden dat bepaalde apps een goed ontwerp vertegenwoordigen, omdat er zoveel zijn, maar sinds je de vraag hebt gesteld, is Theodore Grey's ongetwijfeld een uitstekende app De elementen , wat een interactieve 3D-verkenning is van alle elementen, waarin je je bijna kunt voorstellen ze aan te raken, omdat je elk monster kunt draaien, verplaatsen met je vingertoppen en ze zelfs in 3D kunt bekijken. Voor mij is dit een voorbeeld van waar een eBoek (wat dit echt is) veel meer wordt dan een eenvoudig boek om te vertalen (wat de meeste andere eBooks zijn), en boeken naar een heel nieuw niveau te brengen.
De elementen
Hoe bekijk je deze tijd in webdesign?
Robin Nixon: Ik geloof dat het op dit moment de meest opwindende tijd is voor programmeurs en ontwikkelaars sinds het begin van de jaren tachtig, toen microcomputers voor het eerst tot bloei kwamen. Toen de pc eenmaal de computing-troon veroverde, boden alleen Macs en het Linux-besturingssysteem enige echte concurrentie (en dat was ook heel weinig). Maar nu zijn de oorlogen van het besturingssysteem weer begonnen, deze keer gevoed door het exponentiële gebruik van mobiele apparaten zoals telefoons en tablets en het fenomenale downloaden van apps voor hen, wat betekent dat er een wereld aan mogelijkheden is. Naar mijn mening: "Er is goud in hun heuvels."
Aaron Maxwell
Aaron Maxwell is oprichter van Mobile Web Up, a mobiel webontwerp agentschap.
Waar moeten webontwerpers aan denken als ze zich op het gebied van web-apps begeven?
Veel van dezelfde concepten zijn nog steeds van toepassing. Denk als ontwerper na over welke acties je wilt dat de gebruiker kan nemen - welke ervaringen je wilt dat ze kunnen hebben. Deze focus is vaak de beste plaats om te beginnen.
Menu's zijn het meest effectief als ze niet teveel keuzes overschaduwen. Organiseer in een hiërarchische, drill-down-structuur, met niet meer dan een dozijn keuzes op elk niveau. Overweeg of het gebruik van een navigatie met tabbladen de gebruiker helpt om snel de verschillende acties te ondernemen die hij nodig heeft.
Het uitdelen van elementen is lastig op mobiele apparaten. Extra opvulling is een zeer nuttige techniek op de desktop voor semantische groepering; je kunt een groep widgets, afbeeldingen of tekstvakken bij elkaar plaatsen die gerelateerd zijn, en ze van een andere groep onderscheiden door scheiding van verticale en horizontale ruimte.
Maar op een mobiel scherm heeft u gewoon zoveel onroerend goed om mee te werken. Dus de ontwerper moet zuiniger zijn met hoe elementen ruimtelijk van elkaar worden gescheiden, met slechts enkele pixels in plaats van tientallen. Dit kan werken door andere aanwijzingen op te nemen. Afgerond hoeken rond een perimeter helpen bij het groeperen. En verschillende achtergrondkleuren kunnen ook een verandering van context communiceren.
Wat u weglaat, is minstens zo belangrijk als wat u erin stopt. Denk er als volgt aan: elk item dat u toevoegt aan het menu Instellingen heeft bijvoorbeeld een prijs in extra complexiteit, in tijd en aandacht van de gebruiker. Overweeg zorgvuldig of een functie of element het waard is, vooral gezien de soort omgevingen met hoge afleiding die mobiele apps meestal gebruiken.
Welke apps zijn volgens u goed voor een goed ontwerp?
Het is belangrijk om andere zeer succesvolle mobiele apps te bestuderen om te zien wat effectief is. Kijk naar de bekende namen: Facebook, Skype, welke Twitter-client deze week het populairst is. Vraag vrienden en familie welke apps ze het meest gebruiken en probeer te achterhalen waarom. (Hint: ze weten misschien niet bewust waarom, dus het direct vragen zal niet veel helpen.) Studie Mobiele UI-patronen.
Sarah Lynn
Sarah Lynn is een webdesigner en creatief en de eigenaar van Sarah Lynn Design.
Hoe stel je voor dat ontwerpers leren over het ontwerp van mobiele apps?
Ik heb een paar van de beste manieren gevonden om te leren ontwerpen voor apps, door onderzoek te doen naar de markt. Bekijk enkele van de apps die er zijn, analyseer hun functionaliteit, welke elementen ze gebruiken die al deel uitmaken van het aanbod van de telefoon en hoe ze kunnen worden verbeterd om gemakkelijker te gebruiken te zijn. Bestudeer de interacties van verschillende elementen en hoe verschillende apps zich tot elkaar verhouden. Veel bedrijven hebben al de tijd genomen om uitgebreide gebruikerstests uit te voeren. Leer van wat ze al hebben ontwikkeld en vind manieren om daarop voort te bouwen en ze te verbeteren.
Er zijn veel geweldige boeken om je op weg te helpen. Eén die ik ten zeerste aanbeveel is een boek van Suzanne Ginsburg getiteld De iPhone-gebruikerservaring ontwerpen . Als je natuurlijk geïnteresseerd bent in de iOS-markt. Er wordt gesproken over gebruikerstesten en over het plannen van een app-ontwerp. Een geweldige plek om te beginnen als je niet zeker weet hoe je het ontwerpproces van een app moet aanpakken.
Leren hoe je feedback van gebruikers kunt krijgen en veel plannen op papier voordat je naar de computer gaat, is een geweldige vaardigheid voor elke app-ontwerper (of interactieve ontwerper in het algemeen). Een andere geweldige manier om te leren is om in contact te komen met een app-ontwerper die al fantastisch werk produceert. Vraag hen om een mentor te zijn en je alle suggesties te geven die ze willen bieden. De meeste ontwerpers zijn bereid om een paar momenten van hun tijd door te brengen als je het netjes vraagt. Krijg feedback van je vrienden en andere ontwerpers die je misschien kent. Laat ze je prototypes zien en ontvang hun feedback.
Wat zijn naar uw mening overdraagbare webontwerpvaardigheden voor het ontwerpen van apps?
Iets overdraagbaar. Ik zou zeggen dat het meer op het gebied van interactieontwerp als geheel valt. Die allebei omvat.
Er zijn echter veel verschillende dingen waar u rekening mee moet houden, vanwege de grootte van de apparaten, de vereisten van de verschillende platforms en gewoon vanwege de manier waarop gebruikers omgaan met apps in vergelijking met een website. Mobiele gebruikersprofielen kunnen nogal variëren, van de typische on-the-go mobiele gebruiker, tot de mobiele gebruiker die gewoon te lui is om hun laptop te pakken en hun apps gebruikt terwijl ze in huis rondhangen (inclusief mezelf). patronen en ontwerpen die passen bij verschillende levensstijlen kunnen vergelijkbaar zijn in de zin van het ontwerpen van een website. Het maakt niet uit wat voor medium u altijd aan het ontwerpen bent rond uw doelgroep.
Leren denken in een kleiner en vaak minder flexibel formaat kan een uitdaging zijn. Hetzelfde geldt voor het denken over landschap versus verticaal en hoe u uw app kunt aanpassen om beide kanten op te werken. Gebruik maken van de ingebouwde tools van het mobiele apparaat is nog een reden waarom onderzoek zo belangrijk is als het gaat om het ontwerpen van apps. Het is bijna het beste om een platform te kiezen en de ins en outs ervan te leren, in plaats van alles te leren. Het kan best ontmoedigend en overweldigend zijn als je het allemaal tegelijk probeert te leren.
Net als elk nieuw medium, vereist het de bereidheid om te leren en up-to-date te blijven met de snelle markt om succesvol te zijn.
Mike Gualtieri
Mike Gualtieri, is een principal analyst bij Forrester Research en de auteur van het nieuwe rapport, Praktische tips voor het maken van mobiele apps .
Waar moet een ontwerper voor apps extra op letten bij het ontwerpen van een goede gebruikerservaring?
De verwachtingen van gebruikers zijn hoger voor mobiele apps dan voor websites. Apple's iPhone-apps brachten designcachet naar mobiele apps. Ook bieden de aanraak- en bewegingsmogelijkheden nieuwe manieren om met apps te communiceren. De eerste stap om geweldige apps te ontwerpen, is om uw gebruikers beter te begrijpen dan zij zichzelf begrijpen. Traditioneel kwantitatief en kwalitatief onderzoek is belangrijk om persona's te creëren (fictieve mensen die uw gebruikers vertegenwoordigen). Een goed ontwerp komt van de verbeeldingsontwerper die zich voorstelt wat een gebruiker nuttig, bruikbaar en wenselijk vindt in de context van de app.
Vooral voor mobiele apps moeten ontwerpers rekening houden met de vijf dimensies van mobiele ontwerpcontext: locatie, voortbeweging, directheid, intimiteit en apparaat.
Bron: Forrester Research, Inc.
Welk advies zou je geven aan webontwerpers die erover denken om in deze richting te gaan?
Doe het. Mobiele app-ontwerp voor smartphones en tablets is een groeiende kans. Iedereen heeft een geweldig ontwerp nodig. Er zijn drie wegen voor de ontwikkeling van mobiele apps:
- Native apps. Als je Javascript-vaardigheden hebt, heb je programmeervaardigheden. Laat je niet intimideren door Objective C voor iPhone of Java voor Android. Blader eens door een boek en je zult snel een idee krijgen of dit iets is dat je kunt aanpakken. Niet alle webontwerpers kunnen dit zonder verdere training.
- HTML5. Apps
- Hybride. Is een native applicatie die HTML5 erin weergeeft.
Al deze ontwikkelingspaden vereisen ontwerp.
Josh Clark
Josh Clark is een ontwerper, ontwikkelaar en de auteur van Tapworthy: geweldige iPhone-apps ontwerpen en Beste iPhone-apps: de gids voor het discrimineren van downloaders .
Welk advies zou je geven aan webontwerpers die geïnteresseerd zijn in het overstappen naar app-ontwerp en -ontwikkeling? Wat moeten ze leren?
In termen van de eigenlijke ontwerptechnologieën is het misschien niet eens nodig om nog veel meer te leren. Je kunt indrukwekkende indrukwekkende app-interfaces maken met onze beproefde vrienden HTML, CSS en JavaScript. Ik heb het hier niet alleen over traditionele web-apps, maar ook over zogenaamde 'hybride apps'. Dit zijn apps waarvan de interfaces zijn ontworpen met HTML maar als native apps worden geleverd aan de verschillende app-winkels. Het is alsof u uw webapp via de app store distribueert. Voor webontwerpers is dit een toegankelijke manier om aan de slag te gaan met het ontwerpen van web-apps zonder een programmeertaal te leren.
Jonathan Stark heeft twee geweldige boeken geschreven die een overzicht geven van hoe dit moet, met behulp van een open-sourceproject met de naam PhoneGap, dat uw webapp bundelt als een native app in zijn eigen browser: IPhone-apps bouwen met HTML, CSS en JavaScript en Android-apps bouwen met HTML, CSS en JavaScript .
Hier is het ding: hoewel je opmerkelijke dingen kunt doen met HTML5 en CSS3, kunnen deze technologieën niet helemaal overeenkomen met de glans en pit van Real McCoy-apps, software gebouwd met de moedertaal van het apparaat. Als je apps wilt bouwen met oogverblindende afbeeldingen, animaties, native widgets en volledige toegang tot het volledige apparaat, kun je beter native gaan. Dat betekent dat je iPhone-apps moet coderen in Objective-C, Android-apps in Java, enzovoort. Dit zijn geen programmeer-talen en ze kunnen een steile klim betekenen voor webontwerpers om te leren. Als je die route volgt, wil je misschien samenwerken met een ervaren codeerder om je ontwerpen tot leven te laten komen. In de tussentijd kan experimenteren met het ontwerpen van apps met HTML, CSS en Javascript een uitstekende manier zijn om kennis te maken met het platform en zelfs snelle prototypen voor native apps te maken.
Wat het eigenlijke ontwerpproces zelf betreft, verschilt het ontwerpen van mobiele ervaringen op belangrijke manieren van het ontwerpen van desktops. De twee valkuilen voor nieuwkomers zijn ergonomie en context.
Voor apparaten met een aanraakscherm hebt u eerlijke ergonomische problemen waarmee u worstelt. Je ontwerpt een interface voor vingers en duimen, en dat betekent dat je rekening moet houden met comfort, waar komt je duim dan natuurlijk tot rust op het scherm? Meer dan dat, er zijn zichtbaarheidsproblemen. Wanneer je met de hand een interface aan het bewerken bent, verdoezelt je duidelijk het scherm. Dat betekent dat u uw bedieningselementen zodanig moet ontwerpen dat ze niet interfereren met de inhoud. Beide overwegingen - comfort en zichtbaarheid - verklaren waarom de meeste touchscreen-smartphones hun belangrijkste bedieningselementen en navigatie aan de onderkant van het scherm weergeven. Dat is waar je duim tot stilstand komt wanneer je de telefoon met één hand gebruikt, en het betekent ook dat je de knoppen kunt bedienen zonder de inhoud in de weg te zitten. Dit is precies het tegenovergestelde van wat we gewend zijn op het bureaublad, waar primaire menu's en bedieningselementen naar de bovenkant van het scherm gaan.
Het andere gebied dat nieuw is om te overwegen is de context. Hoe en waar gebruiken mensen deze app? Welke invloed heeft dat op hun prioriteiten en op de functies die u voorop moet stellen? Je moet hier voorzichtig zijn. Een mythe is geëvolueerd dat er maar één soort van mobiele gebruiker is: haastig, in een haast, afgeleid. Dat is soms wel het geval, maar niet altijd. Mobiel is niet alleen onderweg: het is op de bank, in de keuken, wachtend op de luchthaven voor een vertraagde vlucht. Al deze situaties zijn momenten waarop uw publiek veel aandacht heeft en echt tijd met uw app kan doorbrengen. Tegelijkertijd kunnen mobiele apparaten ook meer doen dan alleen desktopcomputers, omdat ze zijn geladen met al deze sensoren die hen effectief superkrachten geven: gps, microfoon, camera, touch, gyroscoop, kompas. Deze apparaatcontext bepaalt hoe uw publiek zijn telefoon gebruikt en verwacht uw app te gebruiken.
Dit alles betekent dat u moet overwegen hoe de apparaatcontext de prioriteiten van de gebruiker beïnvloedt en dat die prioriteiten waarschijnlijk anders zijn dan de prioriteiten van de desktop. Maar er is een lastige draai aan dit: je kunt deze context niet verwarren met de bedoeling van de gebruiker. Er is een algemeen instinct om mobiele apps te versimpelliseren, om ze desktop lite te maken. Dat is verkeerd. We doen tegenwoordig alles op onze telefoons en elke keer als je zegt: "Mensen willen dat niet doen op mobiele apparaten", heb je het mis. We hebben allemaal die ervaring gehad toen je naar een website op je smartphone ging, en je bent tegen de mobiele versie van de site aangelopen, waar ze precies de functie of inhoud die je zoekt hebt uitgekleed. Alleen omdat je op een klein scherm zit, wil dat zelden zeggen dat je minder wilt doen. Het is net zoiets als zeggen dat alleen al omdat een pocketboek kleiner is, we hoofdstukken moeten verwijderen. Verwar apparaatinhoud niet met opzet.
Wat ik wil zeggen is dat ik denk dat mobiele apps en websites in de meeste gevallen inhoudelijk vergelijkbare inhoud en functies moeten hebben voor hun desktop-neven en nichten. De presentatie en prioriteit kunnen heel goed worden aangepast aan mobiele denkrichtingen, maar de inhoud moet bijna altijd hetzelfde zijn. In veel gevallen zouden de mobiele versies meer moeten doen, omdat de apparaten meer kunnen. Daarom kan de mobiele app van Amazon dingen doen die de website niet kan doen: streepjescodes scannen, bijvoorbeeld om items op te zoeken.
Voor webontwerpers betekent dit dat je flexibeler moet gaan nadenken over het bouwen van websites. We doen het al meer dan 15 jaar verkeerd, websites bouwen alleen voor desktop browsen. Dat is niet waar het web voor is ontworpen. Het werd ontworpen om platformneutraal te zijn, om op elk type scherm of apparaat te worden weergegeven. U weet gewoon niet hoe uw website nu wordt bekeken. Er zijn talloze apparaten met verschillende vormfactoren die nu toegang kunnen krijgen tot uw website, en dat betekent dat het belangrijk is om websites te bouwen die zich aan elk apparaat kunnen aanpassen. Voor de meesten van ons is dit een nieuwe manier om na te denken over het bouwen van websites - het gaat er niet om een aparte mobiele website en een aparte desktopwebsite te genereren. In plaats daarvan betekent het dat er één website moet worden gebouwd die zich op elegante wijze aanpast aan de beperkingen en mogelijkheden van elk apparaat.
We hebben het geluk dat we hier op aarde samen leven met de slimste man van het universum over het ontwerpen van dit soort responsieve websites, en zijn naam is Ethan Marcotte. Ethan heeft net een geweldig nieuw boek geschreven met de naam Responsive Web Design die beschrijft hoe je bouwsites kunt bouwen die hun ontwerp en functies aanpassen voor elk apparaat. Hij is een genie, en je kunt ook een genie zijn door zijn boek te lezen. Dit spul is net zo belangrijk voor de gezondheid en de toekomst van ons vak als de webstandaard-campagne van het afgelopen decennium. Elke webontwerper zou een paar uur opzij moeten zetten om dat boek terug te slaan.
JD Biersdorfer
JD Biersdorfer is een technologiejournalist en auteur van verschillende boeken over gadgets, waaronder Beste iPhone-apps .
Wat maakt naar uw mening een goed ontworpen app en een goede gebruikerservaring?
Na naar 400-500 apps te hebben gekeken voor het boek Beste iPhone-apps, denk ik dat de apps die het beste werken, die apps zijn waar de gebruikersinterface speciaal is ontworpen voor het scherm met de kleine telefoon en niet de apps die de desktopaanpak volgen (met veel pictogrammen en menu's) en probeer te veel in de ruimte te proppen. Een goede app is ook een stabiele app - goed getest en relatief crashvrij.
Zijn er bepaalde apps die voor de geest komen als goede ontwerpvoorbeelden?
Hoewel ik het destijds niet in het boek had opgenomen omdat ik het rommelig en verpletterd vond, heeft "AccuWeather" zijn iPhone-app opnieuw ontworpen in een echt prachtig weerprogramma met grote, kleurrijke afbeeldingen en een vrij intuïtieve interface zodat je niet moet rond verschillende schermen graven om te zien hoe heet het is - en hoe heet het zal zijn. De gratis en de betaalde apps verschillen enigszins in het ontwerp, maar beide gebruiken dezelfde visuele elementen om weersomstandigheden snel over te brengen.
AccuWeather
Ik hou ook van de "Kayak" -app voor de dingen die de ontwikkelaars erin doen naast het gebruikelijke vlucht-en-hotelboekingsgedeelte. Er is bijvoorbeeld een gedeelte dat u kunt aanraken om te weten hoeveel elke luchtvaartmaatschappij u aanrekent om zakken te controleren, een andere om te achterhalen welke winkels en restaurants zich op het vliegveld bevinden, een valutacalculator en zelfs een checklist voor het inpakken van de bagage. het is een praktische praktische reis-app die gemakkelijk te navigeren is.
Wat het nieuws betreft, denk ik nog steeds dat de app "BBC News" geweldig is voor koplopers. De makers van de app weten een leesbare manier te vinden om negen hoofdverhalen (met koppen en kleine foto's) op het startscherm te plaatsen, samen met een banner voor een brekend nieuws en een knop om te tikken, zodat je live streaming BBC-radio kunt horen. Het is heel gemakkelijk om de nieuwscategorieën die u wilt volgen te bewerken en er zijn links naar populaire vooraf opgenomen video- en audiofragmenten die u kunt streamen, zoals de korte video met video's over het wereldnieuws.
Dit bericht is door de offset naar je toe gebracht boekjes afdrukken bedrijf, Next Day Flyers.
Wat zijn jouw ervaringen met het ontwerp van mobiele apps? Welke apps laten volgens u goede ontwerpprincipes en gebruikersinterfaces zien? Laat het ons weten in de comments hieronder.