Archivi tag: usability

e commerce, interfaccia grafica, interfaccia utente, internet, metodo nielsen, Usabilità, user experience, web design, webmarketing

Eyetracking e schema a F, per interfacce grafiche al top

La distribuzione dei contenuti a  F rende l’interfaccia grafica più interessante

Le visualizzazioni di Eyetracking mostrano che gli utenti leggono spesso pagine Web in uno schema a forma di F: due strisce orizzontali seguite da una striscia verticale.

F per veloce (fast).

È così che gli utenti leggono i tuoi preziosi contenuti. In pochi secondi, i loro occhi si muovono a velocità sorprendenti attraverso le parole del tuo sito Web in un modello molto diverso da quello che hai imparato a scuola. Un nuovo studio sull’eytracking, ha analizato come 232 utenti hanno guardato migliaia di pagine Web. Il comportamento di lettura principale degli utenti è stato abbastanza coerente in molti siti e diverse attività.

Questo modello di lettura dominante sembra un po ‘come una F e presenta le seguenti tre componenti:

  • Gli utenti leggono prima in un movimento orizzontale, di solito nella parte superiore dell’area del contenuto. Questo elemento iniziale forma la barra in alto della F.
  • Successivamente, gli utenti spostano leggermente la pagina verso il basso e quindi leggono in un secondo movimento orizzontale che in genere copre un’area più corta rispetto al movimento precedente. Questo elemento aggiuntivo forma la barra inferiore di F.
  • Infine, gli utenti scansionano il lato sinistro del contenuto con un movimento verticale.

A volte questa è una scansione abbastanza lenta e sistematica che appare come una striscia solida su una mappa termica per l’eyeering. Altre volte gli utenti si muovono più velocemente, creando una mappa di interesse dicontinua.

Questo ultimo elemento forma la radice di F.

Ovviamente, i modelli di scansione degli utenti non sono sempre composti da esattamente tre parti. A volte gli utenti leggeranno una terza parte del contenuto, rendendo il modello più simile a una E che a un F. Altre volte leggeranno solo una volta, rendendo il modello simile a una L rovesciata (con la traversa in alto) . Generalmente, tuttavia, i modelli di lettura assomigliano approssimativamente a una F, sebbene la distanza tra la barra superiore e quella inferiore vari.

eyetracking male female

Le aree in cui gli utenti apparivano più colorati sono di colore rosso; le aree gialle indicano meno visualizzazioni, seguite dalle aree verdi meno viste. Le aree grigie non hanno attratto alcuna fissazione.

Gli utenti leggono tre diversi tipi di pagine Web: un articolo nella sezione “chi siamo” di un sito web aziendale , una pagina di prodotto su un sito di e-commercee risultati di un motore di ricerca pagina. Va detto comunque che se si strizzano gli occhi e ci si concentra sulle aree rosse (più viste), tutte le mappe termiche mostrano il modello F previsto. Certo, ci sono alcune differenze.

Il modello di visualizzazione F è una forma generale approssimativa piuttosto che un comportamento uniforme e pixel-perfetto.

Nella pagina di e-commerce , la seconda traversa della F è più bassa del solito a causa dell’intervento dell’immagine del prodotto. Gli utenti hanno inoltre assegnato un tempo di fissazione significativo a una casella nella parte in alto a destra della pagina in cui sono stati trovati il ​​prezzo e il pulsante “aggiungi al carrello”.

Sul SERP, la seconda traversa di F è più lunga della traversa superiore, principalmente perché il secondo titolo è più lungo del primo. In questo caso, entrambi i titoli si sono rivelati ugualmente interessanti per gli utenti, anche se in genere gli utenti leggono meno della seconda area visualizzata su una pagina.

Implicazioni del modello F

Le implicazioni del modello F per il web design sono chiare e mostrano l’importanza di seguire le linee guida per  il Web invece di tagliare e incollare il testo come è stato impaginato per la stampa.

La lettura approfondita è rara, soprattutto quando i potenziali clienti stanno conducendo la loro ricerca iniziale per cercare possibili fornitori. Sì, alcune persone leggeranno di più, ma la maggior parte no.

I primi due paragrafi devono indicare le informazioni più importanti.

C’è qualche speranza che gli utenti leggeranno questo materiale, anche se probabilmente leggeranno più del primo paragrafo che del secondo. Iniziare sottotitoli, paragrafi e punti elenco con  informazioni che gli utenti noteranno quando scorreranno il lato sinistro del contenuto nella barra verticale ella F.

