Title (deu): Material Design im Web

Author: Kienast, V. (Vanessa)

Description (deu): St. Pölten, Studiengang Digitale Medientechnologien, Masterarbeit, 2016

Description (deu): Googles neue Designsprache Material Design, zielt auf ein besseres Nutzungserlebnis und ein konsistentes Design auf allen Plattformen ab. Ursprünglich für das mobile Betriebssystem Android und Google Anwendungen konzipiert, soll Material Design auch im Web populärer werden. Hier stellt sich jedoch die Frage, ob die Designrichtlinie eine gute Option für Webprojekte ist. Aus diesem Grund befasst sich diese Arbeit mit der Frage, welche Auswirkungen Material Design auf die User Experience von Websites hat und stellt einen Vergleich mit der etablierten Stilrichtung Flat Design auf. Im theoretischen Teil der Arbeit werden die wesentlichen Prinzipien von Material Design und Flat Design erarbeitet um einen anschließenden Vergleich durchzuführen. Zusätzlich werden die Faktoren zur Bestimmung der User Experience festgelegt um diese im praktischen Teil der Arbeit untersuchen zu können. Im zweiten Teil der Arbeit wurden zwei Prototypen erstellt. Hierbei handelt es sich um eine Website eines Einrichtungsstudios, welche einmal nach den Richtlinien von Material Design, und einmal im Flat Design Stil erstellt wurde. Danach wurden vierzehn Probanden einem User Experience Test unterzogen. Mit Hilfe zweier Fragebögen und eines Eyetracking-Tests sollte herausgefunden werden, welcher Stil die bessere User Experience erzeugt.
Die Ergebnisse dieser Arbeit zeigen, dass sich Material Design und Flat Design in vielen Punkten sehr ähnlich sind. Der Unterschied liegt im Detail. Während Flat Design komplett auf Elemente wie Schatten, Ränder oder Animationen verzichtet, werden diese bei Material Design so eingesetzt, dass sie das Nutzungserlebnis erhöhen können. Durch die zusätzlichen Elemente wird die Unterscheidung von klickbaren und nicht klickbaren Bereichen einfacher. Die Resultate des User Experience Tests zeigen, dass dreizehn von vierzehn getesteten Probanden die Material Design Variante bevorzugen. Gründe hierfür sind eine bessere Übersichtlichkeit durch hervorgehobene Elemente, ansprechende Effekte und ein besseres Erlebnis. Die Testpersonen sind davon überzeugt, zusammengehörige Bereiche besser zu erkennen und fühlen sich bei der Benutzung des Material Design Prototyps besser. Die zusätzlichen Effekte, Schatten und andere Designelemente konnten das Nutzungserlebnis für sie merklich verbessern.

Description (eng): Google’s new design language Material Design aims at enhancing the user experience and creating a consistent design for all platforms. Although Material Design was originally intended for Android and Google applications for smartphones, the web poses as a potential new market. This raises the question if the design language is able to become an equally successful alternative for web projects. Therefore, this thesis deals with the impact Material Design has on the user experience of websites and covers a comparison of the design language to the well established style of Flat Design. The theoretical part of the thesis covers an introduction to the topic, the origin and the main principles of Material Design and Flat Design. This is a necessity for the subsequent comparison of the two styles. Furthermore, the fundamentals of user experience will be described to examine the specific user experience of each design language in the practical part. Within the second part, there will be a prototypical development. This includes two different versions of a website about an interior studio, where one prototype will be created according to the guidelines of material design, and the second one will be created under the rules of flat design. Fourteen test candidates participated in a user experience test to explore the impact of the two design languages by answering two questionnaires and undergoing an eye-tracking usability test. The results of this thesis demonstrate that Material Design and Flat Design are similar in many aspects. Nevertheless, the differences are detectable in the featured details of the styles. Flat Design dispenses shadows, borders and other effects in favor of focusing on simplicity. Material Design makes use of them in order to increase the user experience, which leads to an easier detectability of clickable areas. Altogether, the results of the user experience test show that thirteen out of the fourteen subjects prefer the Material Design website. Appealing effects, a more structured overview through differentiated areas and an enhanced user experience are the main reasons for this conclusion. The participants are convinced that it is easier to recognize related areas and they feel more comfortable using the Material Design website. The additional effects, the shadows and other stylistic elements have improved their user experience.

Object languages: German

Date: 2016

Rights: © All rights reserved

Classification: Web Site; Design

Permanent Identifier