Archivi tag: user interface

interfaccia grafica, interfaccia utente, metodo nielsen, web design

UX: come organizzare i contenuti

Nozioni di base sulla strategia di contenuto:

La strategia di contenuto si concentra sulla pianificazione, creazione, consegna e governance dei contenuti.

Il contenuto non include solo le parole sulla pagina ma anche le immagini e i contenuti multimediali utilizzati.

Garantire che tu abbia contenuti utili e utilizzabili, che sia ben strutturato e facilmente reperibile è fondamentale per migliorare l’esperienza utente di un sito web.

Creare una strategia e una governance complete

L’obiettivo della strategia sui contenuti è creare contenuti significativi, coesi, coinvolgenti e sostenibili.

Elenchiamo le componenti che si uniscono per aiutarti a creare una strategia e una governance di successo.

Componenti orientati al contenuto

Componenti orientati alla persona

Identifica obiettivi e sostanza: si concentra su quale contenuto è necessario per eseguire correttamente la strategia principale. Comprende caratteristiche come l’architettura di messaggistica, pubblico (i) previsto e voce e tono.

Delineare i ruoli e il flusso di lavoro: si concentra su come le persone gestiscono e gestiscono i contenuti su base giornaliera, inclusi i ruoli, le attività e gli strumenti richiesti durante il ciclo di vita del contenuto.

Determine Structure: si concentra su come il contenuto è ordinato, organizzato e consultato. Si concentra sul contenuto stesso, inclusa la mappatura dei messaggi al contenuto, il bridging dei contenuti e la creazione di tabelle di pagine dettagliate.

Identificazione di politiche e standard: si concentra sulle politiche, gli standard e le linee guida che si applicano al contenuto e al suo ciclo di vita, nonché su come un’organizzazione sosterrà e svilupperà la sua strategia sui contenuti.

Ciclo di vita dei contenuti

Produrre contenuti convincenti e sostenibili significa che è necessario comprendere e seguire il ciclo di vita dei contenuti. Ci sono cinque fasi nel ciclo di vita. I

n generale, i cicli di vita dei contenuti includono quanto segue:

Audit e analisi: interviste ai soggetti interessati ai contenuti, analisi competitiva, analisi obiettiva e valutazione dell’ambiente dei contenuti (sito, contenuto del partner, sorella, siti parent)

Strategia: Determinazione delle aree di proprietà topica, tassonomia, processo / flusso di lavoro per la produzione di contenuti, piano di approvvigionamento, voce e definizione del marchio

Piano: raccomandazioni per il personale, personalizzazione del sistema di gestione dei contenuti, piano di metadati, piano di comunicazione, piano di migrazione

Creazione: scrittura di contenuti, produzione di asset, modello di governance, ottimizzazione dei motori di ricerca, controllo qualità per l’audit periodico, consigliare il cliente, determinare gli obiettivi per le misure di successo.

Molti dei risultati relativi a ciascuna di queste fasi si sovrappongono ai risultati di altri campi, tra cui l’architettura delle informazioni, la ricerca degli utenti, la gestione dei progetti, l’analisi dei dati web.

E’ importante pensare a chi contribuisce a ciascuno e a come questi diversi contributi si uniscono per definire il prodotto finale.

Best practice per la creazione di contenuti significativi

Abbiamo identificato queste best practice per aiutarti a creare contenuti significativi e pertinenti.

Ogni contenuto dovrebbe:

Riflettere gli obiettivi della tua organizzazione e le esigenze dell’utente. Puoi scoprire le esigenze dei tuoi utenti conducendo ricerche di mercato, ricerche degli utenti e analisi delle metriche web.

Comprendere in che modo l’utente pensa e parla di un argomento.

Il contenuto dovrebbe quindi essere creato e strutturato in base a questo.

Questo ti aiuterà anche con l’ottimizzazione dei motori di ricerca (SEO). Comunicare alle persone in un modo che capiscono. Abbracciare principi di scrittura semplici aiuta con questo. Essere utile. Essendo propositivo nei contenuti che includi, ometti l’inutile. Rimani aggiornato e resti fedele.

Quando nuove informazioni diventano disponibili, aggiorna il tuo contenuto o archivialo. Essere accessibile a tutte le persone. Hai la responsabilità di assicurarti che tutte le persone possano accedere e trarre vantaggio dalle tue informazioni. Sii coerente.

Essere trovato.

Assicurati che gli utenti possano trovare i tuoi contenuti sia internamente attraverso la navigazione sia esternamente attraverso i motori di ricerca. Aiutare a definire i requisiti per il sito complessivo. Il contenuto dovrebbe guidare la progettazione, la struttura, ecc

Indicizzati, interfaccia grafica, interfaccia utente, metodo nielsen, Usabilità, user experience, web design

L’architettura delle informazioni nella progettazione di interfacce

L’architettura delle informazioni (Information Architecture) si concentra sull’organizzazione, la strutturazione e l’etichettatura dei contenuti in modo efficace e sostenibile.

L’obiettivo è aiutare gli utenti a trovare informazioni e completare le attività. Per fare ciò, è necessario capire in che modo i pezzi si incastrano per creare un’immagine più grande, come gli elementi si relazionano tra loro all’interno del sistema.

Lo scopo della IA è quello di aiutare gli utenti a capire dove si trovano, cosa hanno scoperto, cosa c’è intorno e cosa aspettarsi. Di conseguenza, l’IA informa la strategia sui contenuti identificando la scelta delle parole e informa sulla progettazione dell’interfaccia utente e sulla progettazione dell’interazione, svolgendo un ruolo nei processi di wireframing e prototipazione.

