Scrollytelling: Geschichte eines Unternehmens

Beitragsbild Scrollytelling - Geschichte eines Unternehmens

Autorinnen: Maria Sael  & Jeanice Noraman 


Inhalt

Einleitung

Jedes Unternehmen hat eine Geschichte, diese wird häufig auf der Unternehmenswebsite dargestellt. Doch wie kann man sich als Unternehmen von anderen abheben und die (potenziellen) Kunden und User ansprechen?

Eine Möglichkeit, um das zu erreichen ist das sogenannte “Scrollytelling”, bei dem Storytelling auf eine interaktive und kreative Ebene gehoben wird. Dem User wird mithilfe von unterschiedlichen Scroll-Techniken eine Geschichte auf eine neue und interessante Art übermittelt.

Einige Beispiele von Scrollytelling auf hohem Niveau:

Als Hilfestellung und Inspiration hat uns das Youtube-Video “Apple Airpod Pro Javascript Animation Tutorial” von Dev Ed gedient.

Konzept

Um die „Über uns“-Seite des Unternehmens „Cleantaxx“ spannender und interaktiver zu gestalten, kann der User durch die Implementierung von Scrollytelling die Seite selbst steuern. Durch Scrollen wird die Geschichte des Unternehmens erzählt, so dass der User auf die Reise in die Geschichte von Cleantaxx mitgenommen wird und sich ein Bild über das Unternehmen machen kann.

Das Ziel ist es, die Informationen auf interaktive Art zu vermitteln und den User zu ermutigen weiter zu scrollen und ihn zu animieren bis zum Ende dranzubleiben. Dabei sollen die Informationen weiterhin auf eine seriöse Art übermittelt werden.

Aufbau

Der User wird mit einem Intro-Video begrüßt, das er selbst durch Scrollen steuert. Beim Runterscrollen wird das Video abgespielt und durch Hochscrollen kann es wieder zurückgespult werden. Danach erhält der User mit einem kurzen Text die wesentlichen Informationen über das Unternehmen.

Scrollytelling Bild 1
Header und Intro

Anschließend beginnt die Unternehmensgeschichte, wobei man auch diese selbst steuert. Beginnend mit dem Jahr 2009 kann der User durch Scrollen die wichtigsten Ereignisse des Unternehmens erscheinen lassen. Auf der Reise durch die Unternehmensgeschichte wird der User von einem grünen Punkt auf der Timeline begleitet. Die blauen Punkte zeigen die wichtigsten Ereignisse im Verlauf der Jahre an, die erscheinen wenn man runterscrollt.

Scrollytelling Bild 2
Item auf der Timeline

Code

HTML

Da wir uns auf die Animation konzentrieren wollen und uns nicht mit dem Aufbau einer gesamten Website beschäftigen wollen ist der Header nur beispielhaft als Screenshot im Code eingefügt.

Der Content befindet sich innerhalb des Bodys in div-containern, angefangen mit dem Intro-Video und einem Text in der Mitte des Videos (welcher mithilfe von JavaScript durch scrollen verschwindet).

<!--Beispielhafter Header-->
  <header>
    <div class="container">
      <img src="Medien/header.png">
    </div>
  </header>

  <body>
    <!--Intro mit Video-->
    <div class="intro">
      <h1>Wer wir sind</h1>
      <video src="Medien/cleantaxxIntro.mp4" type="video/mp4"></video>
    </div>

Nach dem Video folgt ein Block mit einer kurzen Einführung zum Unternehmen und anschließend ist die Timeline platziert. Diese enthält in div-containern mit der Klasse “timeline-item” die Boxen links und rechts vom Zeitstrahl. Auf der Timeline haben wir für jedes timeline-item ein Timeline-Icon erstellt, welches ein wichtiges Ereignis darstellt. Im div “timelineContent” ist für jedes Ereignis die Jahreszahl, ein Bild und ein Text angegeben. Mithilfe der id’s “content1” etc. identifizieren wir im JS-Teil die Boxen, um sie pinnen zu können. Die fadeIn Klassen sind ebenfalls für den JS-Teil wichtig, damit wir die verschiedenen Elemente nacheinander erscheinen lassen können.

<!--Info übers Unternehmen-->
    <div class="container">
      <div id="info">
        <h1>Unternehmen</h1>
        <h2> Cleantaxx gehört in der Branche zu den Unternehmen mit der meisten Erfahrung im Bereich der Rußfilterreinigung. Jeden Tag liefern wir eine umweltschonende Alternative zum Neukauf. Trotz der anhaltenden positiven Entwicklung mit dem stetigen Wachstum sind wir ein flexibles, wegweisendes Unternehmen mit flachen Hierarchien geblieben. </h2>
      </div>

      <div id="timeline">
        <!--Box für Jahr 2009-->
        <div class="timelineItem">
          <div class="timelineIcon2"></div>
          <div class="timelineIcon"></div>
          <div class="timelineContent" id="content1">
            <h2>2009</h2>
            <img class="fadeIn" src="https://i.ibb.co/5xRmdw2/benjamin-kleemann-cleantaxx-geschaeftsfuehrer.jpg">
            <p class="fadeIn">Benjamin Kleemann gründete im Jahr 2009 nach einem Jahr Marktforschung das Unternehmen Cleantaxx. Geschaffen wurde damit ein unabhängiger Dienstleister für die Reinigung von Dieselpartikelfiltern (DPF). Das Unternehmen bietet seitdem maßgeschneiderte Lösungen für Hersteller, Händler, Werkstätten und Anwender. Gereinigt werden alle Dieselpartikelfilter, herstellerübergreifend vom PKW bis zum Schiff – für alles was mit einem Dieselmotor angetrieben wird. Die Säulen der Cleantaxx-Reinigung bilden eine taggleiche Logistik, eine umfangreiche Prüfung und Dokumentation, sowie eine zertifizierte und schonende Reinigung innerhalb 24 Stunden.
            </p>
          </div>
        </div>

Die beschriebene Vorgehensweise haben wir für jedes Ereignis angewendet. Im Body haben wir außerdem die verschiedenen JS-libraries bzw. Plugins angegeben, die wir verwenden wollen. Abschließend haben wir einen beispielhaften Footer eingefügt.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script> <!-- später rausnehmen-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/BezierPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/MotionPathPlugin.min.js"></script>

    <script src="app.js"></script>
  </body>
  <!--Beispielhafter Footer-->
  <footer>
    <img src="Medien/footer.png">
  </footer>

CSS

Um das Layout unserer Webseite zu formatieren, haben wir ein externes CSS-Stylesheet verwendet. Mithilfe des CSS-Stylesheet können wir Bilder, Box, Container, Video, Header, Textkörper, Links und Logogröße, Farbe und Stil, Aussehen und Positionierung der Timeline sowie den Abstand zwischen Elementen steuern und angeben, wie Elemente positioniert und angeordnet werden sollen. Box-sizing, html Seite, Body und Footer

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
}

body {
  background: #f9f9f9;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, tahoma, verdana;
  line-height: 20px;
  font-size: 14px;
  color: black;
}

footer {
  position:relative;
  width: 100% ;
  height:auto;
  overflow: hidden;
}

Intro Formatierung

/**********Intro*******/
.intro {
  height: 100vh;
}

.intro video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index:1;
}

.intro h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: #2c5697;
}

Images, Hyperlinks, Container

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/*****Überschriften*****/
h1, h2, h3, h4 {
  font-family: "Dosis", arial, tahoma, verdana;
  font-weight: 500;
}

Infobox

/*****Info Box*****/
#info {
  display: block;
  margin-left: 180px;
  margin-right: 180px;
  margin-bottom: 50px;
}

#info h1 {
  text-align: center;
  padding: 10px 0;
  color: #2c5697;
}

#info h2 {
  font-weight: lighter;
  text-align:center;
}

Die gesamte Timeline-Struktur wurde ebenfalls mit CSS erstellt, indem man die Timeline-Breite, Farbe, Länge, Position, Paddings und Margins definiert und die Boxen an den Seiten der Linie anordnet und zwischen den linken und rechten Containern unterscheidet, indem man sie auf eine andere Klasse definiert.

/*****Timeline*****/
#timeline {
  width: 100%;
  margin: 30px auto;
  position: relative;
  padding: 0 10px;
  content: "";
  clear: both;
  display: table;
}

#timeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #2c5697;
  left: 50%;
  top: 0;
  position: absolute;
}

#timeline .timelineItem {
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}

/**Punkte auf Timeline**/
#timeline .timelineItem .timelineIcon {
  background: #2c5697;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  border-radius: 50%;
}

#timeline .timelineItem .timelineIcon svg {
  position: relative;
  top: 14px;
  left: 14px;
}

/**Grüner Punkt auf Timeline**/
#timeline .timelineItem .timelineIcon2 {
  background: #3ea838;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  border-radius: 50%;
}

#timeline .timelineItem .timelineIcon2 svg {
  position: relative;
  top: 14px;
  left: 14px;
}

/*******Content auf Timeline*******/
#timeline .timelineItem .timelineContent {
  width: 45%;
  background: #fff;
  padding: 20px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  transform: translateX(50%);
}

#timeline .timelineItem .timelineContent h2 {
  padding: 15px;
  background: #2c5697;
  color: #fff;
  margin: -20px -20px 0 -20px;
  font-weight: 300;
  border-radius: 3px 3px 0 0;
}

#timeline .timelineItem .timelineContent.right {
  float: right;
  margin-left: 55%;
  transform: translateX(-50%);
}

Wir haben auch in den CSS-Dateiklassen definiert, die zu einigen Elementen hinzugefügt werden müssen, um Animationen von JavaScript aus anzuwenden. Zum Beispiel die Klasse “appear”, die hinzugefügt wird, damit die Elemente mit der Klasse eingeblendet werden, indem die Deckkraft des Elements mit Leichtigkeit (Opacity) von 0 auf 1 geändert wird.

Die “appear”-Klasse wird auch Elementen mit der Klasse timelineContent hinzugefügt, um sie mit einem Einblendeffektnach rechts und links und umgekehrt durch Ändern der Deckkraft und der Transformationsachse gleiten zu lassen.

/*****Fade in*****/
#timeline .timelineItem .timelineContent,
#timeline .timelineItem .timelineContent.right {
  transition: opacity 250ms ease-in, -webkit-transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in,
    opacity: 0;
}

#timeline .timelineItem .timelineContent.appear,
#timeline .timelineItem .timelineContent.right.appear {
  transform: translateX(0);
  opacity: 1;
}

.fadeIn {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fadeIn.appear {
  opacity: 1;
}

JavaScript

Content einsliden

Die gewünschte Funktion in diesem Code besteht darin, das “Timeline content -div” aus der Richtung des Punktes in der Timeline an seinen Platz gleiten zu lassen und den darin enthaltenen Inhalt (das Bild und den Text) erscheinen zu lassen, sobald der Inhalt nach unten gescrollt wurden.

Um diese Funktion in JavaScript zu erreichen, haben wir das IntersectionObserver() “Interface” (eine Art von Objekt) verwendet. Der IntersectionObserver()-Konstruktor erstellt ein neues IntersectionObserver-Objekt und gibt es zurück. Es benötigt zwei Parameter: callback und options (optional).

Callback-Parameter: Eine Funktion, die aufgerufen wird, wenn der Prozentsatz des Zielelements sichtbar ist, einen Schwellenwert” threshold” überschreitet. Der Callback erhielt als Eingabe zwei Parameter: entries und Observer.

  • entries: Ein Array von IntersectionObserverEntry-Objekten, von denen jedes einen überschrittenen ” threshold” darstellt und entweder sichtbar wird als der durch diesen ” threshold” angegebene Prozentsatz.
  • Observer: Der IntersectionObserver, für den der Rückruf aufgerufen wird.

Options-Parameter: Ein optionales Objekt, das den observer anpasst.

  • rootMargin: Um sicherzustellen, dass es syntaktisch korrekt ist
  • thresholds: Um sicherzustellen, dass sie alle im Bereich von 0,0 bis einschließlich 1,0 liegen.

In der Callback-Funktion haben wir eine foreach-Schleife definiert, die jeden Eintrag “Entry” durchläuft und prüft, ob der IntersectionObserver schneidet oder nicht. Und um Fehler zu vermeiden, geben wir die Funktion das Befehl “return”, falls sie sich nicht überschneidet. Aber wenn es sich überschneidet, soll die Funktion, die classList (appear) hinzuzufügen, die wir in CSS erstellt haben, die die Elemente erscheinen oder von links und rechts gleiten lässt. Danach haben wir die Funktion erstellt haben nachgerufen mit der (unobserved) Methode, damit die Funktion stoppt, sobald sie ihr definiertes Ziel erreicht.

//-----------fadeIn und von Seiten einsliden---------------
const faders = document.querySelectorAll(".fadeIn");
const sliders = document.querySelectorAll(".timelineContent");

const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -50px 0px"
};

//-------------------observer für fadeIn--------------------
const appearOnScroll = new IntersectionObserver(function(
    entries,
    appearOnScroll
  ) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add("appear");
        appearOnScroll.unobserve(entry.target);
      }
    });
  },
  appearOptions);

  faders.forEach(fader => {
    appearOnScroll.observe(fader);
  });

Und weil die definierten Optionen zu schnell waren, um bemerkt zu werden, haben wir den Schwellenwert auf eins und den rootMargin auf: 0px 0px -50px 0px festgelegt Damit die Animation funktioniert, sobald wir zum Inhalt herunterscrollen.

