Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

ANALYSE – YouTube Redesign

Wie würde die YouTube App ansehen, wenn Google sie im Stile Apples redesigned?

Aufgabe: Mensch & Kontext verstehen

Lernen Sie eine Person richtig gut kennen in Bezug auf Wünsche, Bedürfnisse, Ängste und Sorgen. Überprüfen Sie sämtliche Interfaces im Umfeld dieser Person und analysieren Sie die Touchpoints, wo Sie als Designer Verbesserung herbeiführen können

Person: Natalie, 21, Jura-Studentin

- verbringt im Lockdown viel Zeit zu Hause, kocht viel, oder benutzt ihre digitalen Geräte wie Fernseher, Laptop, Smartphone

- besprochene Probleme mit Interfaces:

- Corona-Warn App Warnungen ließen keine praktischen Rückschlüsse zu

- Schließen der Waschmaschinentür wurde von der Waschmaschine nicht registriert

- Amazon Prime App auf LG Fernseher verliert Internet-Verbindung trotz WLAN

- Lenovo Laptop friert bei Disney+ Website komplett ein

- Drehknöpfe am Ofen führten zu Verwirrung und kaltem Essen

Untersuchter Fall: Wechsel zum iPhone

- wechselte von Android Smartphone zum iPhone 12 mini

- Positiv überrascht: nicht nur Apple Apps, sondern auch App Store Apps sind cleaner, simpler, schöner als Android

- UI Design bei Apple gefällt ihr grundsätzlich besser

- Ursache (unter anderem): Apple Design Guidelines

- Aber: Google verwendet für seine Apps oft eigenes Design

- z.B. YouTube App viel negativ auf

Problem: Inconsistency

Nielsen Norman Group: Top 10 Application-Design Mistakes

2. Inconsistency

Remember the double-D rule: differences are difficult. When users have expectations for how something will behave or where they can access it, deviations from those expectations cause confusion, frustration, and increased cognitive load as people attempt to puzzle out the problem. Human minds crave consistency.

www.nngroup.com/articles/top-10-application-design-mistakes

Wie würde die YouTube App ansehen, wenn Google sie im Stile Apples redesigned?

Analyse: Apples UI Design

Bildschirmfoto 2021-02-15 um 14.26.49.pngBildschirmfoto 2021-02-15 um 14.26.49.png

Bildschirmfoto 2021-02-15 um 14.27.18.pngBildschirmfoto 2021-02-15 um 14.27.18.png

YouTube Redesign

1.png1.png

YouTube iPhone App Player Screens Redesign

Das Videobild ist unverändert und nicht abgedunkelt. Buttons auf dem Video sind für mehr Konsistenz zum Teil so sortiert wie bei Apple und werden wie bei Apple auf einem transparenten Hintergrund dargestellt. Damit sind der Text und die Symbole deutlich besser lesbar bzw. erkennbar. Alle Buttons sind übersichtlicher und besser als Button zu erkennen. Der Button zum Wechsel der Fullscreen-Darstellung ist größer und Touch-freundlicher. Es gibt einen schnellen Zugriff auf die Wiedergabegeschwindigkeit und das Symbol bzw. der Button dafür zeigt gleich die Geschwindigkeit an. Die Buttons um zum nächsten Video zu springen, werden nur angezeigt, wenn man sich in einer Playlist befindet, um eine unbeabsichtigte Verwendung zu vermeiden.

Im Player werden nun nur Symbole angezeigt, die für die Wiedergabe des Videos relevant sind. Die Funktionen Melden und Hilfe sind nun in einem Menü für mehr Optionen. Dort ist ebenfalls die Download-Funktion für Premium-Nutzer, da diese Funktion nur selten gebraucht wird.

Wie bei Instagram und Facebook gibt es nur noch die Möglichkeit zum Liken eines Videos. Die Funktion zum Disliken wurde entfernt, da sie von den meisten Nutzern nur sehr selten verwendet wird, und da die meisten vergebenen Dislikes keine rationale Begründung haben. Das Entfernen der Funktion des Dislikens führt auch zu einer positiveren Atmosphäre.

