Methoden zur Verbesserung der User Experience am Beispiel des Kano-Modells

Autorinnen: Jennifer Tews und Katharina Trommer


Die Kundschaft ist König – doch was erwartet sie eigentlich? Was erwarten Kund:innen von einem Produkt oder einer Dienstleistung und womit lassen sie sich begeistern? Für Unternehmen oder Dienstleister ist es wichtig, die Bedürfnisse seiner Kund:innen sowie deren Ansprüche und Wünsche zu kennen und im besten Fall zu erfüllen. Denn nur so können eine erhöhte Nachfrage und ein dementsprechendes Angebot gewährleistet werden. Eine Einführung in diese Thematik sowie das Kano-Modell als Methode, die Zufriedenheit der Kund:innen festzustellen, erhalten Sie in diesem Beitrag.

Inhalt

Wie Zufriedenheit in der Kundschaft entsteht

Ob Parkautomat oder Selbstbedienungskasse im Supermarkt – unser Alltag ist von interaktiven Produkten und Anwendungen geprägt. Dabei kommt es vor, dass wir mit einigen Systemen mühelos zurechtkommen und uns mit anderen schwertun. Dementsprechend hinterlassen Produkte oder Anwendungen einen positiven, geradezu großartigen Eindruck oder einen negativen und unbefriedigenden. Diese Erfahrung lässt sich in einem einfachen Begriff beschreiben: User Experience (kurz UX).[1]

Die User Experience beschreibt die Wahrnehmungen und Reaktionen einer Person auf die Nutzung eines Systems, Produktes oder einer Dienstleistung.[2] Sie rückt das subjektive Empfinden sowie die Bedürfnisbefriedigung der Nutzenden ins Zentrum, wobei emotionale Faktoren handlungsleitend sind. Ein positiv in Erinnerung gebliebenes Nutzungserlebnis kann dafür sorgen, dass Kund:innen ein Produkt weiterempfehlen oder noch einmal kaufen. Insbesondere die Ästhetik und intuitive Anwendbarkeit wirken dabei überzeugend.[3]

“Wenn sie ein großartiges Erlebnis schaffen, werden sich die Kund:innen gegenseitig davon erzählen. Sie müssen immer fantastisch sein.”

Jeff Bezos, Amazon

Einfach gesagt entscheiden sich Kund:innen beim Kauf für das Angebot, welches ihren Anforderungen und Wünschen am meisten entspricht. Für Unternehmen ist es daher sinnvoll, die Aspekte der User Experience zu berücksichtigen, um die Nutzungszufriedenheit zu steigern und eine positive Wahrnehmung des Produktes zu bewirken. Dies erfordert mitunter, sich von etablierten Praktiken bei der Produktentwicklung zu lösen und neue Wege einzuschlagen, um Produkte und Anwendungen noch besser an die Bedürfnisse der Nutzer:innen anzupassen.

Damit landen wir wieder bei unserer Einstiegsfrage, was Kund:innen erwarten? Um herauszufinden, womit Produkte und Dienstleistungen positive Eindrücke hinterlassen, ist die Analyse der Zufriedenheit der Kundschaft notwendig.

Das Kano-Modell – Kund:innenzufriedenheit sichtbar machen

Noriaki Kano

Das Kano-Modell ist eine Methode, um die Zusammenhänge zwischen dem Erreichen bestimmter Produkt-oder Dienstleistungseigenschaften und der erwarteten Kund:innenenzufriedenheit darzustellen. Der Schöpfer dieses Modells, Noriaki Kano, bezieht sich bei seinem Modell auf die Theorie von Frederick Herzberg. Diese besagt, dass nicht notwendigerweise ein linearer Zusammenhang zwischen der Erfüllung eines Bedürfnisses und der daraus resultierenden Zufriedenheit bzw. Unzufriedenheit bestehen muss.[4]

Das Kano-Modell und seine Bestandteile

Innerhalb des Kano-Modells wird zwischen verschiedenen Anforderungskategorien, auch Merkmale oder Faktoren genannt, unterschieden. Es gibt Basis-, Leistungs- und Begeisterungsfaktoren. In einigen Darstellungen wird das Modell durch Questionable, Indifferente Merkmale und Reverse Merkmale ergänzt. Alle Kategorien unterscheiden sich in ihrem Einfluss auf die Kund:innenzufriedenheit und werden im Vorfeld häufig mittels Interviewverfahren bestimmt. Um im Anschluss die Produkt- oder Dienstleistungsanforderungen den einzelnen Kategorien zuordnen zu können, werden Kund:innenenreaktionen bewertet. Dabei wird ein Fragetechnik angewendet, welches auf der Beantwortung zweier Fragen beruht – der funktionalen und der dysfunktionalen Frage.[4]

Die funktionale Frage

Die funktionale Frage ist positiv formuliert und bezieht sich auf die Reaktion der Kund:innen, wenn ein Produkt die jeweils abgefragte Eigenschaft besitzt.

Zum Beispiel:
Was würden Sie sagen, wenn das Produkt bzw. die Dienstleistung über das Merkmal XY verfügen würde?

