La guida per professionisti alla progettazione dell'interfaccia utente

Autore: Randy Alexander
Data Della Creazione: 25 Aprile 2021
Data Di Aggiornamento: 16 Maggio 2024
Anonim
SEMINARIO TDC 2021 05 27
Video: SEMINARIO TDC 2021 05 27

Contenuto

Quando ho iniziato la mia carriera, ero un web designer. Ho lavorato nel web design per quattro anni, iniziando con siti di piccole imprese per poi passare a clienti più grandi. Ho scoperto che non era il design grafico che mi interessava, né lavorare per marchi più grandi. Ero più interessato ai modelli di impaginazione, al modo in cui le persone interagivano con le forme e cose come la performance percepita, che al design visivo di una pagina web.

Quando guardavo i film di fantascienza, guardavo le interfacce. E quando giocavo ai videogiochi, osservavo il modo in cui erano disposti i menu. Se qualcuno di questi tratti ti suona familiare, potresti anche essere un designer dell'interfaccia utente.

Ho lasciato il mio lavoro in agenzia e ho fondato la mia azienda. Sulla mia pagina LinkedIn ho cercato di riassumere il mio nuovo obiettivo professionale: realizzare il miglior software possibile. Sono passati quattro anni da quando ho iniziato come libero professionista e il mio viaggio non si è fermato. In questi giorni aiuto a gestire una piccola società di progettazione di interfacce utente chiamata Mono. Di recente abbiamo accolto il nostro quarto membro del team.


In questo articolo voglio descrivere cosa vuol dire essere un designer dell'interfaccia utente, incluso ciò che esattamente comporta il lavoro, dove trovare le migliori risorse di apprendimento e come migliorare il tuo mestiere.

Cosa fa un designer dell'interfaccia utente?

Trovo che in genere si possa dividere il lavoro di un progettista di interfacce utente in quattro categorie. Comunichi con il cliente, fai ricerche, progetti e prototipi e comunichi con gli sviluppatori. Diamo un'occhiata a ciascuna di queste fasi in modo più dettagliato.

Comunicazione con il cliente

La comunicazione con il cliente consiste nel comprendere il problema del cliente. L'obiettivo è fare i conti con l'attività del tuo cliente, quindi l'inizio di un progetto in genere costituisce un sacco di chiacchiere. Va bene non sapere troppo sul dominio del tuo cliente quando inizi: puoi guardare alla sua attività in un modo nuovo mentre prevedi possibili soluzioni di design.


Per essere un buon progettista dell'interfaccia utente, devi essere in grado di pensare alla fine insieme all'attività del tuo cliente. Ad esempio, il tuo cliente potrebbe essere nel settore dell'aviazione. Lavorare per loro alla fine ti renderà abbastanza informato su quel settore. Quindi, un consiglio per la tua felicità qui è quello di scegliere saggiamente i settori per cui lavori, in modo da non finire per essere un esperto in qualcosa che non ti interessa o che non ti interessa.

Durante un progetto, la comunicazione non si ferma. In qualità di designer, presenterai costantemente il tuo lavoro. Nella nostra azienda siamo un team remoto, quindi non abbiamo molte riunioni di persona. Invece, facciamo un uso intensivo della condivisione dello schermo tramite le videoconferenze. Strumenti di comunicazione come Skype e Slack vengono utilizzati ogni giorno.

È utile combinare metodi di comunicazione sincroni e asincroni. Una chiamata è ottima se hai bisogno di molte informazioni rapidamente, ma devi essere in giro allo stesso tempo. Pensiamo a Slack come al nostro "refrigeratore d'acqua virtuale" e utilizziamo Basecamp per gestire progetti di design complessi. Quando progettiamo prototipi utilizzando HTML e CSS, utilizziamo i problemi di GitHub per discutere direttamente il codice.


Ricerca

Oltre alla comunicazione con i clienti, farai molte ricerche. Ciò potrebbe includere studi sul campo, seminari con il cliente, analisi della concorrenza o definizione di una strategia - essenzialmente, qualsiasi cosa che ti aiuti a capire il problema in questione.

