6 migliori pratiche per la progettazione UX mobile

Non si tratta di cose enormi e ridicole che dobbiamo fare. Si tratta di piccole cose che possono fare una grande differenza.

Paul Bennett, TED-talk "Il design è nei dettagli"

Non si tratta solo del diavolo che si nasconde dietro i dettagli, ma riguarda anche il design stesso. Spesso sentiamo dire che meno design, meglio è, e il design che soddisfa al meglio le nostre aspettative è quello che è totalmente impercettibile per un utente con cui interagisce. Ma quali sono le migliori pratiche per ux design in questi giorni, ed è diverso da quello che ci piaceva un anno fa? I nostri designer hanno cercato di implementare le best practice di ux design, lasciando che la loro esperienza di lavoro con le aziende mobili parli per loro.

1. Barra di navigazione della scheda rispetto al menu Hamburger.

La differenza tra questi due è evidente per tutti coloro che hanno mai lavorato con le interfacce mobili, le startup e le migliori pratiche per l'esperienza utente. In sostanza, il menu dell'hamburger (o pulsante dell'hamburger) è un pulsante posizionato tipicamente nell'angolo superiore di un'interfaccia utente grafica. Prende la forma di un'icona composta da tre linee orizzontali parallele (visualizzate come ☰ ), che suggeriscono un elenco, e prende il nome dalla sua somiglianza con gli strati di hamburger, frittelle o un hot dog in un panino.
[Fonte: Wikipedia]

Ecco un esempio del menu hamburger implementato:

Quei menu apparivano ovunque sui dispositivi mobili, prima che apparisse la seconda opzione della barra delle schede. Il menu si trova normalmente nella parte inferiore dello schermo dell'app e il suo scopo principale è consentire all'utente di semplificare la sua esperienza mobile all'interno di questa app. Spesso una barra delle schede consiste in 5 schede visibili, sebbene non ci siano limiti, solo le dimensioni e l'orientamento del dispositivo. La navigazione nella barra delle schede ha dimostrato di massimizzare l'usabilità del prodotto in molti modi che non ha ancora fatto.

Solo un anno fa circa Awwards.com ha pubblicato diversi materiali, relativi principalmente alle tendenze del design; nei loro post hanno acclamato l'implementazione del menu dell'hamburger durante la progettazione per i dispositivi mobili, poiché questo era uno dei modelli più alla moda negli anni 2015-2016. Tuttavia, come è già stato menzionato nell'articolo "Tendenze delle applicazioni mobili nel 2017", l'unica cosa che puoi prevedere sulle tendenze è che cambieranno. Lo stesso è successo al pulsante dell'hamburger: è sopravvissuto a se stesso. La navigazione della barra delle schede è una delle pratiche più comuni in questi giorni, in quanto rende l'interfaccia più accessibile per un utente, oltre a salvargli la cronologia delle schede. Anche se è un'opzione reattiva orientata all'utente, non è una best practice per la progettazione di un'esperienza utente personalizzata per ogni singola applicazione: ad esempio, Uber, Google Maps e molti altri casi popolari non richiedono schede per effettuare la navigazione in-app facile per un utente; sebbene le tendenze del design UX suggeriscano che questo pulsante scomparirà in futuro e la scelta sicura per tutte le migliori pratiche dell'esperienza utente sarebbe senza dubbio 5 schede o meno in basso sullo schermo.

2. Modalità di interfaccia.

Ricordi la fastidiosa schermata di avviso che ti sveglia ogni mattina? Ebbene, il termine progettuale per questo tipo di interazione è modalità. Come parte delle linee guida per l'interfaccia umana di iOS, la modalità svolge un ruolo essenziale nella costruzione di un dialogo interfaccia-utente. Il termine modalità nel design significa fondamentalmente che un messaggio o un'attività completata si sovrappone allo schermo dell'app e l'utente a sua volta deve scegliere se ignorarlo o leggere/visualizzare un messaggio. Inoltre, al posto della nota freccia indietro puoi generalmente individuare un'icona x, allo scopo di annullare la visualizzazione modale. L'icona x è di grande importanza qui, poiché gli utenti devono individuare un modo sicuro e ovvio per ignorare l'attività modale. La modalità può essere presentata anche in 4 parti:

• Schermo intero (copre l'intero schermo)
• Foglio di pagina (copre parzialmente lo schermo)
• Foglio modulo (centrato sullo schermo)
• Contesto corrente (copre la vista padre)

La modalità è utile quando è necessario attirare l'attenzione dell'utente su un certo punto, ma Apple consiglia vivamente di non overdose con vari popover - solo quando è necessario completare un'attività per continuare a utilizzare l'app o le informazioni nel popover sono davvero precedenti per mantenere il lavoro dell'applicazione.
Ecco uno degli esempi di come dovrebbero essere implementate le schermate di modalità nella progettazione di app per dispositivi mobili:

[Fonte immagine - Linee guida per l'interfaccia umana iOS]

Un'altra raccomandazione a portata di mano sarebbe quella di rendere i popover della modalità il minimo incentivo, perché gli utenti ottengono ancora il diritto di disattivare le notifiche push della tua app e una schermata di incentivo potrebbe indurli a farlo.

3. Segmentazione dei contenuti.

Se prendi Instagram, Facebook, Twitter o qualsiasi altra rete popolare, noterai che il feed in-app è costituito da contenuti di diversi tipi di contenuto e il miglior design possibile per l'app mobile è quando il contenuto è riconoscibile; quando un utente non ha bisogno di leggere i testi allegati per capire se si tratta di un post video o fotografico in quanto le miniature sono autoesplicative. Ecco il concetto di un'applicazione che pubblicizza varie attività della vita notturna in cui è stata implementata la segmentazione dei contenuti.

4. Micro-interazioni.

Sono già stati scritti un centesimo e una dozzina di materiali sull'essenzialità delle micro-interazioni all'interno dell'app. Ogni tua azione è rispecchiata dall'interfaccia stessa e il risultato delle tue azioni rispettivamente sono quelle interazioni.
Le migliori pratiche di progettazione UX mobile che raccomanderemmo senza pensarci due volte includerebbero quanto segue:

• Segnaposto animati
• Mi piace animati (se necessario): poiché questi due migliorano il livello di comprensione che i tuoi prodotti stabiliscono con gli utenti, migliora il livello di comprensione creato per e con loro.

Citando il capo del dipartimento di design di Mind Studios, Arsentiy Gorelik, "Il design potrebbe essere descritto come perfetto se non solleva domande per un utente" .
Instagram è un perfetto esempio di un lavoro di design reattivo, con tutte le micro-interazioni incluse.

5. Approccio progettuale a 2 piani.

Nonostante tutto e le linee guida di progettazione UX delle app mobili precedentemente menzionate, i progettisti spesso dimenticano che ci sono due piani in cui avviene effettivamente lo sviluppo: x e y, rispettivamente le dimensioni verticali e orizzontali. Sono anche chiamati pensiero lineare e laterale (secondo la Interaction Design Foundation). Una delle migliori pratiche ux di un'app mobile è quando l'interazione con il contenuto in-app è organizzata sia orizzontalmente che verticalmente; poiché ogni tipo di contenuto è creato per un diverso tipo di cooperazione dell'utente.
Ad esempio, il doppio tocco di Apple sul pulsante Home fa apparire il contenuto più in basso sullo schermo

Quando si tratta del piano Y, gli swipe e i gesti commessi sono esempi dell'interazione verticale.

6. Interazione con le liste sul cellulare.

Ben consapevole, l'elenco avviene in modo diverso su ciascuna piattaforma: su iOS l'elenco può essere cambiato con uno swipe sinistro e su Android può essere un lungo tocco sull'elenco puntato. Le tendenze odierne degli smartphone suggeriscono che stiamo passando a gadget più grandi e ingombranti, quindi diventa sempre più complesso scorrere verso il basso l'intero schermo del dispositivo. Quindi, una delle migliori pratiche di progettazione UX mobile sarebbe quella di spostare tutte le interazioni necessarie nella parte inferiore della schermata principale, per evitare gesti indesiderati dell'utente.

L'interfaccia del futuro.

La pratica del design, e più specificamente, la pratica del design dell'interfaccia ha fatto molta strada prima di apparire nel modo in cui li vediamo presentati oggi, ma questo non è il culmine dell'intera evoluzione dell'interfaccia. Come suggerisce coraggiosamente il nostro design dell'esperienza utente mobile, un'interfaccia del futuro includerà tutti i migliori modelli e filosofie di progettazione iOS e Android, mescolandoli tutti in un'unica esperienza impeccabile. Mentre si sente in giro lo slogan del futuro - "app per tutti gli schermi", significa che le applicazioni future sono destinate a diventare simili; avranno lo stesso aspetto su tutte le piattaforme del mondo.

Eccole, le migliori pratiche più fedeli nel design UX che ci sentiremmo sicuri di raccomandare quando si tocca l'argomento del design grafico mobile. Le informazioni fornite sopra coprono principalmente le intuizioni del progettista UI/UX; tuttavia, con la creazione di siti Web mobili può anche sembrare una manciata, con qualche somiglianza al punto. L'era intelligente è qui, in attesa che tu e il tuo design vi entriate - quindi forse sarebbe un ottimo momento per smettere di tenere i vostri cavalli?

Non perdere i nostri articoli sul flusso di design: 5 cose che alla fine uccideranno il tuo design utilizzabile e i 5 migliori caratteri sicuri per un designer.

Scritto da Arsentiy Gorelik, Yulia Golovko ed Elina Bessarabova.