Contenuto
Come sviluppatori, siamo molto orgogliosi del nostro lavoro. I nostri progetti sono ben costruiti e ben progettati. Sono reattivi. Vincono premi e soddisfano i nostri clienti. Sono incredibilmente belli sugli schermi cinematografici ... ma sono completamente noiosi sul tuo telefono.
Perché in quasi tutte le pluripremiate esperienze desktop che abbiamo visto o costruito quest'anno, c'è un punto di interruzione in cui tutto va da coinvolgente, rivoluzionario e radicale a statico, impilato e noioso? Vorrei che facessimo un passo indietro e valutassimo onestamente lo stato del Web multi-dispositivo.
Apri Awwwards.com o theFWA.com sul desktop e sfoglia i design più recenti che il web ha da offrire. Troverai un sito dopo l'altro di esperienze desktop meravigliose. Apri gli stessi URL sul tuo telefono e se non ricevi un messaggio del tipo: "Non formattato per il tuo dispositivo" (il primo che ho provato), otterrai una visualizzazione a colonna singola abbastanza alta di tutto ciò che hai visto alla larghezza del desktop, ma con meno ... esperienza.
In un settore in cui il termine "mobile first" è onnipresente, perché i dispositivi più piccoli vengono ancora considerati di seconda classe? Il mobile first sembra essere generalmente considerato una cosa positiva nel nostro settore, ma quando arriva il momento di iniziare un progetto, perché noi, il nostro team ei nostri clienti abbiamo così tanta paura di metterlo in pratica?
In un settore in cui il termine "mobile first" è onnipresente, perché i dispositivi più piccoli vengono ancora considerati di seconda classe?
Ho inviato un sondaggio per avere un'idea delle esitazioni delle persone riguardo ai dispositivi mobili. Una quantità enorme di risposte implicava la convinzione di fondo che la decisione di creare mobile first sia principalmente correlata alla quantità di traffico mobile che il client sta attualmente ricevendo. "Meno del 50% del traffico mobile? Prima i desktop." Fermare. Questa logica non è valida.
Il basso traffico mobile non è necessariamente indicativo di un basso interesse per i dispositivi mobili. L'attuale quantità di traffico è correlata alla natura del contenuto o è semplicemente perché l'esperienza esistente è difficilmente utilizzabile su un piccolo schermo? Potrebbe esserlo, ma è importante non trascurare questa distinzione. Potrebbe esserci una grande potenziale base di utenti mobili che aspetta solo di essere attinto.
Pitching per il futuro
I dati mostrano dove siamo stati, non dove vogliamo andare. Il basso utilizzo oggi non è necessariamente indicativo di un basso utilizzo in futuro. Come disse una volta l'ex professionista di hockey sul ghiaccio Wayne Gretzky (e come spesso citava Steve Jobs), "Pattina dove sarà il disco, non dove è stato".
Supponiamo che arrivi un lead di vendita e che proponi la tua strategia al cliente, qualunque essa sia. Tre mesi dopo, hai vinto il progetto e, in altri nove mesi, consegni al mondo il tuo bellissimo nuovo bambino. Dalla tua presentazione iniziale di vendita (12 mesi fa), alla fine della vita di ciò che hai costruito (circa tre anni) è un totale di quattro anni. Dove sarà il disco tra quattro anni? Sarai comunque contento di aver deciso di dedicare del tempo al supporto di IE8 invece di spingere l'esperienza mobile?
L'ipotesi implicita che la progettazione per i piccoli schermi sarà in qualche modo dannosa per il pubblico desktop è semplicemente falsa. Progettando per schermi di piccole dimensioni, i tuoi contenuti e la tua interfaccia utente hanno il potenziale per diventare focalizzati sul laser, offrendo ai tuoi utenti esattamente ciò che stanno cercando. Non c'è la tentazione di riempire lo spazio con lanugine superflue quando lo spazio non c'è. "Semplice e mirato" non significa necessariamente "noioso e limitato".
Creare un impatto
"I piccoli schermi limitano." Sento spesso questo argomento da designer che sono abituati a stupire i clienti con composizioni di Photoshop di dimensioni cinematografiche. Ed è vero: i piccoli schermi hanno meno impatto in una riunione con il cliente. Ma questa non è una limitazione della tecnologia, è una limitazione delle riunioni con i clienti. La verità è che ci sono molte più opportunità per esperienze rivoluzionarie sui dispositivi mobili rispetto ai desktop.
"Non è la tecnologia, è l'immaginazione", afferma il designer e esperto di dispositivi mobili Josh Clark. Abbiamo touchscreen! Con le fotocamere! Giroscopi, accelerometri, geolocalizzazione! Tutto connesso a Internet, ad altre persone e non collegato a qualsiasi luogo. Abbiamo appena scalfito la superficie di ciò che potevamo fare sui dispositivi mobili. Questo è eccitante! Invece di presentare composizioni statiche di dimensioni cinematografiche, metti un prototipo interattivo nelle mani del tuo cliente e guarda l'entusiasmo diffondersi.
Prova che funziona
Non c'è niente come usare un'app nativa ben realizzata. Le interazioni sono perfette, tutto è perfettamente dimensionato per il tuo schermo e il contenuto è mirato e facile da raggiungere. Perché? Perché è stato progettato appositamente per il piccolo touchscreen che hai in mano. Ogni interazione e parte di contenuto è stata accuratamente ridotta alla sua essenza, in parte perché semplicemente non c'era spazio fisico per fare altrimenti. I tuoi utenti lo adorano.
Tenere quel pensiero. Ora creiamo un'app web solo desktop ben realizzata, assumendo la stessa funzionalità dell'app nativa descritta sopra. Poiché abbiamo costruito pensando all'esperienza desktop, il nostro design prevede uno schermo ampio e orizzontale e cose come un cursore del mouse, e abbiamo tutto lo spazio del mondo per la navigazione, i contenuti, le intestazioni, i piè di pagina e i lati. Il sito è bellissimo e vince un premio.
Ora rimuovi il suffisso '-only' dalle due attività precedenti (mobile / desktop). Supponiamo che in entrambi gli scenari, sapessimo fin dall'inizio che dovevamo fornire esperienze su dispositivi mobili, desktop e tutto ciò che si trova nel mezzo. Quale punto di partenza ti posiziona meglio per andare avanti verso la migliore esperienza utente complessiva? Desideri che più app siano come siti Web desktop o che più siti Web desktop siano come app native? Quale direzione scala più facilmente?
Con desktop-first, i modelli di progettazione iniziali che vengono wireframe, progettati e approvati assumono uno schermo grande, un formato ampio, un mouse e una tastiera. Ciò può provocare modelli che semplicemente non si traducono bene su un piccolo touchscreen. Elenchi di selezione lunghi, tabelle di grandi dimensioni, mega-menu, stati al passaggio del mouse e lunghezza del contenuto diventano improvvisamente problematici.
Facciamo del nostro meglio per mettere tutto lì dentro, ma spesso significa sprecare infinite ore su soluzioni complesse.
L'eleganza viene sacrificata per amore del tempo e del budget. Sfumature e intenzioni sono perse e le soluzioni devono essere messe in atto frettolosamente se devono essere introdotte prima del lancio.
D'altra parte, per tradurre un design mobile first in dimensioni tablet e desktop, tutto ciò che potrebbe essere necessario fare è regolare il layout con alcuni CSS per riempire lo spazio. Non vi è alcuna "compressione" del contenuto, del design o dell'interazione in un luogo in cui non si adatta, e nessuna necessità intrinseca di modificare il markup quando si passa da un più piccolo a un più grande. C'è molto spazio per respirare. Inoltre, stai iniziando con contenuti intensamente focalizzati. Sei in una posizione migliore per prendere decisioni informate sull'eventuale necessità di aggiunte o miglioramenti. La traduzione è fluida e ottieni la sensazione di "app" gratuitamente, perché è quello con cui hai iniziato.
Ora che abbiamo messo a tacere le nostre paure legate ai dispositivi mobili, è tempo di portare un po 'di vita tanto necessaria ai browser dei dispositivi mobili ovunque. Iniziare in piccolo potrebbe essere la chiave per creare qualcosa di veramente grande. Non vedo l'ora di vedere cosa costruiamo.
Parole: Dan Tello
Dan Tello è uno sviluppatore frontend senior dell'area di Washington, D.C. presso Viget. Può essere trovato a bloggare qui e a spingere il codice su github.com/greypants. Questo articolo è apparso originariamente nel numero 262 di net magazine.
Questo mi piaceva? Leggi questo!
- Come avviare un blog
- Come creare un'app: prova questi fantastici tutorial
- Brillante selezione di tutorial su Wordpress
