Μενού

Πλαίσια καλωδίων - Πρέπει πραγματικά να δοκιμαστούν; Και αν ναι, πώς;

wireframes should they really be tested

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

Νέοι εκπαιδευόμενοι ήρθαν στο πλοίο και κάναμε ένα μάθημα εκπαίδευσης μάθετε έννοιες δοκιμών λογισμικού . Αφού είδα αυτά τα ενθουσιώδη πρόσωπα με τα μυαλά τους σχεδόν (επαγγελματικά), αποφάσισα να κάνω μια παράκαμψη στη ρουτίνα προπόνησή μου.

Μετά από μια σύντομη εισαγωγή, αντί να μιλάω για δοκιμές λογισμικού όπως συνήθως, έριξα μια ερώτηση στα νέα μυαλά - ' Μπορεί κανείς να μου εξηγήσει τι προς το το wireframe είναι; '

Η απάντηση ήταν μια παύση και έτσι, αποφασίσαμε να την συζητήσουμε. Και έτσι ξεκίνησε - Δοκιμή καλωδίων / πρωτοτύπου :)

δοκιμή πρωτοτύπου wireframe

Ετσι, τι είναι ένα wireframe; Επιτρέψτε μου να το εξηγήσω με μερικές απλές αναλογίες:

  1. Ο διακοσμητής εσωτερικών χώρων δεν αρχίζει να βάζει τα έπιπλα και να διακοσμεί το σπίτι τυχαία. Βάζει το σχέδιό του σε χαρτί (ή σχεδιάζει λογισμικό), το συζητά με τον πελάτη, προσπαθεί και τροποποιεί το σχέδιο με τον βέλτιστο πρακτικό τρόπο και στη συνέχεια το εφαρμόζει.
  2. Για να καταλάβουν πόσο σοβαρά τραυματίζεται ένα μέρος του σώματος, οι γιατροί εξετάζουν μια ακτινογραφία. Η ακτινογραφία είναι βασικά ένας σκελετός του σώματός μας και δίνει σωστές πληροφορίες για τα οστά και τις αρθρώσεις.
  3. Ένας ράφτης προετοιμάζει το χάρτινο πανί (ένα είδος πρωτοτύπου ξανά), κάνει οποιεσδήποτε τροποποιήσεις απαιτούνται και το χρησιμοποιεί ως βασική μέτρηση έως ότου όλα είναι ακριβή και είναι σίγουρος ότι θα προχωρήσει με το πραγματικό κομμάτι που ράβει.

Νομίζω ότι αυτά τα παραδείγματα ήταν αρκετά για να καταλάβει κανείς την έννοια του wireframe.

Τα πλαίσια καλωδίων είναι πρωτότυπα των ειδών:

Είναι περιορισμένης φύσης, πράγμα που σημαίνει ότι θα μπορούσαν να περιέχουν κενές σελίδες HTML χωρίς στοιχεία που λειτουργούν ή στατικά στιγμιότυπα οθόνης που είναι αντιπροσωπευτικά μιας σελίδας / λειτουργίας / στοιχείου της εφαρμογής και ενδέχεται να μην έχουν χρώμα, γραφικά και άλλα στοιχεία της πραγματικής οπτικής σχεδίασης.

Για να δημιουργήσετε μια σταθερή εφαρμογή / ιστότοπο, απαιτείται ένα σταθερό πλαίσιο και τα wireframes βοηθούν στην παροχή του πλαισίου, δίνοντας μια απεικόνιση της διάταξης της σελίδας, της συνολικής διεπαφής, της πλοήγησης και των λειτουργιών.

Ακολουθούν ορισμένα παραδείγματα καλωδίων:

παράδειγμα wireframe 2

παράδειγμα wireframe 1

Γιατί οι εταιρείες λογισμικού δημιουργούν wireframes;

Για τον ίδιο ακριβώς λόγο, ο Ράφτης / σχεδιαστής εσωτερικών χώρων / Ο γιατρός αποφασίζει να δοκιμάσει τα πράγματα πρώτα - για να αποφύγει λάθη, να εξαλείψει τις εικασίες, να λάβει την έγκριση του πελάτη πριν ορίσει τα πάντα. Βοηθά στον εντοπισμό προβλημάτων από νωρίς και δίνει μια ματιά στο λογισμικό όπως θα εμφανιζόταν όταν τελείωσε.

Τι θα μάθετε:

Σημασία των δοκιμών πλαισίου / πρωτοτύπου:

Λοιπόν, γιατί να δοκιμάσετε κάτι που είναι σκελετός και που δεν θα το δει ο χρήστης όπως είναι τώρα; Με άλλα λόγια - Γιατί να ασχοληθείτε με τον ενδιάμεσο όταν είναι ανδρείκελο ακόμα;

Απλά - για να βοηθήσουμε στην πρόληψη των ελαττωμάτων - που είναι η γενική ατζέντα των ομάδων QA (Διασφάλιση ποιότητας = Πρόληψη ελαττωμάτων + Αναγνώριση ελαττώματος ).

