Mobile-first-Intranetdesign: Alltagsaufgaben auf dem Smartphone erleichtern

Mitarbeitende sollten nicht erst an den Schreibtisch zurückkehren müssen, um eine Mitteilung zu lesen, eine Richtlinie zu finden oder eine Kollegin zu kontaktieren. Mobiles Intranetdesign sollte diese alltäglichen Aufgaben überall dort einfach machen, wo Mitarbeitende berechtigt und in der Lage sind zu arbeiten.

Für Teams an der Front und im Außendienst ist das Smartphone oft der wichtigste Zugang zu Unternehmensinformationen. Für andere ist es eine gelegentliche Erleichterung zwischen Meetings oder unterwegs. So oder so ist es nur der Anfang, eine Desktop-Seite auf einen kleineren Bildschirm zu bringen. Anmeldung, Navigation, Lesen, Formulare und Downloads verdienen alle Aufmerksamkeit.

Beginnen Sie mit den Aufgaben, die Mitarbeitende erledigen müssen, und gestalten und testen Sie dann den gesamten Ablauf.

In diesem Artikel:

• Warum verdient das Smartphone-Erlebnis eigene Aufmerksamkeit?
• Warum reicht eine verkleinerte Desktop-Seite nicht aus?
• Wie werden Alltagsaufgaben auf dem Smartphone komfortabel?
• Wie bleibt das Intranet bei mobilen Daten schlank?
• Wie bleibt der mobile Zugang inklusiv?
• Wie testen Sie mit Mitarbeitenden und verbessern sich laufend?

Warum verdient das Smartphone-Erlebnis eigene Aufmerksamkeit?

Ein Mitarbeiter im Außendienst braucht die Telefonnummer eines Kollegen. Eine Schichtarbeiterin möchte vor Arbeitsbeginn eine betriebliche Mitteilung prüfen. Jemand, der einen anderen Standort besucht, muss die Reiserichtlinie öffnen.

Das sind kleine Aufgaben, doch ein umständliches Intranet macht daraus Verzögerungen. Lautet die Antwort „Suchen Sie sich einen Desktop-Computer“, ist der bequeme Zugang bereits gescheitert.

Fragen Sie Mitarbeitende bei der Anforderungserhebung nach ihren tatsächlichen Arbeitsbedingungen:

• Welche Aufgaben müssen sie auf dem Smartphone erledigen?
• Wer ist auf mobilen Zugang angewiesen, und wer nutzt ihn nur gelegentlich?
• Welche firmeneigenen, privaten oder gemeinsam genutzten Geräte sind zugelassen?
• Welche Verbindungen stehen an ihrem Arbeitsplatz zur Verfügung?
• Beeinflussen kurze Pausen, helles Licht oder häufige Unterbrechungen die Nutzung?

Gehen Sie nicht davon aus, dass alle unter denselben Bedingungen arbeiten. Ein Lagermitarbeiter mit einem gemeinsam genutzten Gerät im Firmen-WLAN hat andere Bedürfnisse als eine Außendienstmitarbeiterin mit einem zugewiesenen Smartphone.

Legen Sie die wichtigsten mobilen Aufgaben und zugelassenen Zugangswege fest, bevor Sie die Startseite gestalten. HR und IT sollten außerdem klären, ob private Smartphones erlaubt sind und welche Alternativen Mitarbeitende haben. Der Zugang zu wesentlichen Informationen sollte nicht von der unausgesprochenen Erwartung abhängen, dass Mitarbeitende ein eigenes Gerät mitbringen oder für Daten bezahlen.

Warum reicht eine verkleinerte Desktop-Seite nicht aus?

Ein responsives Layout passt Inhalte an den Bildschirm an. Ein nützliches mobiles Erlebnis geht weiter: Es ermöglicht, eine Aufgabe bequem per Touch zu erledigen.

Eine Seite kann auf ein Smartphone passen und trotzdem schwer zu bedienen sein. Zum Beispiel:

• Ein eingeklapptes Desktop-Menü verbirgt den Link, den Mitarbeitende am häufigsten nutzen.
• Kleine Symbole liegen so dicht beieinander, dass man das falsche antippt.
• Ein großes Banner schiebt die nützliche Antwort weit nach unten.
• Eine breite Tabelle erfordert wiederholtes seitliches Scrollen.
• Eine Richtlinie ist nur als druckoptimiertes Dokument verfügbar.

Mitarbeitende sollten weder die Desktop-Version im Browser anfordern noch mit zwei Fingern zoomen oder eine Seite absuchen müssen, um gewöhnliche Aufgaben zu erledigen. Ebenso wenig sollten wesentliche Informationen verschwinden, nur weil der Bildschirm kleiner ist.

Nehmen Sie als Beispiel die Suche nach einer Urlaubsrichtlinie.