Die Zahl der Abonnenten eines Kanals wird nicht auf der Seite eines Videos angezeigt, um die Videoseite schlichter zu machen, und um die Entscheidung des Nutzers, ob der einen Kanal abonnieren will, nicht von der Abonnentenzahl zu beeinflussen. Das Glocken-Symbol wurde entfernt, da es nur sehr selten für Nutzer praktisch und sinnvoll ist, sofort einstellen zu können, sich über neue Videos eines Kanals benachrichtigen zu lassen.

Durch die Darstellung der Kanal-Infos über dem Video, ist der Kommentar-Button näher an den anderen Informationen zum Video, zu denen er inhaltlich gehört. Der neue Kommentar-Button ist besser als Button zu erkennen. Vorher war unklar, dass die gesamte Fläche ein einziger großer Button ist. Dies ist ein typisches Problem mit dem teilweise zu minimalistischen UI Design von Google.

2.png2.png

Es wird eine Vorschau des Beschreibungstextes eines Videos angezeigt damit er besser entdeckbar ist. Damit entfällt der Anreiz für den Ersteller des Videos, Informationen in den Titel zu stecken, die auch oben in der Beschreibung vorkommen könnten.

Der kleine Strich am oberen Bildschirmrand zeigt an, dass der ganze Screen wie bei Apple Music nach unten gezogen werden kann, um ihn zu minimieren.

Alle Icons wurden durch Apples SF Symbols ersetzt, so wie es Apples Guidelines entspricht, damit sich die App konsistent in Apples Plattform einfügt. Das alte Icon zum Speichern in einer Playlist war z.B. das Icon, dass Apple zum Duplizieren verwendet, und das Icon zum Teilen, ist das Icon, dass Apple zum Weiterleiten einer Mail verwendet. Das Icon mit den drei Punkten, welches Google von Apple übernommen hatte, ist bei Apple waagerecht, damit es dem Zeichen „…“ und seiner Bedeutung entspricht.

Das führt natürlich zu inkonsistenter Icon-Verwendung auf YouTube als Plattform, weil Apples Icons nicht auf der Webseite verwenden werden können. Aber durch Apples Vereinheitlichung der Hardware- und Software-Architektur von iPad und Mac, spricht nichts dagegen, dass YouTube nicht eine umfassende iPad und Mac App macht, sodass ein Apple Nutzer eine einheitliche YouTube Experience hat.

Die Icons brauchen keine Beschriftung da sie auf der Plattform universell sind und auch bei Apple nirgendwo Beschriftungen haben.

YouTube nutze auch Plattform-inkonsistente Icons zum Öffnen der Beschreibung und der Kommentare. Denn der Plattform-Standard ist, dass das Pfeil-Symbol neben der Beschreibung nur nach unten zeigt, wenn etwas bereits ausgeklappt ist. Und das Icon bei den Kommentaren erweckt den Eindruck, als ob die Kommentare aufklappen, aber sie bestehen nur aus einem Sheet, welches von unten hochkommt.

3.png3.png

4.png4.png

5.png5.png

Fazit

Die Lösung dieses größtenteils ästhetischen User Interface Problems hat sich im iterativen Arbeitsprozess mit immer wieder neuen Verbesserungseinfällen als fruchtbarer ergeben als ursprünglich erwartet. Besonders interessant war der realitätsnahe Aspekt, dass es keine neue YouTube App von Apple, sondern nur ein Redesign von Google sein sollte, welches sich aber an den iOS Plattformkonventionen orientiert. Damit eröffnete sich die Möglichkeit, kleine Details zum Teil besser als Apple UI-Design zu machen. Zusammenfassen zeigt sich aber recht klar, dass dieses Redesign bzw. Apples Designelemente deutlich übersichtlicher sind, und eine bessere Usability aufweisen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Entstehungszeitraum

Wintersemester 2020 / 2021

Keywords