Gli schermi dei nostri smartphone sono sempre più grandi. Passiamo oltre 4 ore con i nostri cellulari tra le mani e con essi compiamo le azioni più disparate grazie alle app.
Ma ci chiediamo mai cosa c’è dietro alla scelta di inserire una certa funzionalità o collocare un bottone su cui fare tap proprio in quell’area dello schermo?
Vi raccontiamo le nuove sfide che affrontiamo ogni giorno nello sviluppo delle app mobile per rendere l’esperienza degli utenti sempre fluida e intuitiva.

3.5 pollici. La dimensione dello schermo perfetto

Steve Jobs era fermamente convinto che la dimensione perfetta per lo schermo di un telefono fosse 3.5 pollici che, se ancora ve lo ricordate, era la dimensione di un iPhone 4. Il motivo era semplice: questa dimensione permetteva di tenere il telefono con una mano sola e Jobs era convinto che nessuno avrebbe comprato dei telefoni con schermi di dimensioni maggiori, come quelli che stava producendo Samsung già nel 2011.

Non è andata proprio così…

Le cose sono decisamente cambiate. La stessa Apple ha cambiato rotta abbandonando la dimensione definita dal suo storico fondatore. Adesso i telefoni con uno schermo di dimensione inferiore a 4 pollici non arrivano nemmeno all’1%! E se pensiamo agli ultimi usciti (iPhone12, Xiaomi M11, Samsung Galaxy 21) non scendiamo mai sotto i 6 pollici e arriviamo persino a 6.8!

Perché? Beh, è cambiato l’utilizzo che facciamo dello smartphone che non è più solo un telefono. Pensiamo a quante cose facciamo ogni giorno con i nostri smartphone: leggiamo un articolo, mandiamo mail di lavoro, guardiamo una serie tv, una ricetta su youtube, facciamo foto e postiamo sui social, chattiamo, facciamo acquisti…solo per dirne alcune. Inevitabilmente questi tipi di utilizzo richiedono uno spazio maggior per essere adeguatamente fruiti.

La dimensione dello schermo dello smartphone è aumentata nel corso degli anni

Ma noi, come utilizziamo lo smartphone?

Facciamo un prova. Prendete in mano il telefono e iniziate ad usarlo, fate quello che fate sempre.

Bene, la maggior parte di voi avrà utilizzato una mano sola e il vostro pollice avrà eseguito ogni azione. Come facciamo a saperlo? Perché secondo le statistiche il 49% degli utenti fa proprio questo.
Il restante 51% utilizza il telefono con due mani, o con una mano di sostegno e l’altra che agisce sullo schermo (36%), oppure con entrambe le mani e utilizzando entrambi i pollici (15%).

Le differenti modalità di utilizzo dello smartphone

Il modo in cui navighiamo sullo schermo del nostro telefono unito alla crescita delle dimensioni degli smartphone ha messo gli sviluppatori di app e gli UX designer di fronte a nuove sfide. Infatti è davvero molto importante tener conto della modalità di utilizzo del telefono per definire dove collocare i più importanti componenti e le maggiori funzionalità, per supportare l’utente nella navigazione o nel compiere azioni.
Esistono infatti delle aree che riusciamo meglio a raggiungere sullo schermo e altre che invece richiedono uno sforzo del nostro pollice che si deve allungare oppure accartocciare su se stesso.

Le aree dello schermo più facilmente raggiungibili dal nostro pollice

Una fruizione rapida e distratta

Ma gli sviluppatori e i designer devono anche tenere in considerazione altri importanti aspetti che influiscono sulla fruizione ad una mano sola: quanto utilizziamo il telefono e quando lo utilizziamo.

Il Digital Report del 2021 di Hootsuite e WeAreSocial ci dice che il mobile screen è diventato lo schermo davanti al quale passiamo più tempo, scavalcando persino quello della TV: oltre 4 ore al giorno! Ma fermiamoci un attimo a riflettere: chi di noi sta in modo continuato di fronte al proprio smartphone per 4 ore? Nessuno (ovviamente non dobbiamo pensare a quando ci mettiamo a guardare un film, ma all’uso normale di tutti i giorni). Si tratta piuttosto di una fruizione spezzettata, a volte di pochi secondi giusto per un veloce scroll del feed di instagram e per leggere distrattamente un articolo. Spesso capita addirittura che tra una sessione di utilizzo e l’altra passi davvero pochissimo tempo: mi perdo a guardare il feed di instagram, poi decido di chiudere. Dopo 2 minuti non resisto all’irrefrenabile desiderio di controllare il meteo. Poi blocco di nuovo e dopo 5 minuti, siccome sto aspettando il mio turno alla cassa del supermercato, mi metto a controllare le mail.

