Contenuto
"Non sono uno scrittore", dice il designer, usando una grammatica discutibile, mentre consegna un compito al copywriter.
È vero, le immagini sono un elemento chiave del design ... ma non più della parola scritta (o l'usabilità del sistema, o della tecnologia, o uno qualsiasi degli altri elementi che lavorano insieme per risolvere i problemi degli utenti).
Il copywriting è solo un'altra caratteristica di progettazione che influenza l'opinione dell'utente sul fatto che gli piaccia o meno il sito o l'app abbastanza da tornare. Eppure, a volte questo è ancora un divario immaginario tra copia e design perché le competenze sono così diverse.
Abbatti i muri
Non stiamo sostenendo che i designer licenzino il loro team di copywriting e lo facciano da soli (sebbene i designer possano certamente scrivere copie, a volte lo abbiamo fatto noi stessi).
Ma il designer farebbe bene a abbattere il muro tra la comunicazione visiva del prodotto e la sua comunicazione testuale. Alla fine della giornata, fa tutto parte della stessa interfaccia che gli utenti sperimentano.
... E qui ci sono quattro motivi per cui:
01. Copy comunica direttamente con gli utenti
Un elemento visivo significativo o emotivo può "parlare" in senso figurato all'utente, ma spetta al testo parlare letteralmente all'utente. Che si tratti di fornire istruzioni, dettagli del prodotto, campi modulo per un acquisto o un saluto casuale, la scrittura è la distanza più breve tra te e la persona che fissa lo schermo.
Un sito o un'app può sopravvivere e persino avere successo senza immagini straordinarie o un'usabilità piacevole (basta guardare Craigslist), ma non troverai mai un sito che si basa esclusivamente su elementi visivi. Non entreremo nella gerarchia degli elementi, ma diremo che, come strumento di comunicazione, le parole sono essenziali.
A parte il contenuto, il copywriting soddisfa almeno sei scopi principali in uno schema di progettazione:
- Saluto: del testo sulla home page (o sulla pagina di destinazione più popolare) aiuta a orientare l'utente su dove si trova, spiega cosa puoi fare con il tuo miglior piede in avanti e suggerisce l'azione successiva da intraprendere.
- Navigazione - La maggior parte delle barre di navigazione utilizza parole che accompagnano le icone perché può essere difficile comunicare qualcosa di astratto come "Chi siamo" con simboli. L'eccezione, ovviamente, è quando le icone rappresentano metafore visive inconfondibili (es. Lente d'ingrandimento = ricerca).
- Istruzioni: non tutte le funzioni possono essere espresse con uno schema familiare o un segnale visivo e probabilmente arriverà il momento in cui dovrai spiegare in termini generali come eseguire un'attività.
- Feedback: quando qualcosa va storto o quando qualcosa va bene, l'utente apprezza una notifica.
- Inviti all'azione: ogni venditore conosce l'importanza del linguaggio durante la chiusura. Più veloce è l'invito all'azione, più è probabile che l'utente faccia un atto di fede e clicchi.
- Dati - Ad un certo punto, dovrai presentare i fatti freddi e concreti. Potrebbero essere le informazioni di contatto della tua azienda o le etichette di un campo modulo.
Hell’O Baby sfrutta subito molti di questi usi sulla sua home page. La loro intestazione informa l'utente in un inglese semplice con lo scopo del prodotto ("Crea un album interattivo del tuo bambino").
Nota come la presentazione amichevole del testo attraverso la tipografia divertente fa anche sembrare il testo un saluto casuale. Se fosse presentato in un semplice carattere serif o sans-serif (invece del suo aspetto scriptish), l'affermazione sarebbe sembrata fredda e forse eccessivamente impegnativa se confrontata con le immagini dei cartoni animati.
Ovviamente, l'invito all'azione "crea album" mostra il passaggio successivo prima di capire cosa fanno le icone del microfono, della fotocamera e dell'anatra. Nota come le immagini qui sono fantastiche: la copia non sostituisce le immagini, ma funziona insieme ad esse.
Microcopia
Come consigliato in Interaction Design Best Practices, non trascurare mai la potenza della microcopia. Decisioni come se usare "procedi" o "vai!" su un pulsante hanno tutte conseguenze sottili ma sostanziali su come l'utente percepisce il prodotto. La microcopia può sembrare trascurabile, ma Jared Spool spiega come l'inserimento di una riga di testo abbia aiutato ad aumentare i profitti del suo cliente di $ 300 milioni.
Anche se non vuoi sovraccaricare i tuoi utenti spiegando ogni singola funzione o aggiungendo commenti eccessivi, a volte le informazioni aggiuntive sono esattamente ciò che vogliono i tuoi utenti.
La ricerca degli utenti è il modo perfetto per determinare se alcune caratteristiche o elementi del tuo progetto vengono ignorati o utilizzati in modo improprio. A volte, scoprirai che problemi di usabilità eclatanti da un'interfaccia confusa possono essere risolti con una singola frase ben posizionata.
02. La copia integra gli elementi visivi
Il design consiste nel fondere i diversi elementi insieme per creare qualcosa che è così intuitivo da sembrare quasi invisibile. Se un designer si immagina un artista, uno dei loro colori primari è il testo. La copia di un'interfaccia non dovrebbe competere con le immagini: dovrebbero lavorare in tandem per creare la migliore esperienza possibile.
Ciò significa che i toni dei due dovrebbero sempre corrispondere. L'uso liberale del gergo adolescenziale e delle emoticon sembra ovviamente fuori luogo rispetto a un design di sito conservatore e professionale per una banca. Allo stesso modo, i contenuti seri che raccomandano un trattamento per la depressione non dovrebbero essere compensati da macchie di colore.
A parte il contenuto, il blocco di testo dovrebbe adattarsi visivamente al design: questo è solo un motivo per lavorarci su entrambi contemporaneamente. A questo proposito, segnaposto come lorem ipsum possono essere ingannevoli.
Diamo un'occhiata al seguente esempio.
Fin qui tutto bene, giusto? Sembra che il sito finale sarà perfettamente sulla buona strada, fino a quando ...
... qualcosa si è perso nella traduzione. È difficile prevedere quanto o quanto poco spazio occuperà il testo finché non sarà proprio lì di fronte a te. Questo, e il giusto abbinamento dei toni, sono il motivo per cui suggeriamo di progettare con la copia effettiva il prima possibile.
Fortunatamente, la differenza non è troppo drammatica nell'esempio sopra. Ma, come ci mostra il product designer Rian van der Merwe, ignorare un approccio basato sul contenuto può altrettanto facilmente rovinare il tuo design.
Pagina successiva: la copia è contenuto e crea tono e personalità ...
