Voice User Interface Guide (vui.guide)
Was ist vui.guide?
vui.guide ist ein Living Style Guide oder eine Musterbibliothek für Sprachbenutzeroberflächen, welche gezielt an Designer * innen gerichtet ist. vui.guide fungiert als Open-Source-Anwendung und wurde mittels Gatsby.js entwickelt. vui.guide soll sowohl Designer * innen beim Entwerfen ihrer eigenen Sprachbenutzeroberfläche helfen, als auch Experten * innen zu ermöglichen ihr Wissen auf einer Plattform mit anderen zu teilen. Unabhängig von der Sprach-, Entwicklungs- oder Designexpertise gibt es dafür neben dem Konsumieren des Guides, verschiedene Möglichkeiten einen eigenen Beitrag zum Voice User Interface Guide zu leisten. Dazu gehört z.B. bestehende Artikel zu ergänzen, neue Kapital anzulegen oder vollständig neue Kategorien hinzuzufügen.
Persönliches Interesse
Durch das Aufkommen von Voice User Interfaces (VUIs) wie Amazon Alexa, Google Assistant, Siri usw. geschieht derzeitig eine grosse Veränderung in der Mensch-Computer-Interaktion. Dabei unterscheidet sich das Entwerfen von Voice-User-Interfaces (VUIs) deutlich von dem Entwerfen von herkömmlichen grafischen Benutzeroberflächen (GUIs). Daraus ergibt sich eine bevorstehende Herausforderung für UI-/UX-Designer * innen. Anbieter von Sprachassistenten bieten bereits eigene Guidelines an, doch bewegen sich diese grundsätzlich auf technischer Ebene und sind deshalb nur für Entwickler * innen geeignet.
Doch wie gestalten nun Designer * innen Voice User Interfaces, damit diese visuell sowie auch in der Nutzerführung optimal funktionieren? In herkömmlichen GUIs navigieren Benutzer * innen mit visuell sichtbaren Steuerelementen einer App und/oder per Finger (Berührung). Die Benutzer * innen können sehen, wann sie einen neuen Abschnitt oder eine neue Benutzeroberfläche öffnen. In VUIs werden die Augen und Finger zum Mund – die Benutzer * innen navigieren mittels gesprochener Sprache und werden gleichzeitig mittels hörbarem Feedback durch die Interaktion geführt.
Mit meiner Arbeit möchte ich darauf hinweisen, dass ungeachtet der sukzessiven Verschiebung von einer haptischen/visuellen Interaktion zu einer sprachgeführten Kommunikation, nicht auf UI-/UX-Designer * innen verzichtet werden soll.
Für eine effektive und innovative User Experience, bleibt es wichtig die Benutzer nicht ausschliesslich nur über Sprache zu führen, sondern diese zusätzlich mittels visuellem Feedback zu unterstützen. VUIs sollten so gestaltet werden, dass sie sich an die vielzähligen Situationen von Benutzern * innen und deren Absichten jederzeit anpassen können.
Gestaltung und Arbeitsprozess
vui.guide basiert auf informativen Gestaltungsregeln und ist für eine angenehme Lesbarkeit optimiert. Mögliche Störelemente die beim Lesen im Sichtfeld sind, wie z.B. die Hauptnavigation oder das On-Opage-Inhaltsverzeichnis, werden deshalb während dem Lesen in ihrer Deckkraft reduziert, um so den Hauptfokus auf den Inhalt zu leiten. Um den Guide für ein breit gefächertes Publikum zur Verfügung zu stellen, wurde dieser in englischer Sprache verfasst.
Bewusst wurde ein minimalistischer Stil angestrebt, der dennoch das Moderne einer VUI wiederspiegelt. Der Einsatz von leuchtenden und frischen Farben wie Pink, Violett und Blau lehnt sich an bereits existierenden Farbwelten in bestehenden VUIs an und soll so eine unterbewusste Verknüpfung bewirken.
Die Entwicklung mittels Gatsby.js erlaubt sowohl eine unbegrenzte technische und gestalterische Freiheit als auch eine Umsetzung auf «State-of-the-art»-Niveau. Dies unterstützt die Langlebigkeit der Arbeit und den Open-Source-Gedanken. Dabei wird eine Weiterentwicklung in naher Zukunft nicht durch technische Barrieren eingeschränkt.
Ausblick
Ich bin der Meinung Design kennt keine abschliessende Form, besonders in einer schnell wandelnden digitalen Welt. Der Inhalt von vui.guide wird kontinuierlich erweitert, ergänzt und bei Änderungen oder neuen technischen Möglichkeiten von VUIs angepasst. vui.guide strebt das Ziel an ein langlebiges Projekt zu sein, daher soll neben der Instandhaltung des Inhalts auch der visuell nicht sichtbare technische Bereich, einem schrittweise ablaufenden Code Refactoring durchlaufen.
Im Optimalfall erreicht der vui.guide nie eine abschliessende Form, sondern wird durch Contributors jederzeit erweitert.
Vielen Dank an Alex Jenter für die technische Hilfe und Support; an Frank Rausch für die Typografie-Expertise und das Auge für Details; an Boris Périsset für diverse Design Inputs in letzter Minute.
Sieh dir den vui.guide an Geh zur Github-Repository
Voice User Interface Guide (vui.guide)
Was ist vui.guide?
vui.guide ist ein Living Style Guide oder eine Musterbibliothek für Sprachbenutzeroberflächen, welche gezielt an Designer * innen gerichtet ist. vui.guide fungiert als Open-Source-Anwendung und wurde mittels Gatsby.js entwickelt. vui.guide soll sowohl Designer * innen beim Entwerfen ihrer eigenen Sprachbenutzeroberfläche helfen, als auch Experten * innen zu ermöglichen ihr Wissen auf einer Plattform mit anderen zu teilen. Unabhängig von der Sprach-, Entwicklungs- oder Designexpertise gibt es dafür neben dem Konsumieren des Guides, verschiedene Möglichkeiten einen eigenen Beitrag zum Voice User Interface Guide zu leisten. Dazu gehört z.B. bestehende Artikel zu ergänzen, neue Kapital anzulegen oder vollständig neue Kategorien hinzuzufügen.
Persönliches Interesse
Durch das Aufkommen von Voice User Interfaces (VUIs) wie Amazon Alexa, Google Assistant, Siri usw. geschieht derzeitig eine grosse Veränderung in der Mensch-Computer-Interaktion. Dabei unterscheidet sich das Entwerfen von Voice-User-Interfaces (VUIs) deutlich von dem Entwerfen von herkömmlichen grafischen Benutzeroberflächen (GUIs). Daraus ergibt sich eine bevorstehende Herausforderung für UI-/UX-Designer * innen. Anbieter von Sprachassistenten bieten bereits eigene Guidelines an, doch bewegen sich diese grundsätzlich auf technischer Ebene und sind deshalb nur für Entwickler * innen geeignet.
Doch wie gestalten nun Designer * innen Voice User Interfaces, damit diese visuell sowie auch in der Nutzerführung optimal funktionieren? In herkömmlichen GUIs navigieren Benutzer * innen mit visuell sichtbaren Steuerelementen einer App und/oder per Finger (Berührung). Die Benutzer * innen können sehen, wann sie einen neuen Abschnitt oder eine neue Benutzeroberfläche öffnen. In VUIs werden die Augen und Finger zum Mund – die Benutzer * innen navigieren mittels gesprochener Sprache und werden gleichzeitig mittels hörbarem Feedback durch die Interaktion geführt.
Mit meiner Arbeit möchte ich darauf hinweisen, dass ungeachtet der sukzessiven Verschiebung von einer haptischen/visuellen Interaktion zu einer sprachgeführten Kommunikation, nicht auf UI-/UX-Designer * innen verzichtet werden soll.
Für eine effektive und innovative User Experience, bleibt es wichtig die Benutzer nicht ausschliesslich nur über Sprache zu führen, sondern diese zusätzlich mittels visuellem Feedback zu unterstützen. VUIs sollten so gestaltet werden, dass sie sich an die vielzähligen Situationen von Benutzern * innen und deren Absichten jederzeit anpassen können.
Gestaltung und Arbeitsprozess
vui.guide basiert auf informativen Gestaltungsregeln und ist für eine angenehme Lesbarkeit optimiert. Mögliche Störelemente die beim Lesen im Sichtfeld sind, wie z.B. die Hauptnavigation oder das On-Opage-Inhaltsverzeichnis, werden deshalb während dem Lesen in ihrer Deckkraft reduziert, um so den Hauptfokus auf den Inhalt zu leiten. Um den Guide für ein breit gefächertes Publikum zur Verfügung zu stellen, wurde dieser in englischer Sprache verfasst.
Bewusst wurde ein minimalistischer Stil angestrebt, der dennoch das Moderne einer VUI wiederspiegelt. Der Einsatz von leuchtenden und frischen Farben wie Pink, Violett und Blau lehnt sich an bereits existierenden Farbwelten in bestehenden VUIs an und soll so eine unterbewusste Verknüpfung bewirken.
Die Entwicklung mittels Gatsby.js erlaubt sowohl eine unbegrenzte technische und gestalterische Freiheit als auch eine Umsetzung auf «State-of-the-art»-Niveau. Dies unterstützt die Langlebigkeit der Arbeit und den Open-Source-Gedanken. Dabei wird eine Weiterentwicklung in naher Zukunft nicht durch technische Barrieren eingeschränkt.
Ausblick
Ich bin der Meinung Design kennt keine abschliessende Form, besonders in einer schnell wandelnden digitalen Welt. Der Inhalt von vui.guide wird kontinuierlich erweitert, ergänzt und bei Änderungen oder neuen technischen Möglichkeiten von VUIs angepasst. vui.guide strebt das Ziel an ein langlebiges Projekt zu sein, daher soll neben der Instandhaltung des Inhalts auch der visuell nicht sichtbare technische Bereich, einem schrittweise ablaufenden Code Refactoring durchlaufen.
Im Optimalfall erreicht der vui.guide nie eine abschliessende Form, sondern wird durch Contributors jederzeit erweitert.
Vielen Dank an Alex Jenter für die technische Hilfe und Support; an Frank Rausch für die Typografie-Expertise und das Auge für Details; an Boris Périsset für diverse Design Inputs in letzter Minute.
Sieh dir den vui.guide an Geh zur Github-Repository