by Anna-Lena Misun -

Comparing Millennials View on Minimalism And Maximalism in Web Design

In my last research session I came across a very interesting study. The aim of this study was to see if millennials who grew up with minimalism prefer a minimalist or maximalist website design.

Authors:

Ulrik Söderström

Lovisa Carlsson

Thomas Mejtoft

Minimalist web-design is characterized by portraying necessary information, content, and features in the most straight-forward and clean-cut way. On the other hand, maximalist web-design aims for bold color combinations, different textures, images, graphics, and animations. The year of 2018 was truly the year of maximalist web-design, though, some designers claims that the “less is more” movement is on its way (Söderström, Carlsson, & Mejtoft, 2019) p. 92

Naturally, both minimalist and maximalist webpages should be designed in a way which does not harm user experience and the information intake. In the article “Feature Richness and User Engagement” Jakob Nielsen summarizes that the more engaged users are, the more features an application can sustain. But most users have low commitment. Therefore, especially websites must focus on simplicity, rather than features (Nielsen, 2007).

(Söderström, Carlsson, & Mejtoft, 2019) p. 92

Minimalism in web-design means reducing all (unnecessary) elements which are unimportant for user tasks. A minimalist web interface has a clear hierarchy in elements, highlights the most important ones and gets rid of anything which might disturb the user’s perception. This helps to make important messages clearer ergo: it helps the consumer to navigate more easily on the website (Söderström, Carlsson, & Mejtoft, 2019) p.93

Web design, just like language is defined by the way people use it. As the term “minimalism is used widely, it is often hard to pinpoint the exact features of it. To get a clearer picture of minimalist web design features, this thesis refers to a study of the Nielsen Norman Group. In this study 112 minimalist websites were analyzed to find defining features of minimalist websites. The author(s) included a characteristic to be defining if it was present in at least 75% of the websites (Moran, 2015)

  1. Flat Patterns and textures
    Flat interfaces do not contain any elements like shadows, highlights or gradients or other textures which make the UI elements look three-dimensional. In the survey 96% of the minimalist websites were flat. Removing unnecessary elements totally falls into the philosophy of minimalist design. But: flat design often refers to textures, icons, or graphics of an interface whereas minimalism rather refers to larger content, features, and layout. So, an interface might be flat without being minimalistic. The problem with flat design is that the user often does not see if an element is clickable or not (as all the elements are flat). Clickable elements should be recognizable for the user easily, therefore it might be better to not work with flat icons there.
  2. Limited or Monochromatic Color Palette
    This trend was recognized in 95% of the sampled interfaces. In most minimalist websites color was specifically used to create visual attention without adding additional design elements of graphics. With less visual information, color palettes will stick out even more for the consumer. Many minimalist designs are often monochromatic or are using one bold color. Almost half of the investigated website (49%, 55 websites) used a monochromatic color palette and almost as many (46%, 52 websites) used one or two accent colors additional to the otherwise monochromatic color palette. Of those 55 monochromatic websites, 51 sites were exclusively using white, black, and grey shades.
  3. Restricted features and elements
    These characteristics were used in 87% of the investigated interfaces. In a minimalist environment, designers need to eliminate any element which is not required to support core functionalities or the message. Those elements could be: 
  • Menu items
  • Links
  • Images
  • Graphics
  • Lines
  • Captions
  • Textures
  • Colors
  • Fonts
  • Icons

As it is often hard to tell which elements are unnecessary a popular mantra of designers is “subtract until it breaks” which means that unless the absence of an element would cause serious problems, they get rid of it. It can be hard to find the right balance between having clean and reduced website and making sure to not make the primary tasks for the user overly complicated or difficult (Moran, 2015).

4. Maximize negative space
Through the elimination of certain elements, negative space, also called white space, is automatically created on a website. A maximization of white space was used in 84% of the examined websites. White space can help the user to absorb the presented information more easily as well as directing the user’s attention. The right use of white space helps to draw the users attention to the important content. 

5. Dramatic use of typography
When there is a reduced number of elements on the webpage, typography can be a great tool for communicating meaning. In this case the typography can compensate the “missing” elements like graphics or photos and makes the minimalist design more engaging. To establish a clear hierarchy on the website, different variations of font size, weight and style are crucial. Of the examined 112 minimalist webpages, 75% used typography to convey meaning of visual interest.

Additional widely used techniques on minimalist webpages which were found in less cases than 75% by the Nielsen Group were:

  • Large background images or videos
  • Grid layout
  • Circular graphic elements
  • Hidden global navigation

(Moran, 2015)

After examining the elements of minimalist web-design, the next paragraphs will look into the key features of maximalist design on websites.

The aim of a maximalist web-design would be an organized chaos of different hierarchies, layers, textures, graphics, typography, and colors. Several attributes of maximalist web-designed could be defined by a number of designers.

  • Grandiose colors: A maximalist web-design should use a large and bold color scheme. Can also contain clashing colors as well as combinations of new and exciting compositions. 
  • Bold Textures: Distinct textures can help to draw attention to certain areas. Those distinct textures could be created by mixing colors with layers of a palette. 
  • Brave combinations: Maximalist websites play with the combination of several elements like images, graphics, animations which contribute to an extreme look.

In the research of Söderström, Carlsson and Mejtoft, the aim was to find out if millennials would prefer a minimalist or maximalist web-design approach. Therefore, two websites were created, both representing one approach. Both websites contained the same content and information and conveyed the same message. The survey involved 16 participants who were classified as millennials. The survey conducted by Söderström, Carlsson and Mejtoft showed that more than half of the participants (62,5%) liked the maximalist webpage the most. 31.3% liked the minimalist webpage the most and 6.2% had no preference between the both pages. 100% of the participants answered that they thought, that the maximalist webpage was the most innovative. Also, 71% of the participants classified the maximalist webpage as “modern”. Participants who liked the maximalist page more described it as more unique, outstanding and that it does create more interest. Many participants perceived that the maximalist design of the webpage suited the content it was made for (an art portfolio). Participants who were in favor for the minimalist page said that the content was presented in a more straightforward way and that it made the content clearer. Further, this party perceived the maximalist page as a bit messy. 

