033 – Lascia che sia

Studiare un progetto Web al pixel, mockup in tutte le risoluzioni possibili, pretendere che tutto sia realizzato così come era stato pensato fin dall’inizio. Realtà o Utopia? Requisito fondamentale per una UX efficace oppure…?


IN PRIMO PIANO:

INSTAGRAM: @cercasiai
EMAIL: aaaicercasi @ gmail.com
TWITTER: @Aicercasi

Myfoglio.com è l’app di fatture freemium, sicura e completa già dalla versione non a pagamento. Provala qui:
https://www.myfoglio.com/

Concorso 2021: inviami un email a aaaicercasi @ gmail.com con indicato cosa fai e perché sei un ascoltatore “specialissimo” e a fine 2021, se mi avrai convinto, potrai vincere un abbonamento myfoglio premium!

Argomenti della puntata:

  • Rigore, logica e mente aperta agli stimoli
  • Quanto piacciono i dittatori!
  • Web liquido
  • Impossibile prevedere il futuro
  • Classiche richieste da grafici
  • Il widget, l’eccezione alla regola
  • Lasciare spazio alle incognite
  • Parola d’ordine: flessibilità

Ascoltala qui:

Iscriviti:
iTunes | Spreaker | Spotify | CastBox (Android) | Google Podcast | Deezer | Podchaser

Trascrizione:

