8 regole dorate di progettazione mobile

Il design mobile è una considerazione relativamente nuova ma vitale. Solo un decennio fa, progettando per il web significava progettare per un computer desktop; Ora significa anche progettare per i dispositivi mobili. I telefoni cellulari stanno guidando una quantità crescente di traffico web e i numeri crescono solo.

Secondo Statista, nell'ottobre 2018 avevamo 3,9 miliardi di utenti mobili unici e oltre il 50% di tutto il traffico del sito web in tutto il mondo è stato generato attraverso i telefoni cellulari . Un grande web design non è più un lusso ma qualcosa di una necessità.

La creazione di un'ottima esperienza web per gli utenti mobili richiede più della semplice creazione web design reattivo (anche se un top Builder del sito web può aiutare, come può il tuo web hosting scelta). In questo articolo, è possibile scoprire i principi di progettazione del sito mobile fondamentale.

01. Costruisci esperienze orientate agli obiettivi

Gli utenti mobili sono utenti molto orientati agli obiettivi. Ogni volta che visitano un sito web, hanno un compito specifico che vogliono realizzare e si aspettano di ottenere ciò di cui hanno bisogno davvero rapidamente. Quindi come puoi farlo accadere?

Immagina i tuoi utenti ideali: Simile alla costruzione di una casa, costruire un sito Web inizia con una solida base. E la Fondazione per Great Web Design è la conoscenza che hai dei tuoi utenti. La ricerca degli utenti dovrebbe essere uno dei primi passi nella progettazione del prodotto. Devi capire esattamente chi sono i tuoi utenti e cosa vogliono realizzare. Una volta che conosci il desiderio e le esigenze dei tuoi utenti, puoi quindi creare un viaggio per l'utente che conosci, corrisponde perfettamente alle loro aspettative (assicurati di salvare in modo sicuro tutti i risultati in deposito cloud. ). Quindi, portando avanti accurato Test dell'utente Assancerà in modo che tu abbia raggiunto quegli obiettivi.

Affina esperienza attorno al tuo obiettivo principale: Cosa vuoi ottenere con questo sito web? Trovare le risposte a questa domanda è un'altra cosa importante da fare durante la creazione di un'esperienza web mobile. Stai cercando di guidare l'impegno, effettuare utenti acquisti prodotti o registrati per un servizio? Indicare chiaramente l'obiettivo e pensa a come è possibile tagliare il numero di passaggi che un utente deve intraprendere per raggiungerlo.

02. Adatta i tuoi contenuti per lavorare in uno spazio più piccolo

Il contenuto è ciò che fornisce valore per la maggior parte dei siti web. È la ragione principale per cui le persone li stanno visitando. Quando si tratta di web design mobile, è impossibile scattare un'esperienza desktop e replicarla sul cellulare; È importante progettare siti web con utenti mobili in mente. Ciò significa che dobbiamo adattare il contenuto e le caratteristiche per adattarsi alle dimensioni e alle abitudini dello schermo dell'utente. Quindi quali passi puoi prendere per ottenere questo?

Evitare lo scorrimento orizzontale: Gli utenti sono confortevoli con i siti che scorrono verticalmente ma non orizzontalmente. Ecco perché non ci dovrebbero essere pagine in cui lo scorrimento orizzontale è necessario per vedere il contenuto. Gli elementi a larghezza fissa sono uno dei motivi comuni che causano lo scorrimento orizzontale, quindi controlla che non si disponga di contenuti che visualizzano solo bene in una particolare larghezza della vista.

Mirare a un layout a colonna singola: I layout a colonna singola aiutano a gestire lo spazio limitato su uno schermo piccolo e consentono anche un facile ridimensionamento tra la modalità verticale e orizzontale.

Assicurati che gli utenti non debbano pizzicare-to-zoom: I visitatori possono essere facilmente frustrati quando devono ingrandire o ridurre per leggere un testo o vedere un'immagine. Progetta il tuo sito mobile in modo che gli utenti non dovranno mai cambiare le dimensioni.