It must be said that it is very hard to measure such a subjective matter like the likeability of a website. Furthermore, there are many ways a minimalist or maximalist webpage can be presented, and this study included just one sample. Nevertheless, the authors suggest that it might be case that millennials perceive a maximalist webpage as more innovative as they are used to minimalist design. It must the highlighted that a webpage, maximalist, or minimalist, must always fit the person as well as the purpose (Söderström, Carlsson, & Mejtoft, 2019) In this case, an art portfolio was perceived as a well fit for a maximalist website design, to convey a creative an exciting message. 

by Anna-Lena Misun -

Muji Versus Maharaja: When (And Why) Minimalist Versus Maximalist Design Differentially Influence Consumer Self- Brand Connection

In my last research session I came a cross an article from:

Ngoc (Rita) To, University of Houston, USA
Vanessa M. Patrick, University of Houston, USA

NA – Advances in Consumer Research Volume 45 | 2017

Here are my most important findings from this article:

In some important aspects of marketing, aesthetics plays a very crucial role, for example in product creation, package design or website layouts. Therefore, the consumers perception of “beauty” can be an important trigger for behavior like product choice, the willingness to pay or the perception of quality. (To & Patrick, 2017) p. 258

Recent studies in consumer behavior ask themselves the question which set of aesthetic features impact consumer’s consumption experience. A current study investigates how a specific design style, more precisely how a minimalist or maximalist design style, can influence consumer self-brand connection (SBC). Minimalist design can be characterized through simplicity through basic geometric shapes, limited decoration, and abundant white space. On the contrary, maximalist design is defined by richness, an abundance of geometric patterns with minimal white space. Although those visual elements are very diverse, brands have been using both styles to convey a luxury appeal. For, example, Apple’s minimalist design stands for luxury and high fashion but so does Versace’s, who’s brand image is full of decorative ornaments.

The authors suggest that certain types of aesthetics like minimalism and maximalism arouse distinct functional attitudes. The theory of functional attitudes proposes that people hold certain attitudes because they are useful, and those attitudes serve important social functions. Those social functions can be for instance, allowing people to express their own values (value-expressive attitudes) and facilitate self-presentation (social adjustive attitudes). Further, the authors propose that minimalist design causes more value-expressive attitudes. When people view minimalist art, the experience is often transformed into a more relatable happening, where the viewer can engage with the work of the creator. This effect also happens when a minimalist design is used in brand communication. Consumers get the freedom to develop their own meaning off the brand instead of just receiving the message. For example, the Japanese retail brand “MUJI” has a brand communication concept of “emptiness” which emphasizes simplicity and white space. In this way, consumers get the chance to develop and their own believes and perception of the brand. Due to the freedom of self-expression, which is inherent in its visual aesthetics, the authors suggest that minimalist design enhances SBC through the facilitation of value-expressive attitudes.

In contrast, To and Patrick hypothesize that maximalist design causes more social-adjustive attitudes, as maximalist aesthetics are often used for gaining social approval. The authors draw here from people’s direct experience with maximalist design which often happens in a specific social context where the goal of self-presentation is often in focus. For example, people often come across complex pattern moldings when they visit a cathedral or a five-star luxury hotel. Therefore, consumers seem to have developed a tendency for maximalist design if they seek to present a desirable self-image. Furthermore, people tend to associate maximalist design with impression-management motives to, for example, signal social prestige. Throughout history, well known figures and personalities often used intriguing creations to represent their stature, for example, the ornate interior in the Palace of Versailles. According to the suggestion that maximalist aesthetics are frequently used for gaining social approval, the authors predict that maximalist design enhances SBC by causing social-adjustive attitudes. Because of the different attitudes minimalist and maximalist design triggers in people, To and Patrick propose power as a moderator for the effects. Power in this context is defined as “asymmetric control over valued resources in social relations” (Rucker, et al. 2012) and can either foster agentic or communal orientations. Feeling powerful can lead people to be more agency-oriented (i.e. focused on oneself). This is because being higher in social hierarchy gives people the freedom to follow their own value. On the other hand, feeling powerless makes people more communal oriented, in other words, more focused on others. This is because being in a lower social hierarchy makes you more dependent on others for valued resources.

Therefore, To and Patrick suggest that minimalist design will enhance SBC for high-power consumer, whereas maximalist design will enhance SBC for low power consumers. These hypotheses were tested across five studies. In those studies, packaging design was manipulated in a way that the decorative elements of the package varied while the other features stayed the same. For relevancy reasons, studies one and two will now be elaborated more thoroughly. In the first study, the participants evaluated a minimalist vs maximalist design of a fictional tea brand. Then, their value-expressive and social adjustive attitudes were assessed. To and Patrick found out that minimalist design causes more value-expressive attitudes while maximalist design causes more social-adjustive attitudes. Very interesting is that both packaging designs were experienced as equally attractive and luxurious. In their second study, the authors focused on the hypothesis about power. The study showed that high-power participants felt a stronger SBC to minimalist design while low-power participants felt stronger SBC to maximalist design. 

by Patricia Rohrbacher -

Vom 3D-Modell zum Live-Stream. Eine Anleitung

Werdegang zum Vtuber, Quelle: https://medium.com/@hyprsense/how-to-become-a-virtual-youtuber-influencer-7074b852fb9

Neue Technologien wie RealTime-graphics und MoCap-Technologien führen seit den 2010er Jahren zu einem immer stärker anwachsenden Auftreten von virtuellen Streamern – Vtubern. In Anlehnung an die traditionelle Influencer-Industrie sind virtuelle Menschen zu Prominenten geworden.
Da sich das Ökosystem für Vtuber – zumindest im Europäischen Raum – noch in der Anfangsphase befindet, gibt es noch keine standardisierte Allzweck-Anleitung. Daraus kann man schließen, dass jede Umsetzung unterschiedliche auf unterschiedlichen Plattformen und in verschiedenen Formaten erfolgt. Je nach Nutzer – ob Einzelperson oder Agentur – variieren die Kosten, die Qualität und der Entwurfsprozess erheblich.
Um einen virtuellen Charakter zum Leben erwecken zu können, müssen sich Content Creator also mit diversen Fragestellungen rund um Design, Hardware, Software und beschäftigen.

