Time to say goodbye…

Alles hat bekanntlich ein Ende. So auch diese Bacheloarbeit. Auch wenn das Ende schon ein wenig zurückliegt möchte ich das Ergebnis natürlich nicht vorenthalten. Es folgt also das “Proof of Concept”. Es zeigt die wichtigsten Funktionen und Inhalte der Anwendung.

Koch Doch! Proof of Concept from Mo-Ni on Vimeo.

So, das wars für mich mit “mhh Lasagne”, aber es geht weiter. Jetzt wartet:

Posted in Proof of Concept | Tagged , , , , | 1 Comment

Hintergründe

Jede Anwendung will sich mit einem hübschen Hintergrund schmücken, daher habe ich mir abgesehen von der Holzvariante noch ein paar Gedanken gemacht. Als farbliche Grundlage gibts Grau, Braun und Beige. Beige finde ich sehr angenehm. Es nicht so kalt wie grau, aber auch nicht zu warm. Bei der braunen Variante heben sich allerdings die Illustrationen sehr schön ab. Die verschiedenen Muster sollen ein bisschen Leben in den Hintergrund bringen:

Posted in Gestaltung | Tagged , | Leave a comment

Zeitleiste II

So, ich habe aufgrund des Feedbacks nochmals versucht, die einzelnen Schritte – besonders die deaktivierte Variante – besser hervorzuheben. Die Bildergalerie zeigt die Varianten:

Posted in Gestaltung | Tagged , , , | Leave a comment

Zeitleistendarstellung

Die Zeitleiste ist ja eine sehr komplexe Angelegenheit. Sie dient einerseits als Übersicht im “Kochkosmos”, andererseits muss sie schnell ersichtlich machen, wo sich der Nutzer gerade befindet, welchen Vorgang er gerade “ausgewählt” hat etc.

Die Übersicht zeigt die verschiedenen Zustände die die Zeitleiste annehmen kann, wichtig dabei ist, dass Prozesse nicht für sich allein stehen, sondern gruppiert werden. D.h. alle Schritte die ich durchführen muss um die Bologesesoße für die Lasagne zuzubereiten, werden als ein Block dargestellt. Diese Gruppierung vereinfacht das Verständnis und die Zusammengehörigkeit verschiedener Abläufe.

Grundsätzlich wird zunächst zwischen aktivierten und deaktivierten Gruppen unterschieden.  Die deaktivierten Gruppen haben dabei eine geringere Deckkraft als die aktivierten und treten somit in den Hintergrund.

Als nächster Schritt, wird zwischen aktiven und passiven Kochvorgängen, d.h. Vorgänge, bei denen der Nutzer tatsächlich arbeitet und solche wie “köcheln lassen” “backen”, wo er nur selten aktiv ist und ansonsten der Prozess von selbst abläuft, unterschieden.

Die Abbildung zeigt, dass das Kästchen mit der Schraffur für die passiven Vorgänge steht. Geht man nach der DIN 201 stehen diagonale Schraffuren für feste Stoffe. Auf meine Anwendung übertragen, wären das feststehende, kaum veränderbare, Arbeitsschritte. Für die aktiven Vorgänge habe ich noch zwei Darstellungformen, die beide ihre Vor-und Nachteile haben. Zum einen das leere Kästchen, zum anderen jenes mit Punkten versehen. Das leere Feld nimmt sich zwar zurück, aber drück dadurch auch aus, dass dieser Vorgang beeinflussbar ist, somit ein aktiver Vorgang. Das Punktraster hebt sich im Vergleich zu diagonalen Schraffur hervor, hat auch eine gewissen Aktivität in sich, die durch die Spannung zwischen den Punkten hervorkommt.

Der aktiv/passiv-Darstellung folgt die Einteilung der Schritte in Vergangenheit, Gegenwart und Zukunft. Der Nutzer möchte immer genau wissen, was er gerade getan hat, was er gerade zu tun hat und was als Nächstes folgt, deshalb diese Gliederung.

Da dies der wichtigste Aspekt für den Nutzer ist, habe ich mich entschlossen hier mit Farben zu arbeiten, da sich diese am besten hervorheben. Vergangene Vorgänge werden grau markiert.

