Was ist User Experience (UX) und warum ist sie wichtig?
User Experience, kurz UX, ist ein ganzheitlicher Ansatz des Erlebnisses eines Nutzers auf einer Website, Webanwendung oder in einer App. Es geht nicht nur darum, ob einem Nutzer eine Seite gefällt oder er schnell zum gewünschten Ziel kommt, sondern vor allem um erlebte Emotionen auf der User Journey durch das Angebot. Spass, Freude und erlebte Einfachheit eines Produktes sind meistens das Ziel einer gelungenen User Experience. Insbesondere für das emotionale Erleben spielt Akustik eine entscheidende Rolle, sie sind wie die Filmmusik der digitalen Anwendungen, provozieren und verbinden das Erlebte mit Gefühlen.
Was ist Klangsynthese?
Mit Klangsynthese ist das Erzeugen natürlicher Klänge oder eine Erzeugung verfremdeter natürlicher Klänge gemeint. Es geht bei der Klangsynthese nicht einfach nur um die digitale Herstellung von Audiosignalen, sondern ganz bestimmter Klangfarben und Frequenzen. Typisch für Klangsynthesen sind die digitale Klangerzeugung von Instrumenten, wie Klavier, Trompete oder auch Schlagzeug, ohne dass die Töne vorab aufgezeichnet wurden.
Mit den richtigen Tönen das User-Erlebnis verbessern
Ton lässt sich schon lange auf Websites einbinden und Audio gehört zusammen mit Bildern zu den ersten Formaten, die im WWW bereits in den 1980ern online gingen. Doch erst seit der Einführung des <audio> Tags in HTML5 wurde Streaming und Wiedergabe von Audio auf eine leichte Art ermöglicht. Zuvor mussten Webentwickler auf Flash oder QuickTime zurückgreifen, was häufig die UX und auch die Websitegeschwindigkeit negativ beeinflusst hat. Doch auch mit dem <audio> Tag stösst man an die Grenze der Umsetzung von kreativen Anforderungen im Audio Bereich. Mit dem Ziel, diese Einschränkung im Web zu überwinden, wurde im Jahr 2011 erstmals das Web Audio API implementiert, welches hochperformant das dynamische Laden, Erzeugen, Bearbeiten und Mischen von Audio-Daten ermöglicht. Tone.js, ein JavaScript Framework basierend auf dem WebAudio API, führt dessen Grundsatz weiter und ergänzt die interaktive Erstellung von Musik durch zusätzliche Features. Nicht nur besitzt die Library eine Vielzahl musikalischer Abstraktionen (z.B. Angaben von zu spielenden Tönen wie “C3” anstatt des gleichbedeutenden Werts in Hertz), sondern ermöglicht auch das Vorplanen musikalischer Ereignisse.
Lies in dem nun folgenden Abschnitt, wie das Prinzip der subtraktiven Synthese mit in tone.js funktioniert. Anschliessend findest du mögliche Anwendungsbereiche, in denen Tone.js in der Webentwicklung eingesetzt werden kann, so dass für Nutzer echte Mehrwerte entstehen.
Was ist subtraktive Synthese?
Um das Prinzip der subtraktiven Synthese zu verstehen, braucht es zunächst einen Blick auf die Grundlagen von Audioerzeugung und -verarbeitung. Um einen Klang zu erzeugen, benötigt man eine Quelle, die periodische Schwingungen im menschlich hörbaren Frequenzbereich ermöglicht. Diese Schwingungen können durch Strom oder digitale Software erzeugt werden. Diese Quelle wird als Oszillator bezeichnet. Um diesen Klang in spielbare Töne zu verwandeln, braucht es ein Input Signal, welches dem Oszillator die Tonhöhe in Hertz vorgibt. Damit der Ton nicht konstant, sondern nur aufgrund eines Ereignisses, z. B. einem Klick auf ein UI-Element, hörbar wird, brauchen wir einen sogenannten Verstärker. Wird das Input Signal während einer bestimmten Zeit durch den Oszillator an einen Verstärker geleitet, ertönt nur dann ein Klang, solange das Signal in dem aktiven Zustand ist.
Zieht ein User beispielsweise ein UI-Element mit einem onmousedown Event von A nach B, wird in diesem Event solange ein Ton abgespielt, bis onmouseup ausgelöst wird.
In dem Audiobeispiel wurde deutlich, dass Start und Ende des Tons noch sehr abrupt sind. Um dem Ton nach Auslösung des Ereignisses einen Klangverlauf zu geben, benötigen wir eine Hüllkurve. Das ist eine Modulation, beziehungsweise ein Mittel zur Klangformung, welche die zeitlich verkörperte Form des ausgelösten Tons bestimmt.
In unserem Beispiel modulieren wir mit der Hüllkurve die Lautstärke. Interagiert der User mit einem Klick auf das UI-Element, steigt die Lautstärke des Tones nun über einen definierten Zeitwert an und flacht ebenso wieder ab, wenn der Klick losgelassen wird. Die Modulation ermöglicht nun ein sorgfältig abgerundetes Tonerlebnis
Um die Klangfarbe der vom Oszillator kreierten Wellenform nach Wunsch zu verändern, fehlt noch der letzte Teil unseres einfachen Synthesizers: Der Filter. Er macht es möglich, gewünschte Frequenzbereiche abzuschwächen, bzw. zu reduzieren, um den Charakter des Klanges für den jeweiligen Anwendungszweck zu formen. In folgendem Beispiel hört man den Einsatz eines Lowpass-Filters, welcher ab 1000Hz alle höheren Frequenzen abschneidet.
Die Erstellung des oben beschriebenen Synthesizer in tone.js sieht wie folgt aus:
Creating the synthesizer described above using tone.js looks like this:
// Instanz eines Oszillators, mit einer Rechteckschwingung der Tonhöhe C#3
let osc = new Tone.OmniOscillator('C#3’, ‘square4’);
// Instanz eines Lowpass Filters mit einer Flankensteilheit von 48dB bei 1000Hz
let filter = new Tone.Filter(1000, 'lowpass', -48);
// Instanz einer Verstärker-Hüllkurve mit vier Modulationswerten für Attack, Decay, Sustain & Release
let amplitudeEnvelope = new Tone.AmplitudeEnvelope(0.1, 0, 5, 0.5);
// Der Oszillator wird mit dem Filter verbunden
osc.connect(this.filter);
// Der Filter wird mit dem Verstärker verbunden, der gleichzeitig auf die Hüllkurven Modulation reagiert
filter.connect(this.amplitudeEnvelope);
Der Oszillator wird via Filter an die Hüllkurve verbunden. Ein separater Verstärker muss hier nicht initiiert werden, da die Hüllkurve bereits mit einem Gain node verbunden ist, das die Lautstärke reguliert. Mit den zwei letzten Zeilen wird der Oszillator gestartet und anschliessend mit der Hüllkurve getriggert, sodass eine C#3 Note der vorgegebenen Rechteckschwingung ertönt.
In der Library von Tone.js stehen einige Standardsynthesizer zur Klangerzeug bereits zur Verfügung, welche nicht jeweils von Grund auf erstellt werden müssen. Ebenfalls können bereits existierende Audio-Daten durch einen Sampler in tone.js eingebunden werden, um von den Bearbeitungsmöglichkeiten des Frameworks profitieren zu können.
Anwendungsbeispiele von Audio bei der User Experience
Das Integrieren von Sound-Effekten bietet einen enormen Vorteil in der Erweiterung der User Experience, da damit dem User eine weitere Dimension von UI-Interaktion zur Verfügung steht. Erhält man als User beispielsweise bei der erfolgreichen Durchführung eines Kaufs nicht nur einen Bestätigungstext, sondern ebenfalls ein während 0.5 Sekunden ausgelöster Akkord in C-Dur, mit einem leichten Reverb Effekt transformiert, erhöht man die positive Erfahrung des Kaufs nicht nur visuell sondern auch auditiv. Solche Einsätze von micro tonalen Elementen können die emotionale Bindung an eine Webseite und entsprechend an die gebotene Dienstleistung fördern.
Storytelling in Corporate Design und Marketing, für Produkte oder bestimmte Navigationen auf Webseiten verbessert nicht nur die Erfahrung eines Webseitenaufrufes, sondern lassen die User auch direkt mit dem ganzheitlichen Image einer Dienstleistung identifizieren.
Dieser Beitrag soll als Anregung dienen, die oft ins Vergessen geratene Sinneswahrnehmung des Hörens bei der Planung und Umsetzung von Webseiten nicht zu vernachlässigen. Sind nämlich audio-visuelle Komponenten auf Webseiten aufeinander abgestimmt, trägt man zu einer verbesserten User Experience bei.
Headerbild von Annie Spratt auf Unsplash