it-swarm-eu.dev

Je „user-select: none“ špatný UX?

Dnes jsem vedl diskusi s kolegou. Ukázal jsem jí „user-select: none“ - vlastnost CSS, která uživateli brání ve výběru textu.

Tato vlastnost mi umožnila vytvořit na stránce více zážitků podobných aplikaci - zajistit, aby události, jako je dvojité klikání, nezpůsobily výběr textu v oblastech, které by nebylo možné v aplikaci vybrat (jako jsou možnosti na navigační liště) , vlastní vybrané prvky, štítky atd.).

Můj kolega nesouhlasil s tím, že přidal jakýkoli polština, a navrhl, aby uživatelé měli možnost vybrat a zkopírovat jakýkoli text ve webové aplikaci.

Jaký je konsenzus v tom z pohledu UX. Měli bychom se snažit, aby weby vypadaly spíš jako aplikace? Nebo by se měl web cítit jako web - což znamená, že neměníme výchozí chování, jako je toto?

104
Brody McKee

Existuje snadný způsob, jak se dostat k user-select: none, a to je položit jednu otázku:

Bylo by výběrem textu primární/sekundární interakce, kterou by uživatel zamýšlel dotknout obrazovky, nebo by to bylo překážkou pro úkol, který se snažili provést?

Image Kolotoče (milujte je nebo nenáviděte) jsou fantastickým příkladem. Co chcete v dotykovém rozhraní - jako někdo, kdo se pokouší komunikovat s karuselem - stát, když stisknete prst dolů nad jeden a pak se posuňte doprava nebo doleva? Chcete, aby se kolotoč otočil, nebo chcete vybrat obrázek pod prstem?

Pokud dojde k náhodnému výběru jednoho prvku obrázku karuselu při rolování, můžete jej dokonce zrušit výběr, nebo jste nyní zobrazeni s vybraným prvkem, který může udělat něco jiného, ​​pokud se pokusíte klepnutím na něj zrušit výběr (například navigace na stránce, pokud img element je uzavřen v elementu a)? Nebo, v závislosti na uspořádání divů, které tvoří strukturu karuselu, jste si nyní nějak vybrali vyšší vrstvu, která ponechává výběrový zvýraznění na každém obrázku? (Viděl jsem, jak se to všechno děje ve špatně kódovaných karuselových implementacích)

Obecně se jedná o případ, kdy chcete, aby prezentovaná sada objektů fungovala jako ovládací prvek navigace (posuvný seznam obrázků) a pokud prohlížeč interpretoval dotek jako příkaz pro výběr, narušil by tuto roli a navázal interakci s vaší kontrolou. frustrující.

Cíl při zaměstnávání user-select: none by mělo být vždy omezeno na snížení frustrace uživatelů z nezamýšlených výběrů vyplývajících z interakce, které jim mohou snadno způsobit při pokusu o provedení primárního úkolu kontroly, na které se používá.

„A co ochrana mého obsahu před lidmi, kteří jej zkopírují jeho výběrem ??“ můžete mít sklon se zeptat. Odpověď na to bude vždy: ne. Nejen, že je to ubohé UX, ale je to také nesmyslně zbytečné. Každý, kdo si opravdu přeje zkopírovat váš obsah, má k němu stále přístup; právě jste udělali to frustrující, aby se dostali k, což jim umožní méně se zajímat o to, zda to, co dělají, je etické: v zásadě propagujete morální rozpojení a umožňujete, aby jejich schéma hodnocení vyvážilo jejich normální etická schémata proti jejich frustrace. s vámi, snižující práh kognitivní disonance v ospravedlňování úkonu, jako je kopírování obsahu.

user:select none není nikdy faktor bezpečnosti. Nikdy jej nepoužívejte v očekávání dosažení vyšší úrovně bezpečnosti před porušováním autorských práv/atd. Váš obsah je stále ve zdroji (a je stále dost snadné pořídit snímky obrazovky, což by pro vás bylo ještě těžší najít, pokud byste se pokusili zjistit porušení).

