{"id":63896,"date":"2022-05-10T12:55:06","date_gmt":"2022-05-10T12:55:06","guid":{"rendered":"https:\/\/decode.agency\/?post_type=article&#038;p=63896"},"modified":"2025-10-16T10:42:51","modified_gmt":"2025-10-16T10:42:51","slug":"app-design-bildschirmtypen","status":"publish","type":"article","link":"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/","title":{"rendered":"App-Design: 9 Haupttypen von App-Bildschirmen"},"content":{"rendered":"\n<p>Bildschirme sind f\u00fcr Apps das, was Organe f\u00fcr den menschlichen K\u00f6rper sind.<\/p>\n\n\n\n<p>Jede Komponente ist f\u00fcr sich genommen nutzlos, aber in der richtigen Kombination k\u00f6nnen sie etwas wirklich Au\u00dfergew\u00f6hnliches bewirken.<\/p>\n\n\n\n<p>Im Gegensatz zum K\u00f6rper k\u00f6nnen Apps jedoch aus verschiedenen Kombinationen von Bildschirmen bestehen. <\/p>\n\n\n\n<p>Einige sind universell (wie der Startbildschirm), andere sind spezieller (wie der Audio-Player-Bildschirm).<\/p>\n\n\n\n<p>Als Entwickler ist das Kennenlernen dieser Bildschirme der erste Schritt zur Entwicklung einer fantastischen App. Gehen wir also kurz die g\u00e4ngigsten davon durch.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d298d0eda52\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d298d0eda52\"  aria-label=\"Toggle\" \/><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:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Anmeldebildschirm\" >Anmeldebildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Startbildschirm\" >Startbildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Onboarding-Anleitungsbildschirme\" >Onboarding-Anleitungsbildschirme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Feed-Bildschirm\" >Feed-Bildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Splash-Screen\" >Splash-Screen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Produktkarten-Bildschirm\" >Produktkarten-Bildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Kassenbildschirm\" >Kassenbildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Statistik-Bildschirm\" >Statistik-Bildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Audio-Player-Bildschirm\" >Audio-Player-Bildschirm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/#Dies_sind_nur_die_Grundlagen\" >Dies sind nur die Grundlagen<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Anmeldebildschirm\"><\/span>Anmeldebildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Der Anmeldebildschirm ist die prim\u00e4re M\u00f6glichkeit f\u00fcr Benutzer, sich bei ihrem App-Konto anzumelden.<\/p>\n\n\n\n<p>Auf den ersten Blick scheint es ein trivialer Bildschirm zu sein, deshalb neigen viele Entwickler dazu, ihn zu \u00fcbersehen. Aber die Bedeutung des Anmeldebildschirms kann nicht untersch\u00e4tzt werden. <\/p>\n\n\n\n<p>Wenn er schlecht <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-principles\/\">gestaltet ist<\/a>, kann er <a href=\"https:\/\/decode.agency\/article\/fintech-app-features\/#:~:text=in%20achieving%20that.-,frictionless%20form%20design,-Forms%20are%20parts\" target=\"_blank\" rel=\"noopener\">unn\u00f6tige Reibungsverluste<\/a> verursachen.<\/p>\n\n\n\n<p>Hier sind einige der Elemente, die unserer Meinung nach auf jedem Anmeldebildschirm vorhanden sein sollten, mit freundlicher Genehmigung von Hubspot.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/hubspot-app-google-login.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/uxmag.com\/articles\/app-login-design-choosing-the-right-user-login-option-for-your-app\" target=\"_blank\" rel=\"noopener\">UX-Magazin<\/a><\/p>\n\n\n\n<p>Wie Sie feststellen werden, bietet die Hubspot-App im Vorfeld zwei Optionen: Entweder Sie melden sich bei einem bestehenden Konto an oder Sie melden sich f\u00fcr ein Konto an. <\/p>\n\n\n\n<p>Dies ist ein besserer Ansatz als der Einstieg mit &#8222;Sie haben noch kein Konto? Erstellen Sie eins!&#8220; Es wirkt nicht so aufdringlich und schreckt daher die Nutzer nicht so sehr ab.<\/p>\n\n\n\n<p>Sie werden auch feststellen, dass die App mehrere M\u00f6glichkeiten bietet, sich anzumelden oder einzuloggen, z. B. \u00fcber vorhandene Social-Media-Konten. <\/p>\n\n\n\n<p>Dies vereinfacht die Erstellung eines Kontos erheblich, da sie mit nur einem einzigen Klick m\u00f6glich ist, was die Reibung und die Absprungrate verringert.<\/p>\n\n\n\n<p>Ein weiterer wichtiger Teil der Anmeldebildschirme (oben nicht abgebildet) ist die Wiederherstellung des Kontos. <\/p>\n\n\n\n<p>Denn trotz der zahlreichen Authentifizierungsverfahren, die heutzutage zur Verf\u00fcgung stehen, verlassen sich viele Menschen immer noch auf Passw\u00f6rter, die sie oft vergessen.<\/p>\n\n\n\n<p>Hier ist ein gutes Beispiel von <a href=\"https:\/\/www.etoro.com\/\" target=\"_blank\" rel=\"noopener\">eToro<\/a><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"801\" data-id=\"44190\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot-3.png\" alt=\"\" class=\"wp-image-44190\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot-3.png 370w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot-3-330x714.png 330w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"801\" data-id=\"44191\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot2.png\" alt=\"\" class=\"wp-image-44191\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot2.png 370w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot2-330x714.png 330w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"554\" height=\"1200\" data-id=\"44192\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot3.png\" alt=\"\" class=\"wp-image-44192\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot3.png 554w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot3-330x715.png 330w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/etoro-screenshot3-455x986.png 455w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.etoro.com\/\" target=\"_blank\" rel=\"noopener\">eToro<\/a><\/p>\n\n\n\n<p>Wie Sie sehen k\u00f6nnen, ist das Verfahren von eToro einfach und direkt auf den Punkt gebracht.<\/p>\n\n\n\n<p><a href=\"https:\/\/decode.agency\/article\/app-ux-design-mistakes\/\">UX<\/a> ist f\u00fcr die Wiederherstellung von Konten entscheidend. Die Leute sind bereits mit einem frustrierenden Ereignis konfrontiert (sie haben ihr Passwort vergessen), also sollte Ihre App sie nicht noch weiter ver\u00e4rgern.<\/p>\n\n\n\n<p>Tats\u00e4chlich hatte eToro laut einer <a href=\"https:\/\/www.incognia.com\/blog\/fintech-friction-mobile-login-authentication-password-reset\" target=\"_blank\" rel=\"noopener\">Incognia-Studie<\/a> den niedrigsten Reibungsindex f\u00fcr die Passwortwiederherstellung unter den Finanz-Apps. Es ist also nachahmenswert.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/incognia-app-friction-report.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.incognia.com\/blog\/fintech-friction-mobile-login-authentication-password-reset\" target=\"_blank\" rel=\"noopener\">Incognia<\/a><\/p>\n\n\n\n<p>Das Wichtigste bei einem Anmeldebildschirm ist ein minimalistisches Design. Die Benutzer sollten so schnell wie m\u00f6glich in Ihre App gelangen k\u00f6nnen (egal ob sie sich anmelden oder einloggen).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Startbildschirm\"><\/span>Startbildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Der Startbildschirm ist das wichtigste UI einer jeden App. Er fungiert als Drehscheibe, die alle anderen Bildschirme und Funktionen miteinander verbindet; daher beginnen die meisten Nutzer hier ihre Reise.<\/p>\n\n\n\n<p>Dar\u00fcber hinaus dient der Startbildschirm auch als Dashboard, das den Benutzer \u00fcber wichtige app-bezogene Daten informiert. <\/p>\n\n\n\n<p>Bei einer App f\u00fcr ein intelligentes Haus zeigt der Startbildschirm zum Beispiel wichtige Informationen wie Temperatur und Sicherheit an.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/homey-app-ui-design-tubik.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/blog.tubikstudio.com\/mobile-ui-design-15-basic-types-of-screens\/\" target=\"_blank\" rel=\"noopener\">Tubik<\/a><\/p>\n\n\n\n<p>Die Startbildschirme sind der Klebstoff, der die App zusammenh\u00e4lt, und somit von entscheidender Bedeutung. Daher sollten sie trotz der Menge an Informationen, die sie bieten, sehr benutzerfreundlich und intuitiv sein.<\/p>\n\n\n\n<p>Sie sollten auch eine gute Navigation erm\u00f6glichen. Alles in Ihrer App muss auf die eine oder andere Weise \u00fcber den Startbildschirm zug\u00e4nglich sein. <\/p>\n\n\n\n<p>Eine <strong>Suchleiste <\/strong>eignet sich hierf\u00fcr hervorragend und ist daher ein beliebtes Element des Startbildschirms.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" width=\"800\" height=\"633\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Serch-bar.png\" alt=\"Serchbar\" class=\"wp-image-45188\" style=\"width:800px;height:584px\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Serch-bar.png 800w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Serch-bar-700x554.png 700w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Serch-bar-330x261.png 330w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Serch-bar-455x360.png 455w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<p>Startbildschirme sind auch wichtig, um den Nutzern einen Fahrplan zu geben &#8211; oder die idealen Schritte, die sie unternehmen m\u00fcssen. <\/p>\n\n\n\n<p>Dies ist besonders wichtig f\u00fcr Apps mit Hunderten von Inhalten und Funktionen, bei denen sich die Nutzer in der Masse verlieren k\u00f6nnen.<\/p>\n\n\n\n<p>Die Meditations-App <a href=\"https:\/\/www.headspace.com\/\" target=\"_blank\" rel=\"noopener\">Headspace<\/a> zum Beispiel gibt den Nutzern eine Reihe von t\u00e4glichen Meditationsaufgaben vor, je nach ihrem Ziel. <\/p>\n\n\n\n<p>So wird sichergestellt, dass sie diese trotz eines vollen Terminkalenders sofort erledigen k\u00f6nnen.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Road-map.svg\" alt=\"Roadmap\" class=\"wp-image-45190\" \/><\/figure>\n<\/div>\n\n\n<p>Sie werden auch feststellen, dass Sie mit der Headspace-App Lieblingsinhalte auf dem Startbildschirm hinzuf\u00fcgen k\u00f6nnen. Dies ist ein weiterer Aspekt eines gro\u00dfartigen Startbildschirms <a href=\"https:\/\/decode.agency\/article\/mobile-app-user-retention\/#:~:text=your%20intended%20users.-,personalize%20the%20user%E2%80%99s%20experience,-Adding%20a%20personal\" target=\"_blank\" rel=\"noopener\">&#8211;<\/a> die Personalisierung<strong>. <\/strong><\/p>\n\n\n\n<p>Auf diese Weise finden sich die Benutzer viel besser in der App zurecht, weil sie auf ihre Vorlieben zugeschnitten ist.<\/p>\n\n\n\n<p>Fazit: Der Startbildschirm ist der Nordstern Ihrer App. Es muss der <em>letzte<\/em> Ort sein, an dem die Benutzer verloren gehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Onboarding-Anleitungsbildschirme\"><\/span>Onboarding-Anleitungsbildschirme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/decode.agency\/article\/how-to-improve-app-onboarding\/\" target=\"_blank\" rel=\"noopener\">Onboarding<\/a> ist ein wichtiger Teil der Erstellung und Nutzung einer modernen App. Wenn Sie neue Benutzer anleiten, k\u00f6nnen Sie die Bindungsrate erh\u00f6hen und ihnen eine fantastische Benutzererfahrung bieten.<\/p>\n\n\n\n<p>Daher verdient Ihr Onboarding-Bildschirm genauso viel Aufmerksamkeit wie der Rest Ihrer App &#8211; auch wenn die Nutzer ihn nur einmal durchlaufen werden. <\/p>\n\n\n\n<p>Die goldene Regel lautet hier, die Nutzer <strong>nicht<\/strong> zu \u00fcberfordern. Das ist der schnellste Weg, sie zu verschrecken. Hier sind ein paar Richtlinien, mit denen Designer dies vermeiden k\u00f6nnen:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Group-5776.svg\" alt=\"overload\" class=\"wp-image-45192\" style=\"width:800px;height:280px\" \/><\/figure>\n<\/div>\n\n\n<p><a href=\"https:\/\/decode.agency\/article\/fintech-app-onboarding\/\" target=\"_blank\" rel=\"noopener\">Onboarding<\/a> dient vielen Zwecken, aber einer davon ist das <strong>Sammeln von Informationen<\/strong>. Die Bildschirme f\u00fcr diesen Zweck sollten einfach und unkompliziert sein, um die Reibung zu minimieren. <\/p>\n\n\n\n<p>Versuchen Sie au\u00dferdem, nur eine Frage pro Bildschirm zu stellen, damit die Benutzer nicht \u00fcberfordert werden.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/frame-109.svg\" alt=\"Progress\" class=\"wp-image-45193\" \/><\/figure>\n<\/div>\n\n\n<p>Ein weiterer sinnvoller Onboarding-Bildschirm ist eine Diashow, in der die Funktionen und\/oder Vorteile Ihrer App vorgestellt werden. <\/p>\n\n\n\n<p>Ziel ist es, die Nutzer dazu zu bewegen, die App zu nutzen und sich (in den meisten F\u00e4llen) f\u00fcr ein Konto anzumelden.<\/p>\n\n\n\n<p>Als Faustregel gilt: Konzentrieren Sie sich am besten auf drei Kernfunktionen oder Vorteile, wie bei der Jira-App.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Showcase.svg\" alt=\"Showcase\" class=\"wp-image-45194\" style=\"width:800px;height:410px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Ein wichtiger Bestandteil eines jeden Onboarding-Bildschirms ist schlie\u00dflich die Schaltfl\u00e4che \u00dcberspringen. Machen Sie sich klar, dass nicht jeder bereit ist, das Onboarding zu durchlaufen; manche brauchen es vielleicht nicht einmal. <\/p>\n\n\n\n<p>Wenn Sie den Benutzern das \u00dcberspringen erm\u00f6glichen, vermeiden Sie Frustrationen bei diesen Benutzern.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/skip-button-.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/decode.agency\/article\/app-onboarding-best-practices\/\" target=\"_blank\" rel=\"noopener\">DECODE<\/a><\/p>\n\n\n\n<p>Wenn Sie weitere Tipps zur Gestaltung effektiver Onboarding-Flows und -Screens ben\u00f6tigen, lesen Sie <a href=\"https:\/\/decode.agency\/article\/app-onboarding-best-practices\/\" target=\"_blank\" rel=\"noopener\">diesen hilfreichen Artikel<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Feed-Bildschirm\"><\/span>Feed-Bildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Feed-Bildschirme zeigen die neuesten Inhalte an, z. B. Nachrichten oder Beitr\u00e4ge. Sie werden oft in Anwendungen mit einem konstanten Datenstrom angezeigt, z. B. in sozialen Medien.<\/p>\n\n\n\n<p>Das vielleicht beste Beispiel f\u00fcr einen Feed-Bildschirm ist der Facebook-Feed. Er ist auch ein guter Ma\u00dfstab daf\u00fcr, welche Elemente in einem Feed-Bildschirm enthalten sein sollten.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/facebook-feed.png\" alt=\"\" style=\"width:208px;height:356px\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Feed_(Facebook)#\/media\/File:Facebook_mobile.png\" target=\"_blank\" rel=\"noopener\">Wikipedia<\/a><\/p>\n\n\n\n<p>Wie bei allen App-Bildschirmen ist auch bei Feed-Bildschirmen Einfachheit das oberste Gebot. Daher sollten nur wenige UI-Elemente den Informationen, die dem Nutzer pr\u00e4sentiert werden, im Weg stehen. <\/p>\n\n\n\n<p>Ein weiterer Aspekt ist die richtige Aufteilung der Informationen auf dem Feed-Bildschirm. <\/p>\n\n\n\n<p>Zum Beispiel sollten visuelle Indikatoren es den Nutzern erm\u00f6glichen, eine Nachricht oder einen Beitrag von anderen im Feed zu unterscheiden.<\/p>\n\n\n\n<p>Die Instagram-App macht dies recht gut. <\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/instagram-feed.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.instagram.com\" target=\"_blank\" rel=\"noopener\">Instagram<\/a><\/p>\n\n\n\n<p>In diesem Fall dient die Kopfzeile mit dem Symbol als Trennelement, das den Nutzern auf subtile Weise mitteilt, wann ein Beitrag beginnt und endet. <\/p>\n\n\n\n<p>Auch die Abmessungen der einzelnen Beitr\u00e4ge sind in etwa gleich, was f\u00fcr Vorhersehbarkeit beim Scrollen sorgt.<\/p>\n\n\n\n<p>Und schlie\u00dflich sollte man bedenken, dass der typische Nutzer relativ schnell durch den Feed-Bildschirm scrollt. Das UI-Design der einzelnen Elemente ist wichtig, um sicherzustellen, dass der Nutzer keine wichtigen Inhalte verpasst.<\/p>\n\n\n\n<p>Nachrichten-Apps wie das <a href=\"https:\/\/www.wsj.com\/\" target=\"_blank\" rel=\"noopener\">Wall Street Journal<\/a> enthalten zum Beispiel eine \u00dcberschrift und eine Zusammenfassung des Inhalts jeder Nachricht. <\/p>\n\n\n\n<p>Dies hilft den Nutzern bei der Entscheidung, ob es sich lohnt, auf den Inhalt zu klicken oder nicht.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/news-feed-example-screenshot.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.wsj.com\/\" target=\"_blank\" rel=\"noopener\">WSJ<\/a><\/p>\n\n\n\n<p>Minimalismus und Einfachheit sind die wichtigsten Merkmale eines News Feeds. So wird sichergestellt, dass die Nutzer die Informationen erhalten, die sie brauchen, wenn sie sie brauchen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Splash-Screen\"><\/span>Splash-Screen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ein Startbildschirm ist oft das erste, was ein Nutzer sieht, wenn er Ihre App \u00f6ffnet. In der Regel handelt es sich dabei um einen minimalistischen Bildschirm, auf dem das Logo der App im Mittelpunkt steht.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/splash-screen.svg\" alt=\"Splash screen\" class=\"wp-image-45195\" \/><\/figure>\n<\/div>\n\n\n<p>Der Splash-Screen dient aber nicht nur der Markenbildung, sondern hat auch eine wichtige, wenn auch versteckte Funktion. <\/p>\n\n\n\n<p>Sie verbergen die Tatsache, dass Ihre App geladen wird, und bieten den Nutzern etwas Besseres, auf das sie schauen k\u00f6nnen, w\u00e4hrend sie warten.<\/p>\n\n\n\n<p>Das ist in der Tat besser, als den Nutzern eine eingefrorene Ladeoberfl\u00e4che zu zeigen, die noch nicht fertig ist, denn das k\u00f6nnte dazu f\u00fchren, dass die Nutzer denken, die App sei kaputt.<\/p>\n\n\n\n<p>F\u00fcr die Gestaltung von Startbildschirmen gibt es nur wenige Richtlinien, au\u00dfer dass sie einfach gehalten werden sollten. Er sollte h\u00f6chstens ein visuelles Element und ein paar Worte in der Mitte des Bildschirms enthalten. <\/p>\n\n\n\n<p>Das liegt daran, dass Startbildschirme leicht und schnell ladend sein sollten.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/what-splas-screens-should-contain.svg\" alt=\"What splash screen should contain\" class=\"wp-image-45196\" \/><\/figure>\n<\/div>\n\n\n<p>Tats\u00e4chlich sollten Startbildschirme h\u00f6chstens <strong>3 Sekunden<\/strong> lang sichtbar sein &#8211; bei bestimmten Anwendungen sogar noch k\u00fcrzer. <\/p>\n\n\n\n<p>Wenn Sie ihn zu lang machen, wird er Ihre Benutzer jedes Mal, wenn sie die Anwendung \u00f6ffnen, ver\u00e4rgern. Wenn Sie Animationen hinzuf\u00fcgen m\u00f6chten, sollten Sie dies sparsam tun.<\/p>\n\n\n\n<p>Manchmal wird Ihr Begr\u00fc\u00dfungsbildschirm jedoch unweigerlich zu lange dauern, zum Beispiel wenn die App zu lange zum Laden braucht oder eine langsame Netzwerkverbindung besteht.<\/p>\n\n\n\n<p>F\u00fcr diesen Fall sollten Sie eine Ausweichm\u00f6glichkeit haben.<\/p>\n\n\n\n<p>Am besten ist es, einen Ladeindikator anzuzeigen, z. B. einen Fortschrittsbalken oder ein sich drehendes Rad. Damit wird dem Benutzer mitgeteilt: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8222;Entspannen Sie sich, die Dinge werden im Hintergrund geladen. Das ist ganz normal.&#8220; <\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Loading-screen.svg\" alt=\"Loading\" class=\"wp-image-45197\" \/><\/figure>\n<\/div>\n\n\n<p>Wenn die Anwendung aufgrund eines Fehlers nicht ge\u00f6ffnet werden kann, ist es sinnvoll, dies auf dem Startbildschirm zu zeigen. Auch hier gilt: Wenn Sie den Benutzer auf dem Laufenden halten, ist Ihre App reaktionsschnell und benutzerfreundlich.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/faliure-1.svg\" alt=\"\" class=\"wp-image-45199\"><\/figure>\n<\/div>\n\n\n<p>Splash-Screens m\u00f6gen einfach sein, aber sie spielen eine wichtige Rolle f\u00fcr die UX. Es lohnt sich also, ihnen angemessene Aufmerksamkeit zu schenken.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Produktkarten-Bildschirm\"><\/span>Produktkarten-Bildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Produktbildschirme sind die Hauptst\u00fctze von E-Commerce-Apps wie Amazon und Etsy.<\/p>\n\n\n\n<p>Ihr Zweck ist es, den Nutzern die Details eines ausgew\u00e4hlten Produkts zu zeigen, um ihre Kaufentscheidung zu unterst\u00fctzen. <\/p>\n\n\n\n<p>Gleichzeitig sollten aber auch UX-Regeln beachtet werden, indem die Schnittstelle nicht zu un\u00fcbersichtlich wird.<\/p>\n\n\n\n<p>Die Informationshierarchie ist das wichtigste Element f\u00fcr effektive Produktbildschirme. Unter UX versteht man die visuelle Anordnung von Elementen auf einem Bildschirm nach ihrer Wichtigkeit. <\/p>\n\n\n\n<p>Die wichtigsten Funktionen werden hervorgehoben und betont, w\u00e4hrend die weniger wichtigen in den Hintergrund r\u00fccken.<\/p>\n\n\n\n<p>Ohne Informationshierarchie sehen die Produktbildschirme wie ein einheitlicher Textblob aus, der nur schwer zu erfassen ist.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Hierarchy.svg\" alt=\"\" class=\"wp-image-45200\"><\/figure>\n<\/div>\n\n\n<p>Sie k\u00f6nnen diese Hierarchie auf dem Produktbildschirm der Amazon-App in Aktion sehen.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/amazon-app-product-screen.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.amazon.com\/\" target=\"_blank\" rel=\"noopener\">Amazon<\/a><\/p>\n\n\n\n<p>Beachten Sie, dass die wichtigsten Informationen &#8211; das Produktfoto &#8211; den meisten Platz einnehmen. <\/p>\n\n\n\n<p>Die Sternebewertung, die Farbe und der Preis (wenn Sie ein wenig nach unten scrollen) nehmen ebenfalls prominente Positionen im <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-principles\/\" target=\"_blank\" rel=\"noopener\">Design<\/a> ein.<\/p>\n\n\n\n<p>Das ist kein Zufall. Dies sind die Auswahlkriterien, auf die ein typischer K\u00e4ufer beim Online-Einkauf zuerst schaut. <\/p>\n\n\n\n<p>Erst nach dem Scannen scrollen die Nutzer weiter nach unten, um die Beschreibung des Produkts, die Abmessungen, die Merkmale usw. zu lesen.<\/p>\n\n\n\n<p>Dies ist eine viel effizientere Art des Online-Shoppings, als jede einzelne Produktseite zu lesen.<\/p>\n\n\n\n<p>Die Vermietungsseite von Airbnb, bei der die Vermietungen im Wesentlichen das verkaufte Produkt sind, bietet eine \u00e4hnliche Struktur.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Airbnbs-rental-page.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.airbnb.com\/\" target=\"_blank\" rel=\"noopener\">Airbnb<\/a><\/p>\n\n\n\n<p>Wie auf der Amazon-Seite werden auch auf der Produktseite der Airbnb-App Fotos und Preise hervorgehoben. <\/p>\n\n\n\n<p>Allerdings stehen hier bestimmte Elemente viel st\u00e4rker im Vordergrund, z. B. die technischen Daten der Unterkunft (Zimmer und B\u00e4der). Auch die Kosteneinsparungen sind viel deutlicher erkennbar.<\/p>\n\n\n\n<p>All dies spiegelt nat\u00fcrlich wider, wie Reisende die Plattform durchsuchen.<\/p>\n\n\n\n<p>Bei der Gestaltung von Produktseiten hat <a href=\"https:\/\/decode.agency\/article\/app-market-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">gr\u00fcndliche Marktforschung<\/a> wohl den gr\u00f6\u00dften Einfluss.<\/p>\n\n\n\n<p>Denn nur wenn Sie wissen, worauf es Ihren Kunden ankommt, k\u00f6nnen Sie eine geeignete Informationshierarchie f\u00fcr Ihre Produktseite entwickeln.<\/p>\n\n\n\n<p>Aber Produktseiten sind nur ein Teil der Gleichung f\u00fcr E-Commerce-Anwendungen. Der Kassenbildschirm ist die andere Seite davon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kassenbildschirm\"><\/span>Kassenbildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Der Kassenbildschirm ist vielleicht der wichtigste Teil jeder Einzelhandels-App, denn hier werden Ihre Einnahmen bestimmt.<\/p>\n\n\n\n<p>Es spielt keine Rolle, ob Sie eine benutzerfreundliche App haben; wenn Sie beim Kassenbildschirm versagen, wird sie nicht erfolgreich sein.<\/p>\n\n\n\n<p>Und wenn Sie davon \u00fcberzeugt werden m\u00fcssen, hilft Ihnen vielleicht diese Infografik von <a href=\"https:\/\/clevertap.com\/blog\/mobile-checkout\/\" target=\"_blank\" rel=\"noopener\">CleverTap<\/a> weiter.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/07\/Frame-1634.svg\" alt=\"\" class=\"wp-image-45208\"><\/figure>\n<\/div>\n\n\n<p>Warum schlie\u00dfen also nur 20 % der Nutzer den Bezahlvorgang ab? Meistens liegt es an UX-Problemen. <\/p>\n\n\n\n<p>Und die Optimierung von Checkout-Formularen ist vielleicht der effektivste Weg, um viele dieser Hindernisse zu beseitigen.<\/p>\n\n\n\n<p>Das bedeutet, dass nur die Informationen abgefragt werden, die f\u00fcr den Abschluss der Transaktion erforderlich sind. Wenn sie als Gast einchecken k\u00f6nnen (wodurch die Notwendigkeit entf\u00e4llt, ein Konto zu erstellen), ist das umso besser. <\/p>\n\n\n\n<p>Tats\u00e4chlich war <a href=\"https:\/\/www.layer0.co\/post\/the-truth-about-guest-checkout#:~:text=shoppers%20are%201.2%20times%20as%20likely%20to%20select%20guest%20checkout%20rather%20than%20opting%20to%20log%20in.\" target=\"_blank\" rel=\"noopener\">die Wahrscheinlichkeit, dass<\/a> die Nutzer diese Option w\u00e4hlten, <a href=\"https:\/\/www.layer0.co\/post\/the-truth-about-guest-checkout#:~:text=shoppers%20are%201.2%20times%20as%20likely%20to%20select%20guest%20checkout%20rather%20than%20opting%20to%20log%20in.\" target=\"_blank\" rel=\"noopener\">1,2-mal gr\u00f6\u00dfer<\/a> als die, sich einzuloggen.<\/p>\n\n\n\n<p>Die Verringerung der Anzahl der Schritte (und damit der Bildschirme) sollte oberste Priorit\u00e4t haben. F\u00fcllen Sie Felder vor, wann immer Sie k\u00f6nnen. <\/p>\n\n\n\n<p>Oder noch besser: Erlauben Sie angemeldeten Benutzern, ganze Bildschirme zu \u00fcberspringen. <a href=\"https:\/\/www.layer0.co\/post\/the-truth-about-guest-checkout#:~:text=while%20on%20average%2C%20the%20conversions%20for%20logged-in%20users%20and%20guest%20users%20were%20about%20the%20same%2C%20for%20some%20sites%2C%20logged-in%20users%20actually%20had%20lower%20conversion%20rates.\" target=\"_blank\" rel=\"noopener\">Eine Studie<\/a> ergab, dass dies zu h\u00f6heren Konversionsraten f\u00fchrt.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Group-5777.svg\" alt=\"\" class=\"wp-image-45202\"><\/figure>\n<\/div>\n\n\n<p>Der zweite Ablauf in der Abbildung oben hatte h\u00f6here Konversionsraten.<\/p>\n\n\n\n<p>Denken Sie daran, dass Checkout-Seiten nur ein Ziel haben: die Konversionsrate zu erh\u00f6hen. Alles, vom nahtlosen Design der Benutzeroberfl\u00e4che bis hin zu gro\u00dfartigen Texten, tr\u00e4gt dazu bei, mehr Verk\u00e4ufe abzuschlie\u00dfen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Statistik-Bildschirm\"><\/span>Statistik-Bildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Viele Apps, vor allem in der Fintech-Nische, nutzen Statistikbildschirme in gro\u00dfem Umfang. Ihr Zweck ist es, dem Nutzer relevante Daten anzuzeigen.<\/p>\n\n\n\n<p>Hier ist ein Beispiel f\u00fcr einen Statistikbildschirm in der Finanzbranche.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image size-full is-style-default aligncenter\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/07\/Frame-1680-1.svg\" alt=\"\" class=\"wp-image-45207\"><\/figure>\n<\/div>\n\n\n<p>Anhand des obigen Bildschirms k\u00f6nnen Sie viel dar\u00fcber erfahren, was einen guten Statistikbildschirm ausmacht.<\/p>\n\n\n\n<p>Der vielleicht wichtigste Punkt ist die <a href=\"https:\/\/decode.agency\/article\/ux-trends\/#:~:text=try%20it%20out%3F-,make%20data%20visual,-Basically%2C%20data%20visualization\" target=\"_blank\" rel=\"noopener\">Visualisierung &#8211; also die<\/a>Darstellung von Daten mit grafischen Elementen wie Diagrammen und Tabellen. <\/p>\n\n\n\n<p>Auf diese Weise lassen sich Informationen f\u00fcr Gelegenheitsnutzer viel einfacher und interessanter darstellen.<\/p>\n\n\n\n<p>Dar\u00fcber hinaus k\u00f6nnen die Daten durch die Visualisierung auch kompakter dargestellt werden, so dass der Bildschirm nicht \u00fcberladen wird.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/Data-visualization-UX.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/decode.agency\/article\/ux-trends\/\" target=\"_blank\" rel=\"noopener\">DECODE<\/a><\/p>\n\n\n\n<p>Allerdings sollte man es mit der Visualisierung auch nicht \u00fcbertreiben. Platzieren Sie nicht mehr als zwei Elemente gleichzeitig auf dem Bildschirm. <\/p>\n\n\n\n<p>Ein gutes Beispiel ist dieser Bildschirm von <a href=\"https:\/\/mint.com\/\" target=\"_blank\" rel=\"noopener\">Mint<\/a>. Beachten Sie, wie sch\u00f6n die Daten auf dem Statistikbildschirm dank einer kontrollierten Mischung aus visuellen Elementen, Text und Farbhinweisen angezeigt werden.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/data-visualization-in-personal-finance-apps.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/relevant.software\/blog\/personal-finance-app-like-mint\/\" target=\"_blank\" rel=\"noopener\">Relevant<\/a><\/p>\n\n\n\n<p>Statistikbildschirme geh\u00f6ren zu den gr\u00f6\u00dften Herausforderungen bei der Gestaltung, vor allem, wenn Sie viele Daten pr\u00e4sentieren m\u00fcssen. Es kommt darauf an, was man weglassen und was man einf\u00fcgen will.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Audio-Player-Bildschirm\"><\/span>Audio-Player-Bildschirm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ein Player-Bildschirm ist genau das, was es klingt &#8211; hier k\u00f6nnen Benutzer Audiotitel in einer Musik-App abspielen.<\/p>\n\n\n\n<p>Wenn Sie wissen m\u00f6chten, wie der ideale Audioplayer-Bildschirm aussehen sollte, dann schauen Sie sich <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a> an<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/audio-player-screen.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a><\/p>\n\n\n\n<p>Wie Sie sehen k\u00f6nnen, gibt er dem H\u00f6rer alle Kontrollm\u00f6glichkeiten, die er braucht, um sein H\u00f6rerlebnis zu optimieren. <\/p>\n\n\n\n<p>Neben den \u00fcblichen Befehlen wie <em>&#8222;Play&#8220;<\/em> und <em>&#8222;Next&#8220;<\/em> kann der Nutzer auch ganz einfach durch den Track scrollen.<\/p>\n\n\n\n<p>Der gesamte Bildschirm ist minimalistisch gestaltet und konzentriert sich auf die Musik und das Albumcover.<\/p>\n\n\n\n<p>Was uns am Spotify-Player au\u00dferdem gef\u00e4llt, ist die Tatsache, dass er die Steuerelemente an das abgespielte Medium anpasst.<\/p>\n\n\n\n<p>Wenn Sie z. B. einen Podcast abspielen, erhalten Sie zwei neue Steuerelemente, mit denen Sie 15 Sekunden lang vor- und zur\u00fcckspulen k\u00f6nnen. <\/p>\n\n\n\n<p>Das ist sehr n\u00fctzlich, wenn man das Gesagte verpasst hat und ein wenig zur\u00fcckspulen m\u00f6chte.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/05\/worldly-screenshot.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a><\/p>\n\n\n\n<p>Das Entwerfen von Audiosteuerungen ist vielleicht am einfachsten, weil die Konventionen bereits ziemlich gut etabliert sind. Das erlaubt es Ihnen, mit anderen Elementen kreativ zu werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dies_sind_nur_die_Grundlagen\"><\/span>Dies sind nur die Grundlagen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wir haben nur einen kleinen Teil der Bildschirme behandelt, die in modernen Apps zu sehen sind.<\/p>\n\n\n\n<p id=\"h.30j0zll\">Bei der heutigen Vielfalt gibt es noch ein Dutzend mehr, die wir nicht besprochen haben, wie z. B. Chat-Bildschirme oder Kartenbildschirme bei Navigationsanwendungen.<\/p>\n\n\n\n<p>Eines haben sie jedoch gemeinsam: Sie alle ben\u00f6tigen ein gutes <a href=\"https:\/\/decode.agency\/article\/fintech-app-ux-tips\/\" target=\"_blank\" rel=\"noopener\">UX-Design<\/a>, um effektiv zu sein.<\/p>\n\n\n\n<p>M\u00f6chten Sie mehr erfahren? Sehen Sie sich unsere \u00dcbersicht \u00fcber die <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-tools\/\" target=\"_blank\" rel=\"noopener\">besten Design-Tools f\u00fcr App-Entwickler<\/a> an. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Artikel ist eine Kurzanleitung zu den g\u00e4ngigsten Bildschirmen in einer App. Wir behandeln 9 Haupttypen und helfen Ihnen dabei, eine gro\u00dfartige App zu erstellen.<\/p>\n","protected":false},"featured_media":57516,"template":"","tags":[],"article_category":[],"class_list":["post-63896","article","type-article","status-publish","has-post-thumbnail","hentry"],"cmb2":{"custom_author_metabox":{"custom_author1_id":"60996","custom_author2_id":"","custom_author3_id":""},"pages_metabox":{"page_footer_cta":"cta3"},"feature_metabox":{"featured_blog_post":""},"related_article_metabox":{"related_article_id_1":"63892","related_article_id_2":"44481","related_article_id_3":"63890"}},"_links":{"self":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article\/63896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/types\/article"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media\/57516"}],"wp:attachment":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media?parent=63896"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/tags?post=63896"},{"taxonomy":"article_category","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article_category?post=63896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}