Proof of Concept

Unser Konzept haben wir auf der Information Lovers Website über die Kombination aus Storyboard Scribbles und kurzen Videos des Prototyps visualisiert. Den Proof of Consept finden sie hier.

Interface

Beim Umsetzen der ersten Screens in Photoshop fiel uns auf, dass wir die geplante Struktur des Paper Prototypes in gewissen Bereichen überdenken müssen. Bereits die Wireframes (siehe Artikel Paper Prototype) zeigten uns, dass die App sehr unübersichtlich ist. Es gibt viele verschiedene Ebenen, sehr unterschiedliche Interaktionsmöglichkeiten und Transitions und auch die Visualisierung ist nicht durchgängig. Uns ist aber genau das besonders wichtig: Unser Anspruch war von Anfang an, dass die App so übersichtlich und reduziert wie möglich wird. Der Nutzer sollte nicht viel Zeit damit aufwenden müssen, die Benutzung der App zu verstehen. Begründet ist dies vor allem durch die geringe verfügbare Zeit des Auftraggebers. Deswegen haben wir die Trennung des Bereiches mit der Begriffliste von dem Bereich mit den Bildern aufgehoben. Diese Entscheidung brachte drei wichtige Vorteile:

1. Der Nutzer kann die Bilder im Zusammenhang mit den Begriffen betrachten (links in der Liste sind die Begriffe rechts daneben die zugehörigen Bilder)
2. Die Liste nimmt sehr wenig Platz ein und hätte als allein stehendes Element zu viel leeren Raum entstehen lassen
3. Durch das Zusammenführen von Liste mit Bildern wurden weitere Ebenen eingespart wie z.B. die Übersicht über Begriffe mit zugehörigen Bildern (siehe Artikel Paper Prototype, Foto „Bilderübersicht“)

Wir konnten so die Ebenenvielfalt der App extrem verringern. Es gibt nur noch einen zentralen Bereich, von dem ausgehend jeder wichtige Teil der App erreicht werden kann. Trotz allem ist es uns wichtig, dass sich der Bereich „Liste/Begriffe“ optisch stark von dem Bereich der Bilder abhebt. Dies ist deswegen von Bedeutung, da sie von unterschiedlichen Personen erstellt werden. Die Liste generiert der Auftraggeber und die zugehörigen Bilder fügt der Designer ein. Erreicht haben wir dies, indem wir die Liste sehr dunkel gehalten haben und den zugehörigen „Content“, also die Bilder, auf einen sehr hellen Hintergrund gesetzt haben. Wir arbeiten hier also mit Kontrast. Die Akzentfarbe der App ergibt sich aus der Corporate Farbe des Unternehmens. So unterstützt der Gesamteindruck oder die Anmutung der App direkt auch die Anmutung des Moodboards – und zwar entsprechend der CD Vorgaben!

An dieser Stelle noch Scribbles zu einem möglichen Logo. Letztendlich wurde dann folgendes Icon entwickelt

 

STORYBOARD PAPER PROTOTYPE

Kommentarfunktion/ Bewertung der Bilder

Wie bereits im vorangehenden Post angesprochen, wollen wir uns nun auf bestimmte Bereiche des Konzeptes konzentrieren. Ein kleiner Teil davon ist die Kommentarfunktion der Bilder (und Begriffe). Durch das Feedback von Prof. Tille und verschiedener Anregungen seinerseits zu diesem Thema haben wir uns näher mit der Frage auseinander gesetzt, wie die Kommentarfunktion aussehen muss, damit sie den Designer bei der Bildauswahl sowie beim Verstehen der Anforderungen unterstützt. Für den Designer ist nicht (nur) relevant, ob das gewählte Bild zu einem bestimmten Begriff  passend ist oder nicht, sondern er möchte vor allem auch wissen, WARUM sich der Kunde für oder gegen ein Bild entscheidet. In dem gesamten Prozess geht es darum, dass der Kunde seine Vorstellungen und Wünsche vermittelt und der Designer die passende Designsprache findet. Der Kunde will dafür allerdings so wenig Zeit wie möglich aufbringen. Ein erster Ansatz um diesem Sachverhalt gerecht zu werden, war eine Erweiterung bzw. Optimierung der Kommentarfunktion der Bilder. Sodass nicht nur Kommentare in Form von Text hinzugefügt werden können, sondern, dass der Kunde mit Hilfe eines Semantischen Differentials bewerten kann, welche Ausprägungen einer Eigenschaft für ihn wichtig sind (bsp: Farbe eher kalt oder warm?). Allerdings sehen wir hier 3 Schwierigkeiten:

