it-swarm-eu.dev

Jak vytvořit rozpočtovací rozhraní (součet položek se musí rovnat 100)?

Snažím se vytvořit vizuální webové rozhraní, kde mohou uživatelé rozdělit rozpočet na určitý (různý) počet položek. Pokud je například rozpočet 100 bodů, mohl bych přidělit:

50 points to 'Apples'
50 points to 'Oranges' 

nebo:

75 points to 'Apples'
25 points to 'Oranges' 

Pokud chce uživatel přidat novou kategorii, mělo by se něco podobného stát:

30 points to 'Pears' 
60 points to 'Apples'
10 points to 'Oranges'

ale bez „skoku“ by výše uvedená alokace dala, pokud by body byly reprezentovány jako sloupcový graf. Představuji si jakési audio ekvalizérové ​​rozhraní, ve kterém uživatelé mohou pohybovat posuvníky pro každou položku, ale nemůžu získat "matematické" právo a mít pocit, že mi chybí něco důležitého. Zde jsou omezení:

  • Chci, aby všechna čísla byla mezi 0 a 100
  • Chci, aby byl rozpočet vždy uspokojen (tj. Částky 100)
  • Chci, aby uživatelé mohli přidat/smazat položky do svého 'košíku'
  • Nechci, aby uživatel musel dělat matematiku
  • Důrazně bych upřednostňoval, aby všechny posuvné pohyby byly nepřetržité (tj. Žádné „skoky“)

Aktualizace: Mám několik prototypů, z nichž si lidé mohou vyzkoušet/hlasovat:

http://buger.github.com/skill_weight_ui/#

25
John Horton

Jedním z problémů, o kterých si myslím, že byste se měli vyhnout, je automatické přizpůsobení ostatních proměnných tak, aby byla zachována celková hodnota 100%. Může se stát velmi nepříjemným, že se s tím budeme muset vypořádat, kdykoli jsou ve hře více než 2 proměnné. A pokud uvolníte svá omezení, myslím, že z toho můžete vytvořit uživatelsky přívětivější rozhraní.

Přišel jsem s řešením, které je součástí vkládání textu/vizuální reprezentace části, které si myslím, že bude dobře fungovat ... enter image description here

Lidé mohou intuitivně zadat procenta přímo do textových polí. Ale abyste to udělali ještě o krok dále, mohli byste dokonce vytvořit úchytku v každém sloupci a učinit je natahovatelnými. Můžete například uchopit sloupec „Pomeranče“ a přetáhnout jej na 30%, abyste splnili celkový požadavek na 100%.

15
Steve Wortham

(upravit) Další odpovědi mě přiměly zvážit, že existují skutečně dva různé případy: relativní přiřazení a doplnění omezeného kontejneru.

Relativní přiřazení


Relativním úkolem by bylo vytvořit recept na ovocný punč, z něhož by se vytvořilo dosud neznámé množství ovocného punče.

Ještě jsem nenašel posuvník pro více klepnutí, který se cítí dobře. Typické operace, jako například „vytěsnění 5 procent z každého, aby se vytvořil prostor pro novou“, jsou nepořádkem, který s tím souvisí.

Pokud vaše cílové publikum může zadávat čísla, zde je můj návrh:

1. odstraňte omezení "součty na 100%" ze vstupu uživatele

To, co chcete, je relativní alokace.

Můžete nechat uživatele zadat libovolné číslo a pak částku namapovat na 100:

total = sum(input[1..N])
if (total == 0) 
  ShockUser();
percent[1..N] = 100* input[1..N] / total 

Právě teď nutíte uživatele, aby dodržoval omezení, které není nezbytně nutné pro platný vstup, pouze pro prezentaci. Pro zachování tohoto omezení byste museli odmítnout nebo upravit uživatelský vstup, ale omezení neovlivní samotná data.

2. poskytnout okamžitou zpětnou vazb
Okamžitě aktualizujte sloupec, výseč nebo kruhový graf A se vstupem. Příklad náčrtu:

enter image description here

Okamžitá zpětná vazba je důležitá pro uživatele, aby viděl efekty.

. Nepoužívejte 3d výsečový graf (zdůrazňuje přední část), povolte frakční (dělá vědcům radost)


Jedinou slabou stránkou je, že si někteří lidé mohou myslet např. zdvojnásobení všech hodnot nějakým způsobem zvýší jejich přidělení - zejména pokud je jejich přidělení „konkurenční“ s někým jiným.

