Condividi tramite

Principi dell'interfaccia utente

Questo argomento illustra come implementare principi di progettazione intuitivi dell'interfaccia utente e dell'esperienza utente in applicazioni Windows.

Introduzione

Gli sviluppatori spesso non riescono a prendere in considerazione il punto di vista dell'utente finale. Gli sviluppatori lavorano duramente per rendere l'applicazione funzionante: i clienti si aspettano solo che funzionino e la loro percezione dei centri software intorno a questo requisito.Developers work hard to make the application work— customers just expect it to work and their perception of the software center around this requisito. Questo vale soprattutto se si sviluppa software di vendita al dettaglio o qualcosa che verrà usato da persone non tecniche. Gli sviluppatori devono essere consapevoli delle esigenze dell'utente finale durante l'intero processo di progettazione del software.

Un'applicazione software deve essere il più semplice possibile per spostarsi e usarla. Con la quantità di software da creare, una stima di 4 su 10 applicazioni software ha un'interfaccia utente davvero eccezionale che l'utente finale ama veramente ed è immediatamente confortevole usando.

Per le aziende viene creata una grande quantità di software a uso interno. Sia che venga sviluppato internamente, sia sotto la cura di un consulente, spesso un minimo di tempo, sforzo o denaro viene investito nella creazione di un'interfaccia utente migliore. Il ruolo "designer" è raro nel ciclo di sviluppo, soprattutto nel mondo delle applicazioni Windows.

Esistono alcune regole di base da seguire per avere un aspetto molto più bello e una migliore interfaccia utente funzionante per l'applicazione. Non richiede troppo investimento di tempo o denaro da parte tua, e aggiunge un buon ritorno sugli investimenti.

Prima di procedere, è possibile distinguere tra l'interfaccia utente e l'esperienza utente, almeno per l'ambito di questo articolo. L'interfaccia utente, o l'interfaccia utente, fa riferimento agli oggetti visivi e ai controlli dell'applicazione, mentre l'esperienza utente o l'esperienza utente includono sia l'interfaccia utente che il comportamento dell'applicazione correlata all'interfaccia utente, nonché la "sensazione" che l'utente ottiene dall'app. Non si tratta solo di progettare un'interfaccia utente dall'aspetto ottimale, ma anche di assicurarsi che funzioni bene.

Qui verranno illustrati 20 punti di progettazione dell'esperienza utente che è possibile integrare facilmente nella fase di progettazione dell'applicazione. Il risultato sarà più ricco di applicazioni con funzionalità più intuitive, ovvero un'esperienza utente umana. Come tutti sappiamo, la generazione di applicazioni Windows Vista dovrà avere un aspetto e un comportamento diverso. Questo argomento consente di prepararsi per le applicazioni future, offrendo agli utenti attuali un assaggio del futuro.

Le sezioni seguenti illustrano le nozioni di base della progettazione corretta dell'interfaccia utente.

Principi di base dell'interfaccia utente appropriata

Un'esperienza utente professionale che sembra dipende da questi quattro fattori:

  • Spaziatura e posizionamento
  • Dimensione
  • Raggruppamento
  • Intuitività

Con le versioni di Microsoft Visual Studio precedenti alla 8.0, la spaziatura e il ridimensionamento erano non ottimali. Una griglia 4x4 o 8x8 non funziona sempre. Con l'inclusione di SnapLines, il processo è stato notevolmente semplificato. L'allineamento di un'etichetta con una casella di testo o, ancora peggio, l'allineamento di più etichette con le caselle di testo corrispondenti era estremamente difficile nelle versioni precedenti di Visual Studio. SnapLines hanno notevolmente semplificato questo processo.

Le sezioni seguenti descrivono quattro degli aspetti più importanti della progettazione dell'esperienza utente professionale.

Spaziatura e posizionamento

La spaziatura tra due controlli è importante. La schermata seguente illustra un modulo di immissione di informazioni utente non progettato correttamente: le prime due caselle di testo sono troppo vicine, l'elenco sotto di essi è troppo lontano e c'è un sacco di spazio inutilizzato nel modulo.

screenshot di una forma mal progettata.

Nella schermata seguente è possibile visualizzare una finestra di dialogo più professionale con spaziatura appropriata e controlli di dimensioni appropriate. Si tratta della stessa forma dell'immagine precedente, ma è stata modificata per usare la spaziatura consigliata da SnapLines. È sempre consigliabile allineare un'etichetta alla linea di base del testo della casella di testo o di un altro controllo accanto, anziché al bordo inferiore effettivo del controllo. Le linee di allineamento trasformano un colore diverso quando viene raggiunto l'allineamento, in genere solo pochi pixel sopra il bordo inferiore.

screenshot di una forma più ben progettata.

Anche se non esistono regole esatte per la spaziatura, le linee di allineamento forniscono linee guida estremamente utili per la spaziatura corretta. Altri strumenti che consentono di mantenere una spaziatura corretta sono i controlli Layout nel gruppo Casella degli strumenti Contenitori. TableLayoutPanel è molto utile anche per la creazione di finestre di dialogo di stile modulo di immissione.

Dimensione

Le stesse considerazioni si applicano alle dimensioni. Quando si trascina un pulsante dalla casella degli strumenti nel form, ha l'altezza e la larghezza perfette. La larghezza massima consigliata (barring any seriamente importante motivi) consiste nel raddoppiare la larghezza originale.

Se si esamina la finestra Esegui nel menu Start o nella finestra di dialogo Proprietà di qualsiasi oggetto esplora risorse, le dimensioni del pulsante sono "a destra". Se si dispone di una funzione molto importante che è necessario che l'utente finale noti senza errori, esistono altri metodi rispetto all'uso di un pulsante grande o colori non standard (più avanti).

Nell'immagine seguente è possibile visualizzare tre pulsanti. Il primo pulsante è la dimensione più consigliata ed è la dimensione creata per impostazione predefinita quando viene trascinato (o fatto doppio clic) dalla casella degli strumenti. A volte il testo aggiuntivo richiede di ingrandire il pulsante. Il secondo pulsante mostra dimensioni elevate ma accettabili. Non creerebbe un casino per la disposizione di altri controlli. Il terzo pulsante, tuttavia, è una dimensione completamente inaccettabile. Si può notare che anche leggermente distorta le bitmap del tema usate da Windows per disegnare controlli a tema. Sarà anche difficile allineare gli altri controlli in modo intuitivo.

immagine di tre pulsanti, aumentando le dimensioni da sinistra a destra.

Raggruppamento

