HCI/sem-bericht/chapters/40_prototype.tex

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\chapter{Prototyp}\label{ch:prototype}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\chapterstart
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%


\section{Designanpassungen aus heuristischer Evaluierung}
Aus der heuristischen Evaluierung durch die Gruppe 7 wurden folgende Maßnahmen der Designanpassung abgeleitet.
\begin{figure}
    \begin{center}
        \includegraphics[width=\textwidth]{./images/evalu-1.png}
        \caption[Designverletzung - Aktualisierungs- und Onlinestatus]{}
        \label{fig:evalu-1}
    \end{center}
\end{figure}
\subsection{Online/Offline Status}
Im unteren Bereich der Webseite soll auf allen Seiten ein Online bzw. Offline Status angezeigt werden, um die in Abbildung~\ref{fig:evalu-1} genannten Designverletzungen zu beheben.

\subsection{Fehlende Spracheinstellung}
Des Weiteren soll in Abbildung~\ref{fig:evalu-2} genanntes Fehlen der Spracheinstellung ergänzt, sowie auf ein einheitliches Menüdesign geachtet werden.
\begin{figure}
    \begin{center}
        \includegraphics[width=\textwidth]{./images/evalu-2.png}
        \includegraphics[width=\textwidth]{./images/evalu-3.png}
        \caption[Designverletzung - Sprache und Ausdrücke]{}
        \label{fig:evalu-2}
    \end{center}
\end{figure}

Abseits dieser Designfehler aus der Evaluierung wurden auch Probleme genannt, welche auf Missverständnisse zurückzuführen sind.

\begin{figure}
    \begin{center}
        \includegraphics[width=\textwidth]{./images/evalu-4.png}
        \includegraphics[width=\textwidth]{./images/evalu-5.png}
        \caption[Designverletzung - Sprache und Ausdrücke]{}
        \label{fig:evalu-3}
    \end{center}
\end{figure}

\subsection{Fehlende Buttons in Kassieransicht}
Wie in Abbildung~\ref{fig:evalu-3} zu sehen, bemängeln die Evaluatoren das Fehlen eines 'Hinzufügen' Buttons in der Kassieransicht.
In dieser soll jedoch keine Änderung an der Produktanzahl mehr durchgeführt werden können.
Zudem soll in der Küchenansicht eine selbige Funktion implementiert werden, wobei dort nur die Erstellung der Produkte und deren Bestätigung durch entsprechendes "`einmaliges Tippen"' auf den produzierten Artikel die Anzahl in der ToDo-Liste um eins verringert wird.

Um weiteren Missverständnissen vorzubeugen und im Anschluss einen Usability Test durchführen zu können, wurde ein interaktiver HTML Prototyp erstellt, welcher nachfolgend kurz beschrieben ist.

\section{Prototypbeschreibung}
Je nachdem, wie bzw. von wievielen Personen CloudMan eingesetzt wird, werden unterschiedliche Funktionen benötigt,
deren Aufrufberechtigung durch den Administrator vergeben werden.
Ein verantwortlicher des Servicepersonals kann die in CloudMan zur Verfügung stehenden Artikel hinterlegen, deren Preise festlegen und auch das Tischmanagement administrieren. (anlegen \& nummerieren der Tische)

Des weiteren besteht auch die Möglichkeit QR-Codes auszudrucken, mit dem sich ein Servicemitarbeiter an der Veranstaltung anmelden und los-kellnern kann.

Zudem ist es jedoch auch möglich, die Software als Einzelperson zu verwenden.

Nachfolgende Übersicht des Prototypen zeigt hierbei alle essentiellen Funktionen der Software.

\section{Allgemein}

\subsection{Hauptfunktionen}
Eine der Hauptfunktionen wird in der Küche aber auch der Schank benötigt.
Entsprechende CloudMan-Hauptseite ist in Abbildung~\ref{fig:cm-kitchen} veranschaulicht.
Es werden offene Koch- bzw. Schankaufträge übersichtlich dargestellt und können auch durchsucht werden.
Durch antippen des Haken wird die Erstellung von Getränke oder Speisen bestätigt.

\begin{figure}
    \begin{center}
        \includegraphics[width=0.8\textwidth]{./images/cm-kitchen.png}
        \includegraphics[width=0.8\textwidth]{./images/cm-bar.png}
        \caption[CloudMan - Funktionsseiten Küche/Schank]{}
        \label{fig:cm-kitchen}
    \end{center}
\end{figure}

Abbildung~\ref{fig:cm-tables} zeigt den Bestellprozess, welcher sich aus der Tischauswahl, der Bestellung selbst sowie der Kassieransicht zusammensetzt.

\begin{figure}
    \begin{center}
        \includegraphics[width=0.8\textwidth]{./images/cm-tables.png}
        \includegraphics[width=0.8\textwidth]{./images/cm-order.png}
        \includegraphics[width=0.8\textwidth]{./images/cm-cashier.png}
        \caption[CloudMan - Funktionsseite Tische]{}
        \label{fig:cm-tables}
    \end{center}
\end{figure}

Für den Veranstalter bzw. dessen für Finanzielles veratwortliche Person, ist eine Seite "`Finanzielles"' über das Hauptmenü erreichbar.
Wie in Abbildung~\ref{fig:cm-finance} zu sehen werden darin der Tagesumsatz, sowie diverse Vergleiche dargestellt.
\begin{figure}
    \begin{center}
        \includegraphics[width=0.4\textwidth]{./images/cm-dashboard.png}
        \caption[CloudMan - Funktionsseite Finanzielles]{}
        \label{fig:cm-finance}
    \end{center}
\end{figure}

Um das Ziel der mobilen Anwendung zu gewährleisten wurde insbesondere auf eine Webbasierte Lösung gesetzt,
welche durch responsives Webdesign auf verschiedenen Gerätegrößen dargestellt werden kann.

Abbildung~\ref{fig:cm-kitchen} zeigt den Login, sowie die Funktionsauswahlseite auf einem Mobiltelefon.
\begin{figure}
    \begin{center}
        \includegraphics[width=0.4\textwidth]{./images/cm-responsive-menuebar.png}
        \includegraphics[width=0.4\textwidth]{./images/cm-login.png}
        \caption[CloudMan - Allgemein - Responsive Webdesign]{}
        \label{fig:cm-res}
    \end{center}
\end{figure}

\chapterend