Die dysfunktionale Frage

Die dysfunktionale Frage ist negativ formuliert und bezieht sich auf die Reaktion der Kund:innen, wenn diese Eigenschaft nicht vorhanden ist.

Zum Beispiel:
Was würden Sie sagen, wenn das Produkt bzw. die Dienstleistung NICHT über das Merkmal XY verfügen würde?

 

Basisfaktoren umfassen Eigenschaften, die von der Kundschaft als Muss für das Produkt vorausgesetzt, aber nicht explizit gefordert werden. Aus diesem Grund werden sie als „Basic“ oder „Must-Be“ bezeichnet. Da diese Faktoren als selbstverständlich erachtet werden, wirkt sich ihr Vorhandensein nicht positiv auf die Kund:innenzufriedenheit aus. Umgekehrt führt ihr Fehlen zu starker Unzufriedenheit.

Ein Beispiel dafür wären die Räder eines Fahrzeugs.

Anders verhält es sich mit den Leistungsfaktoren. Die Zufriedenheit der Kundschaft wächst proportional zum Erfüllungsgrad dieser Anforderungen. Je mehr ein Leistungsattribut erfüllt ist, desto positiver wirkt es sich auf die Kund:innenzufriedenheit aus und umgekehrt. Leistungsfaktoren fungieren häufig als Vergleichskriterium unterschiedlicher Produkte, Angebote oder Dienstleistungen und werden explizit von Kund:innen erwartet.

Ein Beispiel wäre ein Automotor mit besonders starker Leistung.

Begeisterungsfaktoren haben den größten Einfluss auf die Zufriedenheit der Kundschaft. Sie übersteigen deren Anforderungen, sorgen für Begeisterung und werden, ebenso wie die Basisfaktoren, nicht explizit von der Kundschaft verlangt. Im Gegensatz zu den Basisfaktoren werden sie aber nicht vorausgesetzt und lösen deswegen keine Unzufriedenheit aus, wenn sie nicht vorhanden sind. Durch Begeisterungsfaktoren können sich Produkte und Dienstleistungen deutlich von der Konkurrenz abheben. Bereits kleine Leistungssteigerungen können zu einer überproportionalen Steigerung der Kund:innenzufriedenheit führen. Allerdings sind Begeisterungsfaktoren nur schwer zu ermitteln.

Ein Begeisterungsfaktor im Auto könnte eine Sitzheizung sein.

Weitere Bestandteile

Als ergänzende Faktoren können auch Questionable, sowie Indifferente und Reverse Merkmale betrachtet werden.

Questionable weisen auf unlogische Antworten hin und treten auf, wenn sowohl die funktionale Frage als auch die dysfunktionale Frage positiv beziehungsweise negativ beantwortet werden.

Ein Beispiel ist die positive Einschätzung eines sowohl hohen als auch geringen Kraftstoffverbrauchs eines Autos.

Indifferente Merkmale spielen für das Kano-Modell lediglich eine untergeordnete Rolle, da das Vorhandensein oder Fehlen dieser Attribute weder positive noch negative Auswirkungen auf die Nutzungszufriedenheit hat.

Es macht beispielsweise keinen Unterschied, ob das Gaspedal eines Fahrzeugs blau oder schwarz ist. 

Bei Reversen Merkmalen sorgt ein hoher Erfüllungsgrad für Unzufriedenheit bei der Kundschaft. Ein nicht Erfüllen der Attribute führt häufig, aber nicht zwangsläufig zu einer Steigerung der Kund:innenzufriedenheit.

Autos mit besonders viel Hightech und Elektronik können auch Unzufriedenheit auslösen, da beispielsweise die Bedienung als zu kompliziert empfunden wird.[5], [6]

 

Das Kano-Modell einfach erklärt

Bessere User Experience dank Kano-Modell

Wer weiß, was die Kund:innen begeistert, kann Features bewusst einsetzen, um einen Wettbewerbsvorteil zu erlangen oder die Qualität des Produktes zu verbessern. Zudem lassen sich durch die Steigerung der User Experience unternehmerische Ziele als auch die Interessen der Kundschaft kombinieren. Das Kano-Modell ist eine geeignete Methode, um neue Konzepte, Ideen und Features zu testen und zu bewerten. Zusätzlich vermittelt es ein umfassendes Verständnis für die verschiedenen Anforderungen der Kundschaft, indem es das Verhältnis zwischen Produktanforderung und Kund:innenzufriedenheit abbildet. Kurz gesagt: durch das Kano-Modell lernen Sie die Wünsche und Ansprüche Ihrer Kund:innen kennen, welche sie gewinnbringend für die Verbesserung der User Experience Ihrer Produkte und Dienstleistungen einsetzen können.[7], [8]

Überzeugt?

Sie wollen gleich loslegen und die Zufriedenheit Ihrer Kundschaft mittels Kano-Modell herausfinden? Wir haben Ihnen eine kleine Übersicht mit weiterführenden Informationen zusammengestellt.