Che cosa è necessario sapere

l’archiviazione, l’accesso e la presentazione delle informazioni.

I componenti principali della IA: Organizzazione Schemi e Strutture:

Come categorizzare e strutturare le informazioni Sistemi di etichettatura: Come rappresenti le informazioni

Sistemi di navigazione: come gli utenti navigano o passare attraverso le informazioni

Sistemi di ricerca: come gli utenti cercano informazioni

Per creare questi sistemi di informazioni, è necessario comprendere la natura interdipendente degli utenti, dei contenuti e del contesto. ogni cerchio fa riferimento a:

  • Contesto: obiettivi aziendali, finanziamenti, politica, cultura, tecnologia, risorse, vincoli
  • Contenuto: obiettivi di contenuto, tipi di documenti e dati, volume, struttura esistente, governance e proprietà
  • Utenti: pubblico, compiti, bisogni, ricerca di informazioni comportamento, esperienza

 

Componenti utilizzati nell’architettura dell’informazione

Ora che comprendi i concetti più astratti dietro l’architettura dell’informazione, esaminiamo i componenti e le tecniche IA che gli architetti utilizzano per acquisire tali concetti.

Esistono quattro componenti all’interno di un sistema di architettura dell’informazione:

  • I sistemi di organizzazione sono le categorie in cui vengono inserite informazioni, come nomi di autori e titoli o dimensioni della scarpa, tessuto e colore. I sistemi di etichettatura sono i modi in cui rappresentiamo le informazioni, ad esempio il livello di terminologia ritenuto appropriato per il pubblico di destinazione. Ad esempio, gli articoli dovrebbero usare i termini “optometrista” e “oftalmologo” o “oculista” più appropriato?
  • I sistemi di navigazione sono il modo in cui ci spostiamo da un’informazione all’altra quando ci vengono presentate tali informazioni. In questa pagina, ad esempio, è possibile utilizzare il pulsante Avanti per passare alla pagina successiva oppure iniziare a esplorare qualcosa di nuovo in qualsiasi momento utilizzando le schede come Avventura e Tecnologia nella parte superiore della pagina.
  • I sistemi di ricerca sono il modo in cui cerchiamo informazioni, come l’inserimento di parole in un motore di ricerca o la scansione di termini in un elenco numerato. Ad esempio, nella casella di ricerca in questa pagina, puoi digitare più parole per restringere i risultati e avvicinarti agli argomenti di cui vuoi leggere.
  • Altri componenti relativi all’architettura delle informazioni provengono dalla tecnologia utilizzata per trasformare il modello in un sistema di informazioni dal vivo. Ad esempio, se si memorizzano le informazioni in un database, l’architettura deve incorporare un componente di query per recuperare alcune informazioni specifiche. Se stai creando un sito Web, l’accesso alle informazioni utilizza componenti come la navigazione, lo scorrimento e il clic.
interfaccia grafica, interfaccia utente, metodo nielsen, Usabilità, web design

Il Wireframe: uno strumento base nella progettazione delle interfacce utente

Il wireframe è il disegno preliminare dell’interfaccia di una pagina che si concentra in particolare sull’allocazione dello spazio e la definizione delle priorità del contenuto, delle funzionalità disponibili e dei comportamenti previsti.

Per questi motivi, i wireframe in genere non includono alcuno stile, colore o grafica. I wireframe aiutano anche a stabilire relazioni tra i vari modelli di un sito Web.

Il valore dei wireframe

I wireframe servono a molteplici scopi, contribuendo a:

  • Collegare l’architettura delle informazioni del sito al suo design visivo mostrando percorsi tra le pagine
  • Chiarire i modi coerenti per visualizzare particolari tipi di informazioni sull’interfaccia utente
  • Determinare le funzionalità previste nell’interfaccia
  • Dare priorità al contenuto attraverso la determinazione di quanto spazio allocare a un determinato elemento e dove si trova l’elemento

wireframing

Creazione di wireframe

È importante tenere presente che i wireframe sono le guide a cui si allineeranno, nella pagina, gli elementi principali di navigazione e contenuto del sito. Dal momento che l’obiettivo delle illustrazioni non è quello di sovrapporsi al design: mantenete un impostazione essenziale.

Non usare i colori. Se in genere si utilizza il colore per distinguere gli elementi, invece, fare affidamento su vari toni di grigio per comunicare le differenze.

Non usare immagini. Le immagini distraggono dal lavoro di impostazione della pagina.

Per indicare dove intendi collocare un’immagine e le sue dimensioni, puoi invece utilizzare una sagoma rettangolare delle giuste dimensioni e contrassegnata con una x.

Usa solo un carattere generico. La tipografia non dovrebbe far parte della discussione sui wireframe. All’interno dei wireframe, tuttavia, è ancora possibile ridimensionare il carattere per indicare varie intestazioni e modifiche nella gerarchia delle informazioni di testo nella pagina.

Dato che i wireframe sono bidimensionali, è importante ricordare che non funzionano bene mostrando le funzionalità interattive dell’interfaccia come elenchi a discesa, stati di hover, fisarmoniche che implementano funzionalità di show-hide o caroselli con rotazione automatica.

Elementi importanti illustrati nei wireframe

