Dokumentation

1. Inhalt

MooConomics ist ein digitales Haushaltsbuch, in das man zuerst seine regelmäßigen Einkünfte und Fixkosten einpflegt, um sein monatliches Budget abzustecken. Danach soll man schnell und unkompliziert von überall zu jeder Zeit weitere Einnahmen und Ausgaben hinzufügen können - zum Beispiel den Wocheneinkauf bei Penny, das neue Computerspiel und die 20€, die man von Oma zugesteckt bekommen hat. Die Ausgaben werden dabei stets einer Kategorie zugeordnet. Dies ermöglicht eine Reihe von Vergleichen, die man zu anderen Personen und Haushalten ziehen kann, um über den persönlichen Umgang mit Geld zu reflektieren und bei finanziellen Schwierigkeiten leicht zu erkennen, an welcher Stelle man unter Umständen zu viel investiert.

Wir verfolgen mit diesem Projekt unser eigenes Interesse. Für Studierende, die beispielsweise von BAföG leben, ist der tatsächliche Kontostand für alltägliche Geschäfte wesentlich weniger interessant, als das Budget im aktuellen Monat - denn wenn das längerfristig angesparte Geld auf dem Konto ausgegeben ist, wird es so schnell nicht nachgefüllt. Es sollte deshalb also nicht unsere alltäglichen Kaufentscheidungen beeinflussen.

Das Ziel ist ein besserer und übersichtlicher Umgang mit den regelmäßig verfügbaren Finanzen und die Möglichkeit, sich nach verschiedenen Kriterien mit anderen zu vergleichen. Aktuell kann man sich entweder mit dem Gesamtdurchschnitt der Nutzer oder den eigenen Daten aus vergangenen Monaten vergleichen. Geplant sind hier auch noch Einschränkungen wie etwa "Region" (Stadt, Landkreis, Postleitzahlbereich, ...) oder "Tätigkeit" (Studierende, Schüler, Angestellte, ...).

Die Zielgruppe sind private Haushalte jeder erdenklichen Form. Mehrere Personen können sich aktuell einen Account teilen, wenn sie gemeinsam haushalten - allerdings wollen wir auch daran arbeiten, dass verschiedene Benutzerkonten auf den selben Haushalt zugreifen können.

2. Recherche

(Links, Screenshots) zu ähnlichen Seiten

Money Manager Ex
Haushaltsverwaltung als Desktop-Anwendung
https://www.moneymanagerex.org/

MyMicroBalance
Haushaltsverwaltung als Desktop-Anwendung
https://www.mymicrobalance.com/en/screenshots

SayMoney
Haushaltsverwaltung als Mobile App
https://www.microsoft.com/de-de/p/saymoney/9mwt847t6f0f?activetab=pivot:overviewtab

Sparkasse
Web-Budgetplaner
https://budgetplaner.beratungsdienst-guh.de/

3. Wireframe

Die Website ist zunächst horizontal zweigeteilt. Links befindet sich die Hauptnavigation, die sich auf schmalen Displays auf die Icons zusammenschiebt.
Den restlichen verfügbaren Platz erhält der "content-div", der aus Header, Body und Footer besteht. Sowohl Header als auch Footer können aus dem Bild scrollen, wenn der Platz benötigt wird.
Bis auf wenige Ausnahmen besteht die gesamte Website aus Flex-Boxen und reagiert so auf unterschiedlichste Viewport-Größen. Es wurde stets bedacht, dass die Website und ihre Inhalte auch im Hochformat uneingeschränkt nutzbar und lesbar sind.

Die Grafiken zeigen diverse Vorüberlegungen, deren Umsetzung bzw. Nichtumsetzung unter 5. Design näher beleuchtet werden.

4. Sitemap

Nach dem Login sind alle Unterseiten erreichbar (mit Ausnahme der Formulare für Login und Registrierung).

5. Design

Layout

Navigation
Wir sind uns sicher, dass die Navigation am linken Rand am besten aufgehoben ist und auf dem Viewport angeheftet sein soll. Dies ermöglicht schnelle Sprünge zwischen den verschiedenen Seitenfunktionalitäten. Außerdem werden Endgeräte im Hochformat nicht benachteiligt, da wir niemals auf horizontales scrollen angewiesen sind. Wie auf der Moodle-Seite wird die Navigation auf die Icons reduziert, sobald die Breite des Viewports es erfordert.

Header & Footer
Abgesehen vom User-Icon, über das man sich ein- und ausloggen und seine Stammdaten bearbeiten kann, ist der Header für die Funktionalität der Seite nicht relevant. Er schafft allerdings einen optischen Rahmen, der aus unserer Sicht maßgeblich zur Identität der Website beiträgt. Der Footer schließt diesen Rahmen und bietet Platz für die Verlinkung zu statischen Seiten wie etwa dem Impressum. Da wir den Fokus auf Funktionalität und Informationsgehalt legen, können beide aus dem Bild scrollen, um den Platz für Inhalte freizuräumen.

Farben

