it-swarm-eu.dev

Jsou posuvné pruhy mrtvé v roce 2020?

Nedávno jsem slyšel návrháře říkat něco v tom smyslu, že moderní webové designy nepoužívají vizuální posuvníky - nebo jsou alespoň viditelné pouze při rolování. Jsem vývojář front-end a tohle jsem opravdu neslyšel. Je to pravda? Konkrétně moje otázka zní:

webové aplikace, když je obsah posouvatelný:

  1. Měli by být někdy viditelné posuvníky (a proč)?
  2. Neměly by být nikdy viditelné posuvníky (a proč ne)?
92
jbyrd

Ano, měl by.

Viditelné posuvníky jsou darem „tato stránka je rolovatelná“.

Bez vizuálních rad, jako je tato, může dojít k chybě funkce.

107
colmcq

Některé pokyny pro moderní design jistě rozptylují trvale viditelné posuvníky, ale ne všechny. Například v menu Průvodce návrhem materiál , pokud je nabídka rolovatelná, měla by zobrazovat posuvník. V každém případě, pokud je váš obsah posouvatelný, mělo by být zřejmé z pohledu na to, že to umožňuje posouvání.

Záleží na individuálním designérovi nebo na pokynu, zda je tato dotace zachycena posuvníkem, který jasně ukazuje, kolik můžete posouvat dolů (tradiční), odkaz „Číst více“ nebo šipku směřující dolů na obrazovku (jako na mnoha moderních domovských stránkách nebo blogech s aplikacemi) ) nebo vyblednutí, když se přibližujete k okraji oblasti obsahu, což znamená, že můžete posunout tímto směrem, abyste viděli více či jasněji, ale nezbytnou součástí je samotná provence. Bylo by špatné navrhnout prezentovat obsah, který lze posouvat, ale nenaznačuje tuto rolovatelnost pro uživatele. Mohlo by to uživatele frustrovat nebo způsobit, že mu chyběly důležité informace nebo výzvy k akci.

102
sintax

Jako uživatel myši se obávám rolovatelného obsahu, který mi nedává pohled na posuvníky a přístup k nim.

  1. Posuvník je ovládací prvek. To mi umožňuje rychle se orientovat na velkých stránkách, které nelze srovnávat s množstvím prstů, rolováním atd. Také mi to dává větší přesnost pro většinu stránek než moje kolečko.

  2. Posuvník mi poskytuje informace. To mi umožňuje rychle určit, jak dlouho bude trvat čtení obsahu na stránce (za předpokladu slušného posuvníku, jehož úchyt: poměr okapů se rovná poměru obrazovky: stránky) a řekne mi, jak daleko přes stránku jsem se dostal . Také mi dává index, abych zjistil, kde se na stránce nacházím, pokud chci rychle přejít nahoru a dolů.

  3. Posuvník zabírá nepatrné množství místa. Právě teď je moje obrazovka na 1920 x 1080 = 2,1 Mpx. Okno Firefoxu s touto stránkou na něm má velikost 1125 x 905 = 1,0 Mpx. Posuvník je 16 x 816, což zabírá celkem 13 Kpx, což je 1,3% mé obrazovky. Můj monitor je ke mně docela blízko, protože jej používám pro hraní her, takže mám sklon udržovat užší okno než monitor, takže posuvník ve skutečnosti nezabírá vůbec žádný prostor.

  4. Existují případy, kdy ani nevím, že je obsah rolovatelný, i když mám sklon zkoušet rolovat kolečkem bez kontroly baru, takže pochybuji, že se jedná o obrovský problém pro webové stránky. Pro stolní aplikace, které obvykle neposouvají, by to byl větší problém.

  5. Pokud chcete sklopný posuvný panel, měl by se objevit pokaždé, když ručně posouvám (kolečkem myši, klávesami klávesnice, trackpadem atd.), A pokaždé, když pohybuji myší směrem k pravému okraji obrazovky.