Σημασία της δοκιμής του wireframe

Η δοκιμή καλωδίων μπορεί να βοηθήσει στα εξής:

# 1) Προσδιορισμός απαιτήσεων που λείπουν:

Ας πούμε αν οι απαιτήσεις δηλώνουν ότι στο α σελίδα σύνδεσης Θα πρέπει να υπάρχουν 2 πεδία εισαγωγής, αναγνωριστικό σύνδεσης και κωδικός πρόσβασης αντίστοιχα και τα 3 κουμπιά, OK-Ακύρωση- Επαναφορά. Εάν το wireframe έχει ως εξής, μπορούμε εύκολα να βρούμε το κουμπί Reset που λείπει νωρίς και να το ενσωματώσουμε στην εφαρμογή.

Είναι επικεφαλής του έργου, με 10+ χρόνια εμπειρίας δοκιμών λογισμικού.

# 2) Προσδιορισμός πρόσθετων απαιτήσεων:

Το αντίστροφο της παραπάνω κατάστασης μπορεί να είναι ότι η απαίτηση δηλώνει ότι σε μια σελίδα σύνδεσης πρέπει να υπάρχουν 2 πεδία εισαγωγής, αναγνωριστικό σύνδεσης και κωδικός πρόσβασης αντίστοιχα και τα 2 κουμπιά, OK & Cancel. Εάν το wireframe έχει ως εξής, μπορούμε εύκολα να διαπιστώσουμε ότι διαθέτει ένα επιπλέον κουμπί Reset και να ζητήσουμε επιβεβαίωση σχετικά με το αν απαιτείται ή όχι.

δοκιμή καλωδίου 2

# 3) Ευχρηστία:

Τα Wireframes είναι μια από τις καλύτερες επιλογές για να ελέγξετε τη χρηστικότητα του προϊόντος / εφαρμογής πριν αναπτυχθεί.

Εδώ είναι το wireframe για μία από τις μορφές:

δοκιμή καλωδίου 3

Με μια πρώτη ματιά, φαίνεται εντάξει.

Σκεφτείτε τώρα ως τελικό χρήστη, τον χρήστη που πρόκειται να συμπληρώσει πληροφορίες στη φόρμα. Πιστεύετε ότι υπάρχει τρόπος, αυτή η φόρμα μπορεί να είναι πιο φιλική προς τον χρήστη; Λοιπόν, σίγουρα το πιστεύω.

  • Δώστε το σύμβολο ημερολογίου και περιορίστε τον χρήστη να επιλέξει ημερομηνία από το ημερολόγιο. Αυτό θα ήταν χρήσιμο για τον χρήστη, καθώς δεν θα πρέπει να μπερδευτεί για το ποια μορφή ημερομηνίας πρέπει να ακολουθήσει και η επιλογή ημερομηνίας από το ημερολόγιο θα ήταν κάτι, κάθε χρήστης θα προτιμούσε.
  • Μια συμβουλή εργαλείου που εξηγεί τι σημαίνει κάθε πεδίο θα ήταν εξαιρετική.
  • Το όνομα της σελίδας ως τίτλος απαιτείται για την κατανόηση του wireframe και τη συσχέτιση των πεδίων.
  • Τα υποχρεωτικά πεδία πρέπει να επισημαίνονται με * σύμβολο ή σημείωση που να λέει « Όλα τα πεδία είναι υποχρεωτικά Πρέπει να είναι ορατό.
  • Η ετικέτα του πρώτου πεδίου θα πρέπει να είναι 'Όνομα καμπάνιας' και όχι μόνο 'Όνομα', για να αποφευχθεί η σύγχυση για τους χρήστες.

# 4) Έλεγχος πρώιμης λειτουργίας:

απροσδιόριστη αναφορά στη συνάρτηση κλάσης c ++

Στο παραπάνω παράδειγμα, από το διάγραμμα μπορούμε να μαντέψουμε τον τρόπο λειτουργίας της λειτουργικότητας. Εάν όχι, τουλάχιστον θα οδηγήσει σε περαιτέρω ανασκαφή και καλύτερη κατανόηση της εφαρμογής.

  • Για παράδειγμα : Τι γίνεται αν ο χρήστης θέλει να προσθέσει πολλά αναγνωριστικά κράτησης; Θα αντικαταστήσει η εφαρμογή την προηγούμενη καταχώριση ή θα επιτρέψει πολλές καταχωρίσεις; Πώς θα το χειριστεί και θα το διαχειριστεί;

Όπως μπορεί να φανεί από τα παραπάνω παραδείγματα, ο έλεγχος wireframes βοηθά πραγματικά τον έγκαιρο εντοπισμό προβλημάτων μέσω ενός στατικού wireframe και εμποδίζει τα ελαττώματα να εισχωρήσουν στην πραγματική εφαρμογή. Αυτό είναι πολύ ευεργετικό καθώς γνωρίζουμε ότι τα ελαττώματα που εντοπίστηκαν νωρίς στη διαδικασία ανάπτυξης είναι φθηνότερα για να διορθωθούν από αυτά που εντοπίστηκαν αργότερα.