Usa la dimensione del carattere leggibile: 11 punti è la dimensione minima assoluta per il testo. Questa dimensione consente agli utenti di leggere il testo in una distanza di visualizzazione tipica senza lo zoom.

Seleziona i font che si adattano bene: Se l'esperienza del sito web richiede la lettura, è meglio usare i caratteri tipografici sans-serif come Helvetica o Roboto.

Utilizzare il design con dita: Quando si progetta un sito mobile, ricorda che i visitatori useranno le dita invece di una freccia del mouse e le dita umane sono più grandi di un puntatore del mouse. Sforzati di progettare un'interfaccia con dita in cui ciascun elemento interattivo è dimensionato in modo appropriato.

Uno studio MIT Touch Lab ha trovato che la dimensione media di un dita è 8-10mm , facendo 10 mm x 10 mm una buona dimensione minima del touch touch.

Considera anche la distanza relativa tra i bersagli touch. Se gli elementi interattivi si trovano troppo vicini l'uno all'altro, gli utenti mobili possono colpire accidentalmente un pulsante sbagliato con il loro dito. Per impedire che ciò accada, assicurarsi di dimensionare correttamente i pulsanti e aggiungere abbastanza spazio tra loro.

Rendere le immagini del prodotto espandibile: Molti studi hanno dimostrato che le persone sono studenti prevalentemente visivi. La maggior parte delle persone è in grado di capire e afferrare i concetti molto meglio quando vengono consegnati in quel modo, motivo per cui l'utilizzo delle immagini nel web design è un ottimo modo per riassumere rapidamente i messaggi chiave.

Le immagini svolgono un ruolo vitale nei siti Web di e-commerce: le persone si affidano alle immagini dei prodotti quando si prendono una decisione. È essenziale non solo fornire beni di alta qualità, ma anche renderli espandibili in modo che gli utenti possano facilmente vederli in dettaglio. Espandi l'intera immagine piuttosto che una parte di esso.

Stai attento con le promozioni e gli annunci: Le promozioni e gli annunci possono facilmente oscurare il contenuto. Mentre il messaggio dell'annuncio potrebbe funzionare per alcuni visitatori, in una maggioranza dei casi gli utenti saltanola e passare a informazioni più preziose. Questo fenomeno è noto come Banner Blindness.

Rendi facile trovare informazioni di contatto: Gli utenti mobili visitano spesso i siti Web per trovare le informazioni di contatto. A seconda dell'urgenza, gli utenti potrebbero voler chiamare una società, compilare un modulo di contatto o trovare l'indirizzo. Per i siti Web di e-commerce, il numero di telefono deve essere disponibile direttamente sulla schermata principale.

03. Ottimizza il contenuto per la scansione

È un fatto ben noto che gli utenti non leggono online; Scansiona. Quando un nuovo visitatore si avvicina a una pagina Web, la prima cosa che tentano di fare è scansionare la pagina e dividere il contenuto in informazioni digeribili. È possibile effettuare questa attività più facile per gli utenti seguendo alcune semplici regole.

Mente l'ordine in cui fornisci contenuti su una pagina: Le persone leggono dall'alto verso il basso. Ecco perché è importante preservare le cose importanti nella parte superiore di una pagina e spostare il resto verso il basso in base alla gerarchia.

Abbattere il disordine: Prioritare il contenuto sugli elementi dell'interfaccia utente: ridurre le distrazioni rimuovendo inutili elementi funzionali e decorativi non necessari. Sforzati di creare uno stile minimalista perché facendo ciò che lo renderai facile per l'utente concentrarsi sull'attività.

Evitare lunghi blocchi di testo senza immagini: È molto probabile che eventuali enormi fasce di contenuto vengano saltati. Utilizzare titoli, paragrafi o punti elenco per rompere il testo.