Basics

Das Set

Essenzieller Bestandteil im Inventar eines Vtubers ist eine Webcam oder Kamera mit hoher Auflösung, um Gesichtsbewegungen und Mimik zu erkennen. Ein Mikrofon, eine gute Gesichtsbeleuchtung und ein adequater PC oder Laptop gehören ebenfalls zu den Must-Haves des Jobs.
Als Grundvoraussetzung sollten die Kamera eine Auflösung von mindestens 720p und 30 FPS haben. Viele Vtuber verwenden jedoch bereits iPhones anstelle einer Webcam oder kombinieren diese miteinander, um Gesichtsausdrücke besser erkennen zu können.

Für den Ton können entweder spezielle USB-Mikrofone oder ein Gaming-Headsets mit eingebautem Mikrofon verwenden werden. Im Idealfall werden vollwertige XLR-Mikrofone genutzt, da diese besser funktionieren und eine fantastische Audioqualität bieten.

Viel Licht ist wichtig, damit Kamera und Software leichter erkennen können, ob der Vtuber gerade lacht, die Stirn runzelt oder den Mund bewegt. Dazu reicht bei Tag ein heller Standort am Fenster, bei schlechteren Lichtverhältnissen sollten Lampen so arrangiert werden, dass sie das Set ausreichend beleuchten.
Marken wie Elgato und Razer bieten spezielle Streaming-Lichter an, die mit den Webcams gekoppelt werden können.

Ein Überblick über das Entstehen eines 3D-Vtuber Charakters, Quelle: https://miro.medium.com/max/2400/0*Ri6kbNkAZi_eLoaJ

Gute Internetverbindung

Es macht durchaus Sinn, vor Beginn eines Streams die Internetverbindung zu überprüfen, da es ansonsten während der Live-Auftritte zu ungewollten Pannen kommen kann.
Nach Empfehlung von Streamingplattformen wie Twitch sollten mindestens 6 Mbps für 1080p in hoher Qualität bei 60 FPS zur Verfügung stehen. Wenn diese Anforderungen nicht erreicht werden können, leidet die Streamingqualität darunter, jedoch sind 3Mbps in einer 720p-Auflösung bei 30 FPS im notfalls noch im Bereich des Vertretbaren.

Bei Streams mit hoher Bildrate, wie beispielsweise Ego-Shooter-Games, wird eine Uploadgeschwindigkeit von 10-15Mbit/s und ein Bildschirm mit hoher Bildwiederholungsfrequenz benötigt.
Bei niedrigeren Internetgeschwindigkeiten und keiner Möglichkeit zur Aufrüstung, ist Live-Streaming in einer ansehnlichen Qualität nicht möglich.

Standcomputer oder Laptop

Prinzipiell gilt, mehr ist besser, besonders wenn es um RAM und Prozessoren geht. Die Grafikleistung ist nur dann von größerer Relevanz, wenn Spiele gestreamt werden. Jedoch sind hierbei GPU-Empfehlungen der einzelnen Spieltitel zu beachten.
Ob PC oder Laptop hängt von der Leistungsfähigkeit ab. Ein hochwertiges Gerät steigert den qualitätiven Output des Streams, jedoch gibt es auch preiswertere Alternativen.
Die Mindestanforderungen für einen Live-Stream:

  • Prozessor: Intel i5-4670 oder AMD FX-8350
  • Arbeitsspeicher: 8 GB DDR3
  • Grafikkarte: Nividia Geforce 960 oder AMD Radeon R9 280
  • Betriebssystem: Windwos 7

Bei vorgefertigten Systemen oder wenn der PC selbst gebaut wird, ist auf folgende Anforderungen zu achten:

  • Prozessor: Intel i5-9600k oder AMD Ryzen 5 3600
  • Arbeitsspeicher: 16GB DDR4
  • Grafikkarte: Nivada Geforce GTX 1080 Ti oder AMD Radeon 5700 XT
  • Betriebssystem: Windows 10

Einige Streamer gehen noch einen Schritt weiter und verwenden zwei Computer oder Laptops, um die Arbeitslast zu bewältigen – einen, um ein Spiel auszuführen und den anderen, um die eigentlichen Streaming-Anforderungen zu erfüllen.

Anwendungen und Software

Bekannteste Applikationen und Software, Quelle: https://miro.medium.com/max/2000/0*kK84l5zqVOv2WxDW

Der Avatar

Als guten Ausgangspunkt für angehende Vtuber ohne Vorkenntnisse im Design-Bereich und mit geringem Budget eignet sich VRoid-Studio oder Live2D . Ein großer Vorteil dieser Tools ist, dass sie bereits “vorgeriggte” Basismodelle anbieten, welche sich hervorragend für erste Probeversuche eignen und jederzeit durch Details individuell angepasst werden können. Die Software ist zudem kostenlos.
Auch Websites wie TurboSuid, Sketchfab und CGTrader bieten kostengünstigere 3D-Modelle zum Download an.

Hat man als Content Creator viel Zeit und kreatives Talent, ist es möglich mit Software-Programmen wie Blender, Maya oder Zbrush einen völlig individuellen Charakter zu entwerfen.
Auch von Unreal Engine gibt es Anwendungen wie Meta Human Creator, um digitale Menschen mit hoher Wiedergabetreue zu erstellen. Es gibt auch Optionen für die Arbeit mit Apps wie ReadyPlayerMe oder Wolf3D. Allerdings sind hierfür gute 3D-Kenntnisse erforderlich.

