Cosa sono e come funzionano le style tile

Connessione emotiva#section1

Le style tile sono un punto di partenza flessibile che definiscono uno stile per comunicare il web in una maniera che sia comprensibile dai clienti. Una style tile è più rifinita di una tradizionale identity mood-board e meno dettagliata di un mockup o di un comp di un sito web. Quando un interior designer riprogetta una stanza, non crea più versioni dei design che propone, ma porta dei campioni di colore, dei frammenti di pittura e dei disegni architettonici. Le style tile funzionano come frammenti di pittura e campioni di colore per l’interfaccia che possano essere eseguiti su qualunque dispositivo e a qualunque dimensione. Si tratta veramente di una soluzione responsive per il visual design.

Una mood-board può costituire un ottimo punto di partenza per la discussione con il cliente, ma è spesso troppo vaga per aiutare i clienti a fare il salto netto dalla discussione al sito web. Le mood board sono un buon modo per scavare in profondità nell’identità del brand, ma quando si tratta di portare l’identità all’interno di un sistema web complesso, una connessione così debole può rendere difficile al cliente capire ed immaginare il risultato. Le style tile sono un potente artefatto del visual design perché aiutano i designer a comunicare il modo in cui applicheranno gli stili per tutto il sistema web più esteso, incluse le esperienze desktop e mobile.

Fate domande per avere gli aggettivi#section2

Il processo della style tile mette in evidenza la passione che sta dietro ad un brand, rivelando delle perle descrittive, il tutto mettendo in connessione il cliente con il progetto. Il primo passo nel processo della style tile consiste nel fare domande agli stakeholder. Potete usare un questionario o fare le domande durante un kickoff meeting. Per prima cosa, assicuratevi di avere un elenco di stakeholder e valutate i loro obiettivi per l’aspetto visivo del sito. Fare in modo che definiscano i loro obiettivi fin dall’inizio rafforza la priorità di ciascuna decisione di stile per tutto il processo. In secondo luogo, nel vostro questionario ponete domande che incoraggino risposte ricche di aggettivi. Domande metaforiche come quelle descritte in questo articolo di Adaptive Path sono strategiche e aiutano a rompere il ghiaccio. Ad esempio, “Se il vostro sito web fosse un veicolo, che veicolo sarebbe e perché?”. Quest’ultima è una grande domanda: ci sono percezioni sociali e culturali che circondano i vari marchi automobilistici e i tipi di trasporto. Gli aggettivi associati a questi brand possono essere molto vari. Il vostro cliente descriverà la Toyota Prius in maniera differente rispetto a un SUV.

Le domande dei questionari di semantica differenziale sono un metodo particolarmente buono per carpire le preferenze estetiche del cliente: potete impostare delle coppie di parole che sono tra loro opposte e chiedere al cliente di selezionare un punto nella scala tra le due che aiuti a descrivere il modo in cui vedono il loro sito. Immaginano il loro sito come moderno oppure lo vorrebbero alla vecchia maniera o qualcosa che sta tra questi due estremi? Queste domande aiutano a valutare quanto si relaziona da vicino uno stakeholder con una parola che descrive lo stile potenziale del sito. Illustrativo, fotografico e tipografico sono tutte parole che uno stakeholder può valutare per aiutarvi a dare un senso alle loro preferenze. Spesso accoppio un sito esempio con ciascuna parola, così che lo stakeholder possa vederne la relazione. MailChimp è un esempio di sito “illustrativo” mentre NPR è un esempio di sito “tipografico”.

Le risposte che otterrete sono cruciali per formare il legame emozionale tra un concetto di design visuale a due dimensioni e la passione che il cliente sente per il proprio brand. Ascoltate attentamente, riordinate e analizzate le risposte degli stakeholder e create delle chiare connessioni tra gli oggetti visivi nelle vostre style tile e le effettive parole del cliente. Più riuscirete ad essere precisi più il cliente comincerà a sentirsi collegato al processo e si creerà così fiducia, che vi spianerà la strada verso un processo di approvazione più semplice.

Una volta che gli stakeholder avranno compilato il vostro questionario o risposto alle vostre domande durante un kick-off meeting, analizzate quello che vi hanno dato. Studiate le loro risposte e sottolineate gli aggettivi per poterne fare un elenco. Ci sono degli aggettivi che sono stati usati più frequentemente? Quelle parole dovranno stare in cima alla vostra lista. I temi cominceranno ad emergere e da questo punto potrete cominciare a formulare una visione del brand online. Questo potrà essere una breve dichiarazione che riassuma quello che avete scoperto o potrebbe asserire che tutti gli stakeholder sono in disaccordo. Sia che la visione del brand online sia chiara o che sia incoerente, vi fornisce un punto di partenza per discutere come procedere insieme al vostro cliente mentre gli presentate le “tile”.

In un recente progetto, il team di design di Phase2 Technology ha lavorato con The Washington Examiner per creare un microsito per la campagna delle elezioni del 2012 che fornisca informazioni politiche minuto per minuto. L’obiettivo del sito era quello di estendere lo storico brand di Examiner con un tono più patriottico per motivare i lettori per le prossime elezioni. Usando gli aggettivi che aveva fornito il team del Washington Examiner, Phase2 ha interpretato il brand del giornale esplorando tre opzioni stilistiche differenti tra cui il cliente potesse scegliere. Gli stili riflettevano le interpretazioni delle tre varianti del loro attuale brand online.

Le tre tile presentate al cliente sono le seguenti:

Iteration nation#section3

