it-swarm-eu.dev

Come costruire un'interfaccia di budget (la somma degli articoli deve essere uguale a 100)?

Sto cercando di creare un'interfaccia web visiva in cui gli utenti possano distribuire un budget su un numero (variabile) di elementi. Ad esempio, se il budget è di 100 punti, potrei allocare:

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

o:

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

Se l'utente desidera aggiungere una nuova categoria, dovrebbe succedere qualcosa del genere:

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

ma senza il "salto" l'assegnazione di cui sopra darebbe se i punti fossero appena rappresentati come un grafico a barre. Sto immaginando una sorta di interfaccia per l'equalizzatore audio in cui gli utenti possono semplicemente spostare i cursori per ogni elemento, ma non riesco a capire bene la "matematica" e sento che mi manca qualcosa di importante. Ecco i vincoli:

  • Voglio che tutti i numeri siano compresi tra 0 e 100
  • Voglio che il budget sia sempre soddisfatto (ovvero somme a 100)
  • Voglio che gli utenti siano in grado di aggiungere/eliminare elementi nel loro "carrello"
  • Non voglio che l'utente debba fare alcun calcolo
  • Preferirei fortemente che tutti i movimenti del dispositivo di scorrimento siano continui (ovvero, nessun "salto")

Aggiornamento: Ho alcuni prototipi che le persone possono provare/votare:

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

25
John Horton

Un problema che penso dovresti evitare è la regolazione automatica delle altre variabili per mantenere il totale al 100%. Può diventare estremamente fastidioso doverlo fare ogni volta che ci sono più di 2 variabili in gioco. E se allenti un po 'le tue restrizioni, penso che tu possa creare un'interfaccia più user-friendly da essa.

Mi è venuta in mente una soluzione che è parte dell'input di testo/parte della rappresentazione visiva che penso funzionerà bene ... enter image description here

Le persone possono inserire intuitivamente le percentuali direttamente nelle caselle di testo. Ma per fare un passo avanti potresti persino creare una maniglia su ogni colonna e renderle trascinabili. Ad esempio, è possibile afferrare la colonna "Arance" e trascinarla verso il basso al 30% per soddisfare il requisito totale del 100%.

15
Steve Wortham

(modifica) Le altre risposte mi hanno fatto considerare che in realtà ci sono due casi diversi: fare un incarico relativo e riempire un contenitore limitato.

Cessione relativa


Un compito relativo sarebbe la creazione di una ricetta di punch alla frutta, con una quantità ancora sconosciuta di punch alla frutta da creare da essa.

Non ho ancora trovato un cursore multi-tap che si sente "bene". Operazioni tipiche, come "spremere il 5 percento di ciascuna per fare spazio a una nuova" sono un casino a che fare con esso.

A condizione che il tuo pubblico di destinazione possa inserire numeri, ecco il mio suggerimento:

1. rimuovi il vincolo "somme al 100%" dall'input dell'utente

Quello che vuoi è un'allocazione relativa .

Puoi consentire all'utente di inserire qualsiasi numero, quindi mappare la somma su 100:

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

In questo momento costringi l'utente a seguire un vincolo che non è strettamente necessario per un input valido, solo per la presentazione. Dovresti rifiutare o modificare l'input dell'utente solo per preservare questo vincolo, ma il vincolo non influisce sui dati stessi.

2. fornire un feedback immediato
Aggiorna immediatamente un grafico a torta, ad anello o sommato con l'input. Esempio di schizzo:

enter image description here

Il feedback immediato è importante per l'utente di vedere gli effetti.

. non usare un grafico a torta 3d (enfatizza il davanti), consenti frazionari (rende felici gli scienziati)


L'unica debolezza qui è che alcune persone potrebbero pensare ad es. il raddoppio di tutti i valori aumenterà in qualche modo la loro allocazione, specialmente se la loro allocazione è "in competizione" con qualcun altro.

