Responsive Design Intranets mit kluger Priorisierung der Inhalte

Erfahren Sie, wie zwei preisgekrönte Intranets - triptic und Abt Associates - ein responsive Design einsetzen, ihre Inhalte priorisieren und eine elegante Navigation verwenden, um sich an mehrere Geräte optimal anpassen zu können.

 

by Kara Pernice (deutsche Übersetzung) - 23.03.2014

 

Ein Intranet mit Responsive Design (engl.) ermöglicht den Mitarbeitern den Zugriff auf alle Inhalte des Intranets, unabhängig davon, ob sie mit einem mobilen Gerät oder dem Computer auf die Inhalte zugreifen. Ein Intranet (oder auch eine öffentlich zugängliche Website) mit Responsive Design hat in der Regel nur einen technischen Programmcode, bietet aber ganz unterschiedliche User Experiences für den Desktop und mobile Displays an, und vielleicht auch eine dritte UX für die Tablet-Nutzung. Möglicherweise sogar noch mehrere für andere Geräte und Bildschirmgrössen. Da die Designer aussuchen können, wo und wie die Inhalte und Features auf jedem Gerät angezeigt werden, kann ein Responsive Intranet für die Mitarbeiter das beste Nutzungserlebnis bieten, unabhängig davon, welches Gerät sie verwenden.

Dieser Responsive-Design Ansatz bedeutet für Intranet-Designer, dass sie:

• die relative Wichtigkeit bestimmter Features und Inhalte für die Nutzer und das Unternehmen untersuchen sollten
• die Inhalte so präsentieren und positionieren sollten, dass es ihrer ermittelten Priorität entspricht.

Tipps von grossartigen Designern

Ich habe mir die Entscheidungen zur Priorisierung von Inhalten bei zwei unserer preisgekrönten Intranet-Designteams beim Intranet Design Annual 2014 noch einmal angeschaut - Abt Associates und triptic. Die Intranets dieser Unternehmen sind sehr unterschiedlich: Das erste unterstützt Tausende von Nutzern aus der ganzen Welt, das zweite unterstützt etwa 20 Mitarbeiter, die sich alle in demselben Büro befinden. Was sie gemeinsam haben, ist, dass sie beide exzellente Beispiele für die Verwendung von Responsive Design in Intranets darstellen.

Dieser Artikel behandelt einige der Entscheidungen, die diese Teams bei der Priorisierung von Features und Inhalten auf verschiedenen Geräten für ihre Intranets mit Responsive Design getroffen haben. Dabei sind ein paar Leitlinien entstanden, die auch Ihnen bei der Priorisierung Ihrer eigenen Inhalte in einem Intranet mit Responsive Design helfen können.

Finden Sie heraus, wie Ihre Mitarbeiter vom Zugriff auf Ihr Intranet mit mobilen Geräten profitieren

Abt Associates ist ein weltweit tätiges Unternehmen, das seinen Hauptsitz in Cambridge, MA hat, aber Mitarbeiter auf der ganzen Welt, davon viele im Aussendienst. Bevor Abt zu einem Intranet mit Responsive Design namens AGI (was für "Abt Global Intranet" steht) gewechselt hat konnten mehr als die Hälfte der Mitarbeiter dieser Unternehmens (in Entwicklungsländern ohne zuverlässige Internetverbindung) nicht auf das Intranet zugreifen. Das Unternehmen beschloss daher, es neu zu gestalten, um die globale Zusammenarbeit der Mitarbeiter überall zu ermöglichen. Und seit das Intranet-Team von Abt Associates sein Intranet mit Responsive Design einsetzt, empfiehlt es das Responsive Design auch anderen Unternehmen, die Mitarbeiter auf der ganzen Welt haben. Es empfiehlt auch, dass der Darstellung auf mobilen Geräten eine bevorzugte Priorität eingeräumt werden sollte.

Stellen Sie die Ziele und Kultur Ihrer Unternehmung auf der Intranet-Homepage dar, für mobile Geräte und Desktop-PCs

Die Homepage ist bei vielen Intranets eine Seite mit hoher Priorität, weil:

• Die meisten Arbeitnehmer damit konfrontiert werden, wenn sie ihren Browser starten.
• Sie Inhalte bietet, die für alle von Bedeutung sind.
• Weil sie als Tor zu allen weiteren Ressourcen im Intranet dient.
• Weil sie Mitarbeiter direkt zu den Inhalten leiten kann, die die Ziele und die Kultur des Unternehmens verkörpern.