Mobilní zařízení jsou složitější, protože posuvník zabírá tolik prostoru, zejména pokud je dostatečně velký na to, aby ho bylo možné použít.

  • Odpověď: Obvykle tento problém vyřeším přepnutím do zobrazení na ploše (zatím jsem neviděl web, jehož mobilní verze je stejně dobrá, natož lepší než verze pro stolní počítače, takže jsem stejně výchozí pro zobrazení na ploše). Pak oddálím cestu ven, posunu dolů a potom přiblížení zpět. Je to rychlejší a přesnější než snažit se posouvat, posouvat, posouvat při přiblížení a nevyžaduje drapákový posuvník. (Také mi umožňuje přiblížit zobrazení, aby bylo možné lépe zobrazit obrázky, diagramy atd., Které většina mobilních webů nevysvětlitelně odmítá.)

  • B. Firefox na Android má nepřístupný posuvník, který mi sdělí, na které části stránky jsem (pro stolní i mobilní verzi webu), stejně jako výchozí „Internet“ "prohlížeč. Používám je stejně jako v stolním prohlížeči s myší pro indexování a určování délky stránky.".

  • C. Mám také sklon prohlížet pouze velké webové stránky na správném monitoru, takže je mnohem méně pravděpodobné, že se pohybuji na mobilním zařízení, které se pokouší procházet .pdf o 900 stránkách nebo tak něco. Pokud vaše webová aplikace nikdy nezůstává déle než dvě nebo tři obrazovky, rolování je mnohem menší problém.

  • D. Je také třeba poznamenat, že posouvání prstem na dotykové obrazovce je obvykle rychlejší a přesnější než používání kolečka myši, takže stránka musí být mnohem větší, než bude obtížné rychlou navigaci.

Závěr

U nastavení myši (nebo trackpadu nebo trackballu) si myslím, že posuvník by měl být vždy viditelný a chytitelný. Minimálně by se mělo objevit při rolování nebo při pohybu myši poblíž posuvníku.

U nastavení mobilních dotykových obrazovek si myslím, že by posuvník měl být vždy při rolování viditelný, ale nemusí být uchopitelný, a pravděpodobně by se měl skrýt, když není rolování, aby se zmenšilo zbytečné místo.

Nepohrával jsem si s tabletem/iPadem nebo většími dotykovými obrazovkami, takže si nejsem jistý, jak se k nim cítím.

Nejlepší je samozřejmě mít možnost změnit vizuální styly (buď prostřednictvím dočasných souborů cookie nebo prostřednictvím uložených uživatelských nastavení, v závislosti na tom, zda je váš uživatel hostem nebo má účet), ale měli byste nastavit výchozí funkci.

61
MichaelS

Toto hledisko pochází primárně z prostředí Mac, kde se posuvníky obvykle zobrazují krátce, když se obsah poprvé objeví, a poté zmizí. Dojde-li k rolování (spuštěné uživatelem nebo jinak), znovu se objeví posuvník. Viditelná je pouze rukojeť (jako poloprůhledná zaoblená černá lišta); žádné šípy nebo žlaby. Pokud je kurzor nad posuvníkem, když se objeví, zvětšuje se a umožňuje tažení kurzorem. V žádném okamžiku se velikost obsahu nemění; chová se, jako by posuvník nebyl přítomen, a posuvník je vykreslen nahoře.

To platí při použití trackpadu nebo vstupních mechanismů podobných trackpadu (tj. Notebooku). Při používání myši se ve výchozím nastavení stále zobrazují normální posuvníky.

Samozřejmě to platí i pro mobilní zařízení; iOS používá téměř totožné chování (bez interakce kurzoru). Ve skutečnosti si myslím, že to začalo na iOS (kde posuvníky by byly příliš malé na spolehlivé klepnutí) a přenesly se do MacOS.