Das fertige Modell muss dann noch “geriggt” werden, sprich mit einem digitalen Skelett versehen werden, um menschliche Bewegungen so realistisch wie möglich imitieren zu können. Dies kann entweder direkt in Blender oder für 2D-Modelle auch beispielsweise in Live2D Cubism erledigt werden.
Für die VRM-Konvertierung benötigt man eine 3D-Animationssoftware wie Unreal, Unity 3D oder iClone, jedoch finden sich Tutorials auf Youtube, wie beispielsweise das folgende für eine Formatierung in Unity:

Tutorial: Avatar zu VRM-Datei, Quelle: https://www.youtube.com/watch?v=fRnZUs4SFmk

Eine weitere Alternative zu den kostenlosen 2D- und 3D-Modellen, ist die Möglichkeit den Avatar bei einem Künstler in Auftrag zu geben. Es ist einfacher und geht schneller, als sich selbst mit der Charakterentwicklung und 2D- oder 3D-Umsetzung beschäftigen zu müssen. Allerdings ist diese Option keinesfalls billig. Auf Websiten wie Fiverr und Etsy geht die Preisspanne von 50$ für einfache Avatare, bis hin zu Beträgen im sechsstelligen Bereich für hochwertige und detailgetreue Modelle.

Das Tracking

Ganzkörper MoCap Setup Beispiel, Quelle: https://miro.medium.com/max/2400/0*T9lDZ4sGGdeDrIrn

Der Großteil der Vtuber-Einsteiger nutzt Anwendungen von Steam wie FaceRig, Animaze, Wakaru, 3Tene und Vtube Studio, da diese für alles was man so an einfachem Mocap (=Motion Capture, Bewegungsverfolgung) braucht, bieten können.
Es gibt aber auch einige beliebte virtuelle Streamer wie Code Miko, die Technologien aus der Videospiel- und Filmindustrie verwenden, wie z. B. 30.000-Dollar-Motion-Capture-Anzüge von Xsens.

Echtzeit-Aufnahmen während Tracking, source: https://www.youtube.com/watch?v=e818LgnJ9rI

Eine weitere beliebte Motion-Tracking Software ist Luppet. Als eine der größten Anwendungen, die von Vtubern verwendet wird, bietet es ein sehr sauberes, genaues Tracking und ist in mehreren Sprachen verfügbar. Allerdings ist es nicht auf Steam erhältlich, sondern nur auf einer japanischsprachigen Website und kostet um die 50$.

Inzwischen ist es außerdem möglich, mithilfe von iPhones mit Infrarot-Tiefenkamera für Face ID (seit der Veröffentlichung des iPhone X, 2017) ein genaueres Gesichts-MoCap zu erhalten als mit herkömmlichen Webcams.

Tutorial: Vtubing am Iphone, Quelle: https://www.youtube.com/watch?v=4aFOrHLR91Y

Die Ausrüstung für die Gesichtserfassung wird jedoch immer leichter und einfacher der breiten Masse zugänglich gemacht. Einige Umsetzungen erfordern zwar immer noch Marker im Gesicht und das Tragen eines Helms mit einer auftragsbezogenen Kamera, aber der Markt scheint sich in die andere Richtung zu bewegen – er unterstützt normale Streamer-Setups, die 2D-Webcams verwenden.

Wakaru und Hitogata sind gute Software-Beispiele dafür. Diese beiden kostenlosen Programme bieten eine frei verfügbare Gesichtsverfolgungsfunktion, die leicht in einen 3D-Charakter integriert werden kann. Aufgrund des offenen Algorithmus ist die Verfolgungsqualität nicht die beste auf dem Markt, aber die Bequemlichkeit überwiegt die Nachteile, zumindest für VTuber-Anfänger.
Qualitativ höherwertigere, kostenpflichtigere Webcam-Lösungen sind Hyprface SDK und Facerig. Hyprface ist besonders nützlich, um vorgefertigte 3D-Charaktermodelle zu integrieren.

Um die Position der Hände zu verfolgen, benötigen virtuelle Streamer ein optisches Handverfolgungsmodul, auch Leap Motion, genannt. Dieses kann Bewegungen viel genauer erfassen als iPhones oder Webcams und wird oft in Verbindung mit weiterer Ausrüstung verwendet, um Modelle noch realistischer animieren zu können.

Cory Strassburger – iPhone 12, Unreal Engine, und Xsens Setup, Quelle: https://www.youtube.com/watch?v=wSx472esQps&t=5s

Das Debüt

Schlussendlich wird der Avatar zum ersten Mal dem Publikum auf Streaming-Plattformen wie Twitch oder Youtube vorgestellt. Unabhängig vom narrativen Inhalt und dem eventuellen Skript, gibt es zunächst noch einige Import-Hinweise zu beachten:

Es gibt zwei Möglichkeiten, das Modell in einem Stream zu übertragen, abhängig von der Anwendung, die für das Mocap des Avatars verwendet wird.
Auf der Plattform Steam kann immer nur eine Anwendung ausgeführt werden. Sollte der Content Creator also keinen weiteren Inhalt teilen, kann er einfach die Quelle “Game Capture” auf OBS und Streamlabs verwenden um sein Modell auf einen Hintergrund seiner Wahl zu überlagern. Zusätzlich is bei dieser Methode zu beachten, dass die Transparenz in der verwendeten MoCap-Software immer aktiviert ist und beim Streamen auch zugelassen wird.

Alternativ dazu gibt es auch Vtuber, die während ihrer Streams andere Inhalte teilen, wei beispielsweise Spiele spielen oder gemeinsam mit ihrem Publikum auf Youtube-Videos reagieren. In diesem Fall gibt es Programme wie SUVA für Windows, mit denen virtuelle Streamer ihre Avatare in Unity importieren können und diese dann in Streaming-Anwendungen wie OBS einblenden. Dadurch bleibt das Steam-Konto frei.