Zu den kulturellen Werte von Abt Associates gehören die Ideen des Lernens und, dass alle Mitarbeiter auf der ganzen Welt für das Unternehmen wichtig sind. Das Team wollte, dass das AGI ein regelmässigen Bestandteil des Arbeitslebens bei Apt wird, nicht nur eine eigenständige Ressource. Also musste die Homepage den Mitarbeitern eine Art von Inhalten und Funktionalität bieten, die ihre Arbeitseinstellung verändern würde. Mit diesem Ziel vor Augen haben die Designer die Darstellungen auf der Homepage sorgfältig priorisiert und zugewiesen, um die verschiedenen Kategorien optimal unterzubringen: Teilen von Informationen, Lernen, Tools und Unternehmensinformationen.

Auf der mobilen Homepage haben die Designer den Bereich Heute habe ich gelernt hervorgehoben, in der die Mitarbeiter sich über ihre Erkenntnisse, Innovationen und Erfolge mit anderen Mitarbeitern auf der ganzen Welt austauschen können. Die Designer haben dies zu einem Inhalt mit Priorität im Falle der Anzeige auf dem mobilen Gerät gemacht, indem sie die folgenden Schritt durchführten:

• Platzierung auf dem ersten Bildschirm ("über der Bruchkante")
• Anzeige aller Inhalte im Bereich mit der Standard-Einstellung ohne Scrollen
• Zuweisung eines Grossteils des Raums auf der Homepage

Der gesamte Bereich Heute habe ich gelernt erscheint auf dem mobilen Gerät im oberen Teil der Seite, ohne, dass Scrollen notwendig wäre.

Unmittelbar unter dem Bereich Heute habe ich gelernt haben die Designer den Bereich Aktivitäten-Feed platziert. Auch diese Platzierung unterstützt die Lernkultur One Global Abt bereits auf der Homepage. Die Inhalte im Aktivitäten-Feed sind für eingeloggte Mitarbeiter personalisiert, abgestützt auf den aktuellen Standort auf die Aufgaben des jeweiligen Mitarbeiters.
Der Bereich deckt einen individualisierten Newsfeed mit Postings von Abt in sozialen Netzwerken und Aktivitäten im Intranet ab. Zudem Aktivitäten der Mitarbeiter im gesamten AGI und Aktivitäten in den AGI-Workspaces (wo Experten sich über Methoden austauschen und sofort diskutieren können), zu denen der Nutzer gehört.

So wichtig, wie es für die Mitarbeiter ist, Informationen zu teilen und direkt voneinander zu lernen, so wichtig sind auch die Nachrichten und Neuigkeiten der Firma. Deshalb haben die Designer unter dem Aktivitäten-Feed den Bereich Nachrichten platziert. Dieser gut sichtbare Nachrichtenbereich betont noch die Kultur des Lernens und der gemeinsamen Nutzung von Informationen, für die Abt steht.

Eine gut gepflegte Liste von Ereignissen, über die man unbedingt Bescheid wissen muss - wie Konferenzen und Veranstaltungen - werden nach Datum sortiert und sind zu einer grösseren Liste verlinkt. Besonders wichtige Veranstaltungen werden im Bereich Abt Events unter dem Nachrichtenbereich angezeigt.

Als nächstes erscheint der Bereich CEO-Ecke, in dem die Präsidentin und Geschäftsführerin Kathleen Flanagan ihre persönlichen Perspektiven auf das Business, Innovationen und die Unternehmenskultur aufzeigt. Die Geschichten in diesem Abschnitt sind zu Flanagans Blog und anderen Seiten verlinkt.

Erfahren Sie, welche Funktionen und Geräte Ihre Mitarbeiter nutzen

Die Intranet-Designer von Abt Associates haben ihre mobile Homepage so priorisiert, dass sie die gängigen Bedürfnisse ihrer diversen Nutzer widerspiegelt. Die Designer haben festgestellt, dass es sich im Laufe des Projektes gelohnt hat, sich die Zeit zu nehmen, ihre Nutzer gründlich zu verstehen. Dieses Verständnis hat ihnen sehr dabei geholfen, die Informationen auf dem mobilen Display zu priorisieren.

 

Die AGI-Homepage in der mobilen Ansicht ist ein One-Stop-Shop mit Produktivität, Lernen und Informationen über die Firma. Mit nur wenig Scrollen können die Mitarbeiter auf alles zugreifen, was sie brauchen, sich austauschen, sich über stattfindende Aktivitäten informieren, die neuesten Nachrichten zum Unternehmen lesen und von Unterstützung und Perspektive des CEO profitieren.

Wenn man die Homepage-Rahmen für Telefon und Desktop vergleicht, zeigt sich, dass auf dem Desktop mehr oberhalb der Bruchkante angezeigt wird, aber auch, dass die wichtigen Features, wie oben dargestellt, auf allen Geräten an gut sichtbaren, prominenten Positionen stehen.

 

Die Drahtdarstellung der Homepage auf einem Telefon demonstriert das Engagement des Teams für die Priorisierung der Inhalte.

 

