Introduzione ai modelli di progettazione iOS

Le piattaforme mobili più consolidate hanno una serie di modelli di progettazione, linee guida scritte o non scritte su come le cose dovrebbero apparire, sentire e funzionare. L'applicazione di modelli di progettazione comprovati migliora l'usabilità del prodotto, aumenta la conversione e offre una sensazione di familiarità agli utenti. Ignorare gli standard confonderà e frustrerà gli utenti ed è qualcosa che ogni designer dovrebbe cercare di evitare il più possibile.

In questo articolo, diamo uno sguardo ai modelli di design su iOS mostrando alcuni esempi che illustrano come le applicazioni esistenti applicano alcuni di questi modelli di progettazione.

Quali sono i modelli di design?

In breve, un modello di progettazione è una soluzione ricorrente che risolve un problema di progettazione specifico. Poiché è ricorrente e gli utenti lo incontrano spesso, acquisiscono rapidamente familiarità con la soluzione fornita dal modello.

L'icona dell'hamburger, ad esempio, è diventata un modello di design ben noto. Sappiamo tutti che aprirà un menu quando l'icona viene toccata. Questo comportamento è così radicato che confonderebbe l'utente se toccando l'icona si ottenesse un'azione diversa.

Ogni volta che i progettisti non seguono schemi di progettazione e scelgono invece di implementare la propria soluzione, sono possibili due risultati:

• L'utente è infastidito o frustrato, perché non capisce cosa il design o l'interfaccia sta cercando di dire loro o perché si aspettavano un risultato diverso.
• L'utente è soddisfatto, perché la nuova soluzione è un miglioramento rispetto a quella esistente. Lo consideriamo spesso design innovativo, perché potrebbe essere un punto di svolta, in sostituzione dei modelli di design esistenti.

Fai attenzione, però, perché il confine tra un'esperienza frustrante e un design innovativo è spesso più sottile di quanto tu pensi che sia.

Con questo in mente, concentriamoci su iOS e vediamo come i pattern di design si applicano alla piattaforma mobile di Apple.

Linee guida di Apple

Per coltivare standard di progettazione coerenti per la piattaforma iOS, Apple fornisce un documento noto come Linee guida dell'interfaccia umana o HIG. Definisce gli standard a cui gli sviluppatori e i progettisti devono aderire. Gli esempi includono il layout della tastiera standard, il selettore della data e la barra di stato.

Design Vision

Tuttavia, gli standard di progettazione non sono limitati all'utilizzo di elementi di interfaccia utente coerenti. Insieme al rilascio di iOS 7, Apple ha anche delineato la loro nuova visione sul design, che comprende tre temi principali, come descritto nelle linee guida per l'interfaccia umana iOS di Apple:

• Deferenza. L'interfaccia utente aiuta gli utenti a comprendere e interagire con il contenuto, ma non ne fa mai concorrenza.
• Chiarezza. Il testo è leggibile ad ogni dimensione, le icone sono precise e lucide, gli ornamenti sono sottili e appropriati e una maggiore attenzione alla funzionalità motiva il design.
• Profondità. Gli strati visivi e il movimento realistico trasmettono vitalità e accrescono la gioia e la comprensione degli utenti.

Guardare e sentire

Il più grande cambiamento in iOS 7 è stato il modo in cui presentiamo gli elementi visivamente. Design piatto è stato introdotto per gli utenti iOS, che è stato un grande cambiamento. Molte persone hanno ritenuto che non fosse necessariamente un miglioramento.

Stranamente, guardando a iOS 6, l'opinione generale è che il design skeuomorphic è obsoleto. Le nostre percezioni si sono chiaramente spostate.

Quando le persone si abituano al design piatto di iOS 7, significa che si abituano a un particolare stile visivo. Per dirla in modo diverso, come sviluppatore, preferiresti attenersi allo stile visivo di iOS 7, perché è quello che gli utenti si aspettano da iOS.

Certo, non riguarda solo l'aspetto della tua applicazione. Il modo in cui si comporta e si sente è anche un aspetto importante da considerare. Le animazioni sottili sono diventate un marchio di fabbrica di iOS 7. Ciò ha un impatto tanto sull'aspetto della tua applicazione quanto le immagini.

Le animazioni che usi nella tua applicazione sono importanti e fanno parte dei modelli di design. Gli utenti percepiscono e apprezzano le animazioni raffinate, il che significa che vale la pena di dedicarsi a loro.

Utilizziamo molta iconografia durante il processo di progettazione di un'applicazione. Le icone sono uno strumento importante per i pattern di progettazione dell'interfaccia in quanto hanno un significato globale, indipendentemente dal contesto dell'utente.

L'utilizzo corretto delle icone è un ottimo inizio per l'applicazione di schemi di progettazione, ma anche l'aspetto e l'aspetto di queste icone sono fondamentali. Abbiamo acquisito familiarità con l'iconografia semplice e piatta. Un'iconografia molto dettagliata significa che non soddisfiamo le aspettative dell'utente e, di conseguenza, rompere l'efficacia del design.

Elementi che supportano i modelli di progettazione

Uno dei principali nuovi modelli di design è l'uso di elementi dell'interfaccia utente traslucidi. Il centro di controllo rinnovato è un buon esempio. Apple utilizza traslucenza e sfocatura per rendere l'utente consapevole del contenuto in background. Aiuta a dare il contesto dell'utente mentre utilizza il centro di controllo.