1. Der Kunde hat nicht viel Zeit und möchte vermutlich nicht für jedes Bild eine solche Bewertung abgeben.
2. Diese Bewertung bezieht sich auf den Begriff als Ganzes und somit auf die gesamte Sammlung der Bilder
3. Es wäre effektiver wenn der Designer schon vor dem Aussuchen der Bilder wüsste, welche Ausprägungen der Eigenschaften innerhalb eines Begriffes (z.B. hochwertig) für den Kunden entscheidend sind.

Eine mögliche Optimierung wäre, dass dieses Semantische Profil jeweils auf einen Begriff angewendet wird, also schon BEVOR der Designer die Bildauswahl trifft. So müsste dies nicht für jeden Begriff durchgeführt werden und der Aufwand für den Kunden wäre stark reduziert.

Die Problematik mit der Kommentar- bzw. Bewertungsfunktion der Bilder ist damit allerdings noch nicht gelöst. Zudem stellt sich die Frage, welche Eigenschaften und Ausprägungen im Semantischen Differential ausgewählt werden, denn sie müssen für jeden beliebigen Begriff anwendbar sein.

Die Kommentarfunktion sollte dem Kunden (durch vorgefertigte Kategorien o.ä.) die Bewertung oder Analyse des Bildes vereinfachen. Dabei spielt natürlich wieder der Aufwand (Zeit) eine Rolle. Dieser sollte so gering wie Möglich gehalten werden.

Design Space – Gestaltungsvarianten

Für jeden Schritt des Szenarios haben wir uns jeweils 2 verschiedene Designvarianten überlegt. Insgesamt bilden die 5. Schritte das gesamte Konzept ab. Allerdings werden wir nicht alle umsetzen können: Wir werden uns aus allen Schritten einen oder mehrere aussuchen, die wir genauer bearbeiten werden. Dazu werden ausführlichere Skizzen sowie Wireframes folgen, wenn wir uns für eine Design Alternative entschieden haben.

Interaktionen im Activity Scenario

1. Projekt anlegen

• Titel des Projektes
• Beschreibung/Kommentar zum Projekt
• Kontaktdaten des Auftraggebers (URL, Adresse, E-Mail)
• CI-Farben des Unternehmens
• Deadline /Zeitraum des Projektes
• Kunde hinzufügen: Rechte einstellen

2. Begriffe eingeben

• Begriff eingeben
• Begriff bearbeiten/ löschen
• Kommentar hinzufügen
• Begriffe gruppieren

3. Bilder hinzufügen

• Bilder hinzufügen (Kamera/ Ordner/ Passiv aus Browser)
• Bilder kategorisieren: aus vorhandener Kategorie wählen bzw. neue anlegen
• Bilder löschen
• Bilder kommentieren

4. Recherche

• Begriff-Bild Paare durchsuchen
• Begriff-Bild Paare in eigens Projekt einfügen

5. Begriff-Bild Paare absegnen

• Status vergeben: Bilder fehlen, sind unpassend, fertig

6. Moodboard generieren

• Moodboard wird automatisch aus als fertig markierten Bildern erstellt

Scenario-Based Design

Um den Überblick nicht zu verlieren und um einige unserer Schritte einordnen zu können, möchten wir hier eine Möglichkeit aufweisen, wie ein Prozess, orientiert am Scenario-Based Design (Rosson & Carroll), ablaufen kann. Einige der Schritte haben wir ausgelassen oder verändert, und somit den Prozess an unsere Anforderungen angepasst:

