Nozioni fondamentali sull'esperienza utente per Visual Studio
Procedure consigliate
1. Essere coerenti nell'ambiente di Visual Studio.
Seguire i modelli di interazione esistenti all'interno della shell.
Caratteristiche di progettazione coerenti con il linguaggio visivo e i requisiti di artigianalità della shell.
Usare comandi e controlli condivisi quando esistono.
Comprendere la gerarchia di Visual Studio e come stabilisce il contesto e determina l'interfaccia utente.
2. Utilizzare il servizio ambiente per tipi di carattere e colori.
L'interfaccia utente deve rispettare l'impostazione del tipo di carattere dell'ambiente corrente, a meno che non sia esposta per la personalizzazione nella pagina Tipi di carattere e colori nella finestra di dialogo Opzioni.
Gli elementi dell'interfaccia utente devono usare il servizio VSColor, usando token di ambiente condiviso o token specifici della funzionalità.
3. Rendere tutte le immagini coerenti con il nuovo stile di Visual Studio.
Seguire i principi di progettazione di Visual Studio per icone, glifi e altri elementi grafici.
Non inserire testo negli elementi grafici.
4. Progettare dal punto di vista incentrato sugli utenti.
Creare il flusso di attività prima delle singole funzionalità al suo interno.
Acquisire familiarità con gli utenti e rendere esplicite tali conoscenze nella specifica.
Quando si esamina l'interfaccia utente, valutare l'esperienza completa e i dettagli.
Progettare l'interfaccia utente in modo che rimanga funzionale e interessante indipendentemente dalle impostazioni locali o dalla lingua.
Risoluzione schermo
Risoluzione minima
La risoluzione minima per Visual Studio 2015 è 1280x720. Ciò significa che è possibile usare Visual Studio a questa risoluzione, anche se potrebbe non essere un'esperienza utente ottimale. Non c'è garanzia che tutti gli aspetti saranno utilizzabili a risoluzioni inferiori a 1280x720.
La risoluzione di destinazione per Visual Studio è 1366x768. Questa è la risoluzione più bassa a cui promettiamo un'esperienza utente ottimale .
L'altezza iniziale del dialogo deve essere inferiore a 700 pixel, quindi rientra nella risoluzione minima del frame IDE a 96 dpi.
Schermi ad alta densità
L'interfaccia utente in Visual Studio deve funzionare correttamente in tutti i fattori di ridimensionamento DPI supportati da Windows: 150%, 200% e 250%.
Anti-criteri
Visual Studio contiene molti esempi di interfaccia utente che seguono le linee guida e le procedure consigliate. Nel tentativo di essere coerenti, gli sviluppatori spesso prendono in prestito dai modelli di progettazione dell'interfaccia utente del prodotto simili a quello che stanno creando. Anche se questo è un buon approccio che ci aiuta a favorire la coerenza nell'interazione dell'utente e nella progettazione visiva, in alcuni casi le funzionalità vengono fornite con alcuni dettagli che non soddisfano le linee guida a causa di vincoli di pianificazione o definizione delle priorità dei difetti. In questi casi, non si vuole che i team copiano uno di questi "anti-pattern" perché si moltiplicano un'interfaccia utente non valida o incoerente nell'ambiente di Visual Studio.
Campi/impostazioni obbligatori visualizzati nello stato di errore per impostazione predefinita
Obiettivi del team di funzionalità
Avvisa gli utenti che hanno aggiunto un elemento che deve essere configurato.
Attirare l'attenzione dell'utente sulle aree che necessitano di input.
Soluzione anti-modello
Non appena l'utente ha avviato un'azione e prima di aver completato l'attività, posizionare immediatamente icone di arresto critico accanto alle aree che richiedono la configurazione.
Esempio: Dichiarazioni di Progettazione manifesto
L'aggiunta di una dichiarazione all'elenco lo inserisce immediatamente in uno stato di errore, che persiste fino a quando l'utente non imposta le proprietà necessarie.
In questo caso, c'è un problema aggiuntivo perché l'icona usata per l'avviso contiene un'icona "×", quindi l'icona di rimozione comune non può essere usata accanto a essa. Di conseguenza, l'interfaccia utente usa un pulsante Rimuovi, un controllo più disordinato.
L'inserimento dell'interfaccia utente in uno stato di errore per impostazione predefinita è un anti-pattern di Visual Studio.
Alternative
Una soluzione migliore a questo problema consiste nel:
Consentire all'utente di aggiungere una dichiarazione senza avviso e quindi spostarsi immediatamente per impostare le proprietà sull'elemento.
Aggiungere l'icona di avviso (triangolo oro) quando lo stato attivo si sposta dall'elemento, ad esempio per aggiungere un'altra dichiarazione all'elenco o per tentare di modificare le schede all'interno della finestra di progettazione.
Se l'utente tenta di modificare le schede prima di impostare le proprietà su qualsiasi dichiarazione, aprire una finestra di dialogo che spiega che l'applicazione non verrà compilata (o qualsiasi altra implicazione) fino a quando gli avvisi non verranno risolti. Se l'utente ignora la finestra di dialogo e modifica comunque le schede, viene aggiunta un'icona (critica o avviso, se necessario) alla scheda Dichiarazioni.
Più clic per ignorare l'interfaccia utente
Obiettivi del team di funzionalità
Non consentire all'utente di ignorare l'interfaccia utente senza prima visualizzare il testo della spiegazione.
Anti-criterio
Il team che inserisce i collegamenti video in varie posizioni all'interno dell'interfaccia utente di Visual Studio ha deciso di usare il modello comune del pulsante di chiusura "×" e la spiegazione della descrizione comando come specificato dall'esperienza utente e di implementare invece un collegamento a discesa e "Non visualizzare più".
Esempio: Collegamenti video in Team Explorer
Forzare l'utente a leggere testo esplicativo prima di ignorare l'interfaccia utente è un anti-pattern all'interno di Visual Studio. Progettati correttamente, i collegamenti video devono visualizzare una descrizione comando con informazioni aggiuntive al passaggio del mouse e fare clic su "×" dovrebbe chiudere il messaggio senza la necessità di ulteriori interazioni.
Modello di collegamento video non corretto
Invece di un semplice pulsante di chiusura (un clic), l'utente è costretto a usare due clic per ignorare semplicemente l'interfaccia utente in ogni posizione in cui vengono visualizzati i collegamenti video.
La progettazione corretta per questa situazione consiste nel seguire il modello comune a Internet Explorer, Office e Visual Studio: al passaggio del mouse, l'utente può visualizzare la descrizione della descrizione comando e un clic nasconde l'interfaccia utente.
Modello di collegamento video corretto
Uso delle barre dei comandi per le impostazioni
Figura A rappresenta questo anti-modello: inserire un'impostazione sotto un pulsante di comando che si applica a più di un semplice comando. In questo schizzo sono disponibili comandi oltre a Avvia debug, ad esempio Visualizza nel browser, Avvia senza eseguire debug e Esegui istruzione per rispettare l'impostazione selezionata.
Figura A: Anti-pattern della barra dei comandi
Leggermente meglio, ma ancora indesiderato, inserisce le impostazioni di questo tipo nelle barre degli strumenti, come illustrato nella figura B. Mentre i pulsanti di divisione occupano meno spazio e sono quindi un miglioramento rispetto agli elenchi a discesa, entrambi i progetti usano ancora una barra degli strumenti per promuovere qualcosa che non è davvero un comando.
Figura B: Migliore, ma ancora un anti-pattern della barra dei comandi
Nell'approccio corretto illustrato nella figura C, l'impostazione è associata a una serie di comandi. Non è stata impostata alcuna impostazione globale e si sta semplicemente passando da un comando all'altro. Questa è l'unica situazione in cui i comandi nella barra degli strumenti sono accettabili.
Figura C: Uso corretto del modello della barra dei comandi di Visual Studio
Controllare gli anti-pattern
Alcuni anti-pattern sono semplicemente uso errato o presentazione di un controllo o di un gruppo di controlli.
Sottolineatura usata come etichetta di gruppo, non come collegamento ipertestuale
La sottolineatura del testo deve essere usata solo per i collegamenti ipertestuali.
Male:
Il testo sottolineato che non è un collegamento ipertestuale è un anti-pattern di Visual Studio.
Buono:
Con lo stile corretto, il testo non ipertestuale viene visualizzato come non adorabile nel tipo di carattere dell'ambiente.
Facendo clic su una casella di controllo viene visualizzata una finestra di dialogo popup
Facendo clic sulla casella di controllo "Abilita Desktop remoto per tutti i ruoli" nella procedura guidata "Pubblica Windows app Azure lication" viene visualizzata immediatamente una finestra di dialogo popup, un anti-pattern di Visual Studio. Inoltre, il campo della casella di controllo non viene riempito con una casella di controllo dopo essere stata selezionata, un altro anti-pattern di interazione.
La visualizzazione di una finestra di dialogo dopo aver fatto clic su una casella di controllo è un anti-pattern di Visual Studio.
Collegamenti ipertestuali per anti-pattern
L'esempio seguente contiene due anti-pattern:
L'attivazione del colore rosso in primo piano al passaggio del mouse indica che il colore condiviso corretto del servizio del tipo di carattere non viene usato.
"Altre informazioni" non è il testo appropriato per un collegamento a un argomento concettuale. L'obiettivo dell'utente non è quello di saperne di più, è comprendere le ramificazioni della propria scelta.
Ignorare il servizio colori e usare "Altre informazioni" per i collegamenti ipertestuali sono anti-pattern di Visual Studio.
Soluzione migliore: porre la domanda che l'utente sta chiedendo facendo clic sul collegamento. Ad esempio:
Come funzionano i servizi di Windows Azure?
Quando è necessario un progetto di Servizi mobili di Windows Azure?
Uso di "Fare clic qui" per i collegamenti
I collegamenti ipertestuali devono essere auto-descrittivi. Si tratta di un anti-pattern per usare "Clicca qui" o qualsiasi variante simile.
Non valido: "Fare clic qui per istruzioni su come creare un nuovo progetto".
Buono: "Ricerca per categorie creare un nuovo progetto?"