In jedem Fall ist es wichtig sich vor seinem Debüt ausgiebig mit allen verfügbaren Programmen und Technologien auseinander zu setzen, um für sich selbst die bestmöglichste Variante zu finden. Um auch in Zukunft mehr Vtuber in die Community zu holen, währe die Umsetzung folgender Punkte ein Anfang:

  • Mehr Tools zur Erstellung von Avataren für Nicht-Experten, die verschiedene Kunststile unterstützen
  • Eine All-In-One-Mocap-Lösung für das gesamte Gesicht, den Körper und die Finger, die nur eine Webcam benötigen und damit Kosten und Ineffizienz verringern
  • Engere Zusammenarbeit zwischen Software- und Hardwareanbietern, um den Integrationsprozess zu vereinfachen und den Prozess zu vereinheitlichen, weiterzuentwickeln und zu konzentrieren
  • Eine einfache Benutzeroberfläche für Nicht-Entwickler, damit die Nutzung von Software und Hardware einer breiteren Masse zugänglich wird

Demnächst

  • Bedeutung, Entstehung und aktueller Bezug
  • V-Tuber Agenturen und ihre Protagonisten
  • Software und Programme – Was gibt es und wie verwende ich sie?
  • Entwicklung eines Characters – 2D und 3D Modell
  • (Erwartungshaltungen von Usern, Protagonisten und Agenturen)

Literaturverzeichnis

Wheaterbed, Jess (25.12.2021): How to be a Vtuber, https://www.techradar.com/how-to/how-to-be-a-vtuber, in: https://www.techradar.com/computing [10.01.2022]

hyprsense (23.09.2019): How to Become a Virtual YouTuber/Influencer, https://medium.com/@hyprsense/how-to-become-a-virtual-youtuber-influencer-7074b852fb9, in: https://medium.com/@hyprsense [10.01.2022]

xsense (): The perfect Virtual YouTuber setup, https://www.xsens.com/blog/virtual-youtuber, in: https://www.xsens.com/explore?tag=motion-capture-for-animation [10.01.2022]

xsense (): Xsens MCCC. How to become a vTuber, https://www.xsens.com/watch-webinar/MCCC-How-to-become-a-vTuber, in: https://www.xsens.com/blog/virtual-youtuber [10.01.2022]

by Marton Szabo-Kass -

UI principles of in-car infotainment

| design challenges and principles from the car navigation system developer company TomTom

As it was stated in my earlier blog entry, one of the current cockpit design trends is the multiplicity of screens in cars. This increasing display real-estate is creating challenges for automotive UX designers in creating an effective driver experience instead of displaying as much beautiful information as possible and as a result distracting the driver.

The navigation system and mapmaker company TomTom is also discussing this topic with their principal UX interation Designer Drew Meehan in a blog post, with insightful content about the design principles to be considered.

Finding balance in information overload

The keyword of building an interface with informational balance is: “action plus overview”. When looking at several screens, the shown information should be clustered to provide hints for next actions, and further give an overview of the car’s journey. This should be achieved by sorting the information shown on separate screens to compensate each other.

An example would be a car equipped with head-up display (HUD), a cluster behind the steering wheel and a central display. On the HUD only the current status information would be shown, about the “here and now”. The cluster would show information about oncoming actions in the near future. The central stack would have the job to give the complete overview about the journey, arrival time and complementary info such as refueling/recharging possibilities.

This structure creates a flow of eye movement, which helps the driver will understand the information placing easily and know where to look for specific interests.

Information structure by TomTom for in-car interfaces (source: see below)

Challenges in automotive interface design

There are some aspects and strategies that need to be considered when designing in-car interfaces:

  • Responsive and scalable content according to screen size: complying with different screen sizes in different vehicle models of a brand
  • Adaptive content: displaying only the needed information for the current driving situation. This requires prioritization of the information according to drivers’ needs. —> if the fuel/battery charging is critical, the next stations should be displayed. If the tank/battery is full, the screens can focus on less data. —> if there is no immediate route change action necessary, e.g. straight highway for 50 km, other data from other driver assistance systems could be shown (e.g. line keeping). —> in the city with intense navigation needs, the best could be to show prompt actions on the HUD, closest to the drivers’ eyeline for easy help.
  • Creating one interface ecosystem: all screens should be connected and not segregated. The screens and the shown information should create continuity and complement each other.
  • Customization options: despite good information balance, some people could be overloaded and stressed by multiple screens. They should be allowed to change screen views and positions of content.

TomTom’s UX department has done user research with varied screen info content. They found that “users want easy, glanceable and actionable information”, which reduces cognitive load and stress.

In summary, the UI design has to support the drivers’ actions by showing essential, easily digestable information. It should be placed where the driver mostly expects the content to be and have just the right amount of detail, according to the current driving situation.

Source

Online article by Beedham, M.: Informing without overwhelming, the secret to designing great in-car user experiences, 13.10.2021.
Retrieved on 09.01.2022.
https://www.tomtom.com/blog/navigation/designing-effective-in-car-user-interfaces/

by Anna Mitterhauser -

Analyse Deceptive Design Pattern

In this short blogpost I want to analyze one examples of a deceptive design pattern* that I stumbled across during my research in detail.

On every detail page of an apartment on airbnb there is a small overview on booking dates and prices (left image). The whole container is basically divided in two parts: a summary with a CTA and the calculation underneath. The hierarchy within this module is clear as the price per night is highlighted with big, bold font style. They use this number as the most representative value even if there are some additional fees added later on and it is not possible to book the apartment at that price. So to get the „real“ price per night the user has to manually divide the overall price for the stay including the service fee by the nights. The CTA is placed above the calculation, therefore some users might click on the pink button before they read about additional fees. Furthermore the weekly discount is displayed twice and highlighted whereas the fee is just in default text style. My suggestion to correct this deceptive design pattern* is to use the correct price per night including all fees, add a plus to the service fee amount and move the CTA to the bottom (right image).

* formerly called “dark pattern”

by Marton Szabo-Kass -

Automotive intelligent cockpit design trends

