User Interface

Erklärung

User Interface bedeutet Benutzeroberfläche und dient als Bezeichnung für eine Mensch-Maschinen- oder Mensch-Computer-Schnittstelle, über die Soft- und Hardware bedient werden kann.

Man unterscheidet je nach Art des Interfaces zwischen:

  • Kommandozeile (CLI/ Command Line Interface, auch „Shell“): Kommunikation mit einem System über Befehlseingabe in Kommandozeilen.
  • Grafische Benutzeroberfläche (GUI/ Grafical User Interface): komplexe Oberflächen, deren Interaktionselemente Icons sind, die über Eingabegeräten bedient werden können.
  • Zeichenbasierte Benutzeroberfläche (TUI/ Text User Interface): Textbasierte Schnittstellen, die über Eingabegeräte bedient werden können und meist in Menüs benutzt wird.
  • Gegenständliche Benutzeroberfläche (TUI/ Tangible User Interface): Funktionen des Systems entsprechen physischen Objekten, die der Steuerung und Ablesbarkeit dienen.
  • Natürliche Benutzeroberfläche (NUI/ Natural User Interface): Intuitiver Umgang durch direkte Interaktion (Gestensteuerung auf berührungssensibler Oberfläche).
  • Sprachbasierte Benutzeroberfläche (VUI/ Voice User Interface): Kommunikation über sprachbasierte Schnittstellen (Ein- und Ausgabe = Sprache).
  • Gehirn-Computer-Schnittstelle (BCI/ Brain Computer Interface): Computer können über Gedanken gesteuert werden.
  • Wahrnehmungsbasierte Benutzeroberfläche (PUI/ Perception User Interface): Interaktion via GUI, VUI und Gestenerkennung, ist allerdings noch in der Entwicklungsphase.

 

Im Zentrum der Interaktion stehen die Benutzerfreundlichkeit, Gebrauchstauglichkeit und  Aufgabenangemessenheit. Qualitätskriterien für ein gutes User Interface Design, wie beispielsweise Fehlertoleranz, Selbstbeschreibungsfähigkeit oder Erwartungskonformität, sind in den „Grundsätzen der Dialoggestaltung“ und deren Erweiterung um z.B. Eignung für das Kommunikationsziel oder Exploration im Rahmen der Multimedianorm (siehe „Software Ergonomie“) zu finden.

Ziel

Ziel eines User Interfaces ist es eine Schnittstelle zu generieren, über die der Mensch mit einem Computer/ einer Maschine interagieren kann. Der Fokus liegt auf benutzerorientierter Bedienung, logisch und klar strukturierten Abläufen, Aufgabenangemessenheit, möglichst intuitiver, ergonomischer Steuerung und optimierter Dialogführung.

 

Sieben Designprinzipien (Donald A. Norman):

  1. Discoverability & Understanding / Auffindbarkeit und Verständlichkeit:

Es ist dem/der Nutzer*in möglich, herauszufinden welche Aktionsmöglich-
keiten ein Produkt bietet. Der/die Nutzer*in ist in der Lage herauszufinden, welche Wirkungen die Aktionen haben.

  1. Feedback / Rückmeldung:

Nach einer erfolgten Aktion informiert das Produkt über das Ergebnis
der Aktion, über den aktuellen Status des Produktes und was die nächstmöglichen Aktionen sind.

  1. Conceptual Model / Konzeptionelles Modell:

Das Design des Produktes gibt alle Informationen darüber preis wie das
Produkt zu verwenden ist. Ziel ist es dem/der Benutzer*in das Erlernen
und Verstehen des Produktes zu vereinfachen und um ein sicheres
Gefühl zu vermitteln, immer die Kontrolle zu haben.

  1. Affordances / Bequemlichkeit, Erschwinglichkeit:

Das Produkt bietet grundlegende Funktionalitäten, um die gewünschten
Aktionen auch tatsächlich durchführen zu können. Diese sind so gestaltet,
dass die Nutzerzielgruppe auch die Fähigkeiten hat diese zu bedienen.

  1. Signifiers / Bedeutungen:

Hinweise unterstützen die Verständlichkeit und helfen dabei, dass Feedbackinformationen klar und verständlich kommuniziert werden.

  1. Mappings / Zuordnungen:

Kontrollelemente und die kontrollierten Objekte stehen in direkten Zusammenhang – funktional, örtlich, zeitlich und designtechnisch.

  1. Constraints / Einschränkungen:

Bei der bevorzugten bzw. idealen Benutzung des Produktes wird der/die Benutzer*in durch Constraints gelenkt und eine Fehlnutzung verhindert:

  • physikalische – (die Form und Beschaffenheit bestimmt die
    bevorzugte Nutzung)
  • kulturelle – (kulturelle Eigenheiten wie die Farbe vereinfachen
    die Nutzung)
  • semantische – (die Bedeutung ergibt sich aus dem Gesamtkontext)
  • logische – (die weitere Nutzung ergibt sich logisch aus den bisher
    getätigten Interaktionen)

Vorgehen