1. Problem Scenarios

• Personas
• Stakeholder-Diagramm
• Themes
• Artefacts
• Hierarchical Task Analysis
• Problem Scenarios
• Claims Analysis

2. Activity Design

• Lösungen
• Claims Analysis (der Lösungen)
• Metaphern
• Activity Scenarios
• Claims Analysis

3. Information Design

• Design Space (Gestaltungsvarianten)
• Information Scenarios (der Gestaltungsvarianten) (Interaction Patterns als mögliche Grundlage)
• Claims Analysis (der Information Scenarios)
• Storyboard (der gewählten Gestaltungsvariante)
• Claims Analysis (des Storyboards)

4. Interaction Design

• Interaction Scenario (Interaction Patterns als mögliche Grundlage)
• Prototype

Dieser Prozess ist orientiert an den Vorgaben von Prof. Burmester aus der Veranstaltung „Interaktionstechniken“ im SS 2012

Voraussetzungen – Anforderungen – Funktionen

Voraussetzungen:

1. Der Kunde hat wenig Zeit & er will sich nicht zu lange mit der Design Erörterung auseinander setzen
2. Der Kunde hat wenig Erfahrung mit Moodboards, dem Designprozess und Design Techniken
3. Der Kunde hat Schwierigkeiten, seine Vorstellungen zu verbalisieren und zu visualisieren
4. Dennoch will der Kunde über das Design entscheiden und
5. Der Kunde will seine eigene Meinung einbringen können
6. Der Designer will vor dem Entwerfen die Wünsche und Vorstellungen des Kundens kennen lernen, möchte diese visualisieren und seine Visualisierung überprüfen
7. Auch der Designer will sich nicht zu lange mit der Erörterung des Designs aufhalten
8. Der Designer möchte schnell und einfach Bilder hinzufügen können, egal wann er inspiriert wird

Anforderungen:

1. App muss einfach und auf das Wesentliche reduziert sein
2. Die App muss dem Kunden die Möglichkeit bieten, Begriffe einzugeben.
3. In der App muss eine Referenz/ Orientierung (z.B. eine fertige List mit Begriff-Moodboard Paaren) vorhanden sein, die dem Kunden hilft, seine Vorstellungen zu verbalisieren
4. Die App braucht eine Funktion, mit welcher der Kunde die Moodboards absegnen kann
5. Die App braucht eine Kommentarfunktion für die Moodboards, sodass der Kunde den Verlauf beeinflussen kann
6. Die App muss dem Designer die Möglichkeit geben, den Begriffen des Kundens Bilder zu zuordnen und die Begriffe und Bilder zu kommentieren
7. App muss einfach und auf das Wesentliche reduziert sein
8. Die App muss einfaches Hinzufügen von Bildern aus dem Web, lokalen Ordnern oder der Kamera ermöglichen – evtl. bedeutet dies auch, dass die App auf verschiedenen Devices verfügbar sein muss!

Funktionen:

• Begriffseingabe in eine Begriffsliste
• Gruppierungsfunktion
• Recherche in einer fertigen Begriff-Moodboard Liste
• Funktion zum Zuordnen von Bildern zu den Begriffen
• Funktion zum Hinzufügen von Bildern aus: Web, lokale Ordner & Kamera
• Add On für Browser zum hinzufügen von Bildern der jeweiligen Website in die App
• Kommentarfunktion für Bilder & Begriffe
• Funktion zum Festlegen vom Status des Begriff-Moodboard Paares

Activity Scenario – Storyboard

Der Anwalt und Auftraggeber Gerhard Löbke trifft sich mit dem Webdesigner Andreas Schmidt um die ersten Schritte für das Design zu erarbeiten. Herr Schmidt stellt Herrn Löbke die App, die sie dazu verwenden werden, vor. Er erklärt ihm, dass die App ihnen dabei hilft, eine passende Designsprache zu finden.