L'idea è:

  • Voglio meno pancetta nel mix. Riduco il numero per "Bacon". Metà del numero = metà della quantità di pancetta.
  • Aggiungo dei limoni. "24 Limoni" significa tanti limoni quante le arance e il doppio delle mele.
  • Io posso inserire sempre le percentuali e assicurarmi che tutto sommi bene a 100. Non devo, però
  • Ciò che è più complicato in quella interfaccia (ad esempio rispetto ai cursori multi-tap) è la distribuzione tra due elementi senza influire sul resto. Tuttavia, non è più complicato rispetto agli input percentuali.

Contenitore Limitato


nello scenario del contenitore limitato, hai spazio per esattamente Max frutti e il numero assoluto di mele importanti. (ogni frutto ha le stesse dimensioni, ovviamente ...)

In tal caso, il suggerimento di Steve Wortham avrebbe davvero funzionato meglio. È possibile estenderlo con il seguente:

  • un pulsante "Riempi" per ogni tipo, visibile quando Total < Max. Riempie lo spazio rimanente con un tipo di frutta.

  • un pulsante "Riduci" per ogni tipo, visibile quando Total > Max. Riduce il tipo selezionato per portare il totale a Max (o imposta il tipo su zero se non è sufficiente in questo tipo).

  • un pulsante "Riempi/Riduci proporzionale". (Non sono sicuro dell'etichetta). Funzionerebbe in modo simile alla relativa assegnazione raccomandata sopra.


In entrambi i casi, il calcolo relativo potrebbe portare a numeri strani - ad es. riducendo dal 50% al 41,666 ...% a seconda dell'applicazione, potresti consentire un arrotondamento per una granularità più amichevole.

9
peterchen

John,

Penso che quello che stai cercando sia un dispositivo di scorrimento intervallo (noto anche come dispositivo di scorrimento doppio), come questo qui .

L'utente avrà un pulsante che dice "nuova categoria" che chiederà il nome della nuova categoria e richiederà all'utente di selezionare un punto sulla barra. Sul punto selezionato apparirà una nuova maniglia, prendendo il numero appropriato di punti dalla categoria su cui lo hai posizionato.

C'è anche un pulsante "Rimuovi categoria", che richiede all'utente di selezionare una delle maniglie e di distribuire i suoi punti equamente tra i vicini.

Probabilmente funzionerà meglio con una barra verticale, in cui è un po 'più facile visualizzare i nomi delle categorie accanto alle loro maniglie.

Sembra che soddisfi tutte le tue condizioni e la logica della ridistribuzione dei punti è molto chiara e grafica.

Fondamentalmente è identico alla creazione di gradienti con questo controllo:

enter image description here

6

Se vuoi modellare la tua UI dopo un equalizzatore audio, la chiave è lasciare che la posizione di ciascun cursore rappresenti l'allocazione di quella categoria rispetto a tutte le altre categorie. Non provare a mappare la posizione del dispositivo di scorrimento su un valore numerico assoluto. Invece, basta cambiare dinamicamente la scala numerica di ciascun dispositivo di scorrimento in modo che i numeri aggiungano sempre fino a 100. In questo modo la posizione di un dispositivo di scorrimento non deve mai cambiare a meno che l'utente non lo tocchi. Per esempio:

1) L'utente aggiunge la prima categoria:


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

2) L'utente aggiunge la seconda categoria:


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

3) L'utente regola il cursore Arance in modo che sia circa 1/2 Mele:


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

4) L'utente aggiunge la terza categoria:


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

Per calcolare il valore di allocazione per un determinato dispositivo di scorrimento, è necessario:

100 * slider_position/sum_of_all_slider_positions

5
cduhn

Mi sembra che tu stia parlando di un equilibrio tra risorse o tratti diversi, proprio come alcuni giochi di ruolo.

Cosa succede se hai appena visualizzato le allocazioni visivamente, senza alcun senso di scala e consentendo all'utente di trascinare i valori?

Puoi fare la matematica da solo, in background.

Ad esempio, è possibile visualizzare i coefficienti correttori come Spider Chart :

Spider Chart

Con il miglioramento che gli utenti possono trascinare i valori lungo l'asse per renderli più o meno importanti. (Nota che non vorrai usare una scala numerica visibile, poiché è l'equilibrio visivo con cui l'utente avrebbe lavorato.)