Sebbene i wireframes differiscano da sito a sito, i seguenti elementi vengono spesso inclusi come elementi standard sui wireframe:

  • Campo di ricerca
  • logo
  • Breadcrumb
  • Headers, incluso titolo della pagina come H1 e sottotitoli
  • Sistemi di navigazione (menù orrizzontali e  a “tendina”), inclusa la navigazione globale
  • Contenuto del corpo
  • Pulsanti di condivisione
  • Informazioni di contatto
  • Piè di pagina

Tipi di wireframe

I wireframes possono variare sia nella produzione, dagli schizzi di carta alle immagini disegnate al computer e nella quantità di dettagli che trasmettono. Bassa e alta fedeltà sono termini usati per identificare il livello di produzione o funzionalità del wireframe.

I wireframe a bassa fedeltà aiutano a facilitare la comunicazione del team di progetto e sono relativamente veloci da sviluppare. Tendono ad essere più astratti perché utilizzano spesso immagini semplici per bloccare lo spazio e implementare il contenuto fittizio o il testo latino (lorem ipsum) come riempitivo per contenuti ed etichette.

I wireframe ad alta fedeltà sono migliori per la documentazione a causa del loro maggiore livello di dettaglio. Questi wireframe includono spesso informazioni su ogni particolare elemento della pagina, incluse dimensioni, comportamento e / o azioni relative a qualsiasi elemento interattivo

interfaccia grafica, interfaccia utente, user experience, web design

Nozioni di base sulla progettazione dell’interfaccia utente

Interfaccia utente

La progettazione di questo aspetto dell’user experience si basa sull’anticipazione delle esigenze degli utenti assicurando loro elementi di facile accesso, comprensione e utilizzo dell’interfaccia.

L’interfaccia utente riunisce concetti di interaction design, visual design e architettura dell’informazione.

Scelta degli elementi dell’interfaccia

Gli utenti hanno acquisito familiarità con gli elementi di interfaccia che agiscono in un certo modo, quindi cerca di essere coerente e prevedibile nelle tue scelte e nel layout. Questo aiuterà l’utente ad ottenere il risultato desiderato, mostrando efficienza e generando soddisfazione.

Gli elementi di interfaccia includono ma non sono limitati a: controlli di input: pulsanti, campi di testo, caselle di controllo, pulsanti di selezione, elenchi a discesa, caselle di controllo, campo data

Componenti di navigazione: breadcrumb, cursore, campo di ricerca, impaginazione, slider, tag, icone

Componenti: tooltip, icone, barra di avanzamento, notifiche, finestre di messaggio, finestre modali

Contenitori: accordion

Ci sono momenti in cui più elementi potrebbero essere ugualmente appropriati per la visualizzazione del contenuto. Quando ciò accade, è importante considerare i trade-off.

Ad esempio, a volte gli elementi che possono aiutarti a risparmiare spazio, mettono mentalmente a disagio l’utente, costringendolo a indovinare cosa si trova all’interno del menu a discesa o quale potrebbe essere l’elemento.

Best practice per la progettazione di un’interfaccia

Tutto nasce dalla conoscenza dei tuoi utenti, compresa la comprensione dei loro obiettivi, abilità, preferenze e tendenze.

Una volta che conosci il tuo utente, assicurati di considerare quanto segue durante la progettazione della tua interfaccia: mantieni l’interfaccia semplice.

Le migliori interfacce sono quasi invisibili all’utente.

Evitano gli elementi non necessari e sono chiari nella lingua che usano sulle etichette e nei messaggi.

Crea coerenza e usa elementi di interfaccia utente comuni.

Utilizzando elementi comuni nell’interfaccia utente, gli utenti si sentono più a loro agio e sono in grado di svolgere le attività più rapidamente. È inoltre importante creare schemi in lingua, layout e design in tutto il sito per facilitare l’efficienza.

Una volta che un utente impara a fare qualcosa, dovrebbe essere in grado di utilizzare tale abilità in altre parti del sito.

Sii propositivo nel layout di pagina.

Considera le relazioni spaziali tra gli elementi sulla pagina e struttura la pagina in base all’importanza. Il posizionamento accurato degli articoli può aiutare a richiamare l’attenzione sulle informazioni più importanti e può aiutare la scansione e la leggibilità.

Usa strategicamente il colore e la trama.

È possibile indirizzare l’attenzione o reindirizzare l’attenzione lontano da elementi che utilizzano il colore, la luce, il contrasto e la trama a proprio vantaggio.

Usa la tipografia per creare gerarchia e chiarezza.

Considerare attentamente come si usa il carattere tipografico. Diverse dimensioni, tipi di carattere e disposizione del testo per aumentare la scansione, la leggibilità e la leggibilità. Assicurati che il sistema comunichi cosa sta succedendo. Informa sempre i tuoi utenti di posizione, azioni, cambiamenti di stato o errori.

L’uso di vari elementi dell’interfaccia utente per comunicare lo stato e, se necessario, i passaggi successivi possono ridurre la frustrazione per l’utente. Pensa alle impostazioni predefinite.

Pensando attentamente e anticipando gli obiettivi dei tuoi visitatori, puoi creare delle impostazioni predefinite che riducono e difficoltà per chi utilizza il tuo sito.

 

Indicizzati

La migliore interfaccia utente è quella invisibile

Non è un gran mistero che le interfacce utente veramente grandi siano quelle progettate per stare fuori dai piedi.

 ‘Stare fuori dai piedi’ significa non distrarre i tuoi utenti. Piuttosto, le buone interfacce utente consentono agli utenti di completare gli obiettivi.