Leggeranno la terza parola su una riga molto meno spesso delle prime due parole.

Ricordiamo che, naturalmente, gli utenti eseguono una scansione in modo diverso e più diretto quando cercano prezzi o altri numeri.

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

Metodo Nielsen: prevenire gli errori consci degli utenti, parte 3

Conferma prima delle azioni distruttive

I progettisti di solito si concentrano sulle attività dell’utente relative alla creazione. Ma anche la cancellazione deve essere semplice.

Ricorda, quando gli utenti eliminano un oggetto, distruggono qualcosa che aveva richiesto lavoro per essere  creato.

Prima di aver rimosso l’oggetto di quel duro lavoro, assicurati assolutamente che l’utente intendesse veramente eliminalo mostrando agli utenti una finestra di dialogo di conferma.

Questo può essere un modo efficace, semplice e familiare per dare all’utente la possibilità di fermarsi definitivamente, e ricontrollare se vogliono veramente cancellare tutte quelle foto di vacanza, per esempio. È importante utilizzare con attenzione le finestre di dialogo di conferma, poiché interrompono il flusso di lavoro degli utenti e rallentano intrinsecamente.

Vedi anche: 

 

Se una finestra di dialogo di conferma chiede “vuoi davvero farlo?” Dopo ogni decisione, molti utenti non dedicheranno il tempo a ricontrollare se hanno fatto un errore prima di premere istintivamente il pulsante Conferma evidenziato.

Contrariamente intuitivamente, un design destinato a prevenire gli errori può effettivamente aumentarli, poiché l’utente deve contrastare l’inefficienza di una costante richiesta diconferma. Come nella celebre favola di Esopo, “Il ragazzo che gridò al lupo”, un’interfaccia utente può diventare “Il computer che ha chiesto troppe volte conferma”.

In entrambi i casi, le persone avranno smesso di prestare attenzione ai falsi allarmi nel momento in cui c’è qualcosa di importante su cui piangere. Non utilizzare le finestre di dialogo di conferma come unico metodo di prevenzione degli errori, applicale attentamente con le altre tecniche discusse in questo articolo per massimizzare la loro utilità e limitare la loro inefficienza.

Un altro principio fondamentale che impedisce agli utenti di commettere errori è  fornire una rete di sicurezza che rende questi errori meno costosi. Quasi tutti hanno sperimentato il momento assolutamente terrificante  in cui ci rendiamo conto di conto di aver cancellato per sbaglio un’intera cartella o una directory di documenti importanti, quando si voleva veramente cancellare solo un file.

Fornire la possibilità di annullare l’azione più recente può aiutare gli utenti a sentirsi più sicuri e più sicuri di sperimentare con caratteristiche non familiari, poiché sono consapevoli che un errore è a basso costo e può essere facilmente risolto.

Gmail offre una funzionalità di annullamento contestuale e intuitiva per azioni distruttive, come l’eliminazione accidentale di 92 e-mail.

Questa funzione si è rivelata talmente utile che Gmail ora ha reso disponibile anche l’invio di e-mail, consentendo di annullare l’invio di una e-mail fino a 30 secondi dopo aver premuto Invia.

Avvisa prima che gli errori vengano riprodotti

Presentando avvisi di errore sottili e contestuali mentre un utente sta facendo attivamente un errore può aiutarli a correggerli rapidamente. Ad esempio, quando gli utenti digitano una recensione in una casella di input su un negozio di e-commerce, non aspettare fino a quando non hanno premuto Invia per mostrare un messaggio di errore che la recensione è di 35 caratteri troppo lunga, fagli sapere mentre stanno digitando quei 35 personaggi in più (o meglio ancora, avvertili quando si avvicinano al limite).

Twitter ha notoriamente un limite di caratteri severo per Tweets e avvisa gli utenti prima che superino quel limite con un numero di caratteri rimanenti. Quando il Tweet supera il limite, mostra un contatore negativo, evidenzia i caratteri in eccesso e disattiva il pulsante Tweet, che consente agli utenti di sapere esattamente cosa devono fare per correggere il loro errore.

Riepilogo

Anche se gli utenti commettono errori durante l’utilizzo del software, è possibile ridurre gli errori generali progettando tenendo conto dell’esperienza dell’utente.

