Dispositivi di scorrimento

Un dispositivo di scorrimento è un controllo che permette all'utente di effettuare una selezione in un intervallo di valori spostando il controllo cursore lungo una traccia.

È il controllo giusto?

Usare un dispositivo di scorrimento quando si desidera che gli utenti siano in grado di impostare valori definiti e contigui (ad esempio volume o luminosità) o un intervallo di valori discreti (ad esempio le impostazioni di risoluzione dello schermo).

Un dispositivo di scorrimento è una buona scelta quando si sa che gli utenti considerano il valore come una quantità relativa, non un valore numerico. Ad esempio, gli utenti pensano di impostare il volume audio su basso o medio, non sul valore 2 o 5.

Non usare un dispositivo di scorrimento per le impostazioni binarie. In alternativa, usare un interruttore.

Ecco alcuni fattori aggiuntivi da considerare per decidere se usare un dispositivo di scorrimento:

• L'impostazione sembra una quantità relativa? In caso contrario, usare pulsanti di opzione o una casella di riepilogo.
• L'impostazione è un valore numerico noto esatto? In questo caso, usare una casella di testo numerica.
• Un utente trarrebbe vantaggio da un riscontro immediato sull'effetto delle modifiche dell'impostazione? In tal caso, usare un dispositivo di scorrimento. Ad esempio, gli utenti possono scegliere un colore più facilmente visualizzando immediatamente l'effetto delle modifiche ai valori di tonalità, saturazione o luminosità.
• L'impostazione ha un intervallo di quattro o più valori? In caso contrario, usare pulsanti di opzione.
• L'utente può modificare il valore? I dispositivi di scorrimento sono destinati all'interazione utente. Se un utente non può mai modificare il valore, usare testo in sola lettura.

Se si deve decidere tra un dispositivo di scorrimento e una casella di testo numerica, usare una casella di testo numerica se:

• Lo spazio sullo schermo è limitato.
• È probabile che l'utente preferisca usare la tastiera.

Usare un dispositivo di scorrimento se:

• Gli utenti trarranno vantaggio da un feedback immediato.

Consigli

• Ridimensionare il controllo in modo che gli utenti possano impostare facilmente il valore desiderato. Per le impostazioni con valori discreti, assicurarsi che l'utente possa selezionare facilmente qualsiasi valore usando il mouse. Assicurarsi che i punti finali del dispositivo di scorrimento rientrino sempre nei limiti di una visualizzazione.
• Inviare un feedback immediato durante o dopo la selezione di un utente (se pratico). Ad esempio, il controllo del volume di Windows emette un segnale acustico per indicare il volume audio selezionato.
• Usare le etichette per mostrare l'intervallo di valori. Eccezione: se il dispositivo di scorrimento è orientato in verticale e l'etichetta superiore è Massimo, Alto, Più o un valore equivalente, è possibile omettere le altre etichette perché il significato è chiaro.
• Disabilitare tutte le etichette o gli oggetti visivi di feedback associati quando si disabilita il dispositivo di scorrimento.
• Valutare la direzione del testo quando si imposta la direzione del flusso e/o l'orientamento del dispositivo di scorrimento. Lo script va da sinistra a destra in alcune lingue e da destra a sinistra in altre.
• Non usare un dispositivo di scorrimento come indicatore di stato.
• Non modificare le dimensioni del cursore rispetto alle dimensioni predefinite.
• Non creare un dispositivo di scorrimento continuo se l'intervallo di valori è grande e gli utenti selezioneranno probabilmente uno dei diversi valori rappresentativi dall'intervallo. Usare invece questi valori come gli unici passaggi consentiti. Ad esempio, se il valore tempo può estendersi fino a 1 mese, ma gli utenti devono solo scegliere tra 1 minuto, 1 ora, 1 giorno o 1 mese, creare un dispositivo di scorrimento con solo 4 passaggi.

Indicazioni aggiuntive sull'uso

Scelta del layout corretto: orizzontale o verticale

È possibile orientare il dispositivo di scorrimento in orizzontale o verticale. Usare queste linee guida per determinare quale layout usare.

• Usare un orientamento naturale. Ad esempio, se il dispositivo di scorrimento rappresenta un valore reale normalmente visualizzato in verticale, ad esempio la temperatura, usare un orientamento verticale.
• Se il controllo viene usato per cercare in contenuti multimediali, ad esempio in un'app video, usare un orientamento orizzontale.
• Quando si usa un dispositivo di scorrimento in una pagina di cui è possibile eseguire la panoramica in una sola direzione (in orizzontale o verticale), usare un orientamento diverso per il dispositivo di scorrimento rispetto alla direzione di panoramica. In caso contrario, gli utenti potrebbero scorrere il dispositivo di scorrimento e modificarne involontariamente il valore quando tentano di eseguire la panoramica della pagina.
• Se non si è certi dell'orientamento da usare, usare quello più adatto al layout di pagina.

Direzione dell'intervallo

La direzione dell'intervallo è la direzione in cui si sposta il dispositivo di scorrimento dal valore corrente al valore massimo.

• Per il dispositivo di scorrimento verticale, posizionare il valore più alto nella parte superiore del dispositivo di scorrimento, indipendentemente dalla direzione di lettura. Ad esempio, per un dispositivo di scorrimento del volume, posizionare sempre l'impostazione massima del volume nella parte superiore del dispositivo di scorrimento. Per altri tipi di valori, ad esempio i giorni della settimana, seguire la direzione di lettura della pagina.
• Per gli stili orizzontali, posizionare il valore inferiore sul lato sinistro del dispositivo di scorrimento nei layout di pagina da sinistra a destra e sul lato destro nei layout di pagina da destra a sinistra.
• L'unica eccezione alle linee guida precedenti riguarda le barre di ricerca multimediale: posizionare sempre il valore inferiore a sinistra del dispositivo di scorrimento.