Il risultato? Una riduzione dei costi di formazione e supporto e utenti più felici, soddisfatti e altamente coinvolti. Quando inizi a progettare una nuova interfaccia, assicurati di ricordare questi fondamentali:

  • 1. Conosci il tuo utente “Gli obiettivi degli utenti sono i tuoi obiettivi, quindi imparali. Ripetili. Quindi, scopri le competenze e l’esperienza del tuo utente e ciò di cui ha bisogno. Scopri quali interfacce preferisce e sedersi e guarda come le usa. Non farti trascinare cercando di tenere il passo con la concorrenza imitando stili di design alla moda o aggiungendo nuove funzionalità. Concentrandoti prima sul tuo utente, sarai in grado di creare un’interfaccia che gli permetta  di raggiungere i suoiobiettivi.
  • 2. Presta attenzione ai pattern Gli utenti trascorrono la maggior parte del proprio tempo su interfacce differenti (Facebook, MySpace, Whatsapp, Instagram, scuola / università, siti Web di notizie, ecc.). Non è necessario reinventare la ruota. Queste interfacce risolvono già alcuni degli stessi problemi che gli utenti percepiscono all’interno di quella che stai creando. Usando quei modelli familiari di’interfaccia utente, aiuterai i tuoi utenti a sentirsi a casa.
  • 3. Resta coerente “Più le aspettative degli utenti si dimostrano giuste, più si sentiranno in controllo del sistema e più gli piacerà”. – Jakob Nielson. I tuoi utenti hanno bisogno di coerenza. Devono sapere che una volta che imparano a fare qualcosa, saranno in grado di farlo di nuovo. Linguaggio, layout e design sono solo alcuni degli elementi dell’interfaccia che richiedono coerenza. Un’interfaccia coerente consente agli utenti di comprendere meglio come funzioneranno le cose, aumentandone l’efficienza.
  • 4. Usa la gerarchia visiva  Progetta la tua interfaccia in modo che permetta all’utente di concentrarsi su ciò che è più importante. La dimensione, il colore e la posizione di ogni elemento lavorano insieme, creando un percorso chiaro per comprendere la tua interfaccia. Una chiara gerarchia aiuta moltissimo nel ridurrela complessità (anche quando le azioni stesse devono essere complesse).
  • 5. Fornisci feedback La tua interfaccia dovrebbe sempre parlare con il tuo utente, quando le sue azioni sono sia giuste che sbagliate o fraintese. Informare sempre gli utenti delle azioni, dei cambiamenti di stato e degli errori o delle eccezioni che si verificano. I segnali visivi o la semplice messaggistica possono mostrare all’utente se le sue azioni hanno portato al risultato previsto.
  • 6. Sii indulgente Non importa quanto sia chiaro il tuo design, le persone commettono errori. L’interfaccia utente dovrebbe consentire e tollerare l’errore dell’utente. Disegnare modi per gli utenti di annullare azioni poter ricominciare automaticamente aiuta e rasserena lutente. Inoltre, se l’utente provoca un errore, usa la tua messaggistica come supporto mostrando quale azione è stata sbagliata e assicurati che sappia come impedire che l’errore si ripresenti.
  • 7. Potenzia il tuo utente Una volta che un utente ha acquisito esperienza con la tua interfaccia, premialo / a e concedi scorciatoie. La suddivisione di compiti complessi in semplici passaggi all’inizio aiuta ma poi diverrà macchinosa e distraente. Fornire modi più astratti, come le scorciatoie da tastiera, per eseguire attività consentirà al tuo progetto di essere più efficace.
  • 8. Parla la loro lingua “Se pensi che ogni pixel, ogni icona, ogni carattere contino, allora devi anche credere che ogni lettera sia importante. ” Tutte le interfacce richiedono un certo livello di copywriting. Mantieni i testi , chiari e diretti. Fornisci  etichette chiare e concise per le azioni e mantieni la messaggistica semplice. I tuoi utenti lo apprezzeranno, perché  ti sentiranno e sentiranno se stessi tra pari.
  • 9. Resta semplice “Un paradosso moderno è che è più semplice creare interfacce complesse perché è troppo difficile semplificarle.” – Pär Almqvist I migliori design dell’interfaccia sono invisibili. Non contengono elementi non necessari. Invece, gli elementi necessari sono concisi e hanno senso. Ogni volta che stai pensando di aggiungere una nuova funzione o elemento alla tua interfaccia, fai la domanda: “L’utente ha davvero bisogno di questo?” Stai aggiungendo le cose perché ti piaccioni o perché li vuoi? Non lasciare mai che il tuo ego dell’Ilo rubi lo spettacolo.
  • 10. Continua ad andare avanti Questo è un principio chiave nella progettazione dell’interfaccia utente. Si dice spesso quando si sviluppano interfacce che è necessario sbagliare velocemente e rifare spesso. Quando crei un’interfaccia utente, farai degli errori. Continua ad andare avanti e ricorda di tenere la tua interfaccia utente al sicuro dalla tua rabbia.
e commerce, interfaccia grafica, interfaccia utente, internet, metodo nielsen, Usabilità, web design, webmarketing

Quanto conta l’Autorità nella user experience

La psicologia del design persuasivo

Questo è un articolo molto “americano” basato, voglio dire, su ricerche svolte presso un pubblico anglosassone piuttosto che latino, di conseguenza, conoscendo i nostri connazionali, ci metterei una discreta tara, comunque in linea di massima offre  buoni suggerimenti.