Utilizziamo il nostro smartphone in modo estremamente frammentario

Veloce e distratta. Così possiamo definire la nostra fruizione.

E la situazione non cambia se pensiamo a quando utilizziamo lo smartphone. Non vi servirà sforzarvi molto per notare che effettivamente utilizzate il telefono mentre aspettate (una persona, un autobus), mentre vi annoiate (e qui vanno per la maggiore i social) oppure mentre fate altro (quando siete a fare la spesa, mentre camminate per andare a lavoro, mentre portate fuori il cane). Diciamocelo, in questi casi il nostro livello di attenzione non è altissimo…

Nella maggior parte dei casi utilizziamo lo smartphone quando facciamo altro

Facciamo qualche esempio pratico

Bene, dopo questa doverosa premessa che speriamo vi abbia incuriosito e anche fornito spunti di riflessione, passiamo a degli esempi pratici.

Come abbiamo detto il lavoro dello sviluppatore di app e di chi si occupa del UX design deve necessariamente tenere conto della dimensione degli schermi degli smartphone ma anche delle modalità di fruizione degli utenti, e questo va a concretizzarsi in scelte pratiche di progettazione e sviluppo delle app mobile.

Adesso vi proponiamo qualche esempio per farvi comprendere come un componente o una funzionalità di un’app non siano messi lì a caso ma siano studiati per rispondere al meglio alle necessità degli utenti. Passeremo in rassegna quattro categorie nelle quali sarà facile immedesimarsi come utenti.

Navigation

Quando utilizziamo un’app dobbiamo capire cosa offre, come funziona, come navigarla. La base perché un’app abbia successo è che l’utente scopra facilmente e velocemente le funzionalità e ne comprenda l’utilità. Per questo è indispensabile sapersi avvalere in modo adatto di componenti come:

• Menu (dove troviamo tutte le sezioni / informazioni dell’app)
• Navigation bar (ovvero la barra nella quale scrivere quello che cerchiamo)
• Tabs bar (che possiamo trovare in basso (bottom bar) o in alto (top bar) e che raccolgono alcune funzionalità)

Siccome tutti questi aspetti sono davvero le fondamenta della nostra app, è importante che siano collocate in modo ben evidente e che siano intuitive. Ricordiamoci che la nostra fruizione è veloce e distratta, se non troviamo subito il menu sull’app che stiamo usando, se la navigation bar è collocata in una zona difficile da raggiungere per il nostro pollice o se non capiamo subito come navigare nell’app… rischiamo che il nostro utente chiuda l’app e non la riapra nemmeno più!

Prendiamo in esame un caso molto comune: molti contenuti da dover mostrare all’utente. La scelta più comune è l’hamburger menu…no, non dobbiamo ordinare nessun panino, si tratta solo di quelle 3 lineette orizzontali, una sopra all’altra, che danno accesso alle voci di menù a disposizione nella vostra app.
Ecco un esempio che sicuramente avrete presente: Facebook. In basso a destra trovate l’hamburger menu che al suo interno comprende un sacco di cose: il nostro profilo, i ricordi, il meteo, gli amici e tanto, TANTO, altro. Che succede però: perdiamo di vista la schermata principale e soprattutto il nostro pollice soffre un po’ a raggiungere certe sezioni.

Alternativa interessante? Ce la propone un’app che ci siamo trovati ad utilizzare moltissimo in questo anno di pandemia: Google Teams. Si chiama flyout menu ed è collocato alla base del nostro schermo e, nel caso di Google Teams, si trova nei tre pallini di “Altro”. Cliccandoci si aprirà un menu facilmente utilizzabile con una mano sola e che non compromette la visione della schermata principale.