La ricerca è ciò che guida le tue scelte progettuali. È un articolo che hai letto una volta o quella novità che Apple ha appena rilasciato. Quando è il momento di spiegare perché hai fatto una particolare scelta di design, la tua ricerca ti sostiene.

La ricerca può essere molto ampia. Provo spesso nuovi dispositivi a scopo di ricerca o mi iscrivo a una nuova app web per studiarne l'interfaccia utente.

Progettazione e prototipazione

In qualità di designer, probabilmente trascorrerai la maggior parte del tuo tempo facendo lavori di progettazione e prototipazione. Un progetto di progettazione dell'interfaccia utente può andare avanti in molti modi, dallo schizzo, alla progettazione dettagliata, alla codifica.

Il metodo utilizzato dipende in gran parte dal tipo di progetto. Cosa stai progettando? È un sito Web o preferiresti chiamarlo un'app? Utilizza la tecnologia nativa? È una riprogettazione o stai partendo da zero?

Nella nostra azienda non esiste un processo fisso, ma la maggior parte dei progetti segue lo stesso ordine approssimativo: inizia con schizzi e wireframe, passa alla progettazione visiva e interattiva dettagliata e termina con un prototipo.

Come designer, passiamo molto tempo a pensare ai nostri strumenti. Sebbene i grandi strumenti siano importanti, non sono la cosa più importante. Essere in grado di utilizzare con competenza Adobe Creative Suite e app come Sketch equivale a poter usare una matita per disegnare o un pennello per dipingere. Hai ancora bisogno di fare il dipinto.

Detto questo, un sano interesse per gli strumenti è una buona cosa. Adoro provare nuovi strumenti che possono aiutarmi a essere più produttivo. Il mio strumento di editing vettoriale preferito è Illustrator, ma oggigiorno la maggior parte del mio lavoro di progettazione visiva viene svolta in Sketch. Altri membri del team sono passati a strumenti più recenti come Affinity Designer.

Gli strumenti sono una scelta molto personale. Finché possiamo lavorare facilmente insieme, ognuno è libero di scegliere il proprio. Per rendere più semplice parlare dei nostri progetti con i clienti, realizziamo prototipi con InVision. Per una prototipazione più avanzata, tuttavia, utilizziamo HTML e CSS. Lo strumento di cui hai bisogno dipende tutto dal lavoro che vuoi fare con esso.

Comunicazione con gli sviluppatori

Una parte spesso dimenticata del lavoro di un designer dell'interfaccia utente è la comunicazione con gli sviluppatori. In questi giorni non puoi farla franca semplicemente inviando i tuoi progetti agli sviluppatori e sperando che vengano implementati correttamente. I migliori designer sanno che la sfida non è creare il design, ma comunicarlo, non solo agli stakeholder che devono dare la loro approvazione, ma anche agli sviluppatori che devono implementarlo.

La comunicazione di un progetto si presenta in molte forme: specifiche dettagliate, fornitura di risorse, revisione del progetto insieme. Ciò che ha senso fornire in ogni istanza dipende in gran parte dal fatto che il progetto sia un'applicazione nativa o web.

L'approccio tradizionale consiste nel fornire risorse accanto ai progetti dello schermo. I design dello schermo possono essere utilizzati per vedere come apparirà il design nel suo insieme, mentre le risorse sono PNG e SVG di icone pronti per l'uso, quindi gli sviluppatori non hanno a che fare con un editor grafico.

Nella nostra azienda ci proponiamo di offrire molto di più. Usiamo guide di stile dei componenti per aiutare a mantenere la coerenza nei nostri progetti. Quando abbiamo a che fare con un progetto web, forniamo set dettagliati di HTML e CSS, documentati pezzo per pezzo, pronti per l'implementazione. Credo che avere un occhio di riguardo in ogni fase dello sviluppo del software sia l'unico modo per raggiungere il mio obiettivo di creare software di livello mondiale.

Web vs app native