Vorher: Eine Mitarbeiterin öffnet das Menü, rät, welche Abteilung für die Richtlinie zuständig ist, klickt sich durch mehrere Seiten und lädt ein PDF herunter, um die Antragshinweise zu finden.

Nachher: Eine sichtbare Suche führt zu einer gut lesbaren Richtlinienseite. Die Seite erklärt Anspruchsvoraussetzungen und Antragsschritte gleich oben, verlinkt auf das Urlaubssystem und bietet das formale Dokument weiterhin als klar gekennzeichneten Download an.

Der zweite Ablauf reduziert Suchen und unnötige Downloads, ohne Informationen zu entfernen.

Außerdem ist zwischen Layout und Datenverbrauch zu unterscheiden. Das Anfordern der Desktop-Ansicht erhöht die Downloads nicht unbedingt von selbst. Wie viele Daten übertragen werden, bestimmen die Ressourcen, die eine Seite anfordert. Auch eine responsive Seite kann ein großes Desktop-Bild herunterladen und es lediglich kleiner anzeigen.

Wie werden Alltagsaufgaben auf dem Smartphone komfortabel?

Beginnen Sie mit einer kurzen Liste der Prioritäten der Mitarbeitenden, etwa Mitteilungen lesen, Kontakte finden, Richtlinien prüfen und Anträge stellen. Geben Sie diesen Aufgaben einen klaren Weg, statt jede Desktop-Komponente gleichermaßen zu verkleinern.

Machen Sie die Navigation vorhersehbar. Halten Sie die Suche leicht auffindbar und verwenden Sie vertraute Bezeichnungen für Ziele wie „Personen“, „Richtlinien“ und „Hilfe“. Ein kompaktes Menü kann seltener genutzte Ziele aufnehmen, während eine kleine Auswahl häufiger Aktionen sichtbar bleibt. Halten Sie Bezeichnungen und Positionen auf allen Seiten einheitlich.

Touch-Bedienelemente brauchen genug Platz, damit sich eine Aktion klar von der anderen unterscheiden lässt. Vermeiden Sie Interaktionen, die auf Hover-Effekte angewiesen sind, und verlassen Sie sich nicht auf ein unerklärtes Symbol, wenn eine kurze Beschriftung Zweifel ausräumen würde.

Stellen Sie die Antwort vor die Dekoration. Beginnen Sie eine Richtlinienseite mit dem, was Mitarbeitende wissen müssen und was sie als Nächstes tun sollten. Verwenden Sie gut lesbaren Text, aussagekräftige Überschriften und kurze Abschnitte. Ein großes Einleitungsbild sollte nicht zwischen jemandem und einer dringenden Antwort stehen.

Veröffentlichen Sie alltägliche Anleitungen nach Möglichkeit als Webseiten. Halten Sie erforderliche Originaldokumente verfügbar, kennzeichnen Sie sie aber klar, damit Mitarbeitende entscheiden können, ob sie den Download brauchen.

Gestalten Sie Formulare fehlertolerant. Ein Smartphone ist kein angenehmer Ort, um sich durch unnötige Felder zu arbeiten. Für jedes Formular gilt:

• Fragen Sie nur die Informationen ab, die zur Bearbeitung des Antrags nötig sind.
• Verwenden Sie passende Eingabetypen, etwa ein E-Mail-Feld für eine E-Mail-Adresse.
• Behalten Sie sichtbare Beschriftungen bei, statt sich auf Platzhaltertext zu verlassen.
• Erklären Sie Fehler direkt beim betroffenen Feld und sagen Sie, wie sie sich beheben lassen.
• Bewahren Sie gültige Eingaben nach einem Fehler auf.
• Bieten Sie, wo sinnvoll, eine sichere Möglichkeit, den Fortschritt bei Unterbrechungen zu speichern.

Gespeicherte Formulardaten brauchen Regeln für den Umgang, die ihrer Sensibilität entsprechen – besonders auf gemeinsam genutzten Geräten.

Behandeln Sie die Anmeldung als Teil der Aufgabe. Testen Sie Unternehmens-Login, Authentifizierungsabfragen, Weiterleitungen und die Rückkehr zur gewünschten Seite. Wer einen Link zu einer Richtlinie öffnet, sollte nicht auf der Startseite landen und von vorn suchen müssen. Beheben Sie unterbrochene Abläufe, ohne die Authentifizierung zu schwächen.

Verfolgen Sie die Aufgabe auch über das Intranet hinaus. Eine nutzbare Antragsseite bringt wenig, wenn ihre Schaltfläche einen angebundenen HR-Dienst öffnet, der sich auf dem Smartphone nur schwer bedienen lässt.