Aktuelle Schritte werden grün unterlegt, und zusätzlich durch eine weiße, dicke Kontur hervorgehoben. Diese Kontur dient einerseits zur deutlicheren Markierung, andererseits greift es die Kontur der Illustrationen auf und bedeutet so dem Nutzer: Hier ist was aktiv, hier kann interagiert werden.

Für die kommenden, also zukünftigen Schritte habe ich die weiß-transparente “Standardvariante” beibehalten. Sie drückt aus, dass dieser Bereich noch unberührt ist und der Nutzer kann gleichzeitig sehen, welche Schritte folgen.

Posted in Gestaltung | Tagged , , | Leave a comment

Illustrationen

Für die Rezepte meiner Anwendung habe ich die benötigten Zutaten und Utensilien illustriert.  Wie im vorigen Artikel beschrieben, gewinnen die Illustrationen durch die weiße Kontur eine gewisse Haptik. Man möchte sie anfassen, mit ihnen interagieren.  Gleichzeitig dient die Kontur als Abstraktion der sehr gegenständlichen Illustrationen und hebt diese vom Hintergrund ab.

Posted in Gestaltung | Tagged , , , | 1 Comment

Gestaltung die Erste – das Kontextmenü

Sooo, endlich gehts ans Eingemachte :)

Wie könnte eine passende Gestaltung für eine Kochanwendung aussehen? Ich habe versucht meine Funktionen und Schritte einem Thema zuzuweisen. Da alles in der Küche einmal über die Arbeitsplatte geht, habe ich mich dafür entschieden, eine solche als Grundlage für meine Anwendung zu wählen. Außerdem sagt der Name “Arbeits”platte ja schon aus, dass man hier auch interagieren kann.

Meine zu verwendenden Kochgegenstände und Lebensmittel stelle ich in Form von Illustrationen dar – wie diese letztendlich aussehen, habe ich noch nicht festgelegt, allerdings bekommen die Objekte durch die dicke weiße Umrandung einen “Drück-Schieb-und-Benutz-mich” Charakter. Soviel erst mal dazu, das Thema werde ich an anderer Stelle weiter vertiefen.

Eigentliches Thema soll hier die Gestaltung des Kontextmenüs sein. Wie in meinem Prototypen habe ich einen Entwurf mit einem Halbkreis gemacht, hier sind die einzelnen Funktionen  besonders schnell zu erreichen, da sie nah aneinander liegen und die Auswahl durch leichtes Bewegen des Fingers geändert werden kann. Ich habe mit Farben, Abständen und Konturen experimentiert. Außerdem habe ich noch einen Versucht gestartet, das Kontextmenü in Form eines Balkens in dem die verschiedenen Funktionen integriert sind umzusetzen.

In der Galiere finden sich die ersten Entwürfe (Die Icons sind in dieser Form vorerst Platzhalter):

HINWEIS: Bei diesem Screendesign sind keine Menschen zu Schaden gekommen. Es wurde niemandem ein Zeigefinger entfernt.

Posted in Gestaltung | Tagged | 2 Comments

Farbkonzept

Bunt, bunter, am buntesten. Das ist kochen. Mit meiner Moodchart habe ich bereits versucht wesentliche Farben, die in und rund ums Kochen auftauchen, dingfest zu machen (siehe In The Mood). Dabei bin ich bei einem ersten Farbkonzept gelandet:

  • weiß und grau sind ne saubere Sache – sie stehen für Klarheit, Sauberkeit, Hygiene. Sie bringen Ruhe und Ausgeglichenheit in die Küche
  • braun strahlt Wärme und Gemütlichkeit aus, bildet einen Bezug zu Küchenmöbeln  – die meist aus Holz sind.
  • grün ist lebendig und frisch, weckt Aufmerksamkeit, hat eine positive Ausstrahlung / Aussage, Bezug zu Lebensmitteln
  • rosa-rot ein aufgeweckter, warmer Farbton, Signal-Charakter, aber dennoch nicht aggressiv

Grün und rosa/rot möchte ich vorwiegend zur Hervorhebung einzelner Elemente verwenden. Die restlichen Anwendungsbereiche, wie Menüs und Listen sollten sich farblich etwas zurücknehmen, da durch die Illustrationen viel Farbe ins Spiel kommt.

Posted in Gestaltung, Konzept | Tagged , | Leave a comment

Prototyp Teil II – Suchen/Stöbern