Metti più peso visivo su elementi importanti: Apporta elementi importanti come i messaggi chiave punti focali, quindi i visitatori li vedono subito. Enfatizzare gli elementi usando diverse dimensioni, uno spazio bianco o colori vivaci.

04. Creare la navigazione prevedibile

Aiutare gli utenti a navigare dovrebbe essere una priorità assoluta per ogni sito web. Dopotutto, il contenuto più avvincente è inutile se le persone non riescono a trovarlo. Ecco perché è importante investire nel progettare un solido sistema di navigazione, utilizzando alcuni dei seguenti passaggi.

Utilizzare modelli di navigazione familiari: Quando si tratta di creare un meccanismo di navigazione per il tuo sito web, vale la pena ricordare una regola semplice: non reinventare la ruota - lo sforzo di creare un'esperienza familiare. È sempre meglio fare affidamento sui modelli di navigazione con cui la maggior parte degli utenti ha familiarità con (come la barra di navigazione superiore o il menu hamburger) anziché creare il proprio sistema di navigazione unico (ad es. Sistema di navigazione basato su Gesture). Quando si crea una navigazione familiare, aiuti gli utenti a fare affidamento sulla loro precedente esperienza quando interagire con il tuo prodotto.

Metti un limite al numero totale di opzioni di navigazione: Non mettere troppe opzioni nei menu. Un ampio menu potrebbe funzionare bene per i siti desktop, ma non si adattano al design mobile. Poiché non tutte le opzioni di navigazione saranno disponibili in un'area visibile dello schermo, costringerai gli utenti mobili a scorrere un elenco di opzioni. Pensa come puoi presentare le momenze del menu possibile. Idealmente, il menu che progetti non dovrebbe avere più di sette categorie distinte .

PRIARIZZARE le opzioni di navigazione : Organizzare la navigazione in base al modo in cui gli utenti funzionano con funzionalità. Le opzioni di navigazione più popolari in un menu globale dovrebbero andare in alto e le azioni primarie dovrebbero essere disponibili in un'area visibile dello schermo.

Scrivi etichette trasparenti: Ogni opzione di navigazione dovrebbe avere un'etichetta chiara e concisa. Evita Jargon - La navigazione che progetti non dovrebbe contenere termini I tuoi visitatori non capiranno. Le etichette trasparenti offriranno ai visitatori la capacità di prevedere il risultato delle loro azioni.

Garantire gli elementi interattivi sembrano elementi interattivi : Durante la progettazione di pulsanti e collegamenti, pensa a come il design comunica Affornance. In che modo gli utenti comprendono l'elemento come oggetto interattivo? Il modo in cui un oggetto sembra dice agli utenti come usarlo. Elementi visivi che sembrano collegamenti o pulsanti ma non sono interattivi (come le parole sottolineate che non sono collegamenti o scatole rettangolari con parole che non sono pulsanti) possono facilmente confondere gli utenti.

Comunicare la posizione corrente: "Dove sono?" è una domanda fondamentale a cui gli utenti hanno bisogno di una risposta per navigare in modo efficace. Indicare chiaramente la posizione corrente.

Fornisci una funzione di ricerca: Se progetti un sito complesso con un sacco di contenuti o funzionalità, è necessario assicurarti di fornire una barra di ricerca per una facile navigazione. Implementando la funzionalità di ricerca, fornisci un percorso rapido alle informazioni / funzionalità per gli utenti mobili che vengono in mente il sito con una domanda specifica.

Non nascondere l'opzione di ricerca nel menu. Dovrebbe essere una delle prime cose che i visitatori vedono sulle tue pagine.

Rendi facile per gli utenti tornare alla homepage: I visitatori si aspettano che quando toccano il logo nella parte superiore di una pagina torneranno alla homepage e diventerà frustrato se non funziona.

Mantieni il tuo utente in una singola finestra: Evitare le chiamate all'azione che inviano un utente a nuove finestre. Alcuni utenti avranno problemi a cambiare tra Windows in un browser mobile e potrebbe non essere in grado di trovare la pagina precedente.