Prevenire gli errori aiutando l’utente a costruire un buon modello mentale dell’interfaccia.

Utilizzare modelli di progettazione che comunichino il modo in cui funzionano agli utenti, incoraggiare gli utenti a ricontrollare il proprio lavoro (soprattutto prima dell’eliminazione) e avvisare prima di commettere errori.

Queste semplici linee guida possono aiutare a ridurre i tassi di errori degli utenti e, in definitiva, a migliorare l’usabilità.

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

Metodo Nielsen: prevenire gli errori consci degli utenti, parte 2

Comunicare le consuetudini

Oltre all’uso di convenzioni che gli utenti sono in grado di riconoscere dalle esperienze precedenti, un altro metodo per rendere i controlli comprensibili è che il progetto comunichi come può essere usato.

Ad esempio, gli utenti sono abituati a pulsanti cliccabili che sembrano avere una sottile quantità di ombra all’esterno. Questo effetto fa sembrare che un pulsante si stia risalendo dalla pagina e tu possa spingerlo.

Viceversa, i campi modulo sono anch’essi rettangolari, ma hanno una piccola quantità di ombra all’interno della forma, per indicare che sono vuoti e possono essere riempiti.

Questo attributo del disegno che indicava come può essere usato viene spesso definito come il significante dell’oggetto.

Vedi anche: 

L’accessibilità stessa è il modo in cui l’oggetto può interagire , (i pulsanti possono essere spinti, i campi del modulo possono avere aggiunto l’input digitato) e i segnali visivi che comunicano questo all’utente sono noti come significanti del prezzo.

Se non c’è un significante chiaro che comunichi la convenienza, gli utenti potrebbero non capire come utilizzare un controllo e commettere errori.

Talvolta, gli utenti non si rendono conto che stanno per attivare un’azione che si traduce in modifiche ampie e difficili da verificare.

Le funzionalità di anteprima offrono l’opportunità di superare le difficoltà di valutazione senza commettere errori.

Un buon esempio è il rendering di effetti speciali in un software di editing video in cui la modifica del sistema in background può richiedere 5 o 10 minuti e il computer non risponde più durante il funzionamento. In questo caso, anche se gli utenti non hanno perso il lavoro in modo permanente, se il risultato non è quello che stanno cercando, hanno perso un bel po ‘di tempo e forse anche pazienza.

Ove possibile, offrire uno stato di anteprima che gli utenti possano esaminare per assicurarsi che ottengano ciò che desiderano.

Questo aiuta ad evitare errori dispendiosi in termini di tempo prima che possano essere fatti. In iOS 8 è disponibile un’opzione di accessibilità che consente agli utenti ipovedenti di ingrandire lo schermo in modo che le icone e il testo siano più grandi. L’applicazione dello zoom richiede il riavvio del telefono, che è un’azione pesante che richiederà un po ‘di tempo, quindi iOS mostra un’anteprima di come saranno le cose prima di impegnarsi ad applicare questa modifica. Questa utile anteprima ti consente di valutare se il tuo obiettivo è davvero quello di ingrandire il display.

Prevenire sia gli errori che le distrazioni

Alcune strategie di prevenzione degli errori funzionano sia con le distrazioni che con gli errori. Di seguito sono riportate alcune linee guida generali per ridurre la verosimiglianza (e la gravità) di tutti i tipi di errori.

Rimuovere gli oneri di memoria

Ogni volta che gli utenti devono conservare molte informazioni nella loro memoria a breve termine mentre lavorano a un’attività, sono vulnerabili agli scivoloni dove possono ripetere i passaggi o non riescono a completare l’attività. Gli errori di memoria possono anche portare a errori in cui gli utenti dimenticano le decisioni precedenti già prese e ripetono il processo con risultati diversi.

Quando possibile, rimuovere le condizioni che richiedono agli utenti di conservare le informazioni nella propria memoria mentre si spostano da una fase all’altra in complesse procedure a più fasi. Piuttosto, cerca di visualizzare le informazioni contestuali che gli utenti devono completare per svolgere un’attività.

Ricorda che gli utenti sono spesso distratti, multitasking o non completamente concentrati sul sito Web o sull’app che stanno utilizzando.

Un buon approccio è immaginare che i tuoi utenti potrebbero essere interrotti da una telefonata dopo ogni fase di un processo a più fasi. Mostrate tutte le informazioni che gli utenti devono riprendere prontamente dopo essere state interrotte per diversi minuti.

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

