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

UX "user-select: none" non è valido?

Stavo discutendo oggi con un collega. Le ho mostrato "user-select: none" - una proprietà CSS che impedisce a un utente di selezionare il testo.

Per me, questa proprietà ha permesso di creare un'esperienza più simile a un'app su una pagina, garantendo che eventi come il doppio clic non causassero la selezione di testo su aree che non sarebbero selezionabili in un'app (come le opzioni su una barra di navigazione , elementi di selezione personalizzati, etichette, ecc.).

Il mio collega non è d'accordo sul fatto che abbia aggiunto qualsiasi polacco e ha suggerito che gli utenti dovrebbero essere in grado di selezionare e copiare qualsiasi testo in un'app Web.

Qual è il consenso al riguardo da una prospettiva UX. Dovremmo cercare di rendere i siti più simili alle app? O il web dovrebbe sembrare web - il che significa che non cambiamo comportamenti predefiniti come questo?

104
Brody McKee

C'è un modo semplice per avvicinarsi a user-select: none, ovvero porre una sola domanda:

La selezione del testo sarebbe l'interazione primaria/secondaria che un utente vorrebbe se toccasse lo schermo lì, o sarebbe un ostacolo al compito che stavano cercando di svolgere?

I caroselli di immagini (amarli o odiarli) ne sono un esempio fantastico. In un'interfaccia touch, cosa vuoi, come qualcuno che cerca di interagire con la giostra, quando vuoi premere il dito verso il basso sopra uno e quindi scorrere verso destra o sinistra? Vuoi ruotare il carosello o vuoi selezionare l'immagine sotto il dito?

Se un singolo elemento dell'immagine della giostra viene selezionato accidentalmente durante lo scorrimento, puoi anche deselezionarlo o ti viene ora presentato un elemento selezionato che potrebbe fare qualcos'altro se provi a toccarlo per deselezionarlo (come la navigazione della pagina, se il img è racchiuso in un elemento a)? Oppure, a seconda della disposizione dei div che modella la struttura della giostra, hai appena selezionato in qualche modo un livello superiore che lascia un punto culminante di selezione su ogni immagine? (Ho visto tutto ciò accadere in implementazioni carosello scarsamente codificate)

In generale, questo è un caso in cui si desidera che l'insieme di oggetti presentato funzioni come controllo di navigazione (elenco scorrevole di immagini) e se il browser interpretasse il tocco come un comando di selezione interferirebbe con quel ruolo e renderebbe l'interazione con il controllo dell'utente frustrante.

L'obiettivo nell'impiegare user-select: none dovrebbe sempre limitarsi a ridurre la frustrazione dell'utente dalle selezioni non intenzionali risultanti da interazioni che possono facilmente causarle quando si tenta di svolgere lo scopo principale dell'attività di un controllo sul quale viene utilizzato.

"Che ne dici di proteggere i miei contenuti dalle persone che li copieranno selezionandoli !?" potresti essere propenso a chiedere. La risposta sarà sempre: no. Non solo quella scarsa UX, ma è anche assurdamente inutile. Chiunque desideri veramente copiare i tuoi contenuti ha ancora accesso ad essi; hai appena reso più frustrante arrivare, il che li renderà meno inclini a preoccuparsi se ciò che stanno facendo è etico: stai essenzialmente promuovendo il disimpegno morale e consenti al loro schema di valutazione di bilanciare i loro normali schemi di Etica contro la loro frustrazione con te, riducendo la soglia della dissonanza cognitiva nell'auto-giustificare un atto come copiare i tuoi contenuti.

user:select none non è mai un fattore di sicurezza. Non usarlo mai in attesa di raggiungere un livello più elevato di sicurezza dalla violazione del copyright/ecc. Il tuo contenuto è ancora lì nella fonte (ed è ancora abbastanza facile da catturare schermate, il che sarebbe ancora più difficile da trovare se stessi cercando di rintracciare la violazione).

