risposta-alla-domanda-sullo-sviluppo-web-bd.com

Cursore minimo minimo - Best practice sull'usabilità

Sto sviluppando un'app mobile iOS per rallentare/accelerare i video. Dopo alcune ricerche e intuizioni, ho deciso di scegliere un Slider come componente dell'interfaccia utente responsabile per il cambio di velocità del video. L'intervallo di velocità video è compreso tra 16 volte più lento e 16 volte più veloce della velocità originale.

Naturalmente, il lato più a sinistra dello Slider dovrebbe essere il più lento e il lato più a destra dovrebbe essere il più veloce.

Ho notato qualcosa di interessante quando ho usato lo Slider standard di iOS: quando il pollice inizia dalla parte più a sinistra (valore minimo) e il valore massimo è all'estrema destra, dà una "cattiva" connotazione al lato sinistro e una connotazione positiva sul lato destro. Inoltre, è stato un po 'confuso se sono sulla parte rallentata o accelerata.

Esempio: Slowerd

Poi ho deciso di cambiare un po 'le cose e posizionare al centro l'origine del cursore. Il centro sta per "velocità originale". Il trascinamento a sinistra si concentrerà solo sul rallentamento, mentre il trascinamento della messa a fuoco a destra sull'accelerazione. Stesso esempio sopra con la nuova versione:

enter image description here

Sento che manca ancora di usabilità. Forse aggiungendo degli indicatori vicino all'origine centrale? Mi piacerebbe sentire i tuoi pensieri e idee. Grazie per aver letto!

11
Roi Mulia

Penso che la tua interfaccia utente sia abbastanza chiara e non causerà alcun malinteso con l'utente. Puoi renderlo più estetico, riducendo il numero di elementi nell'interfaccia utente. Questa interfaccia utente può essere più chiara e chiara. Con questa interfaccia utente, il numero verrà visualizzato solo quando si preme il pulsante o si trascina il pulsante. enter image description here

14
Tal Yaron

EDIT: ritaglia la casella di input, @vinay ha ragione. Renderebbe il tutto più complesso. Quindi finirà per apparire così: Corrected UI slider

OK, prima di condividere ciò che penso che dovresti fare, penso che sia meglio ti ricordo che ci sono due tipi di utenti che incontrerai quando crei uno strumento come questo: quelli che vorranno inserire un valore esatto e quelli che vogliono solo rallentare/velocizza il video il più rapidamente possibile. È necessario ricordare di provare a soddisfare le esigenze di questi due tipi di utenti.

Per soddisfare il primo, dovresti fare ciò che hai fatto (ad esempio un dispositivo di scorrimento, ma con una leggera modifica: aggiungi una casella di input. NON USARE LA SCATOLA DI INGRESSO ): detailed user slider (Lo so, l'ingresso dice 0,0x quando in realtà è 7,24x più lento). Personalmente, non garantisco questo metodo a causa dei metodi spiegati di seguito.

Ora, per quest'ultimo (coloro che vogliono semplicemente accelerare o rallentare il video il più rapidamente possibile) è possibile aggiungere pulsanti di azione che saltano il cursore nella posizione corrispondente:

slider two, improved for those who want to quickly set the speed

Ecco alcuni esempi di strumenti/software che utilizzano questo metodo:

  • Primo essere VLC (v2.2.4):

vlc video speed slider

  • E l'altro è YouTube (PC). YouTube, in realtà, non ha alcun tipo di metodo per un utente per immettere il valore che desidera. Posiziona solo un sacco di valori predefiniti e funziona

Youtube video speed selector buttons

E un'altra cosa, per favore fai la faccia di tartaruga a destra (controlla l'immagine sopra dei pulsanti + cursore + esempio di input). Dato che il video sta ancora spostandosi in avanti , penso che la tartaruga debba affrontare il diritto di (si spera) inconsciamente comunicare all'utente che stai rallentando il video e non riavvolgere. So che sembra piccolo, ma penso che dovrebbe essere così. Naturalmente dipende da te.

Inoltre ho rimosso il "7.24x più lento", poiché un utente sarà in grado di capire che se un video si muove al di sotto della velocità di 1,0x, si muove a una velocità inferiore. Ma ancora una volta, questo ragionamento è contestato dall'esempio di YouTube sopra (usa la parola "Normale" invece di 1,0x/1x che potrebbe suggerire che gli utenti non l'hanno capito durante il test). Alla fine, di nuovo, dipende tutto da te.

7
Kitanga Nday

