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]

Tutorial: Ein Tag mit Bobby

Beitragsbild Tutorial zur Animation: Ein Tag mit Bobby

Autor*in: Julia Solohub 


Animation anschauen

Quellcode (Zip-Archiv zum Download)

Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten kann.

Inhaltsverzeichnis

Das Konzept

Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird.  Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.

Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.

Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.

Aufbau

Die Animation ist in vier Szenen aufgeteilt:

  1. Start-Szene (div class=“ story_start_scene“)
  2. Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
  3. Bobby im Park (div class=”background_image_park_day”)
  4. Schluss-Szene bei der Bobby im Park nachts ist (div class=”dog_in_park_night”)

Start Szene

Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.

Start Szene

Zweite Szene

In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.

Zweite Szene
Zweite Szene

Dritte Szene

Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.

Dritte Szene
Dritte Szene

Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.

Vierte Szene

Vierte Szene
Vierte Szene

Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.

Letzte Szene
Letzte Szene

Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten

Der Code

Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.

Allgemeine Einstellungen

In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.

<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
      <div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
         <img src="sleeping_dog.png" id="sleep"/>
         <img src="carpet.png" id="carpet"/>
       </div>
    
       <div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
          <div class="living_room_background">
            <img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
           </div> 
           <div class="dog_character">
             <img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
             <img src="sprechblase.png" id="speak1" style="visibility: hidden;"/> 
             <p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
           </div>
       </div>

       <div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
           <div class="background_image_park_day">
             <img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>        
           </div>
           <div class="park_items">
             <img src="grill.png" id="bbq" style="visibility: hidden;"/>
             <img src="food.png" id="hot_dog" style="visibility: hidden;"/>
             <img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
             <img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
             <p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
             <p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
             <img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
             <img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
             <img src="ball.png" id="toy" style="visibility: hidden;"/>    
           </div> 
       </div>

       <div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.--> 
           <div class="background_image_park_night">
             <img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/> 
             <img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
             <img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
             <img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>  
             <p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
             <p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
           </div>
       </div>
 </div><!--Ende der "animation_start"-->

In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.

<body>
  <!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
  <script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
  <aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
    <h1> Ein Tag mit Bobby</h1>
    <button id="button_aufwecken">
       <a class="button_1">Aufwecken</a>
    </button>
    <button id="button_park" style="visibility: hidden;">
      <a class="button_2">Lass uns in den Park gehen</a>
   </button>
   <button id="button_hot_dog" style="visibility: hidden;">
      <a class="button_3">Hot Dog geben </a>
    </button>
    <button id="button_play" style="visibility: hidden;">
      <a class="button_4">Mit Bello spielen</a>
    </button>
    <button id="button_next" style="visibility: hidden;">
     <a class="button_5">Weiter</a>
   </button>
   <button id="button_good_night" style="visibility: hidden;">
     <a class="button_6">Gute Nacht!</a>
  </button>
   <button id="button_reload" style="visibility: hidden;">
     <a class="button_7">Neustart</a>
 </button>
</aside> 

Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.

#animation { /*Ausrichtung der gesamten Animation*/
  align-items: center;
  min-height: 100%;
  position: absolute;
}

.whole_animation {
  max-width: 900px;
  margin: 0em auto 0;
  text-align: center;
  max-height:800px;  
  overflow: hidden;
}
  
.title_and_buttons { /*Ausrichtung aller Buttons und der h1*/
  max-width: 900px;
  text-align: center;
  margin: 1em auto; 
  padding:1px;
}
   
h1 {
  color: white;
  font-size: 1.7rem;
}

Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.

body {
  font-family: "Comic sans MS"; 
  background-size: cover; 
  justify-content:center;
  background-position: center;
  background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead); 
  background-size: 400% 400%;
  align-items: center;
  min-height: 100%;
  overflow:hidden;
  -webkit-animation: moving_background 13s ease infinite;
  animation: moving_background 13s ease infinite;
}

@-webkit-keyframes moving_background {  /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
  }
  100% {
      background-position: 0% 50%;
  }
}

Die Buttons

Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.

Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.

#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
  border-radius: 50%;
  align-items: center;
  font-size: 15px;
  display: flex;
  margin: auto;
  background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%);  /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
  background-size: 200% auto;
  box-shadow: #a05a9c 0px 0px 5px;
  -webkit-animation: push_buttom 3s infinite;
  animation: push_button 3s infinite;
  outline: none;
}


@-webkit-keyframes push_button {                       /*Inspired by https://css-tricks.com/css-animation-libraries/*/
  0% {
    box-shadow: 0px 0px 4px rgb(255,250,250);
  }
          
  
  50% {
    box-shadow: 0px 0px 23px rgb(255,250,250);
  
  }
  100% {
    box-shadow: 0px 0px 12px rgb(255,250,250);
  }
}

@keyframes push_button {                       
0% {
  box-shadow: 0px 0px 4px rgb(255,250,250);
}
        

50% {
  box-shadow: 0px 0px 23px rgb(255,250,250);

}
100% {
  box-shadow: 0px 0px 12px rgb(255,250,250);
 }
} 

#button_aufwecken:hover {
  background-position: right center;
  transition: all 0.5s ease-out;
  }
      
.button_1{
  flex: 1 auto;
  margin:5px;
  padding:10px 25px;
  text-align:center;
  transition: all 0.5s ease-out;
  cursor:pointer;
  background-size: 200% auto;
  font-family: "Comic sans MS";
}

Animierte Objekte

Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin.  Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.

Text in Sprechblase

Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.

