COFFEE

Interaktive Kommunikationssysteme - COFFEE

Das Semesterprojekt besteht darin ein Interaktives Kommunikationssystem zu gestalten. Wir entscheiden uns für das Thema “Kaffee”. Es steht im Fokus ein nutzerzentriertes Konzept zu entwickeln, welches eine fehlerfreie Bedienung ermöglicht.

1. Ideensammlung

Zu Beginn des Projektes betreiben wir Brainstorming, um mögliche Überpunkte des IKS vorab zu klären. Außerdem können wir unser Thema “Kaffee” dadurch besser eingrenzen.
Wir strukturieren unsere Information und fügen Bilder hinzu 
um einen besseren Eindruck von dem Umfang des Themas 
zu erhalten. Mit dem Erstellen unseres Moodboards können wir einen 
ersten Eindruck für unser IKS gewinnen. Farbakzente und 
Bilder stehen im Mittelpunkt. Um uns inspirieren zu lassen, durchsuchen wir das Netz auf bereits existierende IKS Systeme, interaktive Datengrafiken und Kaffeeübersichten 
zum Thema Anbau, Herkunft und Röstung.

2. Zielgruppe/Benutzungskontext

Unsere Zielgruppe begrenzt sich auf Menschen die es mögen Cafés oder Coffee Shops zu besuchen und ihren Kaffee lieber dort trinken als ihn “to go” mitzunehmen. Sie arbeiten dort, treffen sich mit Freunden oder wollen ein bisschen Zeit für 
sich selbst verbringen. Diese Menschen lieben Kaffee, wollen sich weiterbilden und möchten deshalb mehr über den Kaffee erfahren, den sie gerade trinken. Das “COFFEE” IKS platzieren wir in Coffee Shops oder Cafés. Zu Stoßzeiten sind dort immer viele Gäste. Da die Warte- situation in Cafés verschieden gehandhabt wird, können wir bestimmte Szenarien weder ein- noch ausschließen. So wird beispielsweise der Wartebereich für “to go” Abholungen unterschiedlich sein. Viel Personal um sich allen Gästen 
gleich anzunehmen gibt es oft nicht. Darum soll unser IKS System die Lösung sein um Wartezeiten zu überbrücken. Die Kund- schaft kann sich am iPad über das Produkt informieren das sie konsumieren möchte. Da die Informationen kontext- bezogen und interaktiv vermittelt werden, kann sich der Nutzer diese besser merken. Des weiteren funktioniert unser IKS als Eisbrecher zwischen den Kunden, da ein gemein- sames Interesse besteht. Dieses zeigt dem Nutzer dabei verschiedene Stationen des Kaffees auf der Reise in das Konsumland auf.

3. Recherche

Bei der Recherche fällt auf, dass unser Thema größer ist als gedacht. Wir müssen es eingrenzen. Unser IKS verzichtet auf das Thema Fairtraid sowie auf spezielle Röstungs- und Aufbereitungsarten. Wir beschränken uns darauf dem Nutzer einzelne Schritte des Kaffees auf dem Weg in das Konsumland aufzuzeigen. Aufgrund des hohen Informationsgehalt den wir nach der Recherche sammeln, muss diese strukturiert werden. Wir erstellen eine lineare Anordnung aller Informationen. Bei der Recherche stoßen wir auch auf andere IKS, von welchen wir die Strukturierung der Information und Darstellung dieser ansprechend finden.

4. Skizzen

Bei dem Erstellen von ersten Skizzen versuchen wir Informationen in eine Struktur zu bringen. Wir skizzieren verschiedene Varianten für das Darstellen der Reise des Kaffees. Dabei fokussieren wir uns darauf eine Information- sarchitektur herzustellen, um uns bei dem späteren Wire- framing Arbeit zu sparen.

5. Finale Konzeption

Nach vielen zuvorigen Konzepten, erstellen wir basierend auf diesen unser finales Konzept.
In unserem dritten und finalen Konzept steht die Finalisierung der Informationsarchitektur im Vordergrund. Aus dem zweiten Konzept werden die Menüpunkte, vereinzelte UI Elemente 
und die Beschreibung der Themen übernommen. Einzelne Punkte wie “Anbau” werden überarbeitet, da die Darstellung
der Information irreführend ist. Durch die Verwendung vieler verschiedener Icons, auf diesem Screen, wirkt es überladen. 
Es ist nicht klar ob die jeweiligen Informationen gleich wichtig sind. Außerdem unterscheidet sich dieser Screen von allen anderen. Unter dem Navigationspunkt “Röstung” bauen wir einen Thermometer ein, da sonst nicht klar genug dargestellt wird wie hoch die Temperatur für die jeweilige Röstung sein muss. Außerdem passen wir die verwendeten Illustrationen aneinander an. Wir beschränken uns außerdem auf eine Farbpalette von drei Farben (ausgenommen sind Illus- trationen). Die Idee der “PopUp Fenster” wird verworfen, 
da sie sich von dem hier verwendeten Design unterscheidet. Außerdem wird das visuelle Feedback in der Navigation durch das Unterstreichen des aktuellen Punktes verstärkt. So weiß 
der Nutzer immer in welchem Punkt er sich befindet.

Für den Punkt “Anbau” werden mehrere Varianten erstellt. 
Die Anordnung der Icons verändert sich und eine Illustration einer Kaffeepflanze wird hinzugefügt, um den Kontext klarer zu gestalten. Allerdings wird diese Variante vollständig verworfen. Im Finalen Konzept, findet man unter dem Punkt “Anbau” ein Quiz vor. So kann der Nutzer sein bisheriges Wissen testen. Auch für den letzten Punkt “Zubereitung” werden mehrere Varianten erstellt. Wir entscheiden uns für eine Art “Kaffeebar”, auf welcher man rechts und links scrollen kann um mehr ver- schiedene Kaffeegetränke zu sehen. Tippt der Nutzer auf eines der Getränke, so sieht er den Namen, die Zutaten und die Zu- bereitung des Getränks. Er kann zum Beispiel die Zubereitung seines Kaffees, den er gerade in einem Café bestellt hat, nachlesen.