Per illustrare, considera che abbiamo cinque categorie (intelligenza, carisma, forza, resistenza, destrezza) da mostrare sulla carta del ragno. Per iniziare, tutti e cinque hanno un'impostazione "di livello medio" di 25 (su 50 possibili): (25, 25, 25, 25, 25). Ridimensionandole per adattarle a un totale di 100, si ottiene: (20, 20, 20, 20, 20)

Quindi, l'utente inizia a configurare l'equilibrio, trascinando intelligenza e destrezza al massimo e resistenza fino a 10. I valori per le cinque categorie sono ora: (50, 20, 20, 10, 50). Ridimensionandoli per adattarli a un totale di 100 dà (33.3, 13.3, 13.3, 6.7, 33.4)

Si noti, tuttavia, che useresti quei valori in scala solo come output dello schermo, calcolati una volta.

Trascinando un valore verso l'alto si riduce automaticamente l'allocazione a tutti gli altri attributi, in proporzione - e poiché il calcolo viene eseguito alla fine del processo, gli errori di arrotondamento non causano un ciclo di feedback nei valori mostrati.

4
Bevan

Solo una foto al buio, ma potrei suggerire di dare un'occhiata al Project Success Sliders Tool offerto da Mountain Goat Software (Mike Cohn's Company). Questo strumento funziona con diversi vincoli, ma mi piace l'interfaccia utente e l'UX che offre.

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

3
sklein

Non penso che tu possa affrontare il problema esattamente come sembra che tu voglia. Non puoi davvero regolare altre categorie per compensare la categoria a cui l'utente sta attualmente assegnando punti.

Se lo facessi, l'utente avrebbe difficoltà a ottenere gli incarichi esatti che desiderava perché ogni regolazione sposta anche i punti in tutte le altre categorie, alterando i punti già assegnati (spero che abbia senso).

Quello che dovresti probabilmente fare è consentire a tutti i cursori di spostarsi tra 0 e 100, fornire una chiara visualizzazione all'utente di quanti punti sono sopra o sotto i 100, oltre a indicare chiaramente quando sono a 100 (tutto è verde), e quando non sono a 100 (tutto è rosso).

Se necessario, bloccali dal "salvataggio" a meno che non abbiano utilizzato esattamente 100 punti.

2
ThatSteveGuy

Forse potresti aggiungere anche "ciò che resta" come elemento. Mostrerebbe ciò che è rimasto, ma sarà di sola lettura. L'aggiunta di un elemento potrebbe catturare il residuo. Finché il resto non è 0, non è possibile continuare/salvare/...

apples:  [ 20 ]
oranges: [ 30 ]

budget:    50 !!

o visivamente come ha mostrato il peterchen, ma con la parte rossa che è rimasta.

2
Peter Frings

Ho lavorato su qualcosa di simile a questo. Il vantaggio che abbiamo avuto è che ci sarebbe stata una categoria predefinita. Se puoi sfruttarlo, puoi iniziare con qualcosa del genere:

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

È quindi possibile aggiungere ulteriori categorie. Inserendo un valore da sottrarre dal valore predefinito:

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

La rimozione di una categoria o la cancellazione del campo del valore della categoria ripristinerà tale importo al valore predefinito.

Se utilizzano tutta l'assegnazione con nuove categorie, i dati vengono salvati senza impostazione predefinita.

Ciò che differisce da questa soluzione, tuttavia, è che avresti bisogno di una sorta di categoria predefinita che sarebbe accettabile per essere salvata con i dati.

2
DA01

Penso che la soluzione migliore possa essere una combinazione di Peter e Fring.

Riesci a tenere un conteggio dei punti "non assegnati"? La somma dei punti di ciascun elemento più il numero di punti non assegnati deve essere sempre uguale a 100.

mockup

Nell'esempio sopra, se hai aumentato il numero di pere fino a 15, il numero nel bucket non allocato scenderà a 5. Quando invii il modulo, tutti i punti non allocati rimasti verranno distribuiti in base ai valori relativi di ciascun articolo. Il numero di punti assegnati a ciascun elemento, inclusi quelli che verranno assegnati automaticamente dal bucket "non allocato", sono indicati tra parentesi.