Herr Löbke gibt zu bedenken, dass er nicht viel Zeit investieren kann. Außerdem erklärt er, dass er wenig Erfahrung mit Designprozessen hat, er aber dennoch genaue Vorstellungen von der Website hat.

Andreas beruhigt ihn, und erklärt, dass der Prozess mit der App wenig Zeit in Anspruch nimmt dass Herr Löbke muss lediglich Begriffe eingeben muss. Außerdem findet er eine vorgefertigte Liste mit Begriffen, die ihm dabei helfen können seine Vorstellungen zu verbalisieren.

Herr Löbke möchte direkt die ersten Begriffe eingeben. Dafür legen sie zunächst ein neues Projekt an. Dann fügt Herr Löbke verschiedene Begriffe hinzu, die seine Vorstellung der Website gut beschreiben.

Sie besprechen die gefundenen Begriffe und Herr Schmidt weißt Rudolf darauf hin, dass sie wenn sie nicht zusammen sind, die Vorgänge, Änderungen oder Entwicklungen in der App direkt klären können. Mit diesem letzten Hinweis verabschiedet sich Herr Schmidt von Herr Löbke, denn dieser muss schon zu seinem nächsten Termin.

Wieder zu Hause, möchte Herr Löbke einige weitere Begriffe hinzufügen. Er öffnet die App und durchsucht die Liste mit vorgefertigten Begriff-Moodboard Paaren. Er entdeckt viele passende Begriffe die er in seine Liste übernimmt.

Er sieht auch, dass Herr Schmidt bereits Bilder hinzugefügt hat und betrachtet diese ausführlich.

Ein Bild in dem Moodboard zum Begriff „elegant“ sagt ihm nicht zu, und er beschließt, dies Herrn Schmidt über die App mitzuteilen.

Einige Tage später, als Herr Löbke gerade im Web surft, stolpert er über Mercedes Automobil Designs, die seiner Meinung nach gut zu den Begriffen „hochwertig“ und „elegant“ passen.

Deswegen fügt er die Bilder in die Moodboards ein und beschließt gleich noch einige weitere passende Bilder zu suchen.

Nachdem er fast 10 weitere Bilder eingefügt hat, gönnt er sich mit einem kleinen Spaziergang eine Pause – doch auch hier lässt ihm der Auftrag keine Ruhe. Er sieht ein elegant geschwungenes Gebäude, welches er sofort in die Liste aufnehmen möchte.

Er fotografiert das Gebäude und fügt das geschossene Foto in die App ein. Er nimmt sich vor, zu Hause im Web weiter nach passender Architektur zu suchen, weil er sich durch das gefundene Gebäude inspiriert fühlt.

Erste Überlegungen zum Aufbau der App

Die App soll möglichst reduziert sein. Wir wollen sie nicht mit Funktionen überladen, wenn auf die Funktionen verzichtet werden kann. Beispielsweise wäre ein Bildbearbeitungsfunktion überflüssig, da der Auftraggeber vermutlich keine Bilder überarbeiten wird und der Designer dazu andere Programme verwendet.

Es ist uns außerdem wichtig, dass es nicht zu viele verschiedene und zu tief verschachtelte Ebenen gibt: Wir haben uns überlegt, wie wir die Begriffe in der Stichwortliste in Gruppen zusammenfassen könnten. Zunächst dachten wir an ein simples Ordner System. Allerdings stört uns daran, dass der Nutzer nicht alle Begriffe gesammelt an einem Ort sehen kann. In unserem Szenario wird deutlich, dass es von Vorteil ist, wenn die gruppierten Begriffe alle gemeinsam betrachtet werden können. So gehören die Begriffe „simpel“ und „elegant“ zwar einer unterschiedliche Gruppe an, jedoch hängen sie inhaltlich zusammen. Zudem hilft es dem Auftraggeber, wenn er stets eine Übersicht aller Adjektive hat. Deswegen bleiben die Begriffe alle auf einer Ebene in einer gemeinsamen Liste – sie werden allerdings visuell verknüpft, wenn Gruppierungen gebildet werden.