Bauen Sie diese Muster in ein wiederverwendbares Designsystem ein. Gemeinsame Suchfelder, Navigation, Schaltflächen, Formularfehler, Download-Kennzeichnungen und Richtlinienvorlagen reduzieren wiederholte Design- und Testarbeit. Dokumentieren Sie, wie sich jede Komponente auf kleinen Bildschirmen und mit assistiven Technologien verhält. Geben Sie dem Designsystem eine verantwortliche Person, damit neue Seiten getestete Muster wiederverwenden, statt jedes Mal eine andere Interaktion einzuführen.

Wie bleibt das Intranet bei mobilen Daten schlank?

Kleinere Downloads helfen Mitarbeitenden, Informationen schneller zu erreichen, wenn sie mobile Daten oder eine langsamere Verbindung nutzen. Es geht darum, ihre Zeit und ihre Verbindung zu respektieren, nicht darum, einem technischen Wert nachzujagen.

Beginnen Sie mit Bildern. Ein Smartphone sollte kein großes Desktop-Bild erhalten, wenn eine kleinere Version es angemessen darstellen kann. Bitten Sie das Umsetzungsteam, die Bildauswahl sowohl anhand der Bildschirmgröße als auch der Pixeldichte zu prüfen. Der web.dev-Leitfaden zu responsiven Bildern erklärt, wie Browser passende Bildressourcen auswählen können.

Prüfen Sie dann, was jede Seite lädt:

• Komprimieren Sie Bilder und wählen Sie passende Formate, ohne wichtige Details unlesbar zu machen.
• Entfernen Sie Skripte und Widgets von Drittanbietern, die die Aufgabe nicht unterstützen.
• Vermeiden Sie automatisch startende Videos und lassen Sie Mitarbeitende selbst entscheiden, wann Medien geladen werden.
• Priorisieren Sie die Inhalte, die zum Lesen oder Handeln nötig sind, statt auf jedes optionale Element zu warten.
• Zeigen Sie Dateityp und Dateigröße von Dokumenten nach Möglichkeit vor dem Download an.

Überlegen Sie bei großen Anhängen, ob eine kurze Zusammenfassung auf einer Webseite die unmittelbare Frage beantworten kann. Wer eine Frist für Spesenabrechnungen prüft, sollte nicht ein ganzes Handbuch herunterladen müssen. Halten Sie das vollständige Dokument verfügbar, wenn es auf die Details ankommt.

Testen Sie sowohl einen ersten als auch einen wiederholten Besuch. Zwischengespeicherte Ressourcen können einen erneuten Besuch beschleunigen und dabei die Kosten verbergen, die jemand beim ersten Öffnen der Seite trägt. Prüfen Sie repräsentative langsamere Verbindungen ebenso wie das Büro-WLAN.

Bitten Sie das technische Team, übertragene Datenmengen und langsame Anfragen in den Entwicklertools des Browsers zu untersuchen. Redakteurinnen und Redakteure können passende Medien auswählen und nützliche Zusammenfassungen schreiben; von ihnen sollte nicht erwartet werden, die Auslieferung responsiver Bilder, das Laden von Skripten oder Caching umzusetzen.

Richten Sie Erwartungen an die Performance an den vereinbarten Aufgaben und den tatsächlichen Arbeitsbedingungen aus. „Mitarbeitende können die Schichtmitteilung lesen, ohne auf optionale Medien zu warten“ ist ein nützlicherer Ausgangspunkt als ein unerklärter Messwert.

Wie bleibt der mobile Zugang inklusiv?

Barrierefreiheit ist eine Anforderung an ein Werkzeug für Mitarbeitende, kein optionaler letzter Schliff. Mitarbeitende mit Seh-, Hör-, motorischen oder kognitiven Beeinträchtigungen brauchen möglicherweise unterschiedliche Wege, um zu lesen, zu navigieren und zu interagieren.

Nehmen Sie diese Grundlagen in Seitenvorlagen und Komponenten auf:

• Gut lesbare Kontraste und Text, der sich vergrößern lässt, ohne Inhalte oder Aktionen zu verdecken.
• Aussagekräftige Überschriften und klare Formularbeschriftungen.
• Untertitel für Videos mit gesprochenen Informationen.
• Bedienelemente mit verständlichen Namen, die mit assistiven Technologien funktionieren.
• Sichtbarer Tastaturfokus und eine logische Navigationsreihenfolge.

Manche Entscheidungen helfen auch unter alltäglichen Bedingungen, etwa bei hellem Licht oder einhändiger Bedienung. Diese Vorteile ersetzen jedoch nicht die Bedürfnisse von Mitarbeitenden mit Behinderungen.

Responsives Design macht ein Intranet nicht automatisch barrierefrei. Ergänzen Sie Touch-Tests um Prüfungen mit Tastatur und mobilen Screenreadern. Nutzen Sie die WCAG als Referenz für Abnahmekriterien; der W3C-Leitfaden zur mobilen Barrierefreiheit gibt weitere Orientierung.