Aufgepasst? Testen Sie sich selbst!

Quellen

Literatur

  1. Burmeister, Michael: User Experience = Usability plus X? Online unter https://www.uid.com/de/aktuelles/user-experience-usability [Abruf am 15.11.2022]
  2. DIN EN ISO 9241-210, Ergonomie der Mensch-System-Interaktion. Teil 210, Menschzentrierte Gestaltung interaktiver Systeme (ISO 9241-210:2019)
  3. Richter, Michael; Flückiger, Markus (2016): Usability und UX kompakt. Produkte für Menschen. 4. Auflage. Berlin, Heidelberg: Springer Vieweg (IT kompakt)
  4. Graser, Laura; Nirschl, Marco (2020): Steigerung der Kundenzufriedenheit durch Gestaltung von Artikeldetailseiten am Beispiel von WITT WEIDEN. Amberg-Weiden: Ostbayerische Technische Hochschule (OTH) (Weidener Diskussionspapiere, Nr. 75 (Juni 2020))
  5. t2informatik GmbH (2022): Kano-Modell. Online unter https://t2informatik.de/wissen-kompakt/kano-modell/ [Abruf am 09.12.2022]
  6. Legend (2021): Kano-Modell ganz einfach erklärt. Video publiziert am 14.08.2021 auf YouTube. Online unter https://www.youtube.com/watch?v=j4aJK5ThyNI [Abruf am 20.12.2022]
  7. Pfeifer, Anne (2018): Vorteile und Nachteile der Kano-Methode. Zuletzt aktualisiert am 02.05.2018. Online unter https://usertimes.io/2018/05/02/kano-vor-und-nachteile/ [Abruf am 09.12.2022]
  8. Rehmann, Nico (2021): Was ist User Experience? Zuletzt aktualisiert am 05.08.2021. Online unter https://www.cio.de/a/was-ist-user-experience,3661318 [Abruf am 15.11.2022]

Abbildungen

Was hat User Experience mit SEO zu tun?

Autor*innen: Robin Alo und Davud Kilic

SEO ist undenkbar ohne User Experience! Warum? Das werden wir Ihnen in diesem Blogbeitrag aufklären. Viele glauben, dass SEO und User Experience zwei getrennte Dinge sind, jedoch haben sie viel mehr miteinander zu tun als man denkt. Vorerst wollen wir auf die Begrifflichkeiten SEO (Search Engine Optimization) und User Experience (Benutzererfahrung) eingehen, um ein klares Verständnis darüber zu haben.

User Experience – Deutsch: “Benutzererfahrung”

Warum SEO nicht ohne User Experience funktioniert

SEO rückt die User und nicht die Suchmaschinen, ins Zentrum. Bedeutet also, die Optimierung der User-Erfahrung wird in den Fokus gestellt und nicht die Suchmaschinenoptimierung.

Um das Nutzungserlebnis so schön wie möglich zu gestalten, muss die Journey ganz betrachtet werden. Dies beginnt schon mit der Google-Suche, indem der Nutzer seine Anfrage beginnt. Das Suchergebnis entscheidet, ob der Nutzer auf der Website landet und ob er sie weiter nutzen möchte. Die Qualität und Darstellung, welche den Nutzer weiter anregt oder abschreckt, sind sehr wichtige Aspekte in der Erstellung.

1. User Experience & SEO

UX – User Experience

Die User Experience beschreibt, wie sich Menschen beim Navigieren auf einer Website, bei der Nutzung einer mobilen App oder bei der Interaktion mit digitalen Produkten oder Diensten eines Unternehmens fühlen. Dazu gehören die Benutzeroberfläche, Benutzerfreundlichkeit und Benutzerforschung.

Was umfasst User Experience alles?

Designs für außergewöhnliche User Experience zielen darauf ab, den Endanwender glücklich zu machen. Daher muss ein Unternehmen ein klares Verständnis über die Bedürfnisse und Prioritäten der Nutzer haben, bevor ein UX realisiert werden kann. Anhand einer detaillierten Benutzerforschung sind UX-Designer in der Lage, die Funktionalität und den Wert jedes Aspekts der UX zu bewerten.

2. SEO – Suchmaschinenoptimierung

Englisch: “Search Engine Optimization”

SEO steht als Abkürzung für Search Engine Optimization und bezeichnet alle Maßnahmen technischer und inhaltlicher Natur, um die Rankings einer Website und deren Sichtbarkeit in den Ergebnislisten von Suchmaschinen zu verbessern.

Die Suchmaschinenoptimierung kann aufgeteilt werden in Onpage SEO und Offpage SEO und ist Teil des Online Marketings. Es dient der Verbesserung der User Experience.
Hier könnt ihr euch die Basics von SEO auch einfach angucken:

SEO Basics

Onpage und Offpage

Diese zwei großen Bereiche definiert die SEO. Maßnahmen, die auf der Website selbst durchgeführt werden, betrifft die Onpage-Optimierung. Bereiche außerhalb der Website werden durch die Offpage-Optimierung gedeckt.

Onpage

