Blogeintrag Mobile – State of the Art

---

Einleitung

Einkaufen, Entertainment, Socialising, arbeiten und studieren – Information wird Rund um die Uhr empfangen und weitergegeben. Das Smartphone ist eines der wichtigsten Mittel für die Kommunikation geworden und beinhaltet so gut wie alle Informationen, die man je brauchen könnte. Somit wird auch das Usability Design und User Interface Design (die Gestaltung der Benutzeroberfläche) für eben diese mobilen Geräte auch immer relevanter. Designer suchen konstant nach besseren Methoden um das Design noch intuitiver und effektiver zu gestalten. (Jia, 2021)

User Interface Design

Die Benutzeroberfläche, auch User Interface (UI) genannt, erleichtert die Kommunikation zwischen Menschen und Geräte – wie Computer und Smartphones. Sie besteht aus physischen und kommunikativen Aspekten von Input und Output oder Interaktion zwischen Mensch und Maschine. User Interface Design für Computer und Smartphones beinhaltet Applikationen, Betriebssysteme und Netzwerke. UI Design ist die Gestaltung von allen essentiellen wahrnehmbaren Eigenschaften einer Webseite. Dazu gehören die visuellen, auditiven und fühlbaren Eigenschaften. Beispielsweise die Wahl der Farbe, Schriftart, Animationen, Sprache, auditive Hinweise und Vibrationen. (Marcus, 2002, p.24)

Mobile User Interface Design, bezeichnet das gestalten der Mensch-Computer Interaktion und das Benutzen der Software durch die Benutzeroberfläche, welche am Smartphone über den Bildschirm angezeigt wird. Es ist sozusagen die Brücke der Kommunikation zwischen Mensch und Smartphone. Deswegen ist ein gutes UI Design auch ein ausschlaggebender Punkt für den Kauf eines Smartphones, da es nach dem Smartphone selbst, das Erste ist, was einem ins Auge springt. Ein gutes User Interface sollte dem Benutzer ein reibungsloses Benutzen der Software ermöglichen, sodass der Fokus am Prozess liegt, welcher durchgeführt wird und nicht an der Bedienung. Das UI Design hat einen direkten Effekt auf die Aufmerksamkeit des Benutzers und hat somit auch einen Einfluss darauf, wie lange und gerne die Applikation genutzt wird und somit auch das Smartphone selbst. Dies hat einen großen Einfluss auf das Kaufverhalten und ob der Konsument bei dem Produkten bleibt, oder lieber zu einem Produkt eines Konkurrenten wechselt. (Jia, 2021)

Weil User Interfaces unabhängig von Sprache werden soll, wird es immer wichtiger Konzepte und Aktionen durch Zeichen, Symbole, Bilder und Illustrationen zu übermitteln. (Dillon, 2006)

Flat Design Definition

Flat Design ist ein moderner und digitaler Stil, welcher sich auf Minimalismus fokussiert, indem extra Elemente und Effekte vom Design, wie Schatten, Lichteffekte und Texturen, entfernt werden. (Pratas, 2014)

Flat Design basiert auf den Prinzipien von Gittern, geometrischen Formen und visueller Ausgeglichenheit. Die Elemente werden simpel und zweidimensional dargestellt und wirken wie auf den Bildschirm aufliegend. Dies wird mit simplen Formen, zweidimensionalen Elementen, minimalen Texturen und sättigenden Farben geschaffen. Durch das simple Design funktionieren sie besonders gut auf Webseiten und mobilen Applikationen, weil dadurch Ladezeiten verkürzt werden. (El-Sherbiny, 2020)

Das Grundkonzept von Flat Design ist, wiederholende und komplizierte dekorative Elemente wegzulassen, um sich auf das wesentliche Objekt zu konzentrieren. Grafische Elemente, Texturen sowie dreidimensionale Effekte werden weggenommen, um nicht vom Wesentlichen abzulenken. Somit soll die Information simpel dargestellt werden, mit einer geschmeidigen Form und leuchtenden Farben. Informationen sollen direkter und leichter wahrnehmbar kommuniziert werden. Flat Design soll die Benutzung einer Applikation somit so einfach und intuitiv wie möglich machen. Das simpel gehaltene Flat Design kann sich auch besser den verschiedenen Bildschirmgrößen anpassen und verbraucht wenig Speicherplatz, sodass die Ladezeiten kürzer sind. Somit wird auch das Benutzererlebnis verbessert.(Jia, 2021)