Una richiesta effettuata da una persona percepita come rappresentante di una determinata autorità, può rendere le persone riceventi più conformi a tale richiesta. L’applicazione di questo principio in UX può facilitare il processo decisionale degli utenti.

Immaginiamo che tu stia aspettando un amico fuori da un ristorante. Una persona che indossa l’uniforme di addetto alla sicurezza si avvicina a te e dice: “Vedi quell’uomo laggiù? È parcheggiato, ma non trova moneta per il tassametro. Vai a dargli una monetina. ”

Gli daresti la monetina? Statisticamente parlando, probabilmente lo farai.  Tuttavia, se il richiedente indossa abiti civili, la percentuale di chi offre le  monetine calerà drasticamente.

Questo è il principio dell’autorità. Il principio dell’autorità si riferisce alla tendenza di una persona a conformarsi con le persone in posizioni di autorità, come i capi di governo, rappresentanti delle forze dell’ordine, medici, avvocati, professori e altri esperti percepiti in diversi campi.

Il principio dell’autorità è un esempio della tendenza umana a utilizzare l’euristica del giudizio.

In questo caso, l’assunto implicito è che coloro che ricoprono posizioni di autorità possono esercitare maggiore saggezza e potere e, pertanto, il loro rispetto porterà ad un risultato favorevole. Come esseri umani, siamo inclini a prendere la decisione più facile piuttosto che quella più accurata e più impegnativa.

Non è difficile capire la fonte del principio dell’autorità. Da bambini, molte delle nostre conoscenze sul mondo provengono da figure di autorità come genitori e insegnanti. Anche ora, da adulti, seguiamo  persone in posizioni di autorità che ottengono grandi risultati con la loro competenza.

Mentre diventiamo più scettici da adulti, tendiamo ancora a considerare il giudizio di certe figure di autorità, come scienziati, dottori, avvocati e operatori delle forze dell’ordine, per essere più affidabili dei nostri, anche su questioni che sono al di fuori del loro dominio. di esperienza.

Autorità e User experience

Affidarsi all’opinione degli esperti è una scelta efficace per prendere decisioni in molte situazioni e ci risparmia il lavoro di ricerca della materia.  Ad esempio, un utente potrebbe dover svolgere un compito complesso e gravoso di informazioni per confrontare prodotti in ambiti in cui è necessaria un’istruzione estesa o uno sviluppo professionale: servizi finanziari, servizi legali o farmaci.

In tempi di incertezza, gli utenti possono guardare le figure di autorità in questi domini al fine di informare le loro decisioni. I professionisti di UX possono sfruttare il principio dell’autorità per aumentare la credibilità dei loro progetti utilizzando per esempio: foto di persone in posizioni di autorità (o persone vestite come se fossero in posizioni di autorità) – dottori o scienziati vestiti con camici bianchi o avvocati vestiti con abiti simbolo.

Considerazioni etiche dell’autorità

L’utilizzo del principio dell’autorità a proprio vantaggio non significa che sei libero di ingannare i tuoi clienti con false pretese di autorità. Dopotutto, ci sono degli standard etici da rispettare nel campo della UX.  Dovremmo considerare, in primo luogo, se siamo onesti nel richiamare figure autoritarie.

Valuta se le tue sponsorizzazioni e la sezione “clienti precedenti” includono società che hanno accettato di essere affiliate pubblicamente alla tua organizzazione. In caso contrario, lavorare per ottenere il permesso prima di usare il loro logo nella  home page (o su qualsiasi pagina).

Considera la regola d’oro dell’etica nel design UX: “Chiediti se la tua strategia persuade gli utenti a fare qualcosa che non vorresti essere persuaso a fare tu.”

Conclusione

Possiamo usare il principio dell’autorità per contribuire ad alleviare lo sforzo del processo decisionale. Riducendo lo sforzo richiesto per prendere una decisione (e quindi riaffermando tale decisione), possiamo aumentare la fiducia degli utenti e potenziare i nostri clienti.

i termini del web, interfaccia grafica, interfaccia utente, simbolismo colori, Usabilità, web design

Internet facile: usare il bianco nel web design

Il bianco è purezza, pulizia e innocenza. Come il nero non è un colore,è abbassamento della tonalità fino al fuori scala. Come tale il bianco si sposa bene con quasi tutti i colori. Anzi: per convenzione non viene considerato se non come sfondo neutro, tranne che in precise occasioni.

Di colore bianco oppure quasi sinonimi sono: neve, perla, bianco antico, avorio, gesso, bianco latte, giglio, fumo, conchiglia, merletto antico, crema, lino, fantasma bianco, beige, cornsilk, alabastro, carta e calce sono sinonimo di o rappresentare le sfumature del colore bianco.

Natura e cultura del bianco

Per l’occhio umano, il bianco è un colore brillante che può causare mal di testa per alcuni. Troppo bianco brillante può essere accecante. Nella maggior parte dei paesi occidentali il bianco è il colore delle spose.

In Oriente, è il colore del lutto e dei funerali. Il bianco è spesso associato a ospedali, medici, infermieri e dentisti. Alcune culture vedono il bianco come il colore della regalità o delle divinità. Gli angeli sono generalmente raffigurati come bianchi. Nei primi occidentali, il bravo ragazzo indossava il bianco, mentre il cattivo indossava il nero.

Uso del bianco nel web design

Nella maggior parte dei casi, il bianco è visto come un colore di sfondo neutro, come se non esistesse, appunto, mentre gli altri colori presenti , anche se utilizzati in proporzione minore, conferiscono il maggior significato alla pgina.