Technische Optimierung

  • Verbesserung von Texten mit relevanten Begriffen und Mehrwertbeschaffung für die User
  • Seite wird durch einfügen von Bildern oder Meta-Angaben besonders relevant für ein Thema

Technische Optimierung

  • Optimierungen am Server, Quellcode oder CMS

Mobile Optmierung

  • Optimierung einer Website für mobiles Endgerät
Offpage

Linkaufbau

  • Maßnahmen zur Steigerung der Domain-Popularität, zum Erhalt von mehr Backlinks
  • Trust der Website soll erhöht werden

Steigerung der Sichtbarkeit

  • Content Marketing und Social Media kann Sichtbarkeit im Netz verbessern

3. Ziele von SEO

Das Erreichen von Top-Positionen in den Suchergebnissen ist das Ziel der Search Engine Optimization. Je nach Art der Website können jedoch noch weitere Ziele definiert werden, wie zum Beispiel:

  • höhere Umsätze und mehr Gewinn bei Online Shops und anderen E-Commerce-Websites
  • Steigerung der Markenbekanntheit
  • Erhöhung der Reichweite
  • Verstärkung der Marktdurchdringung
  • Schaffung eines zusätzlichen Absatzkanals

Umgesetzt bedeutet das für einen Online-Shop den Umsatz überwiegend steigern zu wollen, im Gegensatz zu einem Blogbeitrag, indem die Reichweite erhöht werden soll.

4. Google definiert diese 5 Search Intentionen

  • 1. Visit in Person
    Adresse oder Ort wird gesucht
  • 2. Website
    Bereits bekannte Website soll gefunden werden
  • 3. Do
    Aktion wird angestrebt (Kauf, Download, Installation etc.)
  • 4. Know Simple
    Suche nach Information, die in ein bis zwei Sätzen beantwortbar ist
  • 5. Know
    Suche nach Informationen zu komplexeren Themen

5. Die drei Phasen der Google Suche

  1. Crawling: Google lädt Text, Bilder und Videos von im Internet gefundenen Seiten mit automatischen Programmen herunter – diese werden Crawler genannt.
  2. Indexierung: Google analysiert die Text-, Bild- und Videodateien auf der Seite und speichert die Informationen in einer großen Datenbank, dem Google-Index.
  3. Bereitstellung von Suchergebnissen: Wenn ein Nutzer eine Suchanfrage eingibt, gibt Google Informationen zurück, die für die Suchanfrage des Nutzers relevant sind. Quelle: https://developers.google.com/search/docs/fundamentals/how-search-works?hl=de#crawling

“Information is only useful when it can be understood.” – Muriel Cooper

-https://www.media.mit.edu/posts/muriel-cooper-lasting-imprint/

6. Warum User Experience mit SEO zusammenhängt

User Experience und SEO haben dieselben Ziele, die da wären:

  • Dem Nutzer das geben, was er braucht
  • Dem Nutzer die beste Such- oder Benutzererfahrung geben

UX-Designer setzen auf Interaktionen und Storytelling, um ein auf den Nutzer zugeschnittenes Erlebnis zu vermitteln. Auf der anderen Seite verlassen sich SEO-Experten auf Suchdaten direkt von den Nutzern, um das gleiche Erlebnis zu vermitteln. SEO hat die Daten, die UX braucht. UX hat das Webdesign-Gerüst, welches SEO braucht. Das zeigt, dass die Begriffe miteinander korrelieren.

Die Optimierung von Websites für die Suchmaschinen und die Gestaltung des Nutzererlebnisses führen also zu den selben Zielen.

Ähnliche Artikel

Quellen:

Picture by UX Indonesia on Unsplash

Picture by Duncan Meyer on Unsplash

Photo the white label (05. April 2018): SEO Teil 1 – die wichtigsten OnPage Rankingfaktoren für deinen Ticketshop. Online unter https://the-white-label.com/seo-onpage-rankingfaktoren-fuer-deinen-ticketshop/. Abruf am 23.12.2022

Liferay (2022): Was ist User Experience?. Online unter https://www.liferay.com/de/resources/l/user-experience. Abruf am 18.12.2022

Pereira, Joash (23. Juni 2020): Importance of UX in SEO. In: Medium. Online unter https://medium.com/edtech-in-depth-ischoolconnect/importance-of-ux-in-seo-7b0317404655. Abruf am 16.12.2022

LaFleur, Griffin (2022, April): Search engine optimization (SEO). Techtarget network. Online unter https://www.techtarget.com/whatis/definition/search-engine-optimization-SEO. Abruf am 22.12.2022

p2 media (2023): Suchmaschinenmarketing – die SEO Strategie für B2B. Online unter https://www.p2media.de/news/suchmaschinenmarketing-die-seo-strategie-fuer-b2b/. Abruf am 03.01.2023

Was hat User Experience mit SEO zu tun?

Kombination von User Experience und SEO

Autor*in: Lea Weiß