Die Entstehung von Flat Design

Flat Design wurde als eine Alternative zu Skeuomorphic Design entwickelt, welches die Illusion von Dreidimensionalität erschafft, indem es mit dem Design das echte Objekt so nah wie möglich zu repräsentieren. Skeuomorphismus wurde von Apple für die grafische Benutzeroberfläche von dem iOS Betriebssystem im Januar 2007 verwendet. Dieses Betriebssystem wurde für mehrere Apple Produkte, wie das iPhone, das iPad, der iPod Touch und Apple TV, verwendet. Es verwendet verstärkt Verläufe, Schatten, Lichteffekte und Reflektionen. (Curtis, 2015)

Die ersten Versuche Flat Design für digitale Produkte zu verwenden kamen von Microsoft, für den Launch des MP3-Players Zune. Danach wurde Flat Design immer beliebter und wurde 2010 auch für die digitale Benutzeroberfläche des Windows Phone7 verwendet. Danach haben auch große Firmen wie Google und Apple die Flat Design Prinzipien in deren mobilen und web-basierten Applikationen übernommen. (El-Sherbiny, 2020)

Die Wurzeln von Flat Design liegen in der “Schweizer Typografie”. Dieser Grafikstil war eines der Grundgerüste von Grafikdesign in der  Mitte des 20. Jahrhunderts und wurde von den Schweizer Designern Josef Müller-Brockmann und Armin Hofmann gegründet. Die Schweizer Typographie verbindet Einflüsse vom Kubismus, Konstruktivismus, Futurismus, Suprematismus und Surrealismus. (Meggs, 2005).

Nachteile von Flat Design

Heutzutage ist es möglich bei Webseiten die häufigsten Aktionen, die ein User durchführt und die wiederkehrenden Muster von Interaktionen zu kategorisieren. Während Benutzer sich immer mehr an die gemeinsamen Funktionen und Bedienungen von Webseiten gewohnt haben, wurden Icons immer mehr verwendet, um Text bzw. Beschreibungen zu ersetzen. Flat Design ist einer der neuesten Trends, Icons noch mehr zu abstrahieren. Das Entfernen von Merkmalen und Attributen kann aber auch die Mehrdeutigkeit von Symbolen erhöhen und somit ihre Erkennbarkeit beeinträchtigen. Ein Hauptkritikpunkt von Flat Design ist die Zweidimensionalität, welche die Wiedererkennbarkeit von Symbolen negativ beeinträchtigen kann. Speziell bei der Umwandlung von Icons und dem Übergang von einem Form zentrierten Ansatz, welcher die Merkmale eines Symbols betont, zu einem funktionsorientierten Ansatz, welcher sich auf die Funktion und die dahinter stehende Absicht fokussiert. (Legleiter & Caporusso, 2020)

Icons repräsentieren im Flat Design deren Funktion bzw. das Ziel des Benutzers und nicht, so wie früher üblich, das eigentliche Objekt. Somit kann es leichter zu Missverständnissen in deren Bedeutung kommen. Die Abwesenheit einer Textbeschriftung des Symbols spielt eine große Rolle für das Verständnis von den Nutzern. In einer Studie von Legleiter & Caporusso  wurde das Verständnis von Flat Design geprüft. Hierfür wurden die meistverwendeten Icons von Webseiten untersucht. Es wurde aufgeführt, dass das Erkennen von Icons mit Alter und Bildungsniveau zusammenhängt. Interessant ist auch, dass hier ein technisches Wissen keinen Einfluss auf die Wiedererkennung von Symbolen auf Webseiten hatte. (Legleiter & Caporusso, 2020)

Illustrationen

Illustrationen sind schon immer in Büchern verwendet worden, um den Inhalt zu unterstützen und verständlicher zu gestalten. Sie helfen auch dabei, sich den Inhalt besser vorstellen zu können. Die früheste Form von Illustrationen wurden in Höhlenmalereien gefunden, welche circa 15,000 vor Christus in Frankreich entstanden sind. Nach dem Start der industriellen Revolution, in der zweiten Hälfte des 18. Jahrhunderts, hat sich der Buchdruck immer mehr verbessert und es wurden stetig mehr Bücher mit Illustrationen publiziert. All diese Illustrationen wurden manuell gezeichnet und maschinell gedruckt. Nach der Erfindung des Computers im 20. Jahrhundert, wurden Illustrationen für einen neuen Zweck verwendet, nämlich für Software. Hierfür mussten die Illustrationen, wegen den technischen Einschränkungen, so simpel wie möglich gestaltet sein. Im 21. Jahrhundert sind neue Geräte, wie der iPod und Smartphones, auf den Markt gekommen, für welche wieder neue Software entwickelt werden musste, um Benutzern zu helfen, diese Geräte auch einfach bedienen zu können. Zur gleichen Zeit wurden viele Webseiten und mobile Applikationen entwickelt, um einen das Leben leichter zu gestalten. Das startete auch die Arbeitsfelder User Experience Design und User Interface Design, welche sich auf die Benutzerfreundlichkeit und das Benutzererlebnis von Webseiten und mobilen Applikationen  fokussieren.