Penso che il problema principale sia l'utilizzo di una barra di scorrimento in un'interfaccia touch.

Scrub bar e sono ottimi input per il mouse ma terribili al tatto. La linea orizzontale può essere il movimento del pollice più imbarazzante possibile quando si tiene un telefono. Prova a tracciare una linea orizzontale con il pollice sul telefono. Per eseguire le linee orizzontali, la maggior parte degli utenti deve cambiare fisicamente la presa sul dispositivo. Inoltre non puoi vedere cosa stai toccando.

(Modifica - Ho dimenticato di includere questo punto) Le barre di scorrimento e i cursori hanno una precisione molto ridotta al tocco. Se l'ingresso è di pochi punti per pollice, un dispositivo di scorrimento è facile da usare. L'intervallo per questa applicazione è almeno 32 e la domanda mostra una precisione decimale. Toccare e tenere premuto è molto più facile da fare che controllare un dispositivo di scorrimento. (Fine modifica)

Dovresti usare i pulsanti. Dovrebbero essere progettati e posizionati per essere facilmente riconoscibili e utilizzabili. Gli utenti possono toccare o tenere premuti i pulsanti - toccare per scorrere - tenere premuto per strofinare.

Quando un utente tocca uno schermo per interagire, l'utente copre lo schermo. Quindi i pulsanti devono essere al di sotto o al lato di tutto ciò che l'utente deve vedere durante l'utilizzo dei pulsanti. Gli utenti dovrebbero essere in grado di far scorrere la carta in una posizione raggiungibile (spostare la carta su e giù). Se i pulsanti sono statici in posizione, posizionali in basso per un facile accesso con i pollici.

enter image description here

(Modifica - aggiornato il progetto) Come ha sottolineato mc01, ci vorrebbe troppo tempo e fatica per consentire all'utente di toccare o trattenere grandi cambiamenti. Ho aggiunto pulsanti per rendere più semplice e veloce la modifica del numero.

enter image description here

(Fine modifica)

(Modifica - aggiornato il design) Aggiornato il design per mostrare un display del lettore video aggiunto alla scheda.

enter image description here

(Fine modifica)

3
moot

Forse insisti nell'usare troppo quelle due icone (mi piacciono a proposito.)

L'interfaccia utente di iOS utilizza l'estrema sinistra come punto originale e più si sposta a destra e più si aumenta qualsiasi valore.

Poiché la maggior parte degli utenti conosce il layout dall'alto, potrebbe essere confuso quando si utilizza la versione poiché si utilizza la metà come origine.

Penso che se aggiungi "Velocità originale" al centro alla stessa altezza delle altre due etichette, diventerà più chiaro da dove gli utenti stanno modificando.

Considera anche l'aggiunta di un'opzione che consente all'utente di ripristinare il valore su "Velocità originale" perché penso che al primo tentativo possa essere difficile raggiungere il centro.

3
Pectoralis Major

FYR, ecco alcune delle migliori pratiche legate al video fornite dal gruppo Neilsen Norman.

https://www.nngroup.com/articles/video-usability/

E imho e dalle mie osservazioni, le selezioni di YouTube per la velocità sono state confuse per gli utenti. Gli utenti generalmente pensano che i valori al di sopra del livello NORMAL aumentino la velocità e che i valori al di sotto del livello NORMAL diminuiscano. Questo, come si osserva dall'immagine fornita, richiede un po 'più di attenzione da parte dell'utente per rendersi conto che funziona al contrario. Quindi suggerirei di andare avanti con il cursore con i valori a cui l'utente può fissare facilmente la velocità. Inoltre, è possibile utilizzare il clic/toccare sul valore NORMALE per consentire all'utente di ripristinare la velocità normale.

Ecco come lo progetterei: enter image description here

E vorrei non dare una casella di input qui, sarebbe solo uno sforzo extra per l'utente di capire l'intervallo entro il quale deve essere inserito il valore , ciò complicherebbe e basta.

3
Vinay

Penso che tu abbia ragione quando metti l'origine al centro. Fondamentalmente, stai impostando un valore di base da cui puoi andare su e/o giù .

Tuttavia, la linea di base è semplicemente simbolica, dal momento che puoi dire che è 1 (E ... 1 cosa?), 0 O normal, come dicono altre risposte. Pertanto, questa non è una misura reale, ma un riferimento per le magnitudini relative.

Su questa base, l'importante è il pubblico a cui ti rivolgi. Ad esempio, per un utente comune (come lo sarei io), sapere che il video sarà 3 volte più veloce o più lento sarà sicuramente sufficiente .