Beschäftigt man sich mit der Erstellung von Webseiten, begegnen einem früher oder später auch die Begriffe User Experience (UX) und Search Engine Optimization (SEO). Wenn Du diese Begriffe noch für komplettes Neuland hältst, bist Du hier genau richtig. Beleuchten wollen wir dabei die Kombination von User Experience und SEO. Nach einer kurzen Einführung in das Thema werden wir anhand einiger entscheidender Hintergründe nachvollziehen, weshalb User Experience und SEO immer stärker im Zusammenhang betrachtet werden.

Aufgrund der beobachteten Annäherung von SEO und User Experience gewinnt auch Search Experience Optimization (SXO) an Bedeutung. Denn diese Bezeichnung vereint beide Disziplinen. Dabei eröffnet sich ein spannender Themenkomplex, der hoffentlich auch einige Mitstudierende des Informationsmanagements motiviert, sich (noch) näher mit User Experience und SEO zu beschäftigen.

Anschließend an diesen Beitrag kannst Du in einem kleinen Quiz Dein neues Wissen über SEO und UX testen!

Inhaltsverzeichnis

  1. Was sind User Experience und SEO?
    1. User Experience (UX)
    2. SEO
  2. Entwicklung von SEO
    1. SEO – Black Hat-Methoden
    2. Reaktionen von Google auf unerwünschte SEO
  3. Kombination von UX und SEO
    1. Auswirkungen der Google-Updates – Was hat UX mit SEO zu tun?
    2. UX und Nutzersignale
    3. Kombination von User Experience und SEO im UX Design
  4. Fazit
  5. Quiz
  6. Mehr zu UX und SEO
  7. Quellen

Was sind User Experience und SEO?

User Experience und SEO, was ist das überhaupt? Zunächst schauen wir uns die Definition beider Begriffe an. Anschließend wollen wir mit diesem Hintergrundwissen in das zentrale Thema, der Kombination von User Experience und SEO, einsteigen.

User Experience (UX)

User Experience einerseits, abgekürzt auch einfach UX, betrachtet die Nutzererfahrung auf allen Ebenen. Das bedeutet, alle Empfindungen und Reaktionen vor, während und nach der Nutzung eines beliebigen Produkts beeinflussen die User Experience.[1] In Verbindung mit SEO stehen in diesem Beitrag Webseiten und deren Gestaltung im Mittelpunkt. Das Ziel von UX-Expertinnen und UX-Experten ist, die Produktnutzung so angenehm und unterhaltsam wie möglich zu gestalten.

Ein weiterer, häufig gebrauchter Begriff im Zusammenhang mit Web Design ist Usability. Um User Experience zu verstehen ist es hilfreich, Usability erst einmal getrennt davon zu betrachten. Gemeint ist damit die Gebrauchstauglichkeit und somit Nutzerfreundlichkeit einer Webseite aus technischer Sicht. Demnach wird untersucht, ob alle Elemente ohne Komplikationen funktionieren und zu finden sind. Häufig fällt allerdings nur eine negative Usability auf, wie einigen Beiträgen zu diesem Thema zu entnehmen ist. Gute Gebrauchstauglichkeit hingegen bleibt eher unauffällig. Folglich sind keine Beschwerden bezüglich der Nutzbarkeit schon beinahe positiv zu bewerten.[2]

Im Gegensatz dazu ist für die Nutzererfahrung eine ganzheitliche Betrachtung von Bedeutung. Technische Aspekte wie die Gebrauchstauglichkeit spielen zwar auch eine Rolle, jedoch niemals die alleinige. Werden demzufolge ästhetische Gesichtspunkte und Emotionen im Einklang mit der technischen Nutzbarkeit gesehen, geht es um User Experience.[1]

SEO

SEO andererseits steht für Search Engine Optimization, auf Deutsch Suchmaschinenoptimierung. Dabei beschäftigt man sich mit der Verbesserung der Auffindbarkeit von Webseiten in Suchmaschinen. Darüber hinaus steht diese Abkürzung gelegentlich auch als Synonym für die Person eines Suchmaschinenoptimierers (SEO Manager).

Vereinfacht ausgedrückt beschreibt der Begriff User Experience die Menschensicht und SEO die Maschinensicht auf Web-Inhalte. Doch welche Gemeinsamkeiten gibt es zwischen diesen beiden Gestaltungseinflüssen?

Entwicklung von SEO

Das Ziel dieses Beitrags ist, wie zuvor erwähnt, Berührungspunkte von SEO und UX herauszustellen. Dafür schauen wir uns zunächst die Entwicklungsgeschichte von SEO an. Als Beispiel wollen wir uns im Folgenden auf Google beziehen. Wie unten abgebildeter Karte zu entnehmen ist, ist Google unangefochtener weltweiter Marktführer. Eine Ausnahme stellt China dar, mit seiner eigenen Suchmaschine Baidu.

Kombination von User Experience und SEO
Suchmaschinen Marktanteil weltweit, Stand: Januar 2021;
Quelle: StatCounter Global Stats – Search Engine Market Share; Lizenz: CC BY-SA 3.0; Originaldatei .png geändert zu .jpg