Celkově to má výhody a nevýhody:

  • Není třeba vytvářet prostor pro posuvníky, což zjednodušuje design stránky (méně rušivých prvků) a poskytuje více prostoru pro obsah, zejména když lze posouvat více míst.
  • Uživatelé Mac jsou na toto chování zvyklí a očekávají.
  • Nedochází k žádnému skoku ve velikosti obsahu, když se oblast náhle stane rolovatelnou, což také opravuje běžnou dvojznačnost, kde může být potřeba posuvník, pokud je viditelný, a není potřeba, pokud je skrytý (např. Kvůli obtékání textu).

  • Na negativní straně, jak již bylo zmíněno, musíte přijít s jiným způsobem, jak naznačit, že obsah lze posouvat. Není to problém pro hlavní část webové stránky, protože se to přesto očekává, ale může to být problém pro interní obsah v závislosti na očekáváních uživatelů. Počáteční flash pomáhá, ale nestačí to vždy.

  • Interakce uživatele pro skok na jiné místo v dokumentu je neohrabaná; uživatel musí přesunout kurzor na místo, kde se objeví posuvník, mírně posouvat kolečkem myši nebo "posunutím dvou prstů", chytit posuvník, když se objeví, a přetáhnout na požadované místo. V některých případech tomu napomáhá posouvání hybnosti.
  • Protože se posuvník zobrazuje na průhledném pozadí, je-li pozadí tmavé, může být obtížné jej vidět. macOS poskytuje bílý alternativní posuvník, který lze v tomto případě použít (věřím, že prohlížeče se k tomu automaticky přepnou, pokud je pozadí dostatečně tmavé, ale není 100% spolehlivé). Také dává baru jemnou záři (nebo stín) jako bezpečnou ochranu proti selhání.

Pokud je to možné, samozřejmě se držte komponent nativních pro prohlížeč. Zajistí, aby každý uživatel získal pro svou platformu přirozený zážitek (určitě jsem viděl mnoho webů, které se snaží replikovat posouvání hybnosti a elastické posouvání s krutými konečnými výsledky). Uživatelé počítačů Mac nebudou děkovat za vynucení viditelných posuvníků tam, kde by je neočekávali, a uživatelé systému Windows vám neděkují za skrytí posuvníků tam, kde je očekávají.

26
Dave

Odstranění posuvníků podle mého názoru je dalším příkladem idiotské a mělké ideologie převádění stylu nad funkčnost. To je záda dopředu k tomu, jak by to mělo být, a svědčí o tom, jak se mi společnost otupuje. Posuvníky slouží k důležitému funkčnímu účelu, který nelze vždy replikovat jinými alternativními metodami. Myslím, že změna je zčásti založena na myšlence, že lidé používají dotykové obrazovky, takže to není nutné, ale mnoho lidí stále ne. Mnoho alternativních metod vyžaduje zvláštní soustředění a jemnost při manipulaci, což je odtok energie, kterou bych raději utratil za práci, než bojovat se špatným uživatelským rozhraním. Tradiční metody rolování obvykle jdou spolu s posouváním klávesnice stisknutím klávesy se šipkou dolů, což mi připadá mnohem jednodušší než u jiných metod, které vyžadují větší koncentraci, ale s odstraněnými rolovacími pruhy, rolování se šipkami klávesnice také někdy zmizí, což by mělo být BIG ne -Ne! Příkladem je, že velká sociální síť F neustále způsobuje podráždění tím, že je to „dynamický“ styl rolování, zatímco se posouváte nahoru v historii msg, a kde nevíte, kde jste v konverzaci, zatímco se posouváte nahoru, ale pak se posouváte nahoru kolem v určitém bodě a najednou se načte další spousta historie konverzace a skončíte skákáním daleko dopředu, kde jste chtěli být.

Myslím, že je to také částečně nevědomost a částečně touha ušetřit zdroje a šířku pásma na serverech, aby společnostem ušetřily peníze na úkor uživatelského zážitku. Jde také o hloupé věci pro idioty, aby se věci „snadněji“ používaly pro velmi základní příkazy, na úkor toho, aby se věci staly obtížnější pro každého, kdo není hloupý a mohl by chtít dělat něco tak nepatrného mimo obvyklé. Doufám, že blockchain ohlašuje konec této éry obětování uživatelských zkušeností, aby ušetřil peníze, a můžeme mít systémy, které fungují rychle a jsou bezproblémové pro základní i pokročilé uživatele.

