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

ZEIT Online als Mac-App

Entwurf für eine Mac-App des Nachrichten- und Magazinportals ZEIT Online.

Der Fokus liegt darauf, die App im Sinne der von MacOS-Patterns zu gestalten und dabei ein stimmiges Konzept für den Desktopbereich zu entwerfen. Die Frage nach der Sinnhaftigkeit oder dem Funktionsumfang wurde dabei außer Acht gelassen. Dieses Projekt ist eine reine Auseinandersetzung mit Interfaceguidelines von MacOS bzw. Desktop-Anwendungen.


Struktur

1 Struktur.png1 Struktur.png
1 Struktur O.png1 Struktur O.png

Ich habe die App in vier Kategorien geteilt:

  1. Feed: Ein kontinuierlicher Artikel-Stream, der immer aktuell ist.
  2. Schlagzeilen: Kurze Nachrichten für einen schnellen Überblick.
  3. Entdecken: Artikel, sortiert nach Kategorien, für ein individuelles Lesen.
  4. Audio: Alle hörbaren Angebote und Artikel.

Im Gegensatz dazu haben die aktuellen ZEIT-Online-Apps etwas andere Navigationspunkte. Bei iOS bspw: „Home“, „Audio“, „Mein Abo“, „Schlagzeilen“, „Spiele“. Ich wollte die Struktur vereinfachen und jedem Abschnitt einen klaren Usecase geben, ohne nach monetären Interessen zu sortieren.


Inhalte

Feed.pngFeed.png
Feed O.pngFeed O.png

Feed

Der Feed ist ein Endlos-Scroll an derzeit relevanten Artikeln, vergleichbar mit der Zeit-Online-Startseite. Besonders “heiße” Artikel werden prominent platziert. Auf dieser Seite findet sich bspw. auch das Energie-Dashboard.

Weit oben sind Verlinkungen zu den derzeit relevantesten Themen, der auf Klick eine Liste an dazugehörigen Artikeln zeigt. Zu jedem Artikel wird ein Titel, ein Bild, das Thema und eine Metrik eingeblendet.

Schlagzeilen.pngSchlagzeilen.png
Schlagzeilen O.pngSchlagzeilen O.png

Schlagzeilen

In diesem Tab sollen Leser:innen schnell einen Überblick über den aktuellen Stand der Lage bekommen können. Durch den Masterdetail-View erhalten sie eine schnelle Übersicht und können sich durch die wichtigsten Punkte des Tages klicken; ein Vorteil gegenüber der offiziellen Webseite von ZEIT Online. Über der Master-Ansicht finden sich die derzeit fünf relevantesten Themen, nach denen gefiltert werden kann.

Auf der Webseite von ZEIT Online finden sich unter “Schlagzeilen” alle Artikel, also auch lange Essays und Kommentare. Ich sehe den Sinn dieser Seite hingegen als eine Auflistung an News und Pressemitteilungen.

Artikel können durch das Bookmarking-Icon gemerkt und gespeichert, durch das Sharing-Icon in anderen Apps geteilt werden sowie vorgelesen werden.

Eine Glocken-Symbol vor jedem Artikelthema ermöglicht den Leser:innen, Benachrichtigungen zu diesem Thema zu abonnieren und so stets aktuell informiert zu bleiben. Zum Beispiel: Bei Interesse an der „Rausch-Affäre“ erhält der:die Nutzer:in regelmäßige Updates.

Entdecken.pngEntdecken.png
Entdecken O.pngEntdecken O.png

Entdecken

In diesem Bereich können Leser:innen durch Kategorien navigieren und sich in den für sie besonders interessanten Ressorts umschauen. Ein besonderes Feature ist die Anzeigeoption nach Zeitrahmen: Heute, Woche, Monat, Jahr. Dies ermöglicht nicht nur einen Blick auf aktuelle Inhalte, sondern auch auf die Hauptthemen des jeweiligen Zeitraums.

Artikelansicht.pngArtikelansicht.png
Artikelansicht O.pngArtikelansicht O.png
Artikelansicht groß.pngArtikelansicht groß.png
Artikelansicht Vollbild.pngArtikelansicht Vollbild.png

Artikelansicht

In dieser Ansicht werden Essays geöffnet. Durch die vollflächige Ansicht sind sie immer im Fokus, (fast) alle ablenkenden Dinge sind ausgeblendet. Ein Artikel fängt mit einem großflächigen Bild (oder Video) an. An der Seite findet sich eine Inhaltsangabe, mit welcher Leser:innen in besonders langen Artikeln jederzeit zwischen den Kapiteln springen können.

Kommentare.pngKommentare.png
Kommentare O.pngKommentare O.png

Kommentare

Kommentare öffnen sich als Sidepanel. Das hat den Vorteil, dass sich Leser:innen beim Verfassen eines Kommentars auf den Text beziehen und ihn parallel durchscrollen können. Beim Lesen anderer Kommentare lässt sich schneller nachvollziehen, woher ein Gedanke entstammt. Detail: Sobald ein Kommentar verfasst wird und der Button erscheint, ist dieser fokussiert (anstelle des “Artikel hören”-Buttons).

Profil.pngProfil.png
Profil O.pngProfil O.png

Profil

Leser:innen finden oben links ihr Profilbild, das auf Klick ein Popover öffnet, in dem sich Links wie die Merkliste und Einstellungen finden. Diese Verlinkungen finden sich auch in der Menüleiste.

Dieser Screen unterstreicht die Vorteile von Desktop-Apps: Er präsentiert viele Informationen und Hierarchien übersichtlich, wobei Materialien, Farben, Typografie und Positionierung zur schnellen Erfassung beitragen.