In genere, un'applicazione contiene molti controlli. Solo con un raggruppamento corretto e intuitivo è possibile semplificare l'uso di tutti questi controlli. Il raggruppamento basato su funzioni o categorizzato viene eseguito in modo ottimale dai controlli Tab. Ad esempio, "Account", "Report", "Dipendenti" e "Progetti" sono candidati perfetti per le schede in una tipica applicazione aziendale. Il raggruppamento di elementi di pari livello, ovvero i controlli che contribuiscono allo stesso risultato finale, vengono eseguiti in modo ottimale dai controlli Group. L'uso di pannelli con bordi per questo raggruppamento non è consigliato. I controlli di gruppo consentono di risparmiare il peso aggiuntivo di un controllo etichetta, soprattutto se i controlli secondari sono autoesplicativi.

I controlli di gruppo all'interno dei controlli Gruppo non sono consigliati a meno che non siano presenti più di 2 o 3 di essi all'interno di un controllo Gruppo di grandi dimensioni.

Intuitività

Questo è l'aspetto più importante di un'esperienza utente ottimale. L'esperienza utente intuitiva riduce la necessità di spiegazioni. L'utente sa solo cosa fanno i controlli.

Un argomento importante nella progettazione intuitiva è la codifica a colori. Un buon esempio è presentato in Windows XP che presenta nuovi pulsanti soft-square per funzioni come lo spostamento in applicazioni a tema, le finestre di dialogo Disconnetti e Disattiva computer e altri.

La colorazione di questi controlli è stata determinata in base alla gravità del risultato di tale pulsante premuto. La navigazione è verde, molto simile a un semaforo "Vai". L'arresto, che provocherebbe una potenziale perdita di lavoro, è rosso colorato come un segnale di avviso. I pulsanti semicritici, ad esempio Disconnessione o Ibernazione, sono gialli. I pulsanti neutri che non hanno alcun effetto critico sui processi di lavoro dell'utente, ad esempio la Guida, sono un blu morbido. Quando si crea un'interfaccia utente personalizzata, questi aspetti di colore devono essere tenuti a mente.

Un ottimo esempio di riconoscimento dei contenuti in base ai colori è Microsoft Office OneNote. Le schede dell'applicazione possono essere impostate su colori diversi, pur guardando essenzialmente come una parte appropriata della progettazione generale dello stile di Windows XP.

Un altro aspetto importante è il testo nelle applicazioni. Recentemente, ci sono stati vari sforzi per semplificare il linguaggio usato per le istruzioni scritte nel software Windows. L'utilizzo del testo all'interno del software verrà discusso in un secondo momento, ma si prega di notare il seguente piccolo ma importante dettaglio.

MSN Messenger aveva una casella di controllo nella finestra di dialogo Opzioni contrassegnata come "Condividi funzionalità webcam". Gli sviluppatori e le persone tech-friendly sanno cosa significa, ma un utente principiante potrebbe pensare che si potrebbe consentire a un altro utente sull'altra estremità della chat di usare anche la web cam. In una versione recente, lo hanno modificato in "My Webcam: Allow others to see that I have a webcam". Questo è perfetto per il pubblico di destinazione che potrebbe non avere conoscenze tecniche e vengono usate per linguaggio semplice.

Anche se il linguaggio più semplice semplifica la comprensione, c'è anche un vantaggio aggiunto. Gli studi scientifici mostrano che la nostra mente funziona più facilmente con un linguaggio più semplice quando si cerca di capire qualcosa di nuovo. Spesso, il nostro cervello elabora parole come "it", "per", "che", e altre parole comuni così rapidamente e senza sforzo che più "larghezza di banda" è allocata per comprendere le parole che si distinguono, come "Webcam" o "Altri", nell'esempio precedente.

I titoli di Message Box, le didascalie di GroupBox e altri blocchi di testo di questo tipo semplificano la comunicazione della funzione di un gruppo di controlli all'utente finale con poche parole.

L'intuitività nasce anche dalla familiarità. Ad esempio, la posizione dei pulsanti OK e Annulla è così uniforme e ben posizionata nelle nostre menti che se una finestra di dialogo contiene questi pulsanti in una sequenza inversa (Annulla, quindi OK; invece di OK, quindi Annulla) - è sufficiente premere Annulla invece. Dopo aver usato uno standard specifico per le operazioni, ad esempio applicazioni basate su Windows, per più di un anno, le abitudini si sviluppano. Seguendo gli standard di settore (tuttavia non registrati, potrebbero essere) il software risulta più facile da usare.

In una delle prime build di anteprima di Windows Vista, i pulsanti Riduci a icona, Ingrandisci e Chiudi di qualsiasi finestra sono diventati diversi. Nelle versioni precedenti di Windows (in particolare quando si usa un singolo monitor), si sviluppa un'abitudine di spostare il cursore nell'angolo in alto a destra dello schermo e facendo clic. Ciò ha sempre comportato la chiusura della finestra. Ora in questa particolare build di Windows Vista, c'erano circa 8 pixel di spazio tra il pulsante Chiudi e il bordo più a destra della finestra. Lo spazio aggiuntivo lo ha fatto sembrare fresco (e probabilmente era necessario per l'animazione cool alone il pulsante sportato), ma era fastidioso perché non consentiva agli utenti di chiudere le finestre aperte facilmente. La ricodizione della tua mente può essere dura. Fortunatamente, nella build seguente questo problema è stato risolto. Ora, c'è ancora spazio tra il bordo della finestra e il pulsante di chiusura, ma facendo clic su tale spazio anche la finestra viene chiusa.

Un fattore molto importante della progettazione intuitiva è la quantità di "larghezza di banda mentale", ovvero la quantità di tempo che potrebbe richiedere alla nostra mente di comprendere qualcosa, viene usata. Minore è l'utilizzo della "larghezza di banda", migliore è l'esperienza utente.

Si tratta di piccole cose che contribuiscono all'"esperienza" dell'uso di un'applicazione software. Gli esempi seguenti forniscono suggerimenti per migliorare le applicazioni con suggerimenti e consigli reali.

20 Suggerimenti per un'esperienza utente migliore e funzionale

L'obiettivo di un'esperienza utente migliore è avere un'interfaccia utente più semplice, più semplice e funzionale che abbia anche un aspetto ottimale. Questi suggerimenti ti aiuteranno a modellare l'interfaccia utente in modo che sia più efficace.

Usare gli standard