Metodo Nielsen: prevenire gli errori “consci” degli utenti, parte 1

valutazione euristica Interaction Design :

il design ideale è trasparente e facile da capire, fornisce un’anteprima e aiuta gli utenti a correggere facilmente i propri errori.

Errare è umano e gli errori si verificano quando le persone interagiscono con le interfacce utente.

Ci sono due categorie di errori degli utenti: inconsci e voluti. Gli errori voluti si verificano quando un utente è sul pilota automatico e intraprende le azioni sbagliate al servizio di un obiettivo ragionevole. Abbiamo parlato di errori inconsci e antiscivolo in dettaglio nel primo articolo di questa serie.

Vedi anche: 

 

In questo articolo ci concentriamo sugli errori voluti o consci

Gli errori si verificano quando un utente ha sviluppato un modello mentale dell’interfaccia che non è corretto e forma un obiettivo che non si adatta bene alla situazione. Ad esempio, molti giochi per bambini online iniziano con un breve video tutorial o con una pubblicità video per un altro gioco; nel nostro test con i bambini, abbiamo notato che, quando il video assomiglia troppo a un vero gioco, i bambini sono tentati di interagire con esso, pensando di poter già iniziare a giocare.

In questa situazione, gli utenti formano ed eseguono un obiettivo inappropriato, in gran parte perché interpretano erroneamente ciò che vedono sul sito web (ovvero pensano che il video sia il vero gioco). Un buon design dovrebbe aiutare a prevenire tali disallineamenti tra le aspettative dell’utente e l’interfaccia.

Quando si lavora con un sistema come un sito Web o un’app, gli utenti iniziano con un obiettivo di qualche tipo e, in base al loro modello mentale del sistema, formano un piano d’azione per raggiungere tale obiettivo. Quindi agiscono e cercano di verificare che la loro azione abbia prodotto i risultati desiderati.

Un sacco di errori dell’utente (ma non inconsci) si verificano quando gli utenti non ricevono abbastanza aiuto nel colmare questi due abissi, e il modello mentale e l’interpretazione di come il sistema dovrebbe funzionare non corrisponde ai modelli mentali degli utenti.

In queste situazioni, gli utenti o formano un piano d’azione che non è corretto o non capiscono bene come lo stato del sistema è cambiato a seguito delle loro azioni. Mentre prevenire gli errori inconsci è spesso una semplice questione di validazione e di applicazione dei vincoli, prevenire gli errori voluti  implica comprendere i modelli mentali degli utenti e le loro aspettative e far corrispondere i tuoi designer.

Non commettere l’errore di pensare che gli utenti impareranno i modelli mentali dei tuoi designer; potrebbe essere il caso di rare situazioni in cui gli utenti sono costretti a utilizzare il sistema regolarmente, per la maggior parte delle app e dei siti web rivolti al consumatore, gli utenti scelgono un sito diverso invece di preoccuparsi di apprenderne uno difficile.

Raccolta dei dati utente

Metodi come indagine contestuale, studi sul campo e studi etnografici sono adatti per capire i modelli mentali e le aspettative degli utenti in una fase iniziale, quando inizi un nuovo progetto. Una volta che si dispone di un sistema (o almeno di un prototipo) è possibile utilizzare test di usabilità qualitativa per rilevare lacune tra i modelli mentali dei progettisti e le aspettative degli utenti.

Seguire convenzioni di progettazione

L’utilizzo di convenzioni di progettazione standard consente agli utenti di collegare sia il sistema di valutazione che il sistema di esecuzione e di capire quali azioni possono intraprendere.

Ciò è rafforzato dalla legge di Jakob, che afferma che “gli utenti trascorrono la maggior parte del loro tempo su altri siti Web“. Ogni utente che interagisce con il tuo sito Web o applicazione è stato addestrato da migliaia di altri progettisti ad aspettarsi che elementi interattivi comuni appaiano e funzionino in un certo modo, e possono verificarsi delle condizioni di errore quando il tuo sito web si discosta da quelle convenzionali.

 

i termini del web, intelligenza artificiale, interfaccia grafica, interfaccia utente, metodo nielsen, Usabilità, user experience, web design

Come proporre nuovi standard di progettazione per il web

A volte i progettisti di user interface hanno la necessità di proporre  nuovi standard alla comunità  dei web designer, ecco cosa fare per proporre nuove regole.