Tuttavia, per gli utenti più sofisticati , sarà confuso. Qual è la linea di base? 24fps? 30 FPS? qualsiasi FPS identificato dal lettore video? E per di più dobbiamo aggiungere magnitudini frazionarie:

7.8x * (x FPS) = ????? .

Il problema è chiaro: l'utente sicuramente saprà di quale velocità ha bisogno, perché ci è abituata . Ma farlo in questo modo significa aggiungere un grande livello di attrito.

Quindi, ancora: se la tua applicazione è per utenti ordinari , l'uso di magnitudini relative a una base simbolica potrebbe non essere un problema (tuttavia, devi test esso). Per utenti specializzati , non è una buona idea, perché sarà molto imprecisa e l'utente dovrà estrarre account.

Per tutto questo, penso che la mia raccomandazione sarebbe che tu prima definisci chi è la tua base di utenti (suppongo che tu l'abbia già fatto, ovviamente!) E quindi applicare l'opzione migliore, quella di utenti comuni o utenti più sofisticati.

Per quanto riguarda la scelta degli utenti common, dovresti anche considerare come rappresentare la direzione. Se 0 non ha senso come linea di base e si utilizza 1, porterà altre considerazioni alla tabella, vedere di seguito:

enter image description here

Nel primo caso, la linea di base è 1. Quindi, 2x dovrebbe essere ... la metà delle volte? La matematica veloce me lo dice

1*-2x= -1.

Inoltre ... come traduci da -2x a 0,5 nella mente degli utenti? È davvero controintuitivo (figuriamoci qualcosa come -7,8x. ore cercando di capire che velocità è quella!)

Quindi puoi vedere il secondo caso: inizia da 1 Al caricamento, al centro dello schermo. Ma la riga inizia da 0, Quindi 0.1, 0.2, 0.3 E così via. Questo è un metodo molto chiaro: 0 is no speed, 0.1 is 1/10 a, 0.2 is 2/10 E così via. Ma bene, avere 1/16 Lo renderebbe davvero confuso, per non parlare di 0,5 non è il valore negativo di 2x che sarebbe la sua controparte in una riga numerica. Tuttavia, se stai bene andando da 0 a 1 e poi a 2, questo sarebbe perfetto .... ma immagino che tu debba andare a 16x anziché a 2x. Puoi usare una scala logaritmica per le misure più veloce della linea di base, ma ancora: dovrai provarlo.

enter image description here

Arrivare a una soluzione

In breve, la maggior parte delle rappresentazioni sono imprecise o confuse . Quindi, una proposta che potrebbe risolvere tutti questi conflitti di visualizzazione delle informazioni sia per utenti comuni che specializzati sarebbe l'uso di scale assolute di frame rate al secondo (FPS).

In questo modo, la tua app potrebbe leggere l'FPS della sorgente video e definire la linea di base da lì, quindi potrebbe offrire valori FPS diversi. Secondo me, meglio che usare un dispositivo di scorrimento è usare una serie di valori preimpostati, ma se si desidera utilizzare un dispositivo di scorrimento, nessun problema, funzionerebbe anche. Naturalmente, questo è il caso in cui gli utenti possono caricare video , altrimenti puoi aggiungere artificialmente la linea di base con la frequenza dei fotogrammi utilizzata dall'app . Vedi esempi di seguito:

Fonderia: enter image description here

Photoshop: enter image description here

Miscelatore: enter image description here

Premiere: enter image description here

Protools + Video enter image description here

1
Devin

Come ho detto nei miei commenti, non sono sicuro che questo dispositivo di scorrimento abbia solo valori positivi (o valori più grandi) che interpretate come "lenti" e "veloci" o che abbia valori negativi (7 volte più lenti) e valori positivi (7 volte più veloce).

Caso 1 (il cursore ha solo valori positivi/più grandi): in questo caso, non vedo alcun motivo per avere l'etichetta "più lenta" (7,24 volte più lenta). Questo è in realtà l'elemento che dà una connotazione negativa ai piccoli valori. Inoltre, in questa situazione, dovrebbe essere riempito solo l'intervallo selezionato sulla traccia e il valore predefinito dovrebbe essere 0.

Caso 2 (il dispositivo di scorrimento ha valori negativi e positivi (o valori più piccoli e più grandi) - 7,24 volte più lento e 7,24 volte più veloce): in questo caso, la traccia deve essere riempita dal centro, mostrando che il valore predefinito si trova nel mezzo .

1
Madalina Taina