Einstellungen.pngEinstellungen.png

Einstellungs-Fenster

In diesem Einstellungspanel finden sich Einstellungen zur App wie der Speicherung von Artikeln oder der Darstellung. Um Kontoinformationen zu verwalten, öffnet die App eine Einstellungsseite in einem Browser.


Navigation

Tab.pngTab.png

Tabnavigation

Üblicherweise werden Mac-Apps durch eine Sidebar auf der linken Seite navigiert. Um in meiner App dem Content mehr Platz zu geben und horizontale Breite zu sparen, habe ich die Navigation auf vier Überpunkte reduziert und als eine Tabbar in die Kopfzeile der App gesetzt. Dieses Pattern ist bspw. aus der Apple TV App und der Aktivitätsanzeige bekannt.

Drill.pngDrill.png

» Jumping Windows « vs. Drill

MacOS verwendet typischerweise neue Fenster oder Master-Detail-Ansichten, um Objekte zu öffnen. Meiner Meinung nach ist dieses Modell für content-reiche Apps nicht ideal. In diesen gibt es oft eine Vielzahl von Hierarchiestufen und Navigationsverläufen, bspw. Artikelübersicht → Meistgelesen → Artikel → Autor → Artikel etc. Ich sehe das Öffnen neuer Fenster als eine langsame Interaktion an, die die Navigation negativ beeinflussen würde.

Seit einigen Jahren hat MacOS in einigen, meist content-basierten, Apps wie Apple TV ein Pattern etabliert, das Drill-Ins erlaubt. Dieses Verhalten ist von Webseiten und mobilen Apps bekannt. So lässt sich ein Artikel öffnen, ohne dabei ein zweites Fenster öffnen zu müssen. Stattdessen öffnet sich unter der Aktionsleiste im Fenster eine weitere Leiste.


Überblick

4 Übersicht.png4 Übersicht.png


Potenzial

5 Potenzial.png5 Potenzial.png

In der gedruckten Form der ZEIT findet man viel Liebe für Details, Infografiken, aufwendige Illustrationen und Aufarbeitungen von Artikeln. Meiner Meinung nach hat es die digitale ZEIT nicht geschafft, dieses Niveau an Persönlichkeit im digitalen Raum zu erreichen.

Eine Frage für die Zukunft wäre: Wie lassen sich die Funktionsvielfalt von digitalen Anwendungen mit der Detailliebe in den Printausgaben verbinden? Eine Herausforderung, an der auch andere digitale Ausgaben von Zeitungen scheitern.

Eine zweite Frage ist, wie man eine solche App lebendiger gestalten kann, um mehr Engagement zu erreichen. Warum schaffen es Apps wie TikTok, Nutzer:innen zu fesseln, während Nachrichtenmagazine nicht diese Viewerzahlen erreichen, obwohl der Informationsgehalt (wahrscheinlich) so viel höher ist?

Eine dritte ist, wie sich Sprachmodelle in solchen Apps einsetzen ließen. Insbesondere für Menschen mit Aufmerksamkeitsdefiziten stellen lange Artikel eine große Herausforderung dar. Durch diese Modelle lassen sich Artikel zusammenfassen, bestimmte Aussagen und deren Zusammenhänge mit anderen Ereignissen erklären, den Text in einfacherer Sprache wiedergeben, und so weiter.



Andere Kurs-Zwischenergebnisse

6 Kursabgaben Win.png6 Kursabgaben Win.png
6 Kursabgaben Mac.png6 Kursabgaben Mac.png

Im Zuge des Kurses sind mehrere Zwischenabgaben entstanden. Vor dem Endprojekt befassten wir uns mit der Geschichte von Desktopanwendungen auf MacOS und Windows. Ein zentrales Thema war, wie ein modernes Betriebssystem gestaltet sein könnte, das die Verständlichkeit und Klarheit früherer MacOS- und Windows-Benutzeroberflächen beibehält, dabei jedoch mit aktuellen technologischen Möglichkeiten realisiert wird. Was, wenn wir die Komplexität minimieren und wirtschaftliche Interessen in den Hintergrund rücken würden? Im ersten Beispiel ist ein Windows-Stil mit metallischer Optik präsentiert. Hierbei wurden durch den Einsatz von Schattierungen besonders deutlich gemacht, welche Elemente interaktiv sind, sei es durch Klicken oder Auswahl. Im zweiten Beispiel ein Retro-MacOS in einem Lollipop-Style, auch mit dem Ziel der besseren Verständlichkeit.


Was ich mitnehme

Neben meinem Wissenszuwachs in den Bereichen MacOS-Patterns und Geschichte der Desktopsysteme hat mir dieser Kurs vor Augen geführt, dass ein Interface immer in seinem Kontext lebt. Was mobil Sinn ergibt, kann auf einem großen Bildschirm mit anderen erlernten Patterns schon wieder völlig anders aussehen. Ich würde mir in diesem Studium deshalb wieder einen größeren Fokus auf unterschiedliche Arten von Interfaces wünschen. (Bitte, Frank ❤️)

Spannend ist auch, dass es in einem Desktop-System ganz andere Usecases gibt. Während es dutzende, beliebte Content-Apps auf der iOS-Plattform gibt, sind im Desktopbereich eher Utility-Tools sinnvoll. Wenn Content konsumiert wird, reicht dafür üblicherweise ein Webbrowser. So sehe ich das auch ein bisschen mit ZEIT Online.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Die Maus im Fenster

Entstehungszeitraum

Sommersemester 2023

Keywords