Ricordatevi che usare standard acquisiti è come usare le parole italiane standard piuttosto che il tuo vocabolario quando scrivi. Sei ancora tu quello che decide quale storia raccontare e come mettere insieme i nuovi elementi di design.

Regole per gli standard di progettazione

Per avere successo, uno standard di progettazione dell’interfaccia deve:
essere ben illustrato con esempi poiché i progettisti seguono gli esempi molto più del testo assicurandosi che gli esempi siano pienamente conformi allo standard in tutti gli aspetti e non solo a quello che hanno lo scopo di illustrare (i progettisti possono raccogliere più di un suggerimento da un determinato esempio), avere liste di controllo complete e complete il più possibile (i progettisti preferiscono scansionare un elenco invece di dover leggere il testo) – per esempio, un elenco di tutti gli elementi che devono essere presenti in ogni pagina o un elenco di terminologie preferite, hanno maggiore successo se  offrono un esperto di standard disponibile sia per rivedere i nuovi progetti  sia per consultazioni più informali ogni volta che i progettisti dubitano della corretta interpretazione dello standard (se non è facile rivolgere domande, allora ogni designer trarrà la propria risposta, probabilmente sbagliata).

Non è sufficiente aspettare per essere consultati:
devi cercare attivamente dei progettisti e contattarli per dire loro dello standard e per (gentilmente) commentare i loro progetti e come correggere le inevitabili deviazioni

L’evangelizzazione è particolarmente importante per gli standard intranet
poiché ogni dipartimento avrà la tendenza a ignorare i mandati dalla sede centrale.
Di solito gli utenti della itranet lo fanno con la scusa che “siamo diversi e la gente del quartier generale non conosce la nostra situazione”. È vero, ma tutti sono speciali, quindi il sistema totale sarà un caos totale se le persone sono autorizzate a divergere a causa di circostanze particolari. Solitamente, il bene superiore è effettivamente più grande e l’usabilità generale è aumentata dalla coerenza.

Ci possono essere alcuni casi in cui le circostanze sono così speciali che deve essere tollerata un’incoerenza, ma le deviazioni devono essere limitate a casi con una ragione molto, molto buona (la maggior parte delle buone ragioni non sono abbastanza buone).

Infine, renditi conto che uno standard ha i suoi problemi di usabilità.
Questo è vero se lo standard è implementato come un sito Web interattivo con collegamenti ipertestuali o se si tratta di un documento stampato tradizionale.

Pertanto uno standard di progettazione proposto dovrebbe essere testato con i progettisti per garantire che possano utilizzarlo.

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

10 euristiche di Nielsen per la progettazione dell’interfaccia utente

Ecco i 10 principi generali di Jakob Nielsen per la progettazione dell’interazione. Si chiamano “euristiche*” perché sono semplici regole empiriche e non linee guida specifiche sull’usabilità.

Visibilità dello stato del sistema

Il sistema dovrebbe sempre tenere gli utenti informati su ciò che sta accadendo, attraverso un feedback appropriato entro un tempo ragionevole.

Corrispondenza tra sistema e mondo reale

Il sistema dovrebbe parlare la lingua degli utenti, con parole, frasi e concetti familiari all’utente, piuttosto che termini orientati al sistema o riferiti alla programmazione. Segui le convenzioni del mondo reale, facendo apparire le informazioni in un ordine naturale e logico.

Controllo degli utenti e libertà

Gli utenti spesso scelgono le funzioni di sistema per errore e avranno bisogno di un’uscita di emergenza chiaramente contrassegnata per lasciare lo stato indesiderato senza dover passare attraverso lunghe procedure.
Supporto annulla e ripristina.

Coerenza e standard

Gli utenti non dovrebbero chiedersi se parole, situazioni o azioni diverse significano la stessa cosa. Usa termini, icone e grafiche univoche. Segui le convenzioni stabilite dalla piattaforma a cui gli utenti sono abituati .

Prevenzione degli errori

Ancor meglio dei buoni messaggi di errore è una progettazione attenta che impedisce il verificarsi di un problema in primo luogo. Eliminare le condizioni soggette a errori o verificarle e presentare agli utenti un’opzione di conferma prima di impegnarsi nell’azione, dove si suppone possa essere facile commettere errori. (Leggi l’articolo completo sulla prevenzione degli errori degli utenti.)

Riconoscimento piuttosto che richiamo

