Ibero-Amerikanisches Institut (IAI) der Stiftung Preußischer Kulturbesitz
barrierefreier Relaunch der Website
Die Ausgangssituation
Das Ibero-Amerikanische Institut (IAI) der Stiftung Preußischer Kulturbesitz bietet seinen heterogenen Zielgruppen eine multidisziplinäre Forschungs-, Kultur- und Kommunikationsplattform mit Fokus auf dem internationalen ibero-amerikanischen Kulturraum.
Die letzte Überarbeitung der Website fand 2007 statt – damit hatte sie es trotz ihrer umfangreichen Inhalte schwer, den aktuellen Anforderungen an Dynamik, Nutzerfreundlichkeit, Barrierefreiheit und technischer Funktionalität zu entsprechen. Eine Neuausrichtung war notwendig, um den Informationsbedarf der vielfältigen Zielgruppen optimal zu bedienen.
Unsere Vorgehensweise
Unser Team übernahm die komplette Neugestaltung und Entwicklung der IAI-Website mit Fokus auf Nutzerzentrierung und technischer Modernisierung.
Der neue Webauftritt wurde so konzipiert, dass er:
- eine klare und intuitive Navigation bietet
- Inhalte zielgruppenspezifisch aufbereitet
- barrierefrei gemäß BITV 2.0 / WCAG 2.1 ist
- die Verbindung von Bibliothek, Forschung und Veranstaltungen hervorhebt
- eine attraktive und dynamische Benutzererfahrung mit wechselnden Inhalten bietet
- durch ein modernes, responsives und barrierefreies Design sowohl auf Desktop als auch mobil für viele Nutzenden optimal funktioniert
UX-Konzeption & Barrierefreiheit
Definition von Personas
Nutzerorientierung stand im Fokus der Konzeption – die Ausrichtung an Interessen & Bedürfnissen der Zielgruppen, eine differenzierte Ansprache der unterschiedlichen Zielgruppen, vielseitige Zugänge und Einstiegsangebote und eine aktive Führung der Nutzenden durch die Inhalte.
Um die Nutzerfreundlichkeit sicherzustellen, wurden in Workshops Personas erstellt, die typische Besuchergruppen repräsentieren: Wissenschaftler*innen, Studierende, Kulturschaffende sowie interessierte Laien. Die Bedürfnisse, Ziele und typischen Nutzungsszenarien dieser Personas bildeten die Grundlage für die Konzeption.
Inhaltsanalyse und Neustrukturierung
Entlang der priorisierten Zielgruppen und Anwendungsfälle wurde eine Grundstruktur entwickelt, die diese Wünsche und Bedürfnisse beantwortet.
Der bestehende Inhalt wurde analysiert, gestrafft und in eine neue, nutzerorientierte Struktur überführt. Ziel war eine klare Trennung zwischen Informationen, die der Bibliothek vor Ort dienen, und solchen, die Online-Services bieten, wie etwa Recherchetools oder Veranstaltungskalender.
Navigation und Seitentypen
Das Navigationskonzept wurde entlang der wichtigsten User Journeys aufgebaut. Seiten mit häufigen Besuchsanlässen, wie Bibliotheksrecherche oder Veranstaltungsinformationen, wurden besonders hervorgehoben. Verschiedene Navigationsmodelle wurden zunächst als Wireframes überprüft und abgestimmt.
Die wichtigsten Seitentypen wurden als Beispielseiten mit realen Inhalten angelegt, um frühzeitig Layout und Elemente zu überprüfen. Sie wurden so konzipiert, dass sie übersichtlich und barrierefrei die Anforderungen ihrer Nutzenden beantworten und auch für Nutzende, die über Suchmaschine quereinsteigen, eine gute Orientierung im Portal ermöglichen.
Ausgehend von den User Stories wurden die erforderlichen Content-Elemente (Components) definiert, in den Beispielseiten angewendet und in einer übersichtlichen Elemente-Bibliothek übersichtlich dargestellt.
Das Designkonzept
Ausgangspunkt der Gestaltung war eine Recherche zu Designtrends und Good Practice Beispielen, anhand derer sich schnell eine Präferenz für eher minimalistische, intuitive Gestaltungsansätze mit großzügigen Bildflächen zeigte.
Zunächst entwickelten wir zwei Designlinien zur Annäherung an einen Favoriten.
Auf Basis des Kundenfeedbacks entstand eine Synthese der beiden vorgestellten Ansätze, die in einem iterativen Prozess schrittweise verfeinert wurde.
Das neue Design nutzt drei charakteristische Hauptfarben, setzt feine Linien als Gestaltungs- und Trennungselement ein und schafft durch seine helle Hintergrundfläche klare optische Strukturierung und großzügigen Raum zur Entfaltung der Inhalte.
Alle notwendigen UI-Komponenten wurden für Desktop und Mobile Ansichten übersichtlich in einer Elemente-Bibliothek dargestellt.
Die technische Umsetzung
Die technische Umsetzung erfolgte vollständig in TYPO3. Das neue Design wurde responsiv und barrierefrei umgesetzt.
Um dem Redaktionsteam des IAI eine möglichst lange Redaktionsphase zur Überarbeitung und zum Einpflegen der Inhalte zu ermöglichen, wurden zunächst die Basiselemente umgesetzt, aus denen die meisten Inhaltsseiten bestehen.
Der technischen Umsetzung begann mit der Migration der bestehenden Daten in das neue System.
Während der Redaktionsphase wurden die Solr-Suche konfiguriert und implementiert sowie die erweiterten Funktionen des geschlossenen Nutzerbereiches integriert.
Im nächsten Schritt wurden Redakteur*innen im neuen System geschult, barrierefreie und SEO-gerechte Inhalte anlegen zu können.
Sämtliche Elemente, Funktionen und Module wurden barrierefrei angelegt und anschließend automatisiert und manuell mit Assistenztechnologien getestet.
Unser Fazit
Die neue Website des Ibero-Amerikanischen Instituts spiegelt dessen interdisziplinären und internationalen Charakter wider. Durch die verbesserte Nutzerfreundlichkeit, Barrierefreiheit, moderne Gestaltung und technische Erneuerung bietet sie ihren internationalen Zielgruppen greifbaren Mehrwert.
Steckbrief
- Kunde: Ibero-Amerikanisches Institut (IAI) der Stiftung Preußischer Kulturbesitz
- Branche: Kultur
- Umsetzung: Launch im Frühjahr 2025
- Technologie: TYPO3 (LTS 12.4)
- Leistungen: Beratung, UX-Design, Konzeption, barrierefreie technische Realisierung, BIK-Test, User-Testing