Qualitätskontrolle von Apps, Onlineshops und Webseiten

Die Qualitätskontrolle nimmt bei digitalen Projekten einen wichtigen Stellenwert ein. Webwirkung hat sich zum Ziel gesetzt, Ihren Kunden die beste Programmierung und Umsetzung von Apps, Onlineshops und Webseiten zu bieten. Beste Umsetzung bedeutet für uns:

Um diese Ziele zu erreichen, wendet Webwirkung einen erprobten und bewährten QA-Prozess an. Dieser startet nach der Entwicklung und endet im Normalfall mit der Liveschaltung der Webseite.

Als erstes wird das UX-Design mit der entwickelten Webseite auf dem Google Chrome Browser Seite für Seite abgeglichen. In diesem Schritt geht es darum, sicherzustellen, dass die einzelnen programmierten Elemente dem Design entsprechen. Bei der Kontrolle des Designs wird insbesondere auf die Verwendung der korrekten Farben und Schriften geachtet. Der Abgleich zwischen UX-Design und der programmierten Webseite ist aufwändiger als der Abgleich zwischen zwei Browsertypen. Aus diesem Grund wird das Design nur auf einen Browser abgeglichen. Andere Browser- und Gerätetypen werden kontrollieren wir auf Basis von Chrome. Chrome wird als Grundlage verwendet, weil es sich um einen sehr fortschrittlichen Browser handelt und sich so gut allgemeine Probleme erkennen lassen.

Die von Webwirkung umgesetzten Webseiten verwenden das CMS WordPress. Der Inhalt auf der Webseite wird mittels sogenannter Blocks angezeigt. Für die richtige Darstellung ist es daher zentral, dass die Blocks richtig funktionieren. Insbesondere auch dann, wenn es darum geht, inhaltliche Anpassungen zum Beispiel an Texten oder Bilder vorzunehmen. In diesem Schritt wird deshalb mit einer speziell dafür angelegten Block-Übersicht-Seite geprüft, ob alle Blocks grundsätzlich korrekt dargestellt werden. Ein besonderes Augenmerk gilt dabei der Responsiveness. Zusätzlich testen wir, wie die verschiedenen Blocks auf sehr kurze respektive sehr lange Textelemente oder besonders kleine und grosse Bilder reagieren. Dadurch verhindern wir, dass beim Abfüllen der Seite durch den Kunden Fehler auftauchen. Dieser Schritt wird hauptsächlich im Chrome und stichprobenartig unter Berücksichtigung weiterer Browser durchgeführt.

In diesem Schritt prüfen wir sämtliche Links der Webseite. Auf den einzelnen Seiten gesetzte Links müssen an den richtigen Ort – zum Beispiel auf eine Unterseite oder auf eine andere Webseite – verweisen. Wichtig ist dabei, dass sich externe Links immer in einem neuen Tab öffnen, um den Nutzer auf der eigenen Seite nicht zu verlieren. Zudem sollen alle Links über einen sogenannten Hover-Effekt verfügen. Nutzer sind sich an diesen Effekt gewöhnt. Er zeigt ihnen, dass sie einen Link respektive ein verlinktes Element anklicken können. Wir gehen dafür Seite für Seite inklusiv Footer durch, um wirklich keinen Link zu vergessen.

Elemente, mit denen der Nutzer interagieren kann, werden testen wir separat Es handelt sich dabei typischerweise um Kontaktformulare. Bei Kontaktformularen gilt es folgendes zu beachten:

Gibt es neben Kontaktformularen noch weitere Funktionen auf der Webseite, so werden diese ebenfalls separat und spezifisch getestet.

Es gibt eine schier unendliche Anzahl an Browser-, Auflösungen- und Gerätekombinationen. Diese alle zu testen ist nahezu unmöglich. Allerdings heisst das nicht, dass nur weil etwas auf dem Chrome funktioniert und richtig dargestellt wird, dass dies zwangsläufig in anderen Browsern und auf anderen Geräten ebenfalls der Fall ist. Webwirkung testet aus diesem Grund in der Qualitätskontrolle Ihre Webseiten auf den in der Schweiz am häufigsten verwendeten Browser. Dies sind: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge und Internet Explorer 11, jeweils in ihrer neusten, stabilen Version auf Windows 10. Dabei werden die drei sehr verbreiteten Auflösungen 1360×786, 1920×1080 sowie 1280×720 geprüft. Dies hilft, spezifische Probleme (zum Beispiel Textumbrüche) bei verschiedenen Fenstergrössen zu erkennen. Insbesondere der Internet Explorer 11 ist aufgrund seines Alters besonders anfällig auf Darstellungsprobleme. Allerdings gibt es in der Schweiz immer noch viele Leute, die diesen Browser verwenden, weshalb die gezielte Prüfung sinnvoll ist.