Riduci al minimo il carico di memoria dell’utente rendendo visibili oggetti, azioni e opzioni. L’utente non deve essere costretto a ricordare informazioni durante tutta l’interazione. Le istruzioni per l’uso del sistema dovrebbero essere visibili o facilmente recuperabili ogni volta che è opportuno. (Leggi l’articolo completo sul riconoscimento e il richiamo in UX.)

Flessibilità ed efficienza di utilizzo

Gli acceleratori ed eventuali scorciatoie- naacosti all’utente principiante – possono spesso accelerare l’interazione per l’utente esperto in modo tale che il sistema possa soddisfare sia utenti inesperti che esperti. Consenti agli utenti di personalizzare azioni frequenti.

Design estetico e minimalista

I dialoghi non dovrebbero contenere informazioni che sono irrilevanti o raramente necessarie. Ogni ulteriore unità di informazioni in un dialogo compete con le unità di informazioni pertinenti e diminuisce la loro visibilità relativa. Evitare l’utilizzo di differenti font e codici colore quando non indispensabile, ogni elemento dell’interfaccia deve essere semplice ed essere progettato per uno scopo preciso

Aiutare gli utenti a riconoscere, diagnosticare e recuperare dagli errori

I messaggi di errore dovrebbero essere espressi in un linguaggio semplice (senza codici), indicare con precisione il problema e suggerire in modo costruttivo una soluzione.

Guida e documentazione

Sebbene sia preferibile utilizzare il sistema senza documentazione, potrebbe essere necessario fornire assistenza e documentazione. Qualsiasi informazione di questo tipo dovrebbe essere facile da cercare, focalizzata sul compito dell’utente, elencare le misure concrete da eseguire e non essere troppo grande

 

*L’euristica (dalla lingua greca εὑρίσκω, letteralmente “scopro” o “trovo”) è una parte dell’epistemologia e del metodo scientifico.

Questa definizione è stata tratta da wiki.

È la parte della ricerca il cui compito è quello di favorire l’accesso a nuovi sviluppi teorici o a scoperte empiriche. Si definisce, infatti, procedimento euristico, un metodo di approccio alla soluzione dei problemi che non segue un chiaro percorso, ma che si affida all’intuito e allo stato temporaneo delle circostanze, al fine di generare nuova conoscenza. È opposto al procedimento algoritmico. In particolare, l’euristica di una teoria dovrebbe indicare le strade e le possibilità da approfondire nel tentativo di rendere una teoria progressiva, e cioè in grado di garantirsi uno sviluppo empirico tale da prevedere fatti nuovi non noti al momento dell’elaborazione del nocciolo della teoria.

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

Internet facile: usare il rosa nel web design

Il rosa è un rosso più morbido, meno violento. Il rosa è il lato dolce del rosso. È zucchero filato e gomme da masticare e bambini, specialmente bambine.

Usato in eccesso per simboleggiare eventi e prese di posizione anche drammatiche, oggi ha perso parte della sua connotazione giocosa per assumere risvolti leggermete inquietanti.

Natura e cultura del rosa

Mentre il rosso suscita passione e azione, il rosa simboleggia la tenerezza e la pace. In alcune culture occidentali il rosa è il colore delle bambine. Rappresenta lo zucchero e le spezie e tutto è bello.

La maggior parte delle persone pensa ancora al rosa come a un colore delicato e femminile.

Usare il rosa nel web design

Sia il rosso che il rosa denotano amore, ma mentre il rosso è passione ardente, il rosa è romantico e affascinante. Usa il rosa per trasmettere giocosità (fenicotteri rosa caldo) e tenerezza (rosa pastello). Molteplici tonalità di rosa e viola chiaro o altri pastelli usati insieme mantengono la natura morbida, delicata e giocosa del rosa.

Attewnzione comunque alla zuccherosità del colore che se usato in eccesso tende a saturare l’esoerienza visiva dell’utente, fino agenerare reziuoni di segno decisamente negativo.

Può essere diluito accostandolo al bianco oppure a leggere tonalità di grigio freddo.

Aggiungi forza con sfumature più scure di rosa, viola e bordeaux. Usa il rosa per comunicare fascino, tenerezza, pace e accessibilità. Tutte le sfumature di rosa diventano sofisticate se combinate con sfumature di blu, grigio o medio-scuro. Dal verde al verde scuro con il rosa è anche una combo dall’aspetto accattivante.

Il rosa nel linguaggio