Nikdy byste neměli používat user-select: none pro zabránění výběru obsahu. Prohlížeč sám je v tomto případě zodpovědný za rozhodování mezi posouváním a výběrem a měl by se na něj spolehnout, že bude řádně vykonávat svou práci při rozlišování uživatelského záměru mezi těmito dvěma možnými akcemi (výběr nebo posouvání). I když vždy budou existovat výjimky, mějte na paměti, že tyto dvě akce jsou globálně konzistentní očekávané interakce. Jejich rušení pravděpodobně povede k tomu, že se vaše aplikace nebude chovat způsobem, který se očekává, což je primární zdroj frustrace.

Osobně bych řekl, že jste se svým příkladem použití na správné cestě.

Chtěl bych jen upozornit, že user-select: none je velmi tupý nástroj, který lze použít pouze na základě konkrétní potřeby. I když to může přidat polštář, buďte opatrní, že jej nepoužíváte někde, kde se výběr z vašeho kontextu zdá zbytečný, ale který by ve skutečnosti mohl být něco, co by si osoba, která by vaši aplikaci chtěla vybrat, mohla vybrat z určitého důvodu a kde schopen vybrat, nebude jinak vážně zasahovat do zamýšlené interakce při pokusu o provedení primární úlohy, kterou ovládání vystavuje.

Dobrým příkladem jsou dialogy s modální chybou. Mohlo by to být lákavé učinit je nezvolitelnými, takže je odstraní jakákoli interakce, nebo podobné zdůvodnění toho, co je zamýšleno jako efektivní zážitek nějakého druhu, ale to může být nesmírně frustrující, pokud někdo čelí chybě a chce vypadat to nahlásit nebo nahlásit na podporu, ale nemůže snadno zkopírovat, aby tak učinily. Při ovlivňování a zejména při odstraňování standardních způsobů interakce v daném prostředí se vždy mýlejte na straně opatrnosti a lehkého doteku.

Obecně bych řekl, že kdykoli něco je (nebo zahrnuje) informativní obsah - jako příklad chybové zprávy - spíše než kontrolní akce, která neobsahuje žádné nové informace, neměla by téměř ve všech případech user-select: none aplikováno na to. To platí zejména v případě, že tento obsah není prezentován ve volitelné formě na jiném místě na stejné nebo těsně související obrazovce. Vždy budou existovat výjimky, ale chtěl bych být opatrný, že je obecně lepší přehodnotit, jak něco implementujete a najít jinou metodu kontroly, než je použít user-select: none kde je obsah prezentován namísto jednoduše akčních slov/obecných termínů/atd.

Někteří lidé tvrdí, že (některé) mobilní aplikace odstranily míru, do jaké je to standardní interakce. Řekl bych, že v širším, nej globálnějším kontextu je to stále standardní interakce a mnoho z těchto aplikací pravděpodobně snížilo jejich uživatelské zkušenosti tím, že tak učinilo, nebo prostě bylo nedbalé v jejich programování tím, že neposkytovalo možnost provádět výběr (jako je tomu tak někdy namísto jejich konkrétního zákazu).

Zejména při prezentaci aplikace prostřednictvím jiného agenta (například webového prohlížeče) je důležité nechat agenta uživatele co nejvíce zachovat své vlastní metody interakce s obsahem. To nejen zvyšuje soulad a konzistenci v uživatelském prostředí, ale také zvyšuje kompatibilitu mezi platformami a agenty a dokonce pomáhá zajistit budoucí testování a funkčnost napříč případy použití nebo prostředími, které jste nemuseli osobně předvídat.

104
taswyn

Obecně byste jej neměli používat globálně.

Uživatelé často vyberou nějaký text, možná zdůrazní něco, aby ukázali část textu příteli, zkopírovali text nebo označili text, aby ho mohli lépe číst (což dělám, když je text docela široký a je-li to těžko sledovat zábal textu ve větě).