Der weltweite Marktanteil von Google betrug im Januar 2021 91.86 % (s. o.). In Deutschland erreichte Google einen Anteil von 91.56 %. Als zweitgrößte Suchmaschine wird in Deutschland Bing genutzt (5.23 %). Weitere Suchmaschinen mit geringeren Anteilen sind Ecosia, DuckDuckGo oder Yahoo.[3]

SEO – Black Hat-Methoden

Die Reihenfolge (Ranking) in den Suchmaschinen-Trefferseiten (SERPs) wird anfangs in erster Linie von technischen und inhaltlichen Merkmalen beeinflusst. Markus Hübener hat diese beispielsweise in einem “9-Punkte-Optimierungsplan” im Jahr 2009 beschrieben.[4] Auffälligerweise sind darin aber noch keine eindeutigen Kriterien für User Experience mit einbezogen.

Ursprünglich wurden also die Technik, der Inhalt (Content) und auch Verlinkungen als Basiskriterien für das Ranking herangezogen. Aus technischer Sicht sind dabei etwa die Ladegeschwindigkeit und Indexierbarkeit durch Webcrawler zu beachten. Als inhaltliche Aspekte sind dafür vor allem die Semantik und Suchwörter (Keywords) heranzuziehen. Bei den Links sind dann Rückverweise auf die eigene Webseite (Backlinks) von besonderem Interesse.[5] Die Kenntnis darüber führt jedoch auch zu bewussten Manipulationen von Webseiten, um ein hohes Ranking in der Ergebnisliste zu erzielen. Unerlaubte Optimierungsarten dabei werden auch Black Hat genannt. Im Gegensatz dazu werden erlaubte Taktiken als White Hat bezeichnet.

Folgende Verfahren können wir zu den Black Hat-Methoden zählen:

Reaktionen von Google auf unerwünschte SEO

Um betrügerisches Verhalten aufzudecken entwickelt Google seine Algorithmen stets weiter. Infolgedessen werden überoptimierte Webseiten durch Verbannung von den hohen Rankingplätzen abgestraft. Zu den dazu gehörigen Meilensteinen zählt das sogenannte “Panda-Update” im Jahr 2011. In Bezug auf die Content Farmen war es anfangs auch als “Farmer Update” bekannt. Darauf folgte ein besonders wichtiges Update aus dem Jahr 2015, genannt “RankBrain”. Seitdem beeinflusst es vor allem die Sprachsuche unter erstmaligem Einsatz von Machine Learning. Nicht zuletzt verbesserte Google mit dem “Fred-Update” im Jahr 2017 den Bewertungsalgorithmus für die Inhaltsqualität von Webseiten erneut.[6], [7]

Tutorial: Prototype erstellen mit Figma – So funktioniert’s!

Beitragsbild

Autor*in: Anna Selitski und Anna-Lisa Voigt


User Experience Scala
Von einer very bad zu einer exzellenten User Experience ©Olivier Le Moal – stock.adobe.com

Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen.  Aber wie funktioniert das Erstellen von einem Prototype mit Figma? Und was sind Figma und die User Journey überhaupt? Das und weitere spannende Informationen zu diesem Thema zeigen wir dir in dem folgenden Beitrag!

Dieser Beitrag im Überblick:

Eine Einführung zu Figma

Fangen wir erst einmal mit Figma an. Figma ist ein Web-basiertes Programm, welches zum Designen von Screens für eine App oder Webseite gedacht ist. Vielleicht kennst du auch das Tool Sketch. Dort kannst du auch leicht und unkompliziert Designs erstellen, jedoch spätestens wenn man zu zweit an einem Projekt arbeitet, kann man sich dort schnell in die Quere kommen. Figma hingegen ermöglicht dir das Designen von Screens mit vier oder mehr Händen! Du fragst dich wie das gehen soll? In Figma können mehrere Designer gleichzeitig an ihrem eigenen Gerät und an derselben Datei arbeiten, ohne sich dabei zu stören.

Fünf Gründe für Figma[1]

