Suggerimenti essenziali per la conversione di un sito desktop, su dispositivo mobile
Poiché i dispositivi mobili hanno ormai superato la popolarità del desktop, è necessario che i progettisti progettino pensando al mobile. Il mobile-first è popolare come tecnica perché è più facile scalare i dispositivi mobili, piuttosto che ridimensionare i desktop.
Tuttavia, a volte la scelta è presa dalle tue mani. Comunemente i progettisti si trovano ad adattare i design desktop esistenti ai dispositivi mobili. E poiché alcuni elementi non si traducono bene, i progettisti essenziali sono in grado di capire quali modifiche specifiche apportare al momento della progettazione per il piccolo schermo. Ecco come…
Abbraccia il minimalismo
Il minimalismo è stato popolare nel web design ormai da anni, semplicemente perché spesso favorisce l'usabilità e anche il bello. Quando si parla di dispositivi mobili, tuttavia, il minimalismo è meno una scelta estetica, poiché si basa esclusivamente sull'usabilità.
Secondo Nielsen Norman Group, le caratteristiche di taglio sono una necessità nel design mobile. Che cosa significa questo per i progettisti che cercano di creare un sito per dispositivi mobili da un desktop già esistente?
Significa eliminare tutto ciò che non è essenziale per l'esperienza dell'utente mobile. Ad esempio, se stai trasferendo un negozio di e-commerce da desktop a dispositivo mobile, mantieni la stessa quantità di prodotti visualizzati sul sito mobile; ha senso solo perché gli acquirenti vogliono essere in grado di trovare tutto ciò che un negozio online ha da offrire, proprio come il negozio online vuole mostrare tutto ciò che ha da vendere ai visitatori del suo sito. Un grosso carosello pubblicitario per le ultime offerte, tuttavia, potrebbe ragionevolmente essere ridotto un po '.
Nascondi la navigazione
Una delle funzionalità più comuni sugli schermi mobili è il menu dell'hamburger, un'icona quasi omnipresente con tre segmenti di linee orizzontali ammassati l'uno sull'altro. Questo è un altro caso perfetto in cui le dimensioni ridotte dello schermo del dispositivo mobile costringono i progettisti a cambiare attorno a elementi che dovrebbero apparire in un certo modo sui desktop.
Nonostante l'opinione divisa sulla presenza del menu dell'hamburger, è praticamente onnipresente sugli schermi mobili semplicemente perché questa è la soluzione migliore che i progettisti hanno trovato per il downscaling del menu di navigazione dai desktop ai dispositivi mobili.
Visita il famoso sito web dello chef Bobby Flay per il suo ristorante a catena chiamato Bobby's Burger Palace. Come previsto, il menu di navigazione è disposto orizzontalmente nella parte superiore della home page, ma quando si va sulla versione mobile del sito, il menu orizzontale è scomparso. Al suo posto c'è il menu ordinato e ordinato dell'hamburger, proprio nello stesso punto dello schermo in cui il menu orizzontale più lungo si trova sulla versione desktop.
Walmart utilizza inoltre il menu hamburger nella sua transizione dal desktop al mobile design.
Sul suo sito desktop, Walmart visualizza la navigazione a discesa "Tutti i reparti" che apre un secondo livello di scelte di navigazione nella stessa pagina. Sul sito mobile, tuttavia, tale caratteristica non è possibile a causa delle ridotte dimensioni dello schermo, quindi è stata progettata una sostituzione: il secondo livello di scelte di navigazione è nel menu dell'hamburger e questo apre sempre più scelte di navigazione con ogni selezione - Quasi come sfogliare le pagine di un libro da sinistra a destra.
Passa a una colonna singola
In linea con il fatto che più semplice è meglio quando si tratta di design mobile, farai bene ai tuoi clienti se ti ricordi che un layout a colonna singola è più pulito e più facile per i loro utenti di operare su uno schermo più piccolo. Il grande vantaggio di un layout a colonna singola è che si elimina lo scorrimento orizzontale, come se si avesse molto testo su una pagina e si desiderava che i lettori scorressero lo schermo da sinistra a destra, per continuare a leggere.
Quando si introduce un layout a colonna singola, si semplifica l'esperienza dell'utente, incoraggiando gli utenti a scorrere verso il basso per leggere o fare clic su un collegamento che desiderano vedere su una nuova pagina. Questo batte spingendoli a scorrere da sinistra verso destra, il che è più difficile da fare che semplicemente scorrere verso il basso, specialmente se si considera la posizione del pollice dell'utente rispetto al modo in cui tengono un dispositivo mobile.
Il sito Web desktop del quotidiano The New York Times presenta più colonne. È facile da usare su un desktop, quando gli utenti del tuo cliente possono semplicemente spostare il cursore da sinistra a destra senza problemi su trackpad o mouse.
Naturalmente, il sito mobile del New York Times comprende come devono essere cambiate le cose su schermi più piccoli, quindi introduce un design a colonna singola pulito ed efficiente che aumenta l'esperienza dell'utente, poiché i lettori possono semplicemente scorrere verso il basso per ottenere più contenuti con i loro pollici .
Considerazioni sui dispositivi mobili
A causa dell'influenza del cellulare sugli utenti di oggi, i designer devono sempre progettare per dispositivi mobili. Non è sufficiente progettare semplicemente un sito per dispositivi mobili insieme al sito desktop e chiamarlo comunque per la progettazione di dispositivi mobili!
Progettare per dispositivi mobili significa in realtà essere attenti alle modifiche specifiche che dovrai apportare al sito del tuo cliente quando progetti per il piccolo schermo. Ciò include tutto ciò di cui abbiamo parlato in precedenza, dal minimalismo nel design alla mascheratura della barra di navigazione per passare a un layout a colonna singola.
Adottando queste best practice nel tuo skillset, creerai siti perfetti per i dispositivi mobili.