Share
Il mercato della telefonia mobile ha iniziato a colpire le giovani generazioni in grande stile. Intere sezioni dei mercati delle app sono dedicate alle applicazioni e ai giochi finalizzati alla demografia pre-scolastica. Gli sviluppatori hanno preso nota e il mercato è diventato sempre più affollato.
Quando crei un'app mirata alla generazione più giovane, devi essere consapevole di due cose fondamentali:
In questo articolo, parlerò delle tipiche interfacce utente associate alla maggior parte delle applicazioni basate su touch screen e su come modificarle al meglio quando ci si avvicina a questo mercato.
Un tema che noterai all'interno di questo articolo è quello di ridurre gli ostacoli all'ingresso. Più schermi vengono posizionati tra una mente giovane e il contenuto previsto, più è probabile che il bambino stia diventando impaziente e rinunci alla tua app.
Iniziamo con ciò che la maggior parte delle app inizia con la loro esperienza: una schermata iniziale. Il veloce da asporto? Non usarne uno. Nessun bambino di due anni che abbia mai visto che JohnSmithDevelopment ha costruito la sua app song-and-dance; lei o lui vuole solo arrivare alla musica. Poi viene il clic temuto del pulsante home e il tuo pubblico di destinazione sfuggente è fuori per dare un'occhiata a qualcos'altro.
I bambini hanno una breve durata di attenzione. Vuoi raggiungere i prodotti della tua app il più rapidamente possibile. Inizia la musica di sottofondo all'avvio e non lasciare schermi stagnanti. La noia è il tuo nemico.
Spesso, il prossimo elemento presentato presente è una "schermata iniziale". In genere questa schermata presenta il titolo della tua app e un pulsante contrassegnato Giocare o Inizio o con un simbolo equivalente, qualcosa di simile a questo:
In genere questa schermata esegue un'animazione, rimbalza attorno al titolo o qualcosa di simile. Questo particolare esempio di schermata iniziale ha un errore lampante, ma per capirlo, dobbiamo guardare più da vicino come il bambino interpreta il tuo schermo.
Il modo in cui tu o io visualizziamo il contenuto sul nostro dispositivo palmare (o qualsiasi altra cosa elettronica, per quella materia) è molto diverso dal modo in cui un bambino lo vede. Prendi, per esempio, questi modelli familiari:
Come utente esperto, esamineresti la descrizione sul pulsante o sull'elemento della tabella e troveresti la strada per il contenuto desiderato. Questo non è sempre il caso di un bambino. tu potrebbe vedere un pulsante con la parola Giocare su di esso, e istintivamente sapere cosa fare, ma può un bambino di un anno leggere lo stesso pulsante e capire allo stesso modo? Probabilmente no. Le tipiche strutture di menu semplicemente non funzionano bene se rivolte ai più giovani. Quindi che si fa?
Diamo un'occhiata ad alcune strutture di menu che sono meglio indirizzate ai bambini piccoli:
Quello che abbiamo cambiato in questi esempi è che l'utente è ora visivamente diretto verso il sentiero che desideriamo. Rimuoviamo la necessità che il bambino capisca cosa fa ogni pulsante e invece attira la sua attenzione sugli oggetti in base alla dimensione o alla posizione.
In genere, a parità di tutti gli altri, è possibile aspettarsi che il bambino venga disegnato sull'oggetto più grande sullo schermo. Viceversa, se sul tuo schermo è presente molto, rimuovere il menu oi pulsanti tutti insieme è un buon approccio, semplicemente richiedendo un qualsiasi tocco sullo schermo per spostarti sul tuo contenuto. Ci sono pro e contro per ogni GUI che decidi di impiegare.
Indipendentemente da come ti avvicini, ogni volta che rendi una scena sullo schermo che non è il tuo contenuto, hai creato una barriera tra il bambino e il tuo gioco.
Diamo un'occhiata a due pulsanti:
Ecco un altro esempio di trasmissione di informazioni visivamente al tuo utente. Mentre questi due pulsanti significano la stessa cosa, il pulsante a sinistra trasmette meglio a un bambino ciò che possono aspettarsi.
Le immagini significano più per un bambino che le parole. Il testo è un nemico del menu del bambino, quindi usalo con parsimonia. Ciò vale anche per i pulsanti di opzione e i pulsanti di navigazione. "Indietro" significa meno di un grafico a freccia. Lo stesso vale per "Replay", "Menu" e così via.
Progetta i tuoi oggetti di navigazione come faresti per un mercato globale: minimizza il testo e usa indicazioni grafiche.
I tuoi menu devono uscire dallo schermo. Ci sono alcuni fantastici tutorial a colori su questo sito per aiutarti a iniziare a scegliere una tavolozza di colori per il tuo gioco o app.
Per quanto riguarda il menu, mantenere i pulsanti o gli oggetti interattivi luminosi e vivaci e gli oggetti di sfondo più attenuati. Un effetto di ombreggiatura sugli oggetti in primo piano aiuta anche a dare loro l'impressione di "scoppiare" fuori dallo schermo e quindi è più probabile che attiri l'attenzione.
Vedi quanto più i pulsanti appaiono quando la grafica di sfondo è sfocata?
Allo stesso modo, il suono è una grande attrazione per i bambini. La musica leggera e vivace attirerà l'attenzione. Salva la musica dark cup e i riff heavy metal per i tuoi giochi di ruolo.
Inoltre, quando selezioni la musica di sottofondo per la tua app, fai attenzione a trovare un motivo che i genitori saranno in grado di tollerare. Sono loro che avranno l'ultima parola sul fatto che la tua app abbia una certa capacità di rimanere sul dispositivo.
Abbiamo alcuni strumenti potenti nel nostro arsenale, ma possiamo fare di meglio. Finora, il nostro menu è ancora abbastanza statico e noioso. I bambini usano questo dispositivo per uno stimolo visivo e dare al tuo menu alcune spezie aiuterà a mantenere il loro interesse.
Questo si ottiene con alcuni trucchi, ovvero animazioni, azioni ed effetti particellari. Potresti avere il personaggio principale che sorride e saluta in un angolo, o un treno che si muove attraverso la parte inferiore dello schermo, o un qualsiasi numero di eventi casuali temporizzati che si verificano contemporaneamente in uno o accanto al tuo menu.
Metterei in guardia contro troppo da questo "rumore", però. Qualunque cosa che in realtà non avvantaggia il tuo menu (cioè, tutto ciò che è solo lì per lo show), distrarrà il tuo utente dalla tua GUI attuale. Invece di aggiungere questo rumore, perché non eseguire alcune semplici azioni sul tuo menu esistente per attirare l'attenzione dell'utente e dare qualche zip alla tua scena nel processo? Ad esempio, avere un pulsante spostarsi visivamente, o crescere e poi ridursi in una sequenza, è un ottimo modo per attirare l'attenzione su di esso.
Ecco un semplice confronto tra un pulsante statico e uno pulsante:
L'occhio è istintivamente attratto dal pulsante in movimento. Mi piace usare le azioni per creare questo effetto nei miei programmi. Il codice per tale azione è mostrato qui (il codice è scritto in Objective-C, ma è facilmente adattabile ad altre lingue):
// Crea il pulsante non in movimento come sprite SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (self.size.width / 4, self.size.height / 2); [self addChild: button1]; // Crea il pulsante di spostamento come sprite SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (self.size.width * .75, self.size.height / 2); [self addChild: button2]; // Crea le azioni di base per ridimensionare l'immagine SKAction * pulseOut = [SKAction scaleTo: 1.2 duration: 0.5]; SKAction * pulseIn = [SKAction scaleTo: 1.0 duration: 0.5]; // Crea una sequenza delle azioni di ridimensionamento e le ripeti per sempre in un ciclo SKAction * sequence = [sequenza SKAction: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [SKAction repeatActionForever: sequence]; // Esegui la sequenza di azioni sul pulsante in questione [button2 runAction: repeatSequence];
Il bello delle azioni è che non richiedono risorse grafiche aggiuntive. Non c'è alcun effetto sulle dimensioni del pacchetto dell'app e non è necessario assumere un artista per disegnare una sequenza di immagini per te. Detto questo, è possibile ottenere effetti simili con le tradizionali sequenze di animazione e file di atlanti.
Avere la tua mossa del pulsante è fantastico, ma se potessimo farlo uscire dallo schermo ancora di più? Questo è dove gli effetti particellari possono funzionare a tuo vantaggio. Una particella è semplicemente un'immagine che possiamo usare migliaia di volte per creare un effetto.
Possiamo creare un altro effetto di grande effetto per attirare l'attenzione sui nostri pulsanti con l'aggiunta di una singola immagine piccola, un file XML di descrizione e tre righe di codice. Le complessità dietro gli effetti particellari e le azioni sono un po 'oltre lo scopo di questo tutorial, ma per il completamento, ecco il codice per caricare il file:
// Crea un emettitore di effetti particella con un file SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" ofType: @ "sks"]]; // Posiziona il nodo Effetto particelle sul pulsante, ma dietro di esso emitter.position = CGPointMake (button2.position.x, button2.position.y); emitter.zPosition = -100; // aggiungi l'emettitore alla scena del gioco [self addChild: emitter];
E questo è il risultato:
L'immagine guadagna più profondità da questo effetto e riceve ancora più attenzione da esso.
Quindi, cosa c'era di sbagliato in quel menu da prima?
Quando l'ho dato a mio figlio per testarlo, ha continuato a cercare di battere il titolo animato. Il pulsante Riproduci era stagnante e, sebbene fosse grande e prominente sullo schermo, continuava ad essere attratto dal titolo animato che rimbalzava. Si sentì frustrato, e prima che potessi mostrargli come arrivare alla schermata successiva, premette il temuto pulsante Home, cercando qualcos'altro.
Avevo seguito due dei miei suggerimenti dall'alto, ma avevo un passo falso cruciale: la distrazione. Avevo inavvertitamente creato una barriera nella mia schermata iniziale.
Ricorda, quando hai a che fare con i bambini piccoli, non puoi aspettarti di avere la pazienza di sistemare come far funzionare la tua app. Se non ha senso per loro dopo due tentativi, si muoveranno. Rimuovere le barriere e renderlo semplice e intuitivo in modo che qualcuno senza conoscenze linguistiche scritte o esperienza sul prodotto sappia cosa fare.
Con questo in mente, ecco alcune linee guida da portare via:
Il miglior consiglio che posso offrirti è questo: il menu migliore per un'applicazione o un gioco rivolto ai più piccoli è nessun menu.
Se il tuo utente deve fare clic su più di un pulsante per ottenere i tuoi contenuti, ne hai troppi. L'unica vera ragione per avere un pulsante nella tua app è se stai presentando i tuoi utenti con più di una attività tra cui scegliere. In questo caso, fai in modo che ogni attività abbia un pulsante di dimensioni simili e evidenziato e renda tutti gli elementi equivalenti in risalto.
Se i tuoi contenuti devono adattarsi a più di uno schermo, lascia sempre all'utente un'indicazione visiva che sono disponibili altri contenuti. In questi casi, utilizzo una funzione di "peeking" per mostrare parte del pulsante successivo, come in questo video:
Grazie per la lettura, e spero che tu abbia trovato questa discussione perspicace. Se avete commenti, non esitate a lasciarli qui sotto. Mi piacerebbe anche vedere tutti i menu che crei per le tue app.
Ho incluso un esempio di file di progetto con questo tutorial, scritto in Objective-C con xCode 5 per la piattaforma iOS. Questo progetto mostra un confronto di esempio di due pulsanti, uno statico e l'altro tra cui pseudo-animazioni basate su azioni ed effetti particellari.
Accentsconagua