Fünf Gründe für Figma - Prototype erstellen
Das sind die wichtigsten fünf Gründe für Figma. ©Song_about_summer – stock.adobe.com

  1. Das Interface von Figma:
    Wer mit Figma arbeitet merkt schnell, dass das Interface dieses Tools von Designern für Designer entwickelt wurde. Aber auch für Anfänger ist das Bedienen der Software, nach ein paar Stunden Einarbeitung, kein großes Problem mehr. Die zahlreichen Shortcuts sind unserer Meinung nach unbezahlbar! Shortcuts? Das sind unzählige Tastenkombinationen für verschiedene Werkzeuge. Somit bleiben dir Klicks und Zeit erspart!
  2. Schnell zum Ergebnis mit wenig Aufwand:
    Wie schon erwähnt ist Figma ein nutzerfreundliches Tool und du kannst den Umgang mit dem Programm schnell lernen. Aber kennst du das Problem, wenn du in einer großen Gruppe arbeitest und du immer alles hin und her schicken musst, um auf dem aktuellsten Stand zu bleiben? Und dann musst du auf das Dokument deines Gruppenmitglieds warten, um mit deiner Arbeit anfangen zu können. Tja, bei Figma kommt sich bei einer Gruppenarbeit keiner mehr in die Quere, denn jeder kann an seinem Gerät in der gemeinsamen Datei arbeiten! Wir finden das großartig, denn so kann jeder die Schritte des anderen verfolgen und dementsprechend seine Arbeit anpassen. Somit musst du nicht mehr auf die anderen warten, bis du mit deiner Aufgabe anfangen kannst.
  3. Verknüpfungen:
    Jetzt fragst du dich sicherlich was Figma nicht kann? Figma ist ein Tool für die interaktive Gestaltung von Screens, hat aber auch seine Schwächen. Diese umgeht Figma mit Verknüpfungen zu anderen Tools, wie Sketch oder Photoshop. So kannst du ganz leicht Funktionen von anderen Programmen über Figma verwenden.
  4. Für jeden und zu jeder Zeit verfügbar:
    Du verspürst mitten in der Nacht den Drang, an deinen Screens weiterzuarbeiten, aber dein Gerät liegt auf der Arbeit? Mit Figma kannst zu jederzeit und überall auf deine Dateien zugreifen, solange du einen Internetzugang und deine Zugangsdaten hast.
  5. Immer aktuell sein:
    Das lästige Problem mit der Aktualität der Dateien ist mit Figma Geschichte. Kein ständiges Fragen mehr, welche Version die aktuellste ist, denn es gibt nur noch die eine Version, die online ist! Auch das selbstständige Speichern von Figma erleichtert deine Arbeit und Ergebnisse können nicht mehr verloren gehen. Perfekt, oder?!

Prototype, User Journey – Was genau ist das?

Ein Klickdummy wird für ein Projekt erarbeitet
Du kannst einen Prototype erstellen, um die Funktionen und den Sinn von Interaktionsmodulen deiner zukünftigen App zu zeigen.  ©artursfoto – stock.adobe.com

Einen Prototype benötigst du dann, wenn du Funktionen und Sinn von bestimmten Buttons und Interaktionsmodulen zeigen möchtest. Du kannst einen Klickdummy auch für die Darstellung der User Journey, also der Weg, den der Nutzer in deiner App oder auf deiner Webseite beschreiten soll, zeigen[2].
Sowas ist dann nützlich, wenn du zum Beispiel die Screens  deinem Auftraggeber vorstellen möchtest. Mit einem Klickdummy kann sich der Auftraggeber besser vorstellen, welche Funktionen ein Button auslöst, wenn der Nutzer darauf klickt. Außerdem ist so ein Prototype auch dann sinnvoll, wenn du deine Logik der User Experience überprüfen möchtest. Denn es kann schon mal vorkommen, dass man zum Beispiel vergisst, einen Zurück-Button einzubauen und der Nutzer nicht mehr den Weg nach Hause – also zur Home Seite – findet.

Tutorial: Wie erstelle ich einen Prototype in Figma?

Jetzt fragst du dich wie das gehen soll? Kein Problem, zu Beginn musst du dafür die Figma Datei öffnen. Wenn  du dort noch keine Screens angelegt hast, machst du das jetzt erst einmal.  Du wirst die Screens benötigen, welche du anschließend miteinander zu einem Prototype verbinden möchtest.

Schritt 1:

Hast du die Screenshots angelegt? Falls du mit ja antwortest, klickst du einfach oben rechts auf das Symbol Prototype. Du weißt nicht genau wo? Siehst du den orangen Pfeil im Screenshot? Er zeigt dir genau den Bereich, den du auswählen solltest. Der Prototype Bereich öffnet sich anschließend nach der Auswahl rechts in Figma (Schritt 1).