Passaggi e segni di graduazione

• Usare i passaggi se non si vuole che il dispositivo di scorrimento consenta valori arbitrari tra min e max. Ad esempio, se si usa un dispositivo di scorrimento per specificare il numero di biglietti del cinema da acquistare, non consentire valori a virgola mobile. Assegnare al passaggio un valore 1.
• Se si specificano passaggi (noti anche come punti di ancoraggio), assicurarsi che il passaggio finale sia allineato al valore massimo del dispositivo di scorrimento.
• Usare i segni di graduazione per mostrare agli utenti la posizione di valori importanti o significativi. Ad esempio, un dispositivo di scorrimento che controlla lo zoom potrebbe avere segni di graduazione per i valori 50%, 100% e 200%.
• Mostrare i segni di graduazione quando gli utenti devono conoscere il valore approssimativo dell'impostazione.
• Mostrare i segni di graduazione e un'etichetta valore quando gli utenti devono conoscere il valore esatto dell'impostazione scelta, senza interagire con il controllo. In caso contrario, possono usare la descrizione comando del valore per vedere il valore esatto.
• Mostrare sempre i segni di graduazione quando i passaggi non sono evidenti. Ad esempio, se il dispositivo di scorrimento è largo 200 pixel e ha 200 punti di ancoraggio, è possibile nascondere i segni di graduazione perché gli utenti non noteranno il comportamento di ancoraggio. Tuttavia, se sono presenti solo 10 punti di ancoraggio, mostrare i segni di graduazione.

Etichette

• Etichette del dispositivo di scorrimento

  L'etichetta del dispositivo di scorrimento ne indica la funzione.

  • Usare un'etichetta senza punteggiatura finale (convenzione per le etichette di controlli).
  • Posizionare le etichette sopra il dispositivo di scorrimento quando il dispositivo di scorrimento si trova in un form che posiziona la maggior parte delle etichette sopra i relativi controlli.
  • Posizionare le etichette ai lati quando il dispositivo di scorrimento si trova in un form che inserisce la maggior parte delle etichette sul lato dei relativi controlli.
  • Evitare di posizionare le etichette sotto il dispositivo di scorrimento perché il dito dell'utente potrebbe nascondere l'etichetta quando tocca il dispositivo di scorrimento.

• Etichette di intervallo

  Le etichette di intervallo, o riempimento, descrivono i valori minimo e massimo del dispositivo di scorrimento.

  • Etichettare le due estremità dell'intervallo del dispositivo di scorrimento, a meno che un orientamento verticale non lo renda superfluo.
  • Usare una sola parola, se possibile, per ogni etichetta.
  • Non usare punteggiatura finale.
  • Assicurarsi che queste etichette siano descrittive e parallele. Esempi: Massimo/Minimo, Più/Meno, Alto/Basso, Piano/Forte.

• Etichette di valore

  Un'etichetta valore mostra il valore corrente del dispositivo di scorrimento.

  • Se è necessaria un'etichetta valore, visualizzarla sotto il dispositivo di scorrimento.
  • Centrare il testo rispetto al controllo e includere le unità (ad esempio i pixel).
  • Poiché il cursore del dispositivo di scorrimento è coperto durante lo scrubbing, considera la possibilità di mostrare il valore corrente in qualche altro modo, con un'etichetta o un altro elemento visivo. Un dispositivo di scorrimento che imposta le dimensioni del testo potrebbe eseguire il rendering di un testo di esempio delle dimensioni giuste accanto al dispositivo di scorrimento.

Aspetto e interazione

Un dispositivo di scorrimento è composto da una traccia e da un cursore. La traccia è una barra (che può facoltativamente mostrare vari stili di segni di graduazione) che rappresenta l'intervallo di valori che è possibile immettere. Il cursore è un selettore che l'utente può posizionare toccando la traccia o trascinandolo.

Un dispositivo di scorrimento ha una destinazione tramite tocco ampia. Per mantenere l'accessibilità tramite tocco, un dispositivo di scorrimento deve essere posizionato abbastanza lontano dal bordo dello schermo.

Quando progetti un dispositivo di scorrimento personalizzato, considera il modo in cui presentare tutte le informazioni necessarie con il minimo ingombro possibile. Usare un'etichetta valore se un utente deve conoscere le unità per comprendere l'impostazione; trovare modi creativi per rappresentare questi valori graficamente. Un dispositivo di scorrimento che controlla il volume, ad esempio, potrebbe visualizzare un elemento grafico dell'altoparlante senza onde audio all'estremità minima del dispositivo di scorrimento e un elemento grafico altoparlante con onde audio all'estremità massima.

Esempi

Dispositivo di scorrimento con segni di graduazione a intervalli di 10 punti da 0 a 100.

Piattaforma UWP e WinUI 2

Le API per questo controllo sono presenti nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Creare un dispositivo di scorrimento

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Ecco come creare un dispositivo di scorrimento in XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Ecco come creare un dispositivo di scorrimento nel codice.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Si ottiene e si imposta il valore del dispositivo di scorrimento dalla proprietà Value. Per rispondere alle modifiche apportate ai valori, è possibile usare il data binding per eseguire l'associazione alla proprietà Value o gestire l'evento ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Scaricare il codice di esempio

• Esempio di Raccolta WinUI: visualizza tutti i controlli XAML in un formato interattivo.

Argomenti correlati

• Interruttori
• Classe Slider