Schließlich, um die Aktion zum Leben zu erwecken, wir rufen es mit einer ForEach-Schleife auf, die in die definierten Elemente (sliders und Faders) geht. und wendet die definierte Funktion (appearOnScroll und slideOnScroll) mit der Methode Observe an.

• sliders: wählt alle Elemente aus, die die Klasse “.timelineContent” haben • faders: wählt alle Elemente aus, die die Klasse “.fadeIn” haben

//------------------Einsliden Options----------------------
const sliderOptions= {
  threshold: 0,
  rootMargin: "0px 0px -50px 0px"
};
//------------Observer für von rechts und links------------
const slideOnScroll = new IntersectionObserver(function(
    entries,
    slideOnScroll
  ) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add("appear");
        slideOnScroll.unobserve(entry.target);
      }
    });
  },
  sliderOptions);

sliders.forEach(slider => {
  slideOnScroll.observe(slider);
});

Video-Animation

Um diese Animation umsetzen zu können werden verschiedene Libraries benötigt. Eine davon ist ScrollMagic, welche es ermöglicht auf Scroll zu animieren. Zusätzlich verwenden wir GSAP (genauer gesagt TweenMax), um den Text animieren zu können. Eine sinnvolle Hilfe die wir benutzt haben ist die das debug Plugin von ScrollMagic namens “addIndicators”, welches rechts am Bildschirm Indikatoren für die Trigger einfügt (wie der Name schon sagt).

Um ScrollMagic zu implementieren wird ein Controller im Code benötigt. Anschließend kann man anfangen die verschiedenen Szenen zu erstellen und dem Controller hinzuzufügen, wobei jede Szene ein Teil vom Code ist, den man animieren möchte.

Scrollytelling Bild 3
Indikatoren rechts

Die erste Szene beschäftigt sich mit der Animation des Videos. In der Szene gibt es verschiedene Optionen, wie die Dauer (wie viele Pixel soll gescrollt werden), das Trigger-Element (wann soll die Animation starten, wobei 0=oben, 0.5=Mitte, 1=unten) und die Trigger-Hook (wo auf dem Bildschirm soll das Element getriggert werden. Sobald der “Haken” auf das Element trifft, wird es animiert.

Anschließend muss die Szene durch “.addTo(controller);” dem Controller hinzugefügt werden. Um einen Pin zu setzen, damit das Video für die Dauer der Animation haften bleibt verwenden wir “.setPin(intro);”. Hier kann man ebenfalls die Indikatoren für Hook, Start und Ende mithilfe von “.addIndicators();” anzeigen lassen.

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");

//----------------------ScrollMagic-------------------------
const controller = new ScrollMagic.Controller();

//------------------------Szenen----------------------------
//------------------------Video-----------------------------
let scene = new ScrollMagic.Scene({
    duration: 5000,
    triggerElement: intro,
    triggerHook: 0
  })
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

Nach allen Szenen animieren wir nun das Video, wozu wir einige Variablen benötigen. Da wir nicht wollen, dass das Video beim scrolleln abgehackt aussieht, programmieren wir einen ease-Effekt. Mithilfe von einem Delay, wird das Video nachdem man aufhört zu scrollen noch kurz weiter abgespielt.

  • accelamount = ease-Effekt am Ende (das was von den Frames noch übrig ist)
  • scrollpos = Wo gescrollt wird
  • delay = Soll aufholen wohin wir scrollen

(Um Sekunden zu erhalten, teilen wir die Scroll-Position durch 1000.) Als letztes setzen wir ein Intervall, in dem wir dem delay das hinzufügen was gescrollt wird und es um 0.1 beschleunigen. Um den ease-Effekt nun zu erhalten geben wir an, dass video.currentTime = delay sein soll.

//--------------------Video Animation-----------------------
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos - delay) * accelamount;
  console.log(scrollpos, delay);

  video.currentTime = delay;
}, 43.5);

Um nun den Text zu animieren, sodass dieser nicht die ganze Zeit in der Mitte des Video bleibt, erstellen wir eine neue Szene. In der neuen Szene geben wir erneut an, wie weit gescrollt werden soll, was das Trigger-Element ist und wo die Trigger-Hook sein soll. Um es zu animieren brauchen wir Tweenmax, in dem wir angeben, dass der Text innerhalb von 3 Sekunden von einer opacity (Deckkraft) von 1 zu einer opacity von 0 gehen soll. In der soeben erstellten Szene setzen wir nun noch einen Tween, damit der Text nicht einach nach 3 Sekunden verschwindet, sondern durch scrollen verschwindet.

//---------------------Text Animation-----------------------
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

let scene2 = new ScrollMagic.Scene({
    duration: 3000,
    triggerElement: intro,
    triggerHook: 0
  })
  .setTween(textAnim)
  .addTo(controller);

Content anpinnen

Damit wir den Content, also die Boxen mit dem Inhalt, anpinnen können, brauchen wir jeweils eine ScrollMagic-Szene pro Box. Wie auch schon bei der Szene des Videos, geben wir die Dauer, das Trigger-Element und die Position der Trigger-Hook an. In diesem Fall wollen wir, dass jede Box für 300 Pixel angepinnt wird (es also trotz scrollen hängen bleibt). In jeder Szene ordnen wir dem Trigger-Element die entsprechende ID zu, sodass die Boxen nacheinander angepinnt werden.

//---------------------Pin Content--------------------------
var scene4 = new ScrollMagic.Scene({
    duration: 400,
    triggerElement: "#content1",
    triggerHook: 0.1
  })
  .setPin("#content1")
  .addIndicators({name: "1 (duration: 400)"})
  .addTo(controller);

var scene5 = new ScrollMagic.Scene({
    duration: 400,
    triggerElement: "#content2",
    triggerHook: 0.1
  })
  .setPin("#content2")
  .addIndicators({name: "2 (duration: 400)"})
  .addTo(controller);

//-----------------Und so weiter...--------------------

Die gleiche Methode verwenden wir auch, um den grünen Punkt in der Mitte anzupinnen und mitlaufen zu lassen.

//----------------------Pin Punkt---------------------------
var scene3 = new ScrollMagic.Scene({
    duration: 6200,
    triggerElement: ".timelineContent",
    triggerHook: 0.1
  })
  .setPin(".timelineIcon2")
  .addIndicators({name: "Punkt"})
  .addTo(controller);

Anmerkung

Das in unserer Animation verwendete Unternehmen Cleantaxx weiß von unserem Projekt, wir haben es jedoch nicht in Zusammenarbeit mit dem Unternehmen erstellt, sondern eigenständig und rein für unsere MM-SYS Abgabe. Wir sind nicht Urheber des Contents, welches wir in der Animation verwendet haben, haben jedoch die Erlaubnis bekommen den Content ihrer Seite zu verwenden. Nach Absprache mit uns dürfte das Unternehmen Cleantaxx die Animation zu eigenen Zwecken verwenden, falls gewünscht.

Quellen


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Mini Game “Magic Garten” – Blumen pflanzen als interaktive Animation

eitragsbild Tutorial: Mini Game “Magic Garten” - Blumen pflanzen als interaktive Animation

Autorinnen: Maria Olberg  und Elisabeth Rutt 


In diesem Tutorial zeigen wir, wie man eine interaktive Animation entwickeln kann. Wir stellen dazu unsere Animation vor und gehen auf das Konzept, Techniken und Besonderheiten der Animation sowie Ausschnitte des Quellcodes ein.

Link zur Animation

ZIP-Ordner zum Downloaden

Inhaltsverzeichnis

Das Konzept unserer Animation

Bei unserer Animation handelt es sich um das kleine, interaktive Spiel “Magic Garten”, durch das sich der User mit Hilfe von Buttons weiter klicken kann. Das Ziel des Spiels ist es, Blumen in einem Garten zu pflanzen und diese wachsen zu lassen. Dabei kann man zwischen drei verschiedenen Arten von Blumen wählen. Außerdem können die Blumen u.a . auch mit Hilfe einer Gießkanne gegossen werden, damit sie weiter wachsen.

Die Idee zu dieser Animation kam dadurch, dass wir, unabhängig von der Person, die es spielt, für jeden User einen interessanten Zeitvertreib für Zwischendurch entwickeln wollten. Vor allem, soll sie aber Kindern Spaß machen. Die Darstellung der Elemente ist im Comic-Stil gehalten und die Hintergrundmusik verstärkt den Spiele-Charakter.

Das Ziel der Animation ist es, den User mit Hilfe von interaktiven Elementen durch die einzelnen Schritte des Spiels zu führen, damit er im Magic Garten die Blumen pflanzen kann. Dazu gibt es einen helfenden Charakter: eine Biene “Maja”, die den User mit hilfreichen Informationen zu den jeweiligen Schritten des Spiels versorgt. Über die interaktiven Buttons gelangt er entweder zum nächsten Schritt des Spiels oder erhält Anweisungen, was im jeweiligen Schritt zu tun ist. Die Anweisungen erscheinen mit Hilfe von visuellen Effekten in einer Sprechblase.

Insgesamt erfüllt die Animation daher zwei Funktionen: Die erste Funktion bezieht sich auf den Inhalt der Animation und ist das Spiel an sich, bei dem der User die Blumen einpflanzen und wachsen lassen soll sowie das Erzählen der Story, indem sich der User durch die einzelnen Szenen klickt. Die zweite Funktion ist die Optik, die den User zum Spielen animieren soll. Dafür wurden Elemente und visuelle Effekte eingebaut, die das Spiel attraktiver gestalten, wie z. B. die Biene, die den User durch das Spiel begleitet und die lachende Sonne, die über den Garten scheint.

Die Animation besteht aus 4 Szenen, die den User vom Intro bis zu den fertig gewachsenen Blumen leiten. Außerdem sind im Spiel auch Entscheidungen für den User eingebaut, die den weiteren Verlauf der Animation bestimmen.

Aufbau der Animation

Die Animation besteht insgesamt aus 4 aufeinander folgenden Szenen:

Erste Szene: Start und Intro

Der erste Teil der Animation ist der Startbildschirm mit dem Titelbild des Spiels. Hier befindet sich der “Play”-Button, über den der User zur ersten Szene gelangt. Zu Beginn erscheint die Biene “Maja”, die sich vorstellt dem User eine kurze Einführung in das Spiel gibt. Anschließend fordert sie ihn dazu auf, mit dem Spiel zu beginnen und Blumen zu pflanzen. Dazu erscheint der Button “Blumen auswählen”, über den der User in die zweite Szene gelangt, um die Art der Blume, die er pflanzen möchte, auszuwählen.

MagicGarten Bild
Weiterführender Button zum Auswählen der Blumen

Zweite Szene: Auswählen und Pflanzen von Blumen

Sobald der User auf “Blumen auswählen” geklickt hat, erscheinen drei Beutel mit verschiedenen Blumensamen, die Lieblingsblumen von Maja. Jeder Beutel zeigt auch das Bild der jeweiligen Blume. Fährt der Spieler mit der Maus über die Bilder der Blumen, sagt Maja auch etwas zu der jeweiligen Blumenart über ihre Sprechblase. Unter jedem Beutel gibt es den Button “Auswählen” und mit einem weiteren Klick auf den ausgewählten Beutel beginnt das Einpflanzen. Der Beutel beginnt anschließend, die Samen automatisch im Garten zu pflanzen und es sprießen bereits kleine Pflanzen.

MagicGarten2
Der User hat die Wahl zwischen drei Blumensorten

Dritte Szene: Blumen gießen und wachsen lassen

Während des Spiels gibt Maja hilfreiche Tipps zum Spielverlauf. In dieser Szene freut sie sich über die eingepflanzten Blumen und macht auf die Gießkanne aufmerksam, mit der der User die Blumen gießen kann, damit sie wachsen. Der User kann sie Gießkanne anklicken, um sie hoch zu heben und mit der Maus anschließend darüber fahren, um mit dem Gießen zu beginnen. Als nächstes gibt Maja den Tipp, die Blumen nun in der Sonne weiter wachsen zu lassen. Dazu kann der User nun auf die Sonne klicken, die daraufhin beginnt, stärker zu scheinen und über das Blumenfeld zu wandern. Anschließend bietet Maja einen Magic Booster an, um die Blumen doppelt so stark wachsen zu lassen. Der User kann hier zwischen “Ja” und “Nein” auswählen. Je nach dem, welche Antwort der User wählt, ändern sich die Animation und die Reaktion von Maja.

MagicGarten3
Der User wählt beispielhaft Sonnenblumen aus
MagicGarten4
Der User kann die Blumen gießen und durch die Sonne wachsen lassen

Vierte Szene: Outro

In der vierten Szene spielt der User nicht mehr aktiv mit. Maja beginnt mit Hilfe einer Animation über die Blumenwiese zu fliegen. Zum Schluss bedankt sie sich für die Hilfe des Users und schenkt ihm als Dank ein Glas mit Honig. An dieser Stelle ist die Animation beendet und es erscheint der Button “Restart”, wodurch die Seite neu geladen wird und der User wieder zum Intro gelangt.

MagicGarten5
Schlussszene: Maja bedankt sich für die Hilfe und der User kann das Spiel neu starten

Der Quellcode