#welcome_text { /*Annimation für Text in der Sprechblase. Wird in jeder Szene eingesetzt*/
  position: relative;
  bottom: 392px;
  left: 475px;
  z-index: 4;
  font-size: 10px;
  box-sizing: border-box;  
  overflow: hidden;
  border-width: 20px;
  border: 1px hidden;
  width: 135px;

  -webkit-animation: typing_hello 1.5s ease infinite; 
  -webkit-animation-delay: 0s;
  -webkit-animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;

  animation: typing_hello 1.5s ease infinite;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-play-state: paused;     
}

  @-webkit-keyframes typing_hello {
   0% {
    transform: 
       scale(0.7, 0.7);
       color:rgb(116, 9, 107)
  }
   50% {
    transform: 
       scale(0.9, 0.9);
       color:rgb(85, 25, 134)
  }
   100% {
    transform: 
      scale(0.7, 0.7);
      color:rgb(73, 41, 214)
  }
}

Fliegender Hot Dog

Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.

#hot_dog { /*Animation des fliegenden Hot-Dogs*/
  width: 47px;
  z-index: 2;
  position: relative;
  bottom: 300px;
  right: 225px;

  -webkit-animation-name: flying_hot_dog;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-play-state: paused;
  
  animation-name: flying_hot_dog; 
  animation-duration: 2s;
  animation-fill-mode:forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: paused;
}
 
  @-webkit-keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

  @keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

Bello und Bobby beim Ballspielen

Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.

#bello { /*Ab hier folgt die Animation der zwei mit dem Ball spielenden Hunde*/
  width: 90px;
  z-index: 3;
  position: relative;
  bottom: 430px;

  -webkit-animation: move_bello 2s infinite;
  -webkit-animation-delay: 1s;

  animation: move_bello 2s infinite;
  animation-delay: 1s;
}

@-webkit-keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

@keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

#bobby {
  width: 90px;
  z-index: 3;
  position: relative;
  left: 200px;
  bottom: 430px;

  -webkit-animation: move_bobby 2s infinite;
  animation: move_bobby 2s infinite;;
}

@-webkit-keyframes move_bobby {
  from {  bottom: 477px; animation-timing-function: ease-out; }
    50% { bottom: 570px; animation-timing-function: ease-out; }
     to { bottom: 477px; }
}

Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.

Saltomachender Bobby

In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.

#night_dog {
  width: 80px;
  position: relative;
  right: 380px;
  bottom: 1039px;
  -webkit-animation: salto_dog 2s infinite;
  -webkit-animation-timing-function: linear;
  animation: salto_dog 2s infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes salto_dog {  /*Animation von Bobby, der eine Rückwärtsrolle macht*/
  from  { transform: translateX(0px) translateY(0px)  rotate(0deg) }
  50%   { transform: translateX(0px) translateY(-80px) rotate(-180deg) }
  to    { transform: translateX(0px) translateY(0px)rotate(-360deg) }
}

Buttons

#button_reload {
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px; 
margin-top: -50px;
}

#button_reload {
-webkit-animation-name: button_load;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: paused;
-webkit-animation-direction: alternate-reverse;

animation-name: button_load; 
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count:infinite;
animation-play-state: paused;
animation-direction: alternate-reverse;
}

@-webkit-keyframes button_load {
  from  { transform: translateX(-20px) scaleX(1.0)}
  to    { transform: translateX(20px) scaleX(-1.0)}
} 
 

Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.

Gute Nacht, Bobby Schrift

Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.

#good_night_bobby{ /*Verabschiedung durch "Gute Nacht" Text Animation*/
  position: relative;
  bottom: 1500px;
  font-size: 30px;
  color: white;
  -webkit-animation: push_good_night 3s infinite;
  animation: push_good_night 3s infinite;
  animation-timing-function: cubic-bezier(.1,0,.7,1);
  outline: none;
}

  @-webkit-keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
    transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
    transform: scale(.97);
  }
   50% {
    text-shadow: 6px 6px 8px rgb(19, 236, 184);
 }
   60% {
    transform: scale(.99) rotate(-2deg);
 }
   80% {
    transform: scale(1.05);
 }
   100% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(135, 222, 241);
 }
 }

  @keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
   transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
   transform: scale(.97);
  }
   50% {
   text-shadow: 6px 6px 8px rgb(19, 236, 184);
}
   60% {
   transform: scale(.99) rotate(-2deg);
}
   80% {
   transform: scale(1.05);
}
   100% {
   transform: scale(1);
   text-shadow: 2px 3px 6px rgb(135, 222, 241);
}
}

JavaScript/jQuery

var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/