Usa il bianco per indicare pulizia, purezza o morbidezza. Alcuni beige neutri, avorio e creme hanno gli stessi attributi del bianco, ma sono più sottomessi e meno brillanti del bianco. Usa molto bianco per un look estivo. Usa piccole quantità di bianco per ammorbidire una tavolozza invernale o suggerire la neve. Usa il bianco per inviti semplici e formali e biglietti di ringraziamento.

Utilizzato con toni chiari o pastello, il bianco è morbido e primaverile e contribuisce a rendere più vivace la tavolozza pastello. Il bianco può rendere i colori chiari o rossi, blu e verdi più luminosi, più prominenti. Rosso, bianco e blu creano una tavolozza patriottica.

 

fotoritocco online, i termini del web, interfaccia grafica, interfaccia utente, sicurezza e virus, simbolismo colori, web design

Internet facile: usare il grigio nel web design

Il grigio non è un colore neutro ed equilibrato. Non è nemmeno un colore freddo e conservatore che raramente evoca emozioni forti. Non è un colore e basta!

Il grigio è una tonalità di non colore, una sfumatura del nero, il non colore per eccellenza. Il buio dentro una miniera non è un colore come non lo è il cielo di una notte senza stelle. Quindi non venitemi a dire che il nero oppure una sua tonalità annacquata e cioè il grigio sono colori.

Se pensate che io sia uno svitato, guardate di che colore facevano le ombre Van Gogh e prima di lui Monet, Manet, Cezanne, Degas e tutti gli altri impressionisti che hanno fatto creato il moderno gusto per l’immagine.

Nero mai, invece colori riportati in tonalità scure semmai. Il risultato è quel colore naturale e vero che tutti conosciamo. Perchè mai questa regola non dovrebbe valere nel web design?

Una volta consapevoli di questo usiamo pure il grigio, sapendo che esitono infinte tonalità di colori “ingrigiti” che si possono adattare alla palette della nostra UI, proprio come hanno fatto gli impresssionisti.

Il grigio comunque è talmente neutro che anche se usato “puro” assorbirà come una spugna le tonalità di colore dei campi a lui vicini.

Sfumature di grigio

Varie sfumature del grigio sono: cenere, cinereo, grigio antracite, canna di fucile, grigio ferro, piombo, topo, ostrica, grigio di Payne, perla, grigio polvere, sere, argento, ardesia, taupe.

I colori grigi vanno dal quasi nero al quasi bianco e portano un accenno dialtri colori. Il grigio e l’argento sono talvolta usati come intercambiabili, sebbene l’argento abbia una lucentezza più lucida e metallica.

Natura e cultura del grigio

Il lato più chiaro del nero, il colore grigio è un colore tendenzialmente freddo visto in nubi temporalesche e alcuni metalli anche e esistono tonalità calde, a seconda del colore di base.

Come il nero, il grigio è usato come colore del lutto e anche come colore formale. Il grigio scuro antracite porta con sé parte della forza e del mistero del nero. È un colore sofisticato senza molti degli attributi negativi del nero. I grigi più chiari sono simili al bianco.

Uso del grigio nel design

Tutte le tonalità di grigio possono essere buoni colori di sfondo neutri.E’ buona norma utilizzare i colori grigi più chiari al posto del bianco e del grigio più scuro al posto del nero.

Taupe, un grigio neutro marrone è una tonalità di grigio conservativa, leggermente terrosa, calda.

Utilizza le immagini in scala di grigi per evocare una sensazione di nostalgia o storia.

Uso con colori e tavolozze colore complementari

I grigi chiari con tonalità pastello di rosa, blu, lavanda e verde hanno una qualità femminile – scurisci quei colori per un tocco più maschile.

Il grigio con il rosa acceso conferisce un tocco retrò. Puoi rinfrescare una tavolozza calda aggiungendo grigio a rossi ricchi o gialli dorati.

Le combinazioni di colori creativi sono caratterizzate da numerose tavolozze di colori tenui centrate su toni di grigio.

Le frasi familiari possono aiutare un progettista a vedere come il loro colore di scelta potrebbe essere percepito dagli altri, sia gli aspetti positivi che quelli negativi. “Buono” materia grigia grigia – cervello, intelletto Potere grigio – avere a che fare con anziani o anziani “Cattivo” grigio Grigio – opaco, sporco, sporco.

Pagina grigia o testo grigio – in desktop publishing, una pagina di testo pesante con poco contrasto o spazio bianco

Capelli grigi – persona anziana (non necessariamente dispregiativa)

Acqua grigia – acqua sporca come l’acqua scolata dalla vasca da bagno o dal lavello della cucina.

i termini del web, interfaccia utente, Usabilità, web design

I principali colori esadecimali

Se non sapete cosa sono i colori esadecimali ve lo diciamo noi.

Si tratta di una gamma ben definita di colori rappresentati ognuno da un codice composto da 6 tra lettere e numerie nel dettaglio sono:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, dove zero è pari a 0 e F è pari a a 15.

La base esadecimale è usata nella maggior parte dei programmi di grafica per identificare inequivocabilmente un colore ben specifico. In particolare il codice esadecimale viene riconosciuto nel linguaggio html, ed utilizzato nei fogli stile (css).

Vi consigliamo quindi di utilizzare il codice esadecimale esattamente come usate il codice Pantone per definire i colori dei vostri progetti di corporate image.

Per quanto riguarda il linguaggio HTML i colori sono indicati con un codice a 6 caratteri preceduto dal simbolo # che indica appunto un colore.