Possono anche venirci in aiuto le gesture, ovvero tutti quei movimenti che ci permettono di attivare delle funzioni e che spesso sono anche delle scorciatoie. Tra l’altro le gesture accorciano i tempi, sono intuitive e perfettamente in linea con l’uso ad una mano sola dello smartphone.
Facciamo un esempio fra tutti: Instagram. Sicuramente avrete visto che dalla schermata principale potrete accedere ai Direct semplicemente strisciando il dito da destra a sinistra, o, con movimento opposto, alla fotocamera e quindi a tutte le funzionalità collegate (Pubblica, Storia, In diretta ecc.)

Navigation – Facebook, Instagram e Google Teams a confronto. Differenti modalità di accesso e utilizzo del menu

Core Action

Si tratta delle azioni principali che possiamo svolgere con un’app: creare, editare, postare, condividere. Sicuramente questa categoria può essere spiegata al meglio facendo esempi riguardanti due utilizzi molto comuni: il lavoro e l’interazione sociale. Abbiamo detto che utilizziamo molto il telefono anche per lavoro, e non solo per le chiamate o i messaggi, ma per inoltrare un file, o per scrivere un testo, una mail, realizzare una presentazione. Utilizziamo lo smartphone altrettanto per fare foto da condividere in un post, per fare un video da postare nelle stories, per condividere la tua canzone del momento con un amico.

Bene, qualsiasi di queste core action tu voglia fare, serve che queste funzionalità siano chiaramente visibili e posizionate nell’area giusta.
Ad esempio, se stiamo scrivendo un testo utilizzando Documenti di Google abbiamo a portata di pollice tutte le funzionalità più importanti (formato, colore, allineamento…) esattamente sopra alla tastiera con cui stiamo scrivendo.

E se invece vogliamo condividere un video che ci ha particolarmente colpito? Le funzionalità di condivisione verso social o tramite altri canali sono ormai indispensabili e devono quindi essere a portata di tap e permettere all’utente di condividere in modo semplice e completo.
Prendiamo come esempi due app molto note. Con Youtube basterà fare tap sull’icona di condivisione per avere a disposizione una vasta scelta di canali e per personalizzare anche il nostro messaggio, con Shazam abbiamo addirittura due bottoni per la condivisione: in alto a destra oppure all’interno del menu Altro!

Core Action – Condivisione di un video da Youtube

Checkout e pagamento

Durante il 2020 gli acquisti online hanno subito una vera e propria impennata, complice la pandemia da Covid-19. Questo trend probabilmente non avrà una flessione nei prossimi mesi, sia perché siamo ancora alle prese con le problematiche legate alla pandemia e sia perché molti utenti hanno dichiarato che manterranno anche nel futuro le abitudine di acquisto online assunte durante i periodi di lockdown.
Diamo qualche numero:

• il 64% di utenti tra i 16 e i 64 anni utilizza app di acquisto online
• in Italia il 79,7% degli utenti tra i 16 e 64 anni ha acquistato qualcosa online negli ultimi mesi
• non solo i giovani ma è sorprendente vedere che anche le generazioni più mature, dai 45 ai 64 anni, effettuano acquisti online
• nel 2020 il settore Fashion & Beauty ha mosso cifre da capogiro: 665,6 bilioni di dollari!
• il settore che nel 2020 ha avuto un maggior incremento in termini di acquisti online è il settore Food & Personal care con una crescita del +41%!

È quindi chiaro quanto le shopping app debbano rispondere alle necessità degli utenti, accompagnandoli nel processo di acquisto nella maniera più chiara, intuitiva e veloce possibile.

Il Baymard Institute ha evidenziato in uno studio che il 69.80% degli utenti abbandona il proprio carrello, senza quindi procedere all’acquisto, e tra le motivazioni spicca un fase di checkout troppo lunga o complicata. Questo dato è ancora più rilevante quando parliamo di app perché qui entra in gioco uno spazio limitato e anche la difficoltà nell’inserire i dati.