Die Drahtdarstellung der Homepage auf einem Desktop demonstriert die effektive Nutzung des vielen Raums, den der grössere Bildschirm bietet.

Platzieren Sie die wichtigsten Anwendungen und Features in der globalen Navigation dort, wo man schnell darauf zugreifen kann

Abt Associates praktiziert eine sogenannte "mobil-first"-Mentalität, mit dem konkreten Ziel, Mitarbeitern, die mit ihren mobilen Geräten auf das AGI zugreifen auf der ganzen Welt Services zu bieten. Die mobile Präsentation des AGI ist so optimiert und ausgesucht, dass sie auf diesen Geräten ein schnelleres Laden von Seiten ermöglicht. Obwohl die mobile Implementation leichter ist, können die Mitarbeiter immer noch über die Homepage und Menüs auf alles zugreifen, was sie wollen.

Die AGI-Menüs machen es den Mitarbeitern einfach, überall und jederzeit geschäftliche Transaktionen durchzuführen. Beispielsweise erscheinen die beiden Menüs Menü und Quick Links ganz oben auf der mobilen Homepage; Menü bringt die Nutzer zu den wichtigsten Bereichen der Seite, unter anderem Nachrichten, Projekte, Vorschläge und Tools & Ressourcen; Quick Links dagegen führen zu Timesheets, zum Mitarbeiterverzeichnis, zu Formularen und zur Suche. Das mobile AGI bietet einen signifikanten Business-Vorteil, weil des den Mitarbeitern ermöglicht, bequem und schnell nach vorsitzenden Mitarbeitern zu suchen oder Transaktionen wie Timesheets auf jedem Gerät vorzunehmen.

Beide Menüs müssen bequem zugänglich sein, damit die Mitarbeiter die Flexibilität haben, auf der Seite sofort dorthin zu gelangen, wo sie hin müssen.

Verschlechtern Sie das Design auf einem Gerät nicht, nur um Einheitlichkeit auf den Geräten zu erreichen

Das Thema, wie man die Menüs für ein Reponsive Intranet gestaltet, bietet eine gute Gelegenheit, auf ein Beispiel von einem weiteren preisgekrönten Unternehmen einzugehen: triptic, eine technologisch versierte Agentur für Onlinekommunikation aus dem niederländischen Eindhoven. Die Intranet-Designer von triptic wollten sicherstellen, dass die Mitarbeiter jederzeit und überall im Intranet (namens "Iris") miteinander kommunizieren und Informationen abrufen können.

Das Responsive Intranet von triptic zeigt die mobile Navigation in einem Drop-Down-Menü an, zugänglich über ein "Hamburger"-Icon (drei horizontale Linien übereinander). Das Menü ist immer verfügbar, nimmt aber auf dem kleinen Display eines Smartphones wenig Platz weg. Ein rotes Rechteck über dem Menü-Icon zeigt die Anzahl an Benachrichtigungen für den Mitarbeiter an (Updates, Reaktionen, Postings und Erwähnungen). Durch diese hilfreiche Statusanzeige erhalten die Nutzer schon Informationen, ohne überhaupt irgendwo klicken zu müssen.

Die Inhalte des Drop-Down-Menüs werden je nach Thema in Bereiche unterteilt. Diese Themen werden durch Icons und einen dunkleren grauen Hintergrund unterschieden.

 

Das Menü ist in einem "Hamburger"-Icon zusammengeklappt und nimmt so nur wenig Platz auf dem Telefon weg.

Desktops bieten sehr viel mehr horizontalen Platz als Mobiltelefone, deshalb ist das Desktop-Menü nicht unter einem Icon zusammengeklappt. Stattdessen werden die Themen horizontal nebeneinander in einer globalen Navigationsleiste angeordnet. Diese flachere Hierarchie erlaubt mehr Standard-Menü-Auswahlmöglichkeiten, weshalb wir empfehlen, das Menü-Icon im Hamburger-Stil nur für die mobile Version zu verwenden und in der Desktop-Version weiterhin die komplette globale Navigation (engl.) des responsiven Designs beizubehalten.

 

Anstatt auf Telefonen und Desktops dasselbe Menü anzubieten, haben die Designer von triptic den verfügbaren Raum auf dem Desktop genutzt, um eine flachere Menü-Hierarchie einzusetzen, die mehr Standard-Optionen bietet, als das auf dem mobilen Gerät möglich ist.

Arrangieren Sie die Inhalte mutig je nach Gerät

Das Intranet von triptic nutzt nicht nur ans Gerät angepasste Navigationsmuster, sondern passt auch die Inhalte an die verschiedenen Geräte an. Ein Beispiel dafür ist, wie die Mitarbeiter von tripic ihre Informationen zum Agile-Prozess für die Designprojekte ihrer Kunden kommunizieren. Die Designer haben festgestellt, dass mobile Nutzer, wenn sie einen Scrum-Burndown-Chart verwenden, meist ein Update auf einen Blick wollen. Daher bietet das Iris einen sehr dezenten Chart. Die minimalistische Gestaltung macht es nicht nur einfacher, den Inhalt des Charts auf einem kleinen Display zu erkennen, sondern die "Leichtigkeit" (weniger Details) bedeutet auch, dass er weniger Daten benötigt und die Mitarbeiter es schneller herunterladen können.

 

