Crisi comune nel design reattivo e come risolverli

Senza nulla incastonato in solide basi ed elementi di layout flessibili come l'acqua, non è nemmeno "progettare" nel senso tradizionale. Il design reattivo segue (e accomodante) il flusso di dispositivi sul mercato. Tutti stanno sperimentando e non è mai stato così fantastico essere un web designer.

Ci sono così tante pratiche per il design reattivo che è difficile guardare un set e definirlo il migliore. Non possiamo avere un elenco "Cosa fare". Tuttavia, possiamo imparare dagli errori degli altri.

Quindi, ecco cosa ho imparato progettando per un web reattivo:

Progetta per il tuo pubblico. Non te stesso.

Supponiamo che tu stia cercando di raggiungere un pubblico in gran parte indiano con un sito Web super veloce e brillantemente progettato e un'ottima UX per quegli utenti mobili. Ci sono 1,2 miliardi di persone lì; dovrebbe essere un successo istantaneo e massiccio. I numeri stessi sono a tuo favore. O lo sarebbero se avessi saputo che appena il 13% delle persone ha smartphone. (Fonte: Google Mobile Planet).

Questo è solo uno dei motivi per cui l'apprendimento e la comprensione del tuo pubblico è fondamentale.

La diversità culturale, l'età, il sesso, la professione, la lingua, i dispositivi popolari, ecc. possono essere fattori molto importanti che creeranno o distruggeranno il tuo marchio/sito web.
È più facile di quanto sembri.

È noto che i designer perdono di vista per chi stanno progettando.

Quindi, se non hai un UX architect a portata di mano, farai bene a ricercarlo da solo. Alla fine si rifletterà sul tuo lavoro, quindi non alzare le spalle dicendo che non è il tuo forte.

Per i numeri di cellulare specifici, utilizza Mobile Planet di Google. Interroga i tuoi clienti sul loro pubblico.

Se riesci a metterti nei panni del tuo pubblico, sarai in grado di creare design intuitivamente facili da usare. Non è scienza missilistica, solo psiche umana di base.

Un "wireframe" ha bisogno di una storia

Il tuo progetto di design reattivo sarà incompleto senza interazioni. Lo stesso vale per il tuo mockup.

Il tuo design (probabilmente) non sarà un concerto di una pagina in cui appare il contenuto e non succede nient'altro.

Nessuna interazione, nessuno stato, nessuna animazione o effetto: praticamente tutto ciò che può rendere il tuo sito un successo (o un fallimento, se usato senza pensarci) viene spogliato. Mentre Style Tiles è un classico per una buona ragione (come ha detto il suo fondatore, "Per iniziare una conversazione sul design") è troppo semplice per essere sofisticato nei termini del design odierno.

INVESTIRE UN PO' DI TEMPO NELLA CREAZIONE DI PROTOTIPI INTERATTIVI DELLE TUE IDEE. COLLABORARE SU QUELLI IN MODO ESTESA PRIMA DI INIZIARE CON LO SVILUPPO DEL FRONT-END.

Non buttare solo idee. Hai sentito parlare di narrativa?

Racconta una storia reattiva e interattiva ai tuoi clienti con nient'altro che il tuo prototipo e la tua intuizione.

Usa strumenti come Balsamiq, Axure, UXPin, ecc. per creare versioni visive di quelle "storie". Accarezza la loro immaginazione con le parole; nutrilo con un prototipo ben realizzato.
Servirà a semplificare il tuo lavoro di progettazione e sviluppo per dopo e ti darà una traccia in qualche modo definita su cui attenersi. E come bonus: le prime impressioni contano ancora. Un buon prototipo mostra che sei entusiasta del progetto.

Contenuto: primo, visibile e adattabile. Sempre

Il motivo per cui stai diventando reattivo è che il tuo messaggio ha una portata più ampia essendo accessibile in modo uniforme e indipendente dal dispositivo.

Sconfiggi l'intero scopo del design reattivo dovendo nascondere i tuoi contenuti.

Il tuo pubblico mobile scaricherà comunque i dati, quindi che senso ha nasconderli? Crea un inventario di elementi di contenuto. Identifica quali elementi vanno su tutte le pagine e quali su quelle specifiche. Ad esempio, i tuoi pulsanti CTA possono trovarsi in ogni singola pagina o in quelle specifiche (come landing page, pagine di risorse correlate, ecc.).

Inizi inserendo prima gli elementi di contenuto e poi costruisci da lì. Campanelli e fischietti vanno alla fine.

Primo: comprendi gli obiettivi degli utenti e ciò che vogliono dal sito Web, quindi adatta i tuoi contenuti per un facile accesso sui loro dispositivi.

Invece di limitarsi a spremere un articolo di un milione di parole per adattarlo a una pagina mobile, dai ai tuoi utenti la possibilità di esaminare le informazioni senza scorrere all'infinito. E lo scripting front-end o lato server non è la risposta (effettiva).

Un buon modo per farlo è utilizzare un riepilogo breve e accurato per l'anteprima .