Wie testen Sie mit Mitarbeitenden und verbessern sich laufend?

Testen Sie reale Aufgaben auf repräsentativen Smartphones, bevor Sie breit ausrollen. Ein verkleinertes Desktop-Browserfenster hilft während der Gestaltung, kann aber nicht jede Touch-Interaktion, Bildschirmtastatur, Login-Weiterleitung oder jedes Verhalten mobiler Screenreader nachbilden.

Gewinnen Sie Mitarbeitende aus den Gruppen, die Sie bei der Recherche identifiziert haben. Berücksichtigen Sie ihre Geräte, Browser, Netzbedingungen und Anforderungen an die Barrierefreiheit. Führen Sie Sitzungen in sicherer Umgebung durch – niemals, während jemand Auto fährt oder Maschinen bedient.

Nutzen Sie einen kompakten Testplan:

Aufgabe	Testbedingung	Worauf achten
Über einen Link zu einer Mitteilung anmelden	Zugelassenes Smartphone mit Unternehmensauthentifizierung	Können Mitarbeitende die Anmeldung abschließen und die gewünschte Mitteilung erreichen?
Eine Urlaubsrichtlinie finden	Smartphone im Hochformat, ohne Anleitung	Sind Suche und Bezeichnungen verständlich? Ist die Antwort ohne wiederholtes Zoomen lesbar?
Eine Datei öffnen	Repräsentative langsamere Verbindung	Sind Dateityp und -größe klar? Öffnet sich die Datei in einem brauchbaren Viewer?
Einen Kollegen finden	Touch-Bedienung und Prüfung mit mobilem Screenreader	Können Mitarbeitende die richtige Person erkennen und die Kontaktaktion nutzen?
Ein kurzes Formular ausfüllen	Bildschirmtastatur, ein absichtlicher Fehler und eine Unterbrechung	Sind Fehler klar? Bleiben gültige Eingaben erhalten? Lässt sich sicher fortfahren?

Bitten Sie die Teilnehmenden, Aufgaben ohne Anleitung zu erledigen. Achten Sie auf danebengegangene Taps, verwirrende Menüs, wiederholtes seitliches Scrollen, langsame Downloads und verlorene Formulareingaben. Wenn jemand nicht weiterkommt, halten Sie fest, wo und warum, bevor Sie den vorgesehenen Weg zeigen.

Vereinbaren Sie vor dem Pilotbetrieb Erwartungen auf Aufgabenebene. Zum Beispiel sollten Mitarbeitende eine Richtlinie mit alltäglicher Sprache aus dem Arbeitsumfeld finden und dem Antragslink folgen können, ohne an einen Desktop wechseln zu müssen. Nutzen Sie die Beobachtungen aus dem Pilotbetrieb, um realistische Erwartungen an die Bearbeitungszeit festzulegen, statt willkürliche Zielwerte zu wählen.

Kombinieren Sie diese Erkenntnisse mit verfügbaren aggregierten Daten zur mobilen Nutzung und dem Feedback der Mitarbeitenden. Zugriffszahlen allein belegen keinen Erfolg: Ein kurzer Besuch kann eine schnelle Antwort oder eine abgebrochene Aufgabe bedeuten. Gehen Sie der Ursache nach.

Weisen Sie Korrekturen den zuständigen Verantwortlichen zu, darunter UX, IT, Inhaltsverantwortliche und Teams angebundener Dienste. Beseitigen Sie Hindernisse bei prioritären Aufgaben vor dem breiteren Rollout und wiederholen Sie zentrale Tests nach Änderungen an Menüs, Vorlagen, Formularen oder Integrationen.

Halten Sie einen Feedbackkanal bereit, der auf dem Smartphone funktioniert. Mitarbeitende sollten keinen Desktop-Zugang brauchen, um zu melden, dass der mobile Zugang sie im Stich lässt.

Bereit, Ihr Intranet auf dem Smartphone besser nutzbar zu machen?

Wählen Sie eine häufige Aufgabe der Mitarbeitenden und probieren Sie sie auf den Geräten und Verbindungen aus, die Ihre Kolleginnen und Kollegen tatsächlich nutzen. Beginnen Sie mit der Anmeldung, folgen Sie jedem Link und prüfen Sie, ob sich die Aufgabe ohne Umwege erledigen lässt.

Wenn Sie ein neues Intranet planen, sprechen Sie mit dem Open-Intranet-Team darüber, wie sich das mobile Erlebnis rund um diese Aufgaben konfigurieren und testen lässt. Open Intranet basiert auf Drupal und ist ein Open-Source-Ausgangspunkt; Benutzerfreundlichkeit, Performance und Barrierefreiheit erfordern dennoch bewusstes Design und gezielte Tests. Beginnen Sie mit der Arbeit, die Mitarbeitende erledigen müssen, und gestalten Sie das Erlebnis darum herum.