Menü

Wireframes - sollten sie wirklich getestet werden? Und wenn ja, wie?

wireframes should they really be tested

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

Neue Auszubildende kamen an Bord und wir hatten eine Schulung dazu Software-Testkonzepte lernen . Nachdem ich diese begeisterten Gesichter (beruflich) mit ihren fast leeren Köpfen gesehen hatte, beschloss ich, einen Umweg zu meinem Routinetraining zu machen.

Nach einer kurzen Einführung warf ich, anstatt wie sonst über Softwaretests zu sprechen, eine Frage an die neuen Köpfe: „ Kann mir jemand was erklären zu Drahtmodell ist? '

Die Antwort war eine Pause und so beschlossen wir, darüber zu diskutieren. Und so fing es an - Drahtgitter- / Prototypentests :) :)

Wireframe-Prototypentests

So, Was ist ein Drahtmodell? Lassen Sie es mich mit einigen einfachen Analogien erklären:

  1. Der Innenarchitekt beginnt nicht zufällig, die Möbel einzubauen und das Haus zu dekorieren. Er schreibt seinen Plan auf Papier (oder in eine Design-Software), bespricht ihn mit dem Kunden, versucht und modifiziert den Plan auf bestmögliche Weise und setzt ihn dann um.
  2. Um zu verstehen, wie schwer ein Körperteil verletzt ist, schauen Ärzte auf eine Röntgenaufnahme. Röntgen ist im Grunde ein Skelett unseres Körpers und gibt korrekte Informationen über die Knochen und Gelenke.
  3. Ein Schneider bereitet das Papiertuch vor (wieder eine Art Prototyp), nimmt die erforderlichen Änderungen vor und verwendet es als Basismessung, bis alles korrekt ist und er zuversichtlich ist, mit dem eigentlichen Stück fortzufahren, das er / sie näht.

Ich denke, diese Beispiele waren genug für jeden, um das Konzept des Drahtgitters zu verstehen.

Wireframes sind Prototypen:

Sie sind von Natur aus begrenzt, was bedeutet, dass sie leere HTML-Seiten ohne funktionierende Elemente oder statische Screenshots enthalten können, die für eine Seite / Funktion / ein Element der Anwendung repräsentativ sind und möglicherweise keine Farbe, Grafiken und andere Elemente des tatsächlichen visuellen Designs aufweisen.

Um eine solide Anwendung / Website zu erstellen, wird ein solides Framework benötigt, und Wireframes helfen bei der Bereitstellung des Frameworks, indem sie das Seitenlayout, die allgemeine Benutzeroberfläche, die Navigation und die Funktionen darstellen.

Hier einige Beispiele für Drahtgitter:

Drahtmodellbeispiel 2

Drahtmodellbeispiel 1

Warum bauen Softwareunternehmen Wireframes?

Aus genau dem gleichen Grund beschließt der Schneider / Innenarchitekt / Arzt, die Dinge zuerst auszuprobieren - um Fehler zu vermeiden, Vermutungen zu vermeiden und die Zustimmung des Kunden einzuholen, bevor alles in Stein gemeißelt wird. Es hilft dabei, Probleme frühzeitig zu erkennen und einen Einblick in die Software zu geben, wie sie nach Abschluss erscheinen würde.

Was du lernen wirst:

Bedeutung von Drahtgitter- / Prototypentests:

Warum also etwas testen, das ein Skelett ist und das vom Benutzer nicht so gesehen wird, wie es jetzt ist? Mit anderen Worten - Warum sich mit dem Vermittler beschäftigen, wenn es noch ein Dummy ist?

Einfach - um die Fehlervermeidung zu unterstützen - das ist die Gesamtagenda der QS-Teams (Qualitätssicherung = Fehlervermeidung + Fehlererkennung ).

Bedeutung von Drahtgittertests

Wireframes-Tests können in folgenden Fällen hilfreich sein:

# 1) Ermittlung fehlender Anforderungen:

Sagen wir, wenn die Anforderungen dies in a Loginseite Es sollten 2 Eingabefelder vorhanden sein, Anmelde-ID bzw. Passwort sowie die 3 Schaltflächen OK-Abbrechen-Zurücksetzen. Wenn das Drahtmodell wie folgt ist, können wir die fehlende Schaltfläche zum Zurücksetzen leicht frühzeitig finden und in die Anwendung integrieren.

Sie ist Projektleiterin und verfügt über mehr als 10 Jahre Erfahrung im Testen von Software.

# 2) Ermittlung zusätzlicher Anforderungen:

Die Umkehrung der obigen Situation kann sein, dass die Anforderung besagt, dass auf einer Anmeldeseite 2 Eingabefelder, die Anmelde-ID und das Kennwort sowie die 2 Schaltflächen OK und Abbrechen vorhanden sein müssen. Wenn das Drahtmodell wie folgt ist, können wir leicht feststellen, dass es eine zusätzliche Schaltfläche zum Zurücksetzen hat, und eine Bestätigung einholen, ob es wirklich erforderlich ist oder nicht.

Drahtgitterprüfung 2

# 3) Benutzerfreundlichkeit:

Wireframes sind eine der besten Optionen, um die Benutzerfreundlichkeit des Produkts / der Anwendung zu testen, bevor es entwickelt wird.

Hier ist das Drahtmodell für eine der Formen:

Drahtgitterprüfung 3

Auf den ersten Blick scheint es in Ordnung zu sein.