| short summary of a cockpit design trends report, published early 2021

According to a report of 2020 looking at new car models and concepts cars released in the last years, following major directions of intelligent automotive cockpit design trends can be summarized:

  1. Richer versatilities
    New products are getting introduced with developing automotive electronics, such as driver monitoring systems, driving recorders, rear row and co-pilot entertainment displays. Additionally, intelligent surfaces allow further versatility – window or sunroof glasses can become displays and intelligent seat materials can become interfaces as well.
  2. Multi-channel, fused human-vehicle interaction
    New ways besides touch and voice control are active voice assistants, gesture control, fingerprint reader, sound localization, face recognition and holographic imaging. These multi-channel interaction modes can contribute to safer use and driving as well as deliver an extended user experience.
  3. 3D and multiple screen cockpit displays
    We see dual-, triple- and quint-screen and A-pillar display implementations for delivering control, co-pilot and rear row interactions.
  4. “User experience”-centricity and scenario-based interaction
    In-vehicle scenario modes are getting in focus – the car interior should serve as an intelligent, connected, flexible and comfortable personal space, for e.g. driving, resting, working or even shopping. As a UX-centered implementation example the Mercedes-Benz S-Class ambient lighting system was named, that uses 263 LEDs to adapt to driving situations (warnings) or give a real-time feedback of interactions with the onboard computer.
  5. Interaction with every surface via intelligent materials
    New surface materials are introduced in concept cars to explore touch control possibilities like displaying fuctional buttons in new ways.
  6. Touch feedback as key technology for higher level of safety
    Besides TIER-1 suppliers also several start-ups are developing touch feedback technologies for supporting less distraction and more effective driver-car interaction.
  7. Software systems will be keys of differentiation
    The introduction of Android to in-car entertainment systems was a big step. The need for personalization and simultaneous software and hardware iterations and 3D vision are new challenges for the operations system development in realizing intelligent cockpit systems.

Source

[1] Summary of: “Automotive Intelligent Cockpit Design Trend Report, 2020” by ReportLinker. Retrieved on 09.01.2022
https://www.reportlinker.com/p06003502/Automotive-Intelligent-Cockpit-Design-Trend-Report.html?utm_source=GNW

by Lehel Toeroek -

The Hammond Vibrato Scanner

The Vibrato Scanner is an electromechanical device that produced vibrato and chorus effects in old Hammond organs. Unlike newer technologies that modulate the signal at their source, the Scanner system modified the sound right on its way from the keyboard to the amplifier.

The hardware consists of two main elements: a phase shift line enclosing a series of passive all-pass filter stages and a scanner that is a single-pole 16-throw air-dielectric capacitor switch, connecting taps on the delay line to the output. 

Each filter stage of the delay line is shifted in phase relative to the previous one, resulting in an increasing time delay between every successive step of the line (about 50μs per filter stage). Nine of these steps are connected to the sixteen inputs of the scanner, allowing it to sample back and forth along the line. For example, labeling each output of the delay line with a number from 1 to 9 would result in the following 16 digit sequence: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2].

As the scanner gradually transitions between the taps, it alternates the phase shift applied to the sound, causing slight variations to the pitch and resulting in a vibrato effect. The depth of the vibrato effect relies on the width of the frequency shift fed into the scanner, which means that scanning about one-third of the delay line would produce a lighter vibrato effect while scanning the whole line would significantly increase its depth. The chorus effect is achieved by simply mixing the dry input signal with multiple outputs on the delay line.

In effect, scanning back and forth along the delay line is like moving toward and away from a sound source. This causes a change in frequency due to Doppler shift. 

(Vorkoetter, 2009)

Originally, the delay line is part of the Hammond Vibrato Scanner unit and it incorporates a series of second-order audio filter stages where each stage is shifted in phase relative to the previous one. This results in an increasing time delay between every successive step of the line (about 50μs per filter stage). This is then fed into a scanner, that is a single-pole 16-throw air-dielectric capacitor switch connecting nine selected taps from the line to the output.  As the scanner gradually transitions between these taps, it alternates the phase shift applied to the sound, causing slight variations to the pitch that result in a vibrato effect.

A notable limitation of this original design is the fixed gear ratio tied to the Generator Run Motor, which spins the rotor continuously at about 7Hz. The depth of the vibrato depends on the width of the frequency shift fed into the scanner, which means that scanning about one-third of the delay line would produce a lighter vibrato effect while scanning the whole line would significantly increase its depth. In addition to the vibrato, a chorus effect can also be achieved by mixing the dry input signal with multiple outputs on the delay line, or a chorus-vibrato by mixing the dry signal with the output of the vibrato.

The iconic chorus and vibrato effect is the result of Hammond’s extensive search for expression and emotional intensity. The Scanner Vibrato unit achieved to deliver a unique sonic character by adding depth and movement to the sound of the Hammond Organ. As the popularity of modulation effects were increasingly growing within pop music, so was the Hammond Vibrato unit. Since the 1960s, its unique sound has made its way into a wide range of genres, from blues and rock to hip hop and downtempo. Some notable artists include Booker T. & The MG’s, Yes, Beastie Boys and Portishead.

Sources:

Vorkoetter, S., 2009. Overhauling and Improving the Hammond M-100 Series Vibrato System. [Blog] http://www.stefanv.com, Available at: <http://www.stefanv.com/electronics/hammond_vibrato_mod.html> [Accessed 7 January 2022]. http://www.stefanv.com/electronics/hammond_vibrato_mod.html

Martinic.com. n.d. THE HISTORY OF THE SCANNER VIBRATO. [online] Available at: <https://www.martinic.com/en/products/scanner-vibrato/history> [Accessed 7 January 2022].https://www.martinic.com/en/products/scanner-vibrato/history

Electronic Music Wiki. n.d. Vibrato scanner. [online] Available at: <https://electronicmusic.fandom.com/wiki/Vibrato_scanner> [Accessed 7 January 2022].https://electronicmusic.fandom.com/wiki/Vibrato_scanner