Myšlenka je:

  • Chci ve směsi méně slaniny. Snížím počet pro "Bacon". Polovina čísla = polovina množství slaniny.
  • Hodím nějaké citrony. „24 citronů“ znamená tolik citronů jako pomeranče a dvakrát tolik než jablka.
  • I mohu vždy zadat procenta, a ujistit se, že všechno se pěkně sčítá na 100. Nemusím ale
  • O to složitější v tomto rozhraní (např. Ve srovnání s posuvníky s více klepnutímmi) je rozdělení mezi dvěma položkami, aniž by to ovlivnilo zbytek. Není to však složitější než s procentními vstupy.

Omezený kontejner


ve scénáři omezeného kontejneru máte prostor pro přesně Max ovoce a absolutní počet jablek je důležitý. (každé ovoce stejné velikosti, samozřejmě ...)

V takovém případě by Steve Worthamův návrh skutečně fungoval lépe. Dalo by se rozšířit o následující:

  • tlačítko "Naplnit" pro každý typ, viditelné když Total < Max. Naplňuje zbývající prostor jedním druhem ovoce.

  • tlačítko "Zmenšit" pro každý typ, viditelné, když Total > Max. Zmenší vybraný typ tak, aby se součet snížil na Max (nebo nastaví typ na nulu, pokud u tohoto typu není dostatek).

  • tlačítko „Naplnit/Zmenšit proporcionální“. (Nejsem si jistý štítkem). To by fungovalo podobně jako výše uvedené doporučení relativního přiřazení.


V obou případech může relativní výpočet vést k podivným číslům - např. snížení z 50% na 41,666 ...% v závislosti na aplikaci, můžete povolit nějaké zaokrouhlování na přátelštější granularity.

9
peterchen

John,

Myslím, že to, co hledáte, je posuvník rozsahu (aka dvojitý posuvník), jako tento zde .

Uživatel bude mít tlačítko s nápisem „nová kategorie“, které požádá o název nové kategorie a bude vyžadovat, aby uživatel vybral bod na liště. Na vybraném bodě se objeví nový popisovač, který vezme příslušný počet bodů z kategorie, do které jste jej umístili.

K dispozici je také tlačítko „odebrat kategorii“, které vyžaduje, aby uživatel vybral jednu z úchytů a rovnoměrně rozdělil své body mezi své sousedy.

Pravděpodobně bude nejlépe fungovat se svislým pruhem, kde je o něco jednodušší zobrazit názvy kategorií vedle jejich úchytů.

Vypadá to, že splňuje všechny vaše podmínky, a logika přerozdělení bodů je velmi jasná a grafická.

V podstatě je totožné s vytvářením přechodů s tímto ovládáním:

enter image description here

6

Pokud chcete modelovat své uživatelské rozhraní po zvukovém ekvalizéru, klíčem je nechat pozici každého jezdce představovat alokaci této kategorie relativně ke všem ostatním kategoriím. Nezkoušejte mapovat polohu posuvníku na absolutní číselnou hodnotu. Místo toho dynamicky změňte číselnou stupnici každého jezdce tak, aby čísla vždy činila 100. Tímto způsobem se pozice jezdce nikdy nesmí měnit, pokud se jej uživatel nedotkne. Například:

1) Uživatel přidá první kategorii:


Apples  ---------------+--------------- 100%

2) Uživatel přidá druhou kategorii:


Apples  ---------------+--------------- 50%
Oranges ---------------+--------------- 50%

3) Uživatel upraví jezdec pomerančů tak, aby byl přibližně 1/2 jablek:


Apples  ---------------+--------------- 67%
Oranges -------+----------------------- 33%

4) Uživatel přidá třetí kategorii:


Apples  ---------------+--------------- 40%
Oranges -------+----------------------- 20%
Pears   ---------------+--------------- 40%

Chcete-li vypočítat hodnotu přidělení pro daný posuvník, postupujte takto:

100 * slider_position/sum_of_all_slider_positions

5
cduhn

Zdá se mi, že mluvíte o rovnováze mezi různými zdroji nebo vlastnostmi, podobně jako u některých her na hraní rolí.

Co když jste přidělení právě zobrazili vizuálně, bez jakéhokoli smyslu pro měřítko a umožnili uživateli přetahovat hodnoty kolem?

Matematiku byste mohli udělat sami na pozadí.

Například byste mohli zobrazit váhy jako Spider Chart :

