Share
De mobiele markt is begonnen om de jongere generaties op een grote manier te richten. Gehele secties van app-markten zijn gericht op applicaties en games die zijn gericht op de demografische doelgroep van de kleuterklas. Ontwikkelaars hebben kennis genomen en de markt is steeds drukker geworden.
Wanneer u een app maakt die is gericht op de jongste generatie, moet u op de hoogte zijn van twee belangrijke dingen:
In dit artikel zal ik het hebben over de typische gebruikersinterfaces die horen bij de meeste op touchscreen-gebaseerde applicaties, en hoe deze het best kunnen worden gewijzigd bij het naderen van deze markt.
Een thema dat je opvalt in dit artikel is dat van het verminderen van toetredingsdrempels. Hoe meer schermen er tussen een jonge geest en uw beoogde inhoud worden geplaatst, hoe groter de kans dat het kind ongeduldig wordt en uw app opgeeft.
Laten we beginnen met waarmee de meeste apps hun ervaring beginnen: een splash-scherm. De snelle afhaalmaaltijd? Gebruik er geen. Geen twee jaar oude ik ooit ontmoet heb dat JohnSmithDevelopment zijn song-and-dance app gebouwd heeft; zij of hij wil gewoon naar de muziek gaan. Dan komt de gevreesde klik van de home-knop, en je ongrijpbare doelgroep is uitgeschakeld om iets anders te bekijken.
Kinderen hebben een korte aandachtsspanne. U wilt zo snel mogelijk bij de goederen van uw app komen. Begin de achtergrondmuziek bij het opstarten en laat geen stagnerende schermen achter. Verveling is je vijand.
Vaak is het volgende aanwezige element een "startscherm". Dit scherm heeft meestal de titel van uw app en een knop gemarkeerd Spelen of Begin of met een gelijkwaardig symbool - iets vergelijkbaars als dit:
Dit scherm laat meestal een animatie draaien, de titel rondstuiteren of iets dergelijks. Dit specifieke voorbeeld van een startscherm heeft een flagrante fout, maar om het te begrijpen, moeten we nauwkeuriger kijken hoe een kind je scherm interpreteert.
De manier waarop jij of ik de inhoud op ons handheld-apparaat bekijkt (of wat dan ook elektronisch) is enorm verschillend van de manier waarop een kind het bekijkt. Neem bijvoorbeeld deze bekende mock-ups:
Als ervaren gebruiker zou je de beschrijving op de knop of het tabelelement bekijken en de weg vinden naar de gewenste inhoud. Dit is niet altijd het geval voor een kind. U kan een knop met het woord zien Spelen erop en instinctief weten wat te doen, maar kan een kind van één jaar dezelfde knop lezen en hetzelfde begrijpen? Waarschijnlijk niet. De typische menustructuren werken gewoon niet goed als ze zijn gericht op de echt jonge mensen. Dus wat te doen?
Laten we eens kijken naar een aantal menustructuren die beter zijn gericht op peuters:
Wat we in deze voorbeelden hebben veranderd, is dat de gebruiker dat nu is visueel gericht op het pad dat we wensen. We verwijderen de noodzaak voor het kind om te begrijpen wat elke knop doet, en trekken in plaats daarvan hun aandacht naar objecten op basis van grootte of locatie.
Normaal gesproken, als al het andere gelijk is, kunt u verwachten dat het kind naar het grootste object op het scherm wordt getrokken. Omgekeerd, als u veel in uw scherm hebt, is het verwijderen van het menu of de knoppen alles bij elkaar een goede benadering, eenvoudigweg elke aanraking op het scherm nodig om verder te gaan met uw inhoud. Er zijn voor- en nadelen voor elke GUI die u besluit te gebruiken.
Ongeacht hoe je het benadert, wanneer je een scène op het scherm weergeeft die niet jouw inhoud is, heb je een barrière gecreëerd tussen het kind en je spel.
Laten we twee knoppen bekijken:
Hier is nog een voorbeeld van het visueel doorgeven van informatie aan uw gebruiker. Hoewel deze twee knoppen hetzelfde betekenen, geeft de knop aan de linkerkant beter aan een kind door wat ze kunnen verwachten.
Foto's betekenen meer voor een jong kind dan woorden doen. Tekst is een vijand van het peuter-menu, dus gebruik het spaarzaam. Dit geldt ook voor optietoetsen en navigatieknoppen. "Terug" betekent minder dan een grafische afbeelding. Hetzelfde geldt voor 'Opnieuw afspelen', 'Menu', enzovoort.
Ontwerp uw navigatie-items zoals u zou doen voor een wereldwijde markt: minimaliseer tekst en gebruik grafische aanwijzingen.
Je menu's moeten van het scherm komen. Er zijn een aantal geweldige op kleuren gebaseerde tutorials op deze site om u te helpen bij het kiezen van een kleurenpalet voor uw game of app.
Houd voor het menu uw knoppen of interactieve objecten helder en levendig, en uw achtergrondobjecten meer gedempt. Een schaduweffect op de voorgrondobjecten helpt ook om hen de indruk te geven dat ze van het scherm "knallen" en daarom waarschijnlijker de aandacht trekken.
Kijk hoe veel meer de knoppen eruit springen als de achtergrondafbeeldingen wazig zijn?
Evenzo is geluid een enorme attractie voor kinderen. Lichte, vrolijke muziek zal enige aandacht trekken. Red de donkere broeierige muziek en de heavy metal riffs voor je RPG's.
Wanneer u achtergrondmuziek voor uw app selecteert, moet u ook voorzichtig zijn om een melodie te vinden die ouders kunnen verdragen. Zij zijn degenen die het laatste woord hebben over de vraag of uw app wel of niet op het apparaat kan worden gebruikt.
We hebben enkele krachtige tools in ons arsenaal, maar we kunnen het beter doen. Tot nu toe is ons menu nog steeds vrij statisch en saai. Kinderen gebruiken dit apparaat voor een visuele stimulus, en als je je menu wat specerijen geeft, zal dit helpen hun interesse te behouden.
Dit wordt bereikt met een paar trucs, namelijk animaties, acties en deeltjeseffecten. U kunt de hoofdpersoon laten glimlachen en zwaaien in de hoek, of een trein die over de onderkant van het scherm rijdt, of een willekeurig aantal getimede willekeurige gebeurtenissen die allemaal tegelijkertijd naast of achter uw menu plaatsvinden.
Ik zou echter waarschuwen voor te veel van deze "ruis". Alles wat uw menu niet ten goede komt (dat wil zeggen, alles dat er gewoon is voor de show), zal uw gebruiker afleiden van uw daadwerkelijke GUI. In plaats van deze ruis toe te voegen, waarom niet enkele eenvoudige acties uitvoeren op uw bestaande menu om de aandacht van de gebruiker te trekken en wat aandacht te schenken aan uw scène in het proces? Bijvoorbeeld, een knop visueel laten bewegen, of groeien en vervolgens in een reeks krimpen, is een geweldige manier om de aandacht erop te vestigen.
Hier is een eenvoudige vergelijking van een statische knop met een pulserende:
Het oog wordt instinctief naar de bewegende knop getrokken. Ik gebruik graag acties om dit effect in mijn programma's te creëren. De code voor een dergelijke actie wordt hier weergegeven (de code is geschreven in Objective-C, maar is eenvoudig aan te passen aan andere talen):
// Maak de niet-bewegende knop als een sprite SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (self.size.width / 4, self.size.height / 2); [self addChild: knop1]; // Maak de bewegende knop als een sprite SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (self.size.width * .75, self.size.height / 2); [self addChild: button2]; // Maak de basisacties voor het opschalen van de afbeelding SKAction * pulseOut = [SKAction scaleTo: 1.2 duration: 0.5]; SKAction * pulseIn = [SKAction scaleTo: 1.0 duration: 0.5]; // Maak een reeks schaalbewerkingen en herhaal ze voor altijd in een lus. SKAction * sequence = [SKAction sequence: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [SKAction repeatActionForever: sequence]; // Voer die actiereeks op de betreffende knop uit [button 2 runAction: repeatSequence];
Het mooie aan acties is dat ze geen extra grafische middelen nodig hebben. Er is geen effect op de grootte van je app-bundel en je hoeft geen artiest in te huren om een reeks afbeeldingen voor je te tekenen. Dat gezegd hebbende, kunt u vergelijkbare effecten bereiken met traditionele animatiereeksen en atlasbestanden.
Je knop verplaatsen is geweldig, maar wat als we het nog meer van het scherm kunnen laten springen? Dit is waar deeltjeseffecten in uw voordeel kunnen werken. Een deeltje is gewoon een afbeelding die we duizenden keren kunnen gebruiken om een effect te creëren.
We kunnen een ander goed uitziend effect creëren om enige aandacht te vestigen op onze knoppen met de toevoeging van een enkele kleine afbeelding, een beschrijvings-XML-bestand en drie regels code. De fijne kneepjes achter partikeleffecten en acties zijn iets buiten het bereik van deze tutorial, maar voor de volledigheid is hier de code om het bestand te laden:
// Maak een particle effect emitter met een bestand SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" ofType: @ "sks"]]; // Plaats het Particle-effectknooppunt op de knop, maar daarachter emitter.position = CGPointMake (button2.position.x, button2.position.y); emitter.zPosition = -100; // voeg de emitter toe aan de game-scène [self addChild: emitter];
En hier is het resultaat:
Het beeld krijgt meer diepte van dit effect en krijgt er zelfs meer aandacht naar.
Dus, wat was er mis met dat menu van vroeger?
Toen ik het aan mijn jonge zoon gaf om te testen, bleef hij proberen de geanimeerde titel aan te raken. De Play-knop stond stil, en hoewel hij groot en prominent op het scherm was, bleef hij aangetrokken tot de stuiterende geanimeerde titel. Hij raakte gefrustreerd en voordat ik hem kon laten zien hoe hij naar het volgende scherm kon gaan, drukte hij op de gevreesde Home-knop, op zoek naar iets anders.
Ik had twee van mijn tips van boven gevolgd, maar had een cruciale misstap: afleiding. Ik had per ongeluk een barrière gecreëerd in mijn startscherm.
Vergeet niet dat als je peuters behandelt, je niet kunt verwachten dat je het geduld hebt om uit te zoeken hoe je je app kunt laten werken. Als het na twee pogingen niet logisch is, gaan ze verder. Verwijder barrières en maak het eenvoudig en intuïtief zodat iemand zonder schriftelijke taalvaardigheid of productervaring weet wat hij moet doen.
Met dat in gedachten, hier zijn enkele richtlijnen om mee weg te nemen:
Het beste advies dat ik je kan bieden, is dit: het beste menu voor een toepassing of spel voor peuters is helemaal geen menu.
Als uw gebruiker op meer dan één knop moet klikken om bij uw inhoud te komen, heeft u er te veel. De enige echte reden om een knop in uw app te hebben, is als u uw gebruikers meer dan één activiteit aanbiedt om uit te kiezen. Maak in dit geval elke activiteit een knop met een vergelijkbare grootte en een gemarkeerde knop en zorg ervoor dat alle elementen gelijkwaardig zijn.
Als uw inhoud op meer dan één scherm moet passen, laat dan altijd een visuele indicatie voor de gebruiker dat er meer inhoud beschikbaar is. In deze gevallen gebruik ik een "gluren" -functie om een deel van de volgende knop weer te geven, zoals in deze video:
Bedankt voor het lezen en ik hoop dat je deze discussie inzichtelijk hebt gevonden. Als u opmerkingen heeft, kunt u deze hieronder laten staan. Ik zie ook graag alle menu's die u voor uw eigen apps maakt.
Ik heb een voorbeeldprojectbestand bijgevoegd bij deze zelfstudie, geschreven in Objective-C met xCode 5 voor het iOS-platform. Dit project toont een voorbeeldvergelijking van twee knoppen, de ene statisch en de andere inclusief actiegebaseerde pseudo-animaties en deeltjeseffecten.
Accentsconagua