Das Vorgehen zur Entwicklung eines User Interfaces entspricht dem Vorgehen eines Entwurfsprozesses:

  • Recherchephase: Welche Möglichkeiten gibt es? Was machen Wettbewerber? Wer sind Wettbewerber? Wer ist meine Zielgruppe? Welche Bedürfnisse und Anforderungen bestehen?
  • Konzeptphase: Aus einer Vielzahl von Ideen, werden Konzepte erstellt, die verglichen werden und zu einem auszuarbeitenden Konzept verdichtet werden.
  • Reflektionsphase: Alle Abläufe werden kontrolliert, auf Schlüssigkeit, Verständlichkeit, etc. überprüft
  • MockupPhase: Modelle in Form von Ideenskizzen und Paperprototyping werden zum Usability-Testing angefertigt
  • TestPhase: Testpersonen überprüfen die Interfaces anhand von Mockups und Visualisierungen
  • Rekursionsschleifen: Es wird so lange ausgearbeitet, gefeilt und getestet, bis ein zufriedenstellendes Produkt entsteht
  • Präzesierungsphase: Bugs werden behoben, abschließende Kontrollen und Programmierung

 

Bei der Ausarbeitung sollten die Gestaltgesetze der Wahrnehmungspsychologie berücksichtigt werden (siehe Gestaltgesetze)

Mehr Infos hier: https://userinterfacedesign.ch/gestaltgesetze/

  • Sketches
  • Grafiken/Illustrationen
  • Storyboards
  • Renderings
  • Animationen

 

Tipp

Vertiefende Informationen zur Gestaltung von Dialoggestaltung von Interfaces finden Sie hier: wiki.infowiss.net/Grundsätze_der_Dialoggestaltung

FIGMA:
Figma ist eine kollaborative Software zum Erstellen von Prototypen im Bereich des UX bzw. UI Design. Sie wird vor allem als Webanwendung genutzt. Daneben läuft Figma auch als Desktop-App für MacOS und Windows und als Mobile App für Android und iOS. Figma-Entwürfe können modular aufgebaut und in Echtzeit mit anderen geteilt werden.
LINK: https://www.figma.com/

Farbkontrast-CHECK:
Ein hohes Maß an Farbkontrast spielt eine entscheidende Rolle bei der Schaffung einer leicht zugänglichen Website für alle Nutzer. Um sicherzustellen, dass der Text auf Ihrer Website gut lesbar ist, ist es wichtig, einen deutlichen Kontrast zwischen Text und Hintergrundfarbe zu verwenden. Nutzen Sie den Farbkontrast-Check, um festzustellen, ob Ihre Farbkombinationen barrierefrei sind und die erforderlichen Standards erfüllen.
LINK: https://www.siteimprove.com/de/toolkit/color-contrast-checker/

Quellen

Studienarbeiten:

Redesignit – Grebner – Müller – WS 15/16
Redesignit – Wieland – Bartenstein – SS 16
Bluetooth Speaker – Roser – Stotz – SS 15
EuK3 – Festnetztelefon 65 plus – Maximilian Kerker und Daniel Franz – WS18_19
EuK3 – Festnetztelefon 65 plus – Louisa Brygier und Ricarda Figielz – WS18_19
EuK3 – Festnetztelefon 65plus – Pascale Andrasch/ Lukas Konrad – WS 18_19
EuK4 – VERA SANKTJOHANSER – ANNA WINKLER – SS19

Sonstiges:
Vorlesungsfolien_Herr Quick_Softwareergonomie (pdf)
Vorlesungsfolien_Herr Rosenthal_Interactiondesign (pdf)
http://www.itwissen.info/definition/lexikon/graphical-user-interface-GUI-Grafische-Benutzeroberflaeche.html
http://www.itwissen.info/definition/lexikon/Benutzeroberflaeche-UI-user-interface.html
http://www.itwissen.info/definition/lexikon/Benutzeroberflaeche-UI-user-interface.html
wiki.infowiss.net/Grundsätze_der_Dialoggestaltung
www.flow-usability.de/gestaltgesetze
https://visualhierarchy.co/blog/wp-content/uploads/2015/05/2062865.jpg
http://basics.designismakingsense.de/website/uploads/2013/12/reactable.png
http://basics.designismakingsense.de/website/uploads/2013/12/iphone-touchscreen_0.png
http://images.anandtech.com/doci/6392/Screenshot%20(1).png
http://www.filebot.net/screenshots/cli.png
http://www.conceptdraw.com/How-To-Guide/picture/OSX10.10YosemiteApps.png
http://media02.hongkiat.com/next-gen-user-interface/siri.jpg
http://clubflyersmag.com/wp-content/uploads/2014/08/inform1.jpg
https://s-media-cache-ak0.pinimg.com/originals/1f/e4/7e/1fe47e85672f19d44cb8570263703a7a.jpg
http://www.downgraf.com/inspiration/examples-of-minimal-mobile-ui-design/
http://www.inspirationde.com/image/8888/

Beispiele

ToolsUser Interface