Nebylo by například skvělé, kdyby vám software, jako je skype a F messenger, umožnil okamžitý přechod na samý začátek vaší historie msg, místo čekání navždy na načtení části za oddílem ?! Vždycky jsem měl podezření, že se šetří zdroje načítání celé partie najednou. Pokud by to však navrhoval někdo s trochou inteligence a nuancovaného myšlení (běžnější v kruzích blockchain než v korporacích, doufám), mohli bychom všichni mít svůj dort a sníst ho. Můžeme ušetřit zdroje (což stále ještě není triviální věc ani v blockchainu) a získáme informace, které chceme, okamžitě, aniž bychom se museli vzdát tohoto strašného systému načítání stránky po stránce.

Jednoduše rozložte rámec celé historie časové osy na posuvníku spolu s daty, která se objeví při procházení. Jakmile pustíte tlačítko myši nebo posun rolování, může se určitá sekce načíst. Pokud se chcete vrátit zpět na začátek, přejděte doprava nahoru a načte se pouze první stránka. Pokud však potřebujete vše rychle načíst, třeba když například prohledáte klíčové slovo, pak stačí zadat jednoduché tlačítko, které lze v případě potřeby stisknout, abyste získali celou historii msg nebo historii toho, čím jste procházeli.

Pokud někdo výslovně signalizuje, že je nutné vše načíst, pak by blockchain měl obsáhnout zdroje. To je rozdíl mezi tím a korporacemi na starém modelu, o kterém se domnívám, že by se nechtěl dovolit i těm, kteří potřebují vše, aby se vše načetlo, aby tak mohli chránit své zdroje pro svůj špinavý motiv zisku a podráždit uživatele. Z tohoto důvodu potřebujeme blockchain a nejlépe otevřenou verzi.

11
Lex

Jako smíšené hledisko ...

Vodorovné posuvníky jsou obvykle špatné. Může to znamenat, že jste optimalizovali šířku obrazovky monitoru PC, který se nepřenáší dobře na mobilní zařízení. Při procházení dolů vyžaduje čtení celé stránky spoustu zleva doprava posouvá každou obrazovku obsahu. A naopak, tyto stránky budou mít zbytečné místo na větších obrazovkách. (Starší čtenáři, pamatujte si webové stránky, které říkají „Nejlépe prohlíženo na 1024x768“? Jo, ty.) Neměli bychom se s tím v roce 2019 vyrovnat - to není devadesátá léta a stále nepoužíváme Netscape Navigator. Prostě tam nejděte.

Na druhé straně svislé posuvníky jsou v pořádku. Jsme intuitivně zvyklí něco posouvat dolů - například na to, jak byste četli papírové noviny. Celá stránka je snadno viditelná pouhými svitky nahoru/dolů.

Existuje škola myšlenky, že více než 2 nebo 3 obrazovky plné obsahu je však příliš mnoho. Poté je těžké najít věci. Takže zatímco posuvníky fungují, nenechte se vést na stránky s neomezenou délkou!

8
Graham

Ano, posuvné pruhy by měly být viditelné, pokud nejsou z jiného důvodu než kvůli usnadnění přístupu.

Existuje mnoho případů, kdy skrytí posuvníku způsobí, že váš web/program bude kdekoli mezi frustrujícími a hranicemi nepoužitelný:

  • Přístup k vaší stránce pomocí pomocného hardwaru/softwaru
  • Pomocí myši, která nemá rolovací kolečko
  • Použití systému vzdálené plochy, který neprochází událostmi posouvání
  • Použití touchpadu, který posouvá pomocí gest více prstů (většina průměrných uživatelů neví, že existují)
  • Pomocí dotykové obrazovky je stránka vyšší než několik obrazovek vysoká a já musím přejít někam na druhý konec stránky
  • Pomocí dotykové obrazovky posouvejte stránku, která je plná odkazů/tlačítek (kde je pravděpodobné, že pohyb klepnutím a švihnutím něco náhodně aktivuje)

Viditelné posuvníky jsou snadným způsobem, jak se těmto problémům vyhnout. Pokud je hlavním argumentem vašeho kolegy, že to dělají jiné weby, pak ho ani neposlouchejte. Tlak vrstevníků není platným argumentem, pokud není doprovázen významným, smysluplným důvodem proč dělat to je dobrý nápad. Tento druh myšlení je, jak <blink> Značka se stala populární.

