{"id":54713,"date":"2024-07-26T11:53:26","date_gmt":"2024-07-26T09:53:26","guid":{"rendered":"https:\/\/www.inovex.de\/?p=54713"},"modified":"2024-07-30T14:31:25","modified_gmt":"2024-07-30T12:31:25","slug":"ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/","title":{"rendered":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps"},"content":{"rendered":"<section class=\"design-patterns\">\n<p>Die Gestaltung einer Benutzeroberfl\u00e4che (UI) und die Schaffung einer optimalen Benutzererfahrung (UX) sind entscheidend f\u00fcr den Erfolg jeder digitalen Anwendung. Der richtige Einsatz von Transitions kann dabei spannende M\u00f6glichkeiten bieten, um eine intuitive Benutzererfahrung zu schaffen. In diesem Beitrag stellen wir \u2013 ein Team aus den Bereichen Frontend und UI\/UX bei inovex \u2013 einen praxisorientierten Leitfaden am Beispiel einer datengetriebenen Anwendung vor. Erfahre, wie du mit durchdachten Transitions und bew\u00e4hrten Designprinzipien die Interaktion in deiner Anwendungen optimieren kannst. Im Folgenden pr\u00e4sentieren wir konkrete Best Practices, die du in deinen Projekten anwenden kannst, um eine ansprechende Benutzererfahrung zu schaffen.<!--more-->\u201eAuf dem CSS-Day haben wir Interessantes \u00fcber die View-Transition-API und Design-Patterns erfahren. Wollen wir zusammen passende Use Cases finden, um das Konzept verst\u00e4ndlich zu erkl\u00e4ren?\u201c<br \/>\nDas war der gl\u00fcckliche Anfang einer spannenden Kollaboration zwischen Frontend-Entwicklung und UX-Design.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#UIUX-Best-Practices\" >UI\/UX Best Practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#Use-Case\" >Use Case<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#Beispiel-Ueberlappende-Detailansicht\" >Beispiel: \u00dcberlappende Detailansicht<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#Beispiel-Verdraengende-Detailansicht\" >Beispiel: Verdr\u00e4ngende Detailansicht<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#Beispiel-Platzreservierende-Detailansicht\" >Beispiel: Platzreservierende Detailansicht<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"UIUX-Best-Practices\"><\/span>UI\/UX Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In unserem Artikel \u201e<a title=\"Motion im UX-Design: Ein praktischer Guide\" href=\"https:\/\/www.inovex.de\/de\/blog\/motion-im-ux-design-ein-praktischer-guide\/\" rel=\"\">Motion im UX-Design \u2013 Ein praktischer Guide<\/a>\u201c haben wir bereits die Grundlagen effektiver UX-Prinzipien im Zusammenhang mit UX-Motion beleuchtet. In diesem Leitfaden pr\u00e4sentieren wir verschiedene Transition-Beispiele anhand eines konkreten Use Cases.<\/p>\n<p>Um die geeignete Animation f\u00fcr einen bestimmten Anwendungsfall zu finden, ist es zun\u00e4chst wichtig, den Kontext und die Zielgruppe der Anwendung zu verstehen. Anschlie\u00dfend m\u00fcssen die Ziele der Animation klar definiert und die passenden Bewegungseffekte (Timing &amp; Easing) ausgew\u00e4hlt werden. Dieser Prozess erfordert eine individuelle Evaluation f\u00fcr jeden Anwendungsfall, um eine optimale Nutzer:innenerfahrung zu gew\u00e4hrleisten. Dieser Bereich wird in der Softwareentwicklung oft vernachl\u00e4ssigt oder unzureichend umgesetzt. Es gibt keine allgemeing\u00fcltigen Regeln oder Schemata, da die Auswahl der Transition stark von den Nutzer:innen und deren mentalen Modellen des Einsatzszenarios abh\u00e4ngt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Use-Case\"><\/span>Use Case<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Stell Dir vor, Du betreibst einen hippen Kaffeeladen namens byte &amp; brew und m\u00f6chtest ein Kassensystem, das es dir erm\u00f6glicht, Bestellungen als Historie zu verwalten und Details zu jedem Auftrag anzeigen zu lassen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-55363 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew.png\" alt=\"\" width=\"3000\" height=\"2200\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew.png 3000w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-300x220.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-1024x751.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-768x563.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-1536x1126.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-2048x1502.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-1920x1408.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-400x293.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Mockup_byte-brew-360x264.png 360w\" sizes=\"auto, (max-width: 3000px) 100vw, 3000px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Im folgenden stellen wir dir 3 Umsetzungs-Alternativen vor. Sie sind mit HTML, CSS und bewusst mit Vanilla JavaScript implementiert, um grundlegende native Browser-Funktionalit\u00e4ten aufzuzeigen.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beispiel-Ueberlappende-Detailansicht\"><\/span><strong>Beispiel: \u00dcberlappende Detailansicht<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJEZXNpZ24gUGF0dGVybnMgIzIgLSBPdmVybGFwcGluZyIgc3JjPSJodHRwczovL2NvZGVwZW4uaW8vRGFudGVtYW4vZW1iZWQvcHJldmlldy9XTldyWlBFP2RlZmF1bHQtdGFicz1qcyUyQ3Jlc3VsdCYjMDM4O2hlaWdodD0zMDAmIzAzODtob3N0PWh0dHBzJTNBJTJGJTJGY29kZXBlbi5pbyYjMDM4O3NsdWctaGFzaD1XTldyWlBFIz9zZWNyZXQ9dXg1eU11M3UwTSIgZGF0YS1zZWNyZXQ9InV4NXlNdTN1ME0iIHNjcm9sbGluZz0ibm8iIGZyYW1lYm9yZGVyPSIwIiBoZWlnaHQ9IjMwMCI+PC9pZnJhbWU+<\/div>\n<\/div>\n<p><a href=\"https:\/\/inovex.github.io\/blog-design-patterns\/overlapping\/index.html\">https:\/\/inovex.github.io\/blog-design-patterns\/overlapping\/index.html<\/a><\/p>\n<p><span style=\"font-weight: 400;\">Eine \u00fcberlappende Detail-Ansicht kann sinnvoll sein, wenn folgende Punkte wichtig sind:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kontextbewahrung:<\/b><span style=\"font-weight: 400;\"> Nutzer:innen m\u00fcssen die Detailinformationen einsehen, ohne den Kontext der Hauptanwendung zu verlieren. Ein Overlay erm\u00f6glicht es den Nutzer:innen, die Detailinformationen zu \u00fcberpr\u00fcfen und dann schnell zur Hauptansicht zur\u00fcckzukehren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fokussierung:<\/b><span style=\"font-weight: 400;\"> Wenn die Aufmerksamkeit der Nutzer:innen auf spezifische Informationen gelenkt werden soll, kann ein Overlay hilfreich sein, um Ablenkungen durch andere UI-Elemente zu minimieren.<\/span><\/li>\n<\/ul>\n<p><b>Einsatz<\/b><span style=\"font-weight: 400;\">: E-Commerce-Websites verwenden oft seitlich einblendbare Panels f\u00fcr Filter und Einstellungen. Der User kann die Filter einblenden, die gew\u00fcnschten Optionen ausw\u00e4hlen und das Panel dann wieder ausblenden.<\/span><\/p>\n<p><b>Beispiele<\/b><span style=\"font-weight: 400;\">: Analyse-Tools wie z. B. DataDog verwenden h\u00e4ufig die \u00fcberlappende Detail-Ansicht f\u00fcr ihre Logs. In mobilen Ansichten wie bei Amazon und eBay Kleinanzeigen z. B. nutzen solche \u00fcberlappenden Panels, um Nutzer:innen zu erm\u00f6glichen, ihre Suchergebnisse zu verfeinern, ohne die aktuelle Seite zu verlassen.<\/span><\/p>\n<p><b>UX-Fazit:<\/b><span style=\"font-weight: 400;\"> Das Prinzip der Fokuslenkung stellt sicher, dass Nutzer:innen ihre Aufmerksamkeit auf die wichtigsten Inhalte richten k\u00f6nnen. Durch das \u00dcberblenden wird die Detailseite hervorgehoben, was die Benutzerf\u00fchrung verbessert und eine klare Informationshierarchie schafft. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">(UX-Prinzip: Fokus &amp; Aufmerksamkeit)<\/span><\/p>\n<p><b>Technische Umsetzung:<\/b><span style=\"font-weight: 400;\"> In dem dargestellten Beispiel wird ein Raster-Layoutsystem, bestehend aus <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid\"><span style=\"font-weight: 400;\">Grid<\/span><\/a><span style=\"font-weight: 400;\"> und <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\/Subgrid\"><span style=\"font-weight: 400;\">Subgrid<\/span><\/a><span style=\"font-weight: 400;\">, f\u00fcr die Anordnung der Tabellenelemente verwendet. Die Inhalte der Seitenleiste werden mit Vanilla JavaScript erstellt, wobei das HTML-Element <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog\"><span style=\"font-weight: 400;\">&lt;dialog&gt;<\/span><\/a><span style=\"font-weight: 400;\"> zur Anwendung kommt. F\u00fcr die Animationen der Benutzeroberfl\u00e4che werden haupts\u00e4chlich <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/animation\"><span style=\"font-weight: 400;\">CSS-Animationen<\/span><\/a><span style=\"font-weight: 400;\"> und <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition\"><span style=\"font-weight: 400;\">Transitions<\/span><\/a><span style=\"font-weight: 400;\"> genutzt. Zus\u00e4tzlich verwenden wir <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_containment\/Container_queries\"><span style=\"font-weight: 400;\">Container-Queries<\/span><\/a><span style=\"font-weight: 400;\">, um die Inhalte abh\u00e4ngig der eigenen Element-Breite anzupassen und dem User so in jeder Layout-Konstellation die maximale \u00dcbersicht geben zu k\u00f6nnen.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beispiel-Verdraengende-Detailansicht\"><\/span><strong>Beispiel: Verdr\u00e4ngende Detailansicht<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u26a0\ufe0f Vorsicht: <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API#browser_compatibility\"><span style=\"font-weight: 400;\">Funktioniert zum Stand der Erstellung nur in Chromium-basierten Browsern<\/span><\/a><\/p>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJEZXNpZ24gUGF0dGVybnMgIzMgLSBDb25kZW5zaW5nIiBzcmM9Imh0dHBzOi8vY29kZXBlbi5pby9EYW50ZW1hbi9lbWJlZC9wcmV2aWV3L3lMcmV6Wks\/ZGVmYXVsdC10YWJzPWpzJTJDcmVzdWx0JiMwMzg7aGVpZ2h0PTMwMCYjMDM4O2hvc3Q9aHR0cHMlM0ElMkYlMkZjb2RlcGVuLmlvJiMwMzg7c2x1Zy1oYXNoPXlMcmV6WksjP3NlY3JldD1tSlhMZW1SRnRnIiBkYXRhLXNlY3JldD0ibUpYTGVtUkZ0ZyIgc2Nyb2xsaW5nPSJubyIgZnJhbWVib3JkZXI9IjAiIGhlaWdodD0iMzAwIj48L2lmcmFtZT4=<\/div>\n<\/div>\n<p><a href=\"https:\/\/inovex.github.io\/blog-design-patterns\/condensing\/index.html\">https:\/\/inovex.github.io\/blog-design-patterns\/condensing\/index.html<\/a><\/p>\n<p><span style=\"font-weight: 400;\">Eine verdr\u00e4ngende Detailansicht kann sinnvoll sein, wenn folgende Punkte gegeben sind:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dauerhafte Sichtbarkeit:<\/b><span style=\"font-weight: 400;\"> Wenn User h\u00e4ufig zwischen der Hauptansicht und den Detailinformationen wechseln m\u00fcssen, ist es sinnvoll, die Details direkt in die Hauptansicht zu integrieren, um den Wechsel zu erleichtern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vergleich von Daten: <\/b><span style=\"font-weight: 400;\">Wenn Nutzer:innen Details verschiedener Elemente vergleichen m\u00fcssen, ist eine verdr\u00e4ngende Ansicht vorteilhaft, da sie die gleichzeitige Sichtbarkeit mehrerer Detailbereiche erm\u00f6glicht.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Raumoptimierung:<\/b><span style=\"font-weight: 400;\"> Bei Anwendungen, die auf Ger\u00e4ten mit begrenztem Bildschirmplatz verwendet werden, kann eine verdr\u00e4ngende Ansicht den verf\u00fcgbaren Raum effizienter nutzen, um beide Ansichten beibehalten zu k\u00f6nnen.<\/span><\/li>\n<\/ul>\n<p><b>Einsatz<\/b><span style=\"font-weight: 400;\">: Beim Umschalten von Schaltern (Toggles) oder beim \u00c4ndern des Status von Elementen (z. B. Lesezeichen setzen\/entfernen).\u00a0<\/span><\/p>\n<p><b>Beispiel<\/b><span style=\"font-weight: 400;\">: Apps wie Spotify, Google Mail, Jira und Slack verwenden verdr\u00e4ngende Detailansicht, um schnell visuelles Feedback zu geben, wenn User zwischen Inhalten wechseln. So k\u00f6nnen die Apps Detailinformationen zu bspw. den K\u00fcnstler:innen oder einem weiteren Song einblenden.<\/span><\/p>\n<p><b>UX-Fazit: <\/b><span style=\"font-weight: 400;\">Unn\u00f6tige Schritte beim \u00d6ffnen und Schlie\u00dfen von Overlays k\u00f6nnen vermieden werden, indem der Fokus zur Detailseite verschoben wird und der Kontext in komprimierter Form beibehalten wird, wird die Effizienz der Informationsaufnahme verbessert. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">(UX-Prinzip: Effizienz | DIN EN ISO 9241-11:2018)<\/span><\/p>\n<p><b>Technische Umsetzung:<\/b><span style=\"font-weight: 400;\"> In diesem Beispiel wird ein <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid\"><span style=\"font-weight: 400;\">Grid<\/span><\/a><span style=\"font-weight: 400;\">-Layout einschlie\u00dflich <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\/Subgrid\"><span style=\"font-weight: 400;\">Subgrid<\/span><\/a><span style=\"font-weight: 400;\">-Funktionalit\u00e4t f\u00fcr die visuelle Aufbereitung der Tabelle genutzt. Die Seitenleiste wird mit purem JavaScript (Vanilla JS) dynamisch bef\u00fcllt. F\u00fcr die Animation der Seitenleiste kommt die <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\"><span style=\"font-weight: 400;\">View Transition API<\/span><\/a><span style=\"font-weight: 400;\"> zum Einsatz. Anpassungen basierend auf dem verf\u00fcgbaren Platz werden mit der CSS <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@container\"><span style=\"font-weight: 400;\">@container<\/span><\/a><span style=\"font-weight: 400;\"> Regel realisiert.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beispiel-Platzreservierende-Detailansicht\"><\/span><strong>Beispiel: Platzreservierende Detailansicht<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJEZXNpZ24gUGF0dGVybnMgIzEgLSBSZXNlcnZlZCIgc3JjPSJodHRwczovL2NvZGVwZW4uaW8vRGFudGVtYW4vZW1iZWQvcHJldmlldy9HUkxSYlJHP2RlZmF1bHQtdGFicz1qcyUyQ3Jlc3VsdCYjMDM4O2hlaWdodD0zMDAmIzAzODtob3N0PWh0dHBzJTNBJTJGJTJGY29kZXBlbi5pbyYjMDM4O3NsdWctaGFzaD1HUkxSYlJHIz9zZWNyZXQ9OHh6SHRCY3BBayIgZGF0YS1zZWNyZXQ9Ijh4ekh0QmNwQWsiIHNjcm9sbGluZz0ibm8iIGZyYW1lYm9yZGVyPSIwIiBoZWlnaHQ9IjMwMCI+PC9pZnJhbWU+<\/div>\n<\/div>\n<p><a href=\"https:\/\/inovex.github.io\/blog-design-patterns\/reserved\/index.html\">https:\/\/inovex.github.io\/blog-design-patterns\/reserved\/index.html<\/a><\/p>\n<p><span style=\"font-weight: 400;\">Eine platzreservierende Detailansicht kann sinnvoll sein, wenn folgende Punkte eine Rolle spielen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Benutzer:innenfreundlichkeit und Konsistenz: <\/b><span style=\"font-weight: 400;\">Eine klare und konsistente Struktur sorgt daf\u00fcr, dass Benutzer:innen leicht verstehen, wo sie Detailinformationen finden. Dies erh\u00f6ht die Vorhersehbarkeit und erleichtert die Nutzung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kontinuit\u00e4t und Kontext:<\/b><span style=\"font-weight: 400;\"> Nutzer:innen behalten den Kontext der Hauptansicht bei, w\u00e4hrend sie Details einsehen. Dies verhindert, dass Nutzer den \u00dcberblick verlieren, wenn sie zwischen Haupt- und Detailansicht wechseln.<\/span><\/li>\n<\/ul>\n<p><b>Einsatz<\/b><span style=\"font-weight: 400;\">: In Desktop Apps, wenn User schnell zwischen verschiedenen Listeninhalten wechseln m\u00fcssen, ohne lange Wartezeiten oder aufwendige Animationen. Dies kann beispielsweise beim Wechseln zwischen verschiedenen Tabs oder Listen in einer App verwendet werden.<\/span><\/p>\n<p><b>Beispiel<\/b><span style=\"font-weight: 400;\">: Messaging Apps wie WhatsApp oder Telegram oder Mail Services wie macOS Mail verwenden einen reservierten Bereich f\u00fcr Detailansicht, um schnelle Wechsel zwischen Chats, Anrufen und Einstellungen zu erm\u00f6glichen.<\/span><\/p>\n<p><b>UX-Fazit: <\/b><span style=\"font-weight: 400;\">Die in dem reservierten Platz eingeblendeten Inhalte verlagern den Aufmerksamkeitsfokus auf die Detailansicht, wodurch diese wichtiger erscheint. Ein fest definierter Bereich f\u00fcr Detailansichten erleichtert den Usern das Auffinden detaillierter Informationen, was die Vorhersehbarkeit und Nutzer:innenzufriedenheit erh\u00f6hen kann. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">(UX-Prinzip: Selbstbeschreibungsf\u00e4higkeit |\u00a0DIN EN ISO 9241-110:2010)<\/span><\/p>\n<p><b>Technische Umsetzung:<\/b> <span style=\"font-weight: 400;\">In diesem Beispiel wird f\u00fcr die Darstellung der Tabelle ein Rasterlayout (<\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid\"><span style=\"font-weight: 400;\">Grid<\/span><\/a><span style=\"font-weight: 400;\">) mit Unterst\u00fctzung von Unter-Rastern (<\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\/Subgrid\"><span style=\"font-weight: 400;\">Subgrid<\/span><\/a><span style=\"font-weight: 400;\">) verwendet. F\u00fcr das Bef\u00fcllen der Seitenleiste wird reines JavaScript (Vanilla JS) eingesetzt.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span><strong>Fazit<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Die Wahl des geeigneten Layouts und der passenden Transitions h\u00e4ngt stark von den spezifischen Anforderungen und Zielen der datengetriebenen Anwendung ab. Neben dem offensichtlichsten Grund, dem der Bildschirmgr\u00f6\u00dfe und dem damit einhergehenden Platz f\u00fcr Content, ist ein entscheidender Faktor die kontinuierliche Beobachtung des Nutzer:innenverhaltens und das Sammeln von Feedback, um die Nutzungserfahrung stetig zu verbessern. Nutzer:innenfeedback bspw. durch Usability-Tests, k\u00f6nnen wertvolle Einblicke liefern, die zur Optimierung der UI\/UX-Entscheidungen beitragen und sicherstellen, dass die entwickelte Oberfl\u00e4che den Bed\u00fcrfnissen und Pr\u00e4ferenzen der Nutzer:innen entspricht.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dar\u00fcber hinaus ist die Ber\u00fccksichtigung etablierter Interaktionsprinzipien, wie sie in der DIN-Norm (DIN EN ISO 9241 Gebrauchstauglichkeit &amp; Ergonomie interaktiver Systeme) und den Usability-Heuristiken nach Jakob Nielsen festgelegt sind, entscheidend. Diese Prinzipien und Normen bieten einen Leitfaden f\u00fcr die Bewertung der Qualit\u00e4t und Benutzer:innenfreundlichkeit von Transitions und tragen zur Entwicklung eines qualitativ hochwertigen UI-Designs. Sie helfen dabei, visuell ansprechende und funktionale \u00dcberg\u00e4nge zu gestalten, die den Erwartungen der Benutzer gerecht werden und eine positive Benutzererfahrung sicherstellen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wichtig sind hier immer beide Sichtweisen der Entwickler:innen (Was ist gut umsetzbar?) und der UX-Designer:innen (Was ist f\u00fcr den Use Case sinnvoll?) entscheidend, um die Potentiale aus beiden Bereichen in der Ausarbeitung auszusch\u00f6pfen.<\/span><\/p>\n<p>Quellen:<br \/>\nLogo Kreation <em>byte &amp; brew.<\/em> Made with \u2665\ufe0f by inovex.<\/p>\n<p>Mockup Kaffeebohnen Moodimage by berlionemore_contributor. Freepik.<br \/>\nSmashing Magazine. (29. Oktober 2013). <em>Smart Transitions In User Experience Design<\/em>. Abgerufen von <a class=\"MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-gb3rao\" href=\"https:\/\/www.smashingmagazine.com\/2013\/10\/smart-transitions-in-user-experience-design\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.smashingmagazine.com\/2013\/10\/smart-transitions-in-user-experience-design\/<\/a><br \/>\nMaterial Design. (n.d.). <em>Applying Transitions<\/em>. Aufgerufen von <a class=\"MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-gb3rao\" href=\"https:\/\/m3.material.io\/styles\/motion\/transitions\/applying-transitions\" target=\"_blank\" rel=\"noopener\">https:\/\/m3.material.io\/styles\/motion\/transitions\/applying-transitions<\/a><br \/>\nISO. (2010). ISO 9241-210:2010 &#8211; Ergonomics of human-system interaction &#8212; Part 210: Human-centred design for interactive systems. Verf\u00fcgbar \u00fcber ISO Online Browsing Platform: <a class=\"MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-gb3rao\" href=\"https:\/\/www.iso.org\/standard\/52075.html\" target=\"_blank\" rel=\"noopener\">ISO 9241-210:2010<\/a><br \/>\nISO. (2018). ISO 9241-11:2018 &#8211; Ergonomics of human-system interaction &#8212; Part 11: Usability: Definitions and concepts. Verf\u00fcgbar \u00fcber ISO Online Browsing Platform: <a class=\"MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-gb3rao\" href=\"https:\/\/www.iso.org\/standard\/63500.html\" target=\"_blank\" rel=\"noopener\">ISO 9241-11:2018<\/a><br \/>\nNielsen, J. (1994). Enhancing the explanatory power of usability heuristics. Verf\u00fcgbar \u00fcber Nielsen Norman Group: <a class=\"MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-gb3rao\" href=\"https:\/\/static.aminer.org\/pdf\/PDF\/000\/089\/679\/enhancing_the_explanatory_power_of_usability_heuristics.pdf\" target=\"_blank\" rel=\"noopener\">Enhancing the explanatory power of usability heuristics<\/a><\/p>\n<p>&nbsp;<\/p>\n<style>\n    .design-patterns {\n      iframe[title*=\"Design Patterns\"] {\n        width: 100%;\n        max-width: 100%;\n        border-radius: 12px;\n        height: 600px;\n      }\n    }\n  <\/style>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Die Gestaltung einer Benutzeroberfl\u00e4che (UI) und die Schaffung einer optimalen Benutzererfahrung (UX) sind entscheidend f\u00fcr den Erfolg jeder digitalen Anwendung. Der richtige Einsatz von Transitions kann dabei spannende M\u00f6glichkeiten bieten, um eine intuitive Benutzererfahrung zu schaffen. In diesem Beitrag stellen wir \u2013 ein Team aus den Bereichen Frontend und UI\/UX bei inovex \u2013 einen praxisorientierten [&hellip;]<\/p>\n","protected":false},"author":322,"featured_media":55512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[129,130,131,70],"service":[445],"coauthors":[{"id":322,"display_name":"Laura D\u00fcnnwald","user_nicename":"lduennwald"},{"id":29,"display_name":"Daniel Eckelt","user_nicename":"deckelt"},{"id":416,"display_name":"Jann Schulz-Kuhnt","user_nicename":"jschulz-kuhnt"}],"class_list":["post-54713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-animation","tag-css","tag-ui-ux","tag-web","service-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-26T09:53:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-30T12:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1550\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Laura D\u00fcnnwald, Daniel Eckelt, Jann Schulz-Kuhnt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch-1024x581.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura D\u00fcnnwald\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Laura D\u00fcnnwald, Daniel Eckelt, Jann Schulz-Kuhnt\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\"},\"author\":{\"name\":\"Laura D\u00fcnnwald\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/55d4efa7c1292c6233767bdf1d8f3f84\"},\"headline\":\"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps\",\"datePublished\":\"2024-07-26T09:53:26+00:00\",\"dateModified\":\"2024-07-30T12:31:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\"},\"wordCount\":1496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png\",\"keywords\":[\"Animation\",\"CSS\",\"UI\/UX\",\"Web\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\",\"name\":\"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png\",\"datePublished\":\"2024-07-26T09:53:26+00:00\",\"dateModified\":\"2024-07-30T12:31:25+00:00\",\"description\":\"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png\",\"width\":1550,\"height\":880,\"caption\":\"Grafik: Ein Bildschirm der Transitions vom Frontend Development und UX Design zeigt\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inovex.de\/de\/#website\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inovex.de\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inovexde\",\"https:\/\/x.com\/inovexgmbh\",\"https:\/\/www.instagram.com\/inovexlife\/\",\"https:\/\/www.linkedin.com\/company\/inovex\",\"https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/55d4efa7c1292c6233767bdf1d8f3f84\",\"name\":\"Laura D\u00fcnnwald\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/272b2218c1d1dd4b5dd0ebe112dd2dd6\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/926349d28b8eab388d9c9b11ae0f819e336c4dbc52ff64e120aa9c0f0d8eef3c?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/926349d28b8eab388d9c9b11ae0f819e336c4dbc52ff64e120aa9c0f0d8eef3c?s=96&d=retro&r=g\",\"caption\":\"Laura D\u00fcnnwald\"},\"url\":\"https:\/\/www.inovex.de\/de\/blog\/author\/lduennwald\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH","description":"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/","og_locale":"de_DE","og_type":"article","og_title":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH","og_description":"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?","og_url":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2024-07-26T09:53:26+00:00","article_modified_time":"2024-07-30T12:31:25+00:00","og_image":[{"width":1550,"height":880,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png","type":"image\/png"}],"author":"Laura D\u00fcnnwald, Daniel Eckelt, Jann Schulz-Kuhnt","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch-1024x581.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Laura D\u00fcnnwald","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten","Written by":"Laura D\u00fcnnwald, Daniel Eckelt, Jann Schulz-Kuhnt"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/"},"author":{"name":"Laura D\u00fcnnwald","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/55d4efa7c1292c6233767bdf1d8f3f84"},"headline":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps","datePublished":"2024-07-26T09:53:26+00:00","dateModified":"2024-07-30T12:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/"},"wordCount":1496,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png","keywords":["Animation","CSS","UI\/UX","Web"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/","url":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/","name":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png","datePublished":"2024-07-26T09:53:26+00:00","dateModified":"2024-07-30T12:31:25+00:00","description":"Spannende Kollaboration zwischen Frontendentwicklung und UX-Design. Welche Use Cases gibt es f\u00fcr die View-Transition-API in Verbindung mit Design-Patterns?","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/img_Wireframe_Transistions_Isometrisch.png","width":1550,"height":880,"caption":"Grafik: Ein Bildschirm der Transitions vom Frontend Development und UX Design zeigt"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/ein-praktischer-ansatz-fuer-design-patterns-in-data-driven-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Ein praktischer Ansatz f\u00fcr Design Patterns in Data-driven Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/55d4efa7c1292c6233767bdf1d8f3f84","name":"Laura D\u00fcnnwald","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/272b2218c1d1dd4b5dd0ebe112dd2dd6","url":"https:\/\/secure.gravatar.com\/avatar\/926349d28b8eab388d9c9b11ae0f819e336c4dbc52ff64e120aa9c0f0d8eef3c?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/926349d28b8eab388d9c9b11ae0f819e336c4dbc52ff64e120aa9c0f0d8eef3c?s=96&d=retro&r=g","caption":"Laura D\u00fcnnwald"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/lduennwald\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/54713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/322"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=54713"}],"version-history":[{"count":7,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/54713\/revisions"}],"predecessor-version":[{"id":56884,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/54713\/revisions\/56884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/55512"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=54713"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=54713"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=54713"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=54713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}