72
edits
No edit summary |
No edit summary |
||
Line 64: | Line 64: | ||
[[Image:bad_tree1.png|thumb|right|Abbildung 4. Wachstum der Äste zum Mauspfad.]] | [[Image:bad_tree1.png|thumb|right|Abbildung 4. Wachstum der Äste zum Mauspfad.]] | ||
[http://efraps.kochab.uberspace.de/plants-vs-humans/prototyp_2.html Link 2: Angepasster Prototyp.] | [http://efraps.kochab.uberspace.de/plants-vs-humans/prototyp_2.html Link 2: Angepasster Prototyp.] | ||
Bei dieser Überarbeitung stellte sich heraus, dass sich einige Probleme nicht beheben ließen, da sie ihren Ursprung nicht im Code hatten, sondern im Konzept. Beispielsweise lässt sich die Darstellung eines Baumes sehr schlecht mit einem Mauspfad vereinen. Die Äste des Baumes müssen in unterschiedliche Richtungen wachsen, um die charakteristische Baumform zu erhalten; wachsen alle Äste in eine Richtung so geht diese Form verloren (siehe Abb. 4) | Bei dieser Überarbeitung stellte sich heraus, dass sich einige Probleme nicht beheben ließen, da sie ihren Ursprung nicht im Code hatten, sondern im Konzept. Beispielsweise lässt sich die Darstellung eines Baumes sehr schlecht mit einem Mauspfad vereinen. Die Äste des Baumes müssen in unterschiedliche Richtungen wachsen, um die charakteristische Baumform zu erhalten; wachsen alle Äste in eine Richtung so geht diese Form verloren (siehe Abb. 4) | ||
Andere Probleme, wie das Aussehen des Baumes ließen sich leicht anpassen, was jedoch nicht bedeutete, dass es leicht war ästehtische und passende Formen für den Baum zu finden. Auch die Überlastung des Browsers durch viele wachsende Äste waren der Programmstruktur geschuldet und ließen sich weitestgehend beseitigen, indem das Wachstum des Baumes in unterschiedliche Phasen aufgeteilte wurde. | |||
Bei der Interaktivität und der Wachstumsstruktur ließen sich jedoch keine zufriedenstellenden Lösungen finden. | Bei der Interaktivität und der Wachstumsstruktur ließen sich jedoch keine zufriedenstellenden Lösungen finden. | ||
Line 75: | Line 74: | ||
== Konzeptanpassungen == | == Konzeptanpassungen == | ||
Die Evaluierung des Prototypen hatte einige Probleme aufgezeigt, die zu großen Teilen auf das Konzept des ersten Entwurfs zurückzuführen waren. Einerseits musste eine Lösung | Die Evaluierung des Prototypen hatte einige Probleme aufgezeigt, die zu großen Teilen auf das Konzept des ersten Entwurfs zurückzuführen waren. Einerseits musste eine Lösung zur sinnvollen Steuerung der künstlichen Pflanze mit der Maus gefunden werden und andererseits musste die Interaktivität mit der Pflanze durch eine motivierendere Idee stärker gefördert werden. Die Konzeptänderungen, die zugunsten dieser Anforderungen vorgenommen wurden, sollen in den folgenden Abschnitten beschrieben werden. | ||
=== Interaktionsmethoden === | === Interaktionsmethoden === | ||
In meinem ersten Konzept wurde der Nutzer nicht dazu animiert mit der Webseite zu interagieren, da die Webseite keinerlei Funktion für den Nutzer bot. Sie diente ausschließlich dem Wachstum des | In meinem ersten Konzept wurde der Nutzer nicht dazu animiert mit der Webseite zu interagieren, da die Webseite keinerlei Funktion für den Nutzer bot. Sie diente ausschließlich dem Wachstum des Baumes. | ||
Um die Interaktionen von Mausnutzern mit Webseiten besser verstehen zu können, betrachtete ich wozu die Maus auf Webseiten generell dient und welche Interaktionsmethoden zu beobachten sind. | |||
Ich unterschied zwischen verschiedenen Interaktionsmethoden: | |||
:* Gezielte Interaktion mit der Maus (Bsp.: Anklicken eines Buttons) | |||
:* Unterstützende Interaktion mit der Maus (Bsp.: Mitbewegen der Maus zum Lesen) | |||
:* Zufällige Interaktion mit der Maus (Bsp.: unbewusstes Bewegen der Maus) | |||
:* Keine Interaktion | |||
Da die Webseite des ersten Prototyps nicht direkt zur Interaktion einlud, war davon auszugehen, dass nur zufällige oder keine Interaktion mit der Maus stattfand. In meinem neuen Konzept sollte die Webseite zur gezielten Interaktion einladen. | |||
Es gab zwei Möglichkeiten: | |||
:# Eine Webseite, auf der das Pflanzenwachstum im Mittelpunkt steht. | |||
:# Eine Webseite, auf der der Webseiteninhalt im Mittelpunkt steht. | |||
Bei der Entscheidung für eine der beiden Möglichkeiten half die genaue Beschreibung des Projekttitels "Plants vs Humans". | |||
=== Versus === | === Versus === | ||
Um dem Titel der Semesterarbeit gerecht zu werden, reichte es nicht aus, die Pflanze im Hintergrund der Webseite wachsen zu lassen. | |||
Ich beschloss die Pflanze als Gegner aufzufassen und sie als Störfaktor einzubauen. | |||
Wie störend wäre es, wenn die Pflanze den ganzen Computerbildschirm zuwuchern könnte?! | |||
=== Ranke statt Baum === | === Ranke statt Baum === | ||
[[Image:GmuRanke.png|200px|thumb|right]] | |||
Wie in Absatz 2.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird. | |||
Ein weitere Nachteil des Baumes ist, dass er sinnvollerweise nur von unten ins Bild kommen kann. | |||
Ich wollte meine Pflanze jedoch nicht immer von der gleichen Position aus loswachsen lassen, weshalb ich den Baum durch eine Ranke ersetzte. | |||
Die Ranke hatte einerseits den Vorteile, dass sie an jedem Rand der Webseite starten kann und dass sie sich nicht so oft aufteilt, wie die Äste des Baumes. | |||
=== Rekursive Interaktivität === | |||
= Umsetzung = | |||
== Maustracking == | |||
Zur Erstellung einer Mausheatmap, unterteilte ich die Webseite in ein Gitter aus vielen kleinen Vierecken. Bewegte der Nutzer die Maus über die Webseite, so legte er stets | |||
= Zukünftige Arbeit = | |||
Man kann sich zu dieser Arbeit eine große Anzahl an Erweiterungen vorstellen. | |||
Beispielsweise: | |||
Dynamische Geschwindikeit | |||
Unterscheidung zwischen Klicks und Hover. | |||
Ranken unterschiedlicher Länge |
edits