it-swarm-eu.dev

Jak naznačíte pokrok uživatelům v multikrokové podobě?

Co si myslíte o následujícím návrhu formuláře, který jsem připravil?

  • v horní části je ukazatel průběhu
  • na pravé straně jsou uvedeny kroky a pokaždé, když je aktuální stav označen výběrem

alt text http://kepfeltoltes.hu/110210/form_progress_indicator_www.kepfeltoltes.hu_.jpg

Používáte ještě něco? Je to dostačující? (v tomto případě je formulář určen pro banku)

17
Roland Pokornyik

... nebo je to už hodně? Zeptejte se sami sebe: proč potřebujete indikátor pokrok?

Obvykle označujete pokrok, aby uživatel mohl odhadnout, jak dlouho mu bude trvat, ať už může v daném čase dokončit. Pokusil bych se minimalizovat „kontextové“ prvky.

Indikátor průběh

Ve srovnání s ostatními možnostmi to dává smysl pouze v následujících případech:

  • čas potřebný pro jednotlivé kroky/stránky se výrazně liší (více než, řekněme, faktor 3), a že rozptyl je nezávislý na uživateli
  • máte pokrok na stránku, např. které přepínače již byly vyplněny. Ve většině případů by to byl jen pěkný trik, není to opravdu nutné.

Krok i/N

To postačuje, pokud uživatel nemá šanci skočit na jednotlivé kroky a může vyhladit zpět/vpřed.

Jump List

Skokový seznam jednotlivých témat je definitivní plus, pokud uživatel může přeskočit určité kroky nebo je běžným případem použití nesekvenčního zpracování. (Nemůžu myslet na ten, který nezní konstruován).

Statický seznam

V některých případech stále pomáhá statický seznam (tj. Nikoli pro navigaci, pouze indikátor). Za prvé, dává uživateli odhad, který může být mnohem lepší než krok i/N nebo ukazatel průběhu. Za druhé poskytuje rady, co uživatel potřebuje k dokončení všech stránek. Pokud je předposledním krokem „Údaje o kreditní kartě“, vím, že potřebuji kreditní kartu.

Znalost požadavků je obzvláště důležitá, když nemůžu uložit neúplnou sekvenci a pokračovat později. Statický seznam je méně indoktrinující než vysvětlující stránka.

Statický seznam nedává příliš smysl jako náhled, pokud v závislosti na vstupu uživatele větvíte a přeskočíte důležité části. Seznam skoků má v tomto případě stále smysl, pokud vám umožňuje vrátit se, možná si prohlédnete další kroky.


Existují složitější scénáře, například vyplňování daňových formulářů, kde musíte poskytnout podrobnou zpětnou vazbu, že některá pole chybí nebo jsou neplatná. To lze velmi dobře smíchat s ukazatelem pokroku.

13
peterchen

Našel jsem to příspěvek na SmashingMagazine docela poučné. Toto je výpis příspěvku :

Sledovače pokroku jsou navrženy tak, aby uživatelům pomáhaly v procesu s více kroky, a je nezbytné, aby tyto sledovače byly dobře navrženy, aby uživatele informovaly o tom, v které části aktuálně jsou, v jaké části dokončily a jaké úkoly zůstávají.

Použití sledovačů pokroku

  1. Online objednávání: Zdaleka nejběžnější aplikace pro sledování pokroku je ve spojení s online nákupem, protože to obvykle zahrnuje více kroků.

  2. Průvodci celovečerními prohlídkami: Sledovače průběhu se používají také k tomu, aby uživatele vedly prostřednictvím online produktů a služeb, jak ukazuje následující příklady:

  3. Vícestupňové formuláře: Pokud formulář vyžaduje hodně uživatelského vstupu, může být nejlepší rozdělit formulář do několika kroků.

Osvědčené postupy v návrhu aplikace Progress Tracker

  1. Označení logické progrese: Většina sledovačů pokroku je navržena tak, aby zobrazovala kroky zleva doprava. Ve většině zemí lidé čtou zleva doprava, takže má smysl, aby sledovatelé pokroku sledovali tento vzorec. To však nestačí - musí existovat něco, co uživatele informuje, že provádí vícekrokový proces.

  2. Informování uživatele o svém umístění: Jedním z klíčových aspektů dobrého návrhu sledování pokroku je informování uživatele o tom, kde se uživatel právě nachází. Toto doplňuje logický postup, protože uživatel bude vědět, kde se ve vztahu k tomu, kde byli, a jaké sekce mají následovat.

  3. Umístění: Protože sledovače průběhu jsou formou navigace, je nejlepší je umístit pod primární a sekundární navigaci (například strouhanku) a nad obsah. ke kterému se tracker pokroku vztahuje. Přestože měřič průběhu může fungovat jako nadpis stránky, je nejlepší umístit název aktuální sekce pod měřič průběhu, aby se posílilo aktuální umístění.

Přečtěte si celý příspěvek pro chyby designu, abyste se vyhnuli , , jak implementovat a grafické příklady .

Příklad kódu

Můžete vidět html/css, který jsem použil (jsfiddle) vykreslení následujícího (žádné použité obrázky):

Steps in a multi-step form

10
Naoise Golden

Protože matematicky procentuální ukazatel průběhu představuje interval reálných čísel mezi 0 a 100, ve skutečnosti se nehodí do situace, kdy máte diskrétní počet kroků, které musíte provést.

Namísto procenta ukazatele pokroku byste mohli mít jakoukoli variaci na téma „krok 1/6“

(o) ---- (x) ---- (o) ---- (o) ---- (o) ---- (o)

což by bylo v tomto případě vhodnější.

Samozřejmě byste mohli argumentovat, že procentuální podíl je ve skutečnosti (počet vyplněných polí)/(počet polí celkem), v takovém případě by velmi přesně zobrazoval pozici ve formuláři. Jediné, co zde je, není to pro uživatele matoucí, když zobrazuje procentuální pruh na 50% a stále je v kroku 1.

7
Liviu A

Indikátor průběhu má uživateli poskytnout představu o tom, jak daleko jsou. Zjistil jsem, že váš je příliš "přesný". Co takhle:

enter image description here

Všimněte si absence štítků „0%“ a „100%“.

2
Hisham

Pro uživatele je problém opravdu pokrokem? Nebo úplnost? Namísto toho, abyste jim ukázali, jak dlouho budou hotovi (ukazatel průběhu), ukažte jim, co zbývají (ikona úplnosti). Právě jsme pracovali na sadě drátů pro počáteční pracovní postup při registraci produktu finančních služeb a usadili se na předvedení úplnosti.

V tomto případě - 30 minutový proces, který vyžadoval, aby měl uživatel po ruce spoustu externích informací - bylo důležitější ukázat uživateli, co udělal (ikona zaškrtnutí) a co nechal udělat (nezaškrtnuto) ikona), která se zobrazuje vedle názvů na kartách, které organizovaly úkol uživatele.

0
abennoschmidt

Vypadá to, že překonáváte pokrok tím, že máte bar a také kroky vpravo. Použijte na nebo jiné. Pravděpodobně v tomto případě, protože pokrok je spíše diskrétní než kontinuální, bylo by vhodnější použít kroky.

Kroky by také měly být na levé straně. Konvence spočívá v tom, že levý panel se používá pro informace "vyššího řádu" (tj. Navigaci, menu nebo jiné informace na vysoké úrovni), zatímco pravá strana se používá pro "podrobné" informace/záznam.

0
Simon Woodside