Existují však opravdu dobré příklady, kde je to dobrá volba.

  • Tlačítko

    Pokud uživateli povolíte, aby na tlačítku vybral text, může si myslet, že na tlačítko kliknul, takže na tlačítko vypněte efekt zvýraznění výběru.
    CSS pravidlo pro deaktivaci zvýraznění výběru textu pro lepší UX

  • Stránka s kódem

    Chcete zkopírovat kód, ale ne čísla řádků, takže deaktivujte zvýraznění pouze na číslech řádků.

  • Web, na kterém můžete stránky navigovat vodorovným přetažením.

    Pokud uživateli povolíte výběr textu, bude navigace opravdu složitější.

    Pokud však takový web máte, nedávejte na něj obsah. Protože je třeba vybrat obsah ve formátu RTF.

Dobrým řešením by bylo vytvořit titulní web, který bude možné horizontálně přetáhnout na další titulní stránku. Chcete-li zobrazit obsah, musíte stisknout tlačítko a přejít na stránku s obsahem.

Také jste hovořili o „zkušenostech s aplikací“, a ano, je to pravda, zřídka můžete kopírovat text. To, co osobně považuji za opravdu nepříjemné, je, když vám aplikace nedovolí kopírovat nebo zvýrazňovat obsah; například příspěvky v aplikaci Facebook - umožní vám zkopírovat celý komentář reagující na příspěvek, ale znovu vám nedovolí zvýraznit jednotlivá slova.

Musíte se rozhodnout, zda chcete zvýraznění deaktivovat. Pokud zvýraznění textu nepoškodí použitelnost (např. Horizontální přetažení), pak bych to nezakázal, zejména protože uživatelé stolních počítačů jsou zvyklí kopírovat text.

Lepší: zlepšit zážitek z zvýrazňování textu.

Medium.com vám dává více možností, co můžete dělat se zvýrazněným textem:

Jen přemýšlejte o tom, co uživatel udělá s vaším textem. Podpořte uživatele s jeho potřebami.

Můžete to však ještě zhoršit, například Google Fonts:

70
Michael Schmidt

Existují lidé jako „čtenáři výběru“. Jsem jedním z nich. Já (z nějakého důvodu pro mě vědomě neznámý) mám tendenci vybírat text, zatímco čtu. Webové stránky, které mi to brání, mě dělají velmi smutné a zhoršují mé uživatelské prostředí.

Rovněž naprosto nesouhlasím s tím, co je v současné době nejlepší odpovědí. Ty věci, které se objeví, když si vyberete něco, také vážně obtěžují čtenáře výběru.

Přestaňte se snažit dělat věci jako aplikace! Můj počítač není telefon! Nechci se omezovat pouze na akce, které mohu provádět na telefonu při používání vašeho webu!

Další čtení: http://blogs.msdn.com/b/oldnewthing/archive/2015/05/28/10617693.aspx

33
Muzer

Neschopnost vybrat text je v současné době na moderních webech nejobtížnější a uživatelsky přívětivější vlastnost CSS.

Důvody:

  • Nezkoušejte jednat, jako by naše webové stránky byly něčím, co není. Nejedná se o mobilní aplikaci a důvodem, proč nemůžete vybrat text v aplikaci, je to, že není uvnitř textového pole, a proto by neměl být vybrán z nějakého důvodu.
  • Mobilní ekosystém je zcela odlišný od počítačového systému „výkonného uživatele“. Většina lidí, kteří používají na svém počítači webové stránky, chce pracovat - nebo dělat prakticky cokoli, co nemohli udělat na svém mobilním zařízení díky SVOBODA myši a klávesnice jim dá.
  • Nevidím žádný důvod, proč by někdo omezil někoho na kopírování nějakého textu. Pokud se chystáte být tak nepříjemný a omezit mě v tom, abych to dělal na uživatelské úrovni, jednoduše se ponoří trochu do HTML kódu, zkopíruji to, co potřebuji a NIKDY NEPOUŽÍVEJTE VAŠU WEBOVOU STRÁNKU EVER AGAIN.