Spider Chart

Díky vylepšení, že uživatelé mohli přetahovat hodnoty podél osy, aby byly více či méně důležité. (Všimněte si, že byste nechtěli používat viditelné číselné měřítko, protože by to byla vizuální rovnováha, se kterou by uživatel pracoval.)

Pro ilustraci, zvažte, že máme pět kategorií (inteligence, charisma, síla, vytrvalost, obratnost), které se zobrazují v pavoučí tabulce. Pro začátek má všech pět nastavení „střední úrovně“ 25 (z možných 50): (25, 25, 25, 25, 25). Přizpůsobením těchto hodnot tak, aby se vešly celkem 100, získáte: (20, 20, 20, 20, 20)

Poté uživatel začne konfigurovat rovnováhu, přetahovat inteligenci a obratnost na plný výkon a vytrvalost na 10. Hodnoty pro pět kategorií jsou nyní: (50, 20, 20, 10, 50). Přizpůsobení těchto hodnot tak, aby se vešly celkem 100 dává (33,3, 13,3, 13,3, 6,7, 33,4)

Mějte však na paměti, že tyto měřítkové hodnoty byste použili pouze jako výstup na obrazovku, počítáno jednou.

Přetažením jedné hodnoty nahoru se automaticky sníží alokace na všechny ostatní atributy - a protože se výpočet provádí na konci procesu, chyby zaokrouhlování nezpůsobí v zobrazených hodnotách zpětnou vazbu.

4
Bevan