Quando progetti un'app nativa per una piattaforma (ad esempio iOS o Android), tendi ad aderire a determinate linee guida. Quando progetti per il Web, non ci sono molte indicazioni. Quello che succede in genere è che il tuo cliente ha una serie di linee guida grafiche per il loro marchio che determina come dovrebbero apparire le cose.

Tuttavia, queste linee guida tendono ad essere adattate ai siti web di marketing e ciò che contiene non sempre porta a buone decisioni sull'interfaccia utente. I caratteri tendono ad essere scelti per motivi di marketing, non per motivi di leggibilità. I colori possono essere audaci e sorprendenti, il che funziona in una campagna pubblicitaria, ma non in un'app che usi quotidianamente. Queste guide devono essere interpretate.

Esistono poche linee guida per l'interfaccia utente per il Web. Si potrebbe sostenere che il web sia un crogiolo di stili diversi. Se stai realizzando qualcosa che assomigli più a un'app che a un sito Web, devi conoscere framework ampiamente utilizzati come Bootstrap e ZURB Foundation. Il framework inizia a determinare come dovrebbero apparire le cose, perché non vuoi reinventare la ruota. E probabilmente è una buona cosa.

Nella nostra azienda, ci piace usare Bootstrap. Fornisce dimensioni predefinite ragionevoli per elementi dell'interfaccia utente comuni come pulsanti, tabelle di dati e modali.

Nel web design, sei più vincolato dalle capacità tecniche del web. In passato sarebbe stato difficile implementare semplici svolazzi visivi come angoli arrotondati su un sito web. Questi giorni sono finiti da tempo: ora sei libero di disegnare interfacce utente con molte ombre, transizioni, animazioni e persino 3D.

In qualità di designer, è molto più realistico assumere il controllo del processo e della progettazione nel browser. Non ho visto molti designer dell'interfaccia utente assumere la programmazione dell'interfaccia utente di un'app nativa, ma un designer che esegue HTML e CSS di un'app Web è un evento comune. Se puoi codificare i tuoi progetti, avrai un vantaggio rispetto ai tuoi colleghi non codificanti e per me è l'unico modo per capire veramente come funziona il Web.

Vincoli web

Presto scoprirai che non tutti i fantastici trucchi che impari sono supportati in tutti i browser e questa è la realtà della progettazione per il Web. È bene seguire principi ben noti come il miglioramento progressivo, in cui carichi contenuti avanzati ogni volta che è possibile, ma pensa anche a come il contenuto si degrada.

Recentemente, il "taglio della senape" è diventato popolare. Promosso dal team web della BBC, ciò implica la differenziazione tra browser "buoni" e "cattivi" e fornire un'esperienza limitata ai browser "cattivi". Tuttavia, funziona davvero solo per i siti di contenuto.

Quando si tratta di esperienze di tipo applicativo, molte persone limitano il supporto solo ad alcuni dei principali browser, per semplificare lo sviluppo. Purtroppo, questo ci riporta alla situazione del 1996 in cui è necessario un determinato browser per visualizzare i contenuti.

Migliorare le tue abilità

Quindi, come ti mantieni aggiornato con il settore web in rapida evoluzione e come migliorare le tue competenze? Diamo un'occhiata ad alcuni metodi diversi per migliorare le tue abilità ...

Conoscenza della piattaforma

Una parte importante dell'arsenale di un designer è la conoscenza della piattaforma. Dovresti conoscere i vari sistemi operativi e come le persone li utilizzano. Come designer, tendiamo a utilizzare i Mac, ma poi è facile dimenticare che la maggior parte delle persone là fuori utilizza le finestre di Windows per svolgere il proprio lavoro.

Sento che puoi capire veramente qualcosa solo se lo usi da solo. Preferisco usare il mio Mac per progettare, ma dedico molto tempo a recuperare il ritardo sull'evoluzione di varie altre piattaforme. Ho diverse copie di Windows installate sul mio Mac come macchine virtuali. Sono stato impegnato a testare nuove build di Windows 10 utilizzando il programma Insider di Microsoft per verificare le varie modifiche nell'interfaccia utente.