L'uso di spazio negativo aiuta anche a rendere i progetti più efficienti e utilizzabili. È uno dei componenti chiave che rende iOS 7 così diverso da iOS 6. Combinato con un set limitato di colori chiave, questo ti dà gli ingredienti essenziali per un design dell'interfaccia utente ben congegnato. Come designer e sviluppatori, siamo costretti a pensare di più alle scelte progettuali che facciamo, anche a quelle piccole.

Un cambiamento importante, e forse controverso, è stato il passaggio a pulsanti senza bordo, un cambiamento critico nei modelli di progettazione iOS. Forse è anche uno dei motivi per cui iOS 7 inizialmente ha ricevuto molte critiche. È un approccio più estremo al design piatto. Questo cambiamento illustra perfettamente la linea sottile tra design innovativo e design che si traduce in frustrazione.

E poi, naturalmente, per gli elementi dell'interfaccia utente, ci sono i dettagli nitidi che devi considerare. Le icone della barra degli strumenti e della barra di navigazione, ad esempio, dovrebbero avere un'area intercettabile di almeno 44x44 punti. Per le icone della barra delle schede, si consigliano 50x50 punti. Il numero massimo di icone in una barra delle schede è cinque per iPhone e iPod Touch. Un elenco completo delle dimensioni raccomandate di vari elementi dell'interfaccia utente è disponibile nelle linee guida dell'interfaccia umana.

Lo stesso vale per i gesti. L'utilizzo di gesti oscuri o difficili da indovinare per azioni comuni porta a utenti confusi. Usare un gesto di pizzico per aprire un collegamento sembra una cattiva idea. Destra?

Un altro importante punto focale di iOS 7 è la tipografia. Apple incoraggia l'uso di un singolo font dinamico anziché di più font.

C'è anche una visione chiara per quanto riguarda il marchio dell'applicazione. Anche se ci siamo abituati al branding esplicito nelle applicazioni, Apple preferisce i marchi meno espliciti nel modo in cui brandizzano e promuovono se stessi. In altre parole, il design o l'interfaccia utente dovrebbero essere al centro dell'attenzione, non il marchio. I colori chiave e il linguaggio di progettazione dell'applicazione sono perfetti per promuovere un marchio in modo non invadente.

Interfaccia iPad

I modelli di progettazione non dettano solo le migliori pratiche per i disegni in generale, ma diventano anche specifici. Alcuni dispositivi hanno o richiedono standard diversi. Alcune interfacce iPad sono un ottimo esempio.

I controlli Popovers e Split View, ad esempio, sono elementi dell'interfaccia utente che non troverete su un iPhone o iPod Touch. Questi modelli di progettazione si rivolgono a schermi più grandi come quello trovato su iPad, iPad Air e iPad Mini.

Cosa ricordare

• Dare priorità e presentare le funzionalità principali. Identifica le principali User story. Questi dovrebbero richiedere la minima quantità di navigazione. 
• Gli schemi di progettazione spesso utilizzano funzionalità specifiche del dispositivo per migliorare la pertinenza di un'applicazione e dei suoi contenuti. La posizione, ad esempio, viene spesso utilizzata per mostrare contenuti pertinenti all'utente.
• Fornisci indizi di navigazione in modo che gli utenti sappiano sempre dove si trovano nella tua applicazione.
• Gli schemi di progettazione sono spesso focalizzati sull'ottimizzazione del invita all'azione quindi agli utenti viene ripetutamente ricordato l'azione successiva che devono compiere. L'applicazione Tumblr illustra questo bene.

• L'input dell'utente dovrebbe essere il più semplice e semplice possibile. Ridurre il numero di campi in un modulo e utilizzare i valori predefiniti quando possibile. Tumblr è un buon esempio di valori predefiniti intelligenti.
• Se un elemento dell'interfaccia utente è intercettabile, assicurati che questo sia chiaro per l'utente attraverso il design dell'elemento.
• I modelli di progettazione mobile sono spesso costituiti da flussi orizzontali piuttosto che verticali. Animare automaticamente una nuova vista anziché attendere che l'utente scorra verso il basso. È importante rendere l'esperienza fluida e senza interruzioni. A differenza di un sito Web, non è necessario limitare una determinata azione (ad es. Effettuare un acquisto) a una singola vista. Spesso è più efficiente ed elegante guidare l'utente attraverso una serie di visualizzazioni con un singolo invito all'azione.
• Infine, comprendi il contesto dei dispositivi mobili. I dispositivi mobili sono principalmente utilizzati in brevi raffiche, il che è molto diverso da come lavoriamo con un desktop o un notebook.

Conclusione

I modelli di progettazione si basano sul buon senso e sulla pratica. È inutile scopo per un design innovativo quando è probabile che finirai con un utente frustrato. Attenersi alle linee guida quando sono disponibili, utilizzare modelli di progettazione stabiliti e migliorare l'usabilità del prodotto.

Ricerca quali soluzioni utilizzano altre applicazioni per risolvere determinati problemi. In che modo la maggior parte delle applicazioni gestisce la registrazione dell'utente? Quali sono gli approcci testati per l'integrazione dell'e-commerce? In che modo la condivisione sociale è meglio integrata in un'applicazione? Prestare attenzione ai dettagli durante l'utilizzo delle applicazioni è un ottimo modo per familiarizzare con vari modelli di progettazione.

risorse

• Linee guida per iOS Human Interface
• UX Archive
• Onboarding dell'utente