Il presente articolo è stato tradotto automaticamente.

Utilizzabilità in pratica

Oltre agli aspetti superficiali

Dr. Carlo Kreitzberg e Ambrose Little

Dr.Charles B. Kreitzberg

Ambrose Little

Stile vende.È vero su software come nel caso su altri prodotti.Una buon progettazione visiva possibile attirare acquirenti e suggerire che un prodotto è interessante, ben thought fuori ed efficace.Naturalmente, un pacchetto abbastanza non garantisce la qualità del contenuto, come well-worn proverbs come “ bellezza è unica interfaccia profondo ” e “ non giudicare un libro dal relativo copertina ” ricordare noi.

Ma è importante di progettazione visiva.Buon progettazione visiva non è Nessun sostitutivo per la costruzione di qualità, ma è un errore per chiudere Progettazione visiva come semplicemente marketing utilissimi.Come minimo dovrebbe essere professionale e attraente.Se si sta producendo un prodotto per i clienti o del pubblico, è possibile che potrebbe essere necessario rivolgersi a una finestra di progettazione visiva per sviluppare un aspetto distintivo.E se si dispone di una famiglia di prodotti, è importante un aspetto comune.

Progettazione visiva è più di decorative; ha un forte effetto sull'esperienza dell'utente.Alcune aree di concentrarsi sulla sono:

• Aspetto  
• Leggibilità
• Individuazione di affordances
• Supporto di comunicazioni
• Emozioni e trust

Aspetto and Feel

Aspetto è il termine utilizzato per descrivere l'impressione generale (personalità) del prodotto.Non è un termine particolarmente ben definito, ma esso ricordare noi che progettazione visiva contribuisce notevolmente al carattere di un prodotto.

L' aspetto di termine include in genere i colori, tipi di carattere, grafica, i logo e personalizzazione.La ritiene è un po' più amorphous e tenta di acquisire la qualità dell'esperienza dell'utente di interagire con il prodotto.Aspetto è stato creato tramite l'interazione di progettazione visiva e altri progettazione elementi quali l'architettura delle informazioni.Idea è interessato da elementi quali animazioni, transizioni e linguaggio utilizzato nell'interfaccia.Aspetto viene spesso descritto utilizzando gli aggettivi e metafore: retro formale, casuale, descrittivo, vivace, aggressivo, laid.Sebbene sia possibile trattare aspetto separatamente, in pratica devono formeranno un intero coerente.

Per facilitare la pensare all'aspetto, si desidera visitare di CSS Zen giardino.Creato da Dave Shea, un progettista Web dal server Vancouver, il giardino Zen CSS è un lavoro collaborativo in cui le finestre di progettazione visiva sviluppare un aspetto di un sito HTML standard.Le regole sono possono modificare uno stile CSS per il foglio e aggiungere elementi grafici, ma non possono apportare modifiche per l'HTML o il contenuto.In modo che in quel senso alcuni l'idea è impostata, ovvero non è possibile modificare la lingua verbale, ma è possibile modificare il linguaggio visivo.

Quando ci si trova il sito, è possibile capovolgere tra le progettazioni.Sono tutti piuttosto buona ma molto diversa nell'aspetto.Come passare dalla progettazione alla progettazione, che è possibile ottenere una buona idea di quanta differenza l'approccio alla progettazione visiva rende.

Si verranno sicuramente preferisce alcuni schemi del giardino Zen CSS ad altri utenti.Scelta di un aspetto è una questione di tuoi gusti e adeguatezza per lo scopo del prodotto.Come con altri aspetti dell'esperienza utente è i tuoi gusti e le aspettative di spettatori, che si consiglia di provare a soddisfare.

Si potrebbe decidere che alcune delle finestre di progettazione che ha contribuito alla CSS Zen Garden sono più incentrate sulla loro espressione self, ovvero immagini, ovvero rispetto sul contenuto del sito.Si tratta di un problema reale.Molte finestre di progettazione visiva sono pertanto incentrate sulla loro ClipArt che sono meno esito positivo nel migliorare la leggibilità, messaggi, affordances o marchio, che sono importanti.Il take-away è che non tutti buon artista è una buona finestra di progettazione visiva per il software.