Non dovresti mai usare user-select: none per impedire la selezione del testo del contenuto. Il browser stesso è responsabile della decisione tra scorrimento e selezione in questo caso e dovrebbe essere invocato per fare correttamente il proprio lavoro nel discernere l'intento dell'utente tra le due potenziali azioni (selezione o scorrimento). Mentre ci saranno sempre delle eccezioni, tieni presente che queste due azioni sono interazioni attese coerenti a livello globale. Interferendo con loro probabilmente la tua applicazione non si comporterà nel modo previsto, che è una fonte primaria di frustrazione.

Personalmente, direi che sei sulla buona strada con i tuoi usi di esempio.

Vorrei solo avvertire che user-select: none è uno strumento molto contundente da utilizzare solo in base a bisogni definiti. Sebbene possa aggiungere polacco, fai attenzione a non utilizzarlo in un punto in cui la selezione del tuo contesto sembra inutile, ma che potrebbe effettivamente essere qualcosa che una persona che utilizza l'applicazione vorrebbe poter selezionare per un determinato motivo e dove essere in grado di selezionarlo non interferirebbe in altro modo con l'interazione prevista nel tentativo di svolgere l'attività primaria che il controllo espone.

Un buon esempio di ciò sono le finestre di dialogo di errore modali. Potrebbe essere allettante renderli non selezionabili in modo che qualsiasi interazione li rimuova o una logica simile per ciò che si intende essere un'esperienza semplificata di qualche tipo, ma questo può essere estremamente frustrante se qualcuno si trova ad affrontare un errore e vuole guardare farlo o segnalarlo per il supporto, ma non è possibile copiarlo facilmente per farlo. Errare sempre dal lato della cautela e di un leggero tocco quando si ripercuote e soprattutto quando si rimuovono le modalità standard di interazione fornite all'interno di un determinato ambiente.

In generale, direi che ogni volta che qualcosa è (o include) contenuto informativo, come nell'esempio del messaggio di errore, anziché un'azione di controllo che non contiene nuove informazioni, in quasi tutti i casi non dovrebbe avere user-select: none applicato ad esso. Ciò è particolarmente vero quando quel contenuto non è presentato in una forma selezionabile altrove sullo stesso schermo o in uno schermo strettamente correlato. Ci saranno sempre delle eccezioni, ma vorrei avvertire che è generalmente meglio rivalutare il modo in cui stai implementando qualcosa e trovando un metodo di controllo diverso da quello che deve applicare user-select: none dove viene presentato il contenuto anziché semplicemente parole d'azione/termini generici/ecc.

Alcune persone sostengono che (alcune) applicazioni mobili hanno rimosso il grado in cui questa è un'interazione standard. Direi che nel contesto più ampio e più globale è ancora un'interazione standard e molte di quelle applicazioni hanno probabilmente degradato la loro esperienza utente in tal modo, o sono state semplicemente sciatte nella loro programmazione non fornendo la possibilità di effettuare selezioni (come a volte è il caso, invece di disabilitarli in modo specifico).

In particolare quando presentiamo un'applicazione tramite un agente diverso (come un browser Web) è importante consentire all'utente agente di preservare il più possibile i propri metodi di interazione dei contenuti. Ciò non solo aumenta la conformità e la coerenza nell'esperienza dell'utente, ma aumenta anche la compatibilità multipiattaforma/agente e aiuta anche a garantire prove e funzionalità future in tutti i casi d'uso o ambienti che potresti non aver previsto personalmente.

104
taswyn

In generale, non dovresti usarlo a livello globale.

Spesso, gli utenti selezionano del testo, forse per evidenziare qualcosa per mostrare una parte del testo a un amico, per copiare il testo o per contrassegnarlo solo per poterlo leggere meglio (cosa che faccio quando il testo è abbastanza largo ed è difficile seguire il testo a capo nella frase).