Und wiedereinmal habe ich für mein High-End iPad einen Prototypen erstellt. Diesmal habe ich mich dem Thema “Suchen/Stöbern” gewidmet, das ich schon im letzten Artikel mit einem recht verwirrenden Bild dargestellt habe. Wie das ganze in Interaktion aussehen kann, habe ich versucht über diese zwei kurzen Videos darzustellen.

Erklärung zu den Videos:
Zunächst wird das Suchfenster geöffnet, anschliesend innerhalb der Cluster nach Rezepten gesucht, indem bestimmte Gruppen und Untergruppen geöffnet werden. Hier sind nur drei Kategorien dargestellt, denkbar wären natürlich weitere Kategorien, sodass ein kleines “Cluster-Universum” entsteht. Über das schon bekannte Kontextmenü, das wie gewohnt über einen *longpress* aufgerufen werden kann, können Filter angewandt werden um nur bestimmte Rezepte anzuzeigen. Um z.B. ein harmonisches 3 Gänge Menü zusammenzustellen, kann der Nutzer per *drag&drop* ein bereits gewähltes Gericht auf ein Cluster eines anderen Bereichs legen um dazu passende Gerichte anzuzeigen. Befindet man sich in der “letzten Stufe” also im Rezept selbst kann wiederum das Kontextmenü aufgerufen werden. Der Nutzer kann nun Informationen zum Gericht erhalten, es abspeichern oder direkt kochen. Ein gespeichertes Gericht wird im Menüpunkt “Mein Kochbuch” abgelebt.

Das zweite Video zeigt die selben Abläufe, allerdings nicht anhand des Kontextmenüs, sondern in Form von Filtern, die sich am rechten Bildschirmrand befinden und per *drag&drop* auf das gewünschte Cluster gezogen werden können. Das hat den Vorteil, dass der Nutzer genau sieht, welchen Filter er wo angewendet hat. Ein *doppelklick* auf ein Cluster schließt dieses.
Um ein Zufallsmenü zu erstellen, wird der Beschleunigungssensor des iPads genutzt. “Schüttelt” der Nutzer das Gerät, werden die Cluster durchgemischt und ein Zufallsmenü – mit natürlich harmonierenden Gerichten- wird dem Nutzer dargeboten. Anschließend kann der Nutzer die Gerichten über das Kontextmenü abspeichern.

Posted in Konzept | Tagged , , , | Leave a comment

Kochablauf – Prototyperie

Das Konzept geht weiter. Diesmal habe ich mich etwas stärker mit dem Kochprozess beschäftigt. Die Schwierigkeiten hierbei sind:

  • verschiedene Funktionen abhängig vom Objekt darstellen / aufrufen
  • eine Liste der Zutaten greifbar machen
  • den zeitlichen Ablauf darstellen und gleichzeitig anzeigen, wo sich der Nutzer befindet
  • ausgeführte Schritte als solche erkennbar machen

Anhand der Bildergaliere möchte ich zeigen, was ich mir überlegt habe:

Um zu zeigen, wie die Interaktion mit der Zeitleiste und den Funktionen innerhalb der einzelnen Kochschritte ablaufen könnte, habe ich einen hochwertigen Prototypen für mein Super-iPad programmiert:

Ich hoffe das war verständlich ;)

Posted in Konzept | Tagged , , , , | Leave a comment

Konzeptideen & Papiermodelle

Kurz und knapp ein paar Ideen zum Thema Suche & Einstellungen – klar strukturiert und übersichtlich aufgebaut. Der Nutzer kann durch herausziehen der einzelnen “Kategorie-Schubladen” zunächst einmal die Art des Essens wählen. Im nächsten Schritt kann er über die Filter rechts bestimmte Rezepte auswählen die dann markiert werden. In diesem Fall gibt eine Suppe die Fleisch enthält zur Auswahl. Wählt er die Suchfunktion, kann er über die Tastatur, die im unteren Bereich eingeblendet wird seinen Wunschtext eingeben.

Ähnlich aufgebaut ist auch das Einstellungsmenü. Schubladen lassen sich aufziehen, bieten verschiedene Möglichkeiten. Hier wäre es auch denkbar, auf die Schubladen zu verzichten, da die wenigen Funktionen gut Platz auf dem recht großen Display finden würden.

Persönliche Einstellungen und Hilfe folgen dem selben Prinzip.

Posted in Konzept | Tagged , | Leave a comment