Heidenheim goes Modern UI

Heidenheim Webauftritt

Die Stadt Heidenheim hat vor wenigen Tagen ihr neues Stadtportal live gestellt. Angesichts des Interfaces fühlt man sich als Besucher spontan an Microsoft erinnert, die vor einigen Monaten all ihre Applikationen auf „Modern UI“ umgestellt haben. Ganz wie Microsoft versprechen sich die Projektverantwortlichen in Heidenheim offenbar von dem neuen Design, Desktop-Nutzer und Mobilanwender gleichermaßen ideal abzuholen. Und ebenso wie Microsoft scheitert auch Heidenheim daran.

Mittlerweile sollte sich herum gesprochen haben, das Modern UI, wie Microsofts Designsprache heißt, zwar ein ambitioniertes und gerade aus Designsicht überaus spannendes Konzept darstellt, in der Praxis allerdings neben vielen Chancen auch einige Pferdefüße beinhaltet. Die Vorstellung, mit dem auf Kacheln basierenden Interface fühlten sich sowohl Nutzer von Mobilgeräten wie Desktop-Anwender gleichermaßen angesprochen, scheint sich nicht bewahrheitet zu haben. Zu sehr ist die fröhlich-bunte, touch-freundliche Kacheloptik auf Mobilnutzer ausgerichtet, zu wenig entspricht sie dem Bedürfnis eines Desktop-Anwenders.

Konkret zeigen sich die Schwächen der Heidenheim’schen Modern-UI-Lösung unter anderem am folgenden Screenshot (Android/Galaxy SII) des Bereichs Bürgerservice.

Heidenheim Webauftritt – Screenshot unter Android

Die Kacheln, die in dieser Ansicht rein dekorativen Charakter besitzen, also in Bezug auf die Nutzerführung nutzlos sind, was nebenbei gesagt ein elementarer Unterschied zur echten Modern-UI-Umgebung darstellt, belegen rund zwei Drittel der Bildschirmfläche. Noch einmal: Zwei Drittel der gesamten Oberfläche sind damit nutzlos. Der einzige, auf dieser Seite befindliche relevante Inhalt befindet sich in einer winzigen Link-Box („Bürgerservice“) links unten. Besser wäre es, die vier hier aufgeführten Links zusätzlich im mittleren Bereich in Form von Teasern vorzuhalten, um auf diese Weise einen möglichst komfortablen Zugang zu ermöglichen. Stattdessen wird im Content-Bereich ein ebenfalls nutzloser Fülltext untergebracht.

Darüber hinaus beinhalte das neue Stadtportal weitere Schwächen:

1. Der Webauftritt ist nicht barrierearm, schon gar nicht barrierefrei. Alle Kacheln, auch die, in denen sich nur Text befindet, sind als Grafiken angelegt, wodurch der Zugriff mittels Tastatur eingeschränkt ist. Die geringen Kontrastverhältnisse von Text zu Hintergrund (z.B. weiß auf gelb) erschweren die Lesbarkeit, gerade auch auf Mobilgeräten! Auch die Verwendung des Schwarztons beeinträchtigt die Lesbarkeit, die besser wäre, wenn statt des reinen Schwarz ein dunkles Anthrazit gewählt worden wäre, um davor weißen Text zu platzieren.

2. Die Hauptnavigation ist zu behäbig, das animierte Erscheinen der Unterpunkte ist eine leider sehr weit verbreitete Unsitte. In dieser Form schränkt die Hauptnavigation die Nutzfähigkeit des Auftritts ein beziehungsweise erschwert sie den Zugriff zum Informationsangebot. Besonders störend ist die Animation der rechtsseitig angedockten Symbolleiste.

3. Die erste Hierarchieebene innerhalb der Hauptnavigation ist nicht verlinkt. Das damit einhergehende Fehlen von Übersichtsseiten innerhalb des Webauftritts ist Ausdruck der Defizite auf Seiten der Konzeption. Zweckdienlicher wäre anstelle einer effektvollen Hauptnavigation die Implementierung von Übersichtsseiten, so wie es gerade auch auf Stadtportalen üblich ist.

4. Auf Unterseiten ist das Stadtlogo nicht verlinkt, es fehlt also die Möglichkeit, zurück zur Startseite zu gelangen.

5. Auf der Nachrichtenseite sind weder Teaser-Überschriften noch Teaser-Bilder verlinkt – ein großes Defizit in Bezug auf die Nutzerführung.

Auf facebook.com/stadt.heidenheim bescheinigen einige Nutzer dem Webauftritt eine „jüngere, modernere“ Optik. Fraglos ist das so. Aber auch die Schwächen in Sachen Technik/Nutzerführung bleiben dort nicht unentdeckt. Über die Farbe-Bilder-Emotionen-Ebene kommt das Stadtportal leider nicht hinaus.