Denken Sie nun als Endbenutzer an den Benutzer, der die Informationen im Formular ausfüllen wird. Denken Sie, es gibt einen Weg, dieses Formular kann benutzerfreundlicher sein? Nun, ich denke schon.

  • Geben Sie das Kalendersymbol an und beschränken Sie den Benutzer auf die Auswahl des Datums aus dem Kalender. Dies wäre für den Benutzer hilfreich, da er nicht verwirrt sein muss, welchem ​​Datumsformat er folgen soll, und die Auswahl des Datums aus dem Kalender etwas wäre, das jeder Benutzer bevorzugen würde.
  • Ein Tooltip, der erklärt, was jedes Feld bedeutet, wäre großartig.
  • Der Seitenname als Titel ist erforderlich, um das Drahtmodell zu verstehen und die Felder miteinander in Beziehung zu setzen.
  • Erforderliche Felder sollten mit einem * -Zeichen oder einem Hinweis mit der Aufschrift „ alle Felder sind erforderlich Sollte sichtbar sein.
  • Die Bezeichnung des ersten Felds sollte 'Kampagnenname' und nicht nur 'Name' lauten, um Verwirrung für die Benutzer zu vermeiden.

# 4) Frühe Funktionstests:

Software-Test Lebenslauf Proben 2 Jahre Erfahrung

Im obigen Beispiel selbst können wir anhand des Diagramms möglicherweise erraten, wie die Funktionalität funktionieren könnte. Wenn nicht, führt dies zumindest zu einem weiteren Ausgraben und einem besseren Verständnis der Anwendung.

  • Zum Beispiel : Was ist, wenn der Benutzer mehrere Buchungs-IDs hinzufügen möchte? Überschreibt die Anwendung den vorherigen Eintrag oder erlaubt sie mehrere Einträge? Wie wird es damit umgehen und es verwalten?

Wie aus den obigen Beispielen ersichtlich ist, hilft das Testen von Drahtgittern wirklich dabei, Probleme durch ein statisches Drahtgitter frühzeitig zu erkennen und zu verhindern, dass die Fehler in die eigentliche Anwendung eindringen. Dies ist sehr vorteilhaft, da wir wissen, dass früh im Entwicklungsprozess erkannte Fehler billiger zu beheben sind als die später gefundenen.

Werkzeuge für das Wireframing:

Es gibt viele Werkzeuge auf dem Markt, aber man sollte das Werkzeug entsprechend der Kontexteignung verwenden. Während die meisten Tools wie Axure, Power Mockup, Simulify, Balsamiq usw. bezahlt werden, gibt es einige nützliche kostenlose Wireframing-Tools auch:

  1. Cacoo : Cacoo ist ein benutzerfreundliches Online-Zeichenwerkzeug, mit dem der Benutzer eine Vielzahl von Diagrammen wie Site Maps, Wireframes, UML und Netzwerkdiagramme erstellen kann.
  1. MockupBuilder : MockupBuilder hilft dem Benutzer, seine Ideen schnell auf den Bildschirm zu bringen. Es ist eine KOSTENLOSE Silverlight-basierte Web-App.
  1. Bleistiftprojekt : Pencil Project ist kostenlos und leicht zu erlernen. Es kann als Firefox-Add-On oder alleine ausgeführt werden.

Wann können (oder werden) Wireframes-Tests durchgeführt werden:

  • Vor der Produktentwicklung: Dies kann helfen, Lücken oder fehlende Anforderungen, Konstruktionsfehler, Usability-Probleme etc.- Fehlervermeidung
  • Nachentwicklung: In diesem Fall können die Drahtgitter als Referenz zur Validierung der Anwendung verwendet werden. - Fehlererkennung.

Im Falle von Wireframe-Tests auf Benutzerfreundlichkeit erfolgt dies normalerweise manuell und die meiste Zeit sind Echtzeitbenutzer beteiligt. Sie erhalten entweder eine Reihe von Fragen, um ihre Erfahrungen oder ihr Feedback zu verstehen, oder sie erhalten interaktive Drahtmodelle, um das Feedback zu erfassen.

Um eine detaillierte Analyse von Drahtgittern zu erhalten, sind manchmal auch Fachexperten beteiligt.

Dienstleistungen wie Usertesting kann sehr hilfreich sein, wenn man einen Link von Drahtgittern posten kann und nach dem Testen von Drahtgittern die Ergebnisse zusammen mit den folgenden generiert werden Feedback-Punkte:

  • Ein Video des Bildschirms jedes Benutzers, in dem Ihr Drahtmodell getestet wird.
  • Audio des Benutzers, der darüber spricht, wie er die Aufgaben erledigt.
  • Wertvolles Feedback zur Verbesserung Ihrer Website.

Ausgabe der Prototypentests:

Die Ergebnisse von Wireframes-Tests sind sehr hilfreich, um Design, Navigation, Benutzerfreundlichkeit, Gesamtarbeitsablauf und Funktionen zu verstehen. Grundsätzlich werden die Wireframes nach dem Testen von Wireframes klarer und implementierbarer.

Fazit:

Zusammenfassend lässt sich sagen, dass das Testen von Drahtgittern eine proaktive Aktion darstellt und sehr hilfreich sein kann, um Usability- und Design-Lücken in der Vorentwicklungsphase der Anwendung zu finden.

Damit schließe ich das Thema ab, in der Hoffnung, dass die Leser mich dazu verleiten, einen weiteren Beitrag dazu zu schreiben, indem sie Fragen stellen und Feedback geben.

Über den Autor: Dieser Artikel wurde vom STH-Teammitglied Bhumika verfasst. Sie ist Projektleiterin und verfügt über mehr als 10 Jahre Erfahrung im Testen von Software.

Viel Spaß beim Testen, wie immer :)

Literatur-Empfehlungen

^