{"id":1319,"date":"2017-11-02T09:32:00","date_gmt":"2017-11-02T08:32:00","guid":{"rendered":"https:\/\/www.visionconnect.de\/blog\/?p=1319"},"modified":"2017-11-02T09:32:00","modified_gmt":"2017-11-02T08:32:00","slug":"flat-ui-design-elemente-aesthetik-vs-usability","status":"publish","type":"post","link":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/","title":{"rendered":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Das waren noch Zeiten \u2026<\/p>\n<p>\u2026 als Navigationselemente eindeutige Funktionsmerkmale aufwiesen: Links waren immer blau und unterstrichen und Buttons sahen aus wie echte dr\u00fcckbare Kn\u00f6pfe.<\/p>\n<p>Sch\u00f6n waren die Seiten nat\u00fcrlich nicht unbedingt, wenn auch sehr funktional und und aus Benutzersicht sehr zielf\u00fchrend.<br \/>\nVernachl\u00e4ssigen wir an dieser Stelle die Gesamtgestaltung und Informationsarchitektur etc, dann kann man sagen, dass durch diese klare Kennzeichnung eine hohe Usability gegeben war.<\/p>\n<p>Bevor das Flat Design das Webdesign bestimmte, gab es den Trend des Skeuomorphismus. Im Skeuomorphismus werden Dinge so gestaltet, wie wir sie aus der Realit\u00e4t kennen.<\/p>\n<p>Flat Design hingegen ist Minimalismus in der Form, Farben bekommen mehr Gewicht. Website-Elemente im Flat Design senden auf Grund ihrer \u00c4sthetik weniger Handlungsaufforderungen aus als skeuomorphistisch gestaltete Elemente.<\/p>\n<p>Skeuomorphismus f\u00f6rdert eher eine intuitive Handhabung, da bekanntes aufgegriffen wird.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_1347\" aria-describedby=\"caption-attachment-1347\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/skeuomorphismus-flat.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1347 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/skeuomorphismus-flat.jpg\" alt=\"App-Gestaltung: Beispiel iBook 2012 (Bildquelle appleinsider ) and 2017 im Flat Design (Bildquelle Apple Store), Beispiel 2: Calendar 2012 (Bildquelle appleinsider ) und 2017 (Screenshot iOS 10.3.3)\" width=\"600\" height=\"200\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/skeuomorphismus-flat.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/skeuomorphismus-flat-418x139.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/skeuomorphismus-flat-254x85.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1347\" class=\"wp-caption-text\">App-Gestaltung: Beispiel iBook 2012 (Bildquelle appleinsider ) and 2017 im Flat Design (Bildquelle Apple Store), Beispiel 2: Calendar 2012 (Bildquelle appleinsider ) und 2017 (Screenshot iOS 10.3.3)<\/figcaption><\/figure>\n<h2>Vorteile des Flat Designs<\/h2>\n<ul>\n<li>Das Flat Design verfolgt den Ansatz \u201eweniger ist mehr\u201d. Komplexit\u00e4t wird deutlich reduziert und so mehr \u00dcbersichtlichkeit geschaffen.<\/li>\n<li>Es eignet sich besser f\u00fcr alle Devices (Watch\/Smartphone\/Tablet\/Desktop), da es sich besser skalieren l\u00e4sst.<\/li>\n<li>Es sieht sehr zeitgem\u00e4\u00df und stylisch aus.<\/li>\n<li>Hat schnelle Ladezeiten.<\/li>\n<li>Es werden keine besonderen aufw\u00e4ndigen 3D-Illustrationen ben\u00f6tigt.<\/li>\n<li>Der Inhalt wird sehr fokussiert dargestellt.<\/li>\n<li>Es werden sehr lebendige Farben f\u00fcr die Gestaltung verwendet (siehe hier z.B. flatuicolors.com).<\/li>\n<li>Typografie ist sehr wichtig.<\/li>\n<li>Bewegung\/Animation kann ein wesentlicher Bestandteil der Flat-Gestaltung sein und so zum besseren Verst\u00e4ndnis der Funktion einer App oder Website beitragen.<\/li>\n<li>Gute Illustrationen f\u00f6rdern das Verst\u00e4ndnis durch den User und werten die gesamte Website auf.<\/li>\n<\/ul>\n<h2>Nachteile des Flat Designs<\/h2>\n<p>Mittlerweile kann man als User auf modernen Websites im Flat Design nicht mehr so schnell erkennen, was interaktive Elemente sind und was nicht. Das hat zur Folge, dass man manchmal deutlich l\u00e4nger auf einer Website unterwegs ist, als w\u00fcnschenswert. Und man klickt nicht immer das richtige Element an. Das ist nat\u00fcrlich aus Sicht eines Website-Besuchers kein sch\u00f6nes Erlebnis.<\/p>\n<ul>\n<li>Websites in diesem Style sehen sich alle immer irgendwie ein bisschen \u00e4hnlich, sie sind weniger individuell<\/li>\n<li>Manchmal ist es sehr unklar, wo man klicken kann<\/li>\n<li>Es unterscheidet sich sehr von dem, was User gew\u00f6hnt sind.<\/li>\n<li>Die sehr gro\u00dfen KeyVisuals verdr\u00e4ngen h\u00e4ufig den eigentlichen Content.<\/li>\n<\/ul>\n<h2>Wie erkennen User eigentlich interaktive Elemente?<\/h2>\n<p>Sehr gut erkannt werden Navigationselemente mit traditionellen Kennzeichnungen, wie Unterstreichungen oder Buttons mit 3D-Effekt oder farbige Links.<\/p>\n<figure id=\"attachment_1354\" aria-describedby=\"caption-attachment-1354\" style=\"width: 580px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/unterstrichene-Links.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1354 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/unterstrichene-Links.png\" alt=\"Beispiel unterstrichene, farbige Links in Flie\u00dftexten, Quelle: Smashing Magazin\" width=\"580\" height=\"149\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/unterstrichene-Links.png 580w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/unterstrichene-Links-418x107.png 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/unterstrichene-Links-254x65.png 254w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/a><figcaption id=\"caption-attachment-1354\" class=\"wp-caption-text\">Beispiel unterstrichene, farbige Links in Flie\u00dftexten, Quelle: Smashing Magazin<\/figcaption><\/figure>\n<p>Gut erkennen k\u00f6nnen Nutzer auch Elemente, bei denen sich aus dem Kontext heraus erschlie\u00dft, dass es klick-\/touchbar sein m\u00fcsste. Wenn z.B. einzelne Worte am Anfang einer Website separat platziert werden, geht der User davon aus, dass es sich um Navigationselemente handelt. Noch deutlicher erkennt der User dieses, wenn diese Worte z.B. mit einer farbigen Fl\u00e4che hinterlegt sind.<\/p>\n<figure id=\"attachment_1355\" aria-describedby=\"caption-attachment-1355\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bauhaus-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1355 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bauhaus-1.jpg\" alt=\"Beispiel Bauhaus Desssau, oben ist die Hauptnavigation allein durch die Positionierung gut erkennbar auch wenn die einzelnen Wort sogar kleiner als der Flie\u00dftext sind.\" width=\"600\" height=\"282\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bauhaus-1.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bauhaus-1-418x196.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bauhaus-1-254x119.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1355\" class=\"wp-caption-text\">Beispiel Bauhaus Desssau, oben ist die Hauptnavigation allein durch die Positionierung gut erkennbar auch wenn die einzelnen Wort sogar kleiner als der Flie\u00dftext sind.<\/figcaption><\/figure>\n<p>Ausserdem hilft es dem User, wenn es eine interaktive R\u00fcckmeldung gibt, indem sich z.B. bei MouseOver das Element \u00e4ndert.<\/p>\n<figure id=\"attachment_1349\" aria-describedby=\"caption-attachment-1349\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/teaser-schattiert.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1349 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/teaser-schattiert.jpg\" alt=\"Beispiel Bauhaus Dessau, bei MouseOver wird der Text des Teasers blau und der gesamte Teaserbereich wird schattiert.\" width=\"600\" height=\"252\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/teaser-schattiert.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/teaser-schattiert-418x176.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/teaser-schattiert-254x107.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1349\" class=\"wp-caption-text\">Beispiel Bauhaus Dessau, bei MouseOver wird der Text des Teasers blau und der gesamte Teaserbereich wird schattiert.<\/figcaption><\/figure>\n<h2>Eine Studie<\/h2>\n<p>Die Nielsen Norman Group hat 9 Webseiten in jeweils zwei Variante mit Usern getestet. Die Varianten unterschieden sich nur in der Ausgestaltung der interaktiven Elemente. Einmal waren diese Elemente deutlicher als interaktiv zu erkennen, einmal weniger weil minimalistischer gestaltet.<\/p>\n<figure id=\"attachment_1348\" aria-describedby=\"caption-attachment-1348\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/studie.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1348 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/studie.jpg\" alt=\"Beispiel f\u00fcr eine Website in zwei Varianten f\u00fcr den Test. Das linke Bild zeigt die Website mit 3D-Buttons, in der rechten Variante sind die Buttons im Flat Design gestaltet. Quelle\" width=\"600\" height=\"220\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/studie.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/studie-418x153.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/studie-254x93.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1348\" class=\"wp-caption-text\">Beispiel f\u00fcr eine Website in zwei Varianten f\u00fcr den Test. Das linke Bild zeigt die Website mit 3D-Buttons, in der rechten Variante sind die Buttons im Flat Design gestaltet. Quelle<\/figcaption><\/figure>\n<p>Das Ergebnis ist, dass User auf der Variante mit den weniger deutlich gekennzeichneten interaktiven Elementen bis zu einem Viertel mehr Zeit aufwenden mussten, um sich zu orientieren.<\/p>\n<p>Sie klickten \u00f6fters die falschen Elemente an und sie mussten wesentlich mehr Elemente betrachten, um ihre Aufgabe zu bew\u00e4ltigen.<br \/>\nDen vollst\u00e4ndige Artikel zu dieser kleinen Studie findet ihr hier: <a href=\"https:\/\/www.nngroup.com\/articles\/flat-ui-less-attention-cause-uncertainty\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.nngroup.com\/articles\/flat-ui-less-attention-cause-uncertainty\/<\/a><\/p>\n<h2>Was bedeutet das nun?<\/h2>\n<p>Zur\u00fcck zur Webgestaltung von 2000 will sicherlich niemand, der Skeuomorphismus ist auch deutlich zu anstrengend und einfaches Flat Design l\u00e4sst eine gute Usability vermissen.<\/p>\n<p>Nur kurz zur Erinnerung: die drei wichtigsten Eigenschaften einer Website oder App sind Funktionalit\u00e4t, Verl\u00e4sslichkeit und Benutzbarkeit. F\u00fcr eine gute Usability also muss man dem Flat Design etwas mitgeben, dass das Erkennen von Interaktion erleichtert.<\/p>\n<p>Die L\u00f6sung lautet:<\/p>\n<ul>\n<li>Tiefe geben, indem man feine dezente Schatten oder Highlights setzt und mit Layern arbeitet.<\/li>\n<li>Guten Farbkontrasten ausw\u00e4hlen.<\/li>\n<li>Interaktive\/Navigationselemente so positionieren, dass diese aus dem Kontext heraus als solche erkennbar sind.<\/li>\n<li>Dem User R\u00fcckmeldung geben, indem Touch\/Mouse-Events definiert werden.<\/li>\n<\/ul>\n<p>Flat 2.0. heisst das Ganze nun. Neben der Gestaltung der einzelnen Elemente ist auch die Positionierung wichtig. Google hat das beim Material Design sehr konsequent umgesetzt.<\/p>\n<p><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1357 size-medium alignleft\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design-169x300.png\" alt=\"\" width=\"169\" height=\"300\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design-169x300.png 169w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design-576x1024.png 576w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design-287x510.png 287w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design.png 720w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1356 size-medium alignnone\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design_1-254x130.png\" alt=\"\" width=\"254\" height=\"130\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design_1-254x130.png 254w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design_1-418x214.png 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/material_design_1.png 458w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><em>Beispiel Material Design, Floating Action Button, Switch<\/em><\/p>\n<h2>Empfehlung<\/h2>\n<ul>\n<li>Buttons so gestalten, dass sie deutlich als interaktive Elemente wahrgenommen werden.<\/li>\n<li>Keine \u201cred herrings\u201d durch Elemente, die klick-\/touchbar aussehen, es aber nicht sind.<\/li>\n<li>Hierarchie bei den Inhaltselementen beachten. Viele farbenfrohe Boxen auf einer Seite k\u00f6nnen zu Irritationen f\u00fchren, da sie mit echten \u201eSchaltfl\u00e4chen\u201d konkurrieren.<\/li>\n<li>When in doubt link it out: assoziierte Elemente verlinken. Beispiel: Teasern mit Titel, Text und Bild, hier alle drei Elemente und am besten den ganzen Bereich klickbar machen.<\/li>\n<li>Wenn mit Icons gearbeitet wird, sicherstellen, dass diese sofort als klickbar\/interaktiv erkannt werden. Andernfalls ist es besser zus\u00e4tzlich mit einem Icon-Label zu arbeiten.<\/li>\n<li>Die so beliebten Pfeile \u203a sollten dann Verwendung finden, wenn kein anderes Element die gleiche Aufgabe erf\u00fcllen kann. Diese kleinen Pfeile werden von Usern h\u00e4ufig nicht wahrgenommen, da sie sehr dezent sind.<\/li>\n<li>Konsistente Gestaltung der Navigationselemente: \u00e4hnliche Elemente weisen ein \u00e4hnliches Verhalten. Das schafft aus Userseite Vertrauen (siehe auch unseren Blogbeitrag \u201eMit Konsistenz Vertrauen schaffen\u201d)<\/li>\n<li>R\u00fcckmeldung an den User geben: Touch\/Mouse-Events f\u00fcr hover, focused und pressed definieren<\/li>\n<\/ul>\n<h2>Good Practice<\/h2>\n<figure id=\"attachment_1358\" aria-describedby=\"caption-attachment-1358\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1358 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1.jpg\" alt=\"Beispiel Greenpeace Energy, die wichtigsten interaktiven Elemente sind gelb und fallen dem User so ins Auge.\" width=\"600\" height=\"535\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1-336x300.jpg 336w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1-572x510.jpg 572w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/greenpeace-energy-1-254x226.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1358\" class=\"wp-caption-text\">Beispiel Greenpeace Energy, die wichtigsten interaktiven Elemente sind gelb und fallen dem User so ins Auge.<\/figcaption><\/figure>\n<figure id=\"attachment_1359\" aria-describedby=\"caption-attachment-1359\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1359 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1.jpg\" alt=\"Beispiel BUND \u00d6kotipps, \u201eWhen in doubt link it out\u201d, jede Card ist komplett verlinkt\" width=\"600\" height=\"579\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1-311x300.jpg 311w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1-528x510.jpg 528w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/bundnet-1-254x245.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1359\" class=\"wp-caption-text\">Beispiel BUND \u00d6kotipps, \u201eWhen in doubt link it out\u201d, jede Card ist komplett verlinkt<\/figcaption><\/figure>\n<figure id=\"attachment_1360\" aria-describedby=\"caption-attachment-1360\" style=\"width: 600px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/hamburgermuseum-menue-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1360 size-full\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/hamburgermuseum-menue-1.jpg\" alt=\"Beispiel Staatliche Museen zu Berlin, die Hauptnavigation ist allein durch ihre Positionierung zu erkennen und gibt dem User eine gute R\u00fcckmeldung, da bei MouseOver die gesamte Navigationsfl\u00e4che farbig hinterlegt wird.\" width=\"600\" height=\"187\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/hamburgermuseum-menue-1.jpg 600w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/hamburgermuseum-menue-1-418x130.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/hamburgermuseum-menue-1-254x79.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1360\" class=\"wp-caption-text\">Beispiel Staatliche Museen zu Berlin, die Hauptnavigation ist allein durch ihre Positionierung zu erkennen und gibt dem User eine gute R\u00fcckmeldung, da bei MouseOver die gesamte Navigationsfl\u00e4che farbig hinterlegt wird.<\/figcaption><\/figure>\n<p><strong>Quellen<\/strong><br \/>\n<a href=\"https:\/\/www.nngroup.com\/articles\/flat-design-best-practices\/?lm=young-adults-flat-design&amp;pt=article\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.nngroup.com\/articles\/flat-design-best-practices\/?lm=young-adults-flat-design&amp;pt=article<\/a><br \/>\n<a href=\"https:\/\/www.nngroup.com\/articles\/clickable-elements\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.nngroup.com\/articles\/clickable-elements\/<\/a><br \/>\n<a href=\"https:\/\/www.nngroup.com\/articles\/flat-design\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.nngroup.com\/articles\/flat-design\/<\/a><br \/>\n<a href=\"https:\/\/www.nngroup.com\/articles\/flat-design-best-practices\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.nngroup.com\/articles\/flat-design-best-practices\/<\/a><br \/>\n<a href=\"https:\/\/uxplanet.org\/flat-design-history-benefits-and-practice-c2b092955f14#.j05mhr4u9\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/uxplanet.org\/flat-design-history-benefits-and-practice-c2b092955f14#.j05mhr4u9<\/a><br \/>\n<a href=\"https:\/\/uxplanet.org\/best-practices-for-flat-design-6e7a6997805\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/uxplanet.org\/best-practices-for-flat-design-6e7a6997805<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat-Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.<\/p>\n","protected":false},"author":6,"featured_media":1352,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[1],"tags":[12,18,17],"class_list":["post-1319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-tipps","tag-trends","tag-usability"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover<\/title>\n<meta name=\"description\" content=\"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.\" \/>\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.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover\" \/>\n<meta property=\"og:description\" content=\"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/\" \/>\n<meta property=\"og:site_name\" content=\"VisionConnect GmbH Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/VisionConnectGmbH\" \/>\n<meta property=\"article:author\" content=\"www.facebook.com\/Y.Scherzer\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-02T08:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2015\/11\/vc-blog-standard-soc.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"590\" \/>\n\t<meta property=\"og:image:height\" content=\"331\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yvonne Scherzer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elbeallee\" \/>\n<meta name=\"twitter:site\" content=\"@visionconnect\" \/>\n<meta name=\"twitter:label1\" content=\"Geschrieben von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yvonne Scherzer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/\"},\"author\":{\"name\":\"Yvonne Scherzer\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\"},\"headline\":\"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability\",\"datePublished\":\"2017-11-02T08:32:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/\"},\"wordCount\":1186,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/key-visual-blog-artikel-1.jpg\",\"keywords\":[\"Tipps\",\"Trends\",\"Usability\"],\"articleSection\":[\"Design\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/\",\"name\":\"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/key-visual-blog-artikel-1.jpg\",\"datePublished\":\"2017-11-02T08:32:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\"},\"description\":\"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/key-visual-blog-artikel-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/key-visual-blog-artikel-1.jpg\",\"width\":1024,\"height\":562},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/flat-ui-design-elemente-aesthetik-vs-usability\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/\",\"name\":\"VisionConnect GmbH Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\",\"name\":\"Yvonne Scherzer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"caption\":\"Yvonne Scherzer\"},\"description\":\"Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielf\u00e4ltig ist und wirklich Spa\u00df macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.\",\"sameAs\":[\"http:\\\/\\\/www.visionconnect.de\",\"www.facebook.com\\\/Y.Scherzer\",\"https:\\\/\\\/x.com\\\/elbeallee\"],\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/author\\\/scherzer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","description":"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.","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.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/","og_locale":"de_DE","og_type":"article","og_title":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","og_description":"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.","og_url":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/","og_site_name":"VisionConnect GmbH Blog","article_publisher":"https:\/\/www.facebook.com\/VisionConnectGmbH","article_author":"www.facebook.com\/Y.Scherzer","article_published_time":"2017-11-02T08:32:00+00:00","og_image":[{"width":590,"height":331,"url":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2015\/11\/vc-blog-standard-soc.jpg","type":"image\/jpeg"}],"author":"Yvonne Scherzer","twitter_card":"summary_large_image","twitter_creator":"@elbeallee","twitter_site":"@visionconnect","twitter_misc":{"Geschrieben von":"Yvonne Scherzer","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#article","isPartOf":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/"},"author":{"name":"Yvonne Scherzer","@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba"},"headline":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability","datePublished":"2017-11-02T08:32:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/"},"wordCount":1186,"commentCount":0,"image":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#primaryimage"},"thumbnailUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/key-visual-blog-artikel-1.jpg","keywords":["Tipps","Trends","Usability"],"articleSection":["Design"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/","url":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/","name":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","isPartOf":{"@id":"https:\/\/www.visionconnect.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#primaryimage"},"image":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#primaryimage"},"thumbnailUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/key-visual-blog-artikel-1.jpg","datePublished":"2017-11-02T08:32:00+00:00","author":{"@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba"},"description":"Von der realit\u00e4tsnahen Darstellung \u00fcber das Flat Design bis hin zu aktuellen Trends. Wir betrachten aktuelle Design-Str\u00f6mungen hinsichtlich Ihrer Usability.","breadcrumb":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#primaryimage","url":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/key-visual-blog-artikel-1.jpg","contentUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/10\/key-visual-blog-artikel-1.jpg","width":1024,"height":562},{"@type":"BreadcrumbList","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/flat-ui-design-elemente-aesthetik-vs-usability\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.visionconnect.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Flat UI Design Elemente \u2013 \u00c4sthetik vs. Usability"}]},{"@type":"WebSite","@id":"https:\/\/www.visionconnect.de\/blog\/#website","url":"https:\/\/www.visionconnect.de\/blog\/","name":"VisionConnect GmbH Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.visionconnect.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba","name":"Yvonne Scherzer","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","caption":"Yvonne Scherzer"},"description":"Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielf\u00e4ltig ist und wirklich Spa\u00df macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.","sameAs":["http:\/\/www.visionconnect.de","www.facebook.com\/Y.Scherzer","https:\/\/x.com\/elbeallee"],"url":"https:\/\/www.visionconnect.de\/blog\/author\/scherzer\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/comments?post=1319"}],"version-history":[{"count":10,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media\/1352"}],"wp:attachment":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media?parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}