$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() {  /*Button "Aufwecken"*/
    $(".story_start_scene").css({"visibility": "hidden"});
    $(".backgroundimage_livingroom").css({"visibility": "visible"}); 
    $("#hello_dog").css({"visibility": "visible"});
    $("#speak1").css({"visibility": "visible"});
    $("#button_park").css({"visibility": "visible"});
    $("#button_aufwecken").css({"visibility": "hidden"})
    $("#welcome_text").css({"visibility": "visible"});
    $("#name_text").css({"visibility": "visible"});
    $("form").css({"visibility": "visible"});
    
    $("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
    $("#welcome_text").css({"-webkit-animation-play-state": "running"});

    name = prompt("Bitte gib deinen Namen ein", "Snoopy");     /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
    console.log(name);

    if (name != null) {                                                                    
        document.getElementById("welcome_text").innerHTML =
        "Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
      }

});
 

Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(“#button”).on(“click”, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.

Bobby JS
Bobby JS

Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.

Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.

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

Besonderheiten

Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.

Schwierigkeiten

Beim Erstellen der Animation traten zwei Probleme auf.

  1. Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der “abgetippte Text” nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
  2. Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.

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.

Moderne Lernraumgestaltung in Universitätsbliotheken

Beitragsbild Moderne Lernraumgestaltung in Universitätsbibliotheken

Autorin: Hjördis Helberg


Warum sollten sich Bibliotheken jetzt mit dem Thema Lernraum beschäftigen?

Die Nachfrage nach physisch vorhandenen Medien sinkt. Dies lässt sich anhand von Ausleihzahlen feststellen. Gerade in naturwissenschaftlichen und technischen Fachrichtungen werden zunehmend elektronische Ressourcen genutzt. Diese Entwicklung hat zur Folge, dass der Bestand in den Lesesälen dezimiert bzw. magaziniert wird und Freiflächen entstehen.

Gleichzeitig steigt die Nachfrage nach Lern- und Arbeitsraum, da Studium und Arbeitswelt zunehmend virtuell und somit zeitlich und räumlich flexibler werden.[1] Auch wenn es angesichts dieser Ortsunabhängigkeit zunächst paradox erscheint, gewinnen öffentliche Lernräume am Campus im Gegensatz zum heimischen Schreibtisch an Bedeutung. Studierende suchen Lernorte gern gemeinsam als Gruppe auf. [2]

Gruppenarbeit
Quelle: https://unsplash.com/@priscilladupreez

Bibliotheken können auf diesen Trend reagieren, indem sie Lernumgebungen und Serviceleistungen zur Verfügung stellen, die moderne Arbeitsweisen ermöglichen. Dabei müssen grundlegende Bedingungen für eine gute Lernumgebung beachtet werden. Darüber hinaus sollten Bibliotheken neue Ideen und Konzepte wagen. Sie dürfen attraktiv sein, überraschen und im Gedächtnis bleiben!

Dieser Beitrag stellt, neben grundlegenden gestalterischen Aspekten für Lernräume, zwei für Bibliotheken vielversprechende Ideen zum Thema modernes Lernen vor.

Inhalt

Was macht attraktiven Lernraum aus?

Ansprechenden Lernraum zeichnet vor allem eines aus: die Bedürfnisse der Nutzer*innen stehen im Mittelpunkt!

Weil die Bereitstellung geeigneter Möbel, Beleuchtung, Hard- und Software sowie WLAN dabei genauso wichtig ist, wie eine angenehme Atmosphäre, entwickeln sich moderne Bibliotheken zu einer Art Mischform aus öffentlichem Arbeitsraum und Wohnzimmer.[3] Neben dieser essentiellen Ausstattung benötigt es eine lernfördernde Umgebung. So kann ein Angebot unterschiedlicher Lernräume und -szenarien verschiedene Bedürfnisse bedienen. Neben Einzelarbeitsplätzen und Gruppenräumen verschiedener Größe und Ausstattung, ist funktionales und anpassungsfähiges Mobiliar essentiell. Es sollte dauerhaft haltbar sein und es ermöglichen, die Lernumgebung leicht an den eigenen Bedarf anzupassen. So können rollbare Wände, Tische und Whiteboards einen Gruppenraum im Raum schaffen, wenn er benötigt wird.

Darüber hinaus sollte der Lernort Bibliothek leicht zugänglich sein und eine einfache, eigenständige Orientierung im Raum ermöglichen. Zudem darf der „Wohlfühlfaktor“ nicht außer Acht gelassen werden. Eine inspirierende und motivierende Gestaltung der Räume fördert die Aufenthaltsqualität und regt gleichermaßen zum Lernen und zur Kommunikation an.[4] Für beide Zwecke können eigens gestaltete Zonen eingerichtet werden.

Hunt Library, NC State University, Lounge
Quelle: https://www.flickr.com/photos/paytonc/8758631495/ (CC BY 2.0)

Bibliotheken sollten modern und attraktiv gestaltet sein, um ihren Nutzer*innen positiv in Erinnerung zu bleiben. So werden sie zu einem Ort, den sie gern aufsuchen.

Lernerfolge durch Bewegung fördern

Zur Gestaltung erholsamer Lernpausen bieten viele moderne Bibliotheken bereits Zonen mit gemütlichen Sitzgruppen an, die zum Entspannen und zur Kommunikation einladen sollen. Pausen sind dabei besonders wichtig für die Konzentration und den Lernerfolg.[5] Diese Art der Pausengestaltung wird gern angenommen, sollte aber möglichst durch weitere Angebote ergänzt werden. Denn je angenehmer die Unterbrechung des Lernprozesses gestaltet ist, desto wahrscheinlicher ist es, dass er nicht wieder aufgenommen wird. Vielmehr zeigt sich, dass Pausen umso effektiver sind, je mehr sie sich in ihrer Tätigkeit vom Lernen unterscheiden.[6] Zudem ist bekannt, dass die durchschnittliche Dauer sitzender Tätigkeiten insbesondere bei Studierenden besonders hoch ist.[7]

Konzentration, Pause, Lernen
Quelle: https://unsplash.com/@punttim

In Bewegung kommen

Bibliotheken können die Konzentration und somit die Effizienz ihrer Nutzer*innen unterstützen, indem sie ihnen Angebote zur aktiven Pausengestaltung bieten. Stromerzeugende Tischräder können einen Beitrag zur Gesundheitsförderung der Studierenden leisten und haben zudem einen Nachhaltigkeitsaspekt. Die Möglichkeit, eine Lernpause nicht nur in Bewegung zu verbringen, sondern gleichzeitig das eigene Endgerät durch Muskelkraft mit Strom zu versorgen, macht den Bibliotheksbesuch zu einem Erlebnis. Diese Innovation kann ein positives Image der Bibliothek unterstützen.

Die Philologische Bibliothek der Freien Universität Berlin hat für Ihre Nutzer*innen ein Schreibtischfahrrad installiert, das für eine aktive Pause genutzt werden kann. Darüber hinaus erlaubt es das Arbeiten am Schreibtisch bei gleichzeitiger Bewegung: [8]

Praktischer Wissenserwerb

Wollen Bibliotheken sich auch in Zukunft als physische Orte legitimieren, benötigen sie neue Serviceleistungen rund um Wissensaneignung und -vermittlung, die nicht ausschließlich bestandsbezogen sind. Eine für wissenschaftliche Bibliotheken vielversprechende, jedoch in Deutschland bisher selten realisierte Idee, ist das Einrichten von Makerspaces. Dabei handelt es sich um Orte für praktischen und innovativen Wissenserwerb. Zunächst sind sie offene Werkstätten, die neben geeigneten Räumlichkeiten auch Geräte wie 3D-Drucker, CNC-Fräsen, Plotter oder Kleingeräte zur Produktion von Modellen und Gegenständen bieten. Insbesondere sind sie aber Orte der persönlichen Begegnung von Menschen mit unterschiedlichen Kompetenzen und Interessen. Computerspezialist*innen, Designer*innen und Bastler*innen profitieren vom gemeinsamen Wissens- und Erfahrungsaustausch. Wichtig ist, dass Bibliotheken darauf achten, diese Community in die Unternehmung Makerspace aktiv einzubinden und entsprechende Veranstaltungen und Serviceleistungen anzubieten, um einen beliebten Ort produktiver Kreativität zu schaffen.

Makerspace
Quelle: https://unsplash.com/@darya_tryfanava

Die Vorteile

Vielerorts gibt es bereits kommerzielle Makerspace-Angebote. Was sind also die Vorteile für Bibliotheksnutzerinnen? Und was hat letztlich die Bibliothek davon? Makerspaces sind als Angebot einer wissenschaftlichen Bibliothek besonders niedrigschwellig. Der Zugang ist kostenfrei oder kostengünstig. Zudem sind Universitätsbibliotheken eine für die meisten Studierenden bereits bekannte Institution. Im Gegensatz zu den innerhalb der Universität vorhandenen Werkstätten, ist sie fakultätsübergreifend. Sie richtet sich also an Studierende verschiedener Studiengänge und kann der Ort sein, an dem Netzwerke geknüpft und gemeinsame Ideen realisiert werden. Studierende, die die Bibliothek bislang nicht nutzten, können durch das Angebot eines Macerspace wohlmöglich als Nutzerinnen gewonnen werden.

Herausforderungen

Natürlich gibt es auch ein paar Herausforderungen zu beachten: Werkstätten gehen mit einem gewissen Geräuschpegel und einem regen Publikumsverkehr einher. Es muss also ein geeigneter Ort gefunden werden, damit der reguläre Bibliotheksbetrieb nicht beeinträchtigt wird. Zudem wird engagiertes Personal benötigt, das bereit ist, sich eigens in den Betrieb des Makerspace einführen zu lassen und selbst Arbeitsschutzunterweisungen und Geräteeinführungen für Nutzer*innen anzubieten. In den Stellenplänen von Bibliotheken ist diese zusätzliche Arbeit bislang nicht berücksichtigt. [9]

“Wissen kommt von Machen!” – Der Makerspace der SLUB Dresden

Die SLUB Dresden (Sächsische Landesbibliothek – Staats- und Universitätsbibliothek) hat sich diesen Herausforderungen gestellt. Ihr Makerspace hat sich mit Hilfe engagierter Mitarbeiter*innen, einem breiten Netzwerk und interessierten Nutzer*innen aus einem zunächst befristeten Projekt zu einer festen Bereicherung des Bibliotheksbetriebs entwickelt[10]:

Fazit

Bibliotheken waren, sind und bleiben Orte des Wissens. Sie verlieren nicht an Bedeutung, müssen ihr Angebot allerdings kreativ und engagiert erweitern, um attraktiv zu bleiben.

Bibliothek, Bücher, Lesen
Bibliotheken sind Orte des Wissens. Es braucht nicht nur Raum für Bücher, sondern auch für Menschen. Quelle: https://unsplash.com/@osac

Denn die Art, wie wir Wissen aufnehmen und weitergeben, verändert sich mit fortschreitender Digitalisierung. Diese Entwicklung können Bibliotheken nutzen und sich als innovative Orte positionieren, die Nutzer*innen einbeziehen und moderne Arbeitsweisen ermöglichen. Dafür sind sie besonders geeignet, denn sie sind öffentliche, niedrigschwellige Räume, an denen fachübergreifende Netzwerke entstehen können.

Es gibt verschiedene Herangehensweisen zur Gestaltung moderner Lernräume. Dieser Herausforderung begegnen Bibliotheken am besten, indem sie ihre Nutzer*innen und deren Bedürfnisse in den Fokus stellen. Sie bevorzugen einen inspirierenden, motivierenden Lernraum mit hoher Aufenthaltsqualität, an dem sie konzentriert arbeiten und ihr Wissen mit anderen teilen können.

Quellen

[1] Glitsch, Silke u.a. (2017): Arbeitsplatz- und Lernortentwicklung an der Niedersächsischen Staats- und Universitätsbibliothek Göttingen. In: Umlauf, Konrad u.a. (Hg.): Strategien für die Bibliothek als Ort. Festschrift für Petra Hauke. Berlin/Boston: De Gruyter Saur, S. 95-110

[2] Semar, Wolfgang (2014): Digitale Veränderungsprozesse: Konsequenzen für das Lern- und Kommunikationsverhalten. In: Eigenbrodt, Olaf (Hg.): Formierungen von Wissensräumen. Optionen des Zugangs zu Information und Bildung. Berlin/Boston : De Gruyter Saur (Age of Access? Grundfragen der Informationsgesellschaft, Bd. 3), S. 11-20

[3], [5] und [8]Wagner, Janet (2020): Bewegung fördert Lernen. Neue Angebote am Lernort Bibliothek dargestellt am Beispiel der Philologischen Bibliothek der Freien Universität Berlin. Bachelorarbeit. Fachhochschule Potsdam, Fachbereich Informationswissenschaften, Studiengang Bibliotheksmanagement. Potsdam

[4] Stankovic, Marina u.a. (2016): Bibliothek als architektonische Aufgabe. Von der Entwicklung der Gebäudetypologie und der Verschiebung der Schwerpunkte in der Bibliotheksarchitektur. In: Hauke, Petra (Hg.): Praxishandbuch Bibliotheksbau. Planung, Gestaltung, Betrieb. Berlin/Boston : De Gruyter Saur, S. 3-16

[6] Metzig, Werner u.a. (2020): Lernen zu lernen. Lernstrategien wirkungsvoll einsetzen. 10., überarbeitete und erweiterte Auflage. Berlin : Springer

[7] Statista (2016): Durchschnittliche Dauer von sitzenden Tätigkeiten von Personen nach Bildungsgrad. Online unter https://de.statista.com/statistik/daten/studie/588185/umfrage/durchschnittliche-dauer-von-sitzenden-taetigkeiten-von-personen-in-deutschland-nach-bildungsgrad/ [Abruf am 20.01.2021]

[9] Bonte, Achim (2017): Vorstoß in neue Wissensräume. Makerspaces im Leistungsangebot wissenschaftlicher Bibliotheken. In: Umlauf, Konrad u.a. (Hg.): Strategien für die Bibliothek als Ort. Festschrift für Petra Hauke. Berlin/Boston: De Gruyter Saur, S. 85-94

[10] Dobeleit, Daniela u.a. (2020): Steuerung und Evaluation. Geräteführerscheine am SLUB Makerspace in Dresden. In: Heinzel, Viktoria (Hg.): Lernwelt Makerspace. Perspektiven im öffentlichen und wissenschaftlichen Kontext. Berln/Boston : De Gruyter Saur, (Lernwelten), S. 101-112


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.

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.

Tutorial: Prototype erstellen mit Figma – So funktioniert’s!

Beitragsbild

Autor*in: Anna Selitski und Anna-Lisa Voigt


User Experience Scala
Von einer very bad zu einer exzellenten User Experience ©Olivier Le Moal – stock.adobe.com

Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen.  Aber wie funktioniert das Erstellen von einem Prototype mit Figma? Und was sind Figma und die User Journey überhaupt? Das und weitere spannende Informationen zu diesem Thema zeigen wir dir in dem folgenden Beitrag!

Dieser Beitrag im Überblick:

Eine Einführung zu Figma

Fangen wir erst einmal mit Figma an. Figma ist ein Web-basiertes Programm, welches zum Designen von Screens für eine App oder Webseite gedacht ist. Vielleicht kennst du auch das Tool Sketch. Dort kannst du auch leicht und unkompliziert Designs erstellen, jedoch spätestens wenn man zu zweit an einem Projekt arbeitet, kann man sich dort schnell in die Quere kommen. Figma hingegen ermöglicht dir das Designen von Screens mit vier oder mehr Händen! Du fragst dich wie das gehen soll? In Figma können mehrere Designer gleichzeitig an ihrem eigenen Gerät und an derselben Datei arbeiten, ohne sich dabei zu stören.

Fünf Gründe für Figma[1]

Fünf Gründe für Figma - Prototype erstellen
Das sind die wichtigsten fünf Gründe für Figma. ©Song_about_summer – stock.adobe.com

  1. Das Interface von Figma:
    Wer mit Figma arbeitet merkt schnell, dass das Interface dieses Tools von Designern für Designer entwickelt wurde. Aber auch für Anfänger ist das Bedienen der Software, nach ein paar Stunden Einarbeitung, kein großes Problem mehr. Die zahlreichen Shortcuts sind unserer Meinung nach unbezahlbar! Shortcuts? Das sind unzählige Tastenkombinationen für verschiedene Werkzeuge. Somit bleiben dir Klicks und Zeit erspart!
  2. Schnell zum Ergebnis mit wenig Aufwand:
    Wie schon erwähnt ist Figma ein nutzerfreundliches Tool und du kannst den Umgang mit dem Programm schnell lernen. Aber kennst du das Problem, wenn du in einer großen Gruppe arbeitest und du immer alles hin und her schicken musst, um auf dem aktuellsten Stand zu bleiben? Und dann musst du auf das Dokument deines Gruppenmitglieds warten, um mit deiner Arbeit anfangen zu können. Tja, bei Figma kommt sich bei einer Gruppenarbeit keiner mehr in die Quere, denn jeder kann an seinem Gerät in der gemeinsamen Datei arbeiten! Wir finden das großartig, denn so kann jeder die Schritte des anderen verfolgen und dementsprechend seine Arbeit anpassen. Somit musst du nicht mehr auf die anderen warten, bis du mit deiner Aufgabe anfangen kannst.
  3. Verknüpfungen:
    Jetzt fragst du dich sicherlich was Figma nicht kann? Figma ist ein Tool für die interaktive Gestaltung von Screens, hat aber auch seine Schwächen. Diese umgeht Figma mit Verknüpfungen zu anderen Tools, wie Sketch oder Photoshop. So kannst du ganz leicht Funktionen von anderen Programmen über Figma verwenden.
  4. Für jeden und zu jeder Zeit verfügbar:
    Du verspürst mitten in der Nacht den Drang, an deinen Screens weiterzuarbeiten, aber dein Gerät liegt auf der Arbeit? Mit Figma kannst zu jederzeit und überall auf deine Dateien zugreifen, solange du einen Internetzugang und deine Zugangsdaten hast.
  5. Immer aktuell sein:
    Das lästige Problem mit der Aktualität der Dateien ist mit Figma Geschichte. Kein ständiges Fragen mehr, welche Version die aktuellste ist, denn es gibt nur noch die eine Version, die online ist! Auch das selbstständige Speichern von Figma erleichtert deine Arbeit und Ergebnisse können nicht mehr verloren gehen. Perfekt, oder?!

Prototype, User Journey – Was genau ist das?

Ein Klickdummy wird für ein Projekt erarbeitet
Du kannst einen Prototype erstellen, um die Funktionen und den Sinn von Interaktionsmodulen deiner zukünftigen App zu zeigen.  ©artursfoto – stock.adobe.com

Einen Prototype benötigst du dann, wenn du Funktionen und Sinn von bestimmten Buttons und Interaktionsmodulen zeigen möchtest. Du kannst einen Klickdummy auch für die Darstellung der User Journey, also der Weg, den der Nutzer in deiner App oder auf deiner Webseite beschreiten soll, zeigen[2].
Sowas ist dann nützlich, wenn du zum Beispiel die Screens  deinem Auftraggeber vorstellen möchtest. Mit einem Klickdummy kann sich der Auftraggeber besser vorstellen, welche Funktionen ein Button auslöst, wenn der Nutzer darauf klickt. Außerdem ist so ein Prototype auch dann sinnvoll, wenn du deine Logik der User Experience überprüfen möchtest. Denn es kann schon mal vorkommen, dass man zum Beispiel vergisst, einen Zurück-Button einzubauen und der Nutzer nicht mehr den Weg nach Hause – also zur Home Seite – findet.

Tutorial: Wie erstelle ich einen Prototype in Figma?

Jetzt fragst du dich wie das gehen soll? Kein Problem, zu Beginn musst du dafür die Figma Datei öffnen. Wenn  du dort noch keine Screens angelegt hast, machst du das jetzt erst einmal.  Du wirst die Screens benötigen, welche du anschließend miteinander zu einem Prototype verbinden möchtest.

Schritt 1:

Hast du die Screenshots angelegt? Falls du mit ja antwortest, klickst du einfach oben rechts auf das Symbol Prototype. Du weißt nicht genau wo? Siehst du den orangen Pfeil im Screenshot? Er zeigt dir genau den Bereich, den du auswählen solltest. Der Prototype Bereich öffnet sich anschließend nach der Auswahl rechts in Figma (Schritt 1).

Prototype erstellen
Schritt 1: Klicke oben rechts auf Prototype (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 2:

Jetzt klickst du  auf das gewünschte Objekt, also die Stelle, wo der Nutzer hinklicken wird (Schritt 2).

Prototype erstellen über Figma
Schritt 2: Wähle das gewünschte Objekt aus (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 3:

Nun siehst du um das ausgewählte Objekt herum den Umriss eines blauen Vierecks. Klicke auf den Punkt, der sich auf der rechten Kante des Vierecks befindet und halte dabei deine Maustaste gedrückt. Ziehe nun deine Maus auf den nächsten Screen, der danach angezeigt werden soll. Jetzt kannst du einen blauen Pfeil sehen, der von dem ausgewählten Objekt auf den nächsten Screen zeigt (Schritt 3).

Prototype erstellen
Schritt 3: Der blaue Pfeil zeigt auf den nächsten Screen Kalender. Jetzt sind die Screens miteinander verbunden (zum Vergrößern anklicken) ©Voigt; Selitski

In dem von uns dargestellten Beispiel, wählten wir die App Kalender von dem Screen Startscreen aus. Die Kalenderapp soll sich nun bei einem Klick oder Touch mit dem Finger öffnen, dies zeigt jetzt der blaue Pfeil, welcher auf den nächsten Screen Kalender zeigt.

Auf diese Art und Weise kannst du nun weitere Screens mit den vorherigen verbinden und so die User Journey des Nutzers in deiner App oder Webseite darstellen. Genauso kannst du ganz schnell und einfach einen Prototype in Figma erstellen!

Schritt 4:

Pass dabei auf, dass du die richtigen Objekte mit den richtigen Screens zusammenführst. Sodass der Prototype die richtige, und von dir gewünschte, Reihenfolge anzeigt. Um die richtige Reihenfolge zu kontrollieren, kannst du dich an den blauen Pfeilen orientieren (Schritt 4).

Prototype erstellen
Schritt 4: Kontrolliere die Reihenfolge deines Prototypes anhand der blauen Pfeile (zum Vergrößern anklicken) ©Voigt; Selitski

In unserem Beispiel zeigen wir dir, dass wir vom Startscreen anfangen und auf das App-Symbol des Kalenders drücken. Daraufhin öffnet sich der Kalender, jetzt wollen wir einen Kalendereintrag hinzufügen. Dafür drücken wir auf das runde Plus-Icon und der Kalendereintrag öffnet sich.

Schritt 5:

Wenn du alle Schritte erfolgreich erledigt hast und die Pfeile soweit stimmen, ist es an der Zeit, den Klickdummy zu starten. Dafür klickst du einfach oben links, bei dem ersten Screen, auf das blaue Viereck mit dem weißen Dreieck (Schritt 5).

Prototype erstellen - Schritt 5
Schritt 5:  Klick nun oben links auf das blaue Viereck (zum Vergrößern anklicken) ©Voigt; Selitski

Daraufhin öffnet sich in einer neuen Datei der, von dir erstellte, Prototype. Jetzt kannst du auf die Objekte klicken, die du zuvor ausgewählt hast. Wenn daraufhin der nächste angezeigte Screen der Richtige ist, stimmt deine User Journey überein und der Prototype ist bereit für die Vorstellung bei deinem Auftraggeber!

Prototype erstellen – Alle Schritte auf einem Blick

  1. Klicke auf Prototype oben rechts bei den Werkzeugtools.
  2. Wähle das gewünschte Objekt, welches du in dem Prototype anklicken möchtest.
  3. Klicke auf den Punkt innerhalb des blauen Vierecks und ziehe diesen zum gewünschten Screen.
  4. Wiederhole jetzt die gleichen Schritte (Schritt 2) für die nächsten Screens.
  5. Klicke oben rechts auf den Pfeil, um den Prototype zu starten.

Etwas hat nicht geklappt, oder hast du vielleicht einen Schritt vergessen? Keine Panik! Im folgenden Video Prototype / Klickdummy über Figma erstellen zeigen wir dir, die einzelnen Schritte per Desktopaufnahme.

Das Prototype-Testing mit Figma Mirror

Du kannst den Klickdummy und die User Journey auch mit der App Figma Mirror testen. Dies bringt dir den Vorteil, dass du deine erstellten Screens auch auf deinem Smartphone sehen kannst. So kannst du das Look and Feel deiner Screens auf deinem Smartphone bekommen. Auch die Größe von deinen Objekten und Texten kannst du so überprüfen.

Dafür brauchst du nur Figma Mirror aus dem Play Store oder dem App Store auf dein Smartphone/Tablet herunterladen. Anschließend meldest du dich mit deinen gewohnten Daten aus Figma an. Zu guter Letzt klickst du in deiner Arbeitsmappe auf den Startscreen deines Prototypes, dieser wird dir nun auf deinem Smartphone angezeigt. Jetzt kannst du auf deine ausgewählten Objekte tippen und so überprüfen, ob der darauffolgende Screen der Gewünschte ist und ob die User Journey mit der gezeigten Reihenfolge übereinstimmt.

Ein Tipp von uns: Wenn du die User Journey von einer App darstellen möchtest, nimm am besten dafür dein Smartphone. Möchtest du  dir aber eine Webseite anschauen, welche noch nicht responsiv ist, verwende dafür lieber die App auf einem Tablet.

Viel Erfolg!

great user experience
Mit einer exzellenten User Experience hast du auch zufriedene Nutzer ©blacksalmon – stock.adobe.com

Wir hoffen, dass wir dir mit der Anleitung für die Erstellung eines Prototypes mit Figma helfen konnten und du damit deine User Journey darstellen kannst!


Quellen

Auf die [Hochzahl] klicken, um zum zugehörigen Absatz zurückzukehren.

1 Vgl. Ornella (2018): Designen mit vier Händen: 5 Gründe warum du Figma brauchst. Online unter https://www.dieproduktmacher.com/blog/designen-mit-vier-haenden-5-gruende-warum-du-figma-brauchst [Abruf am 06.06.2020]

2 Vgl. usability.de (o. J.): User Experience ganzheitlich verstehen und optimieren. Online unter https://www.usability.de/leistungen/methoden/user-journey-mapping.html [Abruf am 06.06.2020]


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

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

Business Intelligence – Was ist das eigentlich?

Beitragsbild

Autor*in: Nick Jäger


Dir sagt es vielleicht nichts, aber Business Intelligence kann dich retten!

Das Scenario

Dein bester Freund/deine beste Freundin und du führen ein Unternehmen. Alles läuft gut. Der Umsatz stimmt, eure Angestellten sind klasse und du kannst sogar 3 mal im Jahr nach Malle fliegen. Doch dann kommt der Tag, an dem alles kippt.
Es trifft euch wie der Schlag!

Wie ein Schlag in das Gesicht - Geschäftsführung ohne Business Intelligence
Quelle: gifimage.net

Die Einnahmen brechen zusammen, die Kunden sind unzufrieden und der Kaffee im Büro schmeckt nach Fuß. Was ist passiert?

Nach einem Jahr bergauf, kam das Tal. Und das war tief. Euch war nicht bewusst, dass ein bisschen Nachdenken hilfreich sein könnte. Ihr habt den Überblick über euer Unternehmen verloren und alle eure Entscheidungen nach dem Erfolg eures Kick-offs waren Grütze.

Doch das muss nicht sein!

Auch wenn ihr nicht die intelligentesten seid, können es immerhin Eure Methoden sein. Business Intelligence (BI) ist das Stichwort. Doch was ist das und wie funktioniert das?

Business Intelligence in 6 Sätzen

Geschäftsanalytik – wie es auf deutsch heißt – ist eine technische und betriebswirtschaftliche Methode zur Entscheidungsfindung. Es ist die erweiterte Analyse des Unternehmens und seines Umfelds. Diese ist in den meisten Fällen von Tools gestützt. Das Ziel dabei ist “Wissensfindung” oder auch “Knowledge Discovery”.[ 1 ] Denn bei diesen Analysen generierst du Wissen. Nicht nur fallspezifisch, sondern über dein ganzes Unternehmen und darüber hinaus.

Warum genau ist Business Intelligence nun so wichtig?

Um es kurz zu beantworten: BI-Tools können viel mehr gleichzeitig beachten, als du es jemals könntest.

Die längere Antwort:
Entscheidungen zu treffen ist keine leichte Aufgabe. Es ist schwierig. Aufgrund deines Bauchgefühls oder in Anbetracht weniger Faktoren diese zu fällen, ist gefährlich. Eine umfassende Analyse lohnt sich.

Zunächst scheint der Aufwand enorm. Ein Business Intelligence-Tool zu finden, zu bezahlen, aufzusetzen und zu pflegen kostet Zeit und Geld. – Das, was ihr gerade überhaupt nicht habt. – Aber sobald es läuft, kann es euch in so gut wie allen Bereichen helfen.
Es wird euch ermöglicht durch komplexe Zusammenhänge durchzusteigen. Und nachdem ihr diese verstanden habt, könnt ihr nicht nur reaktiv, sondern auch proaktiv handeln.[ 2 ]

Nicht überzeugt? Dann schau mal bei BI-SURVEY.com vorbei – vorsicht Englisch! Dort wird dir der Nutzen auf dem Silbertablett präsentiert.

Befragung zum Nutzen von Business intelligence-Tools in Unternehmen
Befragung zum Nutzen von Business intelligence-Tools in Unternehmen | Quelle: BARC (Business Application Research Center)

Die Grundlagen von Business Intelligence

Vier Schritte trennen Dich und deinen Kumpel/deine Kumpeline vom erneuten Erfolg.

Wie Du sehen kannst, hat BI viel mit Daten zu tun. Doch keine Angst, viel Arbeit kann dir abgenommen werden.

Daten Sammeln und aufbewahren

Grundlage für jede Analyse sind Daten. So ist es auch bei der Geschäftsanalytik. Je nach Ziel deiner Analyse brauchst du sowohl interne, als auch externe, Daten.
Bevor Ihr also mit Analysen beginnt, heißt es sammeln, sammeln und noch mehr sammeln!

Daten sammeln
Quelle: gifimage.net

Natürlich sammelt Ihr nur Daten, die euer Unternehmen oder euren Markt betreffen. Aber lasst euch nicht dazwischen funken! Denn Grundsatz ist: Je mehr Daten Ihr sammelt, desto mehr könnt Ihr am Ende auswerten.
Wenn Ihr Daten(-quellen) habt, müssen diese natürlich auch bewahrt werden. Dafür eignen sich Datenbanken beziehungsweise ein Data Warehouse. Sobald ihr genügend Daten zur Verfügung habt, könnt Ihr mit dem nächsten Schritt beginnen.

Business Intelligence-Tool wählen und Daten aufbereiten

Je mehr ihr euch mit einem bestimmten Business Intelligence-Tool auseinander setzt, desto schneller könnt ihr euch in die Arbeit mit diesem stürzen. Falls ihr bei eurer Entscheidung ein bisschen Hilfe braucht schaut bei Gartner vorbei! Deren jährlicher Report “Gartner Magic Quadrant for Analytics and Business Intelligence Platforms” bietet euch einen umfassenden Überblick über den Markt.

Gartner Magic Quadrant für Analytics und Business Intelligence
Gartner Magic Quadrant für Analytics und Business Intelligence 2020 | Quelle: Gartner (Februar 2020)

Damit ihr die gesammelten Daten verwenden könnt, müsst ihr diese nun aufbereiten. Entweder ihr nutzt dazu das BI-Tool, für welches ihr euch entschieden habt oder ihr macht dies direkt an den Daten selbst. Letzteres kann jedoch schwierig sein. Insofern ihr also nicht darauf besteht an euren Daten direkt rumzupfuschen, lasst es!

Geschäftsrelevante Daten darstellen

Jetzt gehts ans eingemachte! Bevor ihr eure ersten qualifizierten Entscheidungen treffen könnt, müsst ihr die gesammelten und aufbereiteten Daten in einen Kontext bringen. Da kommt das Tool, aber auch euer Gehirnschmalz, ins Spiel. Auch wenn das Tool euch vieles abnimmt, müsst ihr überlegen, welche Verbindungen könnten für euch relevant sein und welche nicht. Das Tool stellt euch dann bspw. dar, wie stark die Verbindungen wirklich sind.
Was hängt zusammen? Was beeinflusst was? Es gibt Unmengen an Möglichkeiten der Darstellung. Probiert euch aus!
Indem ihr mit dem Tool arbeitet, gewinnt ihr an Verständnis für euer Unternehmen bzw. den Markt.

Und dann habt ihr es! Nachdem ihr nun Monate euer Unternehmen, die Mitarbeiter und den Markt analysiert habt, habt ihr es raus.

Euer Produkt ist Schrott!

Ihr realisiert, dass euer Produkt Schrott ist
Quelle: gifimage.net

Es besser machen, als es im Moment ist!

Nun heißt es: Alles besser machen. Das BI-Tool zaubert euch jetzt zwar keine Gelddruckmaschine ins Büro, aber es zeigt euch die Effektivität jeder Änderung im Detail.
Ihr kauft besseren Kaffee? Die Mitarbeiter werden produktiver. Ihr klaut Ideen bei der Konkurrenz und verkauft diese als eure? Eure Umsätze gehen hoch und die der Konkurrenz runter. Ihr landet im Gefängnis wegen Betriebsspionage? Doof, aber weil ihr das BI-Tool habt, kann sogar der Praktikant euer Unternehmen weiterführen.
Also was spricht jetzt noch gegen Business Intelligence in eurem Unternehmen?

Fazit

Natürlich ist das alles nicht so einfach, wie ich es jetzt dargestellt habe. Damit Business Intelligence wirklich gut funktioniert muss viel getan werden. Bis die oben aufgeführten Schritte alle durchgearbeitet sind, ist es ein weiter Weg.
Es dauert Monate, wenn nicht Jahre, bis Auswertungen über die Aussagekraft von simplen Analysen bzw. einem Blick auf eine Excel-Tabelle hinausgehen.

Doch es ist eine Investition in die Zukunft!

Die Zukunft mit BI
Quelle: makeameme.org

Je länger ihr mit einem solchem Tool arbeitet, desto umfassender wird der Nutzen.
Entscheidungen können, aufgrund von Daten, begründet werden. Der Überblick über alle Geschäftsbereiche wird zusammengeführt. Und ihr gewinnt immer mehr Nutzen aus den Daten, die in eurem Unternehmen über Jahre hinweg gesammelt wurden, aber nie genauer angesehen wurden.

Denn:

“There is significant hidden value locked away in corporate databases waiting to be discovered and exploited.”
– Loshin (2003, S.1)[ 3 ]

Quellen

Auf die [Hochzahl] klicken, um zum zugehörigen Absatz zurückzukehren.

[ 1 ] Klumbies, Hans (2019): Datengrundlagen für Entscheidungen schaffen. Online unter: https://www.mittelstandswiki.de/wissen/Geschäftsanalytik [Abruf am 21.07.2020]

[ 2 ] TABLEAU SOFTWARE, LLC (o.J.): Was ist Business Intelligence (BI)? Online unter: https://www.tableau.com/de-de/learn/articles/what-is-business-intelligence [Abruf am 23.07.2020]

[ 3 ] Loshin, David (2003) (Morgan Kaufmann Publishers), Business Intelligence: The Savvy Manager’s Guide, Getting Onboard with Emerging IT, Seite 1.


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.