Zeigen Sie auf dem mobilen Gerät minimale Informationen an, damit die Nutzer schnell auf den ersten Blick ein Update bekommen, in diesem Fall einen Scrum-Burndown-Chart für ein Kundenprojekt.

Auf einem Tablet können die Mitarbeiter sich eine ausführlichere Version des Charts ansehen, unter anderem mit den Kategorisierungen der Stunden. Auch die Menüs sind auf dem Tablet erweitert, und jeweils auf der rechten Seite verfügbar. (Im Allgemeinen wird die Nutzerfreundlichkeit verbessert, wenn man ein drittes Design für Tablets verwendet, weil diese Plattform sich sowohl von Mobiltelefonen als auch von Desktop-Computern unterscheidet.

 

Auf dem Tablet werden der Chart, ein Projekt-Menü darüber (in diesem Bild rot eingekreist) und die Navigation oben und rechts angezeigt.

Die Chart-Ansicht auf dem Desktop ähnelt der auf dem Tablet, aber das Projektauswahl-Menü wird auf der linken Seite als erweiterte Liste angezeigt, anstatt als zusammengeklappte Drop-Down-Liste über dem Chart.

 

Auf dem Desktop werden der Chart, die Projekt-Links auf der linken Seite sowie die Navigation oben und rechts angezeigt.

Ein weiteres Beispiel für die unterschiedliche Priorisierung von Inhalten und Features auf verschiedenen Geräten ist die persönliche Profilseite. Auf dem mobilen Gerät sehen die Mitarbeiter folgende Informationen: Name der Person, Telefonnummer, Jobbezeichnung und Verfügbarkeit.

 

Die Designer haben sich entschieden, zusätzliche Hintergrund-Informationen zur Person in der mobilen Ansicht wegzulassen. Stattdessen lenkt diese Designversion die Aufmerksamkeit direkt auf die Details, die die meisten Mitarbeiter in diesem Moment suchen: ob die Person verfügbar ist, und wie seine Telefonnummer lautet.

Auf dem Desktop erhalten die Mitarbeiter ausserdem weitere Kontaktinformationen sowie weitere Features wie ein Foto, ein grosses Zitat, einen Vorstellungstext und soziale Updates.

Die Desktop-Version der Profilseite bietet weitere Informationen zum Kontakt und zur Person, indem der zusätzlichen Platz auf dem Bildschirm für Hintergrundinformationen genutzt wird.

Fazit

Intranets müssen im Bereich des Responsive Designs nicht hinterherhinken. Lassen Sie sich von fantastischen Responisve Intranets wie denen von triptic und Abt Associates inspirieren und folgen Sie diesen Richtlinien:

1. Finden Sie heraus, wie Ihre Mitarbeiter vom Zugriff auf Ihr Intranet auf mobilen Geräten profitieren.
2. Stellen Sie die Ziele und die Kultur Ihres Unternehmens auf der Intranet-Homepage dar, für mobile Geräte und Desktop-PCs.
3. Erfahren Sie, welche Funktionen und Geräte Ihre Mitarbeiter nutzen, und verwenden Sie diese Informationen, um die Features zu priorisieren.
4. Platzieren Sie die wichtigsten Anwendungen und Features in der globalen Navigation dort, wo man schnell darauf zugreifen kann.
5. Verschlechtern Sie das Design auf einem Gerät nicht einfach nur, um Einheitlichkeit auf den Geräten zu erreichen. (Obwohl die Einheitlichkeit auf verschiedenen Geräten wichtig ist, heisst das nicht, dass das Nutzererlebnis überall identisch sein muss.)
6. Arrangieren Sie die Inhalte mutig je nach Gerät.

Längere Fallstudien zu diesen beeindruckenden Intranets mit Responsive Design finden Sie im Intranet Design Jahrbuch 2014 (engl.).
Für weitere Informationen zu den UX-Entscheidungen im responsiven Design besuchen Sie unseren ganztägigen Kurs zur Anpassung von Nutzeroberflächen.

Danksagungen

Folgenden Personen möchte ich gerne dafür danken, dass sie mir für diesen Artikel ihre Erkenntnisse und weitere Beispiele aus ihren preisgekrönten Intranets zur Verfügung gestellt haben: Arthur Turksma, Jos Rouw und Willem van Berlo von triptic; Rob Grimmett und Mary Maguire von Abt Associates; Glen Chambers von BrightStarr.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.