Verwendete Programmiersprachen für die Animation sind HTML5, CSS3, JavaScript und jQuery. HTML wird für die Gestaltung sowie den Grundaufbau der Seite und des Spiels genutzt. CSS sorgt für die richtige Positionierung, Style-Anpassungen und mit Hilfe von keyframes auch für die kleine Animationen und visuelle Effekte.

Mit Hilfe von JavaScript werden die Objekte je nach Auswahl der Story-Optionen angezeigt bzw. versteckt, der Text bei den Hover-Effekten geändert, die Auswahl der Blumensorte für den weiteren Verlauf des Spiels gespeichert und die Index-Datei so umgeschrieben, dass sie sich automatisch angepasst hat. Außerdem erscheinen die Objekte durch JavaScript nach bestimmten Zeitangaben für ein optimales Spielerlebnis, wie z. B. die automatische Änderungen des Textes und die Bewegung der Gießkanne nach einigen Sekunden. Die Seite besteht aus drei DIV-Containern: Der erste zeigt die Überschrift “Magic Garten”, der zweite das Spielfeld und der dritte zeigt einen Untertitel.

<body>
    <script src="animation.js"></script> <!--Einbindung der JavaScript Datei--> </div>
    <div class="header"> <!--Div-Container wird angezeigt nach dem Spielstart--></div>
    <div id="animation_feld" class="animation_null"> <!--Hauptbereich: interaktives Spiel--></div>
    <div class="biene"> <!--Intro des Spieles und Platziereung der Beiene während des ganzen Spiel--></div>
<div class="footer"> <!--Unterbereich mit Autorennamen und versteckte Audio--> </div> </body>
Beispiel für DIV-Container im Quellcode

Gestaltung von besonderen Elementen

Innerhalb der Animation gibt es verschiedene interaktive Elemente, die sich mit Hilfe von Animationen durch die Szenen bewegen und gewisse Aktionen auslösen.

Die verwendeten Bilder sind im PNG-Format und stammen von Pixabay. Die Überschrift und der Untertitel sowie die fertig gewachsenen Blumen wurden selbst in Photoshop erstellt. Damit die Bilder optimal angezeigt werden, wurde der z-Index verwendet. Dieser unterscheidet sich bei den Bildern der jeweiligen Szenen und man sollte ihn so anpassen, dass Bilder möglichst gut dargestellt werden.

Bewegende Elemente und visuelle Effekte

Maja

Damit Maja dem User durch das Spiel helfen kann, wird sie durch von Keyframes zum Leben erweckt. Mit Hilfe des JavaScript Befehls .show() und .hide() wird sie passend zur jeweiligen Szene eingesetzt bzw. versteckt. Hierbei gibt es drei verschiedene Keyframe Animationen: Zuerst bewegt sich Maja vom Startbildschirm nach unten auf das folgende Bild, sobald der User das Spiel startet. Damit sie ihn mit nützlichen Informationen durch das Spiel führen kann, erhält sie Sprechblasen, die mit Hilfe der Anweisung

setTimeout(function() {$("#rede_1").css({"visibility": "visible"});}, 2000); 

angezeigt und mit bspw.

setTimeout(function() {$("#text_1").hide();$("#text_2").css({"visibility": "visible"});}, 500); 

nach 5 Sekunden automatisch geändert werden. Die Zeit, nach der sich die Animationen ändern, variiert hier während des Spiels und kann nach Belieben angepasst werden, damit man die Texte gut lesen kann.

    /*Biene startet das Gespräch mit dem User*/
    setTimeout(function() {
        $("#rede_1").css({"visibility": "visible"});
    }, 2000);
    setTimeout(function() {
        $("#text_1").css({"visibility": "visible"});
    }, 2500);
});	
$("#link_1").on("click", function () {
    setTimeout(function() {
        $("#text_1").hide();
        $("#text_2").css({"visibility": "visible"});
    }, 500);
    setTimeout(function() {
        $("#button_choose").css({"visibility": "visible"});
    }, 1500);
});
Einblenden und Verstecken der Sprechblase für Maja

Die zweite Keyframe Animation lässt Maja auf dem nächsten Bild nach oben wirbeln. Diese Animation wird mit Hilfe des Befehls

$("#honey_biene_2").css({"animation-play-state": "running"}); 

ausgelöst, sobald der User den Button “Blumen auswählen” anklickt. Hier werden die Texte in der Sprechblase wieder mit dem oben stehenden Befehl angezeigt und geändert (die konkreten Befehle ändern sich etwas je nach Text).

/*Übergang zur Szene #1.2
    Start des aktiven Spiels mit Anweisungen an den Spieler
    Elemente werden durch Änderungen des Styles angezeigt oder durch 
    jQuery Funktionen*/
$("#button_choose").on("click", function() {
    $("#button_choose").css({"visibility": "hidden"});
    $("#choose").hide();
    $("#rede_1").css({"visibility": "hidden"});
    $("#text_2").hide();
    $("#honey_biene").css({"visibility": "hidden"});
    $("#honey_biene_2").show();
    $("#honey_biene_2").css({"animation-play-state": "running"});
    setTimeout(function() {
        $("#rede_2").css({"visibility": "visible"});
    }, 1700);
    setTimeout(function() {
        $("#text_3").css({"visibility": "visible"});
    }, 2200);
    $(".sack").fadeIn(3000);
    setTimeout(function() {
        $(".blumen_choose").show();
    }, 3000);
Visuelle Effekte für Maja

Die dritte Keyframe Animation lässt Maja zum Ende des Spiels über die Blumenwiese fliegen. Mit Hilfe von translateX() bewegt sie sich hin und her und mit scaleX() dreht sie sich während der Animation um, um in die jeweils andere Richtung zu fliegen. Dabei wird das Bild gespiegelt. Ist der Magic Booster nicht ausgewählt, fliegt Maja standardmäßig durch die Eigenschaft animation-iteration-count: 1; einmal Hin und Her. Wenn der Magic Booster ausgewählt ist, dann fliegt sie zweimal Hin und Her. Dies wird mit Hilfe einer if-Anweisung angepasst.

/*Style Eigenschaften für die Biene im Outro.
Die keyframe-Animation für die fliegende Biene. In JS ist die Anpassung je nach
Antwort des Users*/

#biene_fly {
    position: absolute;
    z-index: 15;
    height: 15%;
    bottom: 60%;
    left: 22%;
    display: none;
    
    animation-name: bee_fly; 
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: running;
}

@keyframes bee_fly {
    0%  { transform: translateX(0px) scaleX(-1)}
    25%	{ transform: translateX(380%) scaleX(-1)}
    50%	{ transform: translateX(380%) scaleX(1)}
    100%  { transform: translateX(-10%) scaleX(-1)}
    
}
Style-Anpassungen für Maja im Outro
if ($(".plant_small").attr("src")==("media/Magic_Rose.png") || $(".plant_small").attr("src")==("media/Magic_Sunflower.png") || $(".plant_small").attr("src")==("media/Magic_Poppy.png")) {
    $("#biene_fly").css({"animation-iteration-count": "2"});
}
if-Anweisung bei der Auswahl des Magic Boosters

Säcke mit Blumensamen

Der Hover-Effekt bei den Blumensäcken wird mit der Anweisung $(“#rose_sack”).mousemove() erzeugt. So ändert sich der Text in der Sprechblase, wenn man mit der Maus über ein bestimmtes Element (in dem Fall ist es die Rose) fährt. Verlässt man mit der Maus diese Stelle wieder, wird der Text mit dem Befehl $(“#rose_sack”).mouseout() wieder automatisch geändert.

/*Information über Blumensorten erscheint, wenn die Maus auf dem Bild ist,
    und verschwindet, wenn die Maus weg ist*/
$("#rose_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_4").css({"visibility": "visible","display":"block"});	
});
$("#rose_sack").mouseout(function(evt) {
    $("#text_4").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
$("#sun_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_5").css({"visibility": "visible","display":"block"});	
});
$("#sun_sack").mouseout(function(evt) {
    $("#text_5").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
$("#mohn_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_6").css({"visibility": "visible","display":"block"});	
});
$("#mohn_sack").mouseout(function(evt) {
    $("#text_6").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
Auswahl der Blumensorte mit Hover-Effekt

Nach der Auswahl der Blumesorte verschwinden durch die Anweisungen $(“.sack”).fadeOut(1200); und $(“.blumen_choose”).hide();  die Bilder der Säcke, die nicht ausgewählt wurden und der ausgewählte Sack erscheint in der Mitte.

$(".sack").fadeOut(1200);
$(".blumen_choose").hide();

/*Je nach Auswahl wird der Sack mit der richtigen Blume angezeigt. Animation an sich
    ist gleich und startet beim Klick auf jeweiliges Bild*/		
switch (blume) {
    case "Rose":
    setTimeout(function () {
        $(".rose").show();
        $("#sack_blume_rose").on("click", function () {
            $(".sack_blume").css({"animation-play-state": "running"});
            $(".oat_raw").css({"animation-play-state": "running"});
            setTimeout(function () {
                $(".rose").hide();
                $("#text_7").css({"display":"none"});
                $("#text_8").css({"visibility": "visible","display":"block"});
            }, 7200);
        })
    }, 1500);
    break;
Visuelle Effekte für die Blumensäcke

Beim Klick auf den Sack wird die Keyframe Animation aktiviert, wodurch er sich bewegt, um die Blumensamen auf der Wiese zu verteilen. Die Anweisung besteht aus 7 Schritten, in denen translateX(), translateY() und rotate() verwendet werden,sodass er sich zum Verteilen über die Wiese bewegt und dabei auch die Ausrichtung nach links und rechts ändert. Bei der Anweisung für die Blumensamen, die aus dem Sack in die Erde fallen, benutzt man zusätzlich scale(). Nachdem die Animation fertig abgespielt ist und damit die Samen verteilt sind, verschwindet der Sack automatisch.

/*Positionierung und Animation für alle Säcke in der Szene sind gleich*/

.sack_blume {
    position:absolute;
    top: 50%;
    left: 40%;
    height: 30%;
    z-index: 11;
    cursor:pointer;
    
    animation-name: sack_hoch; 
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: paused;
}

/*Animation mit mehreren Bewegungen*/
@keyframes sack_hoch {
    from  { transform: translateX(0px) translateY(0px)}
    18%	{ transform: translateX(-100px) translateY(-250px) rotate(-90deg)}
    36%	{ transform: translateX(-325px) translateY(-130px) rotate(-120deg)}
    52%	{ transform: translateX(100px) translateY(-250px) rotate(-120deg)}
    70%	{ transform: translateX(100px) translateY(-130px) rotate(-120deg)}
    88% { transform: translateX(350px) translateY(-250px) rotate(120deg)}
    to  { transform: translateX(400px) translateY(-130px) rotate(120deg)}
}
Anpassungen für die Animation der Blumensäcke
/*Positionierung und Animation für Blumensamen in der Szene sind gleich
Die Animation wiederholt die Bewegung des Sackes, mit der Ausnahme beim vorletzten
Schritt:
    Blumensamen verschwinden und erscheinen am Ende, wänhrend Sack sich umdreht*/
.oat_raw {
    position:absolute;
    top: 51%;
    left: 46%;
    height: 10%;
    z-index: 12;
    
    animation-name: oat_hoch; 
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: paused;
}

/*Animation mit mehreren Bewegungen*/

@keyframes oat_hoch {
    from  { transform: translateX(0px) translateY(0px)}
    18%	{ transform: translateX(-150px) translateY(-180px) rotate(-90deg)}
    36%	{ transform: translateX(-375px) translateY(-40px) rotate(-120deg) scale(0.85)}
    52%	{ transform: translateX(50px) translateY(-140px) rotate(-120deg) scale(0.75)}
    70%	{ transform: translateX(50px) translateY(-50px) rotate(-120deg) scale(0.7)}
    88% { transform: translateX(390px) translateY(-180px) rotate(120deg)scale(0.0)}
    to  { transform: translateX(465px) translateY(-40px) rotate(120deg) scale(0.65)}
}

Positionierung und Animation der Blumensäcke

Wachsende Blumen

Die Blumen wachsen in dem Spiel mit Hilfe einer Animation mittels JavaScript. Dazu gibt es für die verschiedenen Stadien des Wachstums verschiedene Bilder, die automatisch mit Hilfe von Anweisungen, wie bspw. $(“.plant_small”).attr(“src”, “media/grass.png”); ausgetauscht werden und anschließend durch die Anweisung $(“.plant_small”).css({“animation-play-state”:”running”}); animiert werden. Dadurch verändert sich das Wachstum der Blumen durch Animationen im Laufe des Spiels automatisch. Die Auswahl der Blumensorte zu Beginn des Spiels wird mit Hilfe einer Switch-Anweisung für den restlichen Spielverlauf übernommen

        /*Funktion für Blumen. Bilder sind von der Auswähl abhängig*/
        switch (blume) {
            case "Rose":
                $(".plant_small").attr("src", "media/Rose_Bush.png");
                break;
            case "Sonnenblume":
                $(".plant_small").attr("src", "media/Sunflower_Bush.png");
                break;
            case "Mohnblume":
                $(".plant_small").attr("src", "media/Poppy_Bush.png");
                break;
        }
        $("#sonne").css({"animation-play-state": "running"});
        $("#text_12").css({"display":"none"});
        $("#text_13").css({"visibility": "visible","display":"block"});
}, 2500);
});
Switch-Anweisung für die Übernahme des Blumenwahl für den weiteren Spielverlauf

