Come riprogettare un sito Web per avere un aspetto incredibile sui dispositivi mobili
Pubblicato: 2016-01-24[ Proto .io è uno strumento di prototipazione di app mobili utilizzato da imprenditori e startup per creare prototipi realistici completamente interattivi che sembrano app reali.]
Quindici anni fa, sottoporsi alla riprogettazione di un sito Web era un'impresa molto più semplice: decidevi semplicemente come sarebbe stata la tua esperienza desktop, organizzavi i tuoi contenuti di conseguenza e creavi il sito Web. Incredibilmente, alcuni siti Web mancano ancora di una vera esperienza mobile, sia che si tratti di una riprogettazione del sito Web separata o di un design reattivo ben pianificato.
Il design a volte può sembrare un gioco infinito di recupero, ma questi esperti di app mobili possono aiutarti a guidarti attraverso il processo di riprogettazione della tua esperienza web in modo che appaia perfetta su qualsiasi dispositivo, desktop o mobile.
Come riprogettare un sito Web per un'esperienza mobile piacevole
Handsome (@HandsomeMade) è un'azienda di design e tecnologia i cui valori fondamentali includono "il pensiero incentrato sull'uomo a tutti i livelli" e "software volutamente bello e delizioso". Il Direttore Creativo Brandon Termini e il Direttore Tecnico Alex Zub spiegano come applicano questi principi alla riprogettazione del sito web mobile:
Afferma Termini, la chiave per una riprogettazione di un sito Web bello è adottare un "approccio di progettazione mobile-first", rendendo l'esperienza dell'utente il più elegante e facile da usare possibile. "Un modo in cui applichiamo il design mobile-first è iniziare con dimensioni dello schermo più piccole, il che ci costringe a semplificare il più possibile l'interfaccia e a mettere sullo schermo solo ciò che conta di più".
Zub aggiunge: "L'utilizzo di tecnologie e best practice, come il design reattivo e il design adattivo, con la loro implementazione tecnica compatibile, è la chiave. Per molti prodotti, ha senso attenersi a sistemi a griglia reattivi, il che semplifica lo sforzo necessario per costruirlo, pur mantenendo l'aspetto eccezionale su tutti i tipi di schermi".
Come riprogettare un sito Web per apparire bello sui dispositivi mobili
Abbiamo chiesto a Termini di condividere alcune delle sue migliori pratiche di visual design. "Ci sono centinaia di cose da fare e da non fare che abbiamo compilato nel corso degli anni", dice. Queste sono le prime tre migliori pratiche che mette in atto su Beautiful:
- Pensa attentamente alla tua gerarchia di layout. "Un layout di successo significa che un utente dovrebbe essere in grado di guidarti attraverso ciò che vede/legge nell'ordine previsto. Il buon uso dello spazio bianco, la teoria dei colori, la tipografia, ecc. svolgono tutti un ruolo fondamentale in questo.
- Usa il colore in modo appropriato. “Scegli i colori appropriati per il tuo marchio e assicurati che si armonizzino bene insieme. Usa un colore eroe che associ a elementi importanti dell'interfaccia utente come i pulsanti di invito all'azione. Assicurati di usare il colore con parsimonia nei punti giusti in modo che il tuo utente fluisca attraverso l'interfaccia e non si blocchi".
- La tipografia dovrebbe essere piacevole per gli occhi. "Assicurati che la tua tipografia sia appropriata per il marchio e leggibile sui dispositivi per cui stai progettando e usa il tipo ornamentale con parsimonia."
Testare la riprogettazione del tuo sito web mobile
Ovviamente, una volta creato il sito per dispositivi mobili, devi metterlo alla prova per garantire un'esperienza utente eccezionale. Afferma Termini: “Testare frequentemente e regolare è fondamentale. Inizia a testare non appena mostri i primi schizzi disegnati a mano con potenziali utenti e continua a testare durante tutto il processo, fino ai sistemi completamente progettati. Essere impostato per essere in grado di ascoltare, sintetizzare e ripetere il feedback è molto importante per il successo di qualsiasi prodotto".
Raccomandato per te:
Cosa significa la disposizione anti-profitto per le startup indiane?
In che modo le startup Edtech stanno aiutando la forza lavoro indiana a migliorare le competenze e a diventare pronte per il futuro...
Azioni tecnologiche new-age questa settimana: i problemi di Zomato continuano, EaseMyTrip pubblica stro...
Le startup indiane prendono scorciatoie alla ricerca di finanziamenti
Piattaforma di marketing digitale Logicserve Borse INR 80 Cr Finanziamenti, rinomina come LS Dig...
Il rapporto avverte di un rinnovato controllo normativo sullo spazio Lendingtech
Zub aggiunge: “La garanzia della qualità è una parte essenziale della creazione di un prodotto che viene utilizzato su diversi tipi di dispositivi. E poiché è praticamente impossibile avere tutti i dispositivi possibili in ufficio, utilizziamo servizi online che forniscono l'accesso a decine di dispositivi "virtuali" nel cloud, automatizzandolo il più possibile. Con adeguati investimenti nell'automazione, è facile e veloce eseguire test cross-device lungo la strada".
Volevamo saperne di più su come testare e QA una riprogettazione di un sito web mobile. Per questo, abbiamo sentito Simon Papineau, CEO di Crowdsourced Testing(@crowdsourcingqa). Papineau ha creato Crowdsourced Testing per affrontare alcuni dei punti deboli che aveva riscontrato durante la sua esperienza di test di numerose app mobili, siti Web, giochi e altro ancora.
Ciò che funziona su desktop non funziona sempre su dispositivi mobili e viceversa
Dice Papineau, “L'unica cosa che gli sviluppatori tendono a dimenticare è che non hai bisogno della stessa profondità o dello stesso contenuto sul tuo sito mobile che visualizzeresti sul tuo sito desktop. L'intento, la mentalità e l'obiettivo dell'utente mobile sono completamente diversi. I visitatori non trascorreranno 20 minuti sul proprio telefono a leggere la storia della tua azienda e le sue belle stampe.
Invece, dai loro ciò che vogliono il più direttamente e il più rapidamente possibile. Se sono le tue informazioni di contatto, mettile direttamente sulla home page senza alcun problema aggiuntivo.
Una delle sfide, afferma Papineau, è garantire che la riprogettazione del tuo sito Web mobile abbia un bell'aspetto e funzioni bene su una moltitudine di dispositivi: "Testare per vedere se i siti Web sono reattivi può richiedere molto tempo e denaro. La cosa migliore che un'azienda può fare è concentrarsi sui primi 15-20 dispositivi che rappresentano la maggior parte delle sue visite. Ci sarà sempre un dispositivo mobile su cui il sito non sembra perfetto. Ma se quel dispositivo rappresenta lo 0,05% dei tuoi visitatori, probabilmente non vale lo sforzo di sviluppo extra".
Come riprogettare un sito Web utilizzando un design reattivo
Bob Bentz è presidente di ATS Mobile (@atsMobile), un'agenzia di marketing mobile a servizio completo che sovrintende alla riprogettazione del sito Web per i clienti di più settori. Bentz si impegna a fare in modo che l'esperienza di un sito Web appaia e si senta bene su un dispositivo mobile come su un monitor desktop ad alta risoluzione e uno dei principali modi in cui ATS Mobile lo fa per i suoi clienti è l'utilizzo di un design reattivo.
Perché un design reattivo? Un primer
"Il responsive web design (RWD), più comunemente progettato con HTML5, sarà la scelta più probabile in quasi tutte le nuove build di Web mobile", afferma Bentz. “Può anche essere progettato usando CSS3 e Javascript. Il design reattivo ha il notevole vantaggio di essere altamente flessibile poiché cambia in modo fluido per adattarsi a qualsiasi dispositivo. RWD funziona inviando lo stesso codice, indipendentemente dal dispositivo, e quindi riorganizzandolo sul lato client, consentendo così la visualizzazione della stessa pagina Web su qualsiasi dispositivo".
Per vedere il design reattivo in azione, apri questo post del blog su uno schermo desktop, se non l'hai già fatto (aspettiamo!). Noterai che ci sono più dimensioni della finestra in cui l'interfaccia utente "si interrompe" e si riorganizza, in modo che la pagina appaia diversa in base al dispositivo che usi (e alla dimensione della finestra all'interno di quel dispositivo).
Quindi, come funziona esattamente il design reattivo e perché dovresti usarlo per la riprogettazione del tuo sito web? "Una riprogettazione di un sito Web reattivo serve lo stesso codice HTML sullo stesso URL, indipendentemente dal fatto che il dispositivo dell'utente sia un desktop, un tablet, un phablet, uno smartphone, un feature phone o un dispositivo indossabile (come l'Apple Watch)", afferma Bentz. “Può anche rispondere in modo diverso in base alle dimensioni dello schermo del sito. Gli sviluppatori possono decidere quali elementi grafici e contenuti verranno utilizzati per gli utenti di dispositivi mobili e tablet. Il testo e le immagini possono essere regolati in base a qualsiasi browser o dimensione dello schermo".
Con il design reattivo, ti assicuri di non effettuare un nuovo aggiornamento ogni volta che qualcosa cambia nello status quo del dispositivo mobile. "Quando un nuovo dispositivo arriva sul mercato e accede al tuo sito Web, non è necessaria alcuna programmazione aggiuntiva se il sito è basato su un design reattivo", afferma Bentz. “Soprattutto, tuttavia, il design reattivo è la best practice di progettazione consigliata da Google. Per molti siti Web, RWD raggiunge un ragionevole equilibrio tra compatibilità mobile e facilità di implementazione".
Migliori pratiche nel design visivo reattivo
Secondo Bentz, prendere in considerazione le seguenti best practice aiuterà a rendere la riprogettazione del tuo sito web reattivo e a funzionare al meglio:
- Un'intestazione semplice e sorprendente. "L'intestazione e la testata dovrebbero essere semplici in modo da non togliere i punti chiave di vendita. Il logo è l'immagine chiave del marchio; un logo eccessivamente orizzontale potrebbe non avere un bell'aspetto su schermi verticali più piccoli".
- Navigazione facile da usare. “La navigazione è molto più complicata su un piccolo schermo. Spesso i designer utilizzeranno un pulsante di navigazione mostrato da tre linee orizzontali, di solito nella parte superiore destra del sito. Questo è chiamato "menu hamburger", perché sembra un hamburger circondato dal panino. Alcuni siti utilizzano una navigazione sul lato sinistro che può espandersi verso l'esterno per coprire la maggior parte dello schermo".
- Un sacco di immagini. “È difficile includere troppe immagini sullo schermo del cellulare, ma le parole possono rapidamente sopraffare l'interfaccia utente. Pertanto, i designer utilizzano spesso i caroselli di immagini che consentono agli utenti di scorrere più immagini di prodotti invece di restringere lo schermo con la copia".
- Uso intelligente del piè di pagina. “I consumatori sono abituati a utilizzare il footer come strumento di navigazione e non occupa spazio prezioso come l'intestazione above the fold. Dovrebbe includere anche l'importantissimo link "Contattaci".
Una splendida riprogettazione del sito Web inizia con uno splendido prototipo
Imparare a riprogettare un sito Web per dispositivi mobili non è un'impresa da poco, ma avere un potente strumento di prototipazione rapida per aiutarti a testare l'esperienza fa la differenza più grande. Dopo aver ritagliato la copia, ridotto gli elementi e individuato il tuo schema di navigazione, puoi ottenere rapidamente feedback dagli utenti sul fatto che la riprogettazione del tuo sito Web mobile sia ancora utilizzabile e intuitiva. Quindi, come suggerito da Termini, continua a ripetere fino a quando non avrai un prototipo di cui sei veramente orgoglioso.