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

Comunicare la funzionalità di pressione prolungata in un'interfaccia utente Web

Quindi, escludendo Google Drive e alcune altre applicazioni, sembra essere visto principalmente come un no-no per sovrascrivere il menu contestuale predefinito del tasto destro del browser. Lo schema che sembra essere emerso al posto di questo è quello di presentare un pulsante "più" su cui l'utente fa clic con il pulsante principale del mouse, che fa apparire un'interfaccia secondaria (menu di scelta rapida, barra laterale, foglio in basso, ecc.).

Tuttavia, questo modello non mi piace, perché occupa il settore immobiliare e distoglie l'attenzione dell'utente dal contenuto principale. Personalmente trovo che il modello sia piuttosto disorientante, specialmente quando hai a che fare con una griglia di elementi piuttosto che un elenco verticale.

Penso che una buona alternativa ai pulsanti "più" sia fornire opzioni di "pressione prolungata". Questa funzionalità può essere supportata praticamente su tutti i browser su tutti i dispositivi, poiché la sua implementazione tecnica è semplicemente una chiamata setTimeout.

Sfortunatamente, perché i pulsanti "più" sono così pervasivi e la funzionalità di pressione prolungata è così pervasiva (almeno nel world wide web). Sto lottando per trovare il modo migliore per educare i nostri utenti su questa funzionalità.

Ecco cosa ho escogitato finora:

enter image description here

L'idea è che in tutta l'app, quando vedi l'icona a sfioramento su un elemento all'interno di un elenco, indica che tutti gli elementi possono essere premuti a lungo. Questo richiede meno proprietà immobiliari che avere pulsanti "più" su ogni singolo elemento, poiché solo i primi elementi negli elenchi hanno il suggerimento. Se sei su un dispositivo con un mouse, passare con il mouse sopra le icone "touch" fornisce una descrizione con un certo contesto.

enter image description here

In questo esempio specifico, facendo clic/toccando le carte si accede alla pagina di visualizzazione dedicata agli elementi, ma premendo a lungo le carte si mantiene sulla stessa pagina e si apre una barra laterale/foglio inferiore (a seconda della larghezza dello schermo)

enter image description here


Puoi elencare alcune carenze con il modello che ho escogitato? Come può essere migliorato il modello sopra?

11
Luke

Oltre ad altre risposte:

Difetto grave: la pressione lunga è già in uso.

Dove? I dispositivi Windows con touchscreen utilizzano una pressione prolungata del dito per avviare il clic destro in una determinata posizione. Ovunque, compresi i browser Web. ( Esempio su Youtube ).

L'effetto dell'esecuzione dell'azione personalizzata sulla pressione prolungata può quindi essere imprevedibile e potrebbe dipendere dal sistema operativo e/o dal browser. Ad esempio, alcuni browser potrebbero avviare entrambe le azioni contemporaneamente, ovvero aprire il menu contestuale del tasto destro ed eseguire la stessa azione con la stessa pressione prolungata.

Anziché:

  • metti l'azione nel menu contestuale o
  • aggiungere i pulsanti su schermo per cambiare la modalità di funzionamento (per l'azione successiva o in modo permanente). Questa è sostanzialmente la funzionalità della tavolozza degli strumenti che gli utenti conoscono già da Photoshop, GIMP, (Paint - ovviamente ...) ecc.

Premere a lungo (ad esempio "toccare e tenere premuto") sul touchscreen per aprire il menu di scelta rapida è un concetto molto vecchio, se qualcuno ricorda ad esempio Windows Mobile 5 (2006) che utilizzava il touchscreen con lo stilo. La pressione lunga è stata indicata dall'indicatore di avanzamento - costruzione di un cerchio tratteggiato intorno alla posizione della pressione lunga. ( Esempio su Youtube. )

A meno che tu non abbia una solida soluzione a questo problema, non dovresti ignorare questo difetto, specialmente quando si progetta l'IU Web, che dovrebbe essere indipendente dalla piattaforma. Senza una valida soluzione alternativa, classificherei la gravità di questo problema come un tappo.


MODIFICARE:

Un altro suggerimento su cosa puoi fare riguardo alla tua UI è dal gioco The Incredible Machine (1993). ( Esempio su Youtube. ) Si concentra sulla risoluzione esatta del tipo di problema e lo fa in modo molto elegante e intuitivo, usando solo il tasto sinistro del mouse e il tasto sinistro del mouse. Oltre alle opzioni di base disponibili per ogni tipo di elemento, copre anche il trascinamento di collegamenti tra oggetti o l'indicazione di azioni non consentite. (Utilizza le icone, ma nulla ti limita nell'utilizzo di etichette di testo o layout diverso delle opzioni di menu.) Le opzioni per un elemento vengono visualizzate dopo l'attivazione dell'elemento (clic).

  • Facoltativamente, puoi rispondere anche al puntatore a comparsa, evidenziando l'elemento (comunicando che "questo elemento consente l'interazione") o direttamente visualizzando le sue opzioni di menu. Questo può essere un bel bonus per gli utenti del mouse, ma i touchscreen di solito non supportano l'hovering.