Das Farbschema soll möglichst simpel gehalten bleiben, um den Nutzer nicht von Inhalt & Funktionalität abzulenken.
Zu Beginn hatten wir an einigen Stellen auch mit dunkelgrauer Schrift gearbeitet, diese jedoch auf Rat auch weiß gefärbt, um die Lesbarkeit und die Kontraste zum Hintergrund zu verbessern.
Wir nutzen den selben Grauton für den Hintergrund der Seite und vieler Elemente, den auch Discord primär einsetzt. Diesen Farbton empfinden wir als neutral, auch auf großen Flächen angenehm zu betrachten und vor allem bietet er tolle Kontraste - vor allem zu Farben, die nicht zu grell strahlen.
Das außerdem fast überall eingesetzte hellblau ist das Ergebnis zahlreicher Experimente, die sich über die gesamte Farbpalette erstreckten. Die weiße Schrift ist darauf sehr gut lesbar und es gibt der Website ein modernes und vor allem technisches Gefühl, welches wir gern vermitteln möchten, da wir die Seite hauptsächlich als ein Werkzeug sehen.
Beim Vergleich der Statistiken können maximal 13 verschiedene Farben für die Diagramme benötigt werden (wenn man die Ausgabenverteilung auf Unterkategorien vergleicht und sich diese in den gewählten Zeiträumen grundlegend unterscheidet). Dafür wurden mit sehr viel Arbeit 13 Farben ausgewählt, die unserer Meinung nach alle miteinander harmonieren.

Schriften

Die primär verwendete Schrift ist 'Bahnschrift'. Sie bietet eine sehr gute Lesbarkeit, wirkt dabei aber deutlich moderner als Arial oder Times New Roman. Trotz der vielen Rundungen wirkt sie unglaublich akkurat und praktisch (was wohl auch bei ihrem Entwurf die Priorität war). Außerdem wird sie großflächig unterstützt und bedarf nicht der Einbindung als Webfont.
Zusätzlich haben wir 'Montserrat' als Google-Font eingebunden. Aktuell wird sie nur für die Beschriftung innerhalb der Kreisdiagramme verwendet, wo sie die Geldbeträge noch etwas futuristischer gestaltet und so die Aufmerksamkeit auf diese Beträge zieht. Ihre größte Stärke entfaltet sie jedoch, wenn man sie mit Kapitälchen verwendet - dies wird vermutlich in späterer Weiterentwicklung des Projekts noch Einsatz finden.
Bei allen Eingabefeldern werden Placeholder in kursiv und auto-fill-Daten in Monospace dargestellt, um die Unterscheidung von eigenen Eingaben deutlich zu machen.

Responsive Design

Da nahezu alle Elemente und Container flex-Elemente und -Boxen sind und wir uns an jeder Stelle Gedanken über das Wrap-Verhalten und die Skalierung gemacht haben, wird die Seite sich an jede gängige Viewport-Größe anpassen können. Bei < 498px Breite sehen einige Formulare nicht mehr symmetrisch aus, können aber bis 150px Gesamtbreite noch genutzt werden.

6. Funktionsbeschreibung

7. Datenbank

8. Rollenmodell

Die User und ihre Ziele wurden in 1. Inhalt beschrieben.
Als Admin hat man für einfachen Support Zugriff auf die Stammdaten der User und kann diese 'aktiv' oder 'inaktiv' setzen, beziehungsweise Bestätigungsmails zur Validierung/Reaktivierung versenden lassen.

9. Herausforderungen

Allgemein:
- Team aus 2 Studenten mit Vertiefung Ingenieursinformatik -> gebündelte Kreativität in technischer Hinsicht, aber wenig Gefühl für optisches Design
- Seite sehr stark auf Funktionalität ausgelegt -> zum Testen werden sehr viele Daten benötigt -> sind auf zusätzliche Tester angewiesen, die ihre Daten hinterlegen
- Zeitmanagement: wir sind in geballten Phasen sehr produktiv und über längere Sicht eher träge -> dürfen die unerledigte Arbeit nicht aus den Augen verlieren
- eigenes Interesse an der Nutzung des fertigen Projekts -> hier und da Interessenskonflikte zwischen Aufgabenstellung durch das Modul und eigener Anforderung außerhalb des FH-Kontext -> letztere vorerst unterordnen

Spezifisch:
- Anspruch: möglichst vollkommen ohne JavaScript auskommen und trotzdem viele Interaktionsmöglichkeiten bieten
> Lösung: JS nur für Validierung der Formulare und Sortieren von Tabellen
> Modals durch CSS
> Labels von Checkboxen und Radio Buttons 'missbrauchen' und als Buttons einsetzen, um Formularfelder ein- und auszublenden
> Diagramme nur aus HTML und CSS zusammensetzen -> SVG > Circle > Stroke > Dasharrays mit Offset

-

10. Besonderheiten

• Alle Tabellen sind durch Klick in die Spaltenköpfe sortierbar
• Bei Kreisdiagrammen werden aus Übersichtlichkeits- bzw. Lesbarkeitszwecken maximal 7 Anteile dargestellt, falls die Datenfülle dies überschreiten würde, werden 6 Anteile herangezogen und der Rest als 'Sonstige' zusammengefasst
• Versucht ein User eine Subkategorie hinzuzufügen, die ein anderer schon erstellt hat, wird keine neue in der DB angelegt, sondern beide teilen sich diese
• Beim Löschen einer Subkategorie wird entsprechend auch nur die Referenz gelöscht, wodurch die Integrität bei vergangenen Buchungen erhalten bleibt

11. Projektmanagement