Sono un designer estremamente preciso, le cose le voglio fatte come dico io. Ho realizzato i mockup, li ho in tutte le risoluzioni, soprattutto mobile, voglio realizzare l’app in bootstrap, e pretendo che sia tutto esattamente come lo vedo sul mio Mac! Nel design è facile farsi prendere la mano nell’organizzare e strutturare tutto fino al pixel. L’ho sempre detto che uno dei compiti del user experience è mettere ordine, strutturare, far trovare le cose nel posto più plausibile in cui dovrebbero essere e che quindi il compito del design è rappresentare le cose nella maniera più pratica ed ergonomica possibile. Due facce della stessa medaglia che pretendono rigore e logica, mantenendo aperta la mente a qualsiasi stimolo e reinterpretazione di ciò che si è già fatto, dell’esistente. Ma è proprio questo il punto. Rigore e logica ok, ma la mente aperta agli stimoli? Dove ce la siamo persa? Internet è un grandissimo maestro per quanto riguarda questo aspetto. Ero una persona rigida e intollerante, mi arrabbiavo molto e volevo le cose solo come le avevo pensate io ed ora eccomi qua su Internet da vent’anni a trovare ogni volta delle soluzioni a problemi che non finiscono mai, rimettendo sempre tutto in gioco, reinventandomi e reinventando ogni mio progetto online mediamente ogni 5 anni al massimo! Non sono di certo il designer dell’introduzione del podcast! Non realizzo mockup per ogni risoluzione possibile e soprattutto sono perfettamente consapevole che il mio disegno, il mio progetto, mockup, Èè solo lo storyboard di partenza di qualcosa che prenderà una piega del tutto differente. Ho ricevuto molte critiche per il fatto che non mi impunto, non dico questo pulsante è largo 200x60px, di questo colore esadecimale, starà qui e qua, non andrà assolutamente modificato, starà a 20px dal top e a 15px dal bottom e si vedrà così su Firefox, Chrome, e invece così in Edge e Safari. Perché è più rassicurante per tutti che qualcuno imponga le proprie idee in questo modo. È rassicurante per il programmatore che deve eseguire, per il project manager che deve organizzare, per il cliente che brancola nel buio. È molto più difficile avere a che fare con qualcuno che accoglie ogni variabile in corsa e modifica di conseguenza le sue considerazioni di partenza. Ma per me questo invece è il mio punto di forza ovvero quello di adattarsi a tutto, di lasciare che sia. In venticinque anni che sono online, di ascese e cadute di strumenti, linguaggi e soluzioni ne ho viste a bizzeffe e quello che ho notato è che più un sistema era rigido e ostile al nuovo, più era facile che scomparisse nel giro di breve tempo. Ma torniamo al pixel perfect. Ci sono due ragioni per cui, se sei un designer Web ti consiglio di non sprecare tempo a crearti mockup per qualsiasi stato, browser, risoluzione e ambiente possibile e immaginabile. La prima: l’unica cosa stabile in Internet è il primo pixel in alto a sinistra sullo schermo. La seconda: non puoi prevedere tutte le possibili implicazioni, usi, sistemi operativi, piattaforme, browser che sono disponibili al mondo adesso, ma soprattutto nel futuro. Sul primo punto. L’unica cosa stabile in Internet è il primo pixel in alto a sinistra sullo schermo, tutto il resto fa riferimento a questo, si accorda, si adatta, calcola proporzioni, etc., in base a questo punto. Vuol dire che è come se disegnassi sull’acqua. Puoi mettere una boa, legarla al fondo, stabilire che starà davanti a questa spiaggia e non a quest’altra, ma comunque la boa ruoterà, ondeggerà si sposterà un po’ avanti e un po’ indietro. Ed è un bene! È un bene perché se fosse fissa in mezzo al mare, sarebbe la causa di tantissimi incidenti! È una fortuna che la boa si sposti e non rimanga graniticamente ancorata sul fondo come un palo. Sul secondo punto. È abbastanza assurdo pensare che prevederai ogni possibile utilizzo della tua grafica. Semplice. Perché se anche riuscissi a valutare l’impatto del tuo progetto sui sistemi esistenti e ce ne sono miliardi, non potrai mai valutare la fruizione del tuo progetto su quelli che verranno in futuro. Ma veniamo al sodo perché ho parlato per massimi sistemi. Il designer che mi fa mettere il comando css per far sì che tutti gli utenti al mondo vedano il font preciso che ha sulla sua macchina invece di fare riferimento ai font comunemente utilizzati, si prende una grossissima responsabilità: metti che il suo font non si veda nella stessa medesima maniera su un sistema iOs o uno Windows, basta 1px di differenza nell’interlinea per avere due interfacce grafiche completamente differenti solamente su questi due sistemi operativi. Sempre il nostro Designer pignolosissimo che si impunta a mettere paletti per i css per far sì che ad ogni risoluzione possibile e immaginabile gli elementi sulla pagina si spostino sempre secondo le regole precedentemente stabilite sul mockup, rischia. Rischia che si verificherà quell’eccezione imprevedibile, non contemplata dal disegno, che farà sì che quell’interfaccia si veda estremamente male tanto da essere percepita come un errore. C’è un oggetto che più di ogni altro soffre dell’ampiezza dei possibili utilizzi e delle differenti visualizzazioni sul Web ed è il widget. Il widget è un elemento che un fornitore di servizi mette a disposizione per essere integrato all’interno di un qualsiasi sito web o sistema operativo. A suo tempo erano noti quelli di Windows Vista che permettevano di far comparire le previsioni meteo sul desktop o, gli indici di borsa o il calcolo delle calorie. Ma adesso sono widget tutti quei piccoli elementi che possono essere integrati all’interno delle pagine web che mostrano ad esempio la media delle recensioni degli utenti, o le attività sui social etc. Il widget è in sé un elemento “ingrato” perché è un elemento che deve avere talmente tante costrizioni da risultare impeccabile e perfetto su qualsiasi ambiente, piattaforma, browser etc. Per fortuna che spesso è un elemento molto piccolo, e come la nostra boa in mezzo ai flutti di Internet, si fa un po’ sballottare a destra e a manca per i siti mantenendo la sua forma e le sue caratteristiche. Il problema con i widget è che si integrano dentro pagine web create da altri. Basta un asterisco di troppo nel css del proprietario del sito web per applicare uno stile non voluto anche al tuo widget. Basta uno stile su un div generico o su una classe troppo comune per ritrovarti un widget del tutto compromesso. Quello è l’unico caso in cui è assolutamente necessario realizzare un elemento della pagina in maniera costrittiva. Solo e soltanto quel caso. Ed è complicatissimo perché non puoi umanamente prevedere tutti gli utilizzi che gli utenti ne faranno e in che modo verrà applicato nei loro siti. Per cui, quando progetti il design di un interfaccia web assicurati di preparare elementi flessibili: box che si adattano, card che si espandono e soprattutto si contraggono fino ai minimi termini, pulsanti che non hanno dimensioni fisse, che potrebbero contenere ogni sorta di codice, immagine, icone, testo dinamico, considera la lunghezza delle stringhe, considera le differenti lingue del mondo, disegna il mockup e poi immediatamente realizza un prototipo funzionante in html. Divertiti a zoomare la pagina, cambiare risoluzione, ingrandire e rimpicciolire la dimensione del carattere da browser. E assicurati NON che si veda sempre perfettamente uguale su ogni sistema operativo o su ogni browser, ma che si veda in modo fruibile, diverso, ma funzionante. Lascia spazio ai programmatori, dotali di tutti gli elementi necessari, di un design system da cui poter prelevare i pezzi di codice e grafica, accogli le proposte che ti faranno perché spesso il limite tecnico apre le porte a nuove possibilità impossibili da prevedere. Non mettere limiti alla provvidenza, sii umile e pronto a rivedere ogni tua singola idea. Perché stai organizzando e strutturando, per quanto possibile, qualcosa che dovrà essere flessibile ad ogni esigenza e dovrà funzionare “mediamente bene” idealmente per tutti gli utenti del mondo.

Posted in Podcast and tagged , , , , , , , , , , , , , , , , .

Rispondi