Mit UX-Design mehr Klarheit für komplexe Websites

Zurück zur Übersicht

Mit UX-Design mehr Klarheit für komplexe Website

Sabine | 28.11.2019

Der neue Internetauftritt des Dr. Harnisch Verlags

Die optimierte Website des Dr. Harnisch Verlags ist online. Bei der Gestaltung des neuen Webauftritts konnte sich der Verlag ganz auf uns verlassen: Nach einer gründlichen Analyse, haben wir die Homepage nach UX-Gesichtspunkten aufgesetzt. Doch worauf kommt es bei der sogenannten User Experience (UX) eigentlich an und wie geht man bei der Umsetzung vor?

User Experience und Usability – ähnliche Begriffe und doch so unterschiedlich

Der Begriff Usability ist mittlerweile im Alltag angekommen und viele wissen zumindest im Ansatz, worum es dabei geht. Aufgrund der Ähnlichkeit, könnte man also meinen, Usability und UX, was ausgeschrieben für User Experience steht, wäre dasselbe. Dabei gibt es gravierende Unterschiede zwischen beiden.  Usability beschreibt die Gebrauchstauglichkeit oder Nutzerfreundlichkeit eines Produktes – in diesem Fall der Nutzeroberfläche der Homepage. Also wie effektiv und effizient der Nutzer zum gewünschten Ergebnis bzw. zu den gewünschten Informationen gelangt. Gute Usability wird in der Regel nicht direkt wahrgenommen, sie lebt vom intuitiven Vorgehen des Nutzers. Schlechte Usability macht sich hingegen sehr schnell bemerkbar und löst Frustration aus.

User Experience (UX) ist das gefühlte „Erleben“ der Möglichkeiten auf einer Website und  entsteht durch die Verknüpfung von Usability mit einer emotionalen Komponente. Auf Websites beinhaltet dies meist ein ansprechendes Design und kaum wahrnehmbare „aha“- und „wow“-Effekte, die Begeisterung und Spaß bei der Bedienung hervorrufen. Die Herausforderung dabei ist es, dass die unterschiedlichen Nutzer- und Interessengruppen nicht nur schnell zu den gewünschten Informationen gelangen, sondern auch verschiedene positive Erlebnisse und Emotionen erfahren können.

BESONDERS SEIN-Webdesign-Userführung-Strategie

Design ist nicht alles: Mit der richtigen Strategie zum Erfolg

UX-Design und Usability waren in den letzten Jahren sehr stark den technischen Entwicklungen unterworfen. Vom unterschiedlichen Userverhalten zwischen Desktop-Rechnern, Tablets und  Smartphones, über das damit zusammenhängende responsive Design, bis hin zu bekannten Elementen, wie dem „Burgermenü“ oder die typische von MS Windows bekannte „Kacheldarstellung“. Außerdem erfreuen sich Videos immer größerer Beliebtheit und schnellere Internetgeschwindigkeiten sorgen für nahezu unbegrenzte Möglichkeiten im Netz. Derartige Elemente haben sich etabliert und müssen nun mit kreativen und modernen Ideen und Konzepten verknüpft werden, um ein „Erlebnis“ für den Kunden  zu erzeugen.

Um ein erfolgreiches UX-Design zu erstellen, müssen zunächst die unterschiedlichen Nutzer- und Interessengruppen recherchiert werden. Diese werden dann wiederum nach den unterschiedlichen Nutzungsbedürfnissen unterteilt. Man muss dabei immer wieder fragen: Was wollen die User wirklich? Im Vordergrund steht also die Kombination aus der Befriedigung von Kundenbedürfnissen und den eigentlichen Zielen, welche man mit der Seite anstrebt, wie zum Beispiel den Verkauf von Produkten oder „nur“ eine Informationsbereitstellung. Im Optimalfall stellt man neben diesen Faktoren einen Mehrwert für den Kunden zur Verfügung, damit eine intuitive Kundeninteraktion ermöglicht wird.