Questa idea potrebbe anche essere applicata a un cursore di intervallo.

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

I punti non allocati sono rappresentati da uno spazio vuoto alla fine del cursore. Se sposti uno dei controlli per (A) pples, (O) range o (P) ognuno, sposta tutto a destra e cambia la lunghezza della porzione non allocata.

2

John,

Non penso che aggiungere una nuova categoria e avere alcuni punti aggiunti automaticamente e sottratti dagli altri sia il modo migliore di procedere. Se l'utente ha deliberatamente selezionato il 75% rispetto alle arance, non si aspetterebbe che tale cifra cambi automaticamente in un secondo momento aggiungendo una nuova categoria. (Il solo fatto che tu stesso non possa avere la giusta "sensazione" su come funzionerebbe la matematica è un'indicazione che lo stesso sarebbe il caso per i tuoi utenti).

L'IMO sarebbe un'opzione migliore per fornire un'indicazione visiva di qualche tipo quando aggiungono in una nuova categoria che questa nuova categoria deve avere alcune risorse assegnate ad essa per procedere. Per accessibilità non possiamo davvero usare il colore qui, quindi suggerirei segni di spunta e croci per ogni categoria. Se viene allocata tutta la risorsa, tutte le categorie vengono "spuntate", ma se manca una categoria, avrà una "croce" contro di essa.

OK, questo lascia un altro dilemma su come selezionare '0' come quantità di risorse per l'elemento, ma questo è un problema da esplorare separatamente se ritieni che questo approccio sia ciò che stai cercando.

1
JonW

Una tecnica semplice consiste nel calcolare le percentuali dei valori del dispositivo di scorrimento in relazione alla somma dei valori del dispositivo di scorrimento e quindi riassegnare i valori del dispositivo di scorrimento alle rispettive percentuali calcolate. in questo modo i valori del dispositivo di scorrimento verranno riaggiustati ad es

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

C'è un piccolo errore di arrotondamento, ma può essere gestito nel caso in cui abbiamo bisogno dei valori dei cursori per sommare esattamente e sempre fino a 100.

Ho installato un violino per dimostrarlo usando angularjs. Visitare demo

1
Ahmad Noor

Questa è una domanda interessante e ci sono già molte buone soluzioni in questo thread. Penso che tu abbia lasciato un'informazione importante fuori dalla tua descrizione. La natura effettiva dell'attività che viene eseguita. Quando l'utente modifica i numeri e le categorie a cui sono realmente interessati, assegnando numeri assoluti alle categorie o ottenendo una buona distribuzione, attraverso i numeri.

Se il compito è quello di riempire un camion, ovvero (attenersi ai tuoi esempi) c'è spazio per 100 pezzi di frutta quante di ciascuna categoria vuoi nel camion. L'utente in genere potrebbe voler prima sbarazzarsi di tutti i pezzi di un tipo e poi compilare il resto. Se questo è il caso, penso che la tua scommessa migliore sia un'interfaccia in cui l'input è vincolante per il numero totale e non può essere superato, quando l'utente cerca di aumentare un elemento al di sopra del quale è necessario ridurne un altro.

Se d'altra parte il rapporto tra i tuoi articoli è più importante, ad es. ottimizzando il mix di torta di frutta industriale, lo facciamo sempre in lotti da 100 libbre, qual è la migliore allocazione, quindi penso a un'interfaccia più dinamica in cui tutti i cursori si muovono quando qualcosa cambia sarebbe più appropriato.

1
Harald Scheirich

Come l'avrei fatto. Chiederò quale strategia di distribuzione l'utente vuole usare (proporzionale, taglia dal primo ..., taglia dal più grande ...). Per esempio:

Aggiunta della prima ("Mele"): 100%

100 points to 'Apples'

Aggiunta della seconda ("Arance") -> input dell'utente: 30%

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

Aggiungendo il terzo ('Pere') -> input dell'utente: 20% ([x] proporzionale)

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

AGGIUNTO:

Vorrei aggiungere l'opzione di blocco [x] per contenere alcuni valori

0
igor

Esiste un sito Web di finanza personale, Buxfer .