Le frasi familiari possono aiutare un designer a capire come un colore possa essere percepito dagli altri, sia in senso positivo che negativo.

Rosa positivo: nel rosa – sano solletico – felice, contenuto

Rosa negativo o neutro: vedere il mondo in rosa a volte risulta stancante

i termini del web, Indicizzati, interfaccia grafica, interfaccia utente, metodo nielsen, simbolismo colori, Usabilità, user experience, web design

Internet facile: usare il beige nel web design

Il beige è un camaleonte, che assume alcuni degli attributi dei colori caldi o freddi più forti a cui viene accostato. Di per sé, il colore beige è uno sfondo neutro calmo.

I toni del beige sono descritti come un pallido colore marrone chiaro o un’abbronzatura grigiastro con un po ‘del calore del marrone e la freschezza frizzante del bianco. È conservativo ed è spesso associato ad altri colori. È visto come affidabile e rilassante.

I significati del beige

Il beige è stato tradizionalmente considerato un colore di fondo un poco antiquato. In alcune culture, gli indumenti beige simboleggiano la pietà o la semplicità. Il vestito tradizionale saudita comprende un mantello esterno lungo fino al pavimento, un bisht fatto di lana o di pelo di cammello nei toni del nero, del beige, del marrone o del crema.

Utilizzo dl beige nella progettazione di interfacce grafiche

Poiché la maggior parte dei colori beige è molto leggera, gli artisti grafici tendono a utilizzarli come colori di sfondo. Alcune tonalità di beige sono abbastanza scure da poter essere usate per i font.

Usa il colore beige per fornire uno sfondo calmo e rilassante. Piccole dosi di beige possono essere aggiunte per separare due colori scuri in un progetto di stampa o sito web. Il beige può assumere alcuni degli attributi di giallo o rosa quando viene toccato con quelle sfumature.

Coppia viola e rosa con beige per un look femminile vintage. Il beige abbinato a verdi, marroni e arance crea una tavolozza terrosa. Il nero conferisce un tocco di forza e formalità al beige. Un tocco di beige riscalda una tavolozza di blu fresco senza opprimerlo, mentre il beige con la marina è una combinazione sofisticata.

La gamma del colore beige

  •  Se il progetto verrà visualizzato su un computer, utilizzare i valori RGB.
  • Usa codici esadecimali se lavori con i siti web.
  • Alcuni colori beige hanno una sfumatura giallastra o rosata.

I colori beige includono: Lino (colore web): Hex # faf0e6 | RGB: 250,240,230 | CMYK 0,4,8,2 Antique White (colore web): Hex # faebd7 | RGB 250,235,215 | CMYK 0,6,14,2 Champagne: Hex # f7e7ce | RGB 247,231,206 | CMYK 0,6,17,3 Latte cosmico: esadecimale # fff8e7 | RGB 255,248,231 | CMYK 0, 3,9,0 Bisque (colore web): esadecimale # ffe4c4 | RGB 255,228,196 | CMYK 0,11,23,0 Crema: esadecimale # fffdd0 | RGB 255,253,208 | CMYK 0,1,18,0 Ecru: esadecimale # cdb891 | RGB 205,184,145 | CMYK 0,10,29,20 Cachi: esadecimale # c3b091 | RGB 195,176,145 | CMYK 0,10,26,24

i termini del web, Indicizzati, interfaccia grafica, interfaccia utente, metodo nielsen, simbolismo colori, Usabilità, user experience, web design

Internet facile: usare il lilla nel web design

Lavanda, malva, orchidea, prugna, viola e cardo sono tutte sfumature del lilla.

Il colore lilla è usato in generale per applicare a una gamma di colori pallidi o viola medio spesso indicato come lavanda.

C’è qualche disputa sull’origine della parola lavanda. Una scuola di pensiero è che poiché viene usata negli oli essenziali come agente di pulizia, la parola deriva dalla parola latina “lavare” che significa “lavare”. Ma è anche possibile che il nome derivi dalla parola latina “livere” che si riferisce al colore dei suoi fiori.

 La natura e la cultura del lilla

Il porpora e le sue sfumature di lilla più leggere hanno un posto speciale, quasi sacro, nella natura, dove i fiori di lavanda, orchidea, lillà e viola sono spesso delicati e considerati preziosi. Il lilla simboleggia la purezza, la devozione e l’amore. È spesso visto nei matrimoni sia come un colore che come un fiore.

