Schmerzfreier Relaunch? | otago Community Update 6/2023
im Speed-Date: Lorena Meyer

01.06.2023 | So ein Website Relaunch ist vergleichbar mit einem bevorstehenden Marathon, nachdem Sie gerade fünf Kilometer geschwommen sind. Wir verraten Ihnen, wie sie diesen einfach und schmerzfrei über die Bühne bringen.

Sie alle haben schon vor dem Relaunch einen vollen Kalender, die Deadlines sind sportlich gesetzt und das Budget könnte auch etwas größer sein. Aber lassen Sie sich jetzt nicht abschrecken! Wie schön ist das Gefühl, wenn die neue Website online ist?!

Worauf Sie achten sollten:

• Konzentrieren Sie sich nicht nur auf Änderungen, sondern überlegen Sie sich genau, was schon gut funktioniert.
• Versehen Sie die einzelnen Projektphasen mit ausreichend Puffer.
• Mobile first! Ist die Website am Handy gut nutzbar, wird es am Desktop klappen.
• Schon 3-4 Personen beim benutzen einer Testversion zu beobachten, wird wesentliche Verbesserungsmöglichkeiten aufzeigen.
• Planen Sie auch etwas Zeit und Energie für Nachbesserungen ein.
• Feiern Sie den Relaunch, Sie haben es sich verdient! 🍾🥂

Passend zum Thema gibt uns diesmal Lorena Meyer, die Co-Autorin von “Praxisbuch Usability und UX: Was alle wissen sollten, die Websites und Apps entwickeln” einige Tipps mit auf den Weg.

Schnappen Sie sich einen Eis-☕ oder eine 🍉 und holen Sie sich Inspiration für eine bessere Website!

Jan googelt

• 11 kostenlose Wireframing Tools
  Wireframes leicht gemacht – mehrere kostenlose Werkzeuge für Designer:innen im Überblick.
  von Clique Studios
  

• Relaunch 4 Beginners
  Der ideale Artikel für Relaunch-Einsteiger:innen! Hier finden Sie nicht nur Infos zur Vorgehensweise und Tipps, sondern auch einen Leitfaden zur barrierefreien Gestaltung von Websites.
  von Jennifer Lapp @ HubSpot

• otago MeetUp: Erlebniswelten der Usability
  Am 24. Mai haben wir uns gemeinsam mit Expert:innen von Liechtenecker UX Design Studio & fluxguide auf UXpedition begeben – lest hier den Nachbericht mit allen Take-Aways unseres MeetUps!
  von otago

• Google Analytics 4: Sitesearch einrichten und auswerten
  Sie wollen wissen, welche Suchbegriffe Userinnen und User auf Ihrer Website eingegeben haben? Dann schauen Sie sich dieses Video an! Verpassen Sie kein Video und abonnieren Sie meinen Kanal ▶️
  von Google

• Mit Instagram Guides zu mehr Sichtbarkeit
  Mit der Instagram Funktion “Guides” lassen sich verschiedene Instagram-Postings in einem blogartigen Format zusammenfassen. Erfahren Sie hier, wie Sie einen Guide erstellen und welche Vorteile das für Ihre Marketing Strategie bringen kann.
  von Emily O’Leary @ HubSpot

What’s new, AI?
Ein kleiner Ausblick, wie sich KI bei der Google-Suche weiterentwickelt… 🤖
von Google

Speed Date

Wer bist du?

Mein Name ist Lorena Meyer und ich arbeite seit zahlreichen Jahren im UX-Bereich – in unterschiedlichen Positionen und für verschiedene Branchen (u.a. Tourismus & Mobilität, Automotive, E-Commerce, Versicherungen). Derzeit verantworte ich die Bereiche UX Konzeption und Innovation bei der infomax websolutions GmbH, einem Dienstleister für digitale Lösungen und Services für Destinationen und Unternehmen aus Tourismus und Mobilität.

Zusammen mit meinem geschätzten Kollegen Jens Jacobsen habe ich das „Praxisbuch Usability und UX – Was alle wissen sollten, die Websites und Apps entwickeln“ beim Rheinwerk Verlag veröffentlicht.

Was muss ich besonders bei mobilen Websites beachten?

Die Kunst beim Gestalten von Anwendungen ist es immer, Komplexität herauszunehmen und die Oberfläche so einfach wie nur möglich zu gestalten. Oft leidet die Usability durch zu viele Funktionalitäten oder generell überladene Screens. Das gilt erstmal für alle Endgeräte, nur potenziert sich diese Herausforderung bei mobilen Endgeräten entsprechend. „Weniger ist bekanntlich mehr“ oder – um den US-amerikanischer Software-Entwickler und Autor Joshua Bloch zu zitieren: „When in doubt, leave it out.“