Jen výstřel ve tmě, ale mohl bych navrhnout podívat se na nástroj Project Success Sliders Tool, který nabízí společnost Mountain Goat Software (společnost Mike Cohn's Company). Tento nástroj funguje pod různými omezeními, ale líbí se mi ui a ux, které nabízí.

http://www.mountaingoatsoftware.com/tools/project-success

3
sklein

Nemyslím si, že k problému můžete přistupovat přesně tak, jak chcete. Opravdu nemůžete upravit jiné kategorie, abyste kompenzovali kategorii, ke které uživatel aktuálně přiřazuje body.

Pokud byste tak učinili, měl by uživatel těžko získat přesné úkoly, které chtěl, protože každá úprava by také posunula body ve všech ostatních kategoriích a změnila body, které již byly přiděleny (doufám, že to dává smysl).

Pravděpodobně byste měli umožnit všem posuvníkům pohybovat se mezi 0 a 100, dát uživateli jasnou vizualizaci, kolik bodů je nad nebo pod 100, a jasně naznačit, kdy jsou na 100 (vše je zelené), a když nejsou na 100 (vše je červené).

Je-li to nutné, zablokujte je před „uložením“, pokud nevyužili přesně 100 bodů.

2
ThatSteveGuy

Možná byste mohli přidat „co zbylo“ také jako prvek. Ukazuje to, co zbylo, ale je pouze pro čtení. Přidání prvku by mohlo chytit zbylé. Pokud zbývající hodnota není 0, nemůžete pokračovat/uložit/...

apples:  [ 20 ]
oranges: [ 30 ]

budget:    50 !!

nebo vizuálně, jak ukázal peterchen, ale s červenou částí zbylou.

2
Peter Frings

Pracoval jsem na něčem podobném. Výhoda, kterou jsme měli, byla v tom, že bude existovat výchozí kategorie. Pokud to dokážete využít, můžete začít s něčím takovým:

  [100] Default
------------------
  + new

Potom můžete přidat další kategorie. Zadání hodnoty, která by odečítala od výchozího nastavení:

  [60 ] Default
------------------
- [20 ] food
- [20 ] rent
+ new

Odstraněním kategorie nebo vyprázdněním pole hodnoty kategorie vrátíte tuto částku zpět do výchozího nastavení.

Pokud využijí přidělení s novými kategoriemi, data se uloží bez výchozího nastavení.

U tohoto řešení se však liší to, že budete potřebovat nějaký druh výchozí kategorie, která by byla přijatelná pro uložení s daty.

2
DA01

Myslím, že nejlepším řešením může být kombinace Peterchenovy a Petera Fringa.

Dokážete udržet počet „nepřidělených“ bodů? Součet bodů každé položky plus počet nepřidělených bodů se musí vždy rovnat 100.

mockup

Ve výše uvedeném příkladu, pokud jste narazili na počet hrušek až do 15, počet v nepřiděleném kbelíku by klesl na 5. Když odešlete formulář, všechny zbylé nepřidělené body budou rozděleny podle relativních hodnot každé položky. Počet bodů přiřazených každé položce, včetně těch, které budou automaticky přiřazeny z „nepřiděleného“ bloku, je uveden v závorkách.

Tento nápad lze také použít na posuvník rozsahu.

|=========================+===============++----------|
                          A               OP            

Nepřiřazené body jsou reprezentovány prázdným prostorem na konci posuvníku. Pokud přesunete některý z ovládacích prvků pro (A) peaky, (O) rozsahy nebo (P) každý, posunou vše doprava a změní délku nepřidělené části.

2

John,

Nemyslím si, že přidání do nové kategorie a automatické přidání některých bodů a jejich odečtení od ostatních je nejlepší způsob, jak jít. Pokud uživatel úmyslně vybral 75% proti pomerančům, neočekával by, že by se toto číslo později automaticky změnilo přidáním do nové kategorie. (Pouhá skutečnost, že vy sami nemůžete získat ten správný „pocit“, jak by matematika fungovala, je známkou toho, že to samé by platilo pro vaše uživatele).

Lepší možností IMO by bylo poskytnout vizuální indikaci nějakého druhu, když do nové kategorie přidají, že pro tuto novou kategorii musí být přidělen nějaký zdroj, aby mohla pokračovat. Pro přístupnost zde nemůžeme opravdu použít barvu, takže bych navrhl klíště a kříže proti každé kategorii. Pokud je přidělen veškerý zdroj, jsou všechny kategorie „zaškrtnuty“, ale pokud jedna kategorie chybí, bude mít proti ní „kříž“.

Dobře, to ponechává další dilema ohledně toho, jak vyberete '0' jako množství zdroje pro položku, ale to je problém prozkoumat samostatně, pokud máte pocit, že tento přístup je tím, po čem jste.

1
JonW

Jedna jednoduchá technika spočívá v výpočtu procentuálních hodnot posuvných hodnot vzhledem k součtu hodnot posuvných prvků a pak přiřazení hodnot posuvných prvků k příslušným vypočítaným procentům. tímto způsobem budou posuvné hodnoty upraveny např

slider1.value = (slider1.value / sumOfSliderValues) * 100 ;
slider2.value = (slider2.value / sumOfSliderValues) * 100 ;
slider3.value = (slider3.value / sumOfSliderValues) * 100 ;

Došlo k malé chybě zaokrouhlení, ale lze ji vyřešit v případě, že potřebujeme hodnoty posuvníků přesně a vždy sečíst až 100.

Mám nastavit housle, abych to demonstroval pomocí angularjs. Navštivte prosím demo

1
Ahmad Noor

To je zajímavá otázka a v tomto vláknu již existuje spousta dobrých řešení. Myslím, že jste ze svého popisu nechali jednu důležitou informaci. Skutečná povaha prováděného úkolu. Když uživatel upraví čísla a kategorie, o co se skutečně zajímají, přiřazuje absolutní čísla kategoriím nebo přichází s dobrým rozdělením napříč čísly.

Je to úkol, jako je naplnění náklaďáku, tj. (Držet se svých příkladů), je zde prostor pro 100 kusů ovoce, kolik z každé kategorie chcete v náklaďáku. Uživatel by se obecně mohl chtít nejprve zbavit všech kusů jednoho druhu a poté vyplnit zbytek. Pokud se jedná o tento případ, domnívám se, že vaše nejlepší sázka je rozhraní, kde je vstup omezen na celkový počet a nelze jej překročit, když se uživatel pokusí zvýšit o jeden prvek výše, než potřebuje snížit jiný.

Pokud je na druhé straně poměr mezi vašimi položkami důležitější, např. vyladit mix průmyslového ovocného koláče, vždy ho vyrobíme v dávkách 100 liber, což je nejlepší alokace, pak si myslím, že dynamičtější rozhraní, kde se všechny posuvníky pohybují, když by se něco změnilo, bylo vhodnější.

1
Harald Scheirich

Jak bych to udělal. Zeptám se, jakou strategii distribuce chce uživatel použít (proporční, od první ..., od největší ...). Například:

Přidání prvního („Jablka“): 100%

100 points to 'Apples'

Přidání druhého („Pomeranče“) -> vstup uživatele: 30%

70 points to 'Apples'
30 points to 'Oranges'

Přidání třetího („Hrušky“) -> vstup uživatele: 20% ([x] proporcionální)

20 points to 'Pears'
56 points to 'Apples'
24 points to 'Oranges'

PŘIDAT:

Chtěl bych přidat možnost [x] lock, aby se uchovaly některé hodnoty

0
igor

Existuje osobní finanční web, Buxfer .

Má komponentu IOU. Existuje základní implementace toho, co požadujete. Existuje více lidí, sdílení a výdaje. Pokud to potřebujeme rozdělit nerovnoměrně, poskytuje jednoduché uživatelské rozhraní s textovými poli, které poskytuje různé částky.

enter image description here

Začíná se stejným rozdělením a při provádění změn se dosud nedotčená pole automaticky aktualizují.

enter image description here

Všimněte si, že když provedete ruční úpravy v jakémkoli poli, nebude programově měnit jeho obsah.

enter image description here

Pokud upravíte vše a pokud to není celkem, systém vám nedovolí uložit. Líbil se mi nějaký aspekt tohoto uživatelského rozhraní.

  • To vám umožní dynamicky přidat ostřejší.
  • Zajišťuje, že částka vždy odpovídá součtu částky transakce.
  • Systém aktualizuje pouze pole, kterých se uživatel dosud nedotkl . Nepřepisuje uživatelské vstupy.
  • Můžete je dále vylepšit přidělením jiného okraje nebo něčím, co uživatel explicitně upravil.
  • Vždy poskytuje uživatelům možnosti resetovat stejným rozdělením.

Pravděpodobně ji můžete rozšířit o graf, který se projeví, jakmile uživatel změní pole. Skutečné hodnoty můžete mít na základně každého pruhu a dávat přechody na základě procenta vašeho celkového rozpočtu spotřebovaného každým pruhem. Pravděpodobně byste mohli přidat překrytí na každou lištu zobrazující procento.

Je zásadní součástí vašeho algoritmu, jak zacházet s vyvážením, ale byl bych unavený dotýkat se jakéhokoli množství, které uživatel explicitně zadal. To vám dává menší kontrolu. Zatímco uživatelé manipulují s grafy, můžete jednotlivé pruhy zčervitat nebo celý graf červeně, pokud vnímáte, že systém nemůže rozhodovat na základě stavu uživatele.

V podstatě bude matematická část složitá. Když se pokoušíte upravit nějakou postavu, pravděpodobně byste uvažovali o historických hodnotách, trendech atd. Reakce uživatele na to, že se rozhodujete pro něj, má také velký rozdíl.

Buxfer jde neutrálním způsobem, stejně tak rozdělí zbývající částku, a pokud nemůže, zakáže akci uložení/odeslání a řekne uživateli, že se věci nesčítají. Pokud tuto trasu nechcete, budete potřebovat více informací o chování uživatelů na základě profilů, co a jak systém používají, a přesto riskujete, že otravujete partu, která by nechtěla nerovnoměrné rozdělení sponzorované systémem pro jim.

Existuje otázka, jak dynamicky přidávat kategorii, když se provádějí některé výpočty. Jaký účinek by měl mít dosud na matematiku? Navrhuji stejné dělení pouze v případě, že se uživatel nedotkl žádných částek, nebo rovných dělení mezi částkami, kterých se uživatel dosud nedotkl.

V každém případě zůstává na výběr mezi tím, zda se budete chovat těžce a omezovat operace uživatele, nebo je liberální a nutí uživatele, aby před uložením opravil nesprávné vstupy. Tuto volbu lze provést s ohledem na kontext vaší aplikace, druh dat, která jsou rozpočtována, množství meta informací, které systém má.

Navrhl bych také zvážit dobu provozu. Výkonný uživatel očekává způsob zadávání dat, který nezahrnuje manipulaci s grafem.

Také vím, že váš výslovný požadavek řekl o žádné skoky, ale to povede k tomu, že budou mít částky jako 63, 41, 39 atd. Říkejte tomu osobní mazlíček, ale nemůžu vydržet takové částky na jezdcích, snažím se zaokrouhlit až na nejbližší násobek 5, 2 nebo 10, podle druhu dat, se kterými pracuji. To je časově náročnější a nepříjemnější. ( Sleva, protože se jedná o osobní názor a není podloženo žádným vyhledáváním). Když se snažím dát něco na rozpočet, jsem více nakloněn k ballparks než specifika, jak je uvedeno výše.

Dejte mi vědět, pokud musím přidat něco víc.

0
Sol