Benton Electronics. n.d. Service Manual – The Hammond Vibrato – Benton Electronics. [online] Available at: <https://bentonelectronics.com/service-manual-the-hammond-vibrato/> [Accessed 7 January 2022].

Modularsynthesis.com. n.d. ModularSynthesis – Hammond Scanner. [online] Available at: <https://modularsynthesis.com/modules/DJB-scanner/scanner.htm> [Accessed 7 January 2022].https://modularsynthesis.com/modules/DJB-scanner/scanner.htm

GIF – https://www.nshos.com/HAMMOND10.htm

by Magdalena Samonigg -

Augmented and Virtual Reality Exhibitions

Museums and exhibitions aim to bring their collections to live. Since the ongoing development of augmented and virtual reality technologies it seems obvious to integrate them in the classical exhibitions. Through the usage of AR and VR technologies, museums can add a virtual layer to their exhibitions and create immersive experiences. Some areas of application could, for example be, allowing users to explore Egyptian burial chambers, meet historical characters or find out more about an artist by virtually visiting their hometown.

As part of a study, the Research Centre of Excellence in Cyprus (RISE) has interviewed 15 global museums about their experience in including AR and VR technologies in their exhibitions. Around 50% of them stated, that they made use of these technologies in order to create an augmented spaces for visitors to experience the exhibition, for example in form of a virtual time travel. They integrated VR and AR experiences in their exhibitions as an extension to the classic exhibitions, instead of outclassing them.

Another possibility to create a virtual exhibition can be done by scan exhibitions and arrange them in a virtual space. In this way, exhibitions can be accessible from all around the world. It could also enable a larger audience, for example disabled people, to visit exhibitions they could not visit in the real life.

Examples

Mona Lisa: Beyond Glass

Source: https://www.viveport.com/18d91af1-9fa5-4ec2-959b-4f8161064796

The Virtual Reality experience “Mona Lisa: Beyond Glass” was part of the Leonardo da Vinci blockbuster exhibition taken place at the Louvre in Paris, in October 2019. Through the use of animated images, interactive design and sound, it allowed the users to explore it’s details, the wood panel texture and how it has changed over the time.

Source: https://www.gmw3.com/2018/02/national-museum-of-finland-offers-virtual-time-travel/

The National Museum of Finland enabled their visiters a virtual time travel back to the year 1863, by letting the users walking inside the painting “The Opening of he Diet 1863 by Alexander II” by R. W. Ekman. In this VR experience the visitors could speak with the emperor and representatives of the different social classes or visit historical places.

References

by Andrea Paricio Hernares -