Potrebbero essere interessati nella presentazione di schemi di framework visiva nel ( di Quince UX Patterns Explorer.Non vi è possibile ottenere informazioni progettazione visiva come può essere utilizzato per stabilire un framework o “ linguaggio di progettazione visiva ” che può essere utilizzato in tutta la soluzione (e oltre che in altri cespiti) in modo che non vi è un framework di progettazione appropriato e coerente.

Leggibilità

Leggibilità è fortemente influenzata da Progettazione visiva.Migliorare la leggibilità, su vasta scala, è la possibilità dell'utente a comprendere ed elaborare il contenuto.Concentrerò principalmente sulla leggibilità del testo, ma occorre considerare tutti i tipi di contenuto che sono di supporto.Quando si tratta di leggibilità, progettazione visiva funziona mano a mano con architettura delle informazioni del prodotto.È importante ricordare che si occupa architettura delle informazioni come le informazioni sono organizzate dal punto di vista semantico in una gerarchia di visual.La finestra di progettazione visiva consente di verificare come viene eseguito il rendering di diversi tipi di informazioni.

Alcuni siti Web che (inavvertitamente) illustrano problemi con la leggibilità sono Signor botti , Bella DeSoto e HavenWorks.I siti sono da Pagine Web che Suck , che non sempre un'origine affidabile, ma un modo per visualizzare i siti che alcune persone prendere in considerazione problematici.Osservando questi siti, considerare che cosa consiste nel creare problemi la leggibilità e del modo in cui rispondono li.

Uno strumento di leggibilità interessante è reperibile in di leggibilità.Questo strumento consente di esplorare tutte le dimensioni dei diversi tipi di carattere e la larghezza delle colonne e, attraverso un bookmarklet, applicare l'aspetto desiderato alle pagine Web non autorizzate.

I tipi di carattere e funzionalità tipografiche può avere un potente effetto sull'aspetto del prodotto.Abbiamo spesso tendono a pensare a tipi di carattere come statici e di utilitarian ma sono in grado di trasferire una grande quantità di impatto emotional.Questo vale la pena visitare webdesigner depot , dove è possibile reperire 18 esempi di tipografia utilizzati con il video per trasmettere messaggi potenti.Mentre non si dispone di molte opportunità di utilizzare questo tipo di funzionalità tipografiche in movimento, si otterrà un senso di potente come uno strumento che può essere.

Dimensione del tipo è uno dei fattori più importanti nel migliorare la leggibilità.Spesso gli sviluppatori (e le finestre di progettazione) sono giovani e non prendere in considerazione il fatto che gli utenti meno recenti sono obiettivi meno accento acuto.Di conseguenza, le dimensioni dei caratteri troppo piccole sono comuni.Scelta di una dimensione di carattere inferiore può essere okay, purché la progettazione supporta ingrandimento tramite il browser (presupponendo che sia disponibile) oppure tramite un'opzione più diretta come vedere su molte notizie e altri siti di informazioni.

Il contrasto tra il tipo di carattere e lo sfondo è anche un elemento molto importante di leggibilità.È presente una tendenza tra alcune finestre di progettazione per utilizzare un tipo di colore grigio anziché nero per il testo normale.Aspetto elegante, ma può essere difficile da leggere.In di Figura 1, confrontare il testo di colore grigio (10pt #AAAAAA) con la versione nero (10pt # 000000).Può risultare efficacia per piccole quantità di testo che si desidera Deaccentua utilizzando grey.Utilizzato in questo modo, grey può aiutare pulito la pagina.Ma utilizzando grey per il contenuto primario rende difficile la lettura del contenuto.

Figura 1 Colore testo e sfondo di contrasto

In di Figura 1, utilizziamo “ lorem ipsum ” testo, che, come è probabilmente noto, viene utilizzato da finestre di progettazione visiva per esplorare il layout e funzionalità tipografiche senza utilizzare il contenuto effettivo.È uno strumento utile a volte semplificare il processo di revisione, come incoraggia persone commentare l'aspetto visivo anziché il contenuto specifico.Si noterà un generatore di utile lorem ipsum in di Ipsum Lorem.Lorem ipsum possono essere utili durante la fase di progettazione, la lettura di testo segnaposto non equivale alla lettura di testo significativo.Per questo motivo, se si dispone dell'accesso al contenuto, si dovrebbe provare prima di finalizzazione di progettazione visiva.

È possibile creare alcuni colori realmente terribili/sfondo del testo in formato HTML e non vi sono esempi di progettazione non realmente valido sul Web.Il W3C ha suggerito un algoritmo per stabilire se due colori contrasto sufficiente a funzionare bene insieme.

Abbiamo creato due esempi in di Figura 1, come pure l'esempio horrible in di Figura 2 utilizzando uno strumento open source poco interessante denominato di Plaything di progettazione.

Nella figura 2 Poor contrasto danni leggibilità

Altri fattori di leggibilità da prendere in considerazione sono:

• La quantità di spazio da inserire tra le righe.Uno spazio troppo piccolo crea un aspetto cramped mentre troppo spazio distruggerà la coesione del paragrafo.Spaziatura a 1,5 potrebbe essere un buon metodo per avviare.
• Intervallo di tempo in cui rendere le righe.Molto lunghe le linee sono difficili da analizzare.Se si utilizza un layout liquido in cui le righe potrebbero diventare molto lunghe su alcuni monitor, puoi si consiglia di limitare la lunghezza della riga a non più di 80 a 100 caratteri, a seconda della dimensione del carattere utilizzato.In molti casi, la larghezza di riga più breve è migliore e (come newspapers long hanno compreso) a più colonne progettazioni realmente possono migliorare la leggibilità quando è presente una grande quantità di testo.

Una risorsa utile tipografia è l'eBook, " di elementi di tipografiche stile collegato al Web ".

Individuazione di Affordances

L'area terzo da prendere in considerazione nella progettazione visiva è semplificando per l'utente per l'individuazione di affordances.Affordances sono indizi che consentono di sapere che è possibile eseguire un'operazione con una cosa simile a un carattere di sottolineatura su un collegamento in modo che l'utente sappia che il testo è selezionabile tramite clic o un pulsante che appare in rilievo, come se può essere premuto.

In generale, un oggetto dell'interfaccia utente ben progettato dovrebbe essere ovvio in modalità di funzionamento.Il motivo per cui sono efficace nel che indica all'utente che può essere stato selezionato l'oggetto 3D e ombreggiature utilizzate per creare l'illusione di profondità è che essi sfruttare una metafora dal mondo reale.È importante ricordare che nella colonna nostro ottobre (” Getting Inside Your Users ’ testina s ”), abbiamo parlato modelli mentali.Di seguito viene riportato un esempio.Gli utenti comprendere la modalità di premere i pulsanti nel mondo reale in modo che il trasferimento di tale conoscenza per una rappresentazione grafica ben progettata di un pulsante.

Utilizzando un cursore a forma di mano su un elemento dello schermo è selezionabile è un altro modo di scoprire un affordance.Utilizzato anche può aiutare pulito una schermata, ma utilizzando affordances solo sono ovvi al momento al passaggio del mouse può creare problemi di utilizzabilità.Può essere una buona idea rendere persone spostare il puntatore del mouse per individuare le operazioni che possono eseguire con un'interfaccia, soprattutto se si tratta di un'azione principale.

Con la maggior parte dei controlli che è utilizzare, non è necessario preoccuparsi troppo come il affordances sono la barra di scorrimento presented–a in genere è piuttosto chiara perché è una convenzione stabilita, ad esempio.Ma se si creano grafici aree sensibili per il controllo di spostamento o altre azioni, è importante per l'utente a capire dove fare clic su.E se gli utenti non ha familiari con alcuni controlli (non vi è tale modello mentale nuovamente) è necessario essere molto deselezionare nella progettazione del loro funzionamento.Di recente in un test di usabilità, abbiamo scoperto che un lotto di utenti non sono stati comprendere come utilizzare un controllo accordion.Riprogettare il controllo risolto il problema.

In breve, la progettazione visiva deve comunicare gli elementi con cui un utente può interagire.La progettazione deve rendere ovvia le azioni che sono possibili e quale sarà il risultato.

Supporto di comunicazione

Molte finestre di progettazione visiva approccio la progettazione di un prodotto mediante la definizione di un linguaggio visivo.Un linguaggio visivo è un insieme di principi di progettazione per assistere nella comunicazione di idee.Esistono diversi aspetti alla creazione di un linguaggio visivo.

Percezioni e associazioni

Un elemento di un linguaggio visivo sfrutta percezione.Elaborazione Visual non è passivo, ovvero semplicemente osservando gli oggetti davanti gli occhi, ma un processo attivo che coinvolgono la selettività e giudizio.Sono stati illustrati alcuni di questi problemi nella colonna ottobre.Lo Studio di percezione è la specializzazione chiamato di Gestalt Psychology, e questo vale la pena per acquisire familiarità con alcuni dei principi percettive, ad esempio chiusura, somiglianza, continuazione, prossimità e nella figura e terreno — vedere di Principi di Gestalt.

Altri elementi di un linguaggio visivo sono integrate nelle associazioni mentale comuni, ad esempio utilizzando curve naturale sensazione di suggerire natura, utilizzando gli angoli del disco rigidi e linee per suggerire macchine, utilizzando disjointedness deliberato di creare una sensazione di disturbance e utilizzando simmetria di creare una sensazione di saldo e harmony.

Altre associazioni possono essere sfruttate includono elementi culturalmente condizionati, ad esempio l'utilizzo di colore rosso per gli errori e dell'arresto e verde per ok/Vai.Tuttavia, è necessario tenere presente che tali associazioni possono avere diversi elementi cross-cultural o contestuali.Ad esempio rosso ha associazioni positive in Cina e nel contesto di un'automobile o dress, suggerisce sexy rosso.

Dato comune come il rosso/verde = connessione/ok problema è che è sorprendentemente comune per trovare i colori utilizzati in modo non intuitivo.Ad esempio, ci ha rilevato un messaggio in Figura 3 in un programma di forum.Abbiamo volutamente effettuata il testo ambiguo in modo che è possibile ottenere un'impressione iniziale basata sull'utilizzo del colore.

Nella figura 3 suggerisce di colore rosso a Problem

Mentre l'utilizzo del colore suggerisce un problema, di Figura 4 Mostra ciò che è effettivamente visualizzato.

Nella figura 4 il colore conflitto con il messaggio

Inoltre, nota che l'intestazione è in un colore più chiaro rispetto al testo, etichette.Revisione del messaggio, modificando il colore della finestra di messaggio e dell'intestazione produce una quantità comunicazione più chiara, come illustrato in di Figure5.

Nella figura 5 verde suggerisce un messaggio positivo

La modifica del colore su verde è una migliore progettazione visiva per questo scopo e contesto.

Architettura delle informazioni

Progettazione visiva consente anche di sottolineare l'architettura dei dati, soprattutto la gerarchia visual.Ad esempio, è quasi sempre far titoli più grande e marcati rispetto al contenuto che un'etichetta.E creazione di gerarchie dei titoli per chiarire la struttura del contenuto.All'interno del testo è utilizzare tali tecniche come grassetto , la sottolineatura , italicizing , rendendo superiore e inferiore per sottolineare o Deaccentua elementi e posizionare il lettore sul loro ruolo.

Colore è un'altra area può essere sfruttata grande effetto, soprattutto quando utilizzato con moderazione.Quince ha un motivo alcuni tonalità occupa limitando la tavolozza dei colori a solo due o così tonalità e quindi variando l'intensità (saturazione) e la luminosità di tali colori per rafforzare il meccanismo di comunicazione visiva .Colore consente inoltre di grande effetto, se l'interfaccia non è già sature con colore realmente disegnare gli elementi importanti, ad esempio le chiamate per azione.

Colore può essere utilizzato anche per inserire gli elementi più importanti in primo piano da de-emphasizing semplicemente gli elementi meno importanti.Si tratta di una situazione in cui utilizzando testo grigia, ad esempio, possibile push stuff meno importanti in background e portare a ciò che ha lasciato in primo piano e il centro.

Nella figura 6 Progettazione Visual Supports Information Architecture

Un'Emozione e attendibilità

Progettazione visiva influisce sulle emozioni e può influire sulla credibilità di un'applicazione o sito e senso di fiducia (o mistrust) che sviluppa l'utente.Si consideri, ad esempio, i due siti nella Figura 7 e Figura 8 , ciascuna con la progettazione visiva stessa contenuta ma diversa.

Nella figura 7 would you considera attendibile il fornitore?

Sarebbe acquistare un TELEVISORE da una risorsa è simile al seguente?  È innately attendibile esso?  La maggior parte di noi derivino tra ciò che sembra essere shady aziende in linea e ci stiamo inclined non considerare attendibile li.Considerare questa progettazione alternativa:

Nella figura 8 stessa struttura di contenuto, diversa Engenders altro trust

Questa progettazione è più professionale, affidabile, credibile e affidabile.È necessario essere molto, molto più probabile che a mano tramite le informazioni relative alla carta di credito a un sito analogo al seguente.E in effetti, si è verificato ricerca specifico in questo aspetto della finestra di progettazione visiva per il progetto Stanford Web credibilità Research .Si consiglia di leggere e seguire le linee guida.Don Norman ha scritto un libro in quest'area denominata Emotional struttura ulteriormente verranno illustrati l'impatto di estetica sull'accettabilità del prodotto.

Impatto significativo

Progettazione visiva è molto più di interfaccia profondo.L'aspetto, la leggibilità e chiarezza di diversi controlli è possibile rendere una notevole differenza nella facilità di utilizzo del prodotto e l'esperienza dell'utente; non è semplicemente occhio bastoncini o gusto personale.

Una buona progettazione visiva consente all'utente di identificare quali elementi dello schermo sono affordances, in modo che influisce direttamente la facilità di interagire con il prodotto.Progettazione visiva supporta anche l'architettura dei dati, rendendo più semplice per l'utente elaborare le informazioni da trasferire.Progettazione visiva possibile evocate emozioni dell'utente, sia tramite fotografie e illustrazioni e leggermente più tramite l'aspetto complessivo.Oltre a emozioni, progettazione visiva consente di creare (o danneggiare) un senso di fiducia.In breve, mentre alcuni sviluppatori chiudere Progettazione visiva come irrilevanti, bastoncini occhio o lipstick, può avere un impatto significativo.

Perché è così potente uno strumento, è importante per gli sviluppatori a pensare di progettazione visiva e istruire su relativi aspetti più funzionali, come abbiamo stati toccati qui.Pochi di noi hanno le competenze necessarie per creare progetti visivi di alta qualità e spesso è consigliabile portare in un professionista.Ma se si esegue questa progettazione visiva se stessi o a lavoro con altri utenti, è importante comprendere le nozioni di base.Un buon nozioni di base è The Elements della struttura Graphic: Generazione circa sette progettare componenti spazio, Unity, architettura di pagina e Type (Allworth Press, 2002), che definisce il layout principi chiave.

Oltre alla lettura sulla struttura, cercare in molti esempi stabiliti di una buona progettazione (ricerca di siti pluripremiato try) come pure progettazioni provenire e interazione utente sono una buona.Analizzarli di capire perché le strutture sono buone.Se si trovano progettazioni sono meno efficienti, pensare per questo motivo deve essere migliorati e in che modo.L'esposizione ulteriori ottenere una buona progettazione, più sarà in grado di riconoscerlo e persino farlo meglio se stessi.Mai potrebbe diventare una finestra di progettazione visiva professionale, ma verrà funzionano meglio con essi.E inevitabilmente, quando è necessario eseguire l'operazione autonomamente, è necessario eseguire un processo migliore.

Progettazione visiva realmente consentono produrre prodotti ottimi creando eccellenza negli elementi sono più visibili per gli utenti e i cointeressati.

Dr. Charles Kreitzberg* è direttore generale di Cognetics corp., che offre consulenza utilizzabilità e utente esperienza servizi di progettazione. È la sua passione creazione le interfacce intuitive che coinvolgere e soddisfano utenti in termini di supportando gli obiettivi aziendali del prodotto. Charles vive in New Jersey centrale, dove ha moonlights come un musicista verrà eseguito.*

Ambrose Little* vive con sua moglie e quattro figli nella centrale New Jersey. Egli è stato progettazione e sviluppo di software per oltre 10 anni ed è applicare essere un relatore di INETA e Microsoft MVP. Ultimamente, egli spostato dalla progettazione tecnica per la progettazione del persone ed è ora una finestra di progettazione di esperienza utente per Infragistics.*