diff --git a/bericht/bericht.pdf b/bericht/bericht.pdf
index 13707d063c86adb47cf01d81330eea238be28082..fd1af2fd2f1741fbb774b798634cd5a3def536bd 100644
Binary files a/bericht/bericht.pdf and b/bericht/bericht.pdf differ
diff --git a/bericht/bericht.tex b/bericht/bericht.tex
index 931dd951b835f6288d6f6ef1f43d27f77749437b..37651e34bf77946cd055cbfca1af7ef069d55224 100644
--- a/bericht/bericht.tex
+++ b/bericht/bericht.tex
@@ -7,6 +7,7 @@
\usepackage{amssymb}
\usepackage{enumitem}
\usepackage{csquotes}
+\usepackage{graphicx}
% Dimensionen bitte nicht ändern.
\usepackage[left=2cm, right=2cm, top=2cm, bottom=2cm, bindingoffset=1cm, includeheadfoot]{geometry}
%Zeilenabstand bitte nicht ändern
@@ -79,10 +80,10 @@ intuitive Weise zu visualisieren und so gezielt Erkenntnisse über Kundenbedürf
\\
Die durch die Visualisierungen adressierten Informationsbedürfnisse betreffen insbesondere:
\begin{itemize}
- \item \textbf{Identifizierung von Kundenpräferenzen:} Welche Hardwarekomponenten sind für die Kunden am wichtigsten, und
- wie wirken sich diese Präferenzen auf Kaufentscheidungen aus?
- \item \textbf{Produktentwicklung:} Welche Features sollten in zukünftigen Produktgenerationen stärker berücksichtigt oder
- optimiert werden, um die Wettbewerbsfähigkeit zu erhöhen?
+ \item \textbf{Identifizierung von Kundenpräferenzen:} Welche Hardwarekomponenten sind für die Kunden am wichtigsten, und
+ wie wirken sich diese Präferenzen auf Kaufentscheidungen aus?
+ \item \textbf{Produktentwicklung:} Welche Features sollten in zukünftigen Produktgenerationen stärker berücksichtigt oder
+ optimiert werden, um die Wettbewerbsfähigkeit zu erhöhen?
\end{itemize}
Die Visualisierungen bieten den Anwendern somit eine klare und übersichtliche Darstellung der relevanten Daten, die
es ihnen ermöglicht, ihre strategischen Ziele effektiver zu erreichen.
@@ -96,14 +97,14 @@ anhand von Kundenbewertungen veranschaulicht, was einen wichtigen Beitrag zur Id
Die Daten werden in vier verschiedenen Visualisierungen dargestellt, um die Informationsbedürfnisse der Zielgruppe umfassend
zu erfüllen. Diese Visualisierungen sind:
\begin{itemize}
- \item \textbf{Scatterplot:} Stellt jeweils zwei numerische Daten auf zwei Achsen dar und ermöglicht so die Analyse von
- Korrelationen zwischen verschiedenen Variablen.
- \item \textbf{Parallel-Korrdinaten-Plot:} Zeigt alle numerischen Daten der Datenmenge in einer mehrdimensionalen
- Visualisierung, um komplexe Zusammenhänge übersichtlich darzustellen.
- \item \textbf{Baum-Datstellung:} Visualisiert alle Smartphone-Hersteller und deren Modelle aus der Datenmenge in einer
- hierarchischen Struktur.
- \item \textbf{Starplot:} Stellt alle numerischen Daten zu einem Smartphone in einer sternförmigen Visualisierung dar
- und bietet so einen kompakten Überblick über die Leistungsmerkmale eines Geräts.
+ \item \textbf{Scatterplot:} Stellt jeweils zwei numerische Daten auf zwei Achsen dar und ermöglicht so die Analyse von
+ Korrelationen zwischen verschiedenen Variablen.
+ \item \textbf{Parallel-Korrdinaten-Plot:} Zeigt alle numerischen Daten der Datenmenge in einer mehrdimensionalen
+ Visualisierung, um komplexe Zusammenhänge übersichtlich darzustellen.
+ \item \textbf{Baum-Datstellung:} Visualisiert alle Smartphone-Hersteller und deren Modelle aus der Datenmenge in einer
+ hierarchischen Struktur.
+ \item \textbf{Starplot:} Stellt alle numerischen Daten zu einem Smartphone in einer sternförmigen Visualisierung dar
+ und bietet so einen kompakten Überblick über die Leistungsmerkmale eines Geräts.
\end{itemize}
In den folgenden Abschnitten werden die verwendeten Daten, die erstellten Visualisierungstechniken und deren Umsetzung
und deren Anwendungensfälle detailliert beschrieben.
@@ -114,28 +115,28 @@ zu verschiedenen Hardware-Komponenten, Preisen, Bewertungen und weiteren Merkmal
Smartphone-Modelle (insgesamt 984 Einträge in der CSV-Datei). Die Datenspalten der CSV-Datei\cite{Daten} umfassen:
\begin{itemize}[itemsep=0pt]
- \item Brand - Marke des Smartphones
- \item Model - Model des Smartphones
- \item Price - Price des Smartphones
- \item Rating - durchschnittliche Kundenbewertung
- \item 5G - hat 5G oder nicht
- \item NFC - hat NFC oder nicht
- \item IR Blaster - hat IR Blaster oder nicht
- \item Processor Name - Name des Prozessors
- \item Processor Brand - Marke des Prozessors
- \item NumCores - Kernanzahl
- \item Processor Speed - Anzahl der Zyklen pro Sekunde, die eine CPU ausführen kann
- \item Ram and internal storage (ram) - RAM and interner Speicher
- \item Battery - Kapazität der Battery
- \item Fast Charging - hat Fast Charging oder nicht, und falls ja Kapazität
- \item Internal Mem - interner Speicher des Smartphones
- \item RAM - RAM des Smartphones
- \item Screen Size - Bildschirmgröße des Smartphones
- \item Resolution - Auflösung des Smartphones
- \item Refresh Rate - Bildwiederholfrequenz des Smartphones
- \item Camera - Kameraqualität der Rück- und Frontkamera
- \item Card - Speicherkarte unterstützt oder nicht und falls ja Speicherkapazität
- \item OS - Betriebssystem des Smartphones
+ \item Brand - Marke des Smartphones
+ \item Model - Model des Smartphones
+ \item Price - Price des Smartphones
+ \item Rating - durchschnittliche Kundenbewertung
+ \item 5G - hat 5G oder nicht
+ \item NFC - hat NFC oder nicht
+ \item IR Blaster - hat IR Blaster oder nicht
+ \item Processor Name - Name des Prozessors
+ \item Processor Brand - Marke des Prozessors
+ \item NumCores - Kernanzahl
+ \item Processor Speed - Anzahl der Zyklen pro Sekunde, die eine CPU ausführen kann
+ \item Ram and internal storage (ram) - RAM and interner Speicher
+ \item Battery - Kapazität der Battery
+ \item Fast Charging - hat Fast Charging oder nicht, und falls ja Kapazität
+ \item Internal Mem - interner Speicher des Smartphones
+ \item RAM - RAM des Smartphones
+ \item Screen Size - Bildschirmgröße des Smartphones
+ \item Resolution - Auflösung des Smartphones
+ \item Refresh Rate - Bildwiederholfrequenz des Smartphones
+ \item Camera - Kameraqualität der Rück- und Frontkamera
+ \item Card - Speicherkarte unterstützt oder nicht und falls ja Speicherkapazität
+ \item OS - Betriebssystem des Smartphones
\end{itemize}
Die meisten Datenspalten aus der CSV-Datei wurden in die Datenvorverarbeitung der Anwendung integriert, die in Elm
programmiert wurde. Ausgenommen davon ist die Spalte \enquote{Ram and internal storage (ram)}, da hierfür bereits separate
@@ -155,18 +156,18 @@ Beschriftung oder als Filter. Fehlende Datenwerte wurden in Elm als Nothing-Wert
\\
\textbf{Verarbeitungschritte:}
\begin{enumerate}[]
- \item Auswahl der Daten (nach Sinnhaftigkeit für Projekt)
- \item Zuordnung der Daten zu einer Arten (numerische vergleichbare Werte, Wahrheitswerte, textuelle Beschreibungen)
- \item Falls nötig manuelle Anpassung einzelner (fehlerhafter) Werte
- \item Parsen der Datenwerte von der CSV-Datei:
- \begin{itemize}
- \item Falls numerischer Wert in Zeichenkette - extrahieren durch entfernen der Textinhalte und parsen zu Datentyp
- \item Falls numerischer Wert - extrahieren und parsen zu Datentyp
- \item Falls Wahrheitswert - in Elm Wahrheitwert übersetzen
- \item Falls Wert nicht vorhanden (egal welcher Art) - in Elm Nothing übersetzen
- \item sonst - als Zeichenkette speichern
- \end{itemize}
- \item Speicherung der Daten im Model
+ \item Auswahl der Daten (nach Sinnhaftigkeit für Projekt)
+ \item Zuordnung der Daten zu einer Arten (numerische vergleichbare Werte, Wahrheitswerte, textuelle Beschreibungen)
+ \item Falls nötig manuelle Anpassung einzelner (fehlerhafter) Werte
+ \item Parsen der Datenwerte von der CSV-Datei:
+ \begin{itemize}
+ \item Falls numerischer Wert in Zeichenkette - extrahieren durch entfernen der Textinhalte und parsen zu Datentyp
+ \item Falls numerischer Wert - extrahieren und parsen zu Datentyp
+ \item Falls Wahrheitswert - in Elm Wahrheitwert übersetzen
+ \item Falls Wert nicht vorhanden (egal welcher Art) - in Elm Nothing übersetzen
+ \item sonst - als Zeichenkette speichern
+ \end{itemize}
+ \item Speicherung der Daten im Model
\end{enumerate}
Anmerkung: Da bei einigen wenigen Smartphone-Modellen in der CSV-Datei falsche Datenwerte für den RAM und den internen Speicher
vorlagen, wurden diese Daten korrigiert oder ergänzt. Beispielsweise waren bei einigen Modellen RAM und interner Speicher
@@ -188,27 +189,77 @@ verdeutlichen, anstatt sich ausschließlich auf Kundenbewertungen zu stützen.
\section{Visualisierungen}
\subsection{Analyse der Anwendungsaufgaben}
-Analysieren sie die konkreten Anwendungsaufgaben, die die Lösung des Zielproblems durch die Anwender:innen bearbeitet werden müssen.
-Welche sinnvollen mentale Modelle helfen den Personen bei der Bearbeitung.
-Welche Visualisierungen helfen den Personen, die die Software verwenden, sinnvolle mentale Modelle aufzubauen.
-Sind diese mentalen Modelle für sie notwendig, um die Aufgaben lösen zu können? Gehen sie bei ihrer Argumentation von den Anwendungsaufgaben aus und kommen sie dann zu den mentalen Modellen, deren Aufbau durch Visualisierungen unterstützt wird.
+Um das Zielproblem zu lösen, müssen die Anwender mehrere spezifische Anwendungsaufgaben bearbeiten. Diese
+Aufgaben umfassen die Analyse von Kundenpräferenzen, das Erkennen von Mustern in den Kundenbewertungen,
+die Bewertung des Preis-Leistungs-Verhältnisses verschiedener Smartphone-Modelle und das Ableiten von
+Empfehlungen für die Produktentwicklung und -planung.\\
+\\
+Eine der zentralen Aufgaben besteht darin, Zusammenhänge zwischen verbauter Hardware und Kundenbewertungen
+zu erkennen. Dies erfordert, dass die Anwender in der Lage sind, die Beziehung zwischen technischen
+Spezifikationen, Preis und Kundenzufriedenheit zu verstehen und zu bewerten. Hierfür ist es hilfreich,
+ein mentales Modell zu entwickeln, das die Bedeutung und den Einfluss einzelner Hardwarekomponenten
+auf die Gesamtbewertung eines Smartphones erklärt. Beispielsweise müssen die Anwender
+verstehen, dass ein leistungsstarker Prozessor oder eine große Speicherkapazität für bestimmte Nutzergruppen
+besonders wertvoll sind und sich daher positiv auf die Bewertungen auswirken können.\\
+\\
+Diese mentalen Modelle sind notwendig, um die Anwendungsaufgaben effektiv lösen zu können. Die
+Visualisierungen in der Anwendung tragen entscheidend dazu bei, diese Modelle aufzubauen und zu stärken.
+Durch die anschauliche Darstellung von Daten wie Hardwarekomponenten, Kundenbewertungen und Preisen werden
+die Beziehungen zwischen diesen Faktoren klarer und greifbarer, was es den Anwender ermöglicht, fundierte
+Entscheidungen zu treffen.\\
+\\
+Insgesamt unterstützen die Visualisierungen den Aufbau und die Anwendung der notwendigen mentalen Modelle, die für eine
+erfolgreiche Bearbeitung der Anwendungsaufgaben unerlässlich sind. Die klaren und übersichtlichen Darstellungen erleichtern
+es den Anwender, komplexe Datenmuster zu verstehen und sinnvoll in ihren Entscheidungsprozessen zu nutzen.
+
\subsection{Anforderungen an die Visualisierungen}
-Leiten sie Anforderungen an das Design der Visualisierungen ab, die sich durch ihre Analyse des Zielproblems ergeben.
+Aus der Analyse des Zielproblems und der damit verbundenen Anwendungsaufgaben lassen sich mehrere Anforderungen an das
+Design der Visualisierungen ableiten, um die Informationsbedürfnisse der Anwender effektiv zu erfüllen.
+
+\begin{itemize}
+ \item \textbf{Klarheit und Verständlichkeit der Darstellung:} Die Visualisierungen müssen so gestaltet sein,
+ dass sie auch komplexe Daten einfach und verständlich vermitteln. Dies erfordert klare Achsenbeschriftungen,
+ eine einfache auswertbare Visualisierung und eine intuitive Benutzeroberfläche die es den Anwender ermöglicht,
+ auf den ersten Blick die relevanten Informationen zu erfassen.
+ \item \textbf{Interaktive Filteroptionen:} Da die Anwender möglicherweise unterschiedliche Hardwaremerkmale
+ oder Preis-Leistungs-Aspekte analysieren möchten, sollten die Visualisierungen interaktive Filteroptionen bieten.
+ Diese ermöglichen es den Nutzer, gezielt bestimmte Daten auszuwählen und sich auf relevante Aspekte zu
+ konzentrieren. Zum Beispiel könnten Nutzer spezifische Hardwarekomponenten oder Marken filtern,
+ um detaillierte Analysen durchzuführen.
+ \item \textbf{Vergleichbarkeit von Modellen:} Eine zentrale Anforderung ist die Fähigkeit, mehrere
+ Smartphone-Modelle direkt miteinander zu vergleichen. Die Visualisierungen sollten es ermöglichen, verschiedene
+ Modelle nebeneinander darzustellen, um Unterschiede in Hardware, Preis und Kundenbewertungen sichtbar zu machen.
+ Dies könnte durch die Nutzung von Scatterplots, Parallelkoordinaten-Plots oder Starplots unterstützt werden.
+ \item \textbf{Darstellung von Korrelationen:} Die Visualisierungen sollten in der Lage sein, Korrelationen zwischen
+ verschiedenen Variablen, wie z.B. verbauter Hardware und Kundenbewertungen, deutlich zu machen. Scatterplots sind
+ hierfür besonders geeignet, da sie die Beziehung zwischen zwei numerischen Werten visualisieren und so Korrelationen
+ schnell erkennbar machen.
+ \item \textbf{Hierarchische Strukturen:} Da die Daten aus verschiedenen Smartphone-Herstellern und ihren
+ jeweiligen Modellen bestehen, sollten die Visualisierungen auch hierarchische Strukturen abbilden können.
+ Eine Baum-Darstellung wäre hier sinnvoll, um die Organisation der Daten übersichtlich darzustellen und den Anwender
+ die Navigation durch die verschiedenen Modelle zu erleichtern.
+ \item \textbf{Einfache Handhabung und Benutzerfreundlichkeit:} Da die Anwender möglicherweise kein tiefgehendes
+ technisches Wissen besitzen, sollten die Visualisierungen eine einfache und benutzerfreundliche Interaktion
+ ermöglichen. Dies beinhaltet eine intuitive Bedienung sowie klare und verständliche Anweisungen oder Tooltips,
+ die den Umgang mit den Visualisierungen erleichtern.
+\end{itemize}
+Durch die Umsetzung dieser Anforderungen kann sichergestellt werden, dass die Visualisierungen den Anwender
+wertvolle Einblicke bieten und sie bei der Erreichung ihrer Ziele effektiv unterstützen.
+
\subsection{Präsentation der Visualisierungen}
-Präsentieren sie die visuelle Abbildungen und Kodierungen der Daten und Interaktionsmöglichkeiten.
-Sie müssen begründen, warum und wie gut ihre Designentscheidungen die erstellten Anforderungen erfüllen.
-Weiterhin müssen sie begründen, warum die gewählte visuelle Kodierung der Daten für das zulösenden Problem passend ist.
-Typische Argumente würden hier auf Wahrnehmungsprinzipien und Theorie über Informationsvisualisierung verweisen.
-Die besten Begründungen diskutieren explizit die konkrete Auswahl der Visualisierungen im Kontext von mehreren verschiedenen Alternativen.
-Machen sie hier nicht den Fehler, einfach nur Visualisierung aus den vorgegebenen Bereichen zu diskutieren, weil das in der Regel nicht sinnvoll ist.
-Wenn sie sich für einen Scatterplot entschieden haben, ist ein Zeitreihendiagramm in der Regel keine Alternative.
-Diskutieren sie also nicht einfach Zeitreihendiagramme, weil sie in den Anforderungenen an das Projekt neben Scatterplots stehen, sondern suchen sie nach echten alternativen Visualisierungen, die zum Aufbau eines vergleichbaren mentalen Modells führen.
-Diskutieren sie die Expressivität und die Effektivität der einzelnen Visualisierungen.
-
-Die eben beschriebenen Präsentationen und Begründungen sollen für jede der drei folgenden Visualisierungen durchgeführt werden.
-\subsubsection{Visualisierung Eins}
-\subsubsection{Visualisierung Zwei}
-\subsubsection{Visualisierung Drei}
+In den folgenden Abschnitten werden die vier Visualisierungen der Anwendung detailliert beschrieben.
+
+\subsubsection{Visualisierung Scatterplot}
+\includegraphics[width=\textwidth]{img/Scatterplot.PNG}
+
+\subsubsection{Visualisierung Parallele Koordinaten}
+\includegraphics[width=\textwidth]{img/ParalleleKoordinaten.PNG}
+
+\subsubsection{Visualisierung Tree}
+\includegraphics[width=\textwidth]{img/Tree.PNG}
+
+\subsubsection{Visualisierung Starplot}
+\includegraphics[width=\textwidth]{img/Starplot.PNG}
\subsection{Interaktion}
Die präsentierten Visualisierungstechniken müssen interaktiv zu einer Anwendung verknüpft werden.
diff --git a/bericht/img/ParalleleKoordinaten.PNG b/bericht/img/ParalleleKoordinaten.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..e8848245be8195992921bb72b4b4c4b57b9a170b
Binary files /dev/null and b/bericht/img/ParalleleKoordinaten.PNG differ
diff --git a/bericht/img/Scatterplot.PNG b/bericht/img/Scatterplot.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2dcad8db823d8fa471cb78f7b2293c054232e2d4
Binary files /dev/null and b/bericht/img/Scatterplot.PNG differ
diff --git a/bericht/img/Starplot.PNG b/bericht/img/Starplot.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2ec296c6c40e34bed607f31e5f5ba314000d632e
Binary files /dev/null and b/bericht/img/Starplot.PNG differ
diff --git a/bericht/img/Tree.PNG b/bericht/img/Tree.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..fa860d21cb043d88354fac895c036b521e959e10
Binary files /dev/null and b/bericht/img/Tree.PNG differ