[Data Safety #4] Interviewing users

¡Happy New Year 2022!

Finally I was able to take advantage of the Christmas holidays to make use of my close circle for conducting a few interviews with the end users. Perhaps it is not the best methodology, since we have no specific product to develop, but I have focused it as a continuation to deepen and test the initial results of the survey type test that I showed in the previous post. I hope that the results of the research can be extended in this way.

Having as a public any user of the network, I have tried to establish two key parameters when selecting different profiles for interviews:

–  Level of use

Here I divided people who design, program, or work with sensitive data. In general, those who are not only users, but are also part of the structure that handle data. On the other hand, we have those who are only passive users of this type of service.

–  Time of use

For this one I made a simple division between people who are most exposed to the internet and spend more time per day on a screen, so they are accustomed to read and understand the architecture of a web, as well as react agilely to pop-up and visual inputs. And with those who spend less time than average at day or week in front of the desk or with a mobile device.

This division seemed to me more accurate and efficient to establish a demographic categorization by age, gender or studies; since they are factors that I think relate directly to the user’s response to the cookie window.

Diagram 2×2

Understanding the division and choosing at least one person to cover each quadrant to be able to cover all combinations, I planned the interview script as follows:

  1. Introduction in which the person presents himself and recounts his or her living situation: studies and career.

Examples of questions: how old are you? what are you doing with your life? do you study? do you work? In what?

2. Relationship to technology, time of use.

Examples of questions: Do you get along with computers? Do you work with computers? Do you use computers in your day to day? Do you think you are dependent on mobile? Do you think you could stop using it if you wanted to?

3. Feelings/beliefs regarding the issue of data security and cookies

Examples of questions: Do you feel sure leaving your data on the net? Are you afraid of what they might know about you/do with them? What do you feel when an ad appears about something you’ve said, previously searched for? Do you do anything to avoid giving out your data? Do you mind being asked about your data or consent?

4. Specific question about the design of the cookie window and/or your rights as a user.

Examples of questions: What choice of days when you get the cookie question? Do you know if you can ask a platform to delete your data?

Conclusions

I do not plann to make public the literal transcript of each of the interviews, only to highlight the differences or surprises I have had when analyzing the users answers to each question and sharing it. In general, all the answers were similar to the majority percentages of the test type, they worry about the use of their data for purposes you do not know; but nevertheless they do not hesitate to accept without reviewing the conditions of each website in relation to data protection.

There were some comments that were repeated and that had not been included in the previous test questionnaire as the recognition by the average user that their data is given as payment to access internet content free of charge. For example, YouTube ads in their videos annoy them, but as they are given the option to pay to access the content without advertising interruptions, they accept better to watch the add. It seems that this fact is related in the mind of the user in the same way by changing the advertising vision by its data transfer to advertise its profile; that is, as a transaction in which the user, the advertisers and the owners of the website participate. Thus, they give their data when they believe that the product they access (the website) cannot be given to them if they do not give something.

Another interesting behavior is that most users understand that their data can serve as specific advertising purposes in their profile, many recognize that after searching for a product in the network appear ads of this same product. However, they consider that it does not affect them, that is, that the belief of knowing the functioning makes them assume that they will not be affected by the ad, that it will not achieve its purpose because they are not sensitive to it.

It seems a dangerous belief and also a false one, the fact of knowing how something works does not exempt you from being affected. And, in fact, it makes you more likely to be fulfilled without you noticing as you reflex less about it (Dunning-Kruger effect). It is also a false way of thinking since they only believe they know what it is, but only relate them to a known and partial part of the uses that can be given to their data. This does not seem to affect the user who is in the top right quartet, that is to say those who work with data, who are also the only ones who correctly answer questions about their data rights. This type of user understands that he is permanently exposed to this type of manipulation and tends to protect more which websites access part of his data.

Drunning-Kruger Effect

As final information-pill, some users claim to try to “confuse” the algorithm by subscribing to product websites that would never look for or searching for items that they do not need so that the profile they have of this does not resemble reality.

What do you think of this trial?

Thank you very much for reading me, see you in the next post where we will see negative examples (dark patterns) of cookie window.

References:

  • Designing for the digital age by Kim Goodwin

by Antonia.Schmidt -

Das Problem mit der Zweigeschlechtlichkeit in der Forschung

Ich habe in meinem ersten Blogbeitrag bereits aufgezeigt, dass es in der Sozialwissenschaft schon lange als Tatsache gilt, dass es keinen Grund zur Annahme gäbe, es bestünde eine naturhaft vorgeschriebene Zweigeschlechtlichkeit. Alle Unterscheidungen zwischen den Geschlechtern, die zum Beispiel auf Charaktereigenschaften oder Vorlieben basieren, sind gesellschaftliche und sozial erlernte Konstrukte. Diese werden nicht nur durch Kommunikation weiter verbreitet, sondern spiegeln sich unter anderen ebenfalls in der Gestaltung sowie der Nutzung von Objekten und Artefakten wieder. 

Obwohl die interdisziplinäre Gender-Forschung diesen Umstand schon vor langer Zeit aufgedeckt hat, wird ein Problem von einigen Forschenden kritisch diskutiert: Die Reproduktion von Zweigeschlechtlichkeit durch die Forschung selbst. Prof. Dr. Uta Brandes ist eine der ersten Wisschenschaftler*innen, die international auf dem Gebiet Gender Design forschte. Von 1995 bis 2015 war sie Professorin für Gender und Design sowie für Designforschung an der Köln International School of Design. Sie ist außerdem Mitgründerin des international Gender Design Network und Vorsitzende des Netzwerkes in Deutschland. Ihre Publikationen und empirischen Arbeiten sind einige der wenigen im entsprechenden Forschungsbereich und deswegen auch für meine Recherche von großer Bedeutung. 

Uta Brandes beschäftigt sich in ihrem Buch „Gender Design. Streifzüge zwischen Theorie und Empirie“ ebenfalls mit sogenannten „wicket problems“ in der Wissenschaft. Diese Probleme sind laut ihr diese, die sich nicht einfach mit dem Kategoriesystem richtig oder falsch lösen lassen, machen allerdings auf eine wichtige Erkenntnis als Nährboden für wissenschaftliches Arbeiten aufmerksam: Wissenschaft sollte nicht mit der Überzeugung betrieben werden, objektiv sein zu können. Diese Grundeinstellung aus dem Konstruktivismus resultiert aus der Überzeugung, Forschende selbst könnten nicht frei von äußeren Umständen und gesellschaftlicher bzw. persönlicher Beeinflussung sein – auch wenn diese nur unterbewusst stattfindet. Folglich ist davon auszugehen, dass Ergebnisse immer in einem gewissen Maß verfärbt sind. Laut Brandes seien theoretische und empirische Analysen deshalb im besten Fall Annäherungen oder begründete Annahmen, die versuchen Phänomene oder vermeintliche Wirklichkeiten zu erklären. Forschende können demnach selbst gesellschaftlich konstruierte Gender-Stereotype verinnerlicht haben und diese, wenn auch unterbewusst, Einfluss auf ihre Forschung nehmen lassen.

Dazu kommt ein weiteres Dilemma: Auch dann, wenn Forschende die in der Gesellschaft immer noch vorherrschende Zweigeschlechtlichkeit mit ihrer Forschung kritisch hinterfragen und aufzeigen möchten, müssen sie sich in den meisten Fällen selbst einem bi-polaren Kategoriesystem der Geschlechter bedienen. Wenn sie zum Beispiel der Gebrauch, bzw. das Gebrauchsverhalten von Objekten unter Genderaspekten untersucht werden soll, sind Wissenschaftler*innen gezwungen, zumindest in Geschlechtskonstruktionen der Partizipierenden zu unterscheiden. Die Forschung tut dies deswegen gezwungenermaßen, um Gender-Fragestellungen überhaupt erforschen zu können. Diskutiert und kritisiert wird allerdings von vielen Wissenschaftler*innen, Forschungen wie diese könnten Genderkonstruktionen und Stereotype weiter verfestigen. Laut Uta Brandes gäbe es für dieses Dilemma keine wirklich zufriedenstellende Lösung, sie hebt aber hervor, dass der große Unterschied zwischen einfachen ideologischen Behauptungen, es gäbe nur ein bi-polares Geschlechtersystem, darin bestünde, nicht zu untersuchen, was die Geschlechter sind, sondern, was sie tun. Hinzu kommt, dass Forschungen in diesem Bereich (fast) immer mit dem Bewusstsein betrieben werden, welches eingangs bereits erwähnt wurde. Nämlich, dass es sich bei Geschlechtern bzw. Gender um gesellschaftliche Konstrukte handelt, die alles andere als natürlich gegeben sind. 

Literaur

Brandes, U. (2017). Gender Design. Streifzüge zwischen Theorie und Empirie. Berlin, Boston: Birkhäuser Verlag. Verfügbar unter: https://doi.org/10.1515/9783035611090

beDesign [Homepage]. Uta Brandes. Verfügbar unter: https://www.be-design.info/uta-brandes

Riegel, C., Baßer, B. (2014). Meine Forschung ist durch und durch politisch. Christine Riegel und Bianca Baßler im Gespräch mit Carol Hagemann-White. Freiburger Zeitschrift für GeschlechterStudien 20/1.