it-swarm-eu.dev

Aby bylo jasné, které položky v dlouhém seznamu jsou vybrány

Snažím se navrhnout část webového rozhraní, které umožňuje uživatelům označovat položky a prohlížet si všechny položky se značkou nebo sadou značek - myslím, že gmail, pokud vám gmail dovolí snadno vybrat více značek pro zobrazení všech zpráv se všemi těchto značek. Jaký je nejlepší způsob, jak ukázat uživateli, jakou sadu značek si právě prohlíží?

Jednoduché zvýraznění funguje pro jednu značku, ale pokud je seznam značek delší než na obrazovce, nebudou moci všechny zobrazit najednou, což povede k tomu, že nebude jasné, které značky uživatel vybral. Kromě tohoto problému mám k dispozici malé množství místa pro práci - celé rozhraní tagů a položek je asi 300x500 pixelů, takže zobrazení vybraných značek v dlouhém horizontálním seznamu není možnost.

Přemýšlel jsem o vytvoření sekundárního seznamu v horní části seznamu značek s vybranými značkami (podobně jako ty rozevírací seznamy, které zdůraznily USA a další země ), ale přemýšlím, jestli existuje lepší alternativa.

13
sslepian

Použijte Faceted Navigation pattern . Amazon.com s tím odvádí skvělou práci:

Amazon faceted navigation

(screenshot z těchto výsledky vyhledávání pro Nintendo DS - mějte na paměti, že pokud máte svislé omezení, můžete své zkrátit)

Některé poznámky:

  • Velmi jasná komunikace o tom, co je aktuálně vybraná položka v každém aspektu (v tomto případě černá tučně vs. modrá pro odkazy)
  • Skvělá čitelnost tím, že z každé položky není hypertextový odkaz, i když jsou to všechny hypertextové odkazy - v tomto případě je užitečnější upřednostnit čitelnost nad vzorem podtržení hypertextového odkazu
  • Každá faseta zobrazuje, kolik výsledků je k dispozici, pokud byste na ně měli kliknout. Implementace se někdy komplikuje, záleží na vašem backendu vyhledávání.
  • Správná kontrola závisí na tom, s jakým aspektem se zabýváte, a také na skvělém copywritingu a správném znění („Posledních 30 dní“ pro data, protože vám v tomto případě nezáleží na konkrétních datech atd.)
  • Schopnost zvýšit o jednu úroveň výše s každým aspektem, v podstatě „zrušit“ váš výběr v tomto aspektu. Všimněte si použití < na rozdíl od červeného kříže (x) jako mnoho jiných webů.
  • Zkombinujte to se strukturou navigace strouhankou, jak Amazon udělal pro další rozměr užitečnosti v případě, že lidé skenují shora dolů a nehledají v levém/pravém sloupci

Nedělejte si starosti s tím, že neuvidíte každou vybranou věc, pokud je vybráno mnoho věcí - do kterých je třeba spadnout. Uživatelé zjistí, že na stránce je více vybraných možností, pokud provedli mnoho výběrů (představte si výběr jedné z každé fasety v příkladu Amazonu). Chcete-li věci trochu vyrovnat, můžete seskupit vybrané aspekty nahoře, jak navrhuje @onnodb, i když bych je neskryl za kliknutí (jako v ovládacím prvku select).

7
Rahul

Řekl bych, že má smysl vytvořit tento „sekundární seznam“ vybraných značek v horní části seznamu, například: (skvělý nápad, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Vybraným značkám přidejte jinou barvu pozadí, přidejte je k odstranění tlačítka „(X)“ a řekl bych, že pro to máte velmi použitelné uživatelské rozhraní.

5
onnodb

Protože máte omezenou nemovitost, abyste s vámi mohli spolupracovat, můžete implementovat následující. Umístěte seznam značek do rozevíracího seznamu a tlačítko plus, které přidá další řádek s rozevíracím seznamem značek. Tímto způsobem jsou zobrazeny pouze tagy, které uživatel vybral.

enter image description here

3
Denzo

Vím, že je to docela stará otázka, ale podle mého názoru stále platí pro dnešní aplikaci.

K odpovědi jsem dostal inspiraci z vertikálního posuvníku Visual Studio:

MS Visual Studio scroll bar

  • výška posuvníku odpovídá velikosti plochy na obrazovce ve srovnání s celkovou délkou obsahu
  • tenká vodorovná modrá čára ukazuje, kde je kurzor aktuálně umístěn
  • tmavě žluté pruhy označují řádky, kde byl hledaný výraz nalezen

Pro otázku OP - pokud máte seznam položek, které přesahují kapacitu obrazovky, musíte použít posuvník. Pomocí posuvníku můžete zobrazit, kde jsou vybrané položky v seznamu.

0
Mike

Jen z temene hlavy ...

Možnost 1: Upravte atribut „title“ tak, aby se vybrané položky zobrazovaly na vznášedle. Možnost 2: Pomocí jQuery přidejte událost se vznášením pro seznam, který prochází prvkem a uvádí vybrané položky.

0
Babak Naffas

Existuje několik způsobů, jak toho dosáhnout:

1) Jak jste zmínili, můžete zvýraznit vybrané značky a přitom zachovat jejich pořadí v seznamu. Chcete-li překonat problém uživatelů, kteří si nejsou vědomi toho, že se vybrané stránky nezobrazují na stránce, můžete udělat něco, aby se jim to dostalo do pozornosti - něco jako blikající šipky v dolní části sekce tagů na stránce a informujte je, že něco existuje důležité, pokud posouvají dolů

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

Značky zvýrazněné == a vv jsou blikající šipky

2) Také si můžete vytvořit další seznam nahoře, ale odstranit značky z originálu, abyste měli vždy stejnou výšku v sekci tagů.

3) Vybrané značky můžete nechat zobrazit jako svislý seznam pod nadpisem výsledků vyhledávání.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Všimněte si malých xs vedle každého názvu značky; to umožní uživateli rychle odebrat značky a výsledky by se měly odpovídajícím způsobem změnit.

Upřednostňoval bych možnosti 2 nebo 3. 3 Mohlo by to být lepší, protože uživatelé by mohli být trochu překvapeni, že seznam značek se mění, protože stále vybírají značky.

0
Waleed Al-Balooshi