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

Mail Client für Windows 8

Im Wintersemester 2011/12 wurde der Kurs “Re-Mail 2012” von Prof. Boris Müller angeboten. Das Ziel des Kurses war es innovative Konzepte und Interface-Elemente für E-Mailnutzer zu entwickeln. Im Mittelpunkt standen dabei die professionellen Nutzer, die mehr als 30 Mails am Tag bearbeiten.

remail_doku_experteninterviews.pngremail_doku_experteninterviews.png

Im ersten Kursabschnitt sollten wir die Zielgruppe und die Art der E-Mailnutzung methodisch analysieren. Wir führten auf Grund dessen Interviews mit drei unterschiedlichen E-Mail-Experten.

Anouk Meißner Wissentschaftliche Mitarbeiterin der Fachhochschule Potsdam

anouk_meissner02.JPGanouk_meissner02.JPG

Anouk bekommt durschnittlich 80 Mails am Tag und versendet circa 20-30. Sie nutzt den Mailclient “Mail” von Apple, obwohl sie mit diesem nicht 100% zufrieden ist. Doch die Installation und die Einarbeitung in ein neues Programm, welches vielleicht besser wäre, ist ihr zu umständlich. Das gleiche gilt auch für die Einstellungsebenen ihres Mailclients Im Allgemeinen favourisiert Anouk E-Mails gegenüber Telefon, weil sie sich bei E-Mails die Zeit einteilen kann und diese unabhänginger vom Versender sind. So hat sie das Gefühl von mehr Anonymität. Kommt eine E-Mail in ihrem Postfach an und der Benachrichtigungston erklingt, unterbrichte sie ihre Arbeit. Dabei sind alle ungelesenen E-Mails relevant und müssen bearbeitet werden. Wichtigkeits-Marlierungen ignoriert sie. Durch die Masse an E-Mails jeden Tag gehen ihr manche, in der Mails befindende, Termine verloren, weil sie diese noch nicht bearbeiten konnte. Sie wünscht sich auf Grund dessen eine Verbindung zwischen Termindaten und ihrem Kalender. Desweiteren würde sie gern E-Mails nach Aufgabe und Dringlichkeit sortieren und auch diese mit ihrem Kalender verbinden, damit dieser ihr eine Erinnerung senden kann. Datenanhänge speichert sie immer zusammen mit der dazugehörigen E-Mail in einem Ordner ab, um den Kontext nicht zu verlieren. Ihrer Meinung nach, wäre es ein großer Vorteil, wenn es eine Zwischenablage für die Anhänge gebe, um den Weg des Runterladens und wieder Hochladens zu vermeiden. Ein weiterer Punkt ihrer Unzufriedenheit ist die Suchfunktion. Sie würde gern mehrer E-Mailadressen einem Kontakt zuordnen, um die Trefferquote beim Suchen zu erhöhen. Ein letztes Problem, was sie sieht, ist die “Undelivered Mail Returned to” - Benachrichtigung. Hier würde sie sich wünschen, dass das System sie fragt, ob sie den eigentlichen Empfänger dieser Mail aus ihrem Adressbuch löschen möchte.

Natalie Sekretärin und Fremdspachenkorrespondentin bei Rosink Apparate- und Anlagenbau GmbH

personbildfrau.jpgpersonbildfrau.jpg

Natalie erhält und versendet 2-20 E-Mails pro Tag und sie nutzt den Windows Mailclient “Outlook” zum Versenden. Geschrieben werden die Angebote allerdings in Navision, da dieses Programm direkt die Lagerbestände anzeigt. In ihrer Inbox befinden sich nur neue oder unbearbeitete E-Mails. Die anderen werden gelöscht oder anderweitig gespeichert. Auch sie ignoriert Wichtigkeit-Markierungen. Die Textvoranzeige hilft beim aussortieren von unwichtigen E-Mails. Die Wichtigkeit einer E-Mail steigert sich nur durch einen Anruf. Da einige E-Mails von mehreren Personen bearbeitet werden könnten, werden diese bei der Bearbeitung gelb markiert und wenn dies erledigt ist wird die Mail grün markiert und in einen anderen Ordner verschoben. Anhänge bleiben im Client oder werden ausgedruckt und in die Ordner des jeweiligen Kunden geheftet. Der Kalender von Office wird zur Terminfindung, Raum-, Auto und Handyvergabe verwendet.

