Der Begriff UX steht f\u00fcr User Experience, der Begriff UI wird f\u00fcr User Interface verwendet. Sowohl das UI als auch die UX sind entscheidende Faktoren daf\u00fcr, wie eine Website oder eine App beim Nutzer wahrgenommen wird und ob das Produkt dadurch funktioniert.<\/p>\n\n\n\n
UI-Design<\/strong><\/p>\n\n\n\n Das User-Interface-Design besch\u00e4ftigt sich mit der Gestaltung der\u00a0Oberfl\u00e4che (dem Interface) einer App oder einer Website. Themen, mit denen ein UI-Designer zu tun hat, sind z.B. die Art der Navigations-Leisten, Sidebars, Icons und Eingabe-Felder. Dabei geht es nicht um die \u201eSch\u00f6nheit\u201c der Oberfl\u00e4che, sondern darum, dass das Layout die Benutzbarkeit unterst\u00fctzt. Trotzdem ist eine \u00e4sthetisch ansprechende Gestaltung des User Interfaces wichtig, denn das Visuelle ist das, was sich neben der Technik nachhaltig in den K\u00f6pfen der Nutzer verankert. Wer also eine emotionale Bindung zu seinen Usern aufbauen m\u00f6chte, kommt um ein gutes UI-Design nicht herum.<\/p>\n\n\n\n UI Design \u00fcberschneidet sich oft mit einem anderen Bereich, genannt Interaktionsdesign (IxD). Interaktionsdesign spezialisiert sich auf die Wege, mit denen ein Nutzer mit dem System interagiert. Dazu geh\u00f6ren z.B. Benutzeroberfl\u00e4che, Pop-Ups, Chat und\u00a0Fehlermeldungen. Interaktionsdesign stellt das Nutzerverhalten in den Vordergrund stellt, es liegt somit zwischen UI und UX Design.<\/p>\n\n\n\n UX-Design (UXD, UED oder XD)<\/strong><\/p>\n\n\n\n Das User-Experience-Design fokussiert sich vor allem auf das Anwender-Erlebnis, ist also Webdesign aus der Perspektive des Nutzers. Dabei versucht man eine \u201eintuitive\u201c Bedienung zu erreichen,\u00a0als eine Bedienung, die ohne weiteres Suchen in der Anleitung klappt. Der Weg des Besuchers durch eine Website\/App wird h\u00e4ufig als \u201eUser Journey\u201c bezeichnet. Die Kernfrage des UX-Design ist: Wie l\u00e4sst sich eine Anwendung so gestalten, dass der User seine Ziele einfach und ohne gro\u00dfen Aufwand erreichen kann? Es gibt einen direkten Zusammenhang zwischen UX Design und Unternehmenszielen wie Verk\u00e4ufe oder Conversions. Eine Website sollte beispielsweise so optimiert sein, dass sie zu bestimmten Verhaltensweisen animiert.<\/p>\n\n\n\n UI- und UX-Designer arbeiten im Team zusammen. Ihre T\u00e4tigkeitsbereiche trennen sich dort, wo der UI-Designer sich um die Funktionalit\u00e4t k\u00fcmmert, w\u00e4hrend der UX-Designer mit Testnutzern und Feedback-Analysen daran arbeitet, Schwachstellen in der Benutzung zu finden.<\/p>\n\n\n\n Den Beginn macht immer das UX-Design. Das UX Design wird oft in Wireframes erarbeitet. In diesen groben Pl\u00e4nen wird die Struktur der Navigation festgelegt und gezeigt. Sp\u00e4ter in der Phase des UI-Designs werden diese Wireframes in detaillierte Seiten umgewandelt, wobei z.B. Schriften, Farben, Branding usw. hinzugef\u00fcgt werden.<\/p>\n","protected":false},"excerpt":{"rendered":" Sowohl das UI als auch die UX sind entscheidende Faktoren daf\u00fcr, wie eine Website, ein Produkt oder eine App beim Nutzer wahrgenommen wird.<\/p>\n","protected":false},"featured_media":44640,"template":"","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":""},"working-guide":[],"transformation-blocks":[60,66],"innovation-stage":[],"class_list":["post-44629","methode","type-methode","status-publish","has-post-thumbnail","hentry","transformation-blocks-talking","transformation-blocks-exploring"],"_links":{"self":[{"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/methode\/44629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/methode"}],"about":[{"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/types\/methode"}],"version-history":[{"count":0,"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/methode\/44629\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/media\/44640"}],"wp:attachment":[{"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/media?parent=44629"}],"wp:term":[{"taxonomy":"working-guide","embeddable":true,"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/working-guide?post=44629"},{"taxonomy":"transformation-blocks","embeddable":true,"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/transformation-blocks?post=44629"},{"taxonomy":"innovation-stage","embeddable":true,"href":"https:\/\/www.innovation.wiki\/de\/wp-json\/wp\/v2\/innovation-stage?post=44629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}