Gli standard stabiliti di qualsiasi ambiente software, indipendentemente dal livello del sistema operativo, dal livello del marchio o dall'applicazione, sono molto importanti. Oltre alla personalizzazione, gli standard fungono da schema proverbiale nella mente dell'utente. Quando l'utente trascorre lunghi periodi di tempo lavorando con un'applicazione software, aumenta automaticamente la produttività a causa della crescente familiarità.

Prima di discutere gli standard, esaminiamo prima di tutto cosa sono esattamente questi standard. Gli standard includono tutto il layout dei controlli in modo particolare nelle finestre di dialogo, ad esempio i pulsanti OK e Annulla , la forma dell'interfaccia utente, angoli arrotondati della finestra come nei dialoghi di Windows XP, stili di icone, stili di qualsiasi altra grafica, comportamento interattivo dell'applicazione e simili.

Se l'applicazione rientra in una nicchia specifica, può essere preferibile seguire un set diverso di standard. Ad esempio, se l'applicazione supporta, l'applicazione o un componente aggiuntivo per Office OneNote 2003, è consigliabile seguire gli stili degli standard di interfaccia utente e interattività di Office e OneNote stesso, in particolare. Ciò include l'uso delle barre dei comandi di tipo Office invece delle barre degli strumenti standard e di altri elementi, sia visivi che comportamentali. Se l'applicazione deve far parte della categoria .NET di Microsoft Visual Studio, è disponibile un set separato di standard. Infatti, per tali applicazioni aggiuntive o di supporto, aziende come Microsoft rilasciano linee guida scritte. Si noti anche che a volte i concetti grafici e di progettazione sono proprietà intellettuali protette. Controllare sempre la documentazione appropriata per assicurarsi di avere la licenza per creare tali progetti.

Un terzo esempio di standard sarebbe l'ambiente Tablet PC. Questi standard superano i limiti tra le linee guida del sistema operativo e le linee guida dell'applicazione. La documentazione di Tablet PC SDK contiene alcune informazioni molto utili nell'argomento "Pianificazione dell'applicazione". A differenza delle linee guida diOffice 2003 o Visual Studio, queste raccomandazioni di progettazione influiscono direttamente sul modo in cui l'utente interagirà con l'applicazione e su come dovrebbe comportarsi a sua volta. Ad esempio, se sono presenti finestre di ancoraggio nell'applicazione, la documentazione consiglia di assicurarsi che possa rilevare quando viene modificato l'orientamento dello schermo e che le finestre di ancoraggio si riorganizzano correttamente in un orientamento verticale o orizzontale in base alle esigenze. Anche se non si progetta l'applicazione in modo che sia specifica per tablet, è consigliabile seguire queste linee guida.

Con l'aumento dei client intelligenti, le applicazioni stanno ora superando i limiti tra hardware diverso, pc normali, PC tablet, dispositivi mobili o Ultra, PC Media Center e così via. Ogni situazione richiede un set di standard diverso (o aggiuntivo) da seguire.

Quando le applicazioni condividono gli standard a livello di sistema operativo o a livello di applicazione, gli utenti si sentono più a casa con il software, che semplifica l'apprendimento e l'uso. Questo risultato è un aumento diretto della produttività. Gli utenti vogliono essere in grado di diventare produttivi con il nuovo software il più rapidamente possibile.

Attirare l'attenzione su pulsanti importanti

A volte devi indirizzare l'utente ai pulsanti più importanti anche quando hai quattro o cinque altri pulsanti che si trovano intorno ad esso. Se si sperimentano le dimensioni, il colore o il tipo di carattere, è consigliabile non rispettare gli standard. È invece possibile usare un paio di semplici trucchi per eseguire questa operazione.

Il primo consiste nel convertire gli altri pulsanti non critici in LinkLabels, come illustrato nell'immagine seguente. In questo modo, l'utente sa che questi collegamenti eseguiranno un'attività, ma la loro attenzione andrà prima al pulsante che si distingue, senza interrompere le linee guida di progettazione standard.

immagine di tre pulsanti convertiti in linklabels.

Il secondo consiste nell'inserire il pulsante critico prima in linea, a sinistra per i layout orizzontali, come illustrato nell'immagine seguente o in alto per i layout verticali. Si noti che questo può cambiare a seconda delle impostazioni cultura dell'utente di destinazione: è possibile fare meglio se si posiziona il pulsante in questione all'estrema destra se l'applicazione è una lingua scritta da destra a sinistra.

immagine di tre pulsanti in cui il pulsante critico è all'estrema sinistra in un layout orizzontale.

L'opzione consigliata consiste nell'impostare per ricevere lo stato attivo per impostazione predefinita. Ad esempio, in una finestra di dialogo di conferma dell'eliminazione, l'opzione No deve essere evidenziata, in quanto impedisce all'utente di eliminare accidentalmente un elemento.

Semplificare il riconoscimento con le icone

Icone, in particolare le icone di Windows XP e Office 2003 e le bitmap della barra degli strumenti, consentono di velocizzare la conoscenza dell'interfaccia utente e l'attività che l'utente deve eseguire.

Ad esempio, quando viene visualizzata l'icona esclamativo più spesso visualizzata nella finestra di messaggio, si diventa immediatamente consapevoli del livello di rischio associato ai controlli accanto a tale icona. Analogamente, quando l'applicazione inserisce un sacco di controlli, indipendentemente dalla corretta disposizione, può essere scoraggiante trovare il set di controlli che si sta cercando.

In Windows XP Service Pack 2 viene aggiunta una scheda aggiornata all'applet del pannello di controllo Proprietà di sistema denominato "Aggiornamenti automatici". Sono disponibili quattro opzioni: scaricare automaticamente gli aggiornamenti, scaricare gli aggiornamenti, ma consentire all'utente di decidere quando installarli, informare l'utente se gli aggiornamenti sono disponibili, ma non avviare il download e disabilitare completamente gli aggiornamenti automatici.

Un nuovo utente del PC potrebbe non essere a conoscenza di ciò che questi aggiornamenti sono e potrebbe non sapere quale opzione sarebbe meglio scegliere. Quindi, Microsoft ha messo un'icona di scudo verde con un segno di spunta grande accanto alla più consigliata che indica un'opzione "sicura" e un'icona di scudo rosso con un grande "x" su di esso accanto a quello che sarebbe potenzialmente dannoso per l'utente. Ciò è molto utile in situazioni critiche, soprattutto quando l'utente non ha tempo per leggere troppo testo.

Nella stessa applet Proprietà di sistema, ogni scheda include più GroupBox con controlli diversi per attività diverse. Un elemento grafico relativo viene posizionato accanto a ogni gruppo che indica facilmente l'attività del gruppo di controlli. Questo tipo di codice grafico è simile alla codifica a colori nei file fisici o nei parcheggi. Questo funziona anche sullo stesso principio di avere almeno alcuni oggetti visivi in un articolo di una rivista, mantiene l'interesse del lettore.