Da unterdessen mehr als 50 Prozent aller Webseitenzugriffe über mobile Geräte erfolgen, sind solche gerätespezifische Tests wichtig. Webwirkung testet in diesem Zusammenhang die iPhones 8 und 11, iPad sowie das Samsung S10 jeweils auf Chrome.

Für das Interface-Testing als Teil der Qualitätskontrolle wird das Tool verwenden wir Browserstack. Browserstack ermöglicht mit wenigen Klicks, gezielte Geräte-, Browser- und Auflösungsumgebungen zu erzeugen. Um diesen aufwändigen Schritt so effizient wie möglich zu gestalten, verwenden wir wiederum die Block-Seite, um die Darstellung aller Blocks zu prüfen.

Das Interface-Testing erfolgt bewusst erst gegen Ende der Qualitätskontrolle. So hat die Entwicklung genügend Zeit, allfällige Fehler, die auf dem Chrome aufgetaucht sind, zu verbessern, was auch positive Auswirkung auf andere Browser haben kann.

Falls die Projekte über einen integrierten Shop verfügt, führen wir ein spezifisches Shop-Testing als Teil der Qualitätskontrolle durch. Wir kontrollieren unter anderem folgende Punkte:

Damit die Webseite über Suchmaschinen gut gefunden wird, ergreiffen wir im Rahmen des Webwirkung QA-Prozess entsprechende Massnahmen.

Eine wichtige Hilfe dabei ist der Sistrix Optimizer. Dieses Tool zeigt zum einen allfällige Fehler, die bisher unentdeckt blieben und gibt zudem wertvolle Hinweise, die für die SEO-Optimierung nützlich sind. Beispielsweise ob jede Seite genau über eine H1 Überschrift verfügt. Dies ist ein wichtiger Faktor, um in Suchmaschinen wie Google besser gefunden zu werden. Ebenfalls wichtig diesbezüglich sind die sogenannten Meta-Tags. Aus diesem Grund definieren wir für alle wichtigen Seiten eigene Meta-Tags. Zudem werden Ladezeiten geprüft, um entsprechende Probleme zu identifizieren.

Um später wertvolle Analysen und Reportings erstellen zu können, wird in diesem Schritt auch das Analyse-Tool Google Analytics eingerichtet. Analytics liefert wertvolle Infos über die Seitenbesucher, unter anderem wie sie auf die Seite gelangt sind oder wie sie sich auf der Seite verhalten. Sobald dann die Seite veröffentlicht ist, wird die Indexierung direkt bei Google beantragt. So kann die Seite von Suchmaschinen entsprechend gefunden und angezeigt werden.

Nachdem sämtliche Verbesserungen und Anpassungen umgesetzt worden sind, wird noch einmal stichprobenartig die Seite geprüft. So sollen allfällige Fehler oder Probleme gefunden werden, die durch andere Anpassungen ausgelöst werden können.

Nach der internen Qualitätskontrolle folgt ein grosser Meilenstein in jedem Projekt. Das Projekt wird als sogenanntes Go Live Beta dem Kunden übergeben. Das Ziel bis zu diesem Zeitpunkt lautet: Die Anwendung ist im perfekten Zustand und der Kunde findet keine Fehler.

Damit er, sollte er doch welche finden, diese so einfach wie möglich melden kann, richten wir vorgängig Usersnap ein. Usersnap ist ein Tool, um Kundenfeedback mithilfe von Screenshots und Markierungen einzuholen. Die Rückmeldungen werden automatisch in Trello-Board hinzugefügt. Zudem erhält die verantwortliche Person bei Webwirkung eine Benachrichtigung über jedes eingegangene Feedback. Der Kunde sieht jederzeit den Status seines gemeldeten Fehlers. Diese Art des Feedbacks wird in der Regel sowohl vom Kunden als auch von Webwirkung sehr geschätzt, da Mails mit Rückmeldungen zu allfälligen Fehlern entfallen. Zudem bekommt Webwirkung von Usersnap bereits Angaben zur Browserumgebung, die bei der Fehlerbehebung sehr nützlich sein können.

Der QA-Prozess von Webwirkung nimmt zwar viel Zeit in Anspruch, allerdings sind wir der festen Überzeugung, dass es sich das auch lohnt. So ist nämlich sichergestellt, dass sich die Kunden von Anfang über eine stimmige und fehlerfrei funktionierende Webseite freuen können. Wenn Sie Ihr nächstes Projekt mit höchsten Qualitätsansprüchen durchführen möchten oder Fragen zu unserem Vorgehen haben, können Sie uns gerne direkt kontaktieren.

E-Mail: info@webwirkung.ch
Telefon: 071 552 06 10

Hier gelangen Sie zudem zu allen unseren Leistungen im Überblick.