Prototype erstellen
Schritt 1: Klicke oben rechts auf Prototype (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 2:

Jetzt klickst du  auf das gewünschte Objekt, also die Stelle, wo der Nutzer hinklicken wird (Schritt 2).

Prototype erstellen über Figma
Schritt 2: Wähle das gewünschte Objekt aus (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 3:

Nun siehst du um das ausgewählte Objekt herum den Umriss eines blauen Vierecks. Klicke auf den Punkt, der sich auf der rechten Kante des Vierecks befindet und halte dabei deine Maustaste gedrückt. Ziehe nun deine Maus auf den nächsten Screen, der danach angezeigt werden soll. Jetzt kannst du einen blauen Pfeil sehen, der von dem ausgewählten Objekt auf den nächsten Screen zeigt (Schritt 3).

Prototype erstellen
Schritt 3: Der blaue Pfeil zeigt auf den nächsten Screen Kalender. Jetzt sind die Screens miteinander verbunden (zum Vergrößern anklicken) ©Voigt; Selitski

In dem von uns dargestellten Beispiel, wählten wir die App Kalender von dem Screen Startscreen aus. Die Kalenderapp soll sich nun bei einem Klick oder Touch mit dem Finger öffnen, dies zeigt jetzt der blaue Pfeil, welcher auf den nächsten Screen Kalender zeigt.

Auf diese Art und Weise kannst du nun weitere Screens mit den vorherigen verbinden und so die User Journey des Nutzers in deiner App oder Webseite darstellen. Genauso kannst du ganz schnell und einfach einen Prototype in Figma erstellen!

Schritt 4:

Pass dabei auf, dass du die richtigen Objekte mit den richtigen Screens zusammenführst. Sodass der Prototype die richtige, und von dir gewünschte, Reihenfolge anzeigt. Um die richtige Reihenfolge zu kontrollieren, kannst du dich an den blauen Pfeilen orientieren (Schritt 4).

Prototype erstellen
Schritt 4: Kontrolliere die Reihenfolge deines Prototypes anhand der blauen Pfeile (zum Vergrößern anklicken) ©Voigt; Selitski

In unserem Beispiel zeigen wir dir, dass wir vom Startscreen anfangen und auf das App-Symbol des Kalenders drücken. Daraufhin öffnet sich der Kalender, jetzt wollen wir einen Kalendereintrag hinzufügen. Dafür drücken wir auf das runde Plus-Icon und der Kalendereintrag öffnet sich.

Schritt 5:

Wenn du alle Schritte erfolgreich erledigt hast und die Pfeile soweit stimmen, ist es an der Zeit, den Klickdummy zu starten. Dafür klickst du einfach oben links, bei dem ersten Screen, auf das blaue Viereck mit dem weißen Dreieck (Schritt 5).

Prototype erstellen - Schritt 5
Schritt 5:  Klick nun oben links auf das blaue Viereck (zum Vergrößern anklicken) ©Voigt; Selitski

Daraufhin öffnet sich in einer neuen Datei der, von dir erstellte, Prototype. Jetzt kannst du auf die Objekte klicken, die du zuvor ausgewählt hast. Wenn daraufhin der nächste angezeigte Screen der Richtige ist, stimmt deine User Journey überein und der Prototype ist bereit für die Vorstellung bei deinem Auftraggeber!

Prototype erstellen – Alle Schritte auf einem Blick

  1. Klicke auf Prototype oben rechts bei den Werkzeugtools.
  2. Wähle das gewünschte Objekt, welches du in dem Prototype anklicken möchtest.
  3. Klicke auf den Punkt innerhalb des blauen Vierecks und ziehe diesen zum gewünschten Screen.
  4. Wiederhole jetzt die gleichen Schritte (Schritt 2) für die nächsten Screens.
  5. Klicke oben rechts auf den Pfeil, um den Prototype zu starten.

Etwas hat nicht geklappt, oder hast du vielleicht einen Schritt vergessen? Keine Panik! Im folgenden Video Prototype / Klickdummy über Figma erstellen zeigen wir dir, die einzelnen Schritte per Desktopaufnahme.

Das Prototype-Testing mit Figma Mirror

Du kannst den Klickdummy und die User Journey auch mit der App Figma Mirror testen. Dies bringt dir den Vorteil, dass du deine erstellten Screens auch auf deinem Smartphone sehen kannst. So kannst du das Look and Feel deiner Screens auf deinem Smartphone bekommen. Auch die Größe von deinen Objekten und Texten kannst du so überprüfen.

Dafür brauchst du nur Figma Mirror aus dem Play Store oder dem App Store auf dein Smartphone/Tablet herunterladen. Anschließend meldest du dich mit deinen gewohnten Daten aus Figma an. Zu guter Letzt klickst du in deiner Arbeitsmappe auf den Startscreen deines Prototypes, dieser wird dir nun auf deinem Smartphone angezeigt. Jetzt kannst du auf deine ausgewählten Objekte tippen und so überprüfen, ob der darauffolgende Screen der Gewünschte ist und ob die User Journey mit der gezeigten Reihenfolge übereinstimmt.

Ein Tipp von uns: Wenn du die User Journey von einer App darstellen möchtest, nimm am besten dafür dein Smartphone. Möchtest du  dir aber eine Webseite anschauen, welche noch nicht responsiv ist, verwende dafür lieber die App auf einem Tablet.

Viel Erfolg!

great user experience
Mit einer exzellenten User Experience hast du auch zufriedene Nutzer ©blacksalmon – stock.adobe.com

Wir hoffen, dass wir dir mit der Anleitung für die Erstellung eines Prototypes mit Figma helfen konnten und du damit deine User Journey darstellen kannst!


Quellen

Auf die [Hochzahl] klicken, um zum zugehörigen Absatz zurückzukehren.

1 Vgl. Ornella (2018): Designen mit vier Händen: 5 Gründe warum du Figma brauchst. Online unter https://www.dieproduktmacher.com/blog/designen-mit-vier-haenden-5-gruende-warum-du-figma-brauchst [Abruf am 06.06.2020]

2 Vgl. usability.de (o. J.): User Experience ganzheitlich verstehen und optimieren. Online unter https://www.usability.de/leistungen/methoden/user-journey-mapping.html [Abruf am 06.06.2020]


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.