Grundsätzlich gilt: „Keep it simple“! Der Nutzer ist es bei der Flut an Informationen, die ihm im Internet zur Verfügung stehen, gewohnt, sofort eine andere Quelle zu suchen, wenn er nicht auf Anhieb findet, was er sucht. Zu lange Texte oder eine unübersichtliche Darstellung schrecken den potentiellen Interessenten also sehr schnell ab. Eine klare Struktur, wenige Optionen und ein Vorgeschmack auf das, was ihn erwartet, wenn er sich weiter durchklickt, sind deshalb die grundsätzlich zu beachtenden Punkte. Zudem sollten aber auch noch die Vorstellung des Unternehmens, ein grober Überblick der Leistungen, ein detaillierter Überblick der Leistungen, die Vermittlung von Sicherheit – z. B. durch Referenzen, verschiedene Interaktionsmöglichkeiten an allen relevanten Stellen und die USPs des Unternehmens in die Seite integriert werden.

BESONDERS SEIN-UX-Design-Usability

UX-Design: Step by Step

BESONDERS SEIN-UX-Design-Flowchart

„Beim UX-Design sind für uns sieben elementare Schritte nötig, um für den Kunden das bestmöglichste Ergebnis zu erzielen“, erklärt unsere Geschäftsführerin Daniela Köhler. Der erste Step besteht aus einer gründlichen Analyse der Zielgruppen und deren Nutzungsverhalten. Man muss den User als reale Person sehen und diese möglichst gut kennenlernen. Alle gewonnenen Informationen fließen später in den Grobentwurf und den ersten Prototypen ein. Als nächstes wird ein Anforderungskonzept erstellt. Damit wird sichergestellt, dass die Struktur optimal an den User angepasst wird und die Navigation intuitiv ablaufen kann.

Im dritten Schritt werden Grobentwurf, Wireframe und Userflow definiert. Das dient zur ersten Visualisierung der Seite und ermöglicht eine ständige Optimierung und Qualitätskontrolle des Arbeitsprozesses. Dabei können je nach Bedarf, unterschiedlich viele Details eingebaut werden. Anschließend folgt der erste Designentwurf. An dieser Stelle werden die Wireframes genauer ausgearbeitet und ein in Ansätzen gestalteter interaktiver Prototyp entwickelt. Der fünfte Schritt beinhaltet das Nutzerverhalten und UX-Testing. Wie man schon vermuten könnte, wird der Prototyp nun mit möglichen Nutzern auf Herz und Nieren getestet. Das jeweilige Feedback fließt in die weitere Entwicklung ein. Zudem wird auch manchmal Eye Tracking eingesetzt, um weitere Erkenntnisse über verschiedene Elemente der Seite zu gewinnen.

Danach ist es endlich soweit: Das Design wird fertiggestellt. Hier wird im Normalfall ein komplett ausgestalteter interaktiver Prototyp erarbeitet. Wie ausführlich und formal die Dokumentation sein soll, ist budgetabhängig. Häufig ist eine genaue Ausarbeitung nur für einzelne Seiten notwendig, da sich diese oft nur inhaltlich, aber nicht oder nur gering im Aufbau unterscheiden. Das Projekt wird durch die Messung und Nachjustierung vollendet. Nachdem die Seite online gegangen ist, erfolgen kontinuierliche Messungen der Websiteziele und ggf. Anpassungen. „Dabei bauen wir unsere Content Management Systeme in der Regel so auf, dass die Kunden diese Anpassungen auch selbst vornehmen können. So lässt sich oft Zeit und Budget sparen“, erzählt Daniela Köhler.

Das neue UX-Design der Verlagsseite

BESONDERS SEIN-Relaunch-Website-Dr-Harnisch-Verlag

Der Dr. Harnisch Verlag wurde bereits 1919 gegründet und hat sich als zuver­lässiger Partner der Lebensmittel- und Getränke­industrie, der Bau- und holzverarbeitenden Industrie, des Lebensmittelhandels sowie der Werbemittelindustrie etabliert. Für alle diese Branchen veröffentlicht der Verlag Fachzeitschriften.