Gli utenti più esigenti apprezzeranno la possibilità di attivare le opzioni di menu tramite tastiera (dopo aver selezionato la voce). Sapevi che funziona anche su questa pagina che stai leggendo (dopo aver attivato nella pagina del tuo profilo: tab Modifica profilo e impostazioni > menu preferenze > check Abilita scorciatoie da tastiera ) . Qui su StackExchange, modifico sempre i miei post premendo E invece di individuare visivamente il collegamento di modifica (e quindi trovarlo tramite il puntatore del mouse). Quindi se puoi aggiungere E per modifica, R per rinominare ecc., potrebbe aggiungere valore all'interfaccia utente, perché per alcuni utenti pesanti, è spesso più comodo premere alla cieca un tasto sulla tastiera piuttosto che puntare a una piccola icona/etichetta rettangolare usando il mouse.

4
miroxlav

Il principale difetto che vedo nel tuo approccio è che stai introducendo un paradigma di interazione piuttosto insolito. Ciò renderà la tua app unica, probabilmente a costo di confondere gli utenti almeno all'inizio.

Tuttavia, questo modello non mi piace, perché occupa il settore immobiliare e distoglie l'attenzione dell'utente dal contenuto principale.

Poiché l'icona touch che usi occupa praticamente la stessa quantità di proprietà immobiliari, direi che stai meglio con l'indicatore del menu più comune da fare clic.

Un altro difetto: la pressione lunga richiede solo più tempo di un semplice clic/tocco. E potrebbe interferire con l'interazione di trascinamento della selezione.

22
Marian

È difficile sovraccaricare un'azione comune come fare clic (toccare)

Sono stato in grado di chiedere ad alcune persone cosa ne pensano dell'ultimo Mac Book Pro con trackpad e force touch più grandi e tutti hanno disabilitato l'opzione force touch .

Pensa all'attrito che questo aggiunge all'utente quando deve ora distinguere tra clic e realmente fare clic su qualcosa.

Questo non vuol dire che un'opzione di blocco dei tocco non può funzionare per i tuoi utenti particolari, ma in generale ci sono alcune persone che fanno semplicemente clic lento e ora possono accedere solo alla funzionalità dietro uno dei tuoi due tipi di clic.

Ecco alcune cose da tenere a mente quando vai su long-press itinerario...

Cerca di non mettere funzionalità vitale dietro l'azione

È difficile per gli utenti scoprire nuove interazioni, quindi se l'unico modo per svolgere un compito critico è quello di toccare più a lungo le cose, alcuni di loro saranno bloccati dal fare il loro lavoro. Se la long-press l'azione è solo "la ciliegina sulla torta", quindi può migliorare l'esperienza degli utenti frequenti. Come per tutto il resto, devi testarlo con i tuoi clienti perché una folla più esperta di tecnologia ha più familiarità con long-press utilizzato al posto di un right-click

Gli utenti dovranno essere addestrati

Questa non è un'interazione abbastanza comune per la maggior parte delle persone per capire quindi un tocco animato e tieni premuto il pop-up che chiede all'utente di fare qualcosa seguito da un "hai capito!" il messaggio sarà necessario per gli utenti principianti. Questo deve essere fatto solo una volta ovviamente e l'utente può estrapolare l'azione ad altri controlli con l'icona dopo aver eseguito correttamente l'azione.