Gießkanne

Für die Animation der Gießkanne werden sowohl Keyframe als auch jQuery Animationen verwendet. Bei den keyframes handelt es sich um rein visuelle Effekte, bei der sich die Gestaltung der Gießkanne ändert. Mit Hilfe von bspw. transform:scale() ändert sich ihre Größe, durch opacity ändert sich die Transparenz und durch animation-iteration-count:2 wiederholt sich diese Animation zweimal. Die Bewegung wird anhand von .animate() realisiert, sodass sich die Kanne über die Pflanzen bewegt. Dabei ändert sich mit Hilfe der Anweisung .mousemove ihre Ausrichtung, sobald der User mit der Maus über sie fährt und mit .mouseleave verschwindet die Gießkanne. Gleichzeitig wird auf diese Weise auch die Animation für die Wassertropfen ausgelöst.

/*jQuery-Animation für die Gießkanne und Style Änderungen für Interaktivität*/
$("#giesskanne").click(function() {
    $("#giesskanne").animate({
        bottom: "50%",
        left: "50%",
        }, 4000, "linear", function() {
            /*Animation wird aktiviert nur beim Bewegen auf dem Bild*/
            $("#giesskanne").mousemove(function(evt) {
            $(".wasser_tropfen").css({"display":"block"});
            $("#giesskanne").css({"transform":"rotate(-30deg)"});
            $(".wasser_tropfen").animate({
                bottom: "-55%"
                }, 2500 )
            });
            /*Ausschaltung der Animation*/
            $("#giesskanne").mouseleave(function(evt) {
                $(".wasser_tropfen").css({"display":"none"});
                setTimeout(function () {
                    $("#giesskanne").hide('slow');
                }, 3000);
            });
        });
Animation der Gießkanne

Sonne

Die Sonne bewegt sich im Spiel mit Hilfe von keyframes automatisch über die Blumenwiese bewegt und scheint stärker, sobald der User sie anklickt.

/*Durchgehende Animation für besseres Spiel. Einige Style Egenschaften werden später 
via JS ergänzt*/ 
#sonne {
    position: absolute;
    z-index: 2;
    bottom: 60%;
    left: 70%;
    height: 25%;
    cursor:pointer;
    
    animation-name: sonne_bewegung; 
    animation-duration: 45s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: running;
}

@keyframes sonne_bewegung {
    from  { transform: translateX(0px) translateY(0px)}
    to  { transform: translateX(-500px) translateY(-20px)}
}
CSS Anpassungen für die Sonne

Nachdem die Gießkanne eingesetzt wird, stoppt die Bewegungs-Animation der Sonne, damit der User sie leichter anklicken kann. Bei dem Klick auf die Sonne wird sie größer und scheint stärker, um sie hervorzuheben. Das geschieht mit Hilfe der Anweisung 

$("#sonne").click(function() {$("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
/*Animation für die Sonne wird aktiviert beim Klick. Für den richtigen
    Spielablauf ist das Anklicken der Sonne nur nach der Animation mit der 
    Gießkanne möglich*/
$("#sonne").click(function() {
    $("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
    $(".plant_small").css({"animation-play-state":"running"});
Animation für die Sonne

Magic Booster

Der Magic Booster erscheint mit Hilfe der jQuery Anweisung $(“#booster”).show();. Die Animation wird automatisch ausgelöst, sobald er vom User ausgewählt wurde und läuft mit Hilfe der Anweisung animation-iteration-count: infinite; unendlich in einer Schleife. Durch die Anweisung $(“#booster”).fadeOut(4000); verschwindet der Booster automatisch innerhalb von 4 Sekunden. Auch hier kann man die Zeiteinstellungen nach Belieben und Funktionalität anpassen.

/*Magic Bosster wird angezeigt nur bei "Ja"-Antwort
Animation ist unendlich und startet mit der Erscheinung des Bildes*/

#booster {
    position: absolute;
    z-index: 15;
    height: 150;
    bottom: 70%;
    left: 40%;
    
    animation-name: magic_booster; 
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode:backwards;
    animation-play-state: running;
}

/*Animation zeigt den Effekt indem der Booster über die Blumenwiese gegossen wird.*/

@keyframes magic_booster {
    0%  { transform: scale(0.5) rotate(0deg)}
    50%	{ transform: scale(1) rotate(180deg)}
    100%  { transform: scale(0.5) rotate(-180deg)}
    
}
Keyframe Animation für den Magic Booster
/*Bei der Anwendung des Magic Boosters erscheint der animierte 
Booster und fängt an, langsamautomatisch zu verschwinden */
$("#btn_ja").click( function() {
    $(":button").hide();
    $("#booster").show();
    $("#booster").fadeOut(4000);
    setTimeout (function () {
jQuery für den Magic Booster, falls der User “Ja” auswählt

Interaktive Buttons

Sobald die Maus über die Buttons fährt, erscheint ein Hover-Effekt, in dem sich die Farben ändern. Der Hover-Effekt wird durch diese Eigenschaft umgesetzt:

button:hover {

transition: 3s in-back;

background-image: radial-gradient(#ffd700, #ff5433);

}

Außerdem wird der Cursor durch die Eigenschaft cursor:pointer; in Form einer Hand angezeigt, sobald der User mit der Maus über interaktive Elemente fährt. Dadurch weiß er, welche Elemente anklickbar und für den Spielverlauf wichtig sind.

Besonderheiten

Eine Besonderheit der Animation ist die Hintergrundmusik, die während des Spiels läuft. Sie startet automatisch, wenn der User das Spiel beginnt. Beginnt der User ein neues Spiel, indem er auf “Restart” klickt, startet auch die Musik wieder neu. Dies wird mit Hilfe des jQuery-Befehls $(“#background_musik”)[0].play(); umgesetzt. Bei der Hintergrundmusik haben wir darauf geachtet, eine lizenzfreie Musik zu nehmen, die zum Thema die Spiels passt. Dafür haben wir den Titel “The Small Farm” gewählt. Mit dem Befehl $(“#background_musik”)[0].pause(); endet die Musikwiedergabe zum Ende des Spiels automatisch.

Eine weitere Besonderheit ist das Responsive Design. Dieses wird eingesetzt, damit die Animation auf allen Desktopgrößen richtig angezeigt wird und gespielt werden kann. Das Responsive Design wurde mit Hilfe von CSS angepasst und bezieht sich auf alle Elemente im Quellcode. Dies wurde mit der Eigenschaft position: absolute; sowie der Anpassung der Abstände durch bottom: left: right: top: height: in Prozent-Angaben umgesetzt. Die Eigenschaft font-size: 1.05vw; führt dazu, dass auch die Texte optimiert dargestellt werden.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Forty in 49: Ein Spiel für Gedächtnis und räumliches Vorstellungsvermögen

Beitragsbild forty in 49 - ein Spiel für das Gedächtnis und das räumliche Vorstellungsvermögen

Autor: Jannis Fortmann

Link zum Spiel
Zip Datei zum Download

Inhalt

Konzept

Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen.

Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.

Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.

Animationen

Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.

Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.

Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.

Technische Umsetzung

Die Seite wurde mithilfe von HTML, CSS und JavaScript erstellt.

HTML

In der HTML-Datei wird der Aufbau der Seite bestimmt. Alle nicht-dynamischen Inhalte werden definiert und mithilfe von DIV-Containern positioniert.

In dem DIV „wrap“ befinden sich alle anderen Objekte, es definiert den Abstand zu den Seitenrändern. Unter der Überschrift und einer kurzen Spielbeschreibung befindet sich der Start-Button und darunter der aktuelle Punktestand.

Das Spielfeld besteht aus 49 einzelnen DIVs für die kleinen, quadratischen Felder. Diese sind umschlossen von dem DIV „grid“, welches sich innerhalb des DIV „background“ befindet.

Darunter befinden sich die DIVs „gameOver“ und „finalScore“ sowie der Restart-Button. Diese Elemente bestimmen die Karte, die zum Ende des Spiels erscheint, bis dahin sind sie unsichtbar.

Jedem der 49 Spielfeld-DIVs werden drei Klassen zugeordnet. Alle bekommen die Klasse „cell“, über die alle Felder auf einmal angesprochen werden können. Außerdem bekommt jedes Feld eine individuelle Klasse (c1 bis c49) und entweder die Klasse „bomb“ oder „noBomb“. Damit können die beiden Arten von Feldern getrennt voneinander bearbeitet werden.

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>forty in 49</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="wrap">
      <h1>
        forty in 49
      </h1>
      <p>
        a simple game<br>
        49 tiles - 40 are good 9 are bad<br>
        press start to see the bad ones<br>
        click on all the good ones
      </p>
      <button id="start">
        start
      </button>
      <div id="score">
        score: 0
      </div>
      <div class="background">
      </div>
      <div class="gameOver">
        your final sccore is: 
        <div id="finalScore">
          0
        </div>
        <button id="restart">
          restart
        </button>
      </div>
    </div>
    <script  src="./script.js">
    </script>
  </body>
</html>
<div class="background">
   <div class="grid">
     <div class="cell c1 noBomb"></div>
     <div class="cell c2 bomb"></div>
     <div class="cell c3 noBomb"></div>
     <div class="cell c4 noBomb"></div>
     <div class="cell c5 noBomb"></div>
     <div class="cell c6 noBomb"></div>
     <div class="cell c7 noBomb"></div>
     <div class="cell c8 noBomb"></div>
     <div class="cell c9 noBomb"></div>
     <div class="cell c10 noBomb"></div>
     <div class="cell c11 bomb"></div>
     <div class="cell c12 noBomb"></div>
     <div class="cell c13 bomb"></div>
     <div class="cell c14 noBomb"></div>
     <div class="cell c15 noBomb"></div>
     <div class="cell c16 noBomb"></div>
     <div class="cell c17 noBomb"></div>
     <div class="cell c18 noBomb"></div>
     <div class="cell c19 noBomb"></div>
     <div class="cell c20 noBomb"></div>
     <div class="cell c21 noBomb"></div>
     <div class="cell c22 noBomb"></div>
     <div class="cell c23 noBomb"></div>
     <div class="cell c24 bomb"></div>
     <div class="cell c25 noBomb"></div>
     <div class="cell c26 bomb"></div>
     <div class="cell c27 noBomb"></div>
     <div class="cell c28 noBomb"></div>
     <div class="cell c29 bomb"></div>
     <div class="cell c30 noBomb"></div>
     <div class="cell c31 noBomb"></div>
     <div class="cell c32 noBomb"></div>
     <div class="cell c33 noBomb"></div>
     <div class="cell c34 bomb"></div>
     <div class="cell c35 noBomb"></div>
     <div class="cell c36 noBomb"></div>
     <div class="cell c37 bomb"></div>
     <div class="cell c38 noBomb"></div>
     <div class="cell c39 noBomb"></div>
     <div class="cell c40 noBomb"></div>
     <div class="cell c41 noBomb"></div>
     <div class="cell c42 noBomb"></div>
     <div class="cell c43 noBomb"></div>
     <div class="cell c44 noBomb"></div>
     <div class="cell c45 noBomb"></div>
     <div class="cell c46 bomb"></div>
     <div class="cell c47 noBomb"></div>
     <div class="cell c48 noBomb"></div>
     <div class="cell c49 noBomb"></div>
   </div>
 </div>

CSS

In CSS wird das optische Erscheinungsbild der Seite bestimmt.

Die Hintergrundfarbe und Stil der Schrift werden definiert.

body {
  background-color: #4d4d4d;
  color: #b488b8;
  font-family: Calibri;
  text-align: center;
  text-transform: uppercase;
}

h1 {
  font-size: 60px;
}

Die Buttons werden abgerundet und bekommen jeweils eine Hintergrundfarbe.

#start {
  color: #b488b8;
  background-color: #fff;
  font-family: Arial;
  font-size: 24px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
}

#restart {
  display: none;
  color: #b488b8;
  background-color: #4d4d4d;
  font-family: Arial;
  font-size: 24px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
}

Der Bereich unter dem Spielfeld wird abgerundet und bekommt eine andere Farbe.

.background {
  position: relative;
  box-sizing: border-box;
  float: left;
  background-color: #ababab;
  width: 100%;
  border-radius: 10px;
  padding-bottom: 5%;
  margin-top: 30px;
}

Die Spielfelder werden zu abgerundeten Quadraten und bekommen einen Rand und eine Farbe.

.cell {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float: left;
  width: 14.28%;
  padding-bottom: 13.8%;
  border: 1px solid white;
  background-color: #1e1e1e;
  border-radius: 5px;
}

Die Karte, die nach Beendung des Spiels erscheint, wird im gleichen Stil designt.

.gameOver {
  opacity: 0;
  box-sizing: border-box;
  float: left;
  background-color: #fff;
  width: 94%;
  padding: 5%;
  margin: 3%;
  border-radius: 10px;
  transition: transform 1s cubic-bezier(0.38, 0.4, 0, 1.18);
  transition-delay: 3s;
}

Auch die Animationen werden in CSS erzeugt.

Beim Klick auf den Start-Button werden alle Felder, die keine Bomben sind, für wenige Sekunden langsam durchsichtig und dann wieder sichtbar.

/* fade-out fade-in der nicht-Bomben beim Klick des Start-Buttons (keyframe fade) */
.noBomb.start {
  animation: fade 7s;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Beim hovern über einen der Buttons wird dieser um 10% größer.

#start:hover,
#restart:hover {
  transition: transform;
  transform: scale(1.1);
}

Die Farbe der der einzelnen Felder ändert sich beim hovern und sie wachsen langsam um 30%.

.cell:hover {
  transition: background-color, transform 0.5s;
  background-color: #b488b8;
  transform: scale(1.3);
}

Wird ein Feld angeklickt, das keine Bombe ist, wird es grün und in einer rotierenden Bewegung kleiner, bis es verschwunden ist.

/* Animation der nicht-Bomben nach Klick */
.noBomb.clicked {
  transition: background-color, transform 4s;
  background-color: #81c7a2 !important;
  transform: scale(0) rotate(720deg);
  pointer-events: none;   /* verhindert, dass ein Feld mehrfach geklickt werden kann */
}

Beim Klick auf eine Bombe wird diese rot und dreht sich um die y- und die z-Achse.

/* Animation der Bomben nach Klick */
.bomb.clicked {
  transition: background-color, transform 4s;
  background-color: #ff695e !important;
  transform: rotateY(180deg) rotateZ(45deg);
  pointer-events: none;
}

Nach Beendung des Spiels erscheint die Karte mit dem Punktestand, verliert langsam ihre Durchsichtbarkeit und wandert von unten nach oben, bis sie über der Mitte des Spielfelds landet.

JavaScript

JavaScript ist zuständig für die Funktionalität der Seite. Hier wird unter anderem definiert, was genau passiert, wenn ein bestimmtes Objekt angeklickt wird. Dabei wird dem Objekt eine neue Klasse zugeordnet, was die in CSS bestimmte Animation auslöst.

Beim Klick auf den Start-Button werden alle Objekte der Klasse „noBomb“ ausgewählt. Mithilfe einer For-Schleife wird ihnen die Klasse „start“ zugeordnet, was die in CSS definierte Animation auslöst.

// fade-out / fad-in bei Klick auf den Start-Button
let start = document.querySelector("#start");
let noBomb = document.querySelectorAll(".noBomb");
start.addEventListener("click", () => {
  for (var i = 0; i < noBomb.length; i++) {
    noBomb[i].classList.add("start");
  }
});

Ein Klick auf den Restart-Button sorgt dafür, dass die Seite neu geladen wird.

// neu laden der Seite bei Klick  auf Restart-Button
let restart = document.querySelector("#restart");
restart.addEventListener("click", () => {
  window.location.href = window.location.href;
});

Beim Klick auf eins der normalen Felder wird dem Objekt die Klasse „clicked“ zugeordnet und dadurch die CSS-Animation ausgelöst. Zusätzlich wird ein Soundeffekt abgespielt. Außerdem wird der Punktestand um 1 erhöht und überprüft, ob dadurch die maximale Punktzahl erreicht wurde. Falls dass der Fall ist, wird die Spielabschlusskarte gezeigt und animiert.

// Animation der nicht-Bomben und counter der Punktzahl
let c1 = document.querySelector(".c1");
c1.addEventListener("click", () => {
  c1.classList.add("clicked");
  count += 1;
  score.innerHTML = "score: " + count;
  finalScore.innerHTML = count;
  if (count == 40) {
    restart.classList.add("true");
    for (var i = 0; i < cell.length; i++) {
      cell[i].classList.add("over");
    }
    gameOver.classList.add("true");
  }
  audioNoBomb.play();
});

Der Klick auf eine der Bomben funktioniert ähnlich, auch hier wird die Animation ausgelöst. Außerdem wird allen Feldern die Klasse „over“ zugeordnet, was dafür sorgt, dass keine weiteren Felder angeklickt werden können.

// Animation der Bomben und der Karte nach Beendung des Spiels
let c2 = document.querySelector(".c2");
let cell = document.querySelectorAll(".cell");
c2.addEventListener("click", () => {
  finalScore.innerHTML = count;
  c2.classList.add("clicked");
  restart.classList.add("true");
  for (var i = 0; i < cell.length; i++) {
    cell[i].classList.add("over");
  }
  gameOver.classList.add("true");
  audioBomb.play();
});

Auch die Audiodateien werden über JavaScript eingebettet.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Design Thinking: Volle Kreativität voraus

Beitragsbild Design Thinking

Oder: It’s not about the design, it’s about the thinking!

Autorin: Katharina Kroupa 


„Man kann über Design Thinking noch so viel Positives erzählen, die Arbeitsweise und ihre Wirkung erklären: Um sie wirklich zu verstehen, muss man sie selber hautnah miterlebt haben.“

 Marcel Plaum, VP Terminal Development Fraport

Na, macht dich das neugierig zu erfahren, was Design Thinking ist? Du hast den Begriff nun schon öfter gehört, aber noch keine Idee, was dahinter alles steckt?

Dann bist du hier genau richtig! Ich bringe dir in diesem Beitrag die Innovationsmethode Design Thinking näher. Was dich alles erwartet im Überblick:

 

Grundsätze des Design Thinkings

Stell dir vor, du arbeitest – sagen wir mal – in einer großen Bibliothek. Ihr stellt Nutzer:innen Medien zur Verfügung, bietet diverse Dienstleistungen an und außerdem kann man bei euch auch vor Ort arbeiten. Eure Bibliothek wird als Lernort grundsätzlich gern genutzt, aber ihr merkt, dass es Verbesserungspotenzial gibt. Euer Gebäude ist schon älter, ebenso die Einrichtung und ihr möchtet den Lernraum für eure Nutzer:innen attraktiver gestalten. Und so bildet sich ein Team aus Mitarbeiter:innen, die sich beratschlagen, was einen modernen Lernraum ausmacht. Eine Kollegin schlägt vor, weitere Computer zur Nutzung anzuschaffen, ein anderer ist der Meinung, dass voll ausgestattete Gruppenarbeitsräume her müssen. Und so suchen Bibliotheksmitarbeiter:innen untereinander nach geeigneten Lösungen.

Doch wofür eigentlich? – Na für ein neues Raumkonzept! – Okay…

Aber für wen eigentlich? – Na für die ganzen Benutzer:innen der Bibliothek!

– Ahaaa..! Aber wäre es da nicht sinnvoll, diese Personen erstmal nach ihrer Meinung zu fragen und sie miteinzubeziehen, wenn man doch für genau diese eine Lösung sucht?

Und damit sind wir beim ersten Grundsatz der Design Thinking Methode, der in jeder Phase des Innovationsprozesses zentral ist: Der Mensch als Inspirationsquelle.

Der Gedanke des Design Thinking ist, dass ein Produkt oder eine Dienstleistung dann richtig gut werden kann, wenn die Bedürfnisse der Zielgruppe richtig ermittelt und bedient werden. Dazu wird diese Zielgruppe aktiv in den Innovationsprozess miteingezogen.[1] Wie das geschieht, erfährst du in weiter unten im Beitrag.

Ein weiterer Grundsatz der Methode ist das Bilden und Zusammenarbeiten innerhalb multidisziplärer Teams. Die Idee hierhinter ist, dass Menschen verschiedener Disziplinen bzw. Fachrichtungen, ihre unterschiedlichen Erfahrungen in den Ideenprozess einbringen und so gemeinsam eine (bessere) Lösung für das Problem finden können. Diversität in Geschlecht, Alter, Fachrichtung ist hier zielführend. Meist bestehen diese Teams aus 4-6 Teilnehmer:innen, den sogenannten Design Thinkers. Noch unerfahrene Teams werden dazu von ein bis zwei Moderator:innen beim Prozess unterstützt.[2]

Die einzelnen Mitglieder multidisziplinärer Teams entwickeln gemeinsam Ideen.
Quelle: giphy

Da bei diesem Zusammenspiel unterschiedlicher Personen schnell das Ziel – nämlich das Finden einer zielgruppenorientierten Lösung – aus den Augen verloren werden kann, ist es wichtig, dabei einem strukturierten Prozess zu folgen.[3] Das bringt uns zum nächsten Inhaltspunkt dieses Beitrags.

Wie läuft der Prozess der Methode ab?

Der Prozess des Design Thinking besteht aus aufeinander folgenden Phasen. Die Phasen bauen aufeinander auf. Erst, wenn eine Phase abgeschlossen ist, kann mit den dabei entstandenen Ergebnissen in der nächsten Phase weitergearbeitet werden.

In allen Phasen ist die Zielgruppe im Fokus. Innerhalb der ersten drei Phasen (Verstehen, Beobachten, Point of View) empathisiert das Team mit der Zielgruppe. Es versucht das zentrale Problem zu verstehen und zu definieren. In den darauffolgenden Phasen (Ideation, Prototyping, Testen) werden Ideen zur Problemlösung gesammelt und konkretisiert. Prototypen werden erstellt und aus Nutzersicht oder von tatsächlichen Nutzer:innen getestet.

Klicke auf die Info-Buttons der verschiedenen Phasen, um Einzelheiten zu erfahren:

Im besten Fall wird dieser Prozess einmal vom Anfang bis zur Entscheidung durchlaufen. Fallen den Testnutzer:innen in der Testphase allerdings Schwachstellen auf oder sie sind in sonst einer Weise nicht zufrieden mit der Lösung, müssen vorherige Phasen wiederholt werden. Beispielsweise werden in der Ideation-Phase dann noch einmal diverse Ideen gesammelt. Daraus werden dann wieder vereinzelte Lösungsansätze ausgewählt, sodass aus diesen nachfolgend ein Protoyp entwickelt wird. Oder die testende Zielgruppe fühlt sich insgesamt noch nicht ausreichend verstanden. Dann beginnt der Prozess erneut beim Verstehen.[4]

Das wird so lange wiederholt bis sich das Team Schritt für Schritt der idealen Lösung angenähert hat. Diesen Vorgang nennt man Iteration. Demnach wird der Prozess des Design Thinking auch als iterativer Prozess bezeichnet.[5]

Welche Voraussetzungen und Tools unterstützen den Innovationsprozess?

Aus dem vorherigen Abschnitt kennst du nun die einzelnen Phasen des Design Thinking Prozesses. Aber wie oder wodurch kann dieser Prozess unterstützt werden? Und wie fördert man die Kreativität am besten?

Die folgenden Abschnitte geben Einblick über die Voraussetzungen für einen gelungenen Innovationsprozess sowie Beispiele für nutzbare Tools zur Kreativitätsförderung[6]:

Wieso sich Design Thinking in jedem Lebensbereich lohnt

Die Methode findet Anwendung in verschiedenen Bereichen und zu verschiedenen Themen. Beispielhaft werden nachfolgend ihr Nutzen und ihre Anwendbarkeit in einer Tabelle dargstellt:

Nutzen Anwendbarkeit
nachhaltige Teamentwicklung Aufbau von Kundenverständnis
effizientere Innovationsprozesse durch schnelles Feedback Gestaltung neuer Produkte und Dienstleistungen
Kundenloyalität steigern durch Integration Optimierung von Organisationsprozessen
geringe Kosten Erstellen von Marketingkampagnen
Tabelle: Nutzen und Anwendbarkeit von Design Thinking

Als Innovationsmethode definiert sich Design Thinking unter anderem über seine Anwender:innen. Da diese und ihre Probleme sehr unterschiedlich sein können, eignet sie sich für das Finden von Lösung in jedem Lebens(Problem-)bereich.

Wie Bosch Design Thinking für User Experience nutzt

Auch bekannte Firmen nutzen mittlerweile die Design Thinking Technik zur Lösung verschiedenster Probleme oder zur Entwicklung neuer Produkte.

Eine davon ist Bosch. Das Unternehmen nutzt die Technik für eine enge Zusammenarbeit mit ihrer Zielgruppe. Im nachfolgenden Video geben Bosch-Mitarbeiter Einblick darin, wie die Methode in der Firma umgesetzt wird.

Youtube-Video: Design-Thinking bei Bosch – Zwischen Post-Its, Lego und Fritz-Kola[7]

FazitIts’s not about the design

it’s about the thinking!

Die Angst vor Fehlern bringt Menschen dazu, die Risiken im Fokus zu haben – nicht die Möglichkeiten!

Aber aus Fehlern lernt man. Design Thinking gibt den Raum für diese offene Denkweise in einem geführten Prozess. Jeder Prozess-Teil führt zu klaren Ergebnissen, mit denen der nächste Prozess-Schritt beginnt.

Obwohl jede Design Thinking Aktivität darauf ausgerichtet ist, die Erfahrungen der Mitmenschen zu verstehen, verändert sie auch die Erfahrungen und Denkweisen der Innovatoren.


Quellen:

DGO (2017): Der Design Thinking Prozess. In 6 Schritten zum Produkt. Online unter: https://blog.dgq.de/der-design-thinking-prozess-in-6-schritten-zum-produkt/ [Abruf am 31.01.2021]

FAZ (2018): Design-Thinking bei Bosch: Zwischen Post-Its, Lego und Fritz-Kola. Youtube. Online unter: https://www.youtube.com/watch?v=F184mC8K2HI&feature=youtu.be

Kreutzer, Ralf T. (2018): Toolbox für Marketing und Management. Kreativkonzepte, Analysewerkzeuge, Prognoseinstrumente. Berlin: Springer. DOI: doi.org/10.1007/978-3-658-21881-2

Plattner, H.; Meinel, C. u. Weinberg, U. (2009): Design Thinking. Innovation lernen, Ideenwelten öffnen. München: mi.

Schallmo, Daniel (2017): Design Thinking erfolgreich anwenden. So entwickeln Sie in 7 Phasen kundenorientierte Produkte und Dienstleistungen. Wiesbaden: Springer Gabler. DOI: doi.org/10.1007/978-3-658-12523-3


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden. Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

DOI: Ein digitaler Objektidentifizierer

Beitragsbild DOI

Autorin: Sabine Volkmer


In diesem Beitrag geht es hauptsächlich um die Frage:
Was ist ein digitaler Objektidentifizierer und wozu ist er gut?

Inhalt:

Offenbar muss heutzutage fast alles mit Hilfe einer Identifikationsnummer zugeordnet werden. Selbst der Mensch. Jeder kennt z. B. mehr oder weniger auswendig seine eigene, ihm individuell zugewiesene Steuer-, Matrikel- oder Personalausweisnummer. Im Bibliothekswesen und im speziellen bei den Büchern nennt sich diese ISBN (International Standard Book Number) und bei den Zeitschriften ISSN (International Standard Serial Number). Jeder, der sich auch nur sporadisch in Bibliotheken aufhält, hat diese gesehen. Jedoch weiß keiner so genau wie der DOI aufgebaut ist. Der DOI – ausgeschrieben als digitaler Objektidentifizierer verhält sich ähnlich wie eine ISBN/ISSN, weil er statt einem Buch oder einer Zeitschrift ein digitales Objekt eindeutig identifiziert.

Dieser Blogbeitrag handelt von der Geburtsstätte der DOI in den Registrierungsagenturen bis zum Zielobjekt – dem digitalen Objekt. Die drei Buchstaben „D-O-I“ stehen für „Digital Object Identifier“ (Digitaler Objektidentifizierer). Diese Identifikationsnummer gehört jeweils zu einem digitalen Objekt. Dies können u.a. Texte oder digitale Forschungsdaten sein. Aber wozu ist eine Zuordnung überhaupt nötig und warum werden DOIs für das wissenschaftliche Arbeiten so dringend gebraucht?

Studierende wissen, dass alle von ihm zitierten Stellen sich auch im Literaturverzeichnis wieder gefunden werden müssen. Da im wissenschaftlichen Bereich dauerhafte Zitatensicherheit gefordert ist und DOIs sich nicht wie URLs verändern, werden diese anstelle von URLs für Literaturverzeichnisse gemeinhin empfohlen. So können Belege auch nach Jahren überprüft werden, weil auf digitale Objekte nachhaltig und eindeutig zugegriffen werden kann. Jedoch ist dies nicht immer der Fall. So gesehen wird eine DOI für die Identifizierung von physischen, digitalen oder anderen Objekten benutzt und führt den Nutzer direkt zum endgültigen Speicherort des bezeichneten Objektes.

DOI-Vergabe

Es haben jedoch noch nicht alle akademischen Texte eine DOI Nummer auch erhalten und erst seit dem Jahre 2000 werden DOIs für Onlineartikel aus wissenschaftlichen Fachzeitschriften vergeben.[1]EBooks haben ebenfalls in den meisten Fällen eine DOI. Auch verwenden viele wissenschaftliche Verlage DOIs zur persistenten Adressierung ihrer Artikel.[2] Persistenz bedeutet in diesem Fall, dass das digitale Objekt überall wiedergefunden werden kann. Doch wie werden diese nun vergeben? Wird da gewürfelt oder einfach wilde Zahlenreihen ausgelost?

Die Vergabe von DOIs werden von einer amerikanischen Non-Profit-Gesellschaft betrieben. Inzwischen beträgt die Zahl der vergebenen DOIs mehrere Millionen. Die oberste Organisation der DOI ist die „International DOI Foundation“ (IDF). Diese vergibt Lizenzen an über 10 weltweite DOI-Registrierungsagenturen, von denen DOIs erworben werden können. Die wichtigsten Hauptagenturen sind: „Crossref“, „mEDRA“, „Datacite“ (scientific data sets). Von „DataCite“ wird der DOI-Registrierungsservice für Forschungsdaten zur Verfügung gestellt.[3] Die Verteilung der DOIs erfolgt ausschließlich durch die DOI-Registrierungsagenturen, die eine Lizenz von der IDF erworben haben. Somit kann sichergestellt werden, dass Standards von der IDF, eingehalten werden.

Innovation in Bibliotheken: Deichman Bibliothek Oslo

Beitragsbild Innovation in Bibliotheken

Autorin: Merle Stegemeyer


“Wir leben in einer postdigitalen Situation. Die Leute wollen sich wieder real begegnen, öffentliche Räume werden wieder wichtiger.”[4]

– Reinert Mithassel, Leiter der Biblio Tøyen

Reinert Mithassel, Leiter der Biblio Tøyen in Oslo, spricht damit wohl nicht nur die andauernde Corona Pandemie an, sondern äußert den Wunsch vieler Menschen ihrer Umgebung und ihren Mitmenschen wieder näher zu kommen. Auch wenn die Corona Pandemie uns sicherlich in Hinblick auf Digitalisierung in (Hoch-) Schulen und am Arbeitsplatz große Schritte nach vorn gebracht hat, vermissen und beklagen wir doch, wie sehr uns die sozialen Kontakte fehlen.

Wie aber kann öffentlicher Raum so gestaltet werden, dass Menschen hier Zeit verbringen wollen? Es sind dabei insbesondere die Biblio Tøyen und die 2020 neu eröffnete Bjørvika Bibliothek zu nennen. Sie zeigen uns zwei zukunftsweisende Wege wie das Bibliothekswesen aussehen kann.

Deichman Biblio Tøyen

Die eigentlich in einem Problemviertel liegende Jugendbibliothek Biblio Tøyen steht dem Neubau im entstehenden neuen Kulturhafen Oslos in nichts nach. In Zusammenarbeit mit jungen Osloern und dem niederländischen Architekten/Creative Guide Aat Vos wurde die Bibliothek neu eingerichtet und umgestaltet.[11] Die Idee hinter der Umgestaltung bestand darin, ein Kulturhaus zu schaffen, das Jugendlichen ihren Bezug zur Realität nicht verlieren lässt. Denn durch die immer schneller werdenden Modernisierungen und die rasante Entwicklung der Gesellschaft kann ein solcher öffentlicher Rückzugsort für Jugendliche einen Ankerplatz bieten.[11]

So entstanden in alten, ausrangierten Kleinlastern und Seilbahnkabinen kleine Oasen der Ruhe und Orte zum Lesen. Ebenso Nester aus Kissen oder umfunktionierte Schubkarren dienen als Plätze zum Entspannen oder zum Lesen. Des Weiteren verleihen die vielen schwebende Elemente diesem Ort eine unglaubliche Leichtigkeit.[8][11]

Eltern und Erwachsenen ist der Zugang ausdrücklich nicht erlaubt, sodass die 10- bis 15-Jährigen hier ihre ganz eigenen Erfahrungen mit ihrer Freiheit, Umgebung und eben den Büchern machen können. Diese dadurch entstehende Wohnzimmeratmosphäre dient der Inspiration und lässt seine jugendlichen Besucher viel Freiraum. Dies wird zudem dadurch unterstützt, dass die Räumlichkeiten der Biblio Tøyen auch ohne Bibliothekspersonal zugänglich sind. [8]

Begib Dich auf einen kleinen Rundgang durch die Biblio Tøyen.[6]

Mehr Interaktivität im Kurs Content Management über h5p

h5p für CM

In den letzten Corona-Semestern konnten viele Kurse nur online angeboten werden. Dadurch sind auch im Kurs Content Management in den Studiengängen Informationsmanagement und Informationsmanagement berufsbegleitend einige Screencasts entstanden.

In einem nächsten Schritt haben wir die Screencast-Videos mit Interaktionselementen wie Wiederholungsfragen, Links, Inhaltsübersichten, Checklisten oder kleinen Quizzes über h5p ergänzt:

Inhaltsverzeichnis im Screencast-Video über h5p

Checklist mit h5p
Checkliste über h5p: Wie gut ist Ihr WordPress-Beitrag?

Im aktuellen Wintersemester 21/22 setzen wir die um h5p erweiterten Screencasts für Content Management das erste Mal aktiv in der Lehre ein und sind gespannt auf die Rückmeldung der Studierenden.

Stud.IP und h5p

Bisher fehlte uns eine zentrale Möglichkeiten der Bereitstellung von h5p-Lernmodulen, da unser Moodle diese Funktionalität nicht bietet. Die Erstellung und Bereitstellung von h5p über WordPress funktioniert zwar gut, aber ist etwas weit weg von unseren Lehrinhalten über separat notwendige WordPress-Installationen. Daher freuen wir uns über den Testbetrieb von Stud.IP seit diesem Semester an der Fakultät 3. In Stud.IP ist jetzt direkt in Veranstaltungen die Erstellung und Einbindung von h5p Lernmodulen möglich – ohne Medienbruch durch den Sprung zu einer separaten WordPress-Installation:

h5p Lernmodule in Stud.IP Veranstaltung

Austausch und Kompatibilität von h5p Lernmodulen

Die Kompatibilität und die Standardisierung von h5p Lernmodulen ist besonders hilfreich, wenn man die Lernmodule nachträglich auf verschiedene Arten bereitstellen möchte. Unabhängig davon, in welcher Umgebung h5p Lernmodule erstellt wurden (WordPress, Stud.IP, …), können sie jederzeit per Download und erneuten Upload in ein anderes System plattformübergreifend bereit gestellt und ausgetauscht werden.

Weitere h5p Lernmodule aus Studierendenprojekt

Studierende im Studiengang Informationsmanagement – berufsbegleitend widmeten sich in einem Studierendenprojekt unter Anleitung von Monika Steinberg der Konzeption und Umsetzung von h5p Lernmodulen zu bestehenden Lehrinhalten.

Im Ergebnis entstand eine Liste von möglichen h5p-Elementen und deren Anwendung sowie ein bunter Mix an Beispielen für deren Einsatz. Mehr dazu in einem Beitrag im QpLuS-IM-Blog:
h5p für interaktive Lernressourcen: Ergebnisse eines Studierendenprojekts

Die Keywordrecherche: Der Grundstein des Online Marketings

Beitragsbild Keywordrecherche

Autor*in: Linda Khorami


Am Anfang steht die Keywordrecherche. Ob Blog, Onlineshop oder Unternehmenswebsite, die Onlinepräsenz spielt heutzutage eine immer größere Rolle und ist nicht mehr wegzudenken. [1] Du möchtest auch mit deiner Präsenz im Netz überzeugen und so viele Menschen wie möglich erreichen? Dann ist die Keywordrecherche genau das Richtige für dich! Finde heraus, worum es sich hierbei handelt und wieso sie so wichtig ist.

Keyword Recherche Titelbild
Quelle: Search Engine Land


Auf diese Infos kannst du dich freuen:


Was ist ein Keyword?

Im Vordergrund der Recherche stehen sogenannte Keywords, aber was genau ist ein Keyword?

Im Deutschen steht der Begriff Keyword für Such- und Schlüsselbegriff sowie Schlag- und Schlüsselwort und wird bei der Recherche im Internet in das Suchfeld einer Suchmaschine eingegeben. [2] Damit die passenden Ergebnisse für deine Suchanfrage rausgefiltert werden, gleicht die Suchmaschine die eingegebenen Keywords mit den Seiten aus dem Index ab. [3]

Arten von Keywords

Bevor du dich mit der Recherche befasst, ist es wichtig, zwischen den verschiedenen Arten und Nutzerintentionen von Keywords unterscheiden zu können. Im Folgenden findest du die wichtigsten Varianten. [4]

 

Fokus Keyword 

Das Fokus Keyword wird von dir definiert und ist der Hauptbegriff,  für den deine jeweilige Seite in den Suchergebnissen ranken soll. [5]

 

Nischen Keyword

Von einem Nischen Keyword ist die Rede, wenn ein Suchbegriff ein niedrigeres Suchvolumen, aber auch wenig Wettbewerb hat. Neben dem Fokus Keyword werden auch Nischenkeywords verwendet, da es hier einfacher ist mit diesen Suchbegriffen zu ranken. [6]

 

Brand Keyword

Von einem Brand Keyword ist die Rede, wenn du mit deiner Suchanfrage nach einer bestimmten Marke suchst. [7]

Google-Suche: Vans
Bildschirmfoto – Brand Keyword

Informationsorientiertes Keyword

Wenn nach einer bestimmten Information gesucht wird, werden informationsorientierte Keywords verwendet. [8]

Google-Suche: Was ist ein Podcast?
Bildschirmfoto – Informationsorientiertes Keyword

Navigationsorientiertes Keyword

Keywords sind navigationsorientiert, wenn du mit deiner Anfrage gezielt nach einer Seite suchst. [9]

Google-Suche: Vans.de
Bildschirmfoto – Navigationsorientiertes Keyword

Transaktionsorientiertes Keyword

Wie der Name bereits verrät, sind transaktionsorientierte Keywords Suchbegriffe, die das Durchführen einer Transaktion zum Ziel haben. [10]

Google-Suche: Schuhe kaufen
Bildschirmfoto – Transaktionsorientiertes Keyword

Compound Keyword

Ein Compound Keyword ist gemeint, wenn du mit deiner Eingabe mehrere Nutzerintentionen erfüllst. Schauen wir uns folgende Suchanfrage an:

Google-Suche: Vans old skool kaufen
Bildschirmfoto – Compound Keyword

Hier suchen wir nicht nur nach einer bestimmten Marke (Brand Keyword), sondern auch nach einer Möglichkeit, den Schuh zu kaufen (transaktionsorientiertes Keyword). [11]

Keywords und ihre Wortlänge

Keywords können zudem auch in ihrer Wortanzahl unterschieden werden.  Hierbei unterscheiden wir zwischen Short-, Mid- und Long Tail Keywords.

 

Short Tail Keyword

Das Short Tail Keyword besteht lediglich aus ein oder zwei Suchbegriffen. Diese haben in der Regel ein hohes Suchvolumen. Aufgrund der Wortanzahl handelt es sich bei den Suchergebnissen eher um unspezifische Treffer. [12]

Mid Tail Keyword

Eine weitere Variante ist das Mid Tail Keyword, welches aus 2 bis 3 Wörtern bestehen kann. Hiermit können Suchergebnisse bereits etwas konkretisiert werden. [13]

Long Tail Keyword

Beim Long Tail Keyword handelt es sich um die spezifischste Suchanfrage. Hier werden Phrasen mit mehreren Wörtern verwendet. [14]

Was ist eine Keywordrecherche?

Bei der Keywordrecherche handelt es sich um eine Methode, mit der du herausfinden kannst, welche Suchanfragen für dich, deinen Kunden oder für deine Zielgruppe wichtig sein können.  Zu beachten ist hier, welche Keywords am meisten gesucht werden und welche Nutzerintention diese haben, denn anhand dieser Informationen kannst du deine Website sinnvoll optimieren und weiter ausbauen. Die Keywordrecherche ist der erste und wichtigste Schritt für dein Optimierungsvorhaben und sollte daher fester Bestandteil deiner Arbeit sein. [15]

Dabei kann dir die Recherche helfen

Die Recherche von Keywords ist für den Erfolg einer Website von großer Bedeutung und daher ein fester Bestandteil des Online-Marketings. Du fragst dich trotzdem wieso du dich an einer Recherche versuchen solltest?  Hier findest du meine Top 4 Gründe:

 

1. Do it for the Blog!

Mit Hilfe der Recherche kann auch die Themenfindung für deinen Blog deutlich vereinfacht werden. Mit der Keywordrecherche kannst du herausfinden wonach deine Zielgruppe am meisten sucht. Schreibe deinen Blogbeitrag und pflege dabei Keywords ein. Starte mit dem Fokus Keyword und füge anschließend passende Nischenkeywords hinzu.

Achtung: Keywords sollten nicht nur verwendet werden, weil sie ein hohes Suchvolumen haben. Die Chancen auf ein gutes Ranking sind hier eher gering, da auch weitere Einflussfaktoren wie der Wettbewerb eine Rolle spielen. Trau dich ruhig Keywords mit etwas weniger Suchvolumen zu nutzen. Eine weitere Alternative wären Long Tail Keywords.[16] 

 

2. Werde dir über den Markt bewusst

Die Keywordrecherche hilft dir dabei den Markt besser kennenzulernen und zu verstehen, denn durch diese Methode können unter anderem Probleme und Ängste deiner Kunden offengelegt, neue Kunden dazugewonnen, Mitbewerber analysiert oder neue Märkte erschlossen werden.[17]

 

3. Für mehr Buzz: Advertising in Suchmaschinen  

Falls du Interesse an der Suchmaschinenwerbung (SEA) hast, wird dir die Recherche auch hier helfen, eine erfolgreiche Ads Kampagne auf die Beine zu stellen. Kampagnen mit den richtigen Keywords haben eine größere Reichweite und bringen dir zudem mehr Traffic.[18]

 

 4. Gib deiner Seite den letzten Schliff

Unabhängig davon, ob du einen Blog, Onlineshop oder einer Unternehmensseite führst, durch die Recherche kannst du wertvolle Erkenntnisse gewinnen, um deine Seite zu optimieren. Je besser deine Inhalte sind, desto wahrscheinlicher ist es, dass deine Seite gefunden wird!

Tipp:  Setzte dich mit deinen Produkten oder deinen Dienstleistungen auseinander und schaue welche Suchbegriffe genutzt werden. Hier ist dein Verstand gefragt! [19]

Do it yourself!

Du bist neugierig geworden? Dann probier es einfach mal aus! Einen genauen Leitfaden findest du in diesem Video.

Hier findest du eine Übersicht der verwendeten Online-Tools aus dem Video sowie einige Alternativen:

Fazit

Die Keywordrecherche ist ein unverzichtbares Werkzeug im Online-Marketing und ist das A und O, wenn du deine Seite optimieren möchtest. Schöpfe das volle Potenzial deiner Seite aus, schreibe relevante Blogbeiträge, lerne den Markt und deine Kunden besser kennen oder plane eine erfolgreiche Ads Kampagne. Mit dieser Methode gelingt es dir bestimmt!


Quellen

1 vgl. cituro: Warum es so wichtig ist, online präsent zu sein. Online unter https://www.cituro.com/blog/online-auftritt [Abruf am 01.06.2020]

2 vgl. Seo-Küche: Was ist ein Keyword. Online unter https://www.seo-kueche.de/lexikon/keyword/ [Abruf am 15.05.2020]

3  vgl. Ryte Wiki: Keyword. Online unter https://de.ryte.com/wiki/Keyword [Abruf am 15.05.2020]

4  vgl. Seo-Küche: Was ist ein Keyword. Online unter https://www.seo-kueche.de/lexikon/keyword/ [Abruf am 15.05.2020]

5 vgl. ebd.

6 vgl. ebd.

7 vgl. Ryte Wiki: Keyword. Online unter https://de.ryte.com/wiki/Keyword [Abruf am 15.05.2020]

8 vgl. aufgesang(2020):Übersicht: Suchintention, Search Intent & Nutzerintention (Premium). Online unter https://www.sem-deutschland.de/blog/keywords-suchintention/ [Abruf am 15.05.2020]

9 vgl. ebd. 

10 vgl. ebd. 

11 vgl. ebd. 

12  vgl. Alpar, Andre; Koczy, Markus; Metzen; Maik (2015): SEO – Strategie, Taktik und Technik: Online-Marketing mittels effektiver Suchmaschinenoptimierung S. 142

13 vgl. ebd. S. 143

14 vgl. ebd. S. 143

15  vgl. SEMrush: Keyword-Recherche für SEO 2020 – der große Leitfaden. Online unter https://de.semrush.com/blog/keyword-recherche-seo-2020-leitfaden/#header2 [Abruf am 20.05.2020]

16  vgl. Blogmojo: Keywordrecherche. Online unter https://www.blogmojo.de/keyword-recherche/ [Abruf am 20.05.2020]

17 vgl. ebd

18  vgl. ebd

19 vgl. ebd


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Durch guten Content auf Platz 1 im Google-Ranking?

Beitragsbild

Autor*in: Vivien Hirschberger


Frage: Versteht Google meine Inhalte?
Antwort: Nein, noch nicht, aber das lässt sich ändern! Ich zeige dir wie.


Schritt für Schritt zum Ziel


Was ist das Ziel?

Auf der Website befinden sich…
Großartige, Originelle, Ordentliche, Greifbare, Leserliche Ergebnisse!

Und wie erreiche ich dieses?

Indem du deine Inhalte aus SEO-Sicht optimierst! Die nächsten Schritte erklären dir kurz und knapp, was du in Bezug auf deinen Content machen kannst, damit deine Website bei Google eine gute Bewertung erhält. Kommen wir zum Grundlegenden.

Warum sollte ich meine Inhalte für Google optimieren?

Durch Content an die Spitze
Der Weg zu einem besseren Ranking bei Google.

Zuallererst ist es wichtig, dass du den Grund für die Optimierung deiner Ergebnisse verstehst. Siehst du den freundlich lächelnden Smiley? Das bist du. Du hast eine Website, die mit Inhalten gefüllt werden muss. Der Begriff “Inhalt” ist jedoch sehr breit aufgestellt. Also kommen wir zur ersten eigentlichen Frage – welche Inhalte gibt es?

Content über Content

Wie du sicher schon bemerkt hast, wird der Inhalt einer Website meistens auch “Content” genannt. Hinter diesem Begriff verstecken sich allerhand Ergebnisse, die du auf deiner Website veröffentlichen kannst, um deine jeweilige Zielgruppe anzusprechen.

Jede dieser Inhaltsformen bringt besondere Anforderungen mit sich. Im nächsten Schritt erfährst du genauer, was du bei Bildern, Texten und Videos machen kannst, damit Google sagt: “Deine Website hat tolle Inhalte, sie bekommt den ersten Platz!”[1]


Bilder, Texte und Videos aus SEO-Sicht

Selbstverständlich gibt es außer Bildern, Texten und Videos noch weitere Inhalte, die du auf deiner Website platzieren kannst. Bei jeglichem Content ist es allerdings wichtig, dass du darauf achtest, dass dieser den Nutzern einen Mehrwert bietet. Das erreichst du im Allgemeinen, wenn der Inhalt einzigartig und auf die jeweilige Zielgruppe ausgerichtet ist. Dabei soll er bestenfalls zu Interaktionen, wie dem Klicken auf Buttons, Teilen oder Liken von Beiträgen oder dem Ausfüllen des Kontaktformulars führen[2]. Damit du dies in Bezug auf Texte, Bilder und Videos erreichst, gehe ich darauf nun detailliert ein.

Bilder optimieren

Fotos
Durch Bilder auf Platz 1

Es ist wichtig, dass du Bilder auf deiner Website nutzt, da diese zum einen die Optik deiner Seite sehr aufwerten, aber auch wichtige Informationen an den Nutzer bringen können. Das Ranking von bebilderten Websites ist einfach besser.

Dateiformat & Dateigröße  anpassen

In Bezug auf die Ladezeit deiner Website rate ich dir, auf Dateigröße und dennoch gute Qualität der Bilder zu achten. Dazu solltest du hochauflösende Bilder ggf. komprimieren und gängige Dateiformate nutzen, wie:

  • PNG
  • JPG
  • GIF
Richtige Datei-Metadaten nutzen

Wie Google den Inhalt deines Bildes erkennt? Durch den Dateinamen! Deshalb bitte das Motiv immer als Name verwenden und nicht einen Platzhalter, wie “Bild1”.  Trenne mehrere Wörter dabei mit Bindestrichen (keine Unterstriche verwenden!). Ein letzter Tipp zum Dateinamen – vermeide Großbuchstaben, Sonderzeichen und Umlaute.

Bei der Festlegung des Alt- und Title-Tags gibt es allerdings ebenfalls SEO-Möglichkeiten, du du nutzen solltest. Beim Title-Tag bitte den Dateinamen des Bildes verwenden, da Google dadurch einen Blick in den Bildinhalt erlangt. Den Title-Tag kann der Nutzer sehen, indem er mit der Maus über das Bild fährt.

Der Alt-Tag hingegen erscheint dem User, wenn das Bild nicht angezeigt werden kann. Zudem nutzen Programme diesen, um den Inhalt für Sehbehinderte zu umschreiben. Der Tag ist im Allgemeinen dazu da, das Bild thematisch zu beschreiben, sodass Google es einordnen kann. Dabei kannst du zum Beispiel Synonyme gut unterbringen.

Kontext & Thematik

Dein Bild sollte thematisch immer zum restlichen Inhalt deiner Website passen, da Google, wie zuvor erwähnt, den Bildinhalt erkennen kann und das bei dem Ranking der gesamten Seite berücksichtigt. Bei der Bildposition ist es von großer Bedeutung, dass sich das Bild immer auf den jeweiligen Text bezieht.

schummeln geht nicht

Da die Technologien von Google immer besser werden, kann die Suchmaschine mittlerweile, unabhängig von den Metadaten, grob erkennen, was sich auf deinem Bild befindet, sodass die Angabe falscher Metadaten sehr schädlich ist. Auch ist es besser, wenn du die Bilder selbst erstellst und keine Bilder nimmst, die schon sehr viel im Web herumschwirren. Lade jedes Bild aber bitte nur einmal, sonst handelt es sich um Duplicate-Content! Nichtsdestotrotz kannst du es mehrfach einbetten, wenn es passt”[3].

Suchmaschinenoptimierte Texte

Texte als Form des Contents
Mit Texten nach oben klettern

Auch Texte beinhalten einige Aspekte, die du beachten und optimieren solltest, damit deine Website bei Google nach oben klettern kann.

Text ist Text

Egal ob es sich bei deinem Text um eine Produktbeschreibung, einen Blogbeitrag oder Ähnlichem handelt – jeder Text sollte für die Suchmaschine aufbereitet und von dieser verstanden werden, um dein Ranking zu verbessern.

Keywords sind King

Bitte nutze Keywords in deinen Texten. Normalerweise geschieht das fast automatisch, wenn du deinen schriftlichen Content an deiner Zielgruppe ausrichtest. Allerdings solltest du Aspekte, wie die Keyworddichte  besonders beachten.

Die Keyworddichte beschreibt dabei das relative Verhältnis der Keywords zum restlichen Inhalt deines Textes. Diese sollte  ca. 3-4% betragen. Da die Texte in der Regel aber für die Nutzer deiner Website geschrieben werden, ist es ratsam, das Schriftstück nicht zu überladen. Beachte dabei:

  • Keywords in allen Abschnitten & in den Überschriften verwenden
  • Synonyme von Keywords nutzen
  • Kein zwanghafter Einsatz der Keywords
  • Grammatikalische Anpassungen & Füllwörter sind erlaubt
  • Benutzerfreundlichkeit ist das A und O!
Auf den Aufbau kommt es an
Die Hierarchie der Überschriften

Deine Überschriften müssen logisch aufgebaut sein. Dabei gibt es immer nur eine als <h1> (HTML) ausgezeichnete Headline. Anschließend kann es mehrere <h2> geben. Werden Abschnitte darunter nochmals gegliedert, kommen <h3> Überschriften zum Einsatz.

Absätze – nicht nur schick, sondern auch praktisch

Absätze sind nützlich, wenn du die Strukturierung deines Textes und die Lesbarkeit für den Nutzer verbessern möchtest. Zudem kannst du sogenannte Sprungmarken einbinden, damit der User zu bestimmten Textstellen springen kann. Diese sind möglicherweise ebenfalls Teil des Google-Suchergebnisses – eine Win-win-Situation!

Specials – Ausklappbare Elemente, Schriftart & Schriftfarbe

Nutzer lieben ausklappbare Texte, denn sie ermöglichen eine schnelle Navigation und Übersicht deiner Website. Gerade auf den mobilen Endgeräten ist das von großer Bedeutung. Wichtige Inhalte sollten jedoch gut sichtbar sein. Bezüglich der Schriftart und -farbe musst du ein paar Sachen berücksichtigen:

  1. Herkömmliche Browser müssen deine Schriftart darstellen können
  2. Nutzer müssen deine Schrift gut lesen können
  3. Schriftfarbe ungleich der Hintergrundfarbe verwenden
  4. Technisch: Den Text nicht über “display:none” verstecken
Die Länge ist alles (oder doch nicht?)

Bezüglich der Textlänge gibt es keine allgemeine Regel. Stattdessen musst du dich in deine Zielgruppe hineinversetzen und überlegen: “Warum sucht der Nutzer danach? Möchte er Informationen bekommen oder nur eine Transaktion abschließen?” Denn dein Text sollte so lang wie nötig, aber so kurz wie möglich sein. Das heißt, du musst die Suchanfrage deines Nutzers bestmöglich beantworten, ohne den Text künstlich durch Phrasen etc. zu verlängern [4].

Videos sind nicht gleich Videos

Filme als Form des Contents
Das Ranking pushen durch Videos

Videos können dein Ranking ebenfalls pushen, wenn du weißt wie. Hier ein paar Tipps und Tricks!

Das passende Storytelling

Jedes Video sollte dem Nutzer einen Mehrwert bieten, also inhaltlich wertvoll und aussagekräftig sein. Gestalte die Erzählweise spannend, damit der User lange auf dem Video verweilt, was bei Google und YouTube stark ins Ranking mit einfließt.

Videos zum Mitmachen

Feedback von den Zuschauern in Form von Kommentaren, positiven Bewertungen und Aufrufen wird von Suchmaschinen stark berücksichtigt, weil es einen Einblick in die Qualität und Relevanz des Filmchens gibt. Nichtsdestotrotz musst du dein Video auch aus technischer Sicht etwas aufpeppen, damit es gefunden und thematisch eingestuft werden kann.

Auch hier kommen Keywords zum Einsatz

Bereits zu Beginn solltest du ein Hauptkeyword festlegen. Dies ist dann der zentrale Begriff mit dem du im Ranking gegen Andere antrittst. Der Begriff sollte das Videothema dabei bestmöglich aufgreifen. Tipp: Vergleiche die Synonyme des Begriffs und achte dabei auf ihre Suchbeliebtheit, bzw. das sogenannte Suchvolumen. Das kannst du beispielsweise mit dem Google Keyword-Planner kostenfrei herausfinden.

Den richtigen Namen & Titel finden

Wie bei der Benennung anderer Inhalte ist es essenziell, dass sich der Name auf die Thematik des Videos bezieht und das Keyword enthält. Auch der Titel des Filmchens sollte das Hauptkeyword beherbergen, allerdings möglichst weit vorne, da es dann eine größere Relevanz hat. Beachte:

  • Der Titel sollte den Inhalt optimal benennen & Neugier wecken
  • Gestalte den Titel so kurz, wie möglich (max. 60 Zeichen)
Die Gestaltung der Description

Die Description, übersetzt Beschreibung, ist der begleitende Text deines Videos. Er ist am einfachsten zu indexieren und sollte aus mindestens 150-200 Zeichen bestehen. Nutze hier bitte ebenfalls Keywords! Die Reihenfolge spielt allerdings keine Rolle. Unterstütze dein Hauptkeyword durch Synonyme und Nebenkeywords, da es dadurch thematisch genauer eingeordnet werden kann.

Zusätzlich kannst du die Beschreibung dazu nutzen, um deine Ziele zu erreichen. So kannst du URLs  in ihrer vollen Läge zu Beginn einbinden, damit die User diese möglichst anklicken. Auch Hashtags (#) können zum Beispiel bei YouTube eingebunden werden und dienen dann automatisch als Links zur Suchergebnisseite. Die Hashtagverwendung bringt folgende Tipps mit sich:

  1. Die Hashtags müssen zum Inhalt passen
  2. Nicht mehr als 15 Stück verwenden
  3. Vor allem bei aktuellen Themen nutzen
Der erste Eindruck zählt – das Thumbnail

Das Vorschaubild muss so gestaltet sein, dass es den Nutzer neugierig auf den Inhalt des Videos macht. Dabei sollte es in Kombination mit dem Titel den Inhalt bzw. die Thematik ansprechend und bestmöglich veranschaulichen.

Videos überall

Internetseiten mit bewegtem Content erhalten bei Google eine größere Relevanz, als Seiten, die nur Text beinhalten. Deshalb bietet es sich an, eigene Videos auf der Website zu platzieren. YouTube kannst du in dem Fall gut als Hoster gebrauchen. Bestenfalls erscheinst du mit dem Video dadurch in den Google-Suchergebnissen mitsamt des Thumbnails. Folgendes kannst du zusätzlich machen:

  • Nutze zusätzliche Portale & Netzwerke, um Nutzer zu erreichen
  • Mache Werbung für dein Video über Social Media Kanäle

Es gibt auch  die Möglichkeit des Erwerbs von Reichweite, indem du Geld investierst [5].


Content Marketing – eine moderne Disziplin

Die Contentoptimierung in Bezug auf Internetseiten ist mittlerweile ein großer Bestandteil im Arbeitsleben von vielen SEO-Spezialisten geworden. Zum Abschluss hast du hier einen kleinen Überblick, was hinter diesem riesigen Bereich genau steckt und warum das Content Marketing so wichtig ist.


Ein kleines Quiz – teste dich!


Viel Erfolg!

Ich hoffe, dass du mit Hilfe von diesem Beitrag deinem Traum, ganz oben in den Suchergebnissen bei Google zu sein, ein Stückchen näher gekommen bist. Natürlich gibt es keinen goldenen Weg, da sich Technologien fortwährend weiterentwickeln und verändern. Doch hab Geduld, die Arbeit lohnt sich!


Quellen

1 Vgl. SEO-Küche: Was ist Content? Online unter https://www.seo-kueche.de/lexikon/content/ [Abruf 20.05.2020]

2 Vgl. textbroker: Suchmaschinenoptimierung von Content. Online unter https://www.textbroker.de/suchmaschinenoptimierung-von-content [Abruf 20.05.2020]

3 Vgl. t3n (2017): Bilder-SEO: Mit optimierten Bildern das Google-Ranking pushen. Zuletzt aktualisiert am 12.09.2017. Online unter https://t3n.de/news/bilder-seo-optimierten-bildern-855423/ [Abruf am 20.05.2020]

4 Vgl. Dziki, Luisa (2018): How To: So schreibst du einen SEO-Text. Herausgegeben von: Seokratie GmbH. Zuletzt aktualisiert am 06.09.2018. Online unter https://www.seokratie.de/seo-texte-schreiben/ [Abruf am 27.05.2020]

5Vgl. how2 AG (2014): Videos selbst Optimieren: Die 10 wichtigsten Punkte für ein besseres Ranking auf Google und YouTube. Zuletzt aktualisiert am 07.09.2014. Online unter https://how2.expert/blog/erklaervideo-video-seo.html [Abruf am 27.05.2020]


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Was sind interaktive Videos?

Interaktive Videos

Autor: Serkan Sarica


Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt.

Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch vorgefertigt aufgezeichnet. Die Technik hat sich durch höhere Auflösungen und bessere Farben etc. deutlich verbessert, aber gab es wirklich revolutionäre Veränderungen für den Zuschauer? Wir sitzen vor dem Bildschirm und gucken nur zu. An der Technik haben wir doch schon so viel getan, warum nicht auch dem Zuschauer neue Funktionen geben? Bist du auch davon gelangweilt die Geschehnisse einfach hinzunehmen? Dann sind interaktive Videos genau das Richtige für dich.

Überblick

Klick dich gern durch den Beitrag:

Was sind interaktive Videos?

Wenn dir jemand mehr Kontrolle geben will, würdest du es ablehnen?
Interaktive Videos animieren den Nutzern Interaktion durchzuführen und ermöglichen somit Kontrolle über den Inhalt. Somit werden diese Art von Videos nicht passiv konsumiert – ganz im Gegenteil: Du als Zuschauer nimmst eine aktive Rolle ein und beeinflusst den Inhalt. Obwohl diese Videos schon seit Jahren existieren, sind sie immer noch kaum verbreitet.[1]

Einsatzmöglichkeiten

Diese Technik kann in vielen Bereichen eingesetzt werden.

Beispiele:

  • Lehre
  • Werbung
  • Entertainment

Vorteile von interaktiven Videos

Die Marketingagentur Room214 gibt mit ihrer Statistik an, dass die Click-Through-Rate bei interaktiven Videos bei 5-12 % liegt. Die üblichen Videos hingegen liegen bei nur 1-2 %. Außerdem wurden sie zu 90% vollständig angeschaut. Normale Videos wurden hingegen zu 50% – 85% komplett angeschaut. Ein weiterer Vorteil ist, dass die Anzahl der Aufrufe steigt. Dies kommt zustande, weil verschiedene Szenarien auswählbar sind und die Neugier der Zuschauer somit steigt. Sie wollen nämlich wissen, wie das Video ausgeht, wenn sie einen alternativen Pfad auswählen.

Einsatz in der Lehre

Die Technik hat vor allem in der Lehre sein Nutzen. Es ermöglicht über interaktive Punkte die Aufmerksamkeit zu fokussieren. Dadurch können die Inhalte des Videos vertieft werden.

„Diese interaktiven Punkte erlauben es, die Aufmerksamkeit der lernenden Person auf eine bestimmte Sequenz oder ein bestimmtes Detail des Videos zu lenken und tragen damit zum Verständnis des Videoinhalts bei. Auf diese Weise können die Lernenden das Maß an
Informationen regulieren und damit eine kognitive Überlastung vermeiden.“
Mehrwert darstellen
Abb. 1.: Mehrwert von Videos und interaktiven Videos aus der Sicht von Lehrpersonen[3]

Vor allem für Lernende mit wenig Vorstellungskraft ist diese Technik somit besonders hilfreich!

Beispiele

Honda Presents The Other Side

Beim folgenden Video handelt es sich um eine Werbung von Honda. In diesem Video kannst du parallel zwei Geschichten erleben. Per Mausklick oder R-Taste kannst du entscheiden, welche Story du sehen möchtest.

360° Video New Lipton Magnificent Matcha Tea Takes You Inside the Cup

In diesem Fall dachte sich Lipton „Warum nicht mit einem 360° Video unseren Tee vermarkten?“. Diese Technik ermöglicht dir das Video aus verschiedenen Perspektiven zu sehen. Außerdem kannst du entscheiden, was du dir genauer anschauen möchtest.

Star Wars: Welche Farbe hat dein Lichtschwert?

Star Wars Fans aufgepasst, denn dieses Beispiel ist etwas Besonderes! Hierbei handelt es sich um eine Reihe von Videos die zusammen eine Interaktive Geschichte bilden. Du kannst nämlich am Ende des Videos selbst wählen, wie die Geschichte weitergeht. Dafür wirst du zu einem nicht gelisteten Video weitergeleitet. Am Ende erfährst du welche Farbe dein Lichtschwert hat.

Fazit

Interaktive Videos sind die Weiterentwicklung von Web Videos. Auch wenn die Technik noch nicht sehr verbreitet ist, zeigt sie sehr viel Potential für die Zukunft. Immer mehr Streamingdienste bieten bereits interaktive Titel an, denn die Nachfrage steigt. Video ohne Interaktionen mit dem Zuschauer können in naher Zukunft deutlich an Beliebtheit verlieren. Anbieter wie auch Nutzer profitieren von dieser Technik. Die Nutzung macht nicht nur Spaß, sondern hat viele Vorteile für beide Seiten. Eins ist klar, interaktive Videos werden das Internet revolutionieren!

Quellen

1 Pink University (2016): Interaktives Video in der Weiterbildung – Formate und Vorteile. Online unter https://www.pinkuniversity.de/blog/e-learning-interaktives-video-interaktives-schulungsvideo-in-der-weiterbildung/ [Abruf am 14.07.20]

Beitragsbild: Photo by Donovan Silva on Unsplash.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.