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:
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 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.
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.
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.
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.
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.
Hinweise unterstützen die Verständlichkeit und helfen dabei, dass Feedbackinformationen klar und verständlich kommuniziert werden.
Kontrollelemente und die kontrollierten Objekte stehen in direkten Zusammenhang – funktional, örtlich, zeitlich und designtechnisch.
Bei der bevorzugten bzw. idealen Benutzung des Produktes wird der/die Benutzer*in durch Constraints gelenkt und eine Fehlnutzung verhindert:
Das Vorgehen zur Entwicklung eines User Interfaces entspricht dem Vorgehen eines Entwurfsprozesses:
Bei der Ausarbeitung sollten die Gestaltgesetze der Wahrnehmungspsychologie berücksichtigt werden (siehe Gestaltgesetze)
Mehr Infos hier: https://userinterfacedesign.ch/gestaltgesetze/
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/
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/