ässä.ch


Anschauen, aber nicht anfassen

Read in English

Neben dem Modul Smartphone App Workshop besuchte ich dieses Semester auch ein Fach genannt Web Engineering. Inhaltlich für mich wenig neues, es handelte sich um eine etwas tiefere Einführung in HTML, CSS, JavaScript (jQuery) und PHP (Wordpress Plugins). Den Unterricht konnte ich mir also getrost sparen. Interessant an dem Modul war, dass wir von Anfang an gleich an einem selbstgewählten Projekt arbeiten konnten, welches die Hälfte der Note ausmachte. Das im letzten Semester verwendete AngularJS gefiel mir so gut, dass ich dessen Möglichkeiten in diesem Projekt noch mehr ausreizen wollte.

Idee

Die Idee für das Projekt hatte ich schon ein halbes Jahr vorher. Ich begann damals die Informationen über Produkte, die ich im Supermarkt kaufte, in eine simple MySQL Datenbank einzugeben. Diese Informationen umfassten: den Namen, die Menge, den Preis, das Geschäft, die Marke, alle Nährwerte und eine komplette Liste aller Zutaten. Das Eingeben war mühsam, speziell die Zutaten, aber die Motivation, die Idee später umzusetzen, reichte, um die Datenbank auf etwa 150 Einträge anwachsen zu lassen.

Der Grundpfeiler war also gelegt und ich gab als Projektbeschrieb für das besagte Modul die Idee ein. Ich wollte eine Webseite erstellen, die einem Benutzer Informationen über Lebensmittel liefert. So können Produkte mühelos zwischen unterschiedlichen Supermärkten verglichen werden, noch bevor man sich entscheidet, wo man heute einkaufen will.

Webseite

Da das Projekt bewertet wurde, habe ich es möglicherweise etwas übertrieben mit Schnick-Schnack. Die Startseite bietet eine Pinterest-inspirierte Übersicht über alle Produkte in der Datenbank. Beim ebenfalls vorhandenen Infinite Scrolling werden aufgrund der noch zu kleinen Datenmenge einfach die vorhanden Produkte wieder kopiert, was die Illusion der Unendlichkeit auch in Absenz einer für Benutzer interessanten Datenbasis (Supermärkte haben viel mehr als 150 Artikel) perfekt machen soll.

Pinterest-like Infinite Scrolling

Konzept

Irgendwie muss es möglich sein, unterschiedlich benannte und verspackte Produkte, die für den Konsumenten aber eigentlich dasselbe darstellen, unter einen Hut zu bringen.

Illustration Apfel Migros = Apfel Coop

Hier kam mir die Idee der Abstrakten Produkte. Diese tragen den Namen, den wir im alltäglichen Gebrauch verwenden. Wenn sich ein Markenname bereits für den alltäglichen Gebrauch durchgesetzt hat, kann auch dieser verwendet werden. Beim Hinzufügen eines Produktes wählt man deshalb ein existierendes Abstraktes Produkt oder erstellt ein Neues.

Da die Meisten nicht gerne durch eine Liste von benannten Lebensmitteln stöbern und um den Abstrakten Produkten etwas mehr Leben einzuhauchen, zeichnete ich zusätzlich für jedes Abstrakte Produkt ein Icon. Wie man Icons sauber gestaltet lernte ich im zweiten Semester im Fach Designtheorie. Ich setzte auf einfache, unifarbene Darstellungen mit dicken Linien, sodass die Icons auch im Kleinformat noch zu erkennen sind.

Some Icons

Für mehr Ordnung kann man den Abstrakten Produkten unterschiedliche Kategorien zuweisen, die dann auch für die konkreten Produkte gelten.

Usability

Das Eingeben von Produkten soll so einfach wie möglich sein, deshalb habe ich einige massgeschneiderte Eingabefelder erstellt. Wählt man ein Geschäft aus, so erscheint daneben gleich das Vorschaubild und falls vorhanden kann man nun auch eine Eigenmarke dieses Geschäftes auswählen. So muss man nicht die Eigenmarken aller Geschäfte durchforsten.

Geschäft mit Eigenmarken

Wichtig ist auch die Eingabe von Zutaten. Diese werden Zutat um Zutat eingegeben und gleich oben aufgelistet. Merkt man nun, dass man etwas falsch geschrieben hat, kann man es bequem für die erneute Eingabe kopieren und dann löschen.

Zutateneingabe

Informationsvisualisierung

Ein Produkt soll möglichst informativ präsentiert werden. Diagramme machen es möglich, schnell einen Überblick über die wichtigsten Kennzahlen des Produktes und deren Beziehung zu einem selbst zu erhalten. Es gibt vier Typen von Diagrammen, die man zur Ansicht auswählen kann. Dabei ist das erste kein wirkliches Diagramm, denn es handelt sich um die in den Vereinigten Staaten weit verbreitete Darstellung der Nährwerte. Ich habe diese verwendet, da sie auch von der Darstellung her klar normiert ist, was man von den in der Schweiz anzutreffenden Darstellungen nicht behaupten kann.

Textuelle Darstellung der Nährwerte

Obige Darstellung erreicht man erst durch Navigation. Als Ausgangspunkt wird ein einfaches Donut Diagramm dargestellt. Dieses zeigt die Nährwerte und deren mengenmässige Beziehungen zueinander. Beim Drüberfahren werden Erklärungen und ein äusserer Ring mit weiteren Informationen angezeigt. Dieser zusätzliche Ring stellt die Unterkategorien und deren Beziehung zum inneren Ring dar. So wird aussen zum Beispiel gezeigt, wie viel Zucker Teil der Kohlenhydrate ist.

Das standard Donut Diagramm

Es folgt ein etwas komplizierteres Diagramm, das aber auf dem ersten aufbaut. Jedoch kann es an die Bedürfnisse des Benutzers und die gewünschte Menge angepasst werden. Für optimale Resultate muss der Benutzer erst die Richtlinie für die tägliche Aufnahme auswählen. Dies geschieht, indem man sagt, ob man eine Frau, ein Mann, oder ein Kind ist. Danach muss noch die Menge, standardmässig die ganze Packung, ausgewählt werden. Die Darstellung zeigt nun im inneren Ring, wie hoch dein Tagesbedarf ist und aussen im Verhältnis dazu, wie viel mit diesem Produkt abgedeckt wird.

Konfiguriere das Diagramm.
Entsprechend wird das Diagramm angezeigt.

Zum Schluss noch ein einfacheres Diagramm, das zeigt, woher die Kalorien stammen.

Dieses Diagramm ziegt, woher die Kalorien stammen.

31. August 2014