risposta-alla-domanda-sullo-sviluppo-web-bd.com

Schermata del budget mensile: è necessario prendere in considerazione se è all'inizio / alla fine del mese

Attualmente sto lavorando a un'app mobile di gestione del budget. L'app ha una schermata che mostra un elenco di categorie e per ognuna sono visualizzate le seguenti informazioni:

  • Quanti soldi spesi l'utente ha assegnato alla categoria
  • Quanti soldi sono stati effettivamente spesi per la categoria questo mese
  • Un'indicazione se ha speso più o meno l'importo assegnato

Lo scopo della schermata è che l'utente possa visualizzare una panoramica di tutte le diverse categorie e capire se sta spendendo (o spendendo) in eccesso in una delle categorie in un determinato mese.

Un'illustrazione molto approssimativa:

A very rough illustration

Quello che sto cercando di aggiungere è una sorta di indicazione del tempo trascorso dall'inizio del mese, poiché, se ci stiamo avvicinando alla fine del mese e l'utente non ha utilizzato tutto il suo budget, significa che lo è vicino al raggiungimento del suo obiettivo di non spendere troppo, quindi dovrebbe essere indicato come una cosa positiva.

D'altra parte, se è solo l'inizio del mese, anche se il limite di budget non è stato ancora raggiunto, il mese è appena iniziato, quindi penso che l'indicazione debba essere diversa (quindi gli utenti sanno ancora di aver bisogno fare attenzione a non spendere troppo per il resto del mese).

Sarei felice di avere idee su come incorporare tali informazioni sullo schermo, tenendo presente che sto realizzando una versione mobile solo quindi la proprietà dello schermo è ovviamente limitata.

Grazie!

31
Jeff

Presentare insieme la loro posizione attuale in termini di tempo e budget, come grafici a barre.

Ciò chiarirà che hanno un budget superiore o inferiore a quello che dovrebbero essere a questo punto del mese o l'intero budget mensile.

Mock up of budget as bar graphs

110
maxathousand

Utilizzare un importo proporzionale per determinare se la spesa è inferiore o superiore al budget.

Ad esempio, un budget alimentare di $ 1.000 arriva a circa $ 33 al giorno. Moltiplicalo per il giorno corrente del mese e utilizza tale importo per determinare se l'utente ha superato il budget (prima di aver raggiunto l'intero importo).

Ciò ti consentirà di fornire un feedback accurato per tutto il mese senza dover istruire l'utente che colori diversi sono buoni o cattivi in ​​momenti diversi. Significa anche che non mostrerai di spendere $ 999 il primo del mese come "buono" o "neutro" quando quel comportamento molto probabilmente li porterà a superare il budget molto presto.

Inoltre, queste informazioni possono essere utilizzate per creare grafici che mostrano quando la spesa ha attraversato la linea per essere oltre il budget. (Anche se probabilmente su uno schermo diverso.)

Graph showing actual amount spent on groceries compared to the target budget.

15
Nathan Rabe

Una barra di avanzamento dovrebbe fare il lavoro in questo scenario.

Vorrei anche suggerire di cambiare il carattere utilizzato per la data poiché un'app di finanza deve utilizzare un carattere che si adatta bene ai numeri. Qui il 9 ha una linea di base diversa. Roboto è buono per esempio ma non originale. enter image description here

1
Guillaume Pons

Come possibile estensione a ottima risposta di maxathousand , ho cercato di estendere l'idea per coprire le spese imminenti che sono pianificate/impegnate per la fine del mese ma non hanno effettivamente speso ancora.

Quanto segue mostra la situazione in cui $ 30 è già stato pianificato per essere speso, ma non è ancora stato speso in realtà. Del budget dell'intero mese di $ 240, questo lascia $ 210 da tracciare. La spesa "in pista" è ora di $ 140 (due terzi di $ 210), quindi una spesa effettiva di $ 128 sarebbe inferiore di $ 12 a tale obiettivo:

enter image description here

Alcuni pensieri di design:

  • You could semplicemente riduci il budget dell'intero mese in base alle spese pianificate (rendendolo effettivamente $ 210). Ho due problemi con questo: il primo è che nasconde il fatto che i soldi è saranno spesi, rendendo più facile essere compiacenti della propria spesa. La seconda obiezione è che - a seconda del grado di impegno per la spesa futura - potrebbe essere possibile "annullare la pianificazione" della spesa se si nota che si intende andare oltre il budget. Ciò non sarebbe ovvio se il budget complessivo venisse semplicemente ridotto.

  • Un'altra alternativa sarebbe quella di aggiungere le spese pianificate alla fine della barra " quello che ho speso questo mese" (la barra verde scuro nell'esempio sopra). Probabilmente è più una questione di gusti, ma per me - perché non è stato è stato speso (ancora) - non dovrebbe essere aggiunto a " quello che ho speso "bar. Inoltre, penso che potrebbe confondere il chiaro effetto " sono sotto o sopra la linea dei 20 giorni" che crea il design originale di maxathousand. (Nell'esempio sopra, la casella tratteggiata si troverebbe a cavallo del marcatore $ 140, rendendo meno ovvio se hai un budget inferiore o superiore al budget.

Alcune note su come determinare la dimensione della barra " cosa ho speso":

  • Per mantenere le cose coerenti, l'indicatore " spesa target" ($ 140 nell'esempio sopra) deve trovarsi nella stessa posizione fisico delle altre categorie di spesa.

  • Il importo della spesa target viene calcolato tenendo conto della spesa pianificata: $ 240 budget - $ 30 previsti = $ 210 rimanenti per il mese. In questo caso, £ 210 * 20/30 = $ 140.

  • La chiarezza dell'originale di maxathousand deriva dal fatto che la fine della barra " quello che ho speso finora" sia a sinistra (= buono) o a destra (= bad) della riga dei 20 giorni. Pertanto, la dimensione della barra verde scuro viene determinata in relazione al punto $ 140. Nell'esempio sopra, è 128/140esimo della linea di 20 giorni. Una spesa finora di $ 140 dovrebbe solo toccare la linea dei 20 giorni.

  • Quando la spesa pianificata diventa effettiva spesa, la casella tratteggiata viene rimossa e la barra verde scuro estesa come nell'originale.

  • Un potenziale problema con quanto sopra è che se ci avviciniamo troppo alla fine del mese con la spesa prevista rimanente, il target-marker ($ 140) potrebbe scontrarsi con la legenda "$ 30 pianificata". In tal caso, potrebbe essere necessario unire le informazioni nella legenda sotto la riga (ad esempio "$ 128 + $ 30 di $ 240").

1
TripeHound