it-swarm-eu.dev

Dobrý design pro webové aplikace s velkými formuláři

Procházel jsem webem pro dobré šablony/motivy, ale nikdy jsem neviděl opravdu, opravdu dobrý příklad typické obchodní aplikace s 20-40 poli na stránku a 2-5 kartami mezi nimi. Zdá se, že většina z témat WP, motivů na stránce pro administrátory nebo dokonce na některá témata v CMS neodpovídá tomu, co většina uživatelů (nebo alespoň těch, s nimiž jsem se setkal) očekává od svých obchodních aplikací.

Některé úvahy jako:

  • Mít velký počet polí na jedné stránce (jak je uvedeno výše)
  • Menší písma, která vytvoří prostor pro všechna tato pole, na rozdíl od velkých čitelných polí, která se pro většinu ostatních témat jeví jako prominentní téma
  • Všechny relevantní informace na jedné obrazovce
  • "Profesionální" - cítit (také nudné, nudné, vážné šedé XD)

Můžete mi ukázat na nějaké dobré příklady nebo témata, která vyhovují obchodním aplikacím, a nějaké dobré návody pro návrhy obchodních aplikací? Témata a návody méně orientované na marketing a více na funkční využití. Pokud je moje představa použitelnosti pro obchodní aplikaci špatná, můžete mě napravit.

15
Jonn

Zde jsou některé skvělé odkazy pro vás ... možná najdete to, co hledáte:

A od Lukew se můžete hodně dozvědět o designu formulářů: http://www.lukew.com/ a zde je Lukewova prezentace: http://videos.visitmix.com/MIX09/C17F

některé další články z mého lahodného: http://www.delicious.com/rolficak/form

12
Roland Pokornyik

Momentálně pracuji na něčem podobném, takže jsem si myslel, že se podělím o své myšlenky.

Řekněme, že máte 40 vstupních polí na jedné stránce „Upravit organizaci“.

První krok - karty: Lze je rozdělit na jednotlivé segmenty (tj. Existují některá pole, která se nespoléhají na ostatní na stránce?) Možná existují pole, která můžete vložit na svou vlastní kartu/stránku: "Upravit adresu", "Upravit kontaktní osobu", "Upravit informace o požární bezpečnosti" atd.?

Druhý krok - kroky: Je to stupňovitý proces? Potřebujete dokončit jednu sadu vstupů před druhou? Rozdělte jej na samostatné stránky a poskytněte ukazatel průběhu a další/předchozí odkazy.

Třetí krok - postupné zveřejňování: Můžete skrýt některá pole, dokud nejsou potřeba? Pokud například výběr jedné možnosti umožňuje vybrat více dílčích možností, skrýt dílčí možnosti, dokud si nejste jisti, že jsou na obrazovce potřeba.

Čtvrtý krok - bloky: Pokud to nemůžete udělat výše, rozdělte stránku do samostatných bloků, které obsahují podobné informace, a zadejte nadpis. Lukewův příklad .

Pátý krok - navigace: Přemýšlejte o tom, jak se dostat na každou jednotlivou kartu/stránku. Přijdete na stránku Upravit organizaci a potom klepnutím na možnost Upravit adresu upravíte? Dokážete na obrazovku dorazit na Upravit adresu dříve? Ujistěte se, že můžete snadno najít své oddělené informace a dostat se k nim.

Byl bych velmi neochotný změnit velikost něčeho, aby se vešel víc. Lepší dlouhá, dobře rozložená forma, než krátký zmatený nepořádek. Dalším základním principem, který je třeba mít na paměti, je vytvořit vstupní pole tak dlouho, jak by to mělo být pro data přicházející dovnitř. Např. Pole PSČ bude kratší než pole e-mailové adresy.

Doufám, že to pomůže!

5
kerr

Nemám žádné jasné příklady obchodních webových aplikací s velkými formami - částečně proto, že takový design uživatelského rozhraní opravdu není tak dobrý nápad - obecně.

Věřím, že zvukové cvičení by mělo prozkoumat každé pole a zjistit, zda je toto pole skutečně nutné? A pokud ano, zvažte, zda lze data vypočítat nebo odvodit z jiných vstupních údajů - nebo zda lze použít přiměřená výchozí nastavení? A namísto prázdného textového pole (potenciálně děsícího uživatele) může být pole reprezentováno dostupnějším (omezeným/vizuálním) způsobem?

Ale opět záleží na typu systému a kontextu použití. Můžete být konkrétnější z hlediska účelu webové aplikace?

3
agib

Myslím, že online bankovnictví je vaše odpověď. Pokud vaše banka poskytuje online účet, najdete tam komplikovanou víceúrovňovou navigaci, pokus napěchovat co nejvíce informací na jednu obrazovku a pravděpodobně poněkud suchý vzhled a dojem (i když pravděpodobně bude označen značkou s barvami banky, ale přesto to bude mít solidní, obchodní pocit - pokud se to povede dobře).

Pravděpodobně však nenajdete mnoho forem. Pro ty můžete zkusit otevřít online aplikaci do obchodní školy (např. Harvard ). Nebo online žádosti o americké vízum, věci týkající se daní, prakticky cokoli související s byrokracií vlády.

Google Analytics je také dobrým příkladem komplexní, „nudné“ a datově náročné webové aplikace.

1

Je to zdaňovací období ... Turbo Tax přichází na mysl. Udělte vám, jeho uživatelské rozhraní není jediná stránka, ale nikdy jsem nenarazil na žádnou věc, která by dokázala tak dobře při zjednodušování toho, co je v podstatě obří forma od něj.

Souhlasím také s agibem, rozebírám to, hodnotím pole a buduji UI a dobré UX. Pokud potřebujete vyplněný formulář nebo pravděpodobnější vyplnění databázových polí na konci, lze je po zadání dat zpracovat programově. Nemučte uživatele.

1
JDS

Nyní pracuji na návrhu UX, abych znovu vytvořil formu rozdělenou na několik kroků v průvodci. Jedna věc, kterou přidáváme, je procentuální ukazatel na každé stránce. To bude klíčem k zodpovězení řady otázek „platí situace x, které se na vás vztahují“ a k podmíněnému zobrazování vstupů formuláře. Tyto otázky jsou základem pro určení procenta dokončení. Naše hypotéza spočívá v tom, že pokud používateli nabídneme způsob, jak zjistit, jak daleko jsou, získáme úplnější využití formuláře.

0
Duane Gran

Mám pocit, že nebudete mít 100% snadno dostupných šablon aplikací. Dobrá věc je, že se inspirujete a jak pan Roland zmínil, implementujte ji pomocí své aplikace. Tímto způsobem dosáhnete dvou věcí. 1. Přizpůsobení návrhu uživatelského rozhraní podle požadavku 2. Perspektiva použitelnosti uživatelského rozhraní.

0
user4209