C’erano alcune sovrapposizioni tra gli aggettivi che gli stakeholder del Washington Examiner hanno usato per descrivere il loro brand, il che ci ha aiutato a creare una chiara visione del brand. La parola “patriottico” ha subito fatto pensare ad uno schema di colori rosso, bianco e blu e la loro ricca storia nell’editoria ci ha portato a scegliere svariati font slab serif che erano stati sviluppati per la leggibilità e per l’industria editoriale. Parole come “attuale” e “moderno” insieme al fatto che il sito fosse espressamente per la campagna del 2012, ci hanno spronato ad esplorare la texture e la profondità dei brand dei candidati alle presidenziali. Inoltre, gli aggettivi che erano più popolari, “pulito”, “forte” e “friendly”, hanno dettato tre direzioni in cui poteva evolversi la visione complessiva. La tile “pulito” era luminosa e con molti spazi bianchi, la tile “forte” aveva dell’alluminio spazzolato e le stelle del loro logo, mentre la tile “friendly” includeva delle grandi pennellate di colori accesi.

Durante il periodo di iterazione, gli stakeholder decisero di volere la prima tile, insieme alle stelle rosse della seconda tile e al font della terza tile. Durante questo giro, decisero di preferire un font slab serif amichevole, così abbiamo scelto Adelle, che a loro è molto piaciuto. Questa tile finale è stata tradotta direttamente nel design finale del sito.

Com’era#section4

Durante il processo di design di solito si presentano più comp ai clienti, ai quali piace vedere diverse opzioni e molti comp fanno sentire gli stakeholder come se stessero ottenendo quello per cui hanno pagato. Design vuol dire vendere e a noi piace rendere felici i nostri clienti, ma presentare dei comp completi fa più male che bene al processo, perché è nella natura umana mischiare e abbinare e questo permette ai clienti di sabotare le soluzioni migliori ai loro problemi di design basandosi su preferenze stilistiche transitorie. Alla fine, otterrete un Frankencomp: un’accozzaglia di elementi di interfaccia concepiti al di fuori degli obiettivi del sito web.

I processi e l’approccio influenzano il risultato finale#section5

Il design è una pratica delicata perché tutti abbiamo un’opinione estetica. I clienti costituiscono la parte più importante del processo di design: senza di loro faremmo siti web gratis e questo non significa avere un lavoro nel design, ma avere un hobby. Lo stile è orientato alle preferenze mentre il design è orientato agli obiettivi. Può essere scoraggiante aiutare un cliente a capire in che modo le due cose siano separate, ma le style tile possono costituire un componente chiave nel processo del web design che vi permette di coinvolgere il vostro cliente a livello interattivo ed iterativo. Quando mostrate i deliverable del processo di design in blocchi iterativi, il cliente è in grado di fornire maggiori feedback, si sentirà più coinvolto e diventerà un collaboratore prezioso nel design finale.

Design vuol dire fiducia#section6

La style tile ridefinisce i ruoli nella relazione cliente/designer. Le persone si rivolgono agli avvocati quando devono risolvere delle questioni nella vita quotidiana. I clienti si rivolgono ai designer quando hanno bisogno di risolvere dei problemi di comunicazione. Se considerate il designer come un avvocato che guida il cliente verso una soluzione, allora costruirete fiducia ad ogni iterazione. Vi fidereste di un avvocato se entrasse nella stanza e tirasse fuori il vostro piano di risparmio completamente sviluppato basandosi solo sulla vostra storia precedente? Ve ne andreste! Il brand di un’organizzazione e il modo in cui comunicano è un problema che può dimostrarsi delicato, tanto delicato quanto un problema in una relazione familiare o in un matrimonio. L’approccio, il tono e il processo che usate come designer ha una enorme influenza sulla relazione che create con un cliente. Avere diretto accesso al cliente, educarlo in base al vostro piano per il processo e immergersi sempre più nel design sono tutte parti di un processo di style tile che aiuta a creare una fiducia inestimabile.

Responsive Design#section7

Progettare per il web non vuole più dire progettare solo per una larghezza di 960 pixel. Progettare siti che reagiscano in maniera responsive alle varie dimensioni di schermo e ai vari device cambia l’importanza dei comp di design per le interfacce del cliente ma anche per la comunicazione nel team. Creare un mockup per ogni possibile device o dimensione di schermo è inefficiente e confonde il cliente. Le style tile sono pietre miliari per in sistema di design solido che imposta le aspettative del cliente e comunica il tema visivo a tutti i membri del team di progetto. Disegnare un sistema piuttosto che pagine di un sito dà al vostro team gli strumenti per creare un sito web vivo e vibrante. Da una style tile approvata dal cliente potete cominciare a creare altre risorse visive, come le guide di stile dei componenti che gestiscono gli elementi usati frequentemente. Per ulteriori riflessioni sui sistemi di design, leggete “sweet systems”.

Progettare il nostro processo di design#section8

In qualità di web designer creiamo esperienze per gli utenti ma spesso non vediamo il bisogno di progettare l’esperienza che i clienti provano durante il processo del web design. Pensare al design può migliorare il modo in cui affrontiamo le sfide, coinvolgiamo i nostri clienti e presentiamo i deliverable. Le style tile fanno procedere più velocemente le timeline di progetto, coinvolgendo gli stakeholder nel processo di brainstorming e sono un artefatto essenziale nel processo del responsive design. Coinvolgere fin da subito gli stakeholder e mischiare e abbinare gli stili con un deliverable che sia privo di layout può avere un effetto emotivo incredibile sull’intero team e sul risultato del progetto. Per un breve cheat sheet su come iniziare ad integrare le Style Tile nel vostro processo, date un’occhiata a StyleTil.es.

Illustrazioni: {carlok}