Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Website-Fehler: Der Teufel steckt im Detail
35 Plays6 years ago
Wenn Funktionen auf deiner Website technisch funktionieren heißt das noch lange nicht, dass deine Besucher diese verwenden können. In dieser Episode lernst du, wie du deine Website mit vorbeugenden Maßnahmen vor solchen Fehlern schützt.
Nicht vergessen: Alle 14 Tage gibt es eine neue Episode vom “Podcast für gute Websites”. Jetzt abonnieren und keine Folge mehr verpassen!
- Erfahre in dieser Episode warum automatisierte Website-Tests nicht ausreichen um die Usability deiner Website zu optimieren
- Neben dem Funktions-Monitoring, das du durch Pingdom Transaction Monitoring integrieren kannst, solltest du die Usability deiner Funktionen nicht außer Acht lassen
- Lerne wie du bestimmte Tools einsetzen solltest um Benutzer-Problemen entgegenzuwirken, die dir von einer Website-Analyse nicht aufgezeigt werden
Nun viel Spaß beim Zuhören und Ausprobieren! Wie immer gilt, deine Fragen und Anregungen kannst du André gerne via podcast@gutewebsites.de oder auf Twitter mit seinem Handle @gutewebsites kontaktieren.
Recommended
Transcript
Einführung: Grenzen automatisierter Tests
00:00:01
Speaker
Wissensdurst. Der Podcast für gute Websites mit André Goldmann.
00:00:19
Speaker
Einen wunderschönen guten Morgen, Mittag, Abend, wann auch immer du diesen Podcast eingeschaltet hast. Ich freue mich, dass du dabei bist. Es geht heute mal darum, warum automatisierte Tests für Websites nicht ausreichen und warum ich dieser Meinung bin.
00:00:35
Speaker
Ja, ein bisschen provokanter Titel natürlich für all die, die Software herstellen und solche Tests eben anbieten oder eben auch für Software-Entwickler, die über Unit-Tests eben ihre Funktionen durchtesten. Das ist auch alles schön und gut und das hat auch alles seine Daseinsberechtigung. Es ist jedoch so, dass diese Tools wie zum Beispiel Pingdom oder auch Uptrends
00:00:58
Speaker
nicht alles können und hier kommen wir nämlich schon in die Sache, die ich eben genauer durchleuchten möchte. Sie können zwar am Ende eine Funktion komplett durchgehen, was sie eben aber nicht können, ist visuelle Fehler entdecken, weil sie eben am Ende etwas machen, was ich einmal definiert habe oder eben aufgezeichnet habe und die laufen dann immer diesen Prozess durch und wenn es keinen Fehler gibt, dann gibt es eben keinen Fehler, das ist alles in Ordnung.
00:01:24
Speaker
Das Problem ist an der Stelle eben nur, dass sie nicht darauf achten, wie diese Funktionalität eben läuft, sondern sie achten nur generell darum, dass sie eben läuft. Worauf möchte ich hinaus?
Sichtbarkeitsprobleme bei Formulareingaben
00:01:35
Speaker
Ich habe letzte Woche eine Nachricht bekommen auf LinkedIn von einem Leipziger Fotografen, Corwin van Kuwede, und er hat mich freundlicherweise darauf aufmerksam gemacht, dass in meiner Newsletteranmeldung auf goodwebsites.de
00:01:49
Speaker
man nichts sieht, wenn man anfängt zu tippen. Und hier ist tatsächlich ein schönes Problem. Mir ist das nie aufgefallen, weil ich in der Regel, wenn ich eine Website entwickle, als Entwickler einer Website, das einmal mache, einmal durchprüfe und danach hat sich das Thema erledigt. So zumindest der normale Fall, wenn man nur eine Website entwickelt. Also damit bitte nicht falsch verstehen, dass ich meine Seiten nicht teste und auch nicht kontinuierlich teste.
00:02:16
Speaker
In dem Fall ist es allerdings so, dass ich nichts weiter erstmal unternommen habe, weil die Anmeldung hat funktioniert über die API von Mailchimp, lief alles dahin, wo es hinlaufen sollte, also alles in Ordnung, Haken dran, könnte man meinen. Das Problem war allerdings, dass ich über Placeholder, also das ist ein, vom HTML5 gibt es für Formular-Inputfelder die Möglichkeit einen
00:02:38
Speaker
einen quasi einen Platzhalter zu definieren, der dann angezeigt wird, solange bis man angefangen hat etwas einzugeben. Und dann kann diesen Platzhalter auch über CSS layouten. Also ich kann dann sagen, der soll ein bisschen hellgrau sein und oder eben schwarz oder was auch immer ihr für eine Farbe da auswählt. Und das Problem bei meiner Anmeldung war, dass man die Placeholder gesehen hat. Aber sobald man angefangen hat zu tippen, wurde die Schrift weiß.
00:03:05
Speaker
Und das ist natürlich ein bisschen schwierig, wenn das Formularfeld einen weißen Hintergrund hat und dann eine weiße Schrift dort integriert wird. Dann weiß ich nämlich nicht, was ich eingegeben habe. Und tatsächlich ist es so, dass ich mehrere Möglichkeiten habe auf meiner Website, wie man sich für mein Newsletter anmelden kann. Und das hat dann die Folge, dass natürlich immer so nach und nach auch Anmeldungen durchgelaufen sind.
00:03:27
Speaker
Was für mich ja, sag ich mal, so sinngemäß sagt, ja, meine Anmeldung scheint zu funktionieren, weil es schaffen ja Leute, sich anzumelden. Was allerdings nicht beachtet wurde und was ich tatsächlich auch sträflicherweise nicht beachtet habe, dass ich mir da keinen Zielwert pro Woche oder pro Tag mal irgendwo niedergeschrieben habe.
00:03:49
Speaker
Es liegt einfach daran, dass ich viele andere Baustellen auch noch habe und da mein Prio nicht so ganz hoch lag bei diesem Thema. Und das hat eben dazu geführt, dass ich ein sehr stark integriertes Element habe auf meiner Website, was nicht funktionieren kann.
00:04:05
Speaker
oder mit einer hohen Wahrscheinlichkeit nicht benutzt
Warum automatisierte Tests nicht ausreichen
00:04:07
Speaker
wird. Vielleicht schon benutzt wird, aber eben nicht vollständig ausgeführt wird. Wenn ich jetzt aber so ein Tool wie Pingdom oder wie Abtrends einmal installiert habe und sage, okay, ich habe das jetzt einmal konfiguriert, ich gehe jetzt hier durch, stelle meine Software, in dem Fall jetzt Pingdom bei mir, so ein, dass das Formular einmal am Tag oder mehrfach am Tag geprüft wird.
00:04:29
Speaker
dann macht das das dieses Tool auch. Also das geht dann durch, füllt einen Namen ein, füllt auch eine E-Mail-Adresse aus, klickt bei Datenschutz auf OK und klickt dann auf den Absenden-Button oder Abonnieren-Button. Und solange diese Funktion dann durchläuft, kriege ich keine Meldung, weil es scheint ja technisch zu funktionieren.
00:04:48
Speaker
Diese Software hinterfragt aber nicht, ob man das, was man dort eingibt, lesen kann. Und das ist natürlich für so eine Funktion wie eine E-Mail-Anmeldfunktion essentiell. Wenn ich nicht lese, was ich eingebe oder nicht erkennen kann, dann weiß ich nicht mal, ob ich einen Tipp-Wähler gemacht habe. Am Ende werde ich es nicht ausfüllen. Und das ist eben natürlich ein großes Problem, wenn ich E-Mails verschicken möchte.
00:05:10
Speaker
Und das ist eben der Ansatz, den ich eben in meinem Titel auch so definiert habe.
Die Notwendigkeit manueller Überprüfungen
00:05:16
Speaker
Automatisierte Tests sind schön, aber ich muss die Sachen, die ich mache, auch regelmäßig von Hand prüfen. Auch da mag der ein oder andere jetzt wieder sein, das mag vielleicht bei einer kleinen Website funktionieren, meiner großen Website, da wird das aber problematisch. Keine Angst, auch dafür habe ich Lösungen natürlich mit in diesem Podcast, weil sonst bräuchtest du ihn nie nicht hören.
00:05:37
Speaker
Es ist so, dass ich vielleicht mal ganz kurz dazu, wie es zu dem Fehler gekommen ist, ich habe die Funktion natürlich nicht so gebaut, dass ich eine weiße Schrift als Input habe, sondern
00:05:49
Speaker
Ich hatte natürlich das mal so eingestellt, wie es auch sein musste. Ich habe allerdings im Nachgang ein anderes Formular integriert, wo ich eben keinen weißen Hintergrund in den Inputfeldern hatte, sondern eher einen dunklen und dort wollte ich eine weiße Schriftfarbe haben. Ja, und dann habe ich da den Fehler gemacht, dass ich eben übers CSS nicht nur dieses eine Formular angesprochen habe, sondern eben leider auch die ganzen Newsletter-Anmeldeformulare.
00:06:16
Speaker
Und ja, somit kam ich zu diesem Problem. Da ich aber selber mich selten für mein eigenes Newsletter anmelde, habe ich diesen Fehler nicht verstellen können, weil ich natürlich nur das neu entwickelte Formular dann nochmal geprüft habe. Das heißt, am Ende müsste ich eigentlich jedes Mal, wenn ich ein Formular durchgehe, auch alle anderen Formulare testen. Das ist natürlich auch nicht wirklich sinnvoll.
00:06:43
Speaker
Sinnvoll schon, aber eben nicht praktikabel, weil je nachdem, wie viel Formulare ihr habt, kann das dann schon mal eine Weile dauern. Deswegen möchte ich jetzt hier eine Möglichkeit vorstellen, wie ihr das zumindest mal umgehen könnt, solange es keine Auffälligkeiten gibt.
00:06:59
Speaker
Und zwar habe ich mir jetzt im Anschluss, nachdem ich natürlich diesen Bug sofort gefixt habe, überlegt, okay, wie kriege ich es denn jetzt hin, dass ich in Zukunft über solche Fehler nicht von Bekannten aufmerksam gemacht werden muss, weil das ist natürlich jemand, der sich hinstellt und sagt, ich mache gute Websites.
Benutzerverhalten mit Google Analytics überwachen
00:07:17
Speaker
Ganz ehrlich, das ist peinlich, das muss laufen. Und da habe ich überlegt, okay, welche Tools hast du eigentlich im Einsatz, die das vielleicht abfedern können oder zumindest dir mal so einen kleinen Alert schicken, wenn es dann da Probleme gibt. Und da lag es nahe, dass ich natürlich mein geliebtes Google Analytics heranziehe. Es gibt dort nämlich eine Funktion.
00:07:39
Speaker
Die nennt sich Benutzerdefinierte Benachrichtigung. Und die könnt ihr genau für so einen Fall benutzen. Das geht folgendermaßen. Ihr habt ja für eure Newsletter im Idealfall ein Conversion-Ziel hinterlegt. Was solltet ihr? Falls ihr es noch nicht getan habt, macht's bitte. Und sobald ihr dieses Ziel einmal angelegt habt, habt ihr ja zumindest mal nach einiger Zeit, je nachdem wie viel Traffic ihr habt,
00:08:06
Speaker
einen gewissen Minimumsatz, wo ihr sagt, okay, in der Woche habe ich meinetwegen durchschnittlich immer mindestens fünf Newsletteranmeldungen oder auch zehn. Die Zahl ist vollkommen variabel, je nachdem, wie eure Website eben performt. Wenn ihr sagt, ihr habt nur zwei, dann eben nur zwei. Das ist vollkommen okay. So, und dieser Minimum-Durchschnittswert, den könnt ihr wiederum in den benutzerdefinierten Benachrichtigungen hinterlegen.
00:08:34
Speaker
und sagen, schick mir bitte immer dann eine E-Mail, entweder täglich oder wöchentlich oder monatlich, wenn meine Zielconversion-Rate des Vorhabens Newsletter-Anmeldung unter den Schwellenwert eben die von euch definierte Zahl rutscht.
00:08:51
Speaker
Und dann kriege ich immer dann, wenn ich eben diese Zahl nicht erreiche, eine entsprechende E-Mail mit dem Hinweis, dass eben hier ein Problem vorliegt. Nicht in der Technik und auch nicht in der Optik, sondern eben, dass dieser Wert nicht erreicht wurde. Ja, und wenn ich diese E-Mail erhalten habe, dann weiß ich natürlich auch, okay, hier scheint irgendwas nicht zu funktionieren, entweder technisch oder auch optisch, und dann kann ich mich um dieses Problem eben kümmern.
00:09:17
Speaker
und schauen, woran es denn liegt. Und das ist eben für mich die Prophylaxe an der Stelle. Ich habe eben ein Tool, was mir zumindest mal nicht die Funktion durchprüft, aber anhand von Daten mir anzeigt, wenn es denn Probleme gibt, egal in welcher Form. Natürlich muss ich dann auch wieder händisch drüber schauen und die Funktion einmal komplett durchgehen, um eben über Schwachstellen aufmerksam zu werden, die vielleicht sich irgendwie im Laufe der Entwicklung eingeschlichen haben
00:09:46
Speaker
ein Plugin-Update bei WordPress hat irgendwas eine Funktion komplett verändert oder da kam irgendeine dazu und dann wurden die Einstellungen verschoben. Es gibt ja die wildesten Dinge, die da irgendwie passieren können, die auch nicht vorhersehbar sind. Und da hilft euch eben diese benutzerdefinierte Benachrichtigung in Google Analytics wunderbar, um eben diese technisch einwandfrei funktionierenden, aber optisch nicht bedienbaren Dinge
00:10:11
Speaker
zu prüfen. Ja, und das ist so mein kleiner Tipp heute für euch. Ich hoffe, der bringt euch was und ihr könnt da einiges mitnehmen. Ich an eurer Stelle würde jetzt direkt mal in die Einstellungen gehen von Google Analytics und da entsprechende Benachrichtigungen einstellen. Ihr könnt das auch noch anderweitig nutzen, zum Beispiel wenn euer organischer Traffic abnimmt oder
00:10:32
Speaker
die Seitenladezeit auf einer bestimmten Unterseite nicht länger als eine Sekunde dauern darf oder, oder, oder. Da gibt es zig Dinge, die ihr damit prüfen könnt. Das Schöne ist, es ist kostenfrei und ihr könnt das über zig verschiedene Dinge euch benachrichtigen lassen, je nachdem, was ihr eben wissen wollt von Google Analytics oder was eben eure Website in irgendeiner Art und Weise kritisch beeinträchtigen könnte.
00:11:00
Speaker
Ich würde mich freuen, wenn ihr wieder einschaltet. Ich habe in die Show notes die Links gepackt, auch zu einigen Tools, die ich nutze für Funktionsmonitoring.
Ressourcen für Website-Monitoring
00:11:09
Speaker
Hab auch da noch mal einen Link reingepackt, wie man zum Beispiel mit WooCommerce für WordPress den Checkout durchgehen kann. Das Schöne ist eben an der Stelle, dass man eben eine Bestellung auslöst, ohne dass sie im System landet. Was immer das Problem ist, bei solchen Funktions-Monitoring-Tools, die lösen eben das komplett aus und am Ende landet irgendwie was in irgendeinem Datensatz drin und das muss man natürlich irgendwie umgehen. Daher hier auch noch mal von mir der entsprechende Link, wie gesagt, in den Show Notes auf www.gutewebsites.de.