Uso del lilla nel web design

Nel design, utilizzare il colore lilla per suggerire qualcosa di unico o estremamente speciale ma senza il mistero più profondo del viola. Può essere una buona scelta quando si desidera invocare sentimenti di nostalgia o romanticismo poiché spesso simboleggia meraviglia e un’aura di impossibilità. Altre caratteristiche di questo colore includono serenità, silenzio e devozione.

Fai attenzione a quali colori combini con il lilla nel tuo design; in alcuni casi, può essere travolgente e in altri potrebbe essere troppo stucchevole o essere considerato eccessivamente sentimentale.

  • Un verde menta con lavanda è un allegro, aspetto primaverile.
  • Il blu con la lavanda forma una combinazione fresca e sofisticata, o riscalda la lavanda con i rossi.
  • Per una palette di colori contemporanei prova la lavanda con beige e marroni chiari.
  • Il colore della lavanda è una tonalità estremamente pallida del colore, mentre il colore viola saturo (lavanda floreale) è più spesso visto in stampa.

Per ottenere una tinta, usa il codice esadecimale per HTML, la formulazione RGB per lo schermo o CMYK per la stampa come mostrato: Lavanda (web): # e6e6fa | RGB 230,230,250 | Lavanda floreale CMYK 8/8/0/2: # 9063cd | RGB 144,99,205 | CMYK 52,66,0,0 Il colore Pantone più vicino corrisponde al web lavender è Pantone Solid Coated 7443 C. Il Pantone Match più simile alla lavanda floreale è Pantone Solid Uncoated 266 U.

i termini del web, Indicizzati, interfaccia grafica, interfaccia utente, metodo nielsen, simbolismo colori, Usabilità, user experience, web design

Internet facile: usare il giallo nel web design

Il giallo è per persone felici e per codardi.

Per lo più caldo e accogliente, il giallo di solito funziona meglio come compagno di altri colori.

Banana, cadmio giallo, chartreuse, chiffon, crema, oro, verga d’oro, kaki, limone, giallo dolce, zafferano, topazio e giallo ocra sono tutte sfumature di giallo.

Natura e cultura.

Il giallo è il sole È un colore caldo che, come il rosso, ha un simbolismo conflittuale
Da un lato, denota felicità e gioia, ma d’altra parte il giallo è il colore della vigliaccheria e dell’inganno. Ricorda però anche la malattia, la bandiera gialla sugli antichi velieri segnalava epidemia a bordo

Il giallo è uno dei colori energici e caldi. A causa dell’elevata visibilità del giallo brillante, viene spesso utilizzato per i segnali di pericolo e per segnalare alcuni veicoli di emergenza. Il giallo è allegro.

L’uso di segnali di pericolo crea un’associazione tra giallo e pericolo, sebbene non così forte come il rosso.

Se qualcuno è “giallo”, è un vigliacco, così il giallo può avere un significato negativo in alcune culture.

Il giallo è per il lutto in Egitto, e gli attori nel Medioevo indossavano il giallo per significare i morti. Eppure il giallo rappresenta anche il coraggio in Giappone, i mercanti in India e la pace.

Usare il giallo nel web design

Sebbene possa funzionare come colore primario, il giallo spesso funziona meglio se abbinato come accento ad altri colori. Il giallo è un colore vivace. Usa il giallo brillante per creare eccitazione quando il rosso o l’arancione possono essere troppo forti o troppo scuri.

Usare il giallo per suggerire freschezza e fruttato di agrumi. I gialli dorati possono sostituire l’oro.

Il giallo si accosta bene ad altri colori:

  • Usa il giallo per ravvivare una raffinata palette di blu e grigio
  • Usa il giallo limone con l’arancio per realizzare un tema salutare, estivo, agli agrumi
  • I gialli molto pallidi possono funzionare come neutri insieme a colori più scuri o più ricchi
  • Il giallo e il blu sono una combinazione di contrasto e strabilianti
  • Mescola il giallo con il grigio neutro e il nero per un look high-tech
  • Prova un mix caldo ed eccitante di rosso e giallo
  • Per una tavolozza terrosa, soprattutto per l’autunno, mescola giallo, verde oliva e marrone
  • Mentre gialli e verdi chiari o chiari possono far parte di una tavolozza di colori naturale e fruttata, fai attenzione a non usare colori troppo vicini nel valore o appariranno sbiaditi