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.

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
  • Mockup-Phase: Modelle in Form von Ideenskizzen und Paperprototyping werden zum Usability-Testing angefertigt
  • Test-Phase: 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: www.flow-usability.de/gestaltgesetze

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

Tipp

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

Quellen

Studienarbeiten:

Redesignit - Grebner - Müller - WS 15/16

Redesignit – Wieland – Bartenstein – SS 16

Bluetooth Speaker - Roser - Stotz - SS 15


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