8 modi per ottimizzare il tuo sito per dispositivi mobili
Quando il mondo è passato dai computer desktop ai dispositivi mobili, i designer sono diventati ancora più concentrati su UX. Anche se l'interfaccia utente svolge un ruolo importante nella creazione di design ottimizzati per i dispositivi mobili, l'esperienza utente è diventata altrettanto importante, soprattutto perché ora abbiamo più dispositivi su cui concentrarsi e l'esperienza utente è diversa dal tipo di dispositivo.
UX è qualcosa che va oltre i confini della grafica e dell'estetica. Proprio come Rahul Varshney, il co-creatore di foster.fm , dice:
Un'interfaccia utente senza UX è come un pittore che schiaffeggia la pittura sulla tela senza pensarci.
Rahul aveva ragione con questa analogia. Potresti avere la versione desktop più accattivante, user-friendly, unica e funzionale del tuo sito web, ma se non stai prendendo in considerazione l'esperienza mobile, stai semplicemente dipingendo senza alcun pensiero.
Quindi, cosa distingue una buona esperienza mobile da una cattiva? Non è troppo difficile separare i componenti chiave che costituiscono un design altamente efficace, ottimizzato e orientato all'utente. Ma ecco alcune buone pratiche che dovrebbero guidarti lungo il percorso:
1) Non ignorare il primo cellulare
Se il tuo sito web è rivolto a UX mobile, potresti voler rompere la tradizione seguendo la strategia "mobile first". Non c'è nulla di male nell'applicare questa tecnica quando si è certi che la maggior parte degli utenti accederà al proprio sito Web tramite un dispositivo mobile. Proprio come codemyviews suggerisce che il web design mobile non è una nicchia, ci sono infatti "1,2 miliardi di utenti web mobili in tutto il mondo" e il numero non sembra essere in calo in tempi brevi (è probabile che aumenti nel prossimo futuro). All'inizio questo potrebbe essere un po 'difficile; ma se sei disposto a mettere il tuo utente al primo posto, vale la pena provarlo.
Solo perché hai mirato a progettare un sito web semplice, pulito o orientato al mobile non significa che non debba essere sofisticato. Karimrashid.com è un perfetto esempio di come la semplicità e la raffinatezza possano essere miscelate creando un design pulito, reattivo e di classe.
2) Creare layout fluidi
Ci sono semplicemente troppe dimensioni dello schermo possibili là fuori per scegliere e scegliere quelle per cui progettare. Avrai bisogno di creare un layout che si adatti il più perfettamente possibile a tutti loro. Fortunatamente, i layout fluidi sono qui per salvare la giornata!
Basati su percentuali piuttosto che su misurazioni definite come i pixel, i layout fluidi sono diventati lo standard tra i professionisti del web. Possono essere complicati, ma fare in modo che il maggior numero possibile di persone possa effettivamente utilizzare il tuo sito vale lo sforzo.
3) Mira alla funzionalità
Cos'è la funzionalità? È ciò che offri ai tuoi visitatori per fare le cose e fatto in fretta. In base allo scopo del tuo sito web, tutti gli strumenti come i negozi più vicini, la ricerca di prodotti, recensioni di prodotti o convertitori di valuta, dovrebbero aiutare gli utenti a eseguire "funzioni" e raggiungere obiettivi molto più velocemente.
Purina , un fornitore di alimenti per animali domestici, è un perfetto esempio di come rendere più semplici le "funzioni" su una pagina web. La home page ha una casella di ricerca in cui puoi cercare la cosa che stai cercando. Di seguito sono riportate due colonne separate per il tipo di cibo animale in cui si specializzano. L'intero sito web è facile da navigare con colonne, pulsanti, strumenti ed elementi di design che decidono il miglior tipo di cibo per animali domestici e quindi acquistano.
4) Identifica i tuoi utenti
Non cercare di diventare un tuttofare, perché potrebbe costarti un utente tipico, e nessuno lo vuole. Prima scopri chi sono i tuoi utenti. Quindi capire il loro tipico comportamento di navigazione sul web. Una volta che questo è messo da parte, scopri cosa li rende tick. Gli utenti moderni sono di due tipi principali: quelli che stanno navigando senza un obiettivo in mente e quelli che stanno cercando di eseguire un'attività. Ciascuno di questi gruppi richiederebbe diverse "funzioni" in base alle loro esigenze.
Non è difficile indovinare i dati demografici degli utenti del sito Web di The Body Shop poiché lascia dei suggerimenti su tutta la pagina. Dal momento che The Body Shop è altamente focalizzato su "ingredienti naturali" e attivismo sociale, le varianti verdi monocromatiche, un cursore di ingredienti naturali, la scelta di immagini "verdi", così come le relazioni sulle fiere, gli impegni e altri eventi sociali è comprensibilmente concetto di design ben sviluppato.
5) Cerca sempre le librerie e le linee guida dello sviluppatore
In base alla piattaforma che utilizzerai, è essenziale dare un'occhiata alle linee guida dell'interfaccia utente. Alcune piattaforme consentono una maggiore flessibilità rispetto ad altre. Qualunque sia il caso, dovrebbero rimanere alcuni componenti chiave del marchio o "firme".
Uno sviluppatore di app di Apple dovrebbe dare un'occhiata a Linee guida per iOS Human Interface e segui gli standard Apple quando si tratta di progettare le basi, le strategie di progettazione, gli elementi dell'interfaccia utente, l'immagine / design dell'immagine, ecc. Lo sviluppatore Android, d'altra parte, dovrebbe imparare tutto sui componenti, lo stile, l'usabilità e il layout delle tipiche applicazioni Android con l'aiuto di Guida degli sviluppatori Android .
6) Rendi tutti i contenuti disponibili per tutti gli utenti
Alcuni progettisti, invece di far funzionare tutti i loro contenuti in layout fluidi, semplicemente scelgono di nasconderne alcuni da utenti mobili. A volte è perché il layout è complicato, o si sentono come se ci fosse troppo contenuto per un layout mobile. Questo è l'approccio sbagliato.
Dare agli utenti una versione "ridotta" del tuo sito o dell'app non è solo ingiusta agli utenti di dispositivi mobili, ma può seriamente ritorcersi contro e perdere clienti. Potrebbe essere necessario semplificare il layout all'estremo, spostare alcuni contenuti su altri schermi per ridurre il disordine o semplicemente cercare di organizzarlo meglio; ma deve essere lì .
Confronta la versione desktop di Sito della BBC alla versione mobile. Anche se più semplice di prima, mette ancora tutti i tipi di informazioni su tutto lo schermo. La versione mobile, al contrario, elimina alcune delle immagini (che sono ancora disponibili negli articoli stessi), ma conserva tutti i titoli, semplificando notevolmente l'esperienza su uno schermo di dimensioni pari a quello del telefono.
7) Design per il tatto
È anche utile tenere presente il fatto che un utente di dispositivi mobili utilizzerà le dita anziché puntatori di mouse di precisione. Il tuo design dovrebbe essere facile da navigare con le dita di tutte le dimensioni e forme, considerando che tutti i dispositivi mobili sono ora touch-screen. Un utente non dovrebbe dover pizzicare troppo o ingrandire per toccare qualcosa o compilare un modulo o toccare un pulsante. I colpetti imprecisi sono anche molto comuni su dispositivi di piccole dimensioni che dovrebbero essere considerati nella progettazione con input o gesti di tocco abbastanza grandi per portare a termine il lavoro.
Ecco un tavolo tattile di Peter-Paul Koch quello potrebbe aiutare. Nota come gli eventi touch (e altre azioni) possono variare a seconda della compatibilità del browser e del dispositivo.
8) Utilizzare gli strumenti di compressione
La quantità di strumenti oggi disponibili per rendere meno oneroso il lavoro di un designer è incomprensibile. Troverete compressori di script come Compressore HTML o gzip compressione che rimuoverà automaticamente commenti, spazio bianco o codice non necessari. Minificatore CSS e Compressore CSS e alcuni altri strumenti che ti consentiranno di concatenare il codice CSS e migliorare le prestazioni. Anche la compressione delle immagini è altrettanto importante; alcuni che ridurranno le dimensioni dei file .jpeg e .png pur mantenendo la qualità intatta inclusa EWWW Image Optimizer , smush.it , optipng , e jpegtran .
Ecco un esempio di un design del portafoglio altamente reattivo di RyJohnson . Il sito web è pieno di immagini spettacolari non diverse dalla versione desktop. Il segreto per caricare velocemente qui è, senza dubbio, l'ottimizzazione delle immagini.