Tuttavia, ci sono davvero dei buoni esempi in cui è una buona opzione.

  • Un bottone

    Se si consente a un utente di selezionare il testo su un pulsante, potrebbe pensare di aver fatto clic sul pulsante, quindi disabilitare l'effetto di evidenziazione della selezione sul pulsante.
    regola CSS per disabilitare l'evidenziazione della selezione del testo per una migliore UX

  • Una pagina con il codice sopra

    Vuoi copiare il codice, ma non i numeri di riga, quindi disabilita l'evidenziazione solo sui numeri di riga.

  • Un sito in cui è possibile trascinare le pagine in orizzontale per navigare.

    Se si consente all'utente di selezionare il testo, la navigazione diventa davvero complicata.

    Tuttavia, se si dispone di un sito del genere, non inserire il contenuto su di esso. Perché un contenuto RTF deve essere selezionabile.

Una buona soluzione qui sarebbe quella di creare un sito del titolo che possa essere trascinato orizzontalmente nella pagina del titolo successiva. Per visualizzare il contenuto, è necessario premere un pulsante e passare alla pagina del contenuto.

Hai anche parlato dell '"esperienza app" e sì, è vero, raramente puoi copiare del testo. Ciò che personalmente trovo davvero fastidioso è quando un'app non ti consente di copiare o evidenziare i contenuti; ad esempio, i post nell'app di Facebook: ti consente di copiare un intero commento rispondendo a un post, ma ancora una volta, non ti consente di evidenziare singole parole.

Devi decidere se vuoi disabilitare l'evidenziazione. Se l'evidenziazione del testo non danneggia l'usabilità (ad esempio il trascinamento orizzontale), non lo disabiliterei, soprattutto perché gli utenti desktop sono abituati a copiare il testo.

Migliore: migliora l'esperienza dell'evidenziazione del testo.

Medium.com ti offre più opzioni, cosa puoi fare con il testo evidenziato:

Pensa a cosa farà l'utente con il tuo testo. Supportare l'utente con le sue esigenze.

Tuttavia puoi anche peggiorare le cose, come Google Fonts:

70
Michael Schmidt

Ci sono persone come "lettori di selezione". Sono uno di loro. Io (per qualche ragione a me inconsapevolmente ignoto) ho la tendenza a selezionare il testo mentre lo sto leggendo. I siti che mi impediscono di farlo mi rendono molto triste e rovinano la mia esperienza utente.

Sono anche completamente in disaccordo con il punto su quale sia attualmente la risposta migliore. Quelle cose che compaiono ogni volta che selezioni qualcosa infastidiscono seriamente anche i lettori di selezione.

Smetti di provare a rendere le cose come app! Il mio computer non è un telefono! Non voglio limitarmi solo alle azioni che posso eseguire su un telefono quando utilizzo il tuo sito!

Ulteriori letture: http://blogs.msdn.com/b/oldnewthing/archive/2015/05/28/10617693.aspx

33
Muzer

Non essere in grado di selezionare il testo è la proprietà CSS anti-user-friendly più fastidiosa che ci sia in questo momento nei siti Web moderni.

Motivi:

  • Non proviamo ad agire come se il nostro sito Web fosse qualcosa che non lo è. Non è un'app per dispositivi mobili e il motivo per cui non è possibile selezionare il testo in un'applicazione è perché non si trova all'interno di una casella di testo e pertanto non deve essere selezionato per un motivo.
  • L'ecosistema mobile è completamente diverso dal sistema PC "power user". La maggior parte delle persone che usano i siti Web sul proprio computer vogliono lavorare - o praticamente fare qualsiasi cosa non possano fare sul proprio dispositivo mobile a causa della LIBERTÀ il mouse e la tastiera li dà.
  • Non vedo alcun motivo per cui qualcuno dovrebbe impedire a qualcuno di copiare del testo. Se sarai così fastidioso e mi impedirai di farlo a livello di utente, mi limiterò a immergermi un po 'nel codice HTML, copiare ciò di cui ho bisogno e MAI UTILIZZARE MAI IL TUO SITO WEB.