Prendiamo in esame il colore bianco, in base esadecimale è indicato come #FFFFFF
è composto da:

FF = 255 Rosso
FF = 255 Verde
FF = 255 Blu

255 parti di rosso, 255 parti di verde e 255 parti blu

Se si utilizza un editor ad oggetti o wysiwyg (What You See Is What You Get) come Dreamweaver o Frontpage le conversioni relative ai colori saranno eseguiti automaticamente in base al colore selezionato.Comunque , e ne parleremo, non fatevi ingannare da queste allettanti promesse, usate un editor testuale per scrivere il vostro codice.

Nonostante il numero massimo di colori ottenibile è pari a 16.777.216 (256*256*256) possiamo usare solo 216 colori che vengono indicati come i colori sicuri (web safe)ossia colori che verranno visualizzati allo stesso modo da tutti i browser disponibili, o comunque anche da computer con schede grafiche non proprio di ultima generazione.

In pratica, come vuole la legge di Murphy per il web design, il computer più obsoleto dell’azienda generalmente è quello del capo. Quindi per andare sul sicuro insito nel consigliarvi l’uso dei colori web safe.

Di seguito i principali colori esadecimali:

FFFFFF

bianco

FFC0B6

sabbia rosata

FF8080

salmone

FF4040

salmone scuro

FF1F35

anguria

E01F25

porpora

A00000

cremisi scuro

600000

mogano

FFEFCE

vaniglia

FFE1B0

sabbia

FFC281

crema o pelle

FF9F71

pesca chiaro

FF8141

pesca

FF421E

pesca scuro

FF1F10

mandarino

FF0000

rosso

E10000

rosso scuro

C21212

mattone

A11F12

terracotta

622100

cioccolata

FFFF80

giallo chiaro

FFFF35

giallo limone

FFFF00

giallo

FFE118

senape

FFBF18

oro

FF8100

arancio

E26200

arancio scuro

A13F00

nocciola

824200

marrone scuro

D2B06A

kaki

FFFFD0

avorio

E0E074

avocado

BFBF00

certosa

808000

verde oliva

424200

marrone avana

101000

avocado scuro

82823F

grigio oliva

E0FFBF

verde pallido

C2FF91

sedano

80FF80

verde menta

41FF32

verde foglia

00E100

verde chiaro

00C200

verde

008000

verde scuro

006000

smeraldo

002100

verde pavone

82C168

verde bamb�

3F621F

giada

E0FFDF

nebbia marina

00FFB2

verde acqua

00E1AD

caraibi

009F82

verde mare

00603C

malachite

004023

sempreverde

00201F

pino scuro

81C097

grigio verde

00FFFF

turchese

00323F

blu baltico

002041

blu metallico

82E0FF

zaffiro

00A0E0

ceruleo

0080C0

ceruleo scuro

004080

blu ardesia

002F80

blu acciaio

002060

blu denim

001040

blu aviazione

71B2CF

grigio blu

E0F1FF

blu artico

82C0FF

fiordaliso

5291EF

azzurro

2181FF

wedgwood

0080FF

blu manganese

0062E1

blu medio

0041C2

mirtillo

001FE2

blu marina

0000FF

blu

0020C2

blu cobalto

0000E0

indaco

0000C2

blu oltremare

E0E0FF

lilla nebbia

8080FF

lavanda

4141FF

lilla scuro

4040C2

blu violetto

9F9FE0

grigio lilla

E8E0FF

rosa azzurro

A160FF

rosa di parma

8242FF

blu violaceo

4000A2

ametista

2200A1

uva

000080

blu notte

00004F

uva americana

F1E0FF

rugiada

E1BFFF

prugna chiaro

E081FF

viola polvere

C200FF

fucsia

400080

prugna

1F007F

prugna scuro

E29FDE

malva chiaro

603181

malva

FFC1FD

rosa pallido

FF7FFF

rosa chiaro

FF22FF

rosa confetto

FF00FF

rosa carico

E000E0

magenta

A1009F

magenta scuro

800080

rosso prugna

200042

mora

602162

grigio prugna

FFE0F5

rosa perlato

FF9FCF

fiori di melo

FF82C2

rosa pallido

FF60AF

rosa ciliegia

FF40A0

rosa

FF0080

rosa scuro

C0007F

vinaccia

620042

ribes nero

400040

bordeaux

FFC0CE

rosa quarzo

FF6088

rosa corallo

FF4070

rosso corallo

FF2259

fragola

C20041

ciliegia

800000

scarlatto

410012

rubino scuro

F18FBC

grigio rosa

FFFFFF

bianco

F7F7F7

grigio 5%

EFEFEF

grigio 10%

E1E1E1

grigio 15%

D2D2D2

grigio 20%

C0C0C0

grigio 25%

B2B2B2

grigio 30%

A2A2A2

grigio 35%

8F8F8F

grigio 40%

808080

grigio 50%

5F5F5F

grigio 60%

4F4F4F

grigio 70%

404040

grigio 75%

2F2F2F

grigio 80%

000000

nero

 

i termini del web, Indicizzati, metodo nielsen, Usabilità, user experience, web design

Il simbolismo dei colori nella progettazione delle interfacce utente

Comincia da questo post una serie di articoli inclusi nella categoria internet facile destinata a chi inizia a progettare interfacce grafiche.

Il simbolismo è uno strumento potente da usare nella progettazione della interfaccai grafica: utilizza il colore per richiamare alla nostra mente sensazioni, idee, concetti o sentimenti tradizionali, culturali o religiosi o per evocare reazioni fisiche.