Inoltre compro regolarmente nuovo hardware per testarne il funzionamento. Ho acquistato un Apple Watch solo per testare la piattaforma. Poi l'ho venduto perché sentivo che non aggiungeva così tanto alla mia vita.

Inoltre, il Web può essere visto come il proprio sistema operativo. È in continua evoluzione e ogni settimana vengono aggiunte nuove funzionalità a ogni fornitore di browser. È estremamente utile conoscere gli aspetti tecnici dei browser, in particolare per quanto riguarda CSS e capacità grafiche. Devi sapere cosa sono SVG e WebGL e come puoi utilizzare l'API Web Animations.

Ogni piattaforma si evolve nel tempo e come progettista di interfacce utente è tuo compito rimanere aggiornato. Dopotutto, qualunque cosa tu stia progettando non vive in isolamento, ma fa parte di un ecosistema software più grande.

Torna alle basi

Ciò con cui stiamo lottando oggi non è così diverso da ciò con cui stavamo lottando 20 anni fa. Ci sono un sacco di buoni consigli nei libri. Prova Defensive Design for the Web di Jason Fried e Matthew Linderman e Don't Make Me Think di Steve Krug per cominciare.

Se non conosci concetti come modalità e convenienza, devi leggere. Dovresti essere in grado di spiegare qual è la legge di Fitts. La legge di prossimità della Gestalt? Questo è il pane quotidiano del design dell'interfaccia utente.

Lasciati ispirare da giochi e film

Come designer dell'interfaccia utente, attingo ad altre fonti di ispirazione per svolgere il mio lavoro. Trovo molta ispirazione nei giochi. Alcuni giochi sono molto complessi e i progettisti dell'interfaccia utente hanno dovuto risolvere gli stessi complessi problemi di interfaccia del designer dell'interfaccia utente che lavorava su progetti aziendali.

I giochi possono anche indicare tendenze. Il minimalismo che si trova nei menu di Colin McRae Rally mi ricorda la direzione di iOS7. In un certo senso, il design dell'animazione dell'interfaccia utente che ora è di tendenza appariva nei giochi anni e anni fa. Il passaggio dallo skeuomorfismo alle interfacce semplici e funzionali e al "design piatto" è stato evidente anche nei giochi. Confronta Oblivion del 2006 con Skyrim del 2011. Entrambi i giochi sono giochi di ruolo della stessa serie, ma la differenza è sorprendente.

Anche le interfacce futuristiche nei film Marvel come Iron Man sono state un'ispirazione per me. Non sono esattamente esempi utilizzabili, ma mi fanno pensare di più all'informatica nel suo insieme. Vogliamo un futuro di schermi o vogliamo che gli schermi scompaiano? Questa è probabilmente una buona domanda da porre in un pub pieno di designer.

Cresci come designer attraverso il duro lavoro, la tenacia, parlando con i tuoi coetanei e leggendo moltissimo. Circa un anno fa ho letto un articolo sul New York Times su persone ben oltre i 80 anni che continuano ad affinare il loro mestiere. Mi sento come se stessi solo iniziando. E tu?

La Nostra Scelta
Hai davvero bisogno di un Mac Pro?
Scoprire

Hai davvero bisogno di un Mac Pro?

Mentre il 2013 volgeva al termine, il no tro titolo gemello MacFormat ha ricevuto una con egna tanto atte a: quel minaccio o cilindro imile a Vader che ha u citato l'intere e del mondo a ottobre. ...
Bella confezione per un birrificio nuovo di zecca
Scoprire

Bella confezione per un birrificio nuovo di zecca

E i tono regole per un marchio di ucce o e di olito implicano la creazione di grafiche accattivanti che mo trano l'etica e i prodotti dell'azienda. Il de igner canade e imon Langloi ha fatto p...
Crea un'app per iPad con Sencha Touch
Scoprire

Crea un'app per iPad con Sencha Touch

Que to articolo è appar o originariamente nel numero 213 di .net magazine, la rivi ta più venduta al mondo per web de igner e viluppatori. encha Touch è una libreria multipiattaforma ri...