Gli sviluppatori devono quindi aiutare l’utente a compiere il checkout in pochi passaggi, tutti a portata di pollice, e ad avere la possibilità di acquisto immediato (pensate a quando dovete acquistare il biglietto di un treno all’ultimo minuto, la velocità è essenziale!).
Se il processo di acquisto si può ridurre a tre step (aggiunta al carrello, scelta di eventuali varianti o prodotti simili, acquisto), l’app deve rendere evidenti i passaggi e le componenti essenziali e soprattutto far sì che siano facilmente raggiungibili.

Un esempio su tutti: Amazon. Una volta selezionato il prodotto sull’app potrai vedere tutte le specifiche, vedere numerosi suggerimenti (spesso comprati insieme, potrebbero piacerti anche, prodotti simili, articoli da esplorare) e recensioni…tutto ovviamente facilmente navigabile con il nostro pollice.

Checkout e Pagamento – Suggerimenti e informazioni prima di un acquisto su Amazon

Ricerca e filtri

La ricerca, i filtri e gli ordinamenti sono essenziali per trovare rapidamente proprio quello che stiamo cercando. Servono a destreggiarsi tra una gran quantità di contenuti e informazioni e arrivare a quelli per noi rilevanti. Il rischio: l’abbandono della navigazione.
Ci viene in aiuto ancora uno studio del Baymard Institute che, utilizzando l’esempio di siti e-commerce, ha notato che se l’elenco dei prodotti non è facilmente consultabile si raggiunge un tasso di abbandono della navigazione del 67 – 90%. È sufficiente aggiustare l’elenco dei prodotti per renderlo più fruibile per far scendere questo tasso al 17 – 33 %!

Il primo aspetto da considerare è che la barra di ricerca sia collocata dove è facilmente visibile e raggiungibile, a questo poi va aggiunto di gestire al meglio le categorie (che devono essere scorciatoie, non un labirinto) e i filtri (che potrebbero essere interattivi, con opzioni multiple). Possono essere anche utili dei suggerimenti basati sui comportamenti degli utenti (ciò che usano / cercano di più, oppure quello che hanno cercato / usato recentemente) oppure anche le gesture per navigare più velocemente i cataloghi.

Facciamo alcuni esempi partendo dalla funzionalità più basilare per questo tipo di app: la barra di ricerca.
In termini di raggiungibilità della barra di ricerca possiamo confrontare due app molto note, per vedere quale scelta è migliore per l’utente. Apple maps ha la barra di ricerca a perfetta portata di pollice, mentre la sua concorrente Android, Google Maps, ha la barra di ricerca in cima allo schermo, decisamente difficile da raggiungere se utilizziamo il telefono con una mano sola, il nostro pollice soffrirà ad arrivare fin lassù!

Ricerca e filtri – Barra di ricerca su Apple e Google Maps

Ci sono poi delle barre di ricerca che offrono già suggerimenti all’utente. È il caso di Netflix che, una volta fatto tap sulla barra di ricerca, non solo mette immediatamente a disposizione dell’utente il tastierino ma presenta già una lista di suggerimenti. E anche dopo aver digitato il genere o il titolo che cerchiamo, Netflix ci offre una scelta di contenuti simili. Un altro caso è Instagram in cui nella sezione Cerca possiamo visualizzare contenuti customizzati in base alle nostre ricerche e filtrarli.

Ci pensiamo noi!

Ogni giorno, quando sviluppiamo app, ci troviamo di fronte a tutte queste sfide e diamo sempre il massimo per realizzare prodotti che non siano solamente belli ma soprattutto che siano funzionali e che offrano all’utente un’esperienza ottimale.
Per farlo siamo sempre al passo con novità ed aggiornamenti e il nostro reparto dedicato allo sviluppo app iOS e Android è in continua interazione con quello che si occupa di UX&UI Design. 

Come avrete capito leggendo questo articolo, dietro ad un’app c’è davvero tanto lavoro e tanta progettazione, perché raggiungere il giusto equilibrio tra le funzionalità da offrire, un’esperienza utente fluida e l’utilizzo ottimale dello spazio che i nuovi smartphone ci mettono a disposizione richiede tempo, attenzione ad ogni dettaglio e tanta passione.

Per fortuna le sfide non ci spaventano e con la nostra passione e la nostra esperienza riusciamo a sviluppare app che sono davvero prodotti di boutique, cuciti su misure delle necessità del cliente e dell’utente. App che lasciano il segno!