Anche la scelta dell'icona corretta è importante. Microsoft offre molti elementi grafici standard come parte di Visual Studio 2005. Sarebbe la scelta migliore. Se si creano icone personalizzate, è consigliabile seguire gli standard a livello di sistema operativo o a livello di applicazione per questi elementi grafici, come indicato nella sezione Use Standards precedente.

Le linee guida per l'interazione dell'esperienza utente di Windows contengono una guida molto utile per la creazione di icone di stile di Windows.

Semplificare il riconoscimento con le intestazioni

Le intestazioni sono il modo perfetto per spiegare l'intero dialogo in una singola frase (e facoltativamente un elemento grafico). In alcuni casi, le intestazioni possono anche aiutarti a gestire gli spostamenti e i comandi all'interno di essi. Le intestazioni funzionano in modo più efficace delle normali etichette di descrizione perché sono la prima cosa che un utente vede quando viene visualizzata la finestra di dialogo.

Le procedure guidate di Windows Installer sono forse le intestazioni più popolari: un'icona semplice all'estrema destra; un'etichetta del titolo che descrive la finestra di dialogo (ad esempio, Seleziona cartella di installazione); e un'intestazione secondaria che descrive lo scopo della finestra di dialogo (ad esempio, Selezionare la cartella in cui verranno installati i file software).

Si supponga di avere una tipica applicazione aziendale con una sezione account. Seguendo il paradigma di progettazione sostenuto da Windows Vista, è possibile fornire informazioni cruciali e comandi correlati nell'intestazione (o piè di pagina, se lo scenario lo chiama) stesso. L'utente ha aperto il file dell'account per "Big Company" e l'intestazione sarà simile a quella mostrata nella schermata seguente.

screenshot di una finestra di dialogo contenente un piè di pagina dettagliato.

La schermata seguente mostra un esempio di intestazione dettagliata in una finestra di dialogo.

screenshot di una finestra di dialogo contenente un'intestazione dettagliata.

Analogamente, è possibile evitare di dover aggiungere riquadri attività di stile Windows XP, soprattutto quando si dispone di pochi comandi, che potrebbero sprecare molto spazio verticale, spostando questi comandi nell'intestazione.

Quando si progettano intestazioni, tenere presenti alcuni aspetti:

  • Assicurarsi che il colore di sfondo sia diverso dal colore di sfondo della finestra di dialogo. Più spesso, un'intestazione bianca su un colore del viso di controllo intrinseco Windows standard eseguirà. Ma se vuoi davvero assicurarti che nessun tema speciale o colori personalizzati disordini l'intestazione, disegnare un LinearGradient usando Color.FromKnownColor con i colori ControlLight e ControlDark.
  • Se possibile, mantenere l'altezza dell'intestazione inferiore a 150 pixel. In genere un'altezza di 100 o 120 farà. Come regola generale, assicurarsi che sia inferiore a 1/4 dell'altezza dell'intero modulo.
  • Se si desidera aggiungere la modifica sul posto per le informazioni visualizzate nell'intestazione precedente, sostituire dinamicamente LinkLabel con una casella di testo e scambiarle di nuovo dopo aver completato la modifica.
  • Se hai un'etichetta del titolo con un tipo di carattere superiore a 10 pt, usa Arial o Franklin Gothic Medium. MS Sans Serif sembrerà troppo frastagliato e non professionale. Franklin Gothic Medium è la raccomandazione nella documentazione delle linee guida per la progettazione di Windows XP. Per le applicazioni destinate a Windows Vista, usa il tipo di carattere segoe ui che rappresenta il tipo di carattere predefinito del sistema.

Usare finestre di messaggio personalizzate

Le opzioni disponibili nella finestra di messaggio standard di Windows sono molto limitate. Quando è necessario porre all'utente una domanda a cui non è possibile rispondere con un semplice sì/no o OK/cancel, diventa complicato.

Le applicazioni Windows stanno diventando ora più semplici da usare a causa del volume elevato di utenti non tecnici. A volte, può essere molto più semplice fornire pulsanti con testi più descrittivi e anche alcuni controlli aggiuntivi, ad esempio LinkLabels, per semplificare l'esecuzione dell'attività.

Microsoft .NET Framework semplifica l'implementazione di dialoghi personalizzati. Semplicemente assegnando un paio di proprietà nel modulo di dialogo personalizzato o con una singola riga di codice, il modulo può funzionare esattamente come una finestra di messaggio standard. In un evento button-click impostare la proprietà DialogResult della finestra di dialogo su DialogResult.Ok o DialogResult.Cancel. Utilizzare il metodo ShowDialog([OwnerForm]) dal form padre. Questo metodo restituisce il valore DialogResult .

È possibile usare tutti i membri DialogResult . Queste stesse opzioni vengono usate dal metodo Standard MessageBox.Show .

In alternativa, è sufficiente impostare la proprietà AcceptButton del dialogo su btnOK e la proprietà CancelButton su btnCancel. Verrà eseguito automaticamente il mapping dei tasti Enter e ESC ai rispettivi eventi Click dei pulsanti btnOK e btnCancel .

Ecco alcuni suggerimenti per personalizzare i dialoghi:

  • Per argomenti complessi, fornire collegamenti alla Guida locale o online con un'etichetta LinkLabel che indica "Altre informazioni" sotto l'etichetta di testo appropriata.
  • Anziché i pulsanti Sì/No/Annulla, usare testi che indicano chiaramente il risultato del clic sul pulsante, ad esempio "Salva file e esci", "Esci senza salvare" e "Non uscire". Tuttavia, attenersi allo standard Sì/No, /Annulla e tali pulsanti standard quando possibile. La familiarità rende la produttività ottimale.
  • Mantenere 50 pixel di spazio margine sul lato sinistro (o destro a seconda delle impostazioni cultura di destinazione) e aggiungere un'icona che rappresenta lo scenario per la finestra di dialogo. Se si tratta di una finestra di dialogo di informazioni, è possibile usare l'icona "i" usata dalle finestre di messaggio standard; se si tratta di una finestra di dialogo di sicurezza, è possibile usare un'icona di blocco o un'icona a forma di tasto. Visual Studio 2005 viene fornito con una grafica di alta qualità.
  • Assicurarsi sempre di fornire uno spostamento da tastiera appropriato per questi pulsanti: gli utenti usano i tasti di scelta rapida per le finestre di messaggio (ad esempio, O per Ok, Y per Sì, C per Annulla e così via) pesantemente. Sicuramente lo troveranno fastidioso se il dialogo personalizzato non li usasse.