Sich auf das Wesentliche zu konzentrieren, ist aber nur ein Teil beim Gestalten von mobilen Websites. Die Relevanz (und damit die Priorisierung) von Contents und Funktionen auf mobilen Endgeräten kann eine deutlich andere sein als die auf Desktop-Anwendungen. Daher muss man sich unbedingt den Kontext für den jeweiligen Anwendungsfall anschauen. Nicht immer, aber häufig werden mobile Endgeräte auch unterwegs genutzt. Was bedeutet das für die Nutzer:innen? Wird die Bedienung eventuell schwieriger? Sind möglicherweise standortbezogene Funktionalitäten relevant? Das alles beeinflusst die Gestaltung.

Gleichzeitig habe ich durch mobile Endgeräte auch mehr Möglichkeiten wie die Fingerprint-Funktion oder Sprache als Input- und Output-Kanal. Oder auch (Push) Notifications können eine Rolle spielen. Bei der Konzeption von mobilen Websites sollte man – je nach Anwendungsfall – auch diese Optionen in Betracht ziehen.

Und um reine Usability-Aspekte für mobile Websites nicht zu vernachlässigen: Die Touchfähigkeit aller Elemente (z.B. durch ausreichend große Elemente und genug Weißraum) sollte gewährleistet sein. Auch die Art der Elemente dürfen mobil durchaus anders gewählt sein (z.B. Umschaltflächen statt Checkboxen/Radiobuttons). Bei Eingabefeldern sollte sich mobil gleich die passende Tastatur öffnen (z.B. Zahlen zur Eingabe einer Telefonnummer).

Wie gestalte ich Formulare user:innenfreundlich?

Formulare können lästig sein, sind aber notwendig, wenn man von den Nutzer:innen Daten benötigt. Nicht nur aufgrund datenschutzrechtlicher Fragen ist man daher gut beraten, im ersten Schritt darüber nachzudenken, welche Daten zwingend abgefragt werden müssen und – ergo – welche Felder dann notwendig sind. Umso weniger Felder, desto geringer das Risiko, dass die Nutzer:innen diese nicht ausfüllen.
Darüber hinaus kann man den Nutzer:innen das Leben deutlich erleichtern, wenn im Formular…

…zusammengehörige Felder (z.B. PLZ, Ort) gruppiert und Felder der zu erwartenden Datenmenge (z.B. nur ein kleines Feld für die Hausnummer bei der Adresse) entsprechend groß gestaltet sind

…Labels zum jeweiligen Feld korrekt platziert (i.d.R. oberhalb des Formularfelds oder sog. adaptive Platzhalter) und in der Benennung spezifisch sind

…Anforderungen an Eingaben (z.B. Formatierungsvorgaben) erkennbar sind

…Eingaben inline direkt validiert werden (z.B. korrektes Format) und ein entsprechendes Feedback (z.B. grüner Haken bei passender Eingabe) zurückgegeben wird

…Fehlermeldungen aussagekräftig formuliert sind (z.B. Rückmeldung bei bereits vorhandenem Nutzernamen mit Vorschlägen für Alternativen) und direkt bei der jeweiligen Stelle (z.B. durch optisches Hervorheben des Eingabefelds) angezeigt werden.

Bei umfangreicheren Formularen macht es zudem Sinn, eine Fortschrittsanzeige zu integrieren. Häufig sieht man das beim Check-out in Onlineshops, die letztlich aus mehreren Formularseiten bestehen.

Deine 3 Tipps

…zu nutzer:innenzentrierer Gestaltung sind:

• • Die Nutzer:innen so früh im Entwicklungsprozess wie nur irgend möglich involvieren. UX hat auch viel mit Erwartungshaltungen zu tun und dem Verständnis für die Problem-/ Aufgabenstellungen der Nutzer:innen. Diese findet man nur heraus, wenn man mit den Nutzer:innen in den Dialog kommt.

• • • Testen, testen, testen und iterativ vorgehen. Mit jeder Schleife wird es besser.
    • • • Liebe fürs Detail pflegen.

Was du schon immer gefragt werden wolltest …

Was ist deine originellste Icebreaker-Einheit für Workshops?

Das otago Team wächst!

Aktuell suchen wir neue Mitarbeiter:innen für diese freien Jobs:

Ihnen gefällt, was Sie gerade gesehen und gelesen haben?

Werden Sie Teil der otago Community und bleiben Sie per Email up to date über News aus unserer Onlinemarketing Welt.

Melden Sie sich gleich zu unserem Newsletter an!