18 Kommentare zu “Heidenheim goes Modern UI

  1. Danke für den Artikel. Genau das war auch mein erster Eindruck, das unter der ganzen gewünschten „modernen“ Optik die eigentliche Aufgabe der Seite vergessen worden ist.

    Ich habe direkt nach dem Launch ebenfalls einen kleinen Blogpost geschrieben mit weiteren Kritikpunkten (teils behoben).
    http://blog.philippreiner.info/555/die-neue-heidenheim-de-homepage

    Nachtrag: Das Logo ist auch auf Unterseiten verlinkt. Nur ist der eigentliche Linkcontainer nicht exakt mit dem Bild abgestimmt. Screenshot:
    http://d.pr/i/YwFy

  2. Naja, nur weil Kacheln im Design verwendet wurden, hat es mit Modern UI noch lange nichts zu tun. Modern UI ist mehr…z.B. eine durchdachte Interaktion bzw. UX. Bestimmte Learnings, die Touch optimiert usw.

    Im Artikel werden Birnen mit Äpfel verglichen, die nur den Leser umso mehr verwirren.

    Für mich ist das Stadtportal eine stink normale Webseite mit paar Kacheln!

  3. Naja, nur weil Kacheln im Design verwendet wurden, hat es mit Modern UI noch lange nichts zu tun.

    Zwangsläufig nicht, nur ist es offensichtlich, zumindest ist es offensichtlich, wenn man die verlinkte Pressemeldung gelesen hat, das sich die Verantwortlichen von Modern UI inspiriert haben lassen.

    Im Artikel werden keine Äpfel mit Birnen verglichen, sondern es wird darauf hingewiesen, dass die Designsprache Microsoft einer gänzlich anderen Logik folgt, als das Interface von Heidenheim.de, bei dem die „Navigationskacheln“ auch dekorative Zwecken erfüllen sollen, womit jedoch die in der Modern-UI-Designsprache verankerten Regeln ausgehebelt werden.

  4. Hmm, beim ersten Blick ist mir auch aufgefallen, dass die Kacheln auch teils von der Benennung/inhaltlich sehr ähnlich sind. 4 Kacheln z.B. mit folgenden Inhalten:

    – Kunst & Museen
    – Theater & Kleinkunst
    – Musik & Konzerte
    – Kulturschiene

    Sind alles Unterpunkte von „Kunst und Kultur“. Für mich als Nutzer sind so „Deeplinks“, die gleich auf den Inhalt und nicht unbedingt erst auf die Oberrubrik verlinken gut, weil ich so unter Umständen schneller zu meinem speziell gesuchten Inhalt komme. Aber das scheitert hier, wie ich finde, daran, dass die einzelnen Punkte von der Namensgebung und auch inhaltlich nicht so klar voneinander abgegrenzt sind. Da bin ich also, wenn ich auf der Startseite bin, sehr verwirrt.

    „Wo genau muss ich jetzt hin? Was soll denn der Unterschied zwischen Kulturschiene und Kunst&Museen sein?“

    Da fehlt mir auch ein bisschen das inhaltliche Konzept dahinter.

  5. @lrrm

    Danke für den Beitrag. „Meckern auf hohem Niveau“ trifft es sehr gut. Heidenheim ist eine Kleinstadt mit 48.000 Einwohnern. Setzt man den neuen Internetauftritt in Relation mit unvergleichbar größeren Städten (DT berichtete hier mehrmal selbst) kann sich das Ergebniss mehr als sehen lassen. Eine gute Arbeit, die selbstverständlich auch davon zeugt, dass es in den südlichen Gefilden der Republik noch Kommunen gibt um die es finanziell gut bestellt ist :)

    p.s. dieses ewige Vergleichen nervt! Ja, man kann die Seite mit dem gegenwärtigen Interface von Windows 8 vergleichen. Man kann Tomaten mit Paprikas und Mäuse mit Ratten vergleichen. Bringts was?: Nein! Ähnlichkeiten sind natürlich immer auch einem aktuellen Zeitgeist, sprich Geschmack, zuzuordnen. Heute Glossy, morgen Plain, übermorgen Kacheln. Das nennt man wohl Mode. Wem das nicht passt, der kann ja sein Internet lahm legen.

  6. @clemens

    Danke für den Beitrag. “Meckern auf hohem Niveau” trifft es sehr gut. Heidenheim ist eine Kleinstadt mit 48.000 Einwohnern.

    Das entspricht doch einer Zielgruppe von mindestens 48.000 Usern. Ich finde, selbst wenn man nur von der Hälfte ausgeht, sollte man sich darüber im Klaren sein, dass man sich nicht mehr im „Kumpel ich brauch mal eine Webseite“-Bereich aufhält und dass jede Arbeit Kritik ausgesetzt ist.

    In diesem Fall muss ich den Author zustimmen, da es sich hier ganz klar nicht um „Eine gute Arbeit“ handelt. Auch sollte man darauf hinweisen, dass der Preis in keiner Relation zu der Qualität der Webseite steht.

    „essen & trinken“, „hotels“, „onlineshop“,“veranstaltungen“ usw. : Es fühlt sich an als wäre ein Brainstorming ohne Zwischenschritt umgesetzt worden.

    Zum Vergleich zu Windows8:
    Microsoft hat nun mal den ersten Schritt gemacht und auch wenn es „Kacheln“ auch schon vorher gegeben hat hat sie Windows8 nun mal „bekannt“ gemacht.
    So wird also alles kommende auch damit verglichen werden, wem das nicht passt, der kann ja sein Internet lahm legen.

    So funktioniert das nun mal! Wo wären wir wenn wir nichts vergleichen würden? Sachen in Relation zu sehen bringt Fortschritt.

  7. Dass im Zusammenhang mit dem Stadtportal Heidenheims von einem „hohem Niveau“ gesprochen bzw. der Artikel als „Meckern auf hohem Niveau“ eingestuft wird, wundert mich dann doch. Wer sich 5 Minuten Zeit nimmt, um einmal hinter die Fassade der staädtischen Kacheloptik zu schauen, dem werden die gravierenden Mängel in Bezug auf die Nutzerführung nicht entgehen. Die Verlinkung von Überschriften ist nun wahrlich nichts, was ausschließlich großen Stadtportalen vorbehalten bleiben sollte ;)

    Übrigens war Microsoft, wie es hin und wieder in den Medien durchklingt, keinesfalls „der Erfinder“ des Kacheldesigns. Der Nachrichten-Aggregator Newsmap ist seit fast 10 Jahren online und kann als eine Art Blaupause angesehen werden. Wenn Kacheldesign als Navigationsinstrument, dann bitte richtig.

  8. Also ich finde das Design auf den ersten Blick sehr ansprechend, wobei ich die angemerkten Schwachpunkte nachvollziehen kann.
    Allerdings kann ich die Kritik an der mobilen Darstellung absolut nicht nachvollziehen, bzw. weiß ich auch nicht wie der obere Screenshot zustande kommen kann – außer dass Android daran Schuld ist. ;)

    Ich zumindest erhalte diese mobile Darstellung und an der kann ich rein gar nichts aussetzen. :)

    Startseite:
    http://s7.directupload.net/images/130309/42ezer2k.jpg

    Rubrik:
    http://s1.directupload.net/images/130309/5xkiees3.jpg

    Content:
    http://s14.directupload.net/images/130309/o23tgruk.jpg

    Ist doch hübsch und benutzerfreundlich.

  9. Bei der Bedinebarkeit für mobile Geräte muss man hier wohl zwischen Android und iPhone unterscheiden.

    Auf iPhone lässt sie sich relativ gut bedienen. Die Kacheln machen sich ganz gut beim bedienen. Die rein dekorativen Elemente auf den Übersichtsseiten bei der Desktopversion erscheinen hier gar nicht erst. Die relevanten Menüpunkte erscheinen sogleich im oberen Bereich (wie auch Vorkommentator bereits festgestellt hat).

    Generell kann es für Kacheln unterschiedliche Funktionen geben. Zum einen kann man damit die Fläche zum Anklicken vergrößern was der Benutzung von Fingern die eine größere Auflagefläche benötigen entgegenkommt. Das ist ein wesentliches Merkmal für das GUI von Microsoft und wohl auch der Kernansatz.

    Desweiteren können sie auch dekorative Zwecke erfüllen wie es teilweise auf der Site Heidenheim umgesetzt wird. Sie stecken Inhalte in ein ästhetisches Raster und sorgen damit für eine optisches gleichmäßiges Erscheinbild von Inhalten. Es kann ein Gestaltungsprinzip sein.

    Mobiles Design ist natürlich mehr als nur das Anpassen an ein bestimmtes Format von Pixelbreite und Höhe und auch keine Frage von „Kacheln oder nicht“. Formatanpassungen erreicht man mit nahezu Nullaufwand bei Einsatz von entsprechenden aktuellen Frameworks.
    Konsequentes mobiles Design fragt nach dem entsprechenden Use Case: Welcher Nutzertyp fragt welche Informationen ab, und welches Interface steht ihm zu diesem Zeitpunkt zur Verfügung. Das erfordert eine ganz andere Strukturierung von Inhalten und genau das schafft die Site zumindestens schonmal in dem Punkt, dass die dekorativen Elemente auf der Desktopversion zu sehen sind und auf der mobilen Version nicht mehr.

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>