Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Gestalttheorie für UX Design

Wie wird Gestalttheorie im UX Design angewandt? Ein zwei sprachiges Erklärvideo über (Gestalt-)Psychologie als Basis für UX-Design. Wir erklären in diesem Video die Bedeutung der Gestalt-Theorie als wissenschaftliche Disziplin und zwei Gestaltgesetze mit ihrer Anwendung im UX-Design. Eine humorvolle Rahmenhandlung mit einem fiktivem und einem semi-fiktiven Charakter soll den Zugang erleichtern.

Deutsche Version des Erklärvideos

Persische Version des Erklärvideos

Aufgabe

Ziel des Kurses MotionStandard.06: Visual Explainer war es, entweder ein Erklärvideos in Form eines VideoEssays oder einer schriftlichen Arbeit analytisch zu betrachten oder ein Erklärvideo für ein frei gewähltes Thema zu konzipieren und zu produzieren.

Als Neueinsteiger im Bereich Motion-Graphics haben wir uns für die zweite Variante entschieden!

Motivation

Bei der Wahl des Themas für unser Erklärvideo haben wir uns für die Gestaltpsychologie entschieden. Zum einen sind wir generell beide an der Beziehung zwischen Design und Psychologie interessiert, zum anderen erschien uns die kognitive Psychologie und die Gestalttheorie im speziellen als wichtige Grundlage für den (UX-)Designprozess. In unserem Design verwenden wir oft verschiedene psychologische Prinzipien, ohne uns dessen bewusst zu sein. Doch mit dem bewussten Einsatz der Gestaltgesetze kann man Benutzererlebnisse gestalten, die wirklich zu den Nutzern passen und so seinen Entwurfsprozess optimieren.

Da Hanii aus dem Iran kommt, und wir als Masterstudenten eine erweiterte Leistung erbringen sollten, haben wir uns früh entschieden auch eine persische Version des Videos zu erstellen.

Was ist Gestalttheorie?

Die Gestalttheorie wurde Anfang des 20. Jahrhunderts von Max Wertheimer begründet. Sehr pointiert lassen sich die Forschungsergebnisse mit folgendem Zitat von Kurt Koffka zusammenfassen:

„Das Ganze ist mehr als die Summe seiner Teilen.“

Dieses dient auch im Erklärvideo als zentrale These zur Zusammenfassung der Erkenntnisse der Gestalttheorie. Doch erst durch die klar formulierten Gestaltgesetze konnte die Gestalttheorie ihre große Bekanntheit und Bedeutung in verschiedenen didaktischen und gestalterischen Kontexten erlangen. Im Video werden zwei der wichtigsten Gestaltgesetze erläutert und ihre konkreten Anwendung im UX-Design beispielhaft aufgezeigt: - Das Gesetz der Nähe - Das Gesetz der Geschlossenheit

A.jpgA.jpg

Aber was wichtig ist, die Verwendung dieser Informationen.

Konzept

Bei der Recherche zum Thema Gestalttheorie haben wir den Eindruck gewonnen, dass dieses grundlegendes Thema für Designer und Medienrezipienten bisher als Erklärvideo nicht optimal umgesetzt wurde. Neben der Erklärung der Gestaltgesetze wollten wir auch kurz den Hintergrund der Gestalttheorie beleuchten und vor allem die konkrete Anwendung thematisieren. Um heutigen Ansprüchen der Youtube-Generation zu genügen und möglichst viele Betrachter inhaltlich mitzunehmen, haben wir uns entschieden das Thema als interessantes und lustiges Video umsetzen.

Bei der Konzeption des Videos und dem Entwurf der Illustrationen haben wir versucht die Erkenntnisse über Verarbeitung einzelner visueller Reize durch das Gehirn und die Gestaltgesetze selbst zu verwenden. Für uns war es auch wichtig, alles in einer Geschichte zu erzählen, sodass das Thema einfacher und verständlicher wird. Wir hofften die Zugänglichkeit zum Thema durch Rahmenhandlung und die Charaktere zu erhöhen. Der fiktive Charakter des UX-Designers Peter soll als Identifikationsfigur fungieren, die semi-fiktive Interpretation der Person des Gestaltpsychologen Kurt Koffka übernimmt die Rolle des geduldigen, sympathischen Lehrers. Ein Erzähler führt durch die 3 Akte des Videos mit Problemstellung/Einführung der Charaktere, Hintergrundstory bzw. knappe Einführung in die Gestalttheorie und Problemlösung!

b.jpgb.jpg

Skript

G.jpgG.jpg

Storyboard

E.jpgE.jpg

D.jpgD.jpg

Audio

Sprecher

Um die Rolle der Figur Kurt Koffka als Lehrer zu unterstützen, wollten wir seine Stimme von der des Erzählers unterscheidbar machen und so auch den Bezug zum Charakter stärken. Im Aufnahmeprozess haben wir zunächst versucht mit verstellter Stimme eine ältere Person zu imitieren. Nach Rücksprache mit Herrn Prof. Dufke und der Bereitschaft von Timo Blume einer Sprecherrolle zu übernehmen, haben wir uns dann aber zumindest bei der deutschen Version für seine Interpretation des Charakters Kurt Koffka entschieden. Mangels einer zweiten Sprecherrolle in der persischen Version, spricht hier Hani den gesamten Text mit gleichbleibender Stimme.

Musik

Die Intro-Musik, die mit der DAW Reason erstellt wurde, soll das Thema der Gestalttheorie und das Leitprinzip „Das Ganze ist mehr als die Summer seiner Teile“ musikalisch aufgreifen. Einzelne Töne ergeben einen Cmaj9 Akkord. Die ebenfalls mit Reason erstellte Outro-Musik soll das Intro in Tonart und Instrumentierung zwar aufgreifen, aber die „Partystimmung“ des am Ende glücklichen Charakters Peter in den Vordergrund stellen.

f.jpgf.jpg

Der visuelle Stil

Der visuelle Stil für die Umsetzung des Videos sollte zum Thema passen. Wir haben uns daher für ein reduziertes Design entschieden und hielten Vektorgrafiken für das Thema UX Design und Interfaces für passend und gut umsetzbar.

Quellen

  • https://uxdesign.cc/ux-psychology-go-hand-in-handhow- gestalt-theory-appears-in-ux-design-18b727343da8
  • http://services.informatik.hs-mannheim.de/~kohler/ MMI/1.2_MMI_UX.pdf
  • https://www.guerillagirl.de/2014/02/19/gestalt-theorie- basics-im-ui-design/ -https://www.roland-weigelt.de/downloads/slides/ 20161021_UIUX1.pdf

INSPIRATIONEN: - https://vimeo.com/244965559 - https://www.flaticon.com

X.jpgX.jpg

Ein Projekt von

Fachgruppe

Design Master

Art des Projekts

Studienarbeit im Masterstudium

Betreuung

foto: Prof. Klaus Dufke

Zugehöriger Workspace

MotionStandard.06: Visual Explainer

Entstehungszeitraum

Sommersemester 2018

zusätzliches Material