KI-Bots und Meinungsmache in Sozialen Medien

Autor*in: DB

Inhaltsverzeichnis

  • Ein tragisches Beispiel
  • Zusammenhang
  • Ferngesteuerte Demonstrationen
  • Der Hass nimmt zu!
  • Einen Blick in die Vergangenheit
  • Bot-Produktion
  • Wie erkenne ich einen Bot?

Ein tragisches Beispiel

In einem TikTok-Video berichtet eine etwa 30-jährige Frau von einem tragischen Vorfall.

Ein 16 Jahre alter Junge namens Daniel engagierte sich ehrenamtlich in einer Flüchtlingsunterkunft. Als Daniel jedoch in Gegenwart der ukrainischen Flüchtlinge russisch sprach, wurden einige von ihnen aggressiv und schlugen den Jungen zusammen. Dieser starb an seinen Verletzungen. Die Täter wurden straffrei zurück in ihre Unterkunft geschickt.

Die Frau berichtete in Ihrem Video den Vorfall sehr detailliert und emotional. Sie brach in Tränen aus und verstand nicht, wie so etwas passieren konnte.

Was geht in Ihnen vor, wenn Sie das lesen? Verwirrung? Wut? Mitleid? Es ist ganz normal, dass man einem so aufrichtigen Statement zunächst erst einmal Glauben schenkt und nicht weiter hinterfragt.

Die Rede ist von dem Mord in Euskirchen, der nie stattgefunden hat.

Die Bundespolizei NRW bezieht zeitnah Stellung zum geschilderten Vorfall.

Zahlreiche Nachrichtenagenturen berichten von dieser Falschmeldung, wie z.B. die Frankfurter Allgemeine[1], t-online[2] und der ZDF[3].

Zusammenhang

Doch was hat der Gefühlsausbruch der TikTokerin mit KI-Bots zu tun?

Die Dame, die die o.g. Falschmeldung verbreitet hat, erklärte, sie habe diese Information über mehrere Ecken erfahren und hätte selbst fest geglaubt, dass es wahr sei. Sie hat also in erster Linie darauf vertraut, dass eine Meldung, die Freunde von ihr teilten, wahr sein müsste und deshalb nicht auf ihren Wahrheitsgehalt überprüft werden müsse.

Ferngesteuerte Demonstrationen

Am 21. Mai 2016 fand eine größere Demonstration gegen die Islamisierung in Texas statt. Diese wurde von der Facebook-Gruppe “Heart of Texas” organisiert. Dem entgegen organisierte die Gruppe “United Muslims of America“ einen Gegenprotest[4].

Durch diese Positionierung wurde das politische Augenmerk auf das Thema Muslime gelenkt und andere Themen verschwanden aus dem Fokus.

Aber ausgelöst und organisiert wurden die Demos pro und kontra Muslime von Menschen, bzw. Rechnern, die in Petersburg stehen. Es wurde keiner der Organisatoren vor Ort gesichtet, weil alles inszeniert war. 

Es versammelten sich echte Menschen, weil für sie relevante Themen angesprochen, verschärft und anschließend durch Social-Bots kommentiert, geteilt und geliked werden. So werden sie gesehen und je mehr Interaktion stattfindet, desto offizieller kommt die Information beim Konsumenten an.

Der Hass nimmt zu!

