Universitäts-Kinderspital Basel

Kinder-Website

Das Universitäts-Kinderspital beider Basel (UKBB) ist ein eigenständiges, universitäres Kompetenzzentrum für Kinder- und Jugendmedizin sowie für Lehre und Forschung.

Um die kleinen Patientinnen und Patienten vor einem Besuch oder Aufenthalt über alle Aspekte des Spitals zu informieren, wurde eine regionale Webagentur zur Ablösung der bisherigen (auf Adobe Flash basierten) Kinder-Website gesucht.

Gemeinsam mit arteria wurden die Anforderungen für diesen Relaunch erarbeitet:

  • Die Zielgruppe (6-14 Jahre) soll über die Gestaltung, neue Charaktere und eine optimale Benutzerfreundlichkeit besser abgeholt werden können. Grundlage hierfür bilden mehrere Zielgruppen-Workshops.
  • Gestalterisch soll die Webseite in Richtung «Comic» gehen und vorhandene Elemente aus dem UKBB enthalten. Die UKBB Farbwelt liegt der Kinder-Website zugrunde.
  • Kinder, Jugendliche und deren Eltern können sich über wichtige Aspekte eines Spitalbesuches im UKBB informieren
  • Neue technische Elemente und Funktionen unterstützen zudem die Präsentation der Inhalte
  • Mittels einem Responsive Webdesign werden das Layout und die Inhalte auch auf mobilen Endgeräten wie Smartphones (z.B. iPhone) und Tablets (z.B. iPad) optimal dargestellt
  • Alle Inhalte können vom UKBB nach einer Schulung selbständig via CMS bearbeitet werden.

Lösung

Zur Initialisierung des Projekts wurde vorgängig ein Strategie-Workshop mit der Kommunikationsabteilung des UKBB durchgeführt. Dabei fand eine Annäherung an die Zielgruppe statt, Ideen und Ansätze, Inspiration, Inhalte und Funktionen der Kinder-Webseite wurden diskutiert. Der Grundstil für das Web-Layout und die Charaktere wurden anhand von Beispielen und Inputs erarbeitet.

Kinderworkshop

Im Anschluss an den strategischen Workshop wurden ca. 10 Kinder mit Bezug zum UKBB zum Kinderworkshop eingeladen. In Gruppen wurden die Fragen zum Stil, den Inhalten und der Funktionsweise der neuen Website diskutiert.

Dank der motivierten Mitarbeit der Kinder konnten die Rahmenbedingungen für die Kinder-Website rasch definiert werden:

  • Fast alle Kinder besitzen bereits ein Tablet oder Smartphone (ca. 90%)
  • Fast alle Kinder waren auch schon einmal im Spital (Besuch oder Aufenthalt)
  • Die bisherige Kinder-Webseite hatte zu «kindliche Figuren», war wenig ansprechend und zu textlastig. Gerade für jüngere Kinder sind interaktive Inhalte interessanter.

Was Kinder über das Spital wissen wollen

  • Wie laufen unterschiedliche Themen konkret ab: Geburt, Notfall, Unfall, über Nacht bleiben müssen, Narkose usw.?
  • Welche Menschen arbeiten in einem Spital?
  • Was gibt es zu Essen und wo kommt es her?
  • Darf ich fernsehen oder mein Handy benutzen?

Was auf die neue Website gehört

  • Fotos und Filme (Interviews!)
  • Ergänzende Texte und Downloads
  • Töne aus dem Spital

Wie die Kinder-Website aussehen soll

  • Das UKBB soll wie eine «Welt» erkundet werden können
  • Alles soll in einem «Flat Comic» Stil aufgebaut sein
  • Die Website soll vor allem mittels Scrollen gesteuert und erkundet werden können

Illustrationen

Dem Wunsch der Kinder folgend wurde das gesamte UKBB im Comic-Stil illustriert. Um möglichst realistische digitale Welten zu erschaffen, wurden vorab Fotos und Mockups der Zimmer und Bereiche erstellt:

Anschliessende Umsetzung:

Um die Berufsbilder, mit denen die Kinder im Spital in Berührung kommen, authentisch zu gestalten, wurden Mitarbeiter bei der Arbeit begleitet.

Daraus entstanden ist ein Set von Illustrationen das Ärzte, Chirurgen, Pfleger, Therapeuten und sogar Mitarbeiter der Reception und der Hausdienste umfasst.

«Magisches» Scrollen

Nachdem die Idee einer «Stop-and-Go» Website am Kinderworkshop grosse Zustimmung finden konnte, wurde eine solche Funktion im Rahmen der Webentwicklung umgesetzt: Der Besucher scrolled durch die Website, wobei an definierten Punkten ein Bereich des UKBB «gepinned» wird.

Der Effekt: Ab diesem Punkt bewirkt das Weiterscrollen keine weitere vertikale Bewegung der Webseite mehr. Stattdessen können mittels Hoch- bzw. Runterscrollen Elemente der Website ein- oder ausgeblendet werden: Personen erscheinen oder verschwinden und werden anklick- und erlebbar. Nachdem ein Spitalbereich komplett erkundet wurde, scrolled die Website wieder «normal» weiter bis zur nächsten Ebene die dann wiederum «eingefroren» wird. So erkundet der Besucher die Bereiche des UKBB: Eingang, Empfang, Zimmer, Untersuchung und Operationssaal.

Diese Funktionalität wurde komplett mit HTML5 und CSS3 umgesetzt. In Kombination mit dem Web-Framework Bootstrap entsteht so eine durchlässige Kinder-Website im Responsive Design, die auch auf einem iPad oder iPhone vollständig genutzt werden kann.

www.kinder.ukbb.ch