Includi comandi alternativi

Due fattori importanti determinano la necessità di metodi di input alternativi: frustrazione e pigrizia. La frustrazione è un problema troppo spesso per gli utenti di computer. Quando sei frustrato vuoi che l'attività venga eseguita rapidamente. Un clic aggiuntivo o un'attesa aggiuntiva di pochi secondi davvero infuria una persona sotto stress- sai com'è, siamo stati tutti lì. La pigrizia spesso ti invita a completare l'attività con solo la tastiera o il mouse, a qualunque cosa usi al momento. Tuttavia, oltre a questi due fattori, la presenza di metodi di input alternativi semplifica l'esecuzione delle attività da parte dell'utente.

Ad esempio, se si dispone di una casella di riepilogo con due pulsanti: "Aggiungi" e "Rimuovi" su entrambi i lati, è necessario aggiungere un menu di scelta rapida per tale casella di riepilogo con comandi di menu analoghi a tali pulsanti. In questo modo l'utente può scegliere il metodo più adatto. Gli utenti principianti, come stato Linee guida per l'esperienza utente di Windows Vista, usano molto menu di scelta rapida e si aspettano che siano ovunque facciano clic con il pulsante destro del mouse.

Analogamente, vengono usati controlli visivi per l'input di testo o numerico. Ad esempio, i dispositivi di scorrimento vengono usati per specificare numeri interi e i controlli Calendario vengono usati per l'input della data. A volte può risultare più comodo solo l'input digitando. Spesso può fare la differenza per l'utente se si aggiunge un controllo Numeric Up-Down collegato a un dispositivo di scorrimento o si usa un controllo DateTimePicker anziché il controllo Calendario.

Come gestire le azioni critiche

Quando si esegue una funzione critica e irreversibile, è in genere consigliabile fare in modo che venga visualizzata una finestra di messaggio per confermare l'azione. Prendiamoci un po' di cacca. Nella schermata seguente è possibile visualizzare una finestra di messaggio personalizzata simile, ma con un vantaggio aggiunto, un timer visualizzato visivamente con l'aiuto di un indicatore di stato.

screenshot di una finestra di dialogo azione critica.

Esistono alcune varianti specifiche dello scenario che è possibile usare. Se l'azione da intraprendere è molto critica (dal sovraccarico di una centrale nucleare all'eliminazione definitiva dei file), l'azione predefinita dopo che il timer si esaurisce dovrebbe essere annullata. La finestra di dialogo non deve andare via, ma piuttosto l'etichetta di testo cambia per indicare che l'azione è stata annullata. L'utente può scegliere di confermare il comando o l'annullamento.

Assicurarsi sempre che i pulsanti che eseguono operazioni critiche siano chiaramente contrassegnati, ovvero usare sempre testo non crittografato che descriva accuratamente l'azione. Se l'azione è l'eliminazione dei file, non scrivere "Rimuovi file dal repository"; scrivere "Elimina file dal repository". Quando si lavora con gli elenchi di file, se un comando di menu Elimina elimina i file selezionati dal disco rigido stesso (invece di rimuovere solo dall'elenco di file), è necessario sottolineare correttamente la natura critica di questo e sottolineare in modo esplicito che l'azione eliminerà definitivamente i file.

Qualcuno una volta disse: "Sei buono come il tuo peggior lavoro". Lo stesso vale per le applicazioni software. Un'unica esperienza negativa con l'app può dare un'impressione negativa all'utente. Per assicurarsi che ciò non accada, una cosa che è possibile fare è assicurarsi che se l'applicazione si arresta in modo anomalo, si arresta normalmente. Se è possibile aggiungere il ripristino dei dati o consentire all'utente di provare a salvare una copia di tali dati, può essere un vantaggio importante. L'utente deve ricevere una notifica corretta se l'applicazione si arresta in modo anomalo. Un debugger JIT o una finestra di dialogo di errore critico non è una buona cosa. Mentre si parla di come gestire gli arresti anomali va oltre l'ambito di questo articolo, consiglio che una semplice finestra di dialogo che si scusa con l'utente e lo informa della situazione (e possibilmente con un collegamento a altre informazioni su come recuperare da questo arresto anomalo) sarebbe molto utile per l'utente.

Se vuoi fare un ulteriore passo avanti, puoi fare quello che fa una delle mie applicazioni di progettazione grafica preferita. Se si arresta in modo anomalo, verrà visualizzata una finestra di dialogo di ripristino che consente di salvare una copia separata del file su cui si sta lavorando e quindi fornirebbe una finestra di dialogo di feedback in cui è possibile immettere informazioni sull'arresto anomalo (informazioni personali facoltative, naturalmente) e inviarlo agli autori.

Pulsanti di opzione o combobox?

A prima vista, il metodo per effettuare una selezione uno-di-molti non sembra così difficile o importante. In alcuni casi può essere, soprattutto se lo scenario è un'applicazione usata per il lavoro dipendente dal tempo.

Diamo un'occhiata a un esempio di vita reale. Microsoft ha rilasciato di recente una versione di anteprima di un'applicazione grafica, Expression Graphics Designer (in precedenza denominata "Acrilico"). Ho avuto circa 20 oggetti grafici a cui ho dovuto assegnare una determinata proprietà separatamente in questa applicazione. Era un processo oscuro. A tale scopo, ho dovuto selezionare l'oggetto, fare clic sul pulsante per visualizzare la finestra delle impostazioni e impostare le opzioni. In una di queste opzioni è necessario selezionare due opzioni da un controllo ComboBox, come si può vedere nella schermata seguente.

screenshot della finestra di dialogo della trama di frange per la finestra di progettazione grafica delle espressioni.

Quando è necessario selezionare l'elenco ComboBox e selezionare il secondo elemento (solo 2 elementi) può essere davvero fastidioso. Ciò che in genere non ci rendiamo conto è il tempo necessario per la visualizzazione dell'elenco a discesa. Può sprecare molto tempo e può essere frustrante. Questo problema può essere risolto facilmente inserendo un GroupBox con due pulsanti di opzione, specialmente quando c'è così tanto spazio disponibile. Sono stati riscontrati problemi simili nelle applicazioni, ad esempio IlDrawDRAW, Microsoft Access e altri.