Matthias Löwe Interaction Designer bei Creative Gaming A MAZE und Design Research Lab und Student der FH Potsdam

409127_358016347542793_100000032913282_1429773_681287521_n.jpg409127_358016347542793_100000032913282_1429773_681287521_n.jpg

Matthias empfängt 150-200 E-Mails am Tag und versendet circa 150. Er nutzt E-Mails fast Chatartig zur Kommunikation. Als E-Mail-Programm nutzt er “Windows Live Mail”. Matthias hat sich, um die Übersicht zu bewahren, fünf verschiedene E-Mailkonten für Privates, Öffentliches und Bekanntes, Web-Services, Organisatorisches und Offizielles erstellt. Diese haben im Mailclient alle unterschiedliche Farben und werden unterschiedlich abgerufen. Die Wichtigkeit einer E-Mail bestimmt er nach der Länge und dem Absender. Die zu beantwortenden E-Mail flaggt er. Threads sind für Matthias von großer Wichtigkeit, da oft 20-30 Personen auf eine E-Mail antworten. Termine bearbeitet Matthias folgender Maßen. Größere Terminabsprachen werden über “Doodle” organisiert, kleinere über E-Mailaustausch oder Anruf. Vereinbarte Termine speichert er in seinem Google-Kalender, welcher auch mit Facebook synchronisiert ist.

remail_doku_leitidee-ideeentwicklung.pngremail_doku_leitidee-ideeentwicklung.png

Aus unseren Experteninterviews resultierend, sollte unser Client mit möglichst wenigen Einstellungen sich optimal dem Workflow eines Benutzers anpassen. Er sollte den Bedingungen einer Gruppenarbeit gerecht werden und sich fremden Personen dabei helfen sich gegenseitig zu identifizieren. Zudem war eine optimale Einbindung von Kalender und Aufgabenlisten wünschenswert. In unserem ersten Treffen einigten wir uns darauf einen Client mit Fokus auf Personen zu entwerfen, in denen E-Mails nicht mehr als einzelne Datei, sondern als eine Nachricht in einer Konversation betrachtet werden. Die Mails würden den einzelnen Personen zugeordnet werden um die E-Mail-Flut optisch zu reduzieren und somit mehr Übersicht gewähren zu können. Es sollten Konversationen zwischen zwei und mehr Personen möglich sein. Dadurch sollte zusätzlich ein einfacherer Datenaustausch innerhalb von Gruppen mit mehr als 2 Personen gewährleistet werden. Die Konversationen sollten frei benennbar sein und sollten mit Farben ausgezeichnet werden können. Weitere Details wie Firma, Rang und Status sollten manuell hinzugefügt werden können oder falls freigegeben automatisch ausgelesen werden. Es sollte stets mit Quick-Messages geantwortet werden können, bei Bedarf sollte man aber auch in den erweiterten Eingabemodus wechseln können.

01_leitidee.png01_leitidee.png
02_leitidee.png02_leitidee.png

remail_doku_konzeptausarbeitung.pngremail_doku_konzeptausarbeitung.png

Unseren Client sollten wir nach den Guidelines eines Betriebssystems gestalten. Man konnte aber auch bewusst aus diesen Ausbrechen, falls man eine nachvollziehbare Begründung dafür liefern konnte. Unsere Gruppe entschied sich für das neue Betriebssystem Windows 8 von Microsoft. Das Besondere daran, sind die reduzierten Grafischen Elemente verbunden mit schöner Typografie. Da dieses System zum Zeitpunkt unserer Clientgestaltung so neu war, dass es noch keine GUI-Guidelines gab, haben wir versucht diese aus vorhandenen Videos und der Developer Preview abzuleiten. Unsere Wireframes näherten sich daher nach und nach erst dem wirklichen Metrostyle. Dennoch gab es einige Eigenschaften, die wir direkt einbauten. Beispielsweise fällt die Taskleiste bei Windows 8 komplett weg. Das sonst immer sichtbare Menü der geöffneten Programme ist nur noch durch eine spezielle Geste aufrufbar. Dadurch wurde der Wunsch, möglichst wenig Einstellungsmöglichkeiten zu bieten, notwendigerweise umgesetzt. Des Weiteren fokussiert dieses System die Bedienung mit mehreren Fingern direkt auf den Bildschirm. Es gibt somit andere Bedienelemente und Gesten um zum Beispiel zu Zoomen.