Nach einer gründlichen Analyse der alten Website kamen wir zu dem Ergebnis, dass es keine klare Unterscheidung zwischen der eigentlichen Verlagsseite und den Unterseiten der einzelnen Fachzeitschriften gab. „Die Struktur war einfach zu unübersichtlich und der Traffic auf der Seite zu gering. Das wollten wir natürlich ändern“, bringt Daniela Köhler unsere Gedanken auf den Punkt. Das war höchstwahrscheinlich auch auf die teilweise verwirrende Ansprache der Zielgruppen zurückzuführen, die sich aus den unterschiedlichen Branchen ergeben. „Auch die Interessengruppen setzen sich aus verschiedenen Bereichen wie den Lesern der Zeitungen aber auch Werbetreibenden, Werbekonsumenten und anderen zusammen. Wir standen an dieser Stelle vor einer kleinen Herausforderung, schließlich war eine übersichtliche Struktur das Ziel, die aber auch alle User ansprechen sollte“, so Daniela Köhler weiter.

Die Erkenntnisse der Analyse verdeutlichten die Anforderungen an die neue Website. Daraus ergaben sich die nachfolgenden neuen Ziele. Primär sollten die unterschiedlichen Interessengruppen intuitiv und optimal zu den gewünschten Informationen geleitet werden.

Dafür war es auch nötig, die Verlags- und die Zeitschriftenseiten klar zu trennen und unterschiedlich darzustellen, um die offensichtliche Unterscheidung der Inhalte zu fördern aber gleichzeitig einen Wiedererkennungswert zu ermöglichen. Eine deutliche Nutzerführung der Interessengruppen „Leser“ und „Werbetreibende“ war notwendig und „Neuigkeiten“ und „Interessantes“ sollten nach Branchen unterschieden werden können.

Des Weiteren sollte die Werbeflächenintegration diskret und nicht überladen wirken und nach Interessengruppen unterschiedlich verteilt werden. Wie viele Verlage, sieht auch der Dr. Harnisch Verlag die Zukunftsausrichtung als Onlinemagazin. Dementsprechend mussten die Vorkehrungen für ein weiteres Wachstum in diesem Bereich getroffen werden. All die genannten Punkte sowie hochwertiger Content mit Mehrwert dienen letztlich der Steigerung des Seitentraffics. Die Umsetzung der einzelnen Punkte kann online unter https://www.harnisch.com/ nachvollzogen werden. „Wir sind sehr zufrieden mit dem Ergebnis der Website. Es war nicht unbedingt einfach, eine Lösung für alle Zielgruppen zu finden, aber wir wären ja nicht BESONDERS, wenn wir aufgeben würden sobald es kompliziert wird“, sagt unsere Chefin lächelnd zum Abschluss.

Auch die Kunden waren begeistert: „wir bedanken uns ganz herzlich für die gute Zusammenarbeit. Dank des intensiven Gedankenaustauschs mit den Mitarbeitern Ihrer Agentur „BESONDERS SEIN“ haben wir nun eine Website, die den Anforderungen eines Fachverlags entspricht:  Übersichtlich. Leicht zu nutzen. Selbsterklärend.  Mit den neuesten technischen und gestalterischen Mitteln haben Sie eine top Website entwickelt, die den Verlag hervorragend repräsentiert“  Das Team vom Dr. Harnisch Verlag

Haben auch Sie ein komplexes Webseitenprojekt? Dann zögern Sie nicht uns zu kontaktieren!

Wir freuen uns auf neue Herausforderungen!

Autor


Sabine

Sabine ist Senior Consultant bei BESONDERS SEIN. Mit mehr als 25 Jahren Berufserfahrung im Marketing ist sie mit jedem Trend vertraut. Strategie und gutes Design sind ihre Leidenschaft.

Cookie-Hinweis

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Diese können Sie in unserer Datenschutzerklärung jederzeit deaktivieren.

OK