(Landesanstalt für Medien Nordrhein-Westfalen. (4. Juli, 2018). Wie häufig haben Sie persönlich schon Hassrede bzw. Hasskommentare im Internet gesehen? [Graph]. In Statista. Zugriff am 31. Januar 2023, von https://de.statista.com/statistik/daten/studie/808263/umfrage/umfrage-zur-wahrnehmungshaeufigkeit-von-hasskommentaren-im-internet-nach-alter/ )[5]

Hasskommentare sind ebenfalls ein fester Bestandteil von Social-Bots. Oft sind diese sehr polarisiert, wenig kreativ und schnell verfasst. Ihr Ziel ist es, Vertreter einer ungeteilten Meinung zum Schweigen zu bringen. Selbst vor Morddrohungen wird nicht zurückgeschreckt.

Einen Blick in die Vergangeneit

Es ist in Ordnung, anderer Meinung zu sein. Aber warum gibt sich jemand die Mühe, mehrere Menschen zu beschäftigen, damit sie ausgewählte Nachrichten teilen, oder gegen bestimmte Personen anzugehen?

Häufig wird bei den organisierten Troll-Aktionen auch von Propaganda gesprochen.[6]

So ähnlich wurde bereits der zweite Weltkrieg eingeläutet. Durch Falschmeldungen hatte man glauben lassen, dass Polen Deutschland angegriffen habe und dass der erste Angriff lediglich eine Gegenmaßnahme sei .[7] In der damaligen Zeit konnte man noch nicht so einfach wie heute durch das Internet überprüfen, wie hoch der Wahrheitsgehalt einer Nachricht sein kann. Jedoch ist es heute umso leichter eine Falschmeldung zu verbreiten und jeder Rechercheaufwand ist eben mit einem Aufwand verbunden.

Doch das Ziel solcher Aktionen wird mit einem Vergleich klar. Der Hintergrund von Fake-News ist die Lenkung von politischen Positionen.

Bot-Produktion

Nun wurden in diesem Artikel oft die “Social-Bots” genannt. Aber woher kommen diese Social Bots und wie viel Mensch und wie viel KI steckt dahinter?

Zunächst werden Bots von einem Menschen erstellt und mit verschiedenen Accounts versorgt. Ein Algorithmus mit typischen wenn-dann-Abfolgen lässt diese dann auf Sozialen Netzwerken interagieren. Bestimmte Wörter triggern diese Bots zu vorgeschrieben Ineratkionen, wie einem Kommentar, einem Like oder das Teilen bestimmter Beiträge.[8]

Nicht alle werden dafür genutzt, Meinungen zu manipulieren. Viel häufiger werden Social-Bots zu Marketing-Zwecken genutzt. Die einfachste Form ist, einen Anbieter entsprechender Bots dafür zu bezahlen, um eine erste Followerschaft zusammenzustellen. Das heißt, dass mehrere Hundert Fake-Accounts einem Unternehmen folgen und mit Beiträgen interagieren. Diese Interaktion ist zwar nicht komplex, reicht aber, um eine gewisse Nachfrage und Bekanntheit vorzugaukeln und den Algorithmus der Plattform zu triggern, wodurch die eigenen Beiträge öfter von verschiedenen Menschen gesehen werden.

Wie erkenne ich einen Bot?

Ein Erfolgsrezept existiert leider nicht.

Aber obwohl man es niemals wirklich wissen kann, gibt es ein paar Anhaltspunkte, an denen man sich orientieren kann. Wie allgemein ist die Account-Beschreibung gehalten und wie neu ist der betreffende Account? Bei prominenten Persönlichkeiten gibt es Merkmale zur Verifizierung, wie es den blauen Haken bis vor kurzem bei Twitter gab. Wenn ein Account neu ist und sehr viel Zeit nur mit dem Verfassen von Kommentaren und dem Teilen von Beiträgen verbringt, ist es ein weiteres Indiz, dass ein Social-Bot dahinterstecken könnte. Manchmal ist ein Antworttext in sekundenschnelle Geschrieben, obwohl man so aktiv ist und Lesen und Verfassen i.d.R. mehr Zeit in Anspruch nehmen müsste. Zudem scheitert ein Bot, wenn eine Unterhaltung komplexer wird, da die geschriebenen Programme nicht jede Eventualität, die ein Gespräch einschlagen kann, berücksichtigen.[9]

Künstliche Intelligenz in Filmen

Autor*innen: Angelique Pál und Dennis Schmidt


Wie wird die zukünftige Welt aussehen? Das ist eine Frage mit der die Menschheit sich oft auseinandersetzt und die auch in Filmen immer wieder aufgegriffen wird. Häufig spielt dabei Künstliche Intelligenz in Filmen eine Rolle. In vielen Fällen werden Maschinen dargestellt, welche mit Künstlicher Intelligenz oder kurz KI ausgestattet, ihre Schöpfer irgendwann unterwerfen. Aus Science Fiction Filmen sind Roboter dieser Art längst nicht mehr wegzudenken, doch die technischen Voraussetzungen dafür existieren in der realen Welt (noch) nicht.

Inhaltsverzeichnis

 

Künstliche Intelligenz in der Wissenschaft

Im Jahr 1956 wurde der Begriff „Artificial Intelligence“ also Künstliche Intelligenz von einer kleinen Gruppe Wissenschaftlern, die sich am Dartmouth College in den USA trafen, eingeführt. Dieser Workshop, der auch als „Dartmouth Conference“ bezeichnet wird, gilt als die Geburtsstunde der KI (vgl. Siekmann 1994, S. 20). Doch schon fünf Jahre vorher hat Alan Turing einen Test entwickelt, nachdem beurteilt werden kann, ob ein Computersystem „intelligent“ ist oder nicht. Bei diesem Test, den Turing „The Imitation Game“ nannte, wird mit Hilfe natürlicher Sprache getestet, ob ein Computersystem so kommunizieren kann, dass es von einem Menschen nicht mehr zu unterscheiden ist (vgl. Manhart 2022).

Alan Turing (ca. 1938)

Die Geschichte der Künstlichen Intelligenz in Medien

Auch schon bevor es die uns heute bekannte Künstliche Intelligenz gab, wurde sich in früheren Medien mit dem Thema der lebendigen Maschine auseinandergesetzt. So wurde der Begriff der Maschine im deutschsprachigen Raum schon etwa seit dem 17. Jahrhundert verwendet und findet sich so auch im Deutschen Wörterbuch der Brüder Grimm aus dieser Zeit. Hier wurde die Maschine noch als etwas Lebloses, synthetisches mit einem Artefakten-Charakter beschrieben (vgl. Brössel 2021, S. 28). Außerdem befindet sich eine frühe Darstellung von künstlicher Intelligenz auch in dem Werk „Die Automaten“ von E.T.A Hoffmann aus dem Jahr 1814 , in dem eine mechanische Puppe beginnt Fragen von Menschen zu beantworten (vgl. Brössel 2021, S. 27).

Der Beginn von Künstlicher Intelligenz in Filmen

Mit der Erfindung von Filmen verlagerte sich das Thema der lebendigen Maschine auch immer mehr ins Kino und Fernsehen. Eine frühe Darstellung von Künstlicher Intelligenz in Filmen ist z. B. die Verfilmung des Science-Fiction-Romans Metropolis. Der gleichnamige Stummfilm erschien im Jahre 1927 und zeigt eine düstere Zukunft, in der Menschen von Androiden unterdrückt werden. Für den damaligen Stand der Filmtechnik war der Film visuell sehr eindrucksvoll und zeigte unter anderen Aufnahmen von riesigen Häuserschluchten, großen Maschinen und fortschrittlichen Verkehrsmitteln. Auch beeinflusste Metropolis spätere Filme wie Blade Runner oder Matrix stark (vgl. Schreiner 2022).

Trailer zu Metropolis (1927)

Terminator und Ex Machina

Eine Filmreihe, die sich mit einer düsteren Zukunft für die Menschheit auseinandergesetzt, ist Terminator. Der große Erfolg der Terminator Filme prägt bis heute unser Bild von künstlicher Intelligenz und Robotern. Bei der in den Terminator Filmen dargestellten KI handelt es sich stets um eine bösartige Super-KI und Killer-Roboter, die als einziges Ziel die Auslöschung der Menschheit haben (vgl. Schreiner 2022). Mit aktuell 6 Filmen, welche in den Jahren 1984 bis 2019 entstanden sind, gehört die Terminator Filmreihe zu einer der bekanntesten, welche sich mit den negativen Seiten und Folgen von Künstlicher Intelligenz auseinandersetzt. Auch der Film Ex Machina aus dem Jahr 2015 behandelt das Thema der künstlichen Intelligenz und setzt sich unter anderem mit der Frage auseinander, was Bewusstsein ist und ob eine Maschine ein Bewusstsein haben kann (vgl. Schreiner 2022).
Eine Besonderheit von Ex Machina ist hierbei, dass die Künstliche Intelligenz in diesen Film nicht primär als Böse dargestellt wird, wie es z.B. in Terminator und vielen anderen Filmen der Fall ist. Sondern das in diesem Werk der Zuschauer dazu ermutigt wird, über das menschliche Wesen, menschliche Züge und die Frage, was einen Menschen von einer Künstlichen Intelligenz unterscheidet, nachzudenken (vgl. Mehnert 2016).

Filme über Künstliche Intelligenz (KI)

  • Blade Runner (1982)
  • Tron (1982)
  • Terminator (1984)
  • Matrix (1999)
  • I,Robot (2004)
  • Transcendence (2014)
  • Ex Machina (2014)
  • Avengers: Age of Ultron (2015)
  • Blade Runner 2049 (2017)
  • I am mother (2019)
  • Free Guy (2021)
  • Ich bin dein Mensch (2021)

 

Weltherrschaft der Maschinen?

Künstliche Intelligenz in Filmen begegnet uns häufig, aber in den seltensten Fällen wird die Handlung des Films durch sie positiv beeinflusst. Entweder sind sie nur „kindliche Maschinen“ als Nebendarsteller, wie z.B. C-3PO oder aber die Künstliche Intelligenz unterjocht die Menschheit und strebt die Weltherrschaft an, wie die Superintelligenz in „I, Robot“. Doch trotz all der Forschung auf dem Gebiet der KI sind solche, in ihrem Handeln flexible Maschinen, nach heutigem Stand, nicht realistisch (vgl. Lenzen 2020, S.119).

KIs werden in hochspezialisierten Gebieten eingesetzt, in denen sie die Leistung, die ein Mensch erbringen könnte, teilweise heute schon übertreffen. Diese Art Künstliche Intelligenz nennt man schwache KI, da sie nur für eine bestimmte Aufgabe erschaffen wurde. Sobald man dieser KI komplexere Aufgaben stellt, würde sie scheitern. Im Gegensatz zu dieser schwachen KI gibt es noch die starke KI, die ähnlich wie ein Mensch, flexibel auf unterschiedliche Situationen reagieren kann (vgl. zu diesem Abschnitt Volland 2018, S.14).

Doch starke Künstliche Intelligenz existiert bis heute (noch) nicht. Es gibt die unterschiedlichsten Aussagen von Wissenschaftlern, ob und wann diese starke Künstliche Intelligenz tatsächlich entwickelt werden könnte. Dabei schwanken die Aussagen zwischen 20 und 200 Jahren oder auch nie (vgl. Lenzen 2020, S. 120). Zumindest können wir starke Künstliche Intelligenz in Filmen weiterhin bewundern. Im folgenden Abschnitt könnt ihr euer Wissen über KIs in Filmen testen. Viel Spaß!

Quiz

Quellen

Brössel, Stephan (2021): Die Anthropologie der Goethezeit und Automaten:
Ein diskursanalytischer Aufriss und eine exemplarische Analyse
von E. T. A. Hoffmanns Die Automate (1814). In: Irsigler, Ingo u.a. (Hg.): Roboter, Künstliche Intelligenz und Transhumanismus in Literatur, Film und anderen Medien. Heidelberg: Universitätsverlag Winter, S. 27 – 44

Lenzen, Manuela (2020): Künstliche Intelligenz. Fakten, Chancen, Risiken. Originalausgabe. München: C.H.Beck

Manhart, Klaus (2022): Eine kleine Geschichte der Künstlichen Intelligenz. Online unter https://www.computerwoche.de/a/eine-kleine-geschichte-der-kuenstlichen-intelligenz,3330537,2 [Abruf am 15.12.22]

Mehnert, Ann-Kristin (2016): „Ex Machina“ (2015). Philosophische Betrachtungen über das (Selbst-) Bewusstsein im Spannungsfeld zwischen Mensch und Maschine. Online unter https://www.grin.com/document/322981 [Abruf am 26.12.2022]

Schreiner, Maximilian (2022): Filme über Künstliche Intelligenz: Sieben Meilensteine der KI-Filmgeschichte. Online unter https://the-decoder.de/beste-filme-kuenstliche-intelligenz/ [Abruf am 04.01.2023]

Siekmann, Jörg (1994): Künstliche Intelligenz: Von den Anfängen in die Zukunft. In: Cryanek, Günther; Coy, Wolfgang (Hg.): Die maschinelle Kunst des Denkens. Braunschweig: Vieweg, S. 11-41

Volland, Holger (2018): Die kreative Macht der Maschinen. Warum Künstliche Intelligenzen bestimmen, was wir morgen fühlen und denken. 1. Auflage. Weinheim: Beltz

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.

Tutorial: Ein mobiles Hamburger Menü

Hamburger Menü

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten „HOME“, „ABOUT“, „BLOG“ und „CONTACT“ sind zu sehen. Rechts neben dem Menüpunkt „ABOUT“ ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML
<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>
CSS
.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}
JavaScript
$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben  0deg und  -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

Tutorial: Registrierungs- und Loginformular mit jQuery

Login und Registrierungsformular

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt,  welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine „echte“ Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.