Vím, že je to trochu příliš dramatizované - ale prosím, nedělejte to.

edit: To neznamená, že mít tlačítka nebo štítky s textem, který nemá skutečný důvod ke kopírování s touto vlastností, je nepravdivé, je to vlastně žádoucí.

15
downrep_nation

Existuje mnoho kontextů, ve kterých je dobrý UX, a mnoho tam, kde je špatný UX - neexistuje žádná univerzální odpověď.

Když ve své otázce nahlásíte tlačítko nebo akci, která po kliknutí zvýrazní text, není dobrý UX, a je pravděpodobné, že existuje jen velmi málo okolností, kdy by uživatel měl tento text zvýraznit.

Těla textu by však neměla být zakázána - pokud existuje interakce, které způsobí, že se text zvýrazní, může být nutné znovu zvážit - protože to pro dané médium zjevně není vhodné.

A jak je uvedeno jinde, nikdy byste neměli zakázat zvýrazňování vše textu. Pokud to uděláte, mělo by to být velmi selektivní (tlačítka, v podstatě).

9
Nathan Hornby

Pohrávat si se standardními funkcemi aplikace (např. Výběrem textu v prohlížeči) je špatný nápad téměř ve všech případech ... uživatel očekává, že provede jakoukoli akci, kterou udělal. Nemohou, protože jste to porušili - ergo jste nesplnili očekávání uživatelů. Je to jednoduché.

Osobní pravidlo:

  • Ve všech případech je zakázání zvýraznění textu neuvěřitelně hloupé. I když si myslíte, že to nikdo nebude chtít zvýraznit, nikdy to nevíte. Byli byste překvapeni, k čemu se lidé dostanou.
  • Zakázání zvýraznění při zvýraznění nějakým způsobem přerušení uživatelského rozhraní je dobrá věc. Vzácné, ale může se to stát. 'Breaks the UI' může být něco jako
    • umožňuje posouvat, když byste neměli být schopni
    • dává uživateli falešný dojem (např. že může dělat něco, co je nemožné)
5
Algy Taylor

Existuje jen jeden kontext, kde jsem to považoval za užitečnou funkci, a to bylo v kontextu hra.

Měl jsem hřiště, s nímž hráč pracoval pomocí myši. Na této hrací ploše byly objekty s textovými štítky. Hráč někdy chtěl kliknout na objekt, ale místo toho označil text na štítku. To bylo špatné, protože to nebylo to, co uživatel chtěl dělat. Nastavení user-select: none na textových štítcích problém vyřešil. To byl dobrý nápad.

2
Philipp

Pokud pracuji sám, ve výchozím nastavení jej deaktivuji a aktivuji selektivně.

Myslím, že výběr textu položky nabídky nebo názvu tlačítka nepřináší pro finální produkt velkou hodnotu a někdy mohou interakce uživatele narušit design přidáním zvláštních pozadí do textových uzlů. (Možná existuje stránka použitelnosti, o které nevím?)

Jediný případ, kdy si myslím, že výběr textu může být užitečný, je, když existuje informativní text, například v dokumentu nebo časopise, nebo účelem stránky je předložit text.

Při práci v týmu si však myslím, že to není v pořádku, protože to přepíše výchozí způsob, jakým prohlížeč zobrazuje stránku, a noví členové týmu musí předem vědět zbytečné informace, které by mohly způsobit chyby? (V tuto chvíli si nemůžu vzpomenout na chyby, které mohou být způsobeny touto vlastností).

Jako každá funkce, pokud se o to postaráte a víte, co děláte, neměly by existovat neřešitelné a kritické problémy.

0
Ernesto Hegi