Oltre a sprecare tempo a causa dell'animazione a discesa, sprecare anche la nostra "larghezza di banda mentale". Con due pulsanti di opzione "sempre visibili", la nostra mente conoscerebbe in modo secondario la posizione del cursore da fare clic. Con ComboBox verrà elaborato solo dopo che l'elenco è stato disegnato. Anche se può sembrare troppo importante, in realtà è molto importante.

A volte è meglio usare RadioButtons, soprattutto se si dispone di 4 scelte o meno.

Non interrompere mai l'utente!

A corto di mettere una pistola in testa, questa è la cosa più distruttiva che uno sviluppatore può fare per gli utenti. Quando l'applicazione, inutilmente o in altro modo, interrompe l'utente mentre sta lavorando su un'altra applicazione con una finestra di messaggio o un flash della barra delle applicazioni, si ottengono punti negativi dall'utente.

I flash della barra delle applicazioni possono essere utili, naturalmente, ma devono essere chiamati solo quando il processo dell'applicazione richiede l'input dell'utente per continuare o se si ha qualcosa di fondamentale da trasmettere all'utente. Se l'utente ha mantenuto la barra delle applicazioni su Nascondi automaticamente, un pulsante della barra delle applicazioni lampeggiante può impedire all'utente di accedere alla barra di stato o ad altri controlli con ancoraggio basso come la barra delle applicazioni sarebbe sopra di esso e non si nasconderà di nuovo finché l'utente non ha fatto clic sul pulsante lampeggiante.

screenshot di una finestra di tipo avviso popup.

Le finestre "Toast" (vedere la figura 10), rese famose dai client di messaggistica istantanea come MSN Messenger, sono una soluzione ideale per informare l'utente di qualcosa senza fastidioso o disturbare il suo flusso di lavoro. C'è un ottimo articolo di Bill Wagner sulla creazione di finestre toast. È un buon criterio (e modi) per non disturbare gli avvisi popup di altre applicazioni. L'ostruzione di tali finestre può essere fastidiosa e improduttiva. Una soluzione consiste nell'usare il Mutex ToastSemaphore fornito dal sistema operativo per evitare collisioni di tipo avviso popup.

A volte potrebbe essere necessario visualizzare più elementi dall'avviso popup. Spuntare 3 o più toast non sarebbe davvero consigliabile. Invece, andare in bicicletta per ogni spuntando/sbiadire un toast dopo l'altro sarebbe meglio. Microsoft Outlook implementa una soluzione simile quando si comunica all'utente di messaggi di posta elettronica in arrivo.

Specificare lo stato di avanzamento

Spesso sono presenti attività che richiedono l'attesa dell'utente. Naturalmente, questa è una delle cose che l'utente semplicemente odia fare. Ma peggio è quando sono in attesa senza sapere cosa sta succedendo. A volte l'applicazione potrebbe dover connettersi a un servizio Web o a un computer remoto o forse sta elaborando grandi blocchi di dati, qualunque sia il motivo, l'utente deve essere a conoscenza o almeno vagamente a conoscenza di ciò che accade sotto le quinte. Esistono diversi metodi per eseguire questa operazione, in base alla situazione.