Bei dem Punkt “Ernte” fällt uns auf, das die eigentlich wichtige Information nicht klar genug dargestellt ist. Vielmehr steht die Weltkarte im Vordergrund und nicht die eigentliche Zahl des geernteten Kaffees pro Jahr. Deshalb gestalteten wir diesen Screen vollständig neu. Wir führen einen Referenzwert (Wal = 100 Tonnen) ein, damit der Nutzer eine bessere Vorstellung hat wie viel diese Menge überhaupt ist. Den Slider für die Jahres- zahlen behalten wir bei. Durch den Referenzwert fokussiert sich der Nutzer hier nur auf die Menge des jährlich geernteten Kaffees.

6. Bedienung

Die Bedienung des IKS erfolgt durch ein iPad. So kann die Eingabe schnell und fehlerfrei erfolgen. Die Navigation ist 
in unserer Anwendung sehr flexibel. Ein idealer Prozess ist 
für eine lineare Struktur vorgegeben, allerdings kann inner
halb des Prozesses flexibel gesprungen werden. Somit ist der Nutzer nicht an eine feste Reihenfolge gebunden. Es werden die Interaktionen Tippen, Sliden und Swipen verwendet.

7. Farben

In unserer Anwendung beschränken wir uns auf sechs Farben für die UI Elementen (einschließlich Weiß und Schwarz). 
Es handelt sich dabei jeweils um verschiedene Brauntöne. Durch die Beschränkung in unserer Farbwahl können mögliche Bedienfehler vermieden werden. Die Schriftfarbe ist immer #FFFFFF. Bei der Highlightfarbe haben wir uns für ein sattes Rot #E12631, entschieden. Dieses Rot ähnelt der Kaffeekirsche.

8. Icons

Die Icons unseres “Coffee” IKS sind minimalistisch und einfarbig gestaltet. Es wird darauf geachtet, dass diese sich dem Stil anpassen und den Nutzer nicht von der wesentlichen Information ablenken. Dennoch soll klar erkenntlich sein, was damit dargestellt werden soll. 
Wir setzen diese Icons an geeigneter Stelle ein, um dem Nutzer die zu vermittelnde Information zu verdeutlichen. Generell haben wir darauf geachtet nicht viele Icons 
zu verwenden, da wir unsere Information eher durch UI Elemente vermitteln wollen. Die Icons wirken dabei unterstützend. Wir verwenden durchgehend die Farbe “Weiß” und setzen eine Kontur an geeigneter Stelle ein.

9. Schrift

Der Schrifttyp Avenir next wird gewählt, weil sie eine gute Lesbarkeit auf Tablets bietet und Information damit einfa-
cher von dem Nutzer aufgenommen werden. Wir variieren 
mit der Schrittgröße und dicke um Teilen von Texten mehr Gewichtung zu geben. So stellen wir eine Hirarchie der wiedergegebenen Information her.

10. Walktrough

Unser IKS kann frei durchlaufen werden. Ein idealer Prozess 
ist vorgegeben, allerdings kann innerhalb dieses Prozesses beliebig gesprungen werden. Im ersten Schritt wird der Nutzer mit einer Logo Animation begrüßt. Anschließend landet er automatisch in dem ersten Navigationspunkt “Vorkommen”. Hier kann er sich näher darüber informieren welche Länder prozentual am meisten Kaffe produzieren.
Im nächsten Navi- gationspunkt “Anbau” darf der Nutzer ein kleines Quiz durch- laufen. So kann er zu Beginn des IKS sein bisheriges Wissen testen. Der nächste Navigationspunkt “Ernte” informiert den Nutzer über die jährliche Ernte von Kaffee. Dabei kann sich der Nutzer mit Hilfe des Referenz- wertes (Wal = 100 Tonnen) die Menge besser vorstellen.
Außerdem kann er verschiedene Jahre, sowie deren Ernte- menge, betrachten. Anschließend folgt der Navigationspunkt “Aufbereitung”. Es gibt verschie- dene Arten Kaffee aufzu- bereiten, doch alle verfolgen das selbe Ziel. Deshalb stellen wir den Prozess des Schälens der Kaffee- bohne dar. So kann der Nutzer in drei Schritten sehen, wie eine Kaffee- bohne geschält wird und welche Schichten entfernt werden müssen. Durch Swipen kann er die Geschwindigkeit selbst bestimmen. Ist die Kaffeebohne vollständig aufbereitet, so muss sie in die Konsumländer für die Röstung transportiert werden. Da rund 80% des Kaffees weltweit verschifft wird, stellen wir dies mit einem Schiff dar. Durch das Tippen auf den Bildschirm kann der Nutzer mehr Informationen über den Transport von Kaffee erhalten. Im nächsten Schritt kann der Nutzer mehr über die Röstung von Kaffee erfahren. Auch hier haben wir das Swipen eingebaut. Zusätzlich ist auf der linken Seite ein Thermo- meter zu sehen, der die jeweilige Temperatur der gewählten Röstung anzeigt. Am Ende des IKS steht der Navigationspunkt “Zubereitung”. Dort kann der Nutzer sich über verschiedene Zubereitungs- arten informieren. Tippt er auf eines der Kaffeegetränke, so wird ihm der Name, die Zutaten und die Zubereitung angezeigt. Wenn Bedarf besteht, kann der Nutzer innerhalb des Prozesses immer vor oder zurück springen.