So che è un po 'troppo drammatizzato - ma per favore non farlo.

modifica: questo non significa che avere pulsanti o etichette con testo che non ha un motivo reale per essere copiato con quella proprietà sia falso, in realtà è desiderabile.

15
downrep_nation

Ci sono molti contesti in cui è buona UX, e molti dove si trova cattiva UX - non esiste una risposta unica per tutte le risposte.

Mentre contrassegni nella tua domanda un pulsante o un'azione che quando viene selezionato evidenzia il testo non è una buona UX, e ci sono probabilmente poche circostanze in cui un utente dovrebbe evidenziare quel testo.

Tuttavia i corpi di testo non dovrebbero essere disabilitati - se c'è un'interazione che causa l'evidenziazione di quel testo, potrebbe essere necessario riconsiderarlo - poiché chiaramente non è appropriato per il mezzo.

E come indicato altrove, non dovresti mai disabilitare l'evidenziazione di tutto il testo. Se hai intenzione di farlo, dovrebbe essere molto selettivo (pulsanti, in pratica).

9
Nathan Hornby

Fare casini con le funzionalità standard dell'applicazione (ad es. Selezionare il testo in un browser) è una cattiva idea in quasi tutte le istanze ... l'utente si aspetta di eseguire qualunque azione abbia fatto. Non possono, perché l'hai rotto - ergo non sei riuscito a soddisfare le aspettative degli utenti. Semplice come quella.

Regola personale:

  • In tutti i casi, disabilitare l'evidenziazione del testo è incredibilmente sciocco. Anche se pensi che nessuno vorrà mai evidenziarlo, non lo saprai mai. Saresti sorpreso di ciò che la gente si alza.
  • Disabilitare l'evidenziazione quando l'evidenziazione in qualche modo interrompe l'interfaccia utente è una buona cosa. Raro, ma può succedere. "Breaks UI" potrebbe essere qualcosa come
    • ti permette di scorrere quando non dovresti essere in grado di farlo
    • dà all'utente una falsa impressione (ad esempio che possono fare qualcosa di impossibile)
5
Algy Taylor

C'è solo un contesto in cui ho trovato questa una caratteristica utile, e che era nel contesto di n gioco.

Avevo un'area di gioco con cui il giocatore interagiva usando il mouse. Su quell'area di gioco c'erano oggetti con etichette di testo. A volte il giocatore voleva fare clic su un oggetto, ma invece contrassegnava il testo nell'etichetta. Questo è stato negativo perché non era quello che l'utente voleva fare. Ambientazione user-select: none sulle etichette di testo risolto il problema. Questa è stata una buona idea.

2
Philipp

Se lavoro da solo, mi piace disabilitarlo di default e abilitarlo in modo selettivo.

Penso che la selezione del testo di una voce di menu o del titolo di un pulsante non aggiunga molto valore al prodotto finale e talvolta le interazioni dell'utente potrebbero corrompere il design aggiungendo strani sfondi ai nodi di testo. (Forse c'è un lato dell'usabilità di cui non sono a conoscenza?)

L'unico caso in cui posso pensare che la selezione del testo possa essere utile è quando c'è del testo informativo, come su un documento o una rivista, o lo scopo della pagina è presentare il testo.

Tuttavia, quando si lavora in un team, penso che non vada bene, poiché sostituisce il modo predefinito in cui un browser consegna una pagina e i nuovi membri del team devono sapere in anticipo informazioni non necessarie che potrebbero causare bug? (Non riesco a pensare adesso a bug che potrebbero essere causati da questa proprietà).

Come ogni caratteristica, se te ne occupi e sai cosa stai facendo, non dovrebbero esserci problemi irrisolvibili e critici.

0
Ernesto Hegi