05. Evita di creare roadblocks

I roadblocks creano attrito e attrito è il peggior nemico della conversione. Fortunatamente, ci sono cose semplici che puoi fare per scoprirle.

Non interrompere i visitatori: I pop-up di grandi dimensioni sono uno dei tipi più tipici di interruzione nell'esperienza web. Per molto tempo, tali banner erano dedicati ai messaggi promozionali ma, di recente, molti siti hanno iniziato a utilizzare i pop-up distraenti per ottenere il permesso di utilizzare i cookie (GDPR). Non importa quali informazioni vuoi mostrare ai tuoi visitatori, assicurati che non distrae dall'esperienza generale.

Non effettuare utenti lasciare il tuo sito web: Identificare i luoghi nei viaggi dell'utente che potrebbero causare un utente di guardare al di fuori del tuo sito e quindi fornire contenuti / funzionalità per tenerli sul tuo sito. Un campo di codice promozionale sui siti Web di e-commerce è forse l'esempio più comune che rende i visitatori lasciano un sito nel tentativo di trovare il coupon. È molto meglio offrire alcuni coupon sul sito al fine di prevenire tale comportamento.

Non forzare gli utenti a iscriversi: Gli utenti esigenti registrano prima di poter vedere informazioni o utilizzare un servizio online ha un costo di interazione elevato - costringere la registrazione troppo presto Perché gli utenti abbandonano il sito . Prima di fornire informazioni personali, i visitatori vogliono avere il senso di ciò che un sito offre loro.

Per creare un flusso utente con i minimi barriere alla conversione, i siti mobili dovrebbero consentire ai visitatori di esplorare il contenuto senza bisogno di iscriversi. Per i siti Web di e-commerce, è essenziale consentire agli utenti l'acquisto come ospite.

Rendi facile passare a un altro dispositivo per continuare il viaggio: Non considerare Mobile come esperienze autonome. Un utente tipico ha diversi dispositivi come un desktop, un telefono cellulare e un tablet e si aspetta di avere un'esperienza senza soluzione di continuità su tutti quei dispositivi quando si utilizza il prodotto. Ad esempio, molte persone usano i dispositivi mobili solo per la ricerca del prodotto e quindi passare al desktop da convertire. Gli utenti si aspettano di continuare il viaggio da dove si sono fermati sul cellulare.

Ecco alcune cose che puoi fare per sincronizzare il progresso corrente di un utente:

• Sync Wishlist, Preferiti e cestino per un account utente.
• Offri un modo semplice per salvare o condividere informazioni su dispositivi per utenti non registrati (come un'opzione per inviare il collegamento all'e-mail).

06. Design forme efficienti

La voce della forma è una delle attività più comuni sul Web. È difficile immaginare alcuna esperienza che non richiede agli utenti di compilare un qualche tipo di forma. Poiché è una pratica così onnipresente, la capacità di compilare un modulo senza dolore è cruciale per mantenere un utente impegnato. Ecco alcuni suggerimenti che possono aiutarti a mantenere il frizione al minimo:

Ridurre al minimo gli ingressi in moduli: Generalmente parlando, meno dati che un utente deve fornire, più che apprezzeranno la tua esperienza web. Questi indicatori ti aiuteranno a ridurre i tasti e gli ingressi che gli utenti devono fare:

