{"id":63890,"date":"2022-09-19T12:33:33","date_gmt":"2022-09-19T12:33:33","guid":{"rendered":"https:\/\/decode.agency\/?post_type=article&#038;p=63890"},"modified":"2025-08-25T07:21:12","modified_gmt":"2025-08-25T07:21:12","slug":"mobile-app-design-elemente","status":"publish","type":"article","link":"https:\/\/decode.agency\/de\/article\/mobile-app-design-elemente\/","title":{"rendered":"17 Elemente f\u00fcr die Gestaltung einer gro\u00dfartigen mobilen App"},"content":{"rendered":"\n<p>F\u00fcr jeden Handwerker ist die Beherrschung seiner <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-tools\/\" target=\"_blank\" rel=\"noopener\">Werkzeuge<\/a> unerl\u00e4sslich.<\/p>\n\n\n\n<p>Ein Maler muss die verschiedenen Arten von Farben kennen und wissen, was sie bewirken. <\/p>\n\n\n\n<p>Ein Zimmermann muss den Unterschied zwischen einem Hammer und einem Schl\u00e4gel kennen und wissen, wann er beide einsetzen muss.<\/p>\n\n\n\n<p>Und ein Komponist kann unm\u00f6glich ein Lied schreiben, wenn er die Noten nicht kennt.<\/p>\n\n\n\n<p>So ist es auch bei den Designern von mobilen Anwendungen.<\/p>\n\n\n\n<p>Die Werkzeuge ihrer Wahl sind die verschiedenen UI-Komponenten, die es ihnen erm\u00f6glichen, au\u00dfergew\u00f6hnliche mobile Anwendungen zu erstellen, wenn sie sorgf\u00e4ltig zusammengesetzt werden.<\/p>\n\n\n\n<p id=\"h.30j0zll\">Hier sind 17 dieser Elemente, die Sie verwenden werden.<\/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-69d11122b7332\" 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-69d11122b7332\"  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\/mobile-app-design-elemente\/#Eingabesteuerungskomponenten\" >Eingabesteuerungskomponenten<\/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\/mobile-app-design-elemente\/#Komponenten_zur_Navigation\" >Komponenten zur Navigation<\/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\/mobile-app-design-elemente\/#Informative_Komponenten\" >Informative Komponenten<\/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\/mobile-app-design-elemente\/#Container-Komponenten\" >Container-Komponenten<\/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\/mobile-app-design-elemente\/#UI-Komponenten_sind_nur_der_Anfang\" >UI-Komponenten sind nur der Anfang<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Eingabesteuerungskomponenten\"><\/span>Eingabesteuerungskomponenten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Mit Eingabesteuerungskomponenten k\u00f6nnen Sie Informationen eingeben oder Ihre App anweisen, etwas zu tun. <\/p>\n\n\n\n<p>Ohne sie haben Sie meist eine statische App, die nichts tut! Hier sind einige der wichtigsten Elemente, die Sie verwenden werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schaltfl\u00e4chen<\/h3>\n\n\n\n<p>Schaltfl\u00e4chen sind Elemente, die beim Antippen eine Aktion ausf\u00fchren, z. B. das Absenden eines Formulars oder das Schlie\u00dfen eines Fensters.<\/p>\n\n\n\n<p>Sie sind oft rechteckig mit abgerundeten Ecken. Die Beschriftung kann entweder ein Bild oder ein Text sein, der gut lesbar und klar formuliert sein sollte.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"875\" height=\"275\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/buttons-example.png\" alt=\"\" class=\"wp-image-45947\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/buttons-example.png 875w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/buttons-example-700x220.png 700w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/buttons-example-330x104.png 330w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/buttons-example-455x143.png 455w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/sketch-app-sources\/beginners-guide-to-designing-nice-buttons-for-your-app-using-sketch-404e264d16c6\" target=\"_blank\" rel=\"noopener\">Linda Wilson | Medium<\/a><\/p>\n\n\n\n<p>Schaltfl\u00e4chen haben in der Regel helle Farben, die das Auge anziehen, z. B. Rot und Gelb. Der Grund daf\u00fcr ist, dass die meisten Schaltfl\u00e4chen sehr wichtige Elemente sind und daher jederzeit auffallen sollten.<\/p>\n\n\n\n<p>Sie k\u00f6nnen auch daf\u00fcr sorgen, dass Schaltfl\u00e4chen auf Benutzereingaben reagieren, indem sie zum Beispiel die Farbe \u00e4ndern, wenn Sie auf sie tippen. Dies ist eine gute Praxis f\u00fcr die Benutzerfreundlichkeit, da Ihre App dadurch reaktionsf\u00e4higer wird.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Textfelder<\/h3>\n\n\n\n<p>Textfelder sind UI-Elemente, in die man W\u00f6rter eingeben kann. Sie sind oft Teil eines Formulars.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Text-fields.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.sketchappsources.com\/free-source\/3674-material-design-outlined-text-field-sketch-freebie-resource.html\" target=\"_blank\" rel=\"noopener\">Sketch App Sources<\/a><\/p>\n\n\n\n<p>Eine gute Praxis f\u00fcr Textfelder ist es, Indikatoren zu haben, die ihren Status mitteilen. Meistens geschieht dies mit farbigen Umrandungen oder kleinen Symbolen.<\/p>\n\n\n\n<p>Ein rotes Textfeld kann z. B. anzeigen, dass Sie etwas Falsches eingegeben haben, w\u00e4hrend ein ausgegrauter Rahmen bedeutet, dass das Textfeld inaktiv ist.<\/p>\n\n\n\n<p>Es ist auch wichtig, die Gr\u00f6\u00dfe des Textfelds an die gesch\u00e4tzte Eingabel\u00e4nge anzupassen. Dies verhindert ein unangenehmes Beschneiden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dropdown-Listen<\/h3>\n\n\n\n<p>Eine Dropdown-Liste ist ein Element, das eine Liste von Optionen anzeigt, wenn Sie es antippen. Sie k\u00f6nnen nur ein Element aus dieser Liste ausw\u00e4hlen, das dann als Standard angezeigt wird.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Dropdown-list-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.sketchappsources.com\/resources\/source-image\/dropdown-hernansartorio.png\" target=\"_blank\" rel=\"noopener\">Sketch App Sources<\/a><\/p>\n\n\n\n<p>Dropdown-Listen sind oft Teil eines Formulars (auf das wir sp\u00e4ter in diesem Artikel eingehen werden). Sie sind n\u00fctzlich, um lange und <strong>variable<\/strong> Listen von Elementen zu pr\u00e4sentieren, ohne zu viel Platz zu beanspruchen.<\/p>\n\n\n\n<p>Nehmen wir zum Beispiel an, Sie m\u00f6chten, dass die Benutzer zwischen den Mitarbeitern Ihres Unternehmens w\u00e4hlen k\u00f6nnen. Ein Dropdown ist die beste L\u00f6sung, da sich die Auswahlm\u00f6glichkeiten (Mitarbeiter) im Laufe der Zeit \u00e4ndern k\u00f6nnen.<\/p>\n\n\n\n<p>Wie Textfelder und Schaltfl\u00e4chen k\u00f6nnen auch Dropdown-Listen reaktionsf\u00e4hig sein, d. h., sie k\u00f6nnen die Farbe des Rahmens \u00e4ndern, wenn Sie darauf tippen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optionsfelder<\/h3>\n\n\n\n<p>Wie bei einer Dropdown-Liste k\u00f6nnen Sie auch bei einer Optionsschaltfl\u00e4che eine Option aus mehreren M\u00f6glichkeiten ausw\u00e4hlen. In diesem Fall sind jedoch alle Elemente bereits vorgegeben. Ung\u00fcltige Auswahlm\u00f6glichkeiten werden ausgegraut.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Example-radio-button-group-with-5-radio-buttons-the-first-one-is-selected-and-the-last-one-is-disabled..png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/material.io\/develop\/android\/components\/radiobuttons\" target=\"_blank\" rel=\"noopener\">Material.io<\/a><\/p>\n\n\n\n<p>Mit Optionsfeldern k\u00f6nnen Sie eine lange, aber <strong>feste <\/strong>Liste von Elementen pr\u00e4sentieren, von denen Sie sicher sind, dass sie sich in Zukunft nicht \u00e4ndern werden. <\/p>\n\n\n\n<p>Wochentage oder Monate eines Jahres sind ein gutes Beispiel. Sie sind auch beliebte Elemente bei der Konfiguration von Einstellungen in Ihrer App.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kontrollk\u00e4stchen<\/h3>\n\n\n\n<p>Ein Kontrollk\u00e4stchen ist einem Optionsfeld insofern \u00e4hnlich, als es eine Liste fester Optionen enth\u00e4lt, aus denen Sie w\u00e4hlen k\u00f6nnen. Der gro\u00dfe Unterschied besteht jedoch darin, dass Sie mehr als ein Element auf einmal ausw\u00e4hlen k\u00f6nnen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/List-of-meal-options-pickles-tomato-lettuce-and-cheese.-Each-option-has-a-checkbox.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/material.io\/components\/checkboxes\" target=\"_blank\" rel=\"noopener\">Material.io<\/a><\/p>\n\n\n\n<p>Kontrollk\u00e4stchen sind n\u00fctzlich f\u00fcr Fragen, die mehr als eine Eingabe zulassen. In einer Gesundheits-App k\u00f6nnen die Nutzer zum Beispiel aufgefordert werden, alle auf sie zutreffenden Symptome anzukreuzen. <\/p>\n\n\n\n<p>Dieses Element wird h\u00e4ufig in Form einer vertikalen Liste dargestellt, kann aber auch in mehreren Spalten angeordnet werden. Dies ist besonders n\u00fctzlich, wenn Sie Listen miteinander vergleichen wollen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kippschalter<\/h3>\n\n\n\n<p>Ein Kippschalter ist im Grunde ein Ein-\/Aus-Schalter, der es dem Benutzer erm\u00f6glicht, eine Variable zu setzen, indem er zwischen zwei Zust\u00e4nden w\u00e4hlt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/toggle-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/uxmovement.medium.com\/the-confusing-state-of-toggle-switches-80f8d08985c1\" target=\"_blank\" rel=\"noopener\">UX-Bewegung<\/a><\/p>\n\n\n\n<p>Ein Kippschalter ist immer dann ideal, wenn der Benutzer etwas in Ihrer Anwendung aktivieren oder deaktivieren soll. Es ist daher nicht verwunderlich, dass dieses Element meist in den Einstellungen Ihrer App verwendet wird.<\/p>\n\n\n\n<p>Bei Kippschaltern empfiehlt es sich, den <em>eingeschalteten <\/em>Zustand visuell vom <em>ausgeschalteten <\/em>Zustand zu unterscheiden, damit der Benutzer auf einen Blick zwischen beiden unterscheiden kann. <\/p>\n\n\n\n<p>Ein g\u00e4ngiger Ansatz ist die Verwendung von Grau, um den inaktiven Zustand darzustellen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Komponenten_zur_Navigation\"><\/span>Komponenten zur Navigation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Navigationskomponenten helfen den Benutzern, sich durch die Anwendung zu bewegen. Sie sind von entscheidender Bedeutung, da der Fluss der App ohne sie gest\u00f6rt w\u00fcrde. Das kann zu <a href=\"https:\/\/decode.agency\/article\/fintech-app-ux-tips\/#:~:text=to%20pull%20off-,simplify%20the%20user%20flow,-One%20of%20the\" target=\"_blank\" rel=\"noopener\">Reibungen<\/a> f\u00fchren.<\/p>\n\n\n\n<p>Die besten Navigationsschemata sind intuitiv und vorhersehbar. Hier sind einige Komponenten, die Ihnen dabei helfen k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hamburger-Men\u00fcs<\/h3>\n\n\n\n<p>Das Hamburger-Men\u00fc hei\u00dft so, weil das dreizeilige Symbol wie eine abstrakte Darstellung eines Burgers aussieht. Wenn es angeklickt wird, erscheint ein verstecktes Men\u00fc.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/The-hamburger-menu-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2020\/07\/hamburger-menu-telegram.png\" target=\"_blank\" rel=\"noopener\">Just in Mind<\/a><\/p>\n\n\n\n<p>Das Hamburger-Men\u00fc ist ein beliebtes Navigationsschema in Anwendungen, weil es allgemein bekannt ist. Die Menschen wissen instinktiv, was passiert, wenn sie darauf tippen.<\/p>\n\n\n\n<p>Au\u00dferdem k\u00f6nnen Sie mit versteckten Men\u00fcs umfangreiche Men\u00fcs einf\u00fcgen, ohne den Bildschirm zu \u00fcberladen. <\/p>\n\n\n\n<p>Es ist auch gut f\u00fcr die Benutzerfreundlichkeit, da die Benutzer das Seitenmen\u00fc nur bei Bedarf aufrufen k\u00f6nnen, was die \u00dcberforderung reduziert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Seitenleisten<\/h3>\n\n\n\n<p>Eine Seitenleiste ist ein verstecktes Men\u00fcelement, das auf der linken oder rechten Seite des Bildschirms eingeblendet wird, wenn der Benutzer auf eine Schaltfl\u00e4che tippt oder eine Wischgeste ausf\u00fchrt. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Mobile-App-Sidebar-Navigation-Menu-UI-Pack.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.epicpxls.com\/items\/mobile-app-sidebar-navigation-menu-ui-pack\" target=\"_blank\" rel=\"noopener\">Epic Pxls<\/a><\/p>\n\n\n\n<p>Der gr\u00f6\u00dfte Vorteil von Seitenleisten ist, dass sie hervorragend Platz sparen. Das macht sie unverzichtbar f\u00fcr die Gestaltung minimalistischer Benutzeroberfl\u00e4chen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Registerkartenleisten<\/h3>\n\n\n\n<p>Tab-Leisten sind ein g\u00e4ngiges Navigationsschema in iOS. Es handelt sich dabei um eine Reihe von Men\u00fcsymbolen, die am unteren Bildschirmrand angeordnet sind und jeweils einen wichtigen Bereich der App darstellen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Tab-Bars-In-Mobile-UI-Design-Showcase-of-Impressive-App-Designs.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.designyourway.net\/blog\/inspiration\/showcase-of-tab-bars-in-mobile-ui-design\/\" target=\"_blank\" rel=\"noopener\">Design Your Way<\/a><\/p>\n\n\n\n<p>Tab-Leisten machen es einfach, schnell von einem Teil der App zu einem anderen zu navigieren, \u00e4hnlich wie Browser-Tabs den Wechsel von einer Website zu einer anderen erleichtern.<\/p>\n\n\n\n<p>Ein weiterer Grund f\u00fcr ihre weite Verbreitung ist, dass sie sich an der Unterseite des Ger\u00e4ts befinden. <\/p>\n\n\n\n<p>So k\u00f6nnen Personen, die ihr Handy mit einer Hand halten, die Tasten bequem mit dem Daumen antippen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Karussells<\/h3>\n\n\n\n<p>Karussells erm\u00f6glichen es den Nutzern, horizontal zu streichen, um schnell durch eine Reihe von UI-Elementen, meist Bilder, zu bl\u00e4ttern. <\/p>\n\n\n\n<p>Die Punkte unter dem Karussell zeigen an, wie viele Elemente man gerade durchbl\u00e4ttert und bei welchem Element man sich gerade befindet.<\/p>\n\n\n\n<p>Ein Karussell vermittelt das Gef\u00fchl, durch die Seiten eines Buches zu bl\u00e4ttern, was f\u00fcr die meisten Nutzer ein vertrautes Gef\u00fchl ist.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Post-mockup.-interface-carousel-post-vector-template.-social-network-page-mobile-app-concept.-carousel-swipe-smartphone-application-vector-design.-promo-photography-mobile-media-content-illustration.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.freepik.com\/premium-vector\/post-mockup-interface-carousel-post-vector-template-social-network-page-mobile-app-concept-carousel-swipe-smartphone-application-vector-design-promo-photography-mobile-media-content-illustration_13318133.htm\" target=\"_blank\" rel=\"noopener\">Freepik<\/a><\/p>\n\n\n\n<p>Der Hauptvorteil von Karussells besteht darin, dass sie Zeit und M\u00fche sparen, da es schneller geht, durch die Bilder zu streichen, als sie einzeln anzutippen. <\/p>\n\n\n\n<p>Sie sind auch ideal, wenn Nutzer mehrere Artikel oder Fotos miteinander vergleichen m\u00fcssen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Informative_Komponenten\"><\/span>Informative Komponenten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Informative Komponenten sind f\u00fcr die Kommunikation mit dem Nutzer von entscheidender Bedeutung. Die App kann sie verwenden, um Feedback zu geben, den Benutzer auf wichtige Updates hinzuweisen und hilfreiche In-App-Hinweise zu geben.<\/p>\n\n\n\n<p>Hier sind einige der \u00fcblichen Informationskomponenten, die Sie wahrscheinlich verwenden werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benachrichtigungen<\/h3>\n\n\n\n<p>Benachrichtigungen sind Off-App-Elemente (sie werden angezeigt, wenn sich der Benutzer au\u00dferhalb der App befindet), die den Benutzer auf etwas Wichtiges aufmerksam machen. <\/p>\n\n\n\n<p>Dabei kann es sich um eine neue Aktualisierung, einen Fehler oder ein kritisches Ereignis handeln, das seine Aufmerksamkeit erfordert.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Notification-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.moengage.com\/learn\/in-app-messaging-vs-push-notifications\/\" target=\"_blank\" rel=\"noopener\">Mo Engage<\/a><\/p>\n\n\n\n<p>Benachrichtigungen sind hervorragend geeignet, um <a href=\"https:\/\/decode.agency\/article\/mobile-app-user-retention\/#:~:text=keep%20them%20hooked.-,leverage%20in-app%20messaging%20and%20notifications,-In-app%20messaging\" target=\"_blank\" rel=\"noopener\">die Kundenbindung zu verbessern<\/a>. Das liegt daran, dass sie den Benutzer auf subtile Weise dazu ermutigen, zur App zur\u00fcckzukehren, vor allem, wenn er sie eine Zeit lang nicht benutzt hat.<\/p>\n\n\n\n<p>Es ist jedoch sehr wichtig, das Senden von Benachrichtigungen <strong>nicht zu \u00fcbertreiben <\/strong>. Zu viele Benachrichtigungen k\u00f6nnen den Nutzer ver\u00e4rgern und <a href=\"https:\/\/www.fastcompany.com\/90399157\/people-really-really-hate-push-notifications#:~:text=according%20to%20a%20new%20survey%2C%20the%20number%20one%20reason%20people%20delete%20an%20app%20is%20because%20they%20receive%20too%20many%20irrelevant%20notifications%2C%20which%20make%20them%20a%20real%20liability%20for%20overzealous%20busines\" target=\"_blank\" rel=\"noopener\">ihn dazu bringen, die App zu deinstallieren<\/a>. <\/p>\n\n\n\n<p>Der Inhalt der Benachrichtigungen sollte au\u00dferdem relevant, personalisiert und n\u00fctzlich sein. Vergessen Sie auch nicht, <a href=\"https:\/\/decode.agency\/article\/mobile-app-reengagement\/#:~:text=there%20are%20two%20things%20to%20keep%20in%20mind%20for%20the%20best%20chance%20of%20re-engagement%20success%20with%20push%20notifications.\" target=\"_blank\" rel=\"noopener\">angemessen um Erlaubnis zu bitten<\/a>, um die Nutzer zum Durchklicken zu ermutigen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fortschrittsbalken<\/h3>\n\n\n\n<p>Fortschrittsbalken zeigen den Nutzern an, wie weit sie in einer Reihe von Schritten fortgeschritten sind. Sie k\u00f6nnen so einfach sein wie ein Balken mit einer Prozentanzeige darunter. <\/p>\n\n\n\n<p>Sie k\u00f6nnen aber auch eine Aufschl\u00fcsselung der Schritte enthalten, wie in der folgenden Abbildung dargestellt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"400\" height=\"300\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Progress-Bar-1.png\" alt=\"\" class=\"wp-image-45948\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Progress-Bar-1.png 400w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Progress-Bar-1-330x248.png 330w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/7434415-Daily-UI-086-Progress-Bar\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Fortschrittsbalken k\u00f6nnen dazu beitragen, dass eine lange Aufgabe \u00fcberschaubar wird, indem sie sie in kleine Abschnitte untergliedern. Au\u00dferdem wird die Erwartung des Benutzers hinsichtlich des Zeitaufwands, der f\u00fcr die Erledigung der Aufgabe erforderlich ist, festgelegt.<\/p>\n\n\n\n<p>Aus psychologischer Sicht vermittelt ein Fortschrittsbalken ein Gef\u00fchl der Erf\u00fcllung, sobald man die Aufgabe abgeschlossen hat. Dies kann sich sehr positiv auf die UX Ihrer Anwendung auswirken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">QuickInfos<\/h3>\n\n\n\n<p>Tooltips sind Textblasen, die im Kontext auftauchen. Ihr Zweck ist es, den Benutzer \u00fcber ein bestimmtes UI-Element oder eine Funktion zu informieren, w\u00e4hrend er es benutzt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/App-Tooltip.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/7046787-App-Tooltip\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Tooltips werden in der Regel automatisch aktiviert, wenn ein Benutzer zum ersten Mal auf einen App-Bildschirm st\u00f6\u00dft. <\/p>\n\n\n\n<p>Alternativ k\u00f6nnen Sie Tooltips auch so einstellen, dass sie nur erscheinen, wenn der Benutzer auf ein Symbol (z. B. ein Fragezeichen) tippt.<\/p>\n\n\n\n<p>Tooltips sind wichtig f\u00fcr das <a href=\"https:\/\/decode.agency\/article\/what-is-app-onboarding\/#:~:text=the%20last%20strategy%20is%20progressive%20onboarding\" target=\"_blank\" rel=\"noopener\">progressive Onboarding<\/a> und die Einf\u00fchrung in ein Produkt, bei dem die Benutzer eine App w\u00e4hrend der Benutzung kennenlernen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ladevorg\u00e4nge<\/h3>\n\n\n\n<p>Lader sind Elemente, die anzeigen, dass die App im Hintergrund <em>arbeitet <\/em>. Es ist eine subtile Art, den Benutzern mitzuteilen, dass sie warten sollen.<\/p>\n\n\n\n<p>In Apps ist der h\u00e4ufigste Loader der Spinner, der zun\u00e4chst grau ist und mit dem Fortschreiten der Aufgabe allm\u00e4hlich an Farbe gewinnt. Der Spinner hat den Vorteil, dass er nur wenig Platz einnimmt. <\/p>\n\n\n\n<p>Wenn es der Platz zul\u00e4sst, k\u00f6nnen Sie alternativ auch eine klassische Ladeleiste verwenden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/classic-loading-bar.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/14354283-Gif-Banana-Loaders-Components\/attachments\/6020499?mode=media\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Ladebalken sind wichtig f\u00fcr die UX, da sie kommunizieren, dass die App gut funktioniert und nicht eingefroren ist. <\/p>\n\n\n\n<p>Sie k\u00f6nnen auch Latenz- und Geschwindigkeitsprobleme der App verbergen, vor allem wenn Sie einen <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-best-practices\/#:~:text=operation%20or%20not.-,aim%20for%20the%20appearance%20of%20speed,-Of%20the%20many\" target=\"_blank\" rel=\"noopener\">ansprechenden Ladebildschirm<\/a> haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Container-Komponenten\"><\/span>Container-Komponenten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Containerkomponenten halten zusammengeh\u00f6rige Elemente in Ihrer Anwendung zusammen. Ihr Hauptzweck ist es, die Benutzeroberfl\u00e4che so zu organisieren, dass sie weniger un\u00fcbersichtlich aussieht. <\/p>\n\n\n\n<p>Einige Container blenden auch UI-Elemente aus, wenn sie nicht ben\u00f6tigt werden, um den Benutzer nicht zu \u00fcberfordern.<\/p>\n\n\n\n<p>Hier sind einige g\u00e4ngige Container-Komponenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Akkordeons<\/h3>\n\n\n\n<p>Akkordeons sind Komponenten mit zusammenklappbaren und erweiterbaren Abschnitten, die es dem Benutzer erm\u00f6glichen, Elemente ein- und auszublenden, wenn er auf sie tippt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Accordions-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/989145-Flat-Accordion\/attachments\/8609086?mode=media\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Der Hauptzweck eines Akkordeons besteht darin, eine lange Liste von Elementen in \u00fcberschaubare Abschnitte zu gliedern, damit die Nutzer leichter durch sie bl\u00e4ttern k\u00f6nnen. <\/p>\n\n\n\n<p>Sie sind f\u00fcr mobile Apps unverzichtbar, da sie es erm\u00f6glichen, mehr Informationen auf einem kleineren Bildschirm anzuzeigen.<\/p>\n\n\n\n<p>Wenn Sie beispielsweise eine E-Commerce-App mit Dutzenden von Produkten haben, k\u00f6nnen Sie jede Kategorie als einen Eintrag in einem Akkordeon anzeigen. <\/p>\n\n\n\n<p>Auf diese Weise k\u00f6nnen die Nutzer nur auf die Produktkategorien tippen, die sie interessieren, und alles andere ausblenden, um die \u00dcbersichtlichkeit zu erh\u00f6hen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Karten<\/h3>\n\n\n\n<p>Karten sind kleine Elemente, die relevante Informationsgruppen in der Benutzeroberfl\u00e4che Ihrer App enthalten. Sie werden so genannt, weil sie echten Telefon- oder Kreditkarten \u00e4hneln.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/cards-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/uxplanet.org\/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e\" target=\"_blank\" rel=\"noopener\">UX Planet<\/a><\/p>\n\n\n\n<p>Karten werden h\u00e4ufig verwendet, um Informationen zusammenzufassen oder zu rekapitulieren, und zwar mit einer Schaltfl\u00e4che oder einem Link, \u00fcber den die Benutzer weitere Details anzeigen k\u00f6nnen. <\/p>\n\n\n\n<p>Sie werden auch zunehmend als Navigationstool verwendet, wie bei der Headspace-App.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1400\" height=\"743\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/image18.png\" alt=\"\" class=\"wp-image-45966\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/image18.png 1400w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/image18-700x372.png 700w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/image18-330x175.png 330w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/image18-455x241.png 455w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/bootcamp.uxdesign.cc\/headspace-ui-ux-case-study-customizing-solutions-3d68414ddafa\" target=\"_blank\" rel=\"noopener\">Bootcamp<\/a><\/p>\n\n\n\n<p>Daran k\u00f6nnen Sie erkennen, dass Karten sehr flexibel sein k\u00f6nnen. Wann immer Sie Informationen in einer <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/visual-hierarchy\" target=\"_blank\" rel=\"noopener\">visuellen Hierarchie<\/a> in Ihrer Benutzeroberfl\u00e4che organisieren m\u00fcssen, k\u00f6nnen Karten Ihre bevorzugte Komponente sein.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Formulare<\/h3>\n\n\n\n<p>Formulare sind Komponenten, die Anwendungen dabei helfen, zusammenh\u00e4ngende Daten zu sammeln und zu verarbeiten, wie z. B. Kontaktdaten oder Bestellinformationen. <\/p>\n\n\n\n<p>Es ist vergleichbar mit dem Ausf\u00fcllen von Formularen bei der Er\u00f6ffnung eines Bankkontos oder der Steuererkl\u00e4rung.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"750\" height=\"620\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-app-form-with-logical-organization-of-entry-fields.png\" alt=\"\" class=\"wp-image-45964\" srcset=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-app-form-with-logical-organization-of-entry-fields.png 750w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-app-form-with-logical-organization-of-entry-fields-700x579.png 700w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-app-form-with-logical-organization-of-entry-fields-330x273.png 330w, https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-app-form-with-logical-organization-of-entry-fields-455x376.png 455w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.justinmind.com\/blog\/mobile-app-form-design-best-practices\/\" target=\"_blank\" rel=\"noopener\">Just in Mind<\/a><\/p>\n\n\n\n<p>Ein Formular besteht aus einzelnen Eingabekomponenten und einer Schaltfl\u00e4che zum <em>Absenden <\/em>am Ende. Wenn der Benutzer auf diese Schaltfl\u00e4che tippt, werden alle Daten in diesen Eingabekomponenten verarbeitet oder an einen Server gesendet.<\/p>\n\n\n\n<p>Eine Gefahr bei Formularen ist jedoch, dass sie sehr lang und unhandlich werden k\u00f6nnen.<\/p>\n\n\n\n<p>Eine gute L\u00f6sung ist die Aufteilung des Formulars in mehrere Bildschirme, die jeweils nur etwa drei bis vier Eingabekomponenten enthalten. Dies kann helfen, die Un\u00fcbersichtlichkeit zu verringern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"UI-Komponenten_sind_nur_der_Anfang\"><\/span>UI-Komponenten sind nur der Anfang<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die Kenntnis der verschiedenen UI-Komponenten, die Ihnen zur Verf\u00fcgung stehen, ist entscheidend, aber sie sind nur der erste Schritt.<\/p>\n\n\n\n<p>Denn um au\u00dfergew\u00f6hnliche <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-best-practices\/\" target=\"_blank\" rel=\"noopener\">App-Designs<\/a> zu erstellen, m\u00fcssen Sie herausfinden <em>, wie <\/em>man sie zusammensetzt. <\/p>\n\n\n\n<p>Dazu m\u00fcssen Sie die Prinzipien des App-Designs beherrschen, z. B. Formmuster und vorhersehbare Navigation.<\/p>\n\n\n\n<p>Zum Gl\u00fcck haben wir genau die richtige Ressource f\u00fcr Sie.<\/p>\n\n\n\n<p>Lesen Sie unseren Artikel \u00fcber die <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-principles\/\" target=\"_blank\" rel=\"noopener\">f\u00fcnf grundlegenden App-Designprinzipien, die Sie beachten m\u00fcssen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel geben wir Ihnen einen kurzen \u00dcberblick \u00fcber 17 Designelemente f\u00fcr mobile Apps.<\/p>\n","protected":false},"featured_media":57466,"template":"","tags":[],"article_category":[],"class_list":["post-63890","article","type-article","status-publish","has-post-thumbnail","hentry"],"cmb2":{"custom_author_metabox":{"custom_author1_id":"60999","custom_author2_id":"","custom_author3_id":""},"pages_metabox":{"page_footer_cta":"cta3"},"feature_metabox":{"featured_blog_post":""},"related_article_metabox":{"related_article_id_1":"63188","related_article_id_2":"63194","related_article_id_3":"63208"}},"_links":{"self":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article\/63890","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\/57466"}],"wp:attachment":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media?parent=63890"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/tags?post=63890"},{"taxonomy":"article_category","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article_category?post=63890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}