03_kommunikationsmodell.png03_kommunikationsmodell.png
05_kommunikationsmodell.png05_kommunikationsmodell.png
06_kommunikationsmodell.png06_kommunikationsmodell.png

Wireframes 2.0:

08_kommunikationsmodell.png08_kommunikationsmodell.png
09_kommunikationsmodell.png09_kommunikationsmodell.png
10_kommunikationsmodell.png10_kommunikationsmodell.png

remail_doku_screendesign.pngremail_doku_screendesign.png

Die Landigpage unseres Clients besteht aus aneinander gereihten Listen welche die einzelnen Konversationen beinhalten. Die bunten Farben dienen dem Auszeichnen von E-Mails und greifen das Farbschema von Windows 8 auf. Durch das Auszoomen einer Liste, können die darin enthaltenen E-Mails nach Auszeichnung gefiltert werden. Um die Listen-Ansicht von einer geöffneten Konversation visuell zu unterscheiden, drehten wir den Kontrast von weißer Schrift auf dunklem Hintergrund um. Die Konversationsansicht soll zu einem hohen Grad einen Fokus auf den Inhalt der Nachrichten legen und ist daher visuell sehr reduziert. Um die Fokussierung zu maximieren, nahmen wir später auch noch die Bilder der Personen aus diesem Bereich.

screendes1.pngscreendes1.png
screendes2.pngscreendes2.png
screendes3.pngscreendes3.png

Screendesign 2.0:

einzelk1.pngeinzelk1.png
einzelk2.pngeinzelk2.png
einzelk3.pngeinzelk3.png
einzelk4.pngeinzelk4.png

remail_doku_endversion.pngremail_doku_endversion.png

Das erste womit der Nutzer konfrontiert wird, ist die Landingpage. Hier werden alle Konversationen in vier Listen: „inbox“, „starred“, „all“ und „notifications“, angezeigt. Mit der „inbox“ Liste ist ein schneller Zugang zu ungelesenen Nachrichten geschaffen. Mit der „star“ Funktion lassen sich Konversationen bookmarken um sie später abzuarbeiten, und die „notifications“ Liste trennt alle automatischen e-mails von tatsächlichen Konversationen. In der „all“ Liste sind alle Konversationen zu finden. Die Listenelemente stellen einzelne Konversationen da, wobei ungelesene Themen und deren Kommentatoren ein und ausgeblendet werden. Die Farbe im Listenelement spiegelt die Zugehörigkeit zu einem Label wieder, welches der Nutzer zuweisen kann. (es wird durch die Listen gescrollt)

01_start_faden_01.png01_start_faden_01.png
02_start_faden.png02_start_faden.png
03_start_faden.png03_start_faden.png
04_start_scrollen_runter.png04_start_scrollen_runter.png
05_start_scrollen_wieder-oben.png05_start_scrollen_wieder-oben.png
06_start_scrollen_rüber.png06_start_scrollen_rüber.png
08_start.png08_start.png

Durch heraus zoomen innerhalb einer Liste, werden alle Labels in dieser Liste untereinander dargestellt. Das Auswählen eines Labels lässt die Liste nur noch Konversationen dieses Labels anzeigen. Durch erneutes heraus Zoomen gelangt man wieder zurück zur Label-Auswahl.

09_start_gezoomt-in-taggs.png09_start_gezoomt-in-taggs.png
start_ocean-getaggte.pngstart_ocean-getaggte.png
09_start_gezoomt-in-taggs.png09_start_gezoomt-in-taggs.png

Durch einen Swipe vom unteren Bildrand wird die Windows 8 typische Appbar eingeblendet und mit einem Tab auf das Mail Icon eine neu Gruppe/Nachricht erstellt. Die neue Gruppe erscheint oben in der „all“ Liste. Nun lassen sich ein Gruppenname, Personen, ein Icon und das Label der Gruppe zuweisen.

13_start_appbar.png13_start_appbar.png
14_gruppenansicht_default.png14_gruppenansicht_default.png
15_gruppenansicht_empfängerhinzugefügt.png15_gruppenansicht_empfängerhinzugefügt.png
16_gruppenansicht_alleempfängereingetragen.png16_gruppenansicht_alleempfängereingetragen.png
17_gruppenansicht_gruppefertig.png17_gruppenansicht_gruppefertig.png