Také kvůli usnadnění přístupu neimplementujte vlastní posuvníky. Použijte ty, které poskytuje systém. Pomocná technologie nedokáže vždy identifikovat domácí posuvníky a jako takové je ovládat.

7
bta

Posuvník je velmi užitečný

  1. ukazuje uživateli, že stránka je posouvatelná
  2. ukazuje uživatele, kde se aktuálně nachází na rolovatelné stránce

Nemáte ponětí, kolikrát jsem byl naštvaný a prohrál, protože nějaký mizerný návrhář si myslel, že odstranění posuvníku je dobrý nápad.

3
Solid_Metal

Chcete-li přidat k odpovědi MichaelaS,

Na tabletech a iPadech je výhodnější rolovací lišta, kterou nelze uchopit, která se skryje, když není rolování. Jak řekl, rolování na dotykových zařízeních je mnohem přesnější a viditelné, poutavé posuvné lišty jsou neohrabané a nepříjemné. V závislosti na délce stránky by však bylo vítáno tlačítko zpět na začátek.

Také při psaní na StackExchange pomocí iPad pro 12,9 palce jsem si všiml, že přidání slušného (~ 1 cm) množství výplně v nepatrně odlišném tónu je užitečné, protože umožňuje rolování bez náhodného otevírání odkazů.

2
Bob Kerman

Zajímavá otázka, moje 2c pochází od vývojáře, ale vede UX a také má navržená rozhraní s několika interními posouvatelnými oblastmi.

Několik bodů:

  1. Viditelné posuvníky by měly existovat, pokud je obsah dostatečně velký, aby vyžadoval posouvání, protože přítomnost posuvníku naznačuje a umožňuje, že obsah lze posouvat.
    • Nekonečný svitek je moje osobní představa pekla, zejména pokud jste klikli na kolejnici a přetáhli ji (tečnou přes)
  2. Pokud obsah nelze posouvat, pak posuvníky jsou anti-prémie naznačující věci, které se nemohou stát.
    • Případ Edge je věc, kterou nelze posouvat nyní, ale mohla by být schopna říci, že se obsah zvětšuje, což je běžné u editorů nebo jakéhokoli systému s dynamickým výstupem. Konkrétně proto, že pokud přidáte nebo odeberete funkci posouvání, kterou si dokáže s rozloženími zasílat, zobrazí se horizontální jank, jak se obsah rozšiřuje a poté se objeví posuvník. (pokud používáte overflow: auto například). V takovém případě může být jednodušší umístit deaktivovaný posuvník, který označuje, že se jedná o posouvatelnou oblast, ale obsah ještě není dostatečně velký, aby toto chování umožnil.
  3. Horizontální posuvníky jsou obvykle špatný nápad, pokud jsou kombinovány se svislými posuvníky, které se zavádějí, a implicitní výběr režimu. Stejně jako ve výchozím nastavení je posouvání myší normálně svislé posouvání, ale s implicitním přidáním klávesy (nebo interakce trackpadu) lze dosáhnout vodorovného posouvání. Složitost toho je velmi zřídka dosažena.
  4. V některých aplikačních rozhraních (např. Slippy mapy) může být dobrý nápad odstranit všechny posuvníky, protože obsah se pohybuje pod oknem prohlížeče v tomto paradigmatu, nikoli naopak. Většina uživatelů dobře rozumí ovládacím prvkům.
  5. Pokoušet se stylovat posuvníky není 99% času, není to skvělý nápad, pokud nechcete mít mnoho konkrétních vlastních verzí, akceptujte, že nebudou vypadat dokonale ve všech prostředích a používat výchozí nastavení prohlížeče.
1
dougajmcdonald

Hovoří designér o nahrazení posuvných lišt plovoucím tlačítkem pro posun dolů/nahoru? Myslím, že je to rozumné, protože se jedná o přístup založený na mobilních zařízeních a viděl jsem, že se v určitých kontextech úspěšně používá, ale tato tlačítka nemohou nahradit posuvníky v mřížce.

0
Ling