Una traduzione gratuita dell'articolo di Jakub Linowski è "Una buona interfaccia utente".
Una buona interfaccia utente ha alti tassi di conversione ed è facile da usare. In altre parole, è buono sia per gli affari che per le persone che lo usano. Di seguito troverai una serie di idee pratiche che puoi provare ad applicare.
Idea 1: prova a utilizzare un layout a colonna singola anziché a più colonne
Un layout a colonna singola consente di controllare meglio la narrazione. Sarà in grado di indirizzare i tuoi utenti nel modo più prevedibile, dall'alto verso il basso. L'approccio multi-colonna assume il rischio che l'utente possa essere distratto dallo scopo principale della pagina. Guida le persone con un invito all'azione obbligatorio alla fine.
Idea 2: prova a fare un regalo, non terminare immediatamente la vendita
Un gesto amichevole, come fare un regalo a un cliente, è esattamente ciò di cui hai bisogno. Se guardi più in profondità, i doni sono anche una tattica di persuasione efficace basata sul principio di reciprocità. Non importa quanto possa sembrare ovvio, ma piccoli segni di apprezzamento pagheranno profumatamente.
Idea 3: prova a combinare funzioni simili e non dividere l'interfaccia
Nel corso del lavoro, è possibile inavvertitamente creare diverse sezioni ed elementi che svolgono la stessa funzione. Questa è l'entropia comune quando un sistema diventa irregolare nel tempo. Non utilizzare nomi diversi per le stesse funzioni, in modo da non aumentare il carico di informazioni sui clienti. Più è frammentata l'interfaccia utente, più diventa ripida la curva di apprendimento e più è difficile per il cliente comprendere l'essenza di ciò che gli viene richiesto. Rifattorizzare l'interfaccia utente e combinare funzioni simili insieme.
Idea 4: prova a usare la prova sociale invece di parlare di te stesso
La prova sociale è un'altra tattica di persuasione che può aumentare la conversione.
I consigli su di te e sulla tua proposta possono indurre l'utente a prendere provvedimenti.Assicurati che tali consigli o opinioni siano presenti.
Idea 5: prova a ripetere l'invito all'azione principale, anziché mostrarlo una volta
La ripetizione dell'invito all'azione è più applicabile a pagine più lunghe oppure viene utilizzata la ripetizione su più pagine. Ovviamente, non vuoi che l'offerta appaia 10 volte su una pagina e infastidisca le persone. Le pagine lunghe sono diventate la norma e cercare di inserire tutto nella prima schermata non è più una buona idea. Va bene effettuare una chiamata nella parte superiore della pagina, ricordarti discretamente al centro e correggere alla fine. Quando le persone raggiungono la fine della pagina, si fermano a pensare a cosa fare dopo, quindi è il momento di fare un'offerta o completare l'affare.
Idea 6: prova a migliorare le differenze di stile tra elementi selezionabili e selezionabili, piuttosto che sfocarli
Strumenti espressivi, come colore, profondità e contrasto, possono essere utilizzati come indicatori affidabili che riflettono il linguaggio fondamentale per navigare nell'interfaccia: dove sono e dove posso andare. Per trasmettere chiaramente questa idea agli utenti, è necessario utilizzare un design visivo diverso per elementi per scopi diversi (collegamenti, pulsanti, elementi e contenuti selezionati), queste differenze devono essere chiaramente espresse e devono essere utilizzate allo stesso modo nell'interfaccia.
L'immagine mostra un esempio in cui è selezionato il colore blu per contrassegnare tutto ciò che può essere premuto e il nero per tutto ciò che è stato selezionato o indica dove siamo. Se usato correttamente, sarà molto più facile per le persone navigare tra questi suggerimenti. Non complicare la vita degli utenti - non rompere la codifica semantica.
Nei casi in cui vengono mostrati diversi suggerimenti, una raccomandazione del prodotto evidenziata può essere una buona idea, perché alcune persone hanno bisogno di una piccola spinta. Ci sono alcuni studi psicologici che suggeriscono che più ampia è la scelta, minore è la probabilità che la decisione venga generalmente presa e attuata. Per prevenire tale paralisi analitica, cerca di enfatizzare ed evidenziare alcune opzioni sullo sfondo di altre.
Idea 8: prova a annullare anziché a richieste di conferma
Immagina di aver appena fatto clic su un pulsante o collegamento valido. L'annullamento rispetta l'intento dell'utente originale, consentendo che l'azione avvenga immediatamente, con l'opzione di annullamento. Le richieste di autorizzazione per agire, al contrario, ispirano l'utente che non sa cosa stanno facendo, mettendo in discussione le loro intenzioni. Le azioni dell'uomo riflettono molto spesso le sue reali intenzioni e solo in rare situazioni sono casuali. L'inefficienza e la miseria dei prompt sono particolarmente evidenti quando gli utenti devono eseguire l'azione ripetutamente e i prompt appariranno più volte, ancora e ancora: questa è una brutta esperienza. Prova a dare ai tuoi utenti un maggiore controllo: annulla l'azione e non chiedere conferma dove possibile.
Idea 9: Spiegare a chi è destinato il prodotto. Non tentare di indirizzare il messaggio a tutti
Identifichi chiaramente il tuo pubblico o fai appello a tutti contemporaneamente? L'idea di aumentare la conversione è di spiegare chiaramente a chi è specifico il tuo prodotto o servizio. Quando raggiungi il tuo pubblico, evidenzia i segni specifici dei tuoi clienti. Ciò porterà la comunicazione con loro a un nuovo livello e darà una certa sfumatura di esclusività ed elitismo. Un possibile rischio di tale strategia è che quando si dichiarano restrizioni, è possibile tagliare parte del pubblico potenziale. In questo caso, la trasparenza della proposta aiuterà: l'onestà ispira fiducia.
Idea 10: parlare dritto invece di ipotesi
Puoi parlare alle persone con una voce tremante instabile o puoi dire la stessa cosa con fiducia. Se finisci ogni frase con punti interrogativi, usa parole come "forse", "sarebbe fantastico", "sei interessato?" o "non vuoi provare?", hai tutte le possibilità di aggiungere convinzione al tuo messaggio. Chissà, forse a volte vale la pena dire alle persone il prossimo passo sulla strada per ottimizzare la conversione?
Idea 11: più contrasto invece di uniformità
Più chiaramente e chiaramente gli inviti all'azione si distinguono tra gli altri elementi della pagina, migliore sarà il funzionamento dell'interfaccia, più forte sarà. Il contrasto delle principali azioni target può essere migliorato in vari modi. Usando la saturazione, puoi rendere alcuni elementi più scuri rispetto a quelli chiari, usando la profondità fai apparire gli oggetti più vicini ad altri contenuti che sembrano più distanti (usa ombre e sfumature). Infine, puoi scegliere colori complementari dalla ruota dei colori (ad esempio, giallo e viola) per un miglioramento ancora maggiore. Tuttavia, non lasciarti trascinare troppo: il contrasto tra il contenuto e l'azione principale dovrebbe essere bilanciato.
Idea 12: mostra il luogo di origine del prodotto anziché le generalizzazioni
Le informazioni su di te, sul tuo prodotto o servizio ti consentono di raggiungere un livello più personale nella comunicazione con il cliente. Un buon modo per raccontare di te è menzionare il paese, gli stati o la città di origine. Se puoi praticamente applicare questo consiglio, allora l'atteggiamento nei tuoi confronti diventerà più amichevole. Spesso, menzionare dove è stato realizzato il prodotto è un buon modo per creare una sensazione di migliore qualità del prodotto.
Idea 13: ridurre il numero di campi, non chiedere troppo
Alle persone per natura non piacciono le attività che richiedono tempo e questo si applica completamente alla compilazione dei campi del modulo. Ogni campo che richiede una risposta da parte dell'utente può indurlo a lasciare la pagina. Inoltre, non tutti i dispositivi consentono di digitare rapidamente il testo, è particolarmente difficile farlo sui dispositivi mobili. Prova a lasciare solo i campi richiesti e rimuovi il maggior numero di campi possibile. Se ci sono davvero molti campi necessari, sarà meglio compilarli dopo aver inviato il modulo principale su una pagina separata o utilizzando un modulo aggiuntivo. Espandere il modulo è semplice, ma un numero inferiore di campi consente di aumentare la conversione.
Idea 14: espandi tutte le opzioni contemporaneamente
Ogni menu a discesa che usi nasconde una serie di azioni che richiedono uno sforzo supplementare per trovare. Se queste opzioni nascoste sono fondamentali per l'utente di intraprendere le azioni necessarie, allora forse vale la pena aumentare la priorità sulla pagina. Prova a creare un menu a discesa per quelle opzioni che sono ovvie e che non richiedono nuove conoscenze da parte dell'utente: nella scelta di data e ora (ad esempio, calendari) o posizione geografica. A volte le voci di menu a discesa possono funzionare in quelle interfacce, le azioni che l'utente deve eseguire di volta in volta. Fai attenzione quando usi gli elenchi a discesa per gli elementi nel percorso narrativo principale.
Idea 15: suggerire coerenza anziché doppie pagine inferiori
Le doppie pagine in basso sono killer di conversione. Sì, tutti sono già abituati a scorrere le pagine lunghe, ma è importante non creare una falsa impressione tra i visitatori che la pagina sia terminata prima che accada effettivamente. Se la pagina prevede lo scorrimento, imposta un ritmo visivo o semantico che indicherà chiaramente all'utente che c'è una continuazione successiva. Fai attenzione con ampi spazi nei punti di "piega" in cui potrebbe apparire il bordo dello schermo (ovviamente intendo zone condizionali, poiché è difficile fornire tutte le opzioni per una varietà di dispositivi).
Idea 16: Mantieni la concentrazione, non abusare dei link
Non c'è nulla di difficile nel posizionare più collegamenti in diversi punti della pagina nella speranza di soddisfare il maggior numero possibile di potenziali clienti. Tuttavia, quando crei una pagina narrativa il cui scopo è portare l'utente a una specifica azione target, pensaci due volte. Non dimenticare che qualsiasi link prima dell'azione target principale aumenta il rischio che l'utente lasci la pagina e distrae da ciò che ti aspetti da lui. Tieni traccia del numero di link e, se possibile, trova un equilibrio tra le pagine di diffusione (con un numero leggermente maggiore di link) con le pagine "tunnel" con meno link e più conversioni. Eliminare i collegamenti non necessari aumenterà sicuramente le possibilità di accedere al pulsante importante.
Le forze investite nello sviluppo di un modello di comportamento per un prodotto software saranno sprecate se non si riesce a trasmettere correttamente i principi di questo comportamento agli utenti. Nel caso di prodotti mobili, ciò viene fatto con mezzi visivi - visualizzando oggetti sul display (in alcuni casi è consigliabile usare sensazioni tattili da premere).
L'obiettivo dell'artista è quello di creare un oggetto il cui look evoca una risposta estetica.
I designer creano oggetti che altre persone useranno. Se parliamo di progettisti di interfacce visive, stanno cercando l'idea migliore, trasmettendo informazioni sul comportamento del programma nella progettazione a cui partecipano. Seguendo un approccio orientato agli obiettivi, dovrebbero sforzarsi di presentare comportamenti e informazioni in un modo comprensibile e utile a supporto degli obiettivi di marketing dell'organizzazione e degli obiettivi emotivi del personaggio. Naturalmente, la progettazione visiva delle interfacce utente non esclude considerazioni estetiche, ma tali considerazioni non dovrebbero andare oltre il quadro funzionale.
I grafici sono generalmente molto esperti negli aspetti visivi e hanno una comprensione peggiore dei concetti alla base del comportamento di un prodotto software e della sua interazione con esso. Sono in grado di creare un aspetto bello e adeguato delle interfacce e, inoltre, di introdurre un'identità aziendale nell'aspetto e nel comportamento di un prodotto software. Per tali specialisti, la progettazione o la progettazione dell'interfaccia è, innanzitutto, tono, stile, composizione, che sono attributi del marchio, in secondo luogo, trasparenza e chiarezza delle informazioni, e solo allora - la trasmissione di informazioni sul comportamento attraverso lo scopo previsto.
I progettisti della parte visiva dell'interfaccia necessitano di alcune abilità inerenti ai grafici, ma devono anche avere una profonda comprensione e una corretta percezione del ruolo del comportamento. I loro sforzi sono in gran parte focalizzati sugli aspetti organizzativi del design. Il focus della loro attenzione è sulla corrispondenza tra la struttura visiva dell'interfaccia da un lato e la struttura logica del modello mentale dell'utente e il comportamento del programma dall'altro. Inoltre, si preoccupano di come informare l'utente sullo stato del programma e su cosa fare con gli aspetti cognitivi della percezione delle funzioni da parte dell'utente.
I progettisti di informazioni stanno lavorando alla visualizzazione di dati, contenuti e strumenti di navigazione. Gli sforzi del progettista delle informazioni mirano a presentare i dati in una forma favorevole alla loro corretta interpretazione. Il risultato è ottenuto attraverso la gestione della gerarchia visiva utilizzando strumenti come colore, forma, posizione e scala. Gli oggetti comuni di progettazione delle informazioni sono tutti i tipi di grafici, diagrammi e altri modi di visualizzare informazioni quantitative.
Al fine di creare interfacce utente attraenti e convenienti, un progettista di interfacce deve possedere abilità visive di base - comprensione del colore, tipografia, forma e composizione - e sapere come possono essere efficacemente utilizzate per comunicare comportamenti e presentare informazioni, creare umore e stimolare reazioni fisiologiche. Il progettista di interfacce ha anche bisogno di una profonda comprensione dei principi di interazione e dei modi di dire dell'interfaccia che determinano il comportamento del prodotto.
Che ci crediate o no, i modelli e i prototipi statici passano di moda, diventando vecchio stile e il confine tra designer e sviluppatore viene cancellato. Man mano che lavoriamo sempre più in collaborazione con altri designer o sviluppatori, anche gli strumenti che utilizziamo stanno cambiando.
L'era degli schermi ad alta risoluzione si avvicina e i progettisti dovrebbero cercare tecniche e strumenti sempre nuovi che li aiutino a creare layout di progettazione più reattivi e flessibili per dispositivi diversi.
Strumenti di wireframing
Gli strumenti Wireframe rendono molto più semplice il processo di creazione di un sito Web o di un'applicazione visualizzando il prodotto e prestando attenzione a tutti i partecipanti direttamente alla funzionalità e all'interattività del layout.
I clienti devono capire come dovrebbe funzionare la tua futura applicazione o sito. Ma una semplice spiegazione "sulle dita" o alcune e-mail lasceranno la maggior parte delle funzioni in balia della loro immaginazione. Gli strumenti Wireframe sono più spesso utilizzati per semplificare la comunicazione tra il cliente e l'appaltatore.
Esistono molti strumenti Wireframe diversi che offrono funzionalità diverse: alcuni programmi possono essere utilizzati solo per semplici wireframe, mentre altri possono essere utilizzati per creare prototipi di prototipi più complessi e dettagliati.
Mockup di balsamiq
Semplice ma ottimo onlinestrumento wireframe, che include una libreria di elementi drag-and-drop, elenchi e pulsanti, disegno a mano libera stilizzato. La caratteristica principale di questo programma è di avvicinare i modelli al grado di "aspetto volutamente maleducato e bassa precisione" al fine di ottenere il maggior feedback possibile. "Destinato alla collaborazione": queste parole che descrivono il prodotto sul sito Web ufficiale indicano che tutti i membri del team e i clienti possono partecipare al processo del prototipo.
piattaforma:Win, Mac, Linux e la versione web
prezzo: $ 89 ($ 12 \\ mese per una prova completamente funzionale)
abbozzo
Schizzo: uno strumento wireframe flessibile e funzionale con un'interfaccia elegante che ti costringerà a progettare cose favolose, perché creare un design dovrebbe essere divertente, non un lavoro ingrato. Questo prodotto è facile da usare, ha ricevuto un'interfaccia grafica intuitiva e molte integrazioni esterne.
piattaforma: Mac
prezzo:$ 99 (prova gratuita disponibile)
Adobe Illustrator
Adobe Illustrator è un potente strumento per lavorare con la grafica vettoriale (ciò significa che puoi creare opere d'arte di qualsiasi dimensione, ridimensionandole se necessario, senza perdere la qualità dell'immagine). Questo è un eccellente programma per prototipare vari livelli di dettaglio, creare illustrazioni vettoriali complesse e lavorare con la tipografia, oltre a creare eccellenti UX. Uno strumento delizioso per la creazione di mockup dell'interfaccia utente.
piattaforma:Win e Mac
prezzo:$ 9- $ 49 al mese
Adobe InDesign
Questo toolkit di progettazione include la capacità di lavorare con vari tipi di contenuti e file, sebbene originariamente fosse destinato al layout di documenti stampati a più pagine. Creare un sito prototipo o un'applicazione sotto forma di un documento PDF interattivo non è mai stato così facile! Questo prodotto offre l'opportunità di creare librerie di componenti di pagina, in modo da poter creare numerose raccolte di vari elementi dell'interfaccia utente che è possibile riutilizzare.
piattaforma: Win e Mac
prezzo: $ 9- $ 49 al mese
OmniGraffle
OmniGraffle - un prodotto per OS X e iOS, che si sposta agevolmente per semplificare il lavoro, passando all'iPad. Questo è uno strumento efficace per la creazione di layout di schermate che consente di combinare istantaneamente i wireframe di siti Web, grafica di processo, diagrammi o contorni di pagine. Si seleziona il tipo di progetto e OmniGraffle costruisce le relazioni e le dipendenze tra i vari elementi, collegando automaticamente le linee sotto forma di grafici e allinea forme ed elementi in layout o pagine.
piattaforma:Mac e iOS
prezzo:$50
UXPin
UXPin è un'eccellente piattaforma online per la progettazione di interazioni e interfacce utente, prototipi di applicazioni desktop, Web e mobili che dovrebbero essere veloci e facili da usare. I prototipi possono essere creati da preimpostazioni e librerie integrate, file Photoshop, file Sketch importati o utilizzando l'ampia libreria UXPin di interfacce utente.
Piattaforma: versione web
Prezzo: $ 15- $ 40 al mese
Strumenti di prototipazione
I prototipi aiutano l'interazione del team di sviluppo, oltre a semplificare la dimostrazione al cliente del suo futuro prodotto. I tuoi clienti possono avere un layout preliminare della futura interfaccia, utilizzando gli strumenti per la creazione di prototipi, puoi ottenere rapidamente feedback dal cliente, suggerimenti per modificare o migliorare vari problemi di UX / UI, senza coinvolgere costosi sviluppatori, organizzare una dimostrazione o test del prodotto futuro.
Qualche parola sulla scelta degli strumenti per la creazione di prototipi interattivi: oggi una vasta selezione di programmi per la prototipazione dell'interfaccia utente può essere fonte di confusione. Certo, l'uso costante di alcunie gli stessi strumenti sono pratici dal punto di vista dei bassi costi di gestione delle stesse tecniche, ma la presenza di strumenti più recenti e più avanzati dovrebbe stimolare i progettisti a sviluppare e ottimizzare i processi di progettazione. Alcune applicazioni consentono di creare prototipi con un basso livello di interazione interattiva, come schermate o pagine collegate, animano le transizioni tra loro, altri consentono di creare prototipi più complessi con il supporto di gesti e animazioni mobili nativi. Le soluzioni più avanzate dispongono sia di un editor visivo che di un editor di codice che consente di programmare prototipi.
Pixate
Pixate è uno strumento online per la creazione di prototipi interattivi, ideale per lavorare con applicazioni mobili. I prototipi vengono creati utilizzando layout grafici importati nel programma, perché non ci sono librerie di elementi già pronte in esso e devi lavorare con file grafici creati in programmi di terze parti. Non ci sono librerie di elementi già pronti, devi lavorare con file grafici creati in programmi di terze parti. Una caratteristica utile di Pixate è la possibilità di testare il prototipo in tempo reale su uno smartphone o un tablet
piattaforma: web
prezzo: $ 0- $ 50 per utente al mese
Axure
Oltre a creare prototipi dinamici, Axure fornirà la possibilità di creare un wireframe interattivo e aumentare la complessità e i dettagli del layout. Questo generatore include sitemap, widget, supporto matematico e strumenti per la creazione automatica di documentazione e la creazione di layout HTML per applicazioni e siti Web. Inoltre, puoi guardare il prototipo della tua applicazione direttamente sul tuo smartphone usando la funzione di condivisione integrata.
piattaforma: Win e Mac
prezzo: $289-$589
origami
Origami è uno strumento gratuito che ti consente di creare prototipi interattivi. Che può essere eseguito su un iPhone o iPad, interagire con essi ed esportare il codice adatto agli sviluppatori da utilizzare. Consente inoltre di creare collegamenti tra i livelli nel prototipo e l'editor grafico (Sketch o Photoshop), dopo di che eventuali modifiche a livello di layout grafici vengono aggiornate nel prototipo stesso.
piattaforma: Mac
prezzo: gratuitamente
modulo
Modulo è ideale per la creazione di prototipi interattivi nativi di applicazioni mobili che simulano accuratamente l'animazione e l'interazione per le applicazioni iOS. I layout vengono creati utilizzando le librerie dei componenti, suddivisi in diverse categorie e gli aggiornamenti possono essere monitorati tramite uno smartphone. La funzione di trascinamento della selezione è supportata.
piattaforma:Mac
prezzo: gratuitamente
InVision
Invision è una piattaforma che combina molte funzioni utili per il lavoro moderno sul Web o sull'interfaccia mobile. Il sistema funziona con file grafici esterni che possono essere caricati nel sistema o collegati con un prototipo per l'aggiornamento automatico di elementi grafici senza scaricare costantemente nuove versioni (ovvero aggiornamenti istantanei della versione mobile direttamente sul dispositivo). La piattaforma ha un proprio sistema di controllo della versione, funzionalità utili per il lavoro di squadra e commenti sul prototipo e molto altro.
piattaforma: il web
prezzo:$ 15- $ 99 (1 prototipo gratis)
meraviglia
Marvel è un ottimo strumento di prototipazione basato sul web che si distingue per il suo potenziale che semplifica il processo di prototipazione. Lo strumento consente di lavorare con il design dell'interfaccia più semplice, la creazione di prototipi interattivi e consente anche di commentare i layout in tempo reale per tutti i partecipanti al progetto. La piattaforma funziona con un gran numero di tipi di file supportati e ti consente anche di importare file Sketch e Photoshop. Sono disponibili 17 preset predefiniti per dispositivi mobili, motivo per cui puoi essere sicuro che i tuoi prototipi saranno ottimizzati per il dispositivo selezionato. La caratteristica più notevole di questo software è l'applicazione mobile associata. Se vuoi lavorare con schizzi su carta, l'applicazione mobile ti consente di trasferire rapidamente i tuoi schizzi e lavorare con essi già all'interno della piattaforma.
Marvel è facile da usare e da imparare, nel pubblico dominio puoi trovare un gran numero di FAQ e tutorial, oltre a video tutorial. Inoltre, il programma ha una vasta comunità di designer che condividono regolarmente i loro progetti e aiutano a supportare gli altri.
Flinto per mac
Flinto è ideale per la prototipazione di animazioni o la combinazione dell'interazione di applicazioni mobili e Web. I prototipi possono essere creati da preset predefiniti, che vengono importati nel programma per iniziare. Se si utilizza Sketch, nel programma è disponibile un plug-in che consente di importare file di lavoro con un solo clic del mouse.
piattaforma: Mac
prezzo: $99
Interfaccia strumenti di progettazione visiva
Quando il prototipo è pronto, il passaggio successivo è creare un design di interfaccia visiva per il prodotto futuro. Ogni designer ha i suoi strumenti preferiti che sembrano impossibili da sostituire. Alcuni sono già noti (li troverai rapidamente nell'arsenale di qualsiasi designer), mentre altri non sono così popolari. Quindi, presta la tua attenzione ai 5 principali strumenti per la creazione di visual design, che crediamo saranno in grado di entrare nel tuo arsenale.
Adobe Photoshop
Sebbene questo programma non abbia bisogno di una descrizione, vale alcune parole. Sebbene Photoshop in precedenza non includesse librerie di componenti di interfaccia, già nella versione CC è stato possibile lavorare con librerie di elementi, tavole da disegno e molto altro ancora. Anche se non hai utilizzato i prodotti Adobe, elaborare idee comuni raggruppando diversi livelli e componenti non sarà un processo lungo. Puoi creare non solo UI e UX, ma anche storyboard e tutti gli schizzi che puoi realizzare.
piattaforma:Win e Mac
prezzo: $ 9- $ 49 al mese
Adobe InDesign
Questo strumento di progettazione include la capacità di lavorare con vari tipi di contenuti e file, sebbene originariamente fosse destinato al layout di documenti stampati multipagina. Molte persone lo usano solo per creare un prototipo, altri anche per progettare l'interfaccia stessa Creare un sito prototipo o un'applicazione sotto forma di un documento PDF interattivo non è mai stato così facile! Questo prodotto offre l'opportunità di creare librerie di componenti di pagina, in modo da poter creare numerose raccolte di vari elementi dell'interfaccia utente che è possibile riutilizzare.
piattaforma: Win e Mac
prezzo: $ 9- $ 49 al mese
Adobe Illustrator
Adobe Illustrator è un potente strumento per lavorare con la grafica vettoriale (ciò significa che puoi creare opere d'arte di qualsiasi dimensione, ridimensionandole se necessario, senza perdere la qualità dell'immagine). Questo è un eccellente programma per prototipare vari livelli di dettaglio, creare illustrazioni vettoriali complesse e lavorare con la tipografia, nonché per creare un eccellente design dell'interfaccia visiva per vari tipi di prodotti.
piattaforma: Win e Mac
prezzo: $ 9- $ 49 al mese
Fuochi d'artificio Adobe
Adobe Fireworks consente di progettare layout per applicazioni mobili e Web. Il programma supporta gli stili CSS, vari tipi di carattere e chip del tipo "angolo del raggio" possono essere esportati come stile separato. C'è anche una serie di preset predefiniti.
Sfortunatamente, il progetto non è più supportato e sarà presto sostituito da Adobe Experience Design.
Adobe XD è stato concepito come una soluzione (integrata) completa per la progettazione di interfacce e il lavoro su questo programma è stato condotto in collaborazione con una comunità di designer professionisti. Gli sviluppatori hanno pensato di ottimizzare e migliorare l'interazione dell'utente con il prodotto, espandendo le applicazioni e i siti della GUI. Il programma è attualmente disponibile gratuitamente sul sito Web ufficiale di Adobe (solo Mac OS X).
Piattaforma: Win e Mac
prezzo: no \\ temporaneamente gratuito
abbozzo
Schizzo: uno strumento flessibile e funzionale con un'interfaccia comoda e intuitiva che ti costringerà a creare cose fantastiche, perché creare un design dovrebbe essere divertente, non un lavoro ingrato. Questo prodotto è facile da usare, molti progettisti lo usano per risolvere due problemi contemporaneamente: uno strumento di prototipazione di basso livello, la creazione di wireframe e la progettazione dell'interfaccia visiva finale.
piattaforma:Mac
prezzo: $ 99 (prova gratuita disponibile).
In conclusione
Ora la scelta è tua - prendi solo decisioni informate! Quali strumenti sono più adatti a te personalmente?
Artisti e designer visivi lavorano con gli stessi supporti visivi. Sia quelli che gli altri dovrebbero essere qualificati ed esperti in tutto ciò che riguarda questi mezzi, ma la loro attività ha vari scopi. L'obiettivo dell'artista è quello di creare un oggetto il cui look evoca una risposta estetica. Pertanto, l'arte è un modo di auto-espressione di un artista su un argomento che in lui (e talvolta nella società nel suo insieme) provoca interesse emotivo o intellettuale. L'artista non è vincolato da quasi nessuna restrizione. Più insolito e peculiare è il prodotto dei suoi sforzi, più è apprezzato.
I designer, al contrario, creano oggetti per altre persone.Mentre gli artisti contemporanei sono per lo più preoccupati auto-espressione,i designer, come sottolinea Kevin Mallet e Darrell Sano nel loro magnifico libro Designing Visual Interfaces (Mullet and Sano, 1995), “sono impegnati a cercare il più appropriato presentazione delper trasmettere alcune informazioni specifiche ", cioè comunicazione.Se parliamo di progettisti di interfacce visive, allora stanno cercando la vista migliore, trasmettendo informazioni su comportamentoprogrammi nella progettazione di cui partecipano. Seguendo un approccio orientato agli obiettivi, dovrebbero sforzarsi di presentare comportamenti e informazioni in un modo comprensibile e utile a supporto degli obiettivi di marketing dell'organizzazione e degli obiettivi emotivi del personaggio.
Francamente, la progettazione visiva delle interfacce utente non esclude considerazioni estetiche, ma tali considerazioni non dovrebbero andare oltre il quadro funzionale. E sebbene la soggettività sia sempre presente nelle comunicazioni visive, ci sforziamo di ridurre al minimo l'impatto il gusto.Siamo giunti alla conclusione che una chiara espressione degli obiettivi emotivi dell'utente e degli obiettivi aziendali è preziosa, anche quando si tratta di progettare quegli aspetti dell'interfaccia visiva che funzionano a beneficio del marchio, sono responsabili dell'esperienza dell'utente e forniscono risposte fisiologiche. Abbiamo scritto in modo più dettagliato sul livello fisiologico dell'elaborazione cognitiva nel capitolo 5.
Arti visive, progettazione dell'interfaccia visiva e altre discipline 335
Grafica e interfacce utente
La progettazione grafica è una disciplina su cui la poligrafia ha prevalso per molti anni (fino alla seconda metà degli anni '80 circa del secolo scorso), dal momento che il design si riduceva principalmente alla creazione di imballaggi, pubblicità, formattazione di documenti e organizzazione dell'ambiente di vita. I grafici della vecchia scuola sono a disagio con i media digitali perché non sono abituati a creare grafica a livello di pixel. La giovane generazione di grafici è addestrata a gestire il "nuovo" formato e applica con successo i concetti di progettazione grafica tradizionale alla grafica digitale.
I grafici sono generalmente molto esperti negli aspetti visivi e hanno una comprensione peggiore dei concetti alla base del comportamento di un prodotto software e della sua interazione con esso. I talentuosi grafici, esperti in termini digitali, riescono a creare interfacce impressionanti, esteticamente gradevoli e ricche di informazioni che vediamo in Windows XP e Mac OS X, nonché interfacce visivamente ricche per giochi per computer e applicazioni orientate al consumatore. Sono in grado di creare belle e adeguate aspettointerfacce e inoltre - per introdurre l'identità aziendale nell'aspetto e nel comportamento del prodotto software. Per tali specialisti, la progettazione o la progettazione dell'interfaccia sono, innanzitutto, tono, stile, composizione, che sono attributi del marchio, in secondo luogo, trasparenza e chiarezza delle informazioni, e solo allora (se si arriva davvero a quello) è il trasferimento di informazioni sul comportamento attraverso lo scopo previsto ( vedi capitolo 13).
I progettisti della parte visiva dell'interfaccia necessitano di alcune abilità intrinseche ai grafici che lavorano in formato digitale, ma devono anche avere una profonda comprensione e una corretta percezione del ruolo del comportamento. I loro sforzi si concentrano in gran parte sugli aspetti organizzativi del design e su come comunicare all'utente le caratteristiche del comportamento del prodotto utilizzando ancore visive e destinazioni previste. Il focus della loro attenzione è sulla corrispondenza tra la struttura visiva dell'interfaccia da un lato e la struttura logica del modello mentale dell'utente e il comportamento del programma dall'altro. Inoltre, si occupano della domanda su come informare l'utente sugli stati del programma (ad esempio, come rendere lo stato "disponibile per il cambiamento" distinguibile dallo stato "sola lettura") e cosa fare con gli aspetti cognitivi della percezione dell'utente delle funzioni (composizione degli elementi, gerarchia visiva , il rapporto tra la figura e lo sfondo, ecc.).
336 Capitolo 14. Progettazione di interfacce visive
Progettazione di informazioni visive
Progettisti dell'informazionenon stanno lavorando su funzionalità interattive, ma sulla visualizzazione di dati, contenuti e strumenti di navigazione. Nella progettazione visiva delle interfacce, sono estremamente importanti, specialmente quando si tratta di applicazioni ad alta intensità di dati e di alcuni siti Web in cui il contenuto supera la funzionalità. Gli sforzi del progettista delle informazioni mirano a presentare i dati in una forma favorevole alla loro corretta interpretazione. Il risultato qui è ottenuto gestendo la gerarchia visiva usando strumenti come colore, forma, posizione e scala.
Gli oggetti comuni di progettazione delle informazioni sono tutti i tipi di grafici, diagrammi e altri modi di visualizzare informazioni quantitative. Edward Tufty ha scritto diversi libri innovativi che approfondiscono questo argomento, tra cui The Visual Display of Quantitative Information (Tufte, 1983).
Design industriale
Qualsiasi discussione su questioni di design industriale va oltre lo scopo di questo libro, tuttavia, l'uso diffuso di dispositivi interattivi e dispositivi portatili ha portato al fatto che il ruolo del design industriale nella creazione di prodotti interattivi sta crescendo proprio davanti ai nostri occhi. Come nel caso della differenza nelle competenze professionali di grafici, progettisti di interfacce e progettisti di informazioni, esiste una divisione di designer industriali in due categorie: alcuni sono specializzati nella creazione di forme belle e utili, mentre altri talenti riguardano il campo della rappresentazione logica ed ergonomica degli elementi fisici controllo di un metodo che corrisponde al comportamento dell'utente e riflette il comportamento del dispositivo. Man mano che un numero crescente di dispositivi acquisisce display con funzionalità complete, l'importanza della collaborazione tra progettisti di interazioni, progettisti di interfacce e progettisti industriali nella creazione di soluzioni complete ed efficaci sta crescendo.
Elementi costitutivi del design dell'interfaccia visiva
In sostanza, la progettazione delle interfacce si riduce alla questione di come progettare e disporre gli elementi visivi in \u200b\u200bmodo tale da riflettere chiaramente il comportamento e presentare le informazioni. Ogni elemento della composizione visiva ha un numero di proprietà, come forma e colore, e una combinazione di queste proprietà dà significato all'elemento. Ogni singola proprietà in sé raramente ha un significato naturale. Piuttosto, possiamo dire che l'utente ha l'opportunità di capire
Building Blocks for Visual Interface Design 337
nell'interfaccia a causa di vari modi di applicare queste proprietà a ciascuno degli elementi dell'interfaccia. Nei casi in cui due oggetti condividano proprietà comuni, l'utente supporrà che questi oggetti siano correlati o simili. Quando gli utenti vedono che le proprietà sono diverse, assumono che gli oggetti non siano connessi. Gli oggetti più contrastanti attirano maggiormente la nostra attenzione. Molto prima che il bambino inizi a capire la parola e parlare, mostra la capacità di distinguere oggetti che contrastano visivamente. Il programma per bambini Sesame Street si basa su questa capacità umana, invitando i bambini a scegliere un oggetto che non è come gli altri o che non fa parte di un gruppo. La progettazione visiva delle interfacce ha un senso in un modo simile, che in pratica dà un risultato molto migliore delle semplici parole.
Quando si crea l'interfaccia utente, analizzare le seguenti proprietà visive di ciascun elemento o gruppo di elementi. Per creare un'interfaccia utente utile e accattivante, è necessario lavorare attentamente con ciascuna di queste proprietà.
Che forma ha l'oggetto? È rotondo, quadrato o come un'ameba? La forma è il segno principale dell'essenza di un oggetto per una persona. Riconosciamo gli oggetti dai contorni; la sagoma di un ananas strutturato con pelliccia blu ci consente ancora di capire che si tratta di un ananas. Inoltre, la distinzione delle forme richiede una maggiore concentrazione di attenzione rispetto all'analisi del colore o delle dimensioni. Pertanto, il modulo non è la proprietà migliore per la creazione di contrasto, se si desidera attirare l'attenzione dell'utente. La debolezza del modulo come fattore nel riconoscimento degli oggetti diventa evidente se guardi al Dock 1 del sistema operativo Mac OS X: qui puoi erroneamente chiamare iTunes invece di iDVD o iWeb invece di iPhoto. I pittogrammi hanno una forma diversa, ma hanno dimensioni, colori e trame simili.
Quanto è grande o piccolo l'oggetto rispetto ad altri oggetti sullo schermo? Gli elementi più grandi attirano più attenzione, soprattutto se sono significativamente più grandi degli elementi circostanti. La dimensione è variabile ordinatoe quantificabile,cioè, le persone ordinano automaticamente gli oggetti per dimensione e tendono a valutarli in base alla dimensione; se abbiamo testo in quattro dimensioni, si presume che il relativo
Uno speciale elemento di interfaccia del sistema operativo Mac OS X, che consente di eseguire programmi e passare da uno all'altro. - Nota. scientifica. Ed.
333 Capitolo 14. Progettazione dell'interfaccia visiva
l'importanza del testo aumenta insieme alle dimensioni e il grassetto è più importante del testo normale.
Pertanto, la dimensione è una proprietà utile per designare le gerarchie di informazioni. Una differenza di dimensioni sufficiente di solito attira rapidamente l'attenzione di una persona. Jacques Bertin, nel suo classico The Semiology of Graphics (Bertin, 1983), descrive le dimensioni come dissociativaproprietà. Ciò significa che se l'oggetto è molto piccolo o molto grande, diventa difficile interpretare altre variabili, come la forma.
luminosità
Quanto è scuro o chiaro il soggetto? Naturalmente, i concetti di buio e luce hanno senso soprattutto nel contesto della luminosità dello sfondo. Su uno sfondo scuro, il testo scuro è quasi invisibile, mentre su uno chiaro risplenderà nettamente. Come per le dimensioni, il valore di luminosità può essere dissociativo; diciamo che se una foto è troppo scura o troppo chiara, diventa impossibile capire cosa c'è sopra. Le persone percepiscono il contrasto rapidamente e facilmente, quindi il valore della luminosità può essere un buon strumento per attirare l'attenzione su quegli elementi che devono essere enfatizzati. Anche il valore di luminosità è ordinatouna variabile, ad esempio, i colori più scuri (con una luminosità inferiore) sulla mappa sono facilmente interpretabili: indicano una maggiore profondità o una maggiore densità di popolazione.
colore
Giallo, rosso o arancione? Le differenze di colore attirano rapidamente l'attenzione. In alcune aree professionali, i colori hanno significati specifici e questo può essere usato. Quindi, per il ragioniere, il rosso indica risultati negativi e il nero indica risultati positivi; per un operatore finanziario, il blu è un segnale di acquisto e il rosso è un segnale di vendita (almeno negli Stati Uniti lo è). I colori hanno anche senso attraverso i contesti sociali in cui cresciamo. Per una persona occidentale che è cresciuta tra i semafori, il rosso significa "stop", e talvolta anche "pericolo", mentre in Cina il rosso è il colore della buona fortuna. Il bianco in Occidente è associato alla purezza e alla pace, e in Asia alla sepoltura e alla morte. In questo caso, a differenza delle dimensioni o della luminosità, il colore inizialmente non ha la proprietà di ordine e non è espresso quantitativamente, quindi è tutt'altro che ideale per trasmettere questo tipo di informazioni. Inoltre, non dovresti rendere il colore l'unico modo per trasmettere informazioni, dal momento che il daltonismo è abbastanza comune.
Usa il colore con saggezza. Creare un sistema visivo efficace che consenta all'utente di identificare somiglianze e differenze
oggetti, usano un set limitato di colori - l'effetto arcobaleno sovraccarica la percezione dell'utente e limita la capacità di trasmettergli informazioni. Inoltre, nelle questioni relative al colore, possono sorgere conflitti tra le esigenze del marketing e il compito di riflettere le idee dell'interfaccia. Per trovare un compromesso in una situazione del genere, potresti aver bisogno di un talentuoso visual designer (e un diplomatico part-time).
direzione
Dove indica l'oggetto: su, giù o lateralmente? La direzione è utile quando si desidera trasmettere informazioni sull'orientamento (su o giù, avanti o indietro). Ricorda che la percezione della direzione può essere difficile nel caso di alcune forme e con oggetti di piccole dimensioni, quindi è meglio usarla come caratteristica secondaria. Quindi, se vuoi mostrare che il mercato azionario è calato, puoi usare la freccia rossa in basso.
consistenza
Ruvido o liscio, monotono o irregolare? Naturalmente, gli elementi visualizzati sullo schermo non hanno una trama reale, ma sono in grado di crearne l'aspetto. La trama è raramente utile per trasmettere differenze o attirare l'attenzione, poiché richiede una concentrazione significativa sui dettagli. Inoltre, è necessario un significativo esborso di pixel per il trasferimento di texture. Tuttavia, la trama può essere un indizio importante: quando vediamo un'area strutturata dalla gomma, assumiamo che dovremmo prendere il dispositivo da questa area. I serif e i rigonfiamenti sugli elementi dell'interfaccia utente di solito indicano che l'elemento può essere trascinato e gli smussi o le ombre del pulsante aumentano la sensazione che possa essere premuto.
posizione
Come viene posizionato un elemento rispetto ad altri elementi? Come le dimensioni, la posizione è una variabile ordinatoe espressa quantitativamenteche è utile per trasmettere una gerarchia. Avendo posizionato gli elementi più importanti o più richiesti in alto a sinistra, utilizzeremo l'ordine di percezione degli elementi sullo schermo a beneficio del prodotto. La posizione può anche servire come mezzo per creare relazioni spaziali tra oggetti sullo schermo e oggetti del mondo reale.
I principi del design dell'interfaccia visiva
Il cervello umano è un eccellente dispositivo di riconoscimento delle immagini. Estrae significato da densi flussi di informazioni visive.
340 Capitolo 14. Progettazione dell'interfaccia visiva
nazioni che cadono su di noi letteralmente da ogni parte. Il nostro cervello affronta questa raffica di input, rivelando schemi visivi e creando un sistema di priorità per gli oggetti che osserviamo. In definitiva, questo ci consente di percepire consapevolmente il mondo visibile. È la capacità del sistema visivo del cervello umano di assemblare parti del campo visivo in immagini basate su ancore visive (suggerimenti) che ci consente di elaborare le informazioni visive in modo rapido ed efficiente. Immagina di dover improvvisamente calcolare manualmente la traiettoria di volo di una palla da baseball per prevedere dove sarebbe caduta. I nostri occhi e il cervello insieme lo fanno in una frazione di secondo, senza richiedere uno sforzo cosciente da parte nostra. Il processo di creazione di un design di interfaccia visiva dovrebbe essere basato sulla nostra naturale capacità di elaborare informazioni visive al fine di garantire il trasferimento di informazioni agli utenti e riflettere le capacità e le funzioni del programma.
Un capitolo è completamente insufficiente per la piena divulgazione dell'argomento della progettazione visiva delle interfacce. Tuttavia, ci sono una serie di principi importanti che ti aiuteranno a creare interfacce il più semplice possibile per gli occhi e piacevoli per gli occhi. Come già accennato, Kevin Mallet e Darrell Sano forniscono un'analisi eccellente e dettagliata di questi principi di base; discuteremo brevemente solo alcuni dei principi più importanti della progettazione dell'interfaccia visiva.
Quando si creano interfacce grafiche, è necessario:
Usa le proprietà visive per raggruppare elementi e cos
dare una chiara gerarchia;
Crea una struttura visiva e crea un logico mar
Shrut a ogni livello dell'organizzazione;
Usa olistico, coerente e appropriato
immagini contestuali;
Integrare lo stile visivo con la funzionalità ha un senso
ma anche in sequenza;
Evita il "rumore" visivo e il disordine.
Questi principi e alcuni altri schemi generali relativi all'utilizzo del testo e del colore nelle interfacce utente grafiche sono discussi in dettaglio nelle sezioni seguenti.
Utilizzare le proprietà visive per raggruppare gli elementi e creare una gerarchia chiara.
Di regola, ha senso raggruppare insiemi logici di elementi funzionali o informativi attraverso proprietà visive, come il colore o le caratteristiche spaziali. Applicando coerentemente queste proprietà visive all'interfaccia, è possibile creare immagini di modelli che gli utenti impareranno rapidamente a riconoscere. Ad esempio, in Windows XP sono presenti tutti i pulsanti
I principi del design dell'interfaccia visiva 341
convesso, con angoli arrotondati, e i campi di testo sono rettangolari, leggermente depressi, con uno sfondo bianco e un bordo blu. A causa dell'uso sistematico di questa immagine, è impossibile confondere il pulsante e il campo di input, nonostante alcune somiglianze.
Le basi dell'interfaccia visiva sono visive
modelli principali.
disegno
Guardando qualsiasi insieme di elementi visivi, l'utente inconsciamente pone la domanda: "Cosa c'è di interessante qui?" - e quasi immediatamente: "Qual è la relazione tra questi oggetti?" Dobbiamo cercare di garantire che l'interfaccia contenga la risposta a entrambe le domande.
Creare una gerarchia
Sulla base degli scenari, determinare quali elementi funzionali e informativi devono essere immediatamente percepiti dagli utenti, quali sono secondari e quali sono necessari solo in situazioni eccezionali. Tale classificazione serve come base per la gerarchia visiva.
Usa colore, saturazione, contrasto, dimensioni e posizione per creare differenze visibili tra i livelli della gerarchia. Gli elementi più importanti dovrebbero essere colori più grandi, più luminosi, più saturi e più contrasto. Dovrebbero essere posizionati sopra altri elementi o fatti sporgere. Gli elementi evidenziati sono meglio dipinti con colori saturi. Gli elementi meno importanti dovrebbero essere meno saturi, meno contrastanti, più fini e più piatti. I colori chiari neutri li portano allo sfondo.
Naturalmente, l'impostazione di queste proprietà deve essere eseguita con cura. L'elemento più importante non dovrebbe essere reso enorme, rosso e convesso. Spesso è sufficiente modificare solo una delle proprietà. Se si scopre che due elementi di diversa importanza competono per l'attenzione dell'utente, "fissare lo stoppino" di minore importanza sarà una soluzione migliore rispetto al tentativo di "accendere" il più importante. Questo ti lascia con più spazio per concentrarti sugli elementi più importanti. (Ecco una buona analogia: se tutte le parole della pagina sono in grassetto rosso, una delle parole spicca?)
Creare una chiara gerarchia visiva è uno dei compiti più difficili nella progettazione dell'interfaccia visiva; la sua soluzione richiede abilità e talento. Gli utenti difficilmente notano una gerarchia visiva qualitativa, ma la sua assenza e la confusione che ne deriva sono immediatamente evidenti.
342 Capitolo 14. Progettazione dell'interfaccia visiva
Visualizzazione link
Fare di nuovo riferimento agli script per comunicare la relazione dell'elemento. È necessario determinare non solo elementi con funzioni simili, ma anche elementi che vengono spesso usati insieme. Gli elementi condivisi dovrebbero generalmente essere raggruppati nello spazio per ridurre al minimo i movimenti del mouse, mentre gli elementi che non possono essere usati insieme ma che hanno funzioni simili possono essere raggruppati visivamente, anche se non sono raggruppati nello spazio.
Il raggruppamento spaziale spiega agli utenti in che modo alcuni compiti, dati e strumenti sono in relazione con altri e può suggerire la corretta sequenza di azioni. Buon raggruppamento posizionetiene conto dell'ordine delle attività e delle attività secondarie e del movimento dello sguardo sullo schermo: da sinistra a destra per le lingue occidentali e, di regola, dall'alto verso il basso. (Discuteremo questo punto in modo più dettagliato in seguito.)
Gli elementi situati uno accanto all'altro di solito sono collegati tra loro. In molte interfacce, un tale raggruppamento è implementato troppo pesantemente: ovunque guardi, i frame e talvolta il frame contengono solo uno o due elementi. Spesso lo stesso effetto può essere raggiunto in modo più competente attraverso distanze.Ad esempio, sulla barra degli strumenti, i pulsanti possono essere separati da quattro pixel. Per separare i comandi di file ("apri", "nuovo file", "salva") in un gruppo separato, è sufficiente aumentare la distanza tra i pulsanti di comando file e il gruppo di pulsanti adiacente a otto pixel.
Gli elementi separati da grandi distanze possono essere raggruppati per mezzo di proprietà visive comuni, creando un modello che alla fine acquisisce un significato indipendente per gli utenti. Pertanto, l'utilizzo del volume per creare un'idea dello scopo fisico previsto è probabilmente il modo più efficace per separare i controlli dai dati e dagli elementi di sfondo (per maggiori dettagli sulle assegnazioni previste, vedere il capitolo 13). Questa strategia viene spesso utilizzata nel disegno di pittogrammi. Mac OS X utilizza colori vivaci per le icone delle applicazioni e colori tenui per programmi ausiliari usati raramente. Il pulsante di avvio verde del dispositivo potrebbe sovrapporsi con un'icona verde animata simile che indica che il dispositivo funziona normalmente.
Dopo aver deciso i gruppi e le caratteristiche visive di questi gruppi, inizia a regolare il contrasto tra i gruppi - enfatizzando o, al contrario, sfumando i gruppi in base alla loro importanza nel contesto attuale. Evidenzia le differenze tra i gruppi, ma minimizza le differenze tra gli elementi dello stesso gruppo.
Principi di progettazione dell'interfaccia 343
Test di strabismo
C'è un buon modo per assicurarsi che il visual design utilizzi efficacemente la gerarchia e le relazioni: i progettisti definiscono questa tecnica una prova di strabismo. Chiudi un occhio e guarda lo schermo con un secondo occhio socchiuso. Presta attenzione a quali elementi sporgono troppo, che diventano sfocati e che sono combinati in gruppi. Questa procedura rivela spesso problemi precedentemente non riconosciuti nella composizione dell'interfaccia.
Crea una struttura visiva e traccia un percorso logico a ciascun livello dell'organizzazione
È conveniente immaginare che le interfacce siano costituite da elementi visivi e interattivi, raggruppati insieme mediante pannelli che, a loro volta, possono essere raggruppati in schermate, viste o pagine. Tale raggruppamento, come detto sopra, può essere effettuato mediante distribuzione spaziale o usando proprietà visive comuni. Un'applicazione esclusiva può avere diversi livelli di tali strutture, quindi è estremamente importante mantenere una struttura visiva trasparente in modo che l'utente possa facilmente passare da una parte dell'interfaccia all'altra in base al suo flusso di lavoro.
Nel resto di questa sezione, descriviamo una serie di proprietà importanti che aiutano a definire una chiara struttura visiva.
Allineamento e griglia
L'allineamento degli elementi visivi è una delle principali tecniche che consentono a un designer di presentare un prodotto agli utenti in modo sistematico e ordinato. Gli elementi raggruppati devono essere allineati sia in orizzontale che in verticale (Fig. 14.1). Nel caso generale, ogni elemento sullo schermo dovrebbe essere allineato in base al numero massimo possibile di altri elementi. Il rifiuto di allineare due elementi o due gruppi di elementi deve essere consapevole: ciò è consentito solo per ottenere uno specifico effetto di separazione. Tra le altre cose, i designer dovrebbero prestare attenzione a:
Allineamento della firma. Didascalie per controlli, gare
posti uno sopra l'altro, dovrebbero essere allineati in comune
il confine. Se tutte le firme hanno approssimativamente la stessa lunghezza, tu
allinearli sul lato sinistro - questo renderà più facile per gli utenti
leggere di quando allineato a destra.
Allineamento all'interno di un gruppo di elementi funzionali. gruppo
pa flag, scelte o campi di testo correlati
deve obbedire all'allineamento della griglia standard.
Capitolo 14. Progettazione di interfacce visive
Fig. 14.I.Adobe Lightroom utilizza l'allineamento compositivo in modo molto efficiente. Testo, elementi funzionali e gruppi di controlli sono allineati in modo molto chiaro su una griglia con un passo fisso. Va notato che i controlli e le didascalie dei battiti a destra degli elementi del gruppo possono interferire con la loro lettura veloce
Allineamento di elementi distanziati da gruppi e pannelli.
Gruppi di controlli e altri oggetti sullo schermo, ove possibile, dovrebbero essere tutti collegati alla stessa griglia.
Grid è uno degli strumenti più potenti di un visual designer, che sta rapidamente guadagnando popolarità negli anni successivi alla seconda guerra mondiale grazie alle stampanti svizzere. La griglia garantisce l'uniformità e la coerenza della struttura della composizione, che è particolarmente importante quando si progetta un'interfaccia condiversi livelli di complessità visiva o funzionale. Una volta che i progettisti dell'interazione hanno identificato l'infrastruttura generale dell'applicazione e i suoi elementi dell'interfaccia utente (vedere il capitolo 7), i progettisti dell'interfaccia devono organizzare la composizione in una struttura a griglia che enfatizzi correttamente gli elementi e le strutture importanti e lasci uno spazio abitativo per elementi meno importanti e articoli di livello inferiore.
Di norma, la griglia divide lo schermo in diverse grandi aree orizzontali e verticali (Fig. 14.2). Design qualitativo
I principi del design dell'interfaccia visiva
Fig. 14.2. In questo esempio, la griglia di composizione controlla le dimensioni e la posizione delle varie aree della schermata del sito Web. Assicura la coerenza di schermi diversi, riducendo sia il lavoro del designer per creare la composizione sia lo sforzo che l'utente deve compiere per leggere e comprendere i contenuti dello schermo
la griglia del bagno impegna il concetto passaggicioè la distanza minima tra gli elementi. Ad esempio, se la spaziatura della griglia è di quattro pixel, tutte le distanze tra elementi e gruppi devono essere un multiplo di quattro.
Nel caso ideale, la griglia dovrebbe anche specificare le proporzioni delle varie aree dello schermo. Tali relazioni sono generalmente espresse in frazioni. Tra le frazioni comuni c'è l'illustre "sezione aurea" (indicata con la lettera greca "phi" e pari a circa 1,62), che si trova spesso in natura ed è considerata particolarmente gradita all'occhio umano; il reciproco della radice quadrata di due (circa 1: 1,41), che è la base dello standard internazionale per il formato della carta (ad esempio, foglio A4); e un rapporto 4: 3 è il rapporto di aspetto della maggior parte degli schermi di computer.
Naturalmente, si dovrebbe cercare un equilibrio tra relazioni geometriche idealizzate e le esigenze spaziali specifiche delle funzioni e delle informazioni visualizzate sullo schermo. L'implementazione ideale del rapporto aureo non migliorerà la leggibilità dello schermo su cui gli oggetti sono ammucchiati in un mucchio. Buona maglia composita modularitàvale a dire, è abbastanza flessibile da tenere conto di tutte le variazioni necessarie, pur mantenendo una struttura coerente ove possibile. Come in molti
Il cervello umano è un eccellente dispositivo di riconoscimento delle immagini. Affronta una raffica di dati di input, rivelando schemi visivi e creando un sistema di priorità per gli oggetti che osserviamo. È la capacità del sistema visivo del cervello umano di assemblare parti del campo visivo in immagini basate su ancore visive (suggerimenti) che ci consente di elaborare le informazioni visive in modo rapido ed efficiente. Il processo di creazione di un design di interfaccia visiva dovrebbe essere basato sulla nostra naturale capacità di elaborare informazioni visive al fine di garantire il trasferimento di informazioni agli utenti e riflettere le capacità e le funzioni del programma.
Quando si creano interfacce grafiche, è necessario:
- Utilizzare le proprietà visive per raggruppare gli elementi e creare una gerarchia chiara.
- Crea una struttura visiva e traccia un percorso logico a ciascun livello dell'organizzazione.
- Usa immagini coerenti, coerenti e contestuali.
- Integra lo stile visivo con la funzionalità in modo significativo e coerente.
- Evita il "rumore" visivo e il disordine.
Consideriamoli in modo più dettagliato.
Utilizzo delle proprietà visive per raggruppare gli elementi e creare una gerarchia chiara
Di regola, ha senso raggruppare insiemi logici di elementi funzionali o informativi attraverso proprietà visive, come il colore o le caratteristiche spaziali. Applicando coerentemente queste proprietà visive all'interfaccia, è possibile creare immagini di modelli che gli utenti impareranno rapidamente a riconoscere. Secondo le istruzioni per la progettazione del design di applicazioni Android, i soliti pulsanti dovrebbero essere convessi, con angoli arrotondati, ei campi di testo sono rettangolari, di solito sottolineati e piatti, mentre gli elementi attivi sono evidenziati (vedi Fig. 3.4). A causa dell'uso sistematico di questa immagine, è impossibile confondere il pulsante e il campo di input, nonostante alcune somiglianze.
Guardando qualsiasi insieme di elementi visivi, l'utente inconsciamente pone la domanda: "Cosa c'è di interessante qui?" - e quasi immediatamente: "Qual è la relazione tra questi oggetti?" Dobbiamo cercare di garantire che l'interfaccia contenga la risposta a entrambe le domande.
Fig. 3.4.
Quando si crea una gerarchia, è necessario determinare, in base agli scenari, quali elementi funzionali e informativi devono essere immediatamente percepiti dagli utenti, quali sono secondari e quali sono necessari solo in situazioni eccezionali. Tale classificazione serve come base per la gerarchia visiva.
Per creare differenze visibili tra i livelli della gerarchia, utilizzare colore, saturazione, contrasto, dimensioni e posizione. Gli elementi più importanti dovrebbero essere colori più grandi, più luminosi, più saturi e più contrasto. Dovrebbero essere posizionati sopra altri elementi o fatti sporgere. Gli elementi meno importanti dovrebbero essere meno saturi, meno contrastanti, più fini e più piatti. I colori chiari neutri li portano allo sfondo.
Naturalmente, l'impostazione di queste proprietà deve essere eseguita con cura. L'elemento più importante non dovrebbe essere reso enorme, rosso e convesso. Spesso è sufficiente modificare solo una delle proprietà. Se si scopre che due elementi di diversa importanza competono per l'attenzione dell'utente, rendere meno importante il meno evidente sarebbe una soluzione migliore.
Creare una chiara gerarchia visiva è uno dei compiti più difficili nella progettazione dell'interfaccia visiva; la sua soluzione richiede abilità e talento. Gli utenti difficilmente notano una gerarchia visiva qualitativa, ma la sua assenza e la confusione che ne deriva sono immediatamente evidenti.
Fare di nuovo riferimento agli script per comunicare la relazione dell'elemento. È necessario determinare non solo elementi con funzioni simili, ma anche elementi che vengono spesso usati insieme. Gli oggetti condivisi dovrebbero generalmente essere raggruppati nello spazio (posizionati su uno schermo separato) per ridurre al minimo i movimenti tra di essi.
Il raggruppamento spaziale spiega agli utenti in che modo alcuni compiti, dati e strumenti sono in relazione con altri e può suggerire la corretta sequenza di azioni. Un buon raggruppamento per posizione tiene conto dell'ordine delle attività e delle attività secondarie e del movimento dello sguardo attraverso lo schermo.
Gli elementi situati uno accanto all'altro di solito sono collegati tra loro. Se è necessario creare un raggruppamento, è conveniente implementarlo utilizzando le distanze. Gli elementi separati da grandi distanze possono essere raggruppati usando proprietà visive comuni.
Dopo aver deciso i gruppi e le caratteristiche visive di questi gruppi, inizia a regolare il contrasto tra i gruppi - enfatizzando o, al contrario, sfumando i gruppi in base alla loro importanza nel contesto attuale.
C'è un buon modo per assicurarsi che il visual design utilizzi efficacemente la gerarchia e le relazioni: i progettisti definiscono questa tecnica una prova di strabismo. Chiudi un occhio e guarda lo schermo con un secondo occhio socchiuso. Presta attenzione a quali elementi sporgono troppo, che diventano sfocati e che sono combinati in gruppi. Questa procedura rivela spesso problemi precedentemente non riconosciuti nella composizione dell'interfaccia.
Struttura visiva e percorsi logici
È conveniente immaginare che le interfacce siano costituite da elementi visivi e interattivi che vengono combinati in gruppi mediante pannelli che, a loro volta, possono essere raggruppati in schermate. Tale raggruppamento può essere effettuato mediante distribuzione nello spazio o utilizzando proprietà visive comuni. È indispensabile mantenere una struttura visiva trasparente in modo che l'utente possa facilmente passare da una parte dell'interfaccia all'altra in base al flusso di lavoro.
Descriviamo una serie di proprietà importanti che aiutano a impostare una chiara struttura visiva.
allineamento
L'allineamento degli elementi visivi è una delle principali tecniche che consentono a un designer di presentare un prodotto agli utenti in modo sistematico e ordinato. Gli elementi raggruppati devono essere allineati sia in orizzontale che in verticale (Fig. 3.5).
Nel caso generale, ogni elemento sullo schermo dovrebbe essere allineato in base al numero massimo possibile di altri elementi. Il rifiuto di allineare due elementi o due gruppi di elementi deve essere consapevole: ciò è consentito solo per ottenere uno specifico effetto di separazione. Tra le altre cose, i designer dovrebbero prestare attenzione a:
- Allineamento della firma. Le etichette per i controlli posizionate una sopra l'altra devono essere allineate su un bordo comune.
- Allineamento all'interno di un gruppo di elementi funzionali. Un gruppo di flag, scelte o campi di testo correlati deve obbedire all'allineamento della griglia standard.
- Allineamento di elementi distanziati da gruppi e pannelli. Gruppi di controlli e altri oggetti sullo schermo, ove possibile, dovrebbero essere tutti collegati alla stessa griglia.
Fig. 3.5.
rete
Grid è uno degli strumenti più potenti di un visual designer. La mesh offre uniformità e coerenza nella struttura della composizione. Dopo che i progettisti dell'interazione hanno definito l'infrastruttura generale dell'applicazione e i suoi elementi dell'interfaccia utente, i progettisti dell'interfaccia dovrebbero organizzare la composizione in una struttura a griglia che enfatizzerà correttamente gli elementi e le strutture importanti e lascerà spazio vitale per elementi meno importanti ed elementi di livello inferiore.
In genere, la griglia divide lo schermo in diverse grandi aree orizzontali e verticali. Una griglia ben progettata implica il concetto di un gradino, ovvero la distanza minima tra gli elementi. Ad esempio, se la spaziatura della griglia è di quattro pixel, tutte le distanze tra elementi e gruppi devono essere un multiplo di quattro.
Nel caso ideale, la griglia dovrebbe anche specificare le proporzioni delle varie aree dello schermo. Tali relazioni sono generalmente espresse in frazioni. Tra le frazioni comuni c'è l'illustre "rapporto aureo" (pari a circa 1,62), che si trova spesso in natura ed è considerato particolarmente piacevole per l'occhio umano; il reciproco della radice quadrata di due (circa 1: 1,41), che è la base dello standard internazionale per il formato della carta (ad esempio, foglio A4). Nella programmazione per dispositivi mobili, non devi fare affidamento sulle proporzioni dei display, poiché per i dispositivi Android non esiste un unico standard per le dimensioni dello schermo.
L'uso di una griglia nella progettazione visiva delle interfacce offre numerosi vantaggi:
- Facilità d'uso. Poiché la griglia rende uniforme la disposizione degli elementi, gli utenti acquisiscono rapidamente le competenze per trovare gli elementi necessari nell'interfaccia. La sequenza nella disposizione degli elementi e la scelta delle distanze tra loro facilita il lavoro dei meccanismi di elaborazione visiva nel cervello umano. Una griglia ben progettata semplifica l'esperienza dello schermo.
- Appello estetico. Applicando attentamente la griglia e scegliendo i rapporti appropriati tra le diverse aree dello schermo, il progettista può creare un senso di ordine che è conveniente per gli utenti e stimola il loro lavoro con il prodotto.
- Efficienza. La creazione di una griglia e l'incorporazione nel processo nelle prime fasi di definizione dettagliata delle decisioni di progettazione riduce il numero di iterazioni e azioni per "modificare" l'interfaccia. Una griglia di alta qualità e chiaramente contrassegnata pone le basi per un design facilmente modificabile ed estensibile, che consente agli sviluppatori di trovare buone soluzioni compositive.
Due tipi di simmetria sono spesso usati nelle interfacce: simmetria assiale verticale (simmetria attorno ad una linea verticale tracciata attraverso il centro di un gruppo di elementi) e simmetria assiale diagonale (simmetria attorno ad una diagonale). La maggior parte delle applicazioni presenta uno di questi tipi di simmetria.