• Minimizzare il numero totale di campi. Mantenere sempre le forme il più brevi e semplici possibile rimuovendo tutti i campi non necessari. Chiedi solo cosa hai davvero bisogno di sapere.
• Utilizzare Auto-corretto, maiuscolarizzazione automatica e completare automaticamente per ridurre la possibilità di errore dell'utente.
• Evitare campi a discesa. Dropdows Nascondi le opzioni e questo crea un costo di interazione extra: gli utenti devono toccare due volte per selezionare l'opzione giusta. Se si utilizza un campo a discesa per una selezione di opzioni, considera la possibilità di sostituirla con i pulsanti radio.
• Passa automaticamente al campo successivo quando un utente preme il ritorno.
• Ridurre al minimo gli errori del modulo con convalida in linea in tempo reale.
• Utilizzare le informazioni esistenti per massimizzare la convenienza. Ad esempio, è possibile pre-compilare alcuni campi come indirizzo di spedizione o informazioni di fatturazione per gli utenti registrati.
• Pensa di offrire meccanismi di input alternativi. Considera quali funzionalità del dispositivo possono essere utilizzate per fornire un'esperienza utente migliore. Ad esempio, invece di chiedere agli utenti di digitare i dettagli della carta di credito, fornire la possibilità di utilizzare la fotocamera del dispositivo per scansionare la scheda e integrare sistemi come Apple Pay e Google Pay per abilitare il pagamento in un tocco.

Fornire la tastiera corrispondente: Gli utenti mobili apprezzano i siti Web che forniscono una tastiera appropriata per il campo. Questa funzione impedisce loro di dover eseguire azioni extra. Ad esempio, quando gli utenti devono inserire un numero di telefono, il sito Web dovrebbe visualizzare la tastiera numerica da 0 a 9.

Impostare i tipi di ingresso HTML per mostrare la tastiera corretta. Ecco sette tipi di input relativi alla forma del design:

• Input Type = "Text" Visualizza la normale tastiera del dispositivo mobile.
• Input Type = "Email" Visualizza la tastiera normale e '@' e '.com'.
• Tipo di input = "tel" Visualizza la tastiera numerica da 0 a 9.
• Tipo di input = "Numero" Visualizza una tastiera con numeri e simboli.
• Tipo di input = "Data" Visualizza il selettore della data del dispositivo mobile.
• Input Type = "DateTime" Visualizza il selettore di data e ora del dispositivo mobile.
• Tipo di input = "mese" Visualizza il selettore del mese e anno del dispositivo mobile.

Lascia che gli utenti modifichi il campo posizione: Molti siti Web rilevano automaticamente la posizione dell'utente e utilizza queste informazioni per quindi fornire contenuti pertinenti. È essenziale lasciare che gli utenti alterano la posizione perché in alcuni casi gli utenti potrebbero voler vedere i risultati per un posto diverso.

07. Sforzati di creare un'esperienza coerente

La coerenza è uno dei pilastri chiave dell'esperienza utente. Il design coerente è un design user-friendly - concentrandosi sulla creazione di un design coerente, crei un design più intuitivo. Si sforza sempre di rendere il sito Web sia internamente ed esternamente coerente.

Consistenza interna: Creare una libreria coerente di beni di progettazione e usarlo per tutte le pagine del tuo sito web. Caratteri, pulsanti, collegamenti, icone e tutti gli altri elementi UI devono essere coerenti in tutto il sito Web per mantenere la consistenza visiva.

Consistenza esterna: Assicurati che il sito web che progetti sia parte di una famiglia di prodotti più ampia. Ad esempio, se hai un'app mobile, il tuo sito web mobile dovrebbe trasmettere un senso di familiarità per gli utenti che lo usano.

08. Costruisci il tuo miglior sito mobile

Tutti i punti menzionati qui possono essere considerati le migliori pratiche del settore. Ma solo perché qualcosa è chiamato "best practice" non significa che sia la soluzione ottimale per il tuo sito web. Ecco perché è sempre importante testare le tue decisioni di progettazione. Effettuare l'utilizzo di usabilità una parte obbligatoria del processo di progettazione e migliora l'esperienza su base regolare.

Questo articolo è stato originariamente pubblicato in questione 317 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 317. o Iscriviti a Rete. .

Articoli Correlati:

• 6 tendenze che stanno cambiando la faccia del design dell'interfaccia utente mobile
• 10 consigli per una migliore progettazione mobile UX
• Come progettare interfacce mobili user-friendly