Εργαλεία για καλωδίωση:

Υπάρχουν πολλά διαθέσιμα εργαλεία στην αγορά, αλλά πρέπει να χρησιμοποιήσετε το εργαλείο σύμφωνα με την καταλληλότητα του περιβάλλοντος. Ενώ τα περισσότερα από τα εργαλεία όπως το Axure, το mockup Power, το Simulify, το Balsamiq κ.λπ. πληρώνονται, υπάρχουν μερικά χρήσιμα δωρεάν εργαλεία καλωδίωσης πολύ:

  1. Κακάο : Το Cacoo είναι ένα φιλικό προς το χρήστη εργαλείο σχεδίασης στο διαδίκτυο που επιτρέπει στο χρήστη να δημιουργήσει μια ποικιλία διαγραμμάτων, όπως χάρτες ιστότοπων, wireframes, UML και γραφήματα δικτύου.
  1. MockupBuilder : Το MockupBuilder βοηθά τον χρήστη να εμφανίσει γρήγορα τις ιδέες του στην οθόνη. Είναι μια ΔΩΡΕΑΝ εφαρμογή Ιστού με ισχύ Silverlight.
  1. Πρόγραμμα μολυβιών : Το Pencil Project είναι δωρεάν και εύκολο να το μάθετε. Μπορεί να λειτουργήσει ως πρόσθετο του Firefox ή μόνο του.

Πότε μπορεί (ή όχι) να πραγματοποιηθεί δοκιμή Wireframes:

  • Πριν από την ανάπτυξη προϊόντων: Αυτό μπορεί να βοηθήσει στον εντοπισμό κενών ή ελλείψεων απαιτήσεων, σφαλμάτων σχεδίασης, ζητήματα χρηστικότητας κλπ. - Πρόληψη ελαττωμάτων
  • Μετά την ανάπτυξη: Σε αυτήν την περίπτωση, τα wireframes μπορούν να χρησιμοποιηθούν ως αναφορές για την επικύρωση της εφαρμογής. - Αναγνώριση ελαττωμάτων.

Σε περίπτωση δοκιμών Wireframe για χρηστικότητα, συνήθως γίνεται χειροκίνητα και οι περισσότεροι χρήστες σε πραγματικό χρόνο συμμετέχουν. Τους ζητείται είτε μια σειρά ερωτήσεων για να κατανοήσουν την εμπειρία τους ή τα σχόλιά τους ή τους παρέχονται διαδραστικά σύρματα για την καταγραφή των σχολίων.

Για να έχετε λεπτομερή ανάλυση των wireframes, μερικές φορές εμπλέκονται επίσης ειδικοί σε θέματα.

Υπηρεσίες όπως χρήσιμος μπορεί να είναι πολύ χρήσιμο, όπου μπορεί κανείς να δημοσιεύσει έναν σύνδεσμο wireframes και μετά από δοκιμή wireframes, τα αποτελέσματα παράγονται μαζί με τα ακόλουθα σημεία ανατροφοδότησης:

  • Ένα βίντεο της οθόνης κάθε χρήστη που ελέγχει το wireframe σας.
  • Ήχος του χρήστη που μιλάει για το πώς ολοκληρώνει τις εργασίες.
  • Πολύτιμα σχόλια σχετικά με τον τρόπο βελτίωσης του ιστότοπού σας.

Παραγωγή δοκιμών πρωτοτύπου:

Τα αποτελέσματα των δοκιμών wireframes είναι πολύ χρήσιμα όσον αφορά την κατανόηση του σχεδιασμού, της πλοήγησης, της φιλικότητας προς τον χρήστη, της συνολικής ροής εργασίας και των λειτουργιών. Βασικά, μετά τη δοκιμή wireframes, τα wireframes καθίστανται σαφέστερα και εφαρμόσιμα.

Συμπέρασμα:

Συνοψίζοντας, η δοκιμή wireframes λειτουργεί ως προληπτική δράση και μπορεί να είναι πολύ χρήσιμη για την εύρεση χρηστικότητας και το σχεδιασμό κενών στη φάση προ-ανάπτυξης της εφαρμογής.

Με αυτό, ολοκληρώνω το θέμα, με την ελπίδα ότι οι αναγνώστες θα με δελεάσουν να γράψω μια άλλη ανάρτηση σχετικά με αυτό ζητώντας ερωτήσεις και παρέχοντας σχόλια.

Σχετικά με τον Συγγραφέα: Αυτό το άρθρο γράφτηκε από το μέλος της ομάδας STH Bhumika. Είναι επικεφαλής του έργου, με 10+ χρόνια εμπειρίας δοκιμών λογισμικού.

Καλή δοκιμή, ως συνήθως :)

Συνιστώμενη ανάγνωση

^