Consenti all'utente di decidere se desidera scorrere i tuoi contenuti per il resto. TL; Il DR è comune a tutti (anche alle organizzazioni dei media, motivo per cui otteniamo storie pubblicate senza un vero controllo dei fatti e basate solo su clamore). Quindi aggiungi una sezione alla fine del tuo contenuto e rendilo più semplice.

Secondo: fornire agli utenti informazioni complete anziché solo una versione frammentata di esse.

Usa colonne e caratteri reattivi. Usa Zurb Responsive Tables per tabelle di dati fluidi. Comprimi il supporto (usa CDN e memorizzazione nella cache per aumentare le prestazioni).
Il contenuto è il tuo messaggio. Assicurati che sia chiaro e visibile, indipendentemente dalle dimensioni del dispositivo.

Bonus: Content-first ti mette in mente la gerarchia dei contenuti e questo rende la progettazione della navigazione un processo più fluido.

Rispettare le limitazioni e le capacità del dispositivo

Quando parliamo di "mobile-first" o "miglioramento progressivo", comprendiamo veramente e accogliamo il minimo indispensabile? Ecco una carrellata di ciò che dovrebbe essere il "minimo indispensabile":

• Larghezza dello schermo utilizzabile: 120 pixel, minimo.
• Supporto del linguaggio di markup: XHTML Basic 1.1 fornito con tipo di contenuto application/xhtml + xml.
• Codifica dei caratteri: UTF-8
• Supporto formato immagine: JPEG, GIF 89a.
• Colori: 256 colori, minimo.
• Supporto per fogli di stile: CSS Level 1, CSS Level 2 @media rule insieme al palmare e a tutti i tipi di media
• HTTP: HTTP/1.0 o HTTP1.1 più recente
• Script: nessun supporto per lo scripting lato client.

Sulla base di queste specifiche, non è difficile creare un design funzionale. Il problema sta aumentando.
È bene considerare le dimensioni del dispositivo, ma questo è solo l'inizio e non l'intero. Ridurre al minimo e normalizzare gli script (prestazioni ed esperienza), progettare interfacce pulite con attenzione per spazi bianchi sufficienti (per il tocco), rispettare la connettività e i limiti di carico dei dispositivi (prestazioni) e testare sempre rigorosamente sono importanti qui.

Si prega di alleggerire il carico

Non voglio insistere su questo (abbiamo molte opinioni su questo argomento), ma non si può negare l'importanza della velocità della pagina per classifiche più alte e una migliore esperienza utente.

In poche parole: se la tua pagina è lenta da caricare, nessuno si preoccuperà di aspettare che raggiunga il ritardo.

Un approccio come il mobile-first funziona davvero molto bene per questo. Nel miglioramento progressivo, iniziamo con il minimo indispensabile di tutto: elementi dell'interfaccia utente, funzionalità e il fatto che stiamo progettando per le larghezze di banda più strette di tutti i dispositivi. Coloro che ancora denigrano i meriti dell'approccio mobile-first saranno d'accordo sul fatto che questo tiene conto delle prestazioni e della velocità rispetto a tutto il resto .

Inoltre, e non dovresti aver bisogno di ricordarlo, devi tenere sotto controllo le dimensioni dei tuoi file multimediali.

Quindi, utilizza CDN (fattibile per siti Web con traffico medio-alto) e tecniche di sviluppo back-end che alleggeriscono in modo specifico il caricamento delle pagine. Usa la memorizzazione nella cache. Migliora le prestazioni percepite (la velocità con cui il sito "sente" per l'utente) selezionando la casella pertinente prima di salvare un'immagine JPG per il web.

Mantieni il tuo design snello e ordinato (meno di tutti i tuoi clienti e utenti).

TL; DOTT

Quindi, ecco cosa ho imparato progettando per un Web reattivo:

• Progetta per un pubblico. Cerca un po' e usa Google Mobile Planet (e altri strumenti simili) per i numeri.
• Un Wireframe può prendere vita da una storia. "Prototipo" indica la versione preliminare di un dispositivo/sistema. Rendilo qualcosa che funzioni davvero. Utilizzare strumenti di prototipazione interattiva.
• Rendi i contenuti visibili e adattabili. Non nascondere i contenuti dai cellulari quando verranno comunque scaricati. Se c'è un post originale, aggiungi un breve riepilogo pertinente che è più adatto per la lettura sui cellulari.
• Rispetta le limitazioni e le capacità del dispositivo. Discussione del mouse/tocco delle dita a parte o dimensioni a parte, design per le specifiche minime del dispositivo utilizzato dal tuo pubblico mirato.
• Presta attenzione alle prestazioni. Non solo per un migliore posizionamento nei risultati di ricerca, ma anche per esperienza.

Biografia dell'autore: Lucy Barret è associata a HireWPGeeks Ltd. Fornisce servizi di conversione da HTML a WordPress e ha un team di sviluppatori esperti per aiutarla. È anche una blogger appassionata e ama condividere le sue conoscenze con la vasta comunità di WordPress. Segui la sua azienda sui social network come Facebook e Google+.