Nella progettazione grafica, la scelta di un colore basato sul suo simbolismo si applica bene ai progetti elettronici, dai loghi agli sfondi del sito web, in quanto provoca una reazione non mediata e quindi immediata nell’utente .

I colori sono comunicazione non verbale. Hanno significati che vanno oltre l’inchiostro.

Mentre progetti loghi e siti Web, tieni presente come l’occhio e la mente percepiscono determinati colori e il simbolismo associato a ciascuno di essi

I colori sullo schermo del computer

Qualsiasi grafica visualizzata tramite computer acquista innegabilmente in brillantezza, in quanto i colori sono retro-illuminati e non disposti su una superficie opaca che richiede una sorgente di colore esterna per ressere visualizzata. Come per esempio nella stampa.

Quindi alcune abitudini riprese dalla grafica tradizionale, come per esempio utilizzare testo nero su fondo bianco oppure testo bianco su fondo nero, possono risultare troppo aggressive e stancanti viste a schermo. Consiglio sempre di mitigare i contrasti, utilizzando per esempio testo comunque scuro, ma ricavato riprendendo il colore istituzionale, quasi al massimo della sua tonalità più scura, su fondo bianco. In modo da mitigarne il contrasto.

Ricordatevi anche che esiste una grande variabilità nella resa di colore da schermo a schermo, che viene spesso modificata anche pesantemente, consiglio l’uso della gamma colori web safe specialmente per computer non recenti.

I differenti mezzi di riproduzione possono incidere molto sulla resa colore, se ritenete che il vostro lavoro possa essere proiettato a muro evitate comunque le tonalità più chiare che non verranno riprodotte.

 

Il simbolismo dei colori freddi

Verde

Blu

Viola

Turchese

I colori freddi tendono ad avere un effetto calmante.

In natura, il blu è l’acqua e il cielo mentre il verde è l’erba, gli alberi e altre forme di vita vegetale, una coppia naturale che sostiene la vita.

Combina il blu e il verde per le tavolozze di colori naturali e acquose.

Riscalda una fantastica tavolozza di colori con un tocco di colore caldo come il rosso o l’arancione.

Se desideri il calore con solo una tavolozza blu, scegli il blu più profondo con un tocco di blu scuro, ma non del tutto viola o quasi nero.

I colori freddi appaiono più piccoli dei colori caldi e retrocedono visivamente sulla pagina in modo che il rosso possa sovrastare visivamente e risaltare sull’azzurro anche se usato in quantità uguali.

Se vuoi concentrarti sulla calma, usa più del fresco e solo un po ‘di colori caldi. I profili per ciascuno di questi colori freddi includono le descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo dei colori caldi

Porpora

Rosso

Arancio

Giallo

Verde

 

Il calore del rosso, del giallo o dell’arancio può rappresentare l’eccitazione o anche la rabbia. I colori caldi trasmettono le emozioni dal semplice ottimismo alla violenza forte.

Anche i neutri del nero e del marrone hanno attributi caldi. Possiamo discutere se il o il bianco vanno considerati colori oppure limiti dello spettro luminoso.

In natura, i colori caldi rappresentano il cambiamento come il cambiamento delle stagioni o l’eruzione di un vulcano.

Tonifica le forti emozioni di una tavolozza calda con alcuni colori freddi o neutri rilassanti o usando il lato più chiaro della palette di colori caldi come rosa, giallo pallido e pesca.

I colori caldi appaiono più grandi dei colori freddi, quindi il rosso può sovrastare visivamente il blu anche se usato in quantità uguali. Puoi spesso allontanarti dalle tonalità calde e continuare a trasmettere la sua eccitazione.

I profili per ciascuno di questi colori caldi includono descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo degli accostamenti tra colori caldi e freddi

 

 

 

Gli accostamenti tra colori caldi e freddi possono calmare oppure emozionare.

Sfumature di viola e sfumature di verde insieme al beige sono colori misti che trasmettono il simbolismo cromatico dei lati caldi e freddi della ruota dei colori.

Un blu freddo e un rosso caldo si uniscono per creare viola intenso e lavanda pallida.

In misura minore, le sfumature di verde, in particolare turchese e verde acqua, hanno anche gli effetti di riscaldamento e raffreddamento che nascono dal caldo giallo e blu freddo.

Alcuni neutri leggeri come la crema, il beige pallido e il taupe evocano alcune delle stesse sensazioni calde e fredde di viola e verde.

Il colore opposto o contrastante per il viola è verde e per il verde, è viola.

I profili per ciascuno di questi colori misti comprendono le descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo dei colori neutri.

Nero

Bianco

Beige

Marrone

I colori neutri del nero, del bianco, dell’argento, del grigio e del marrone fanno buoni sfondi, servono a unificare diverse tavolozze di colori, e spesso anche da soli come l’unico o principale obiettivo di un progetto.
I colori neutri possono essere freddi o caldi ma sono più sottili di blu e rossi. I colori neutri aiutano a mettere l’attenzione su altri colori o servono a smorzare i colori che altrimenti potrebbero essere opprimenti da soli.

In una certa misura, i neri, i marroni, le abbronzature, i colori oro e beige sono considerati caldi.

Mentre bianco, avorio, argento e grigio sono colori un po ‘più freddi. Eppure questi attributi caldi e freddi sono flessibili e più sottili di quelli del rosso o del blu.

I profili per ciascuno di questi colori neutri includono descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di