Ha un componente IOU. C'è un'implementazione di base di ciò che è necessario. Ci sono più persone, condivisione e spese. Se abbiamo bisogno di dividerlo in modo non uniforme, fornisce una semplice interfaccia utente con caselle di testo per fornire i diversi importi.

enter image description here

Si inizia con una divisione uguale e man mano che si apportano modifiche, i campi non toccati vengono automaticamente aggiornati.

enter image description here

Si noti che quando si effettua una modifica manuale in qualsiasi campo, non ne modificherà programmaticamente il contenuto.

enter image description here

Se modifichi tutto e se non totalizza un importo massimo, il sistema non ti consente di salvare. Mi è piaciuto qualche aspetto di questa interfaccia utente.

  • Ti permette di aggiungere dinamicamente un sharer.
  • Si assicura che l'importo sia sempre pari all'importo della transazione.
  • Il sistema aggiorna solo i campi che non sono stati ancora toccati dall'utente . Non sovrascrive gli input dell'utente.
  • Puoi migliorare ulteriormente assegnando un bordo diverso o qualcosa ai campi che l'utente ha esplicitamente modificato.
  • In ogni momento, offre agli utenti le opzioni per ripristinare da una divisione uguale.

Probabilmente puoi aumentarlo con un grafico che si riflette non appena l'utente apporta modifiche ai campi. Puoi avere valori effettivi alla base di ogni barra e fornire gradienti in base alla percentuale del budget totale consumata da ciascuna barra. Probabilmente potresti aggiungere un overlay su ogni barra che mostra la percentuale.

È parte essenziale del tuo algoritmo come gestire il bilanciamento, ma sarei stanco di toccare qualsiasi importo che l'utente abbia esplicitamente inserito. Questo ti lascia con meno controllo. Mentre gli utenti manipolano i grafici, è possibile trasformare le singole barre in rosso o l'intero grafico in rosso se si percepisce che il sistema non può prendere decisioni in base allo stato dell'utente.

Fondamentalmente, la parte matematica sarà complicata. Quando stai cercando di adattare qualche dato, probabilmente considereresti valori storici, valori di tendenza, ecc. Anche la reazione dell'utente a prendere decisioni per lui fa molta differenza.

Buxfer procede in modo neutrale, divide ugualmente la quantità rimanente e, se non è possibile, disabilita l'azione di salvataggio/invio e dice all'utente che le cose non si sommano. Se non desideri quel percorso, avresti bisogno di maggiori informazioni sul comportamento degli utenti in base ai profili, cosa e come usano il sistema, e comunque corri il rischio di infastidire un gruppo che non vorrebbe divisioni disuguali patrocinate dal sistema per loro.

C'è un problema su come aggiungere dinamicamente una categoria quando si svolgono alcuni calcoli. Che effetto dovrebbe avere sulla matematica fino ad ora? Suggerirei divisioni uguali solo se l'utente non ha toccato alcun importo o divisioni uguali tra importi che non sono stati ancora toccati dall'utente.

In ogni caso, rimane una scelta tra essere pesante e limitare pesantemente le operazioni dell'utente, o essere liberale e costringere l'utente a correggere input errati prima che salvi. Questa scelta può essere fatta considerando il contesto dell'applicazione, il tipo di dati da preventivare, la quantità di meta informazioni del sistema.

Suggerirei anche di considerare il tempo di operazione. Un utente esperto si aspetterà un modo per inserire dati che non comporta la manipolazione dei grafici.

Inoltre, so che il tuo esplicito requisito ha detto che non ci sono salti, ma ciò comporterà avere importi come 63, 41, 39 ecc. Chiamalo una pipì personale ma non posso sopportare tali importi sui cursori, provo a arrotondare fino al multiplo più vicino di 5, 2 o 10, in base al tipo di dati di cui mi occupo. Questo richiede più tempo e fastidioso. ( Sconti questo in quanto è un'opinione personale e non supportata da alcuna ricerca). Quando sto cercando di mettere budget su qualcosa, sono più propenso a ballparks che a dettagli come quelli sopra menzionati.

Fammi sapere se devo aggiungere altro.

0
Sol