Se ci si connette a un oggetto lontano, ad esempio un servizio Web o un elemento posizionato in una rete o in un server Internet, è consigliabile visualizzare una finestra di dialogo di stato semplice (vedere l'immagine seguente) o una barra di stato ospitata nella barra di stato. Un'etichetta associata deve descrivere lo stato corrente del processo. Ad esempio, se ci si connette a un servizio Web per elaborare alcuni dati, è sufficiente dire "Connessione al servizio Web... " o "Attendere, elaborare... " Se questo processo è sincrono, è consigliabile disabilitare tutti i controlli a cui l'utente può accedere fino al completamento del processo o semplicemente visualizzare lo stato di avanzamento come finestra di dialogo modale.

screenshot di una finestra di dialogo indicatore di stato.

È consigliabile impostare lo stile della barra di stato su Modalità di avanzamento se si utilizza un indicatore di stato e il tempo di elaborazione è sconosciuto o se non si dispone di un valore massimo.

Un altro metodo che sta diventando popolare è una finestra fissa di tipo "avviso popup" che visualizza lo stato di avanzamento. Microsoft AntiSpyware downloader/updater o gli avvisi popup di scansione della posta elettronica Norton AntiVirus sono esempi validi di questo. Naturalmente, questo deve essere usato solo per i processi asincroni. In caso contrario, l'utente potrebbe sentirsi sconcertato. Tali finestre sono meglio usate per l'elaborazione in background, ad esempio il download di un aggiornamento o l'esecuzione di un'attività pianificata, e non devono mai essere impostate su "Always On top".

Semplificare i passaggi complessi con le procedure guidate

È sicuro presupporre che, in caso di fronte a una pletora di controlli su un singolo modulo, un utente tipico verrà confuso senza fine. A volte, nessuna quantità di raggruppamento, ridimensionamento o spaziatura può aiutarti quando hai molti controlli importanti.

Una procedura guidata è la cosa migliore per questi scenari. È possibile dividere i controlli per attività o categorie in base alle esigenze e inserirli in passaggi separati. Questo può aiutare l'utente a rimanere concentrati e non essere scoraggiati dall'attività. È possibile fornire informazioni dettagliate o specifiche dell'attività con un pulsante ? Per altri dettagli, vedere Procedure guidate.

Le procedure guidate sono anche un buon modo per configurare la configurazione iniziale dell'applicazione. Molte applicazioni usano tale procedura guidata per configurare la configurazione personalizzata subito dopo il completamento dell'installazione o al primo utilizzo. Tale procedura guidata iniziale deve anche essere resa facoltativa, se possibile, se l'utente annulla in qualsiasi momento, le impostazioni non specificate passano ai valori predefiniti. Se è possibile rendere la procedura guidata un po ' grafica (vedere la sezione Usa Pretty Graphics ), rende l'attività di configurazione molto più semplice.

Ottenere il tono del testo a destra

Nelle linee guida per l'interazione dell'esperienza utente di Windows è stato fatto un punto molto importante su "Tono del testo". Questa è l'impressione e la sensazione data dal testo nell'applicazione. Può trattarsi di qualsiasi elemento, da una semplice descrizione comando, a un controllo etichetta di istruzione.

In precedenza abbiamo discusso la modifica del testo nell'opzione Webcam in MSN Messenger. Questo è detto tono di testo corretto. Quando si tratta di utenti non tecnici o principianti, ottenere il messaggio attraverso assume un aspetto diverso.

Se si scrive "Percorso di destinazione" sopra una casella di testo in un'applicazione autoestraibile, un utente tecnico può facilmente sapere di immettere qualcosa come "C:\Temp\MyPath". Un utente principiante (pensa che "Mamma") può essere altrettanto facilmente sconcertato e avrebbe bisogno di fare riferimento al manuale, chiamare il supporto tecnico o peggio, rinunciare. Un'alternativa valida consiste nel specificare ciò che si vuole che l'utente faccia: "Selezionare la cartella in cui inserire questi file". È anche possibile rinominare "Sfoglia... " pulsante che si trova accanto a quella casella di testo a "Seleziona cartella... "

Fornire una descrizione chiara di ciò che si vuole che l'utente faccia anche meno la necessità di file della Guida o almeno riduce i dettagli che è necessario includere nei file della Guida.

Un suggerimento molto valido dalle Linee guida per l'interazione dell'esperienza utente di Windows si applica a qualsiasi software. Indica che il writer deve mantenere la conversazione testuale. Le linee guida lo definiscono come "Evitare parole che non diresti a qualcun altro di persona".

Alcuni suggerimenti per la scrittura di testo:

  • Evitare di parlare dell'utente nella terza persona. Pronunciare "You" invece di "L'utente".
  • Quando possibile, usare in modo corretto "My name:" o "My E-Mail address:" anziché "Name:" o "E-Mail:"
  • Quando si assegnano più opzioni, scrivere il testo dal punto di vista dell'utente. Ad esempio, se sono presenti due pulsanti radio sotto un'etichetta, ad esempio "Select permission for [Username] on this network" sopra due RadioButtons, ad esempio "Allow" e "Deny", sostituire il testo RadioButton con "I want to allow [Username]" e "I want to disallow [Username]."
  • Sottolinea testo solo se viene usato per i collegamenti. Confonde l'utente se il testo sottolineato non è un collegamento.
  • Attirare l'attenzione sulle informazioni importanti con un'etichetta in grassetto, ma usarle con attenzione. Il testo in grassetto è troppo confuso e riduce l'impatto complessivo del modulo.
  • Quando si scrive il testo per una casella di controllo, assicurarsi che sia facile sapere cosa accadrà quando viene selezionato e quando è deselezionato o deselezionato. L'opzione consigliata consiste nel scrivere il testo direttamente come risultato della selezione della casella di controllo. Ad esempio, scrivi "Inviami informazioni utili dai tuoi partner" invece di "Non inviare informazioni utili dai tuoi partner". Mentre riesco a immaginare molte persone di marketing che discutono su questo particolare esempio, sono sicuro che tu sappia cosa intendo.
  • Se si dispone di un controllo simile a un pulsante (in genere un controllo RadioButton con un aspetto pulsante di comando) che controlla Abilitato/Disabilitato, assicurarsi di etichettarlo correttamente. Se il processo è abilitato, scrivere "Enabled" invece di "Enable" o "Disable". Se si scrive Abilitato, viene visualizzato lo stato corrente. Se si fa clic sul pulsante (abilitato) e il pulsante indica "Abilita", può generare confusione e problemi. "Abilita" potrebbe richiedere all'utente di fare clic su di esso pensando che il processo non sia attivo.

A volte un controllo ListView è migliore

Spesso ci si attacca a DataGrid o ListBox o anche ComboBox per le attività di selezione, ma con Windows XP e versioni successive di Windows, l'uso di un controllo ListView può offrire opzioni più grandi.

Punti di fine del controllo ListView:

  • Velocizza il riconoscimento degli elementi con icone e bitmap.
  • Visualizza informazioni aggiuntive con le visualizzazioni Dettagli o Riquadro.
  • Con Visual Studio 2005, è anche possibile avere Gruppi per una categorizzazione aggiuntiva. I gruppi si estendono su tutte le visualizzazioni e sono flessibili. I gruppi possono essere usati anche per rendere flat una visualizzazione gerarchica (ad esempio treeView) in cui sono presenti più nodi figlio rispetto ai nodi padre. Un buon esempio è la finestra di dialogo Connessioni di rete in Windows XP, quando viene visualizzata con "Mostra in gruppi" e la visualizzazione impostata su Dettagli.
  • Per personalizzare un controllo ListView, disegnarlo manualmente impostando la proprietà OwnerDraw e utilizzando gli eventi DrawItem e DrawSubItem .
  • Supporta la modifica rapida sul posto degli elementi listView.
  • Supporta facilmente il riordinamento manuale.
  • Consente agli utenti di selezionare la visualizzazione (icone grandi, piccole icone, elenco e così via) con cui sono più confortevoli.

Semplificare lo spostamento con controlli di navigazione e barre laterali

"Spostamento secondario" è la chiave per un'interfaccia utente complessa. In alcuni casi non è possibile usare un'interfaccia utente complessa. La cosa migliore da fare in una situazione di questo tipo è rendere l'esperienza il più semplice possibile per l'utente. Una barra laterale costituita da etichette di collegamento o treeView per la navigazione basata su gerarchia suggerisce uno spostamento a livello di pari livello per l'attività della finestra di dialogo corrente. Rende molto facile per l'utente saltare tra i passaggi del processo, sapendo dove si trova.

Se si usa una struttura di spostamento basata su gerarchia con TreeViews o un'altra struttura di spostamento simile, un'utilità ottimale per l'utente sarà un controllo di navigazione. Anche se Visual Studio non è ancora disponibile con un controllo predefinito, vedere Creazione di un controllo breadcrumb per informazioni sulla creazione di un controllo manualmente. Un controllo di navigazione semplifica la ricerca della posizione corrente in relazione alla gerarchia.

Lo spostamento tramite navigazione tramite navigazione può essere facilmente unito all'intestazione se ne ha uno. Vedere la sezione precedente sulle intestazioni.

Usare Pretty Graphics

Tutti amano le applicazioni con grafica interessante, la maggior parte lo fa, almeno. Anche se un'interfaccia utente con grafica piuttosto bella non è una scelta logica per tutte le applicazioni, aiuta a fare un'impressione piacevole e può essere un piacere lavorare in. Naturalmente, la grafica non dovrebbe ostacolare la produttività, ma se usato correttamente, possono aumentarlo!

Non c'è bisogno di molte grafiche, né richiedono necessariamente un sacco di lavoro. Una schermata iniziale progettata professionalmente o un'intestazione (come quella di cui abbiamo parlato in precedenza) fa il trucco. Se il budget consente, è possibile usare grafica ben progettata per barre degli strumenti, procedure guidate e altro ancora. Fanno sembrare la tua app abbastanza, e anche più professionale. È un effetto sottile, ma un aspetto professionale trasmette fiducia e stabilità. Se si è una società relativamente piccola che crea applicazioni di vendita al dettaglio, questo è un aspetto chiave da considerare.

Fai sempre un punto per usare grafica progettata professionalmente. La grafica senza royalty è facilmente disponibile e conveniente. È anche possibile assumere un designer. Ma se la grafica non è il tuo forte, non provare te stesso. Se non puoi acquisire o usare grafica progettata professionalmente, allora è meglio non usarli affatto.

Per la grafica di piccole dimensioni, è sempre possibile usare le icone e le bitmap fornite con Visual Studio 2005. (La grafica fornita con le versioni precedenti non è consigliata!)

Specificare moduli ridimensionabili quando possibile

Le finestre ridimensionabili sono in qualche modo simili a finestre indipendenti dalla risoluzione. Le finestre indipendenti dalla risoluzione hanno lo stesso aspetto se si usano schermate 96DPI o 300DPI. Se l'interfaccia utente dell'applicazione è indipendente dalla risoluzione, è preferibile se è ridimensionabile. Naturalmente, questo non si applica a molti scenari, ma è una buona regola per utilizzo generico.

Se la finestra gestisce elenchi di qualsiasi tipo, in particolare ListViews, diventa ancora più importante. Il ridimensionamento consente all'utente di esaminare più dati contemporaneamente.

Ad esempio, è disponibile un'applicazione in cui l'utente deve selezionare un'immagine da una raccolta di grandi dimensioni. La finestra di dialogo aperta consente di selezionare una visualizzazione Anteprima, ma la finestra di dialogo è di dimensioni fisse e l'elenco di anteprime mostra solo 4 anteprime alla volta. Se la raccolta ha centinaia di immagini, lo scorrimento e l'aspetto, un'attività ripetitiva, può essere piuttosto noiosa e una diminuzione dell'efficienza. Se il dialogo è ridimensionabile, l'utente può renderlo così grande quanto è confortevole o almeno grande quanto lo schermo lo permetterebbe e poter completare rapidamente l'attività. Se l'elenco ha uno scorrimento orizzontale, ad esempio un controllo ListView o DataGrid dettagliato, è ancora più noioso! Le finestre ridimensionabili sono molto utili in una situazione di questo tipo.

Fornire altre funzionalità con barre laterali/riquadri attività

Come le intestazioni di cui abbiamo parlato in precedenza, le barre laterali e i riquadri attività sono un modo meraviglioso per fornire funzionalità aggiuntive e comandi di utilità. Ad esempio, i riquadri attività in Office Word 2003 sono molto pratici, accessibili e non intrusivi. Funzionano anche in modo asincrono quando ci si connette alle risorse online, fornendo all'utente l'opzione multi-attività.

La creazione di un riquadro attività o una barra laterale è semplice come la creazione di un pannello di ancoraggio, con l'opzione di inserire un grafico slick nella parte superiore per fungere da barra del titolo. È anche possibile usare un controllo Label colorato. Le opportunità per i riquadri attività sono molte.

Se si dispone di funzionalità aggiuntive e si vuole fornire in modo non intrusivo all'utente, non c'è posto come il riquadro attività. È anche possibile rendere i riquadri attività "Nascondi automaticamente" o comprimere come le finestre degli strumenti di Visual Studio.

Assegnare una scelta di notifica

In precedenza è stato illustrato come creare una finestra di messaggio personalizzata. Se una finestra di messaggio nell'applicazione verrà visualizzata spesso all'utente, può essere prudente aggiungere una casella di controllo che l'utente può selezionare per disabilitare la visualizzazione di tale finestra di dialogo in futuro. Un'opzione di questo tipo è particolarmente utile per i messaggi più evidenti.

Un esempio familiare di questo è la finestra di dialogo Trova di Visual Studio. Quando si esegue la ricerca o si sostituisce il testo, Visual Studio visualizza una finestra di messaggio che indica i risultati. Tuttavia, è anche possibile disabilitare tale finestra di messaggio. Può essere davvero fastidioso se è necessario premere INVIO o fare clic su OK ogni volta che si cerca.

Un'altra cosa interessante che Visual Studio fa è che anche se la finestra di dialogo è disabilitata, visualizza comunque i risultati di tale operazione nella barra di stato.

Fornire descrizioni comandi.

A volte le descrizioni comando possono risparmiare molto tempo. Pulsanti, caselle di controllo e altri controlli possono essere ambigui e l'utente potrebbe non essere sicuro di cosa fare. Le descrizioni comando offrono la migliore forma di Guida sensibile al contesto in una sola riga. L'utente può decidere rapidamente cosa fare senza cercare nulla nel file della Guida o aprire un'altra finestra.

Le persone spesso ignorano questo problema nelle applicazioni. Fare un punto per aggiungere descrizioni comando a tutti i controlli ambigui o a TUTTI i controlli, se possibile. Non ripetere il testo di un'etichetta associata o del testo del controllo, ma fornire informazioni aggiuntive su tale controllo. Il testo deve spiegare la funzione del controllo in poche parole.

Non dimenticare le piccole cose

Le piccole cose possono infastidirti, ma ignorarle può influire sull'impressione che fai. Una volta ho usato un'applicazione fatta da una persona importante nel settore software che aveva il suo BorderStyle della forma impostato su Sizeable, ma i controlli sul lato destro del modulo non erano ancorati. Per questo motivo, l'applicazione creata da un settore heavyweight aveva un'atmosfera non professionale.

Questi tipi di "piccole cose" sono il nucleo dell'impressione complessiva. L'interfaccia utente e l'esperienza utente dell'applicazione sono ciò che gli utenti valuteranno l'applicazione almeno in un primo momento. Se vedono bug evidenti nell'interfaccia utente, potrebbero percepire l'applicazione in modo che sia meno potente ed efficace.

Conclusione

Abbiamo toccato solo una piccola parte dell'esperienza utente umana. Man mano che l'esperienza utente diventa più semplice, efficace, divertente e più intuitiva, l'attività di creazione di tale esperienza utente diventa molto più complessa. Tuttavia, con alcune previsioni e una buona pianificazione, è possibile creare un'esperienza utente ottimale.

Il modo migliore per creare un'esperienza utente perfetta consiste nell'eseguire test di usabilità destinati soprattutto all'interfaccia utente, sia con un gruppo di test speciale che con un gruppo di test speciale o da soli. Maggiore è il tempo necessario per testare l'esperienza utente prima di rilasciare l'applicazione, meglio è. Ti salverà un sacco di problemi in un secondo momento.