{"id":467,"date":"2014-07-25T11:35:40","date_gmt":"2014-07-25T09:35:40","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/prototipi-di-workflow\/"},"modified":"2014-07-25T11:35:40","modified_gmt":"2014-07-25T09:35:40","slug":"prototipi-di-workflow","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/prototipi-di-workflow\/","title":{"rendered":"Prototipi di workflow"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/07\/Sketch31418520.png\" border=\"0\" align=\"left\" \/>Lo scorso anno, la digital agency per cui lavoro, <a href=\"http:\/\/bluecadet.com\">Bluecadet<\/a>, cominci\u00f2 un progetto di website redesign per <a href=\"http:\/\/fi.edu\">The Franklin Institute<\/a>, un famoso museo della scienza di Philadelphia, che stava affrontando la pi\u00f9 grande espansione della sua storia. I miei colleghi ed io eravamo entusiasti perch\u00e9 non solo potevamo lavorare con un&#8217;istituzione locale iconica, ma anche perch\u00e9 il progetto rappresentava un&#8217;opportunit\u00e0 per incorporare un numero di tecniche nelle nostre pratiche riguardanti il responsive web design: atomic design, HTML wireframes, style tiles, element collage e front-end style guide. Avevamo previsto una serie di rapidi prototipi che avrebbero conferito slancio a un armonico &#8220;avanti e indietro&#8221; tra il design e lo sviluppo. Avevamo la sensazione che si trattasse di un&#8217;opportunit\u00e0 per esaminare a fondo il modo in cui creavamo per il web, dall&#8217;inizio alla fine.<\/p>\n<p>E ci siamo bloccati.<\/p>\n<p>Non riuscivamo a trovare dove inserire tutte queste nuove tecniche nel nostro modo preferito di lavorare. Non penso che siamo gli unici a sentirci cos\u00ec. Il modo in cui creiamo per il web sta cambiando cos\u00ec rapidamente che, se avete partecipato ad un numero sufficiente di conferenze o letto abbastanza libri e blog negli ultimi due anni, potreste sentirvi come noi: eccitati ma un po&#8217; sopraffatti e preoccupati che la vostra organizzazione sia l&#8217;unica a non aver ancora adottato <em>il<\/em> modo approvato dall&#8217;esperto di creare per un web device-agnostic.<\/p>\n<p>Tuttavia, c&#8217;\u00e8 un pericolo seducente presente ogni volta che si vede qualcuno descrivere il proprio modo di lavorare. \u00c8 facile ritenere il suo processo come una rigida verit\u00e0 universale. Il problema \u00e8 che voi e il vostro team non siete come tutti gli altri: avete punti di forza e debolezze diversi. Adottare interamente il processo di qualcun altro ignora il fatto che probabilmente gli ci sono voluti molti tentativi per arrivare a quel punto e ci vorr\u00e0 moltissima sperimentazione da parte del vostro team per capire cosa funziona per voi.<\/p>\n<p>Quindi probabilmente la soluzione non sta nel trapiantare la guideline di qualcun altro nel tentativo di sistemare l&#8217;intera cosa in un colpo solo. Magari c&#8217;\u00e8 un modo per usare lo stesso spirito iterativo di queste nuove tecniche ed applicarlo all&#8217;intero workflow. In altre parole, per prototipare il vostro workflow. Per certi aspetti, \u00e8 un trucco mentale: un modo per dare a voi stessi il permesso di provare delle cose, anche se non siete sicuri del risultato. Inoltre, riduce anche la posta della scommessa ad un livello in cui ci sentiamo a nostro agio: <em>se ci incasiniamo qui, siamo ancora a posto<\/em>.<\/p>\n<p>Quella che segue, poi, non \u00e8 una ricetta ordinata o una formula: \u00e8 un insieme di osservazioni che spero vi aiuteranno a rilanciare il cambiamento nel workflow come un processo continuo fatto di piccoli e imperfetti passi.<\/p>\n<div class=\"paragrafo\">\n<h2>La tecnica \u00e8 semplice, parlare \u00e8 difficile<\/h2>\n<p>\u00c8 facile fissarsi sui benefici di particolari tecniche o strumenti e supporre che quei benefici siano ovvi per chiunque. Ma nel corso dell&#8217;anno passato, ci \u00e8 apparso chiaro che soddisfare le richieste del nostro web multi-device \u00e8 in minor parte un problema di tecnica e in maggior parte di comunicazione. A volte le persone devono solo capire perch\u00e9 volete che cambino il proprio modo di lavorare.<\/p>\n<p>Prima del progetto del Franklin Institute, i miei colleghi ed io abbiamo riunito tutte queste tecniche ma istintivamente ci siamo concentrati sui pezzi che influenzavano la nostra parte di processo. I designer e i developer parlavano e sognavano, ma perlopi\u00f9 all&#8217;interno di stanza con l&#8217;eco delle loro rispettive discipline. Quindi, quando venne il momento di far partire il progetto, abbiamo dovuto fare dei discorsi difficili su come avrebbero funzionato le nuove tecniche per tutti noi come team e a volte siamo stati totalmente scettici sui suggerimenti altrui. In pi\u00f9 di un&#8217;occasione ci siamo chiesti l&#8217;un l&#8217;altro: &#8220;\u00c8 grandioso e funziona per quell&#8217;agenzia, ma come funzionerebbe <em>qui<\/em>?&#8221;<\/p>\n<p>Allora probabilmente dovrete addurre buone motivazioni adattandole in maniera differente per ogni persona del vostro team. Se siete un designer, potrebbe voler dire spiegare ai vostri colleghi developer che vorreste cominciare a suddividere le cose in un sistema di design cos\u00ec che non dobbiate fare venti diverse iterazioni per lo stesso layout di pagina. Per gli sviluppatori, potreste dover convincere il vostro capo che uno &#8220;style prototype&#8221; sar\u00e0 il modo migliore per presentare un sito al vostro cliente.<\/p>\n<p>Qualunque sia la logica, rendetevi conto che il cambiamento rappresenta un costo effettivamente reale (almeno a breve termine) per i vostri colleghi, in termini di tempo e di comodit\u00e0, e il loro scetticismo potrebbe essere una reazione a questo costo piuttosto che ai benefici meno immediati che dite che ne deriveranno. Concentrarsi sul <em>perch\u00e9<\/em> invece che sul <em>come<\/em> pu\u00f2 aiutarvi ad equilibrare queste due forze contrastanti.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Limitate il focus<\/h2>\n<p>Al momento in cui scrivo, Bluecadet ha 22 membri dello staff a tempo pieno. \u00c8 sufficientemente grande da rendere difficile lavorare sugli intricati dettagli di un cambiamento di processo a livello aziendale. Pertanto, partiamo in piccolo, a livello di progetto, invece di provare a realizzare un processo monolitico che viene passato dall&#8217;alto.<\/p>\n<p>Date uno sguardo ai progetti che avete all&#8217;orizzonte. Pensate alle parti del vostro workflow che volete migliorare e scegliete nesolo <em>una<\/em> da introdurre nel vostro progetto. Perch\u00e9 solo una? Perch\u00e9 vi d\u00e0 sufficiente spazio per sperimentare senza mettere in pericolo il vostro progetto.<\/p>\n<p>Un mio mentore una volta mi disse che programmare (e in particolar modo programmare per il web) si riassume tutto nella riduzione del numero di &#8220;unknown&#8221; in un progetto a un numero gestibile. Uno va bene, due sono stiracchiati, tre \u00e8 chiamare i problemi. Se pensate che esplorare i wireframe HTML\/CSS possa avere un impatto positivo sul vostro lavoro, introducete solo loro. La maggior parte dei progetti ha gi\u00e0 abbastanza attrito di per s\u00e9 senza aggiungere o cambiare pi\u00f9 processi allo stesso tempo.<\/p>\n<p>Per il progetto del Franklin Institute, alla fine abbiamo deciso che l&#8217;innovazione che avremmo aggiunto sarebbero state le front-end style guide. Non si trattava di un gran cambiamento, ma era uno dei piccoli passi che pensavamo avrebbero potuto avere grandi benefici senza influenzare la nostra tabella di marcia.<\/p>\n<p>Abbiamo preso questa decisione basandoci su due fattori, che potrebbero tornarvi utili quando con il vostro team penserete a quale potrebbe essere &#8220;quella singola cosa&#8221; da introdurre:<\/p>\n<ul>\n<li>Una buona idea che non ha funzionato molto bene in passato: avevamo creato una style guide statica per un progetto precedente, che rapidamente era diventata datata e quindi era stata eliminata, ma noi continuavamo a pensare che l&#8217;idea avesse degli aspetti positivi. Quindi, quando vi riunite come team, pensate a delle buone idee che avete avuto in passato, che magari si sono arenate e in che modo potrebbero funzionare se si cambiasse l&#8217;approccio ad esse.<\/li>\n<li>(Un po&#8217; di) esperienza insieme (a molto) entusiasmo: si era unito al nostro team un nuovo front-end developer che aveva gi\u00e0 sperimentato vari generatori di style-guide come <a href=\"http:\/\/barebones.paulrobertlloyd.com\/\">Barebones<\/a> e <a href=\"http:\/\/patternlab.io\/\">Pattern Lab<\/a> e, cosa pi\u00f9 importante, era eccitato all&#8217;idea di crearne uno. Qualcuno ha qualcosa che sta testando su un progetto personale o che ha usato con successo in un lavoro precedente? Se \u00e8 cos\u00ec, siete gi\u00e0 a met\u00e0 strada: potreste solo dover trovare come inserirlo.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Allineate strumenti e tecniche con il vostro team<\/h2>\n<p>Una delle discussioni ricorrenti che facciamo nel nostro studio \u00e8: &#8220;I nostri designer dovrebbero imparare a scrivere markup e cominciare a fare parte di questo processo di design nel browser?&#8221;. Abbiamo sentito numerose tesi persuasive a favore di questa idea, ma alla fine, abbiamo deciso che il focus principale dovrebbe essere <em>come<\/em> far arrivare i design nel browser prima nell&#8217;ambito del nostro processo, invece di <em>chi<\/em> dovrebbe fare quel lavoro.<\/p>\n<p>Questo ci ha portato a provare a far lavorare insieme i designer e gli sviluppatori prima rispetto al solito durante il progetto e a fare in modo che lo sviluppatore creasse del markup che &#8220;seguisse la scia&#8221; degli schizzi e delle esplorazioni in Photoshop del designer. Abbiamo scoperto che cos\u00ec facendo traiamo vantaggio dai punti di forza dei singoli membri del nostro team. Significa anche che i nostri sviluppatori forniscono un feedback che rientra nelle iterazioni sul design mentre \u00e8 ancora malleabile.<\/p>\n<p>Attualmente siamo nel mezzo di un progetto di redesign di un magazine letterario e abbiamo scoperto che i rozzi mockup HTML\/CSS creati dal nostro sviluppatore ci hanno aiutato a porre le domande giuste alla designer del nostro team. Dare alla nostra designer un problema specifico da risolvere (&#8220;Questi titoli occupano troppo spazio nelle larghezze pi\u00f9 strette&#8221;) le ha permesso di giudicare il problema nel contesto dell&#8217;intero design. Ha potuto cos\u00ec poi spiegare cosa stava cercando di ottenere a livello visuale e perfino di trovare soluzioni che si estendevano oltre il problema immediato che stavamo cercando di risolvere. Guardava lo schermo mentre allargavamo e restringevamo il browser e poi diceva qualcosa come &#8220;Se sposti i titoli sotto alle foto, tutto questo problema sparisce&#8221;. Allontanarsi dalle idee dogmatiche riguardanti chi dovrebbe fare cosa le ha permesso di concentrarsi a fare quello che <em>le riesce<\/em> meglio, ossia risolvere problemi visuali.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Distinguere tra bisogni interni ed esterni<\/h2>\n<p>Quando si cominciano a fare dei cambiamenti, si potranno cominciare a produrre dei deliverable importanti ma solo per il pubblico interno. Questo potrebbe essere perch\u00e9 hanno un&#8217;utilit\u00e0 limitata per il cliente o semplicemente non sono sufficientemente maturi. Gestire le aspettative \u00e8 tanto importante quanto provare una nuova tecnica, quindi se il cliente vedr\u00e0 qualcosa di nuovo dovrete investire del tempo per prepararlo a quello che ricever\u00e0, specialmente se non \u00e8 il modo in cui \u00e8 abituato a lavorare.<\/p>\n<p>Per un progetto attuale stiamo producendo dei wireframe HTML\/CSS per avere un&#8217;idea di quanto tempo effettivamente ci voglia per realizzarli. Dal momento che non lo sappiamo (ancora), il primo giro di deliverable per il cliente saranno ancora dei wireframe statici fatti in Photoshop. Se ci sembrer\u00e0 che i prototipi HTML\/CSS saranno sufficientemente maturi, li presenteremo al cliente nel giro finale.<\/p>\n<p>Mentre lavorate, poi, datevi sufficiente spazio per fare degli aggiustamenti: cosa succede se ci vuole il doppio per produrre quel wireframe? Cosa succede se il cliente fa resistenza a mettere in parallelo le conversazioni sul wireframe e sul design? E se la cosa che avete prodotto ha un valore ma solo se accompagnata da altri deliverable?<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Concentratevi sui prodotti, non sulle presentazioni<\/h2>\n<p>Una delle cose che avremmo dovuto fare era chiarire l&#8217;obiettivo finale. Sembra ovvio: &#8220;Stiamo facendo un sito web&#8221;, ma se il vostro processo \u00e8 in un qualche modo simile al nostro, in realt\u00e0 passate molto tempo a creare di tutto fuorch\u00e9 un sito web. Per la maggior parte, farete foto di un sito web.<\/p>\n<p>Recentemente, mentre lavoravo a una beta build di un sito web, ho scoperto che la maggior parte dei membri del team del nostro cliente stava usando delle versioni molto vecchie di Internet Explorer e di Firefox. Queste persone erano sorprese nel vedere qualcosa che differiva cos\u00ec tanto dai comp che gli erano stati presentati ad uno stadio precedente del processo.<\/p>\n<p>Questa esperienza ci ha insegnato molto. Creare delle aspettative nel cliente \u00e8 un modo per evitare sorprese, ma piano piano, come team, stiamo convenendo su una cosa: il browser \u00e8 l&#8217;arbitro finale di quello che facciamo, quindi smettiamola di spingerlo in fondo alla linea di produzione. I componenti del nostro processo devono supportare il prodotto finale in ogni step del percorso.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Mettete in agenda il prototipo del vostro processo<\/h2>\n<p>\u00c8 facile fare di s\u00ec con la testa ed essere d&#8217;accordo su qualcosa: &#8220;Questo lo facciamo!&#8221;. Ma quando vi immergete nel lavoro di dettaglio, \u00e8 altrettanto facile dimenticarsi di quella nuova cosa che eravate d&#8217;accordo di mettere nel mix. Pertanto, assegnate a qualcuno il compito di assicurarsi di rivedere i vostri prototipi di processo pi\u00f9 volte. Questo potrebbe voler dire che dovete cominciare ad incontrarvi pi\u00f9 frequentemente. Noi abbiamo trovato utile avere dei meeting ufficiali, ma la nostra speranza \u00e8 che alla fine cominceremo a fare tutto questo in maniera meno strutturata, scegliendo di incontrarci informalmente quando sentiamo il bisogno di discutere qualcosa.<\/p>\n<p>Se state lavorando in un team project-based, ricordatevi di condividere quello che state facendo con gli altri gruppi. Per esempio, in un progetto recente, abbiamo implementato dei blocchi di contenuto modulari che potrebbero essere riordinati al bisogno, ispirati da un <a href=\"http:\/\/www.newfangled.com\/the_way_you_design_web_content_is_about_to_change\">post di Christopher Butler di Newfangled<\/a>. Poi abbiamo mostrato quello che stavamo facendo ad una collega, che ha integrato qualcosa di quello che ha imparato nel suo successivo progetto. Ha anche posto delle domande acute che ci hanno aiutato a migliorare l&#8217;esperienza di content-authoring per il nostro cliente.<\/p>\n<p>Condividendo con gli altri, si vince tutti: i vostri colleghi useranno le vostre nuove skill e voi sarete costretti a chiarire i vostri obiettivi e le vostre supposizioni.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Iterate il vostro workflow (giocate al gioco che dura di pi\u00f9)<\/h2>\n<p>Quando rielaborerete il vostro processo, sar\u00e0 bene tenere un log progressivo delle cose (sia positive sia negative) che avete incontrato ad ogni nuovo cambiamento introdotto:<\/p>\n<ul>\n<li>Qualcosa ha richiesto pi\u00f9 (o meno) tempo del previsto?<\/li>\n<li>Ci sono state persone influenzate negativamente dal cambiamento?<\/li>\n<li>Come ha reagito il cliente?<\/li>\n<\/ul>\n<p>Scomponendo le cose in parti pi\u00f9 piccole, sarete in grado di valutarne l&#8217;efficacia. Potrete tenere quelle che hanno funzionato e rifinire (o scartare) quelle che non hanno funzionato. \u00c8 inoltre importante avere un forum in cui condividere questi pezzi: in Bluecadet abbiamo fatto in modo che la condivisione fra di noi delle lezioni apprese dai progetti completati diventasse una parte regolare del meeting mensile di tutto lo staff.<\/p>\n<p>Nel corso di tre progetti distinti, abbiamo finora testato sul campo:<\/p>\n<ul>\n<li>il contenuto ed il layout atomico\/modulare<\/li>\n<li>le front-end style guide<\/li>\n<li>i wireframe HTML\/CSS<\/li>\n<\/ul>\n<p>Questo \u00e8 quanto: ciascuna di queste cose che abbiamo provato le faremo probabilmente solo un <em>po&#8217;<\/em> in maniera diversa la seconda volta, alla luce di tutti i dati che abbiamo raccolto dal primo giro di prova. Se ci fossimo seduti a discutere fino a che non fossimo stati sicuri del &#8220;Nuovo Modo di Fare le Cose&#8221;, beh, saremmo ancora l\u00e0 seduti a discuterne oggi.<\/p>\n<p>Una delle cose di cui sono particolarmente orgoglioso \u00e8 che lavorando pezzo per pezzo abbiamo fatto progredire il nostro workflow in parallelo all&#8217;essere onesti con i nostri clienti. Una delle nostre guideline interne \u00e8 che tutti i nostri clienti non devono finanziare il nostro progetto di remodeling del workflow: la messa a punto deve risultare in benefici tangibili per noi al nostro interno, ma, ancora pi\u00f9 importante, deve portare ad un prodotto migliore per i nostri clienti.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Provate qualcosa di nuovo. Adesso.<\/h2>\n<p>Mentre finisco di scrivere questo articolo, stiamo provando un&#8217;altra cosa che speriamo di aggiungere a quella lista: prototipi HTML\/CSS come design deliverable. Forse sostituiranno i comp statici oppure semplicemente li accompagneranno, non lo sappiamo ancora, ma va bene non saperlo. Per l&#8217;autunno probabilmente staremo realizzando cose molto diverse da adesso, grazie alle informazioni ricavate dagli esperimenti che facciamo man mano.<\/p>\n<p>Spero che questo incoraggi voi e il vostro team a fare anche solo dei piccoli passi. Riunitevi e parlate delle parti del vostro workflow che possono essere migliorate, scegliete una cosa da provare insieme e cercate di capire dove potete infilarla. Come noi, probabilmente non riuscirete mai a tirare una riga sul calendario e a dire &#8220;Ecco il momento in cui abbiamo cominciato a fare le cose nel modo giusto&#8221;, ma vi andrete molto pi\u00f9 lontano, un passo alla volta.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Atomic design. Wireframe HTML. Style tiles. Tutti noi stiamo cercando di adattare i nostri processi, deliverable e tecniche per andare incontro alle sfide poste dal web multi-device in rapida evoluzione. Tuttavia, \u00e8 probabilmente impossibile sostituire il nostro workflow tutto d&#8217;un colpo e poi, comunque, chi pu\u00f2 dire che le linee guida di qualcun altro funzioneranno con il nostro team? Vediamo come il team di Mark Llobrera ha lasciato perdere l&#8217;idea del workflow perfetto e come, al contrario, ha adottato un approccio pi\u00f9 iterativo per processare il cambiamento.<\/p>\n","protected":false},"author":818,"featured_media":7000734,"comment_status":"open","ping_status":"open","template":"","categories":[263,112,277,278],"tags":[],"coauthors":[422],"class_list":["post-467","article","type-article","status-publish","has-post-thumbnail","hentry","category-business","category-numero-96-31-luglio-2014","category-web-strategy","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000734"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=467"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}