tap hold training

Fai sapere all'utente quando sta eseguendo un long-press

È difficile ottenere la durata giusta perché troppo lunga e sembra pigra mentre troppo corta e non posso più fare clic. Al passaggio del mouse, proverei a scolorire in un anello di circa 400 ms, quindi non viene visualizzato nulla per i clic regolari e quindi far disegnare l'anello attorno al punto di tocco per oltre 1200 ms. Dovrai modificare i numeri durante il test con gli utenti ma deve essere più lungo di 1 secondo perché è il punto in cui deve essere mostrato uno spinner .

Probabilmente ci sono altre cose da considerare ma una volta che inizi davvero a pesare tutti i fattori che mostrano un elenco di opzioni sensibili al contesto non sembra così male :)

Buona fortuna e grazie per aver contribuito!

8
DaveAlger

Direi non inventare o reinventare un'interazione fondamentale a meno che tu non abbia una buona ragione.

Vorrei anche aggiungere che aggiungere un suggerimento a una o ad alcune carte non è sufficiente per comunicare "funziona per tutti" o "funziona per tutte le cose che assomigliano '.

Agli utenti piacciono gli indicatori e i segnali espliciti.

Il riconoscimento visivo e familiarità sono importanti , piuttosto che dover pensare a qualcosa. Non sembra molto a cui pensare, ma anche piccole esitazioni si accumulano per diventare un fastidio, specialmente se la lunga pressione risulta non essere qualcosa per una particolare carta.

Non vuoi aggiungere icone a tutto ciò che non tieni premuto a lungo e la pressione lunga non sarà rilevante ovunque sul tuo sito , quindi dovresti essere esplicito dove è rilevante, per evitare sorprese .

Sembra che tu stia già pensando di utilizzare uno stile simile a una carta e in genere il contesto "più" viene offerto tramite un'icona discreta nell'angolo in alto a destra della carta: stessa icona, stesso posto, ovunque possa essere utilizzata.

A parte qualsiasi altra cosa, una pressione lunga richiede un tempo relativamente lungo rispetto a un clic.

Gli esempi seguenti mostrano gli indicatori di menu più diffusi e non aggiungono molto al settore immobiliare. Certamente aggiungi più valore nel loro accesso alla funzionalità e nella loro convenienza di quanto non portino via nel settore immobiliare - specialmente dal momento che il settore immobiliare è spesso un vuoto comunque.

Trello

enter image description here

enter image description here

Facebook

enter image description here

enter image description here

LinkedIn

enter image description here

enter image description here

Twitter

enter image description here

enter image description here

Strava

enter image description here

enter image description here

7
Roger Attrill

È possibile utilizzare gli indicatori di avanzamento

Nel tuo caso questo potrebbe essere ottenuto con un indicatore di progresso lineare:

long-press progress indicator

L'indicatore si sovrappone all'elemento che si desidera premere a lungo. Quando l'utente tiene l'elemento, l'indicatore di avanzamento avanza in modo proporzionale e l'utente arresta l'indicatore di avanzamento interrompe il caricamento.

Non l'ho provato nel mondo reale, ma sembra un bel significante per la stampa a lungo.

6

Android ha recentemente aggiunto questa funzionalità di applicazioni Google a lungo premute su dispositivi touchscreen. Quindi consiglierei anche di capire chi è l'utente a livello di dispositivo. Android long press on Gmail app icon.

E provalo, il menu di Kabab a volte funziona a seconda dell'utente e se sono curiosi. Ma poiché non vi è alcun contesto in questi menu, sarà il problema da risolvere.

Cos'è che fa sì che queste certe carte nel tuo concetto abbiano bisogno di un'interfaccia secondaria? Qui è dove vorrei ancora porre la domanda. Se questo è più comune per avere questa funzionalità, allora potrebbe essere la questione di come l'interfaccia utente del sistema debba essere regolata per portare queste funzionalità in superficie come necessità dell'interfaccia utente primaria.

0
Art of FITZ