Flat Illustrations

Flat Illustrations sind digitale, vektor-basierte Illustrationen, die dem Flat Design Schema folgen. Wie schon bei den Flat Design Icons beschrieben, benutzen sie einen simplen und minimalistischen Stil und geometrische Formen um Charaktere, Objekte und Hintergründe zu illustrieren. Anstatt Dinge und Menschen realistisch zu repräsentieren wird hier sehr abstrakt gearbeitet. (El-Sherbiny, 2020)

Illustrationen werden heutzutage für das Design von Webseiten und mobilen Applikationen weitgehend genutzt, um die Benutzeroberfläche attraktiver zu gestalten, das Design zu vereinheitlichen und um die Nutzung intuitiver zu machen. Wenn Flat Design in Icons und Symbolen verwendet wird, sollte um die Harmonie zwischen allen Elementen zu bewahren, Flat Design auch bei Illustrationen bzw. den grafischen Elementen angewendet werden. Dies stärkt die Brand Identity, welche für die Webseite oder mobile Applikation entwickelt wird. Ein User Interface sollte nämlich auch die Brand Identity, die die Organisation als Marke repräsentiert, widerspiegeln. Illustrationen werden seit langer Zeit als Mittel zur Kommunikation genutzt. Sie helfen Menschen zu verstehen wie Dinge funktionieren und helfen ihnen beim Vorstellen der Vorteile, die ein Produkt haben kann. Illustrationen können gut im Gedächtnis des Users hängen bleiben und somit die Brand Awareness und Wiedererkennbarkeit erhöhen. (El-Sherbiny, 2020)

Fazit

Flat Design ist ein immer beliebter werdender Stil, um das User Interface von diversen Webseiten und mobilen Applikationen zu gestalten. Es soll die Benutzerfreundlichkeit steigern, indem es die Elemente auf das Wesentliche reduziert, was jedoch auch zu Missverständnissen führen kann und man deswegen auf User Testing nicht verzichten sollte. Man sollte auch darauf achten, dass nicht nur Icons sondern auch die anderen grafischen Elemente, wie Illustrationen im gleichen Flat Design Stil gestaltet werden, um ein einheitliches Bild zu schaffen und die Brand Identity zu stärken.

Quellen:

Legleiter, Andrea & Caporusso, Nicholas. (2020). Flat-Design Icon Sets: a Case for Universal Meanings?.

Page, Tom. (2014). Skeuomorphism or flat design: Future directions in mobile device User Interface (UI) design education. Int. J. of Mobile Learning and Organisation. 8. 130 – 142. 10.1504/IJMLO.2014.062350.

Jia, Yihan. (2021). Flat Research on the Design and Application of Icon Design in Mobile Phone UI Interface. DEStech Transactions on Computer Science and Engineering. 10.12783/dtcse/ccnt2020/35437.

El-Sherbiny, Hanan. (2020). THE USE OF FLAT ILLUSTRATIONS IN WEBSITES AND SMART PHONES APPLICATIONS’ USER INTERFACE (UI) DESIGN. Journal of Art & Architecture Research Studies – JAARS. 1. 10.47436/jaarsfa.v1i2.65.

Meggs, P. B. (2005). Graphic design, 1945-75: The International Typographic Style. Encyclopaedia Britannica.

Marcus, A. (2002). Dare We Define User-Interface Design?. Interactions. Volume 9, Issue 5. DOI: 10.1145/566981.566992.

Dillon, A. (2006). User Interface Design. Encyclopedia of Cognitive Science: John Wiley & Sons. ISBN: 9780470018866. DOI: 10.1002/0470018860.s00054.

Pratas, A. (2014). Creating flat design websites. Birmingham, UK : Packt Publishing Ltd.