Durch ein Klick auf „open conversation“ legt sich die Konversation über die rechte seite des Bildschirms. Um eine neue Nachricht in dieser Konversation zu schreiben, wird zunächst ein Thema in die „topic“ Leiste eingegeben und darauf die Nachricht verfasst und abgesendet.

18_konversationsview_leer.png18_konversationsview_leer.png
19_konversationsview_instextfeldgeklickt.png19_konversationsview_instextfeldgeklickt.png
20_erste_nachricht_selbstgeschrieben.png20_erste_nachricht_selbstgeschrieben.png

Am darauffolgenden Tag wurde dieser Konversation eine Nachricht hinzugefügt, was uns auf der Landingpage in der Inbox angezeigt wird. Durch ein Tab auf das Listenelement wird die Konversation geöffnet und die Nachricht angezeigt. Diese Nachricht beinhaltet einen Bildanhang. Der Anhangbutton in der Appbar kann sämtlichen Text ausblenden um einen Überblick sämtliche Anhänge darzustellen. Andersherum, gelangt man durch den Textbutton wieder zurück zur eigentlichen Ansicht.

01_start_tag-spaetert.png01_start_tag-spaetert.png
03_konversationsview_sarah_zoom2.png03_konversationsview_sarah_zoom2.png
04_konversationsview_sarah_zoom2_appbar.png04_konversationsview_sarah_zoom2_appbar.png
05_attachmentansicht.png05_attachmentansicht.png
06_attachmentansicht_appbar.png06_attachmentansicht_appbar.png
07_konversationsview_sarah_zoom2---Kopie.png07_konversationsview_sarah_zoom2---Kopie.png

Ein Tab auf „other Topic“ ermöglicht das Bestimmen eines neuen Themas. Nach Absenden der Nachricht befindet man sich in dem eben neu erstellen Thema und kann sich darauf konzentrieren.

08_neues_thema_lunch-01.png08_neues_thema_lunch-01.png
09_neues_thema_lunch-02.png09_neues_thema_lunch-02.png
10_neues_thema_lunch-03.png10_neues_thema_lunch-03.png
11_neues_thema_lunch-04.png11_neues_thema_lunch-04.png
12_neues_thema_lunch-05.png12_neues_thema_lunch-05.png
13_konversationsview_lunch2_neu2.png13_konversationsview_lunch2_neu2.png

Etwas später wurden zwei neue Nachrichten dieser Konversation hinzugefügt. Nach dem öffnen der Konversation wird eine Übersicht aller Themen, und den zwei neuen Nachrichten angezeigt. Mit einem Tab auf ein Thema wird in dieses hineingezoomt und die neue Nachricht angezeigt.

01_start_stunde-spaetert.png01_start_stunde-spaetert.png
02_konversationsview_ZE1.png02_konversationsview_ZE1.png
03_konversationsview_2neuenachrichten_lunch_neu4.png03_konversationsview_2neuenachrichten_lunch_neu4.png
05_konversationsview_robert_zoom2.png05_konversationsview_robert_zoom2.png
06_konversationsview_robert_zoom2_scroll_mitte.png06_konversationsview_robert_zoom2_scroll_mitte.png
03-07_konversationsview_robert_zoom2_scroll_runter.png03-07_konversationsview_robert_zoom2_scroll_runter.png

remail_doku_fazit.pngremail_doku_fazit.png

Mit der Endversion unseres Konzepts für den Mail Client suchten wir nochmals eine unserer schon befragten E-Mailexperten, Anouk Meissner, auf. Wir stellten ihr unser Konzept vor und bekamen generell ein gutes Feedback. Obwohl sie sich nur ungern mit neuen Programmen beschäftig, konnte sie sich die Funktion des Workflows unseres Clients in der Realität gut vorstellen. Sie gab uns nur zu bedenken, dass Arbeitsgruppen oft aus viel mehr als vier Personen bestehen. Und wir dann die Darstellung unserer Gruppenansicht nochmals überdenken müssten. Wir danken ihr und auch Natalie Gschwindt und Matthias Löwe für ihre Mitarbeit. Ein Danke geht auch an Prof. Boris Müller und unsere Kommilitonen, die durch ihre konstruktive Kritik uns stets angeregt haben unser Projekt zu optimieren.

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2011 / 2012