Μελέτησαν 100 ιστότοπους SaaS για να αποκαλύψουμε τις τάσεις σχεδιασμού + τις βέλτιστες πρακτικές (εδώ βρισκόμαστε)

Ποιες είναι οι βέλτιστες πρακτικές για τον σχεδιασμό ιστοσελίδων του SaaS;

Αυτή είναι η ερώτηση που έθεσα να απαντήσω μετά από σκοντάψιν στο site SaaS, μετά την τοποθεσία του SaaS, μετά την τοποθεσία του SaaS ... Αυτό φαινόταν σχεδόν το ίδιο:

Η κατανόηση των βέλτιστων πρακτικών μπορεί να είναι ένας πολύ καλός τρόπος για τους σχεδιαστές ιστοσελίδων (και τους ιδρυτές της SaaS) να σκεφτούν για την παρουσία τους στο δικό τους εμπορικό σήμα. Πρόκειται για μια προσέγγιση που ο Andy Crestodina πήρε μερικά χρόνια πίσω όταν αναλύει τα πρότυπα ιστού για τους 50 κορυφαίους ιστοτόπους μάρκετινγκ. Μπορεί επίσης να βοηθήσει τους σχεδιαστές, τους στρατηγικούς και τους ιδρυτές να σχεδιάσουν τις πρωτοβουλίες σχεδιασμού τους με την έννοια των wireframes και να προσδιορίσουν ποια βασικά στοιχεία σχεδιασμού πρέπει να βρίσκονται στην αρχική τους σελίδα.

Ο Όμιλος Nielsen / Norman δημοσίευσε ένα από τα πρώτα τεύχη τεκμηρίωσης σχετικά με τα Πρότυπα Σχεδίασης Ιστού και καθόρισε τρία επίπεδα τυποποίησης:

  • Πρότυπο: Το 80% + των ιστότοπων χρησιμοποιεί την ίδια προσέγγιση
  • Σύμβαση: Το 50-79% των ιστοτόπων χρησιμοποιούν την ίδια προσέγγιση
  • Σύγχυση: 49% ή λιγότερες ιστοσελίδες χρησιμοποιούν μια προσέγγιση

Ενώ είχα αρχικά μεγάλη απογοήτευση με τις φανταστικές μάρκες SaaS, όσο περισσότερο εξέτασα το σκεπτικό ότι ακολουθώ τα πρότυπα σχεδιασμού και τις βέλτιστες πρακτικές τόσο περισσότερο κατανοούσα το όφελος της συνέπειας. Μερικά από τα οφέλη που έρχονται με τα ακόλουθα πρότυπα web design περιλαμβάνουν:

  • Μια αίσθηση ασφάλειας και εμπιστοσύνης όταν βλέπουμε κοινά στοιχεία σχεδιασμού
  • Γνωρίζοντας ακριβώς πού να πάτε όταν χρειάζεστε κάτι (π.χ.
  • Δεν υπάρχει αβεβαιότητα γύρω από νέα εικονίδια, κουμπιά και στοιχεία σχεδιασμού
  • Δεν έχουν χαθεί τα βασικά στοιχεία (δηλ. Αποκτήστε μια επίδειξη)

Όλα αυτά τα πράγματα μπορούν να κάνουν την εμπειρία του χρήστη πιο ομαλή και πιο διαισθητική.

Αλλά υπάρχουν πολλά πράγματα στο χώρο του SaaS που φαίνεται να αναπαράγονται χωρίς κανέναν καλό λόγο.

Για να κατανοήσουμε καλύτερα τα πρότυπα σχεδιασμού ιστού του SaaS, πήραμε τους πρώτους 100 ιστότοπους από το SaaS1000.com τον Ιανουάριο του 2019, για να δημιουργήσουμε ένα σύνολο δεδομένων που μας έδειξε ποια πράγματα είχαν γίνει πρότυπα, ποια ήταν τα συμβατικά και ποια ήταν τα κέρματα νομισμάτων. Ακολουθεί μια πιο προσεκτική ματιά στις βέλτιστες πρακτικές σχεδιασμού SaaS που συμβαίνουν το 2019:

Τα λογότυπα μάρκας βρίσκονται πάντα στην αριστερή πλευρά

Η τοποθέτηση του λογότυπου στην πάνω αριστερή πλευρά ενός δικτυακού τόπου είναι μια κοινή πρακτική σχεδιασμού. Είναι μια προσέγγιση που οι περισσότεροι σχεδιαστές κινητοποιούν μέσα στο SaaS και έξω από το SaaS. Είναι λογική επιλογή που αναγνωρίζει ότι οι περισσότεροι άνθρωποι στη Βόρεια Αμερική βλέπουν έναν ιστό από αριστερά προς τα δεξιά.

Αλλά μερικές φορές (στην έρευνά μας, μια φορά) ένας σχεδιαστής αποφασίζει να τοποθετήσει το λογότυπο κάπου αλλού. Ενώ δεν βλέπαμε κανένα ιστότοπο να τοποθετεί το λογότυπό του στα δεξιά. βρήκαμε το DataDog που έβαλε το λογότυπό του απευθείας στη μέση του ιστότοπού του:

Σε μια έρευνα έρευνας λογοτύπου, οι λαοί στο Venngage διαπίστωσαν ότι το 35% των ανθρώπων προτιμούν το κείμενο κυρίαρχα και οριζόντια λογότυπα στυλ για τις εταιρείες τεχνολογίας.

Οι περισσότεροι δικτυακοί τόποι του SaaS είναι ευαίσθητοι στο κινητό

Ζούμε σε έναν κινητό κόσμο.

Οι ανταποκρίσιμοι ιστότοποι είναι ένας πολύ καλός τρόπος για να διασφαλίσετε ότι δεν θα αποκομίσετε σπασμένες εμπειρίες για άτομα σε επιτραπέζιους υπολογιστές ή επισκεψιμότητα στο κινητό.

Το 2018, το 52,2% της παγκόσμιας διαδικτυακής κίνησης δημιουργήθηκε μέσω κινητών τηλεφώνων. Γι 'αυτό είναι τόσο σπουδαίο να βλέπει κανείς ότι οι περισσότερες εταιρείες SaaS επενδύουν σε ένα ανταποκρινόμενο σχέδιο αντί να χτίζουν μόνο για επιφάνεια εργασίας.

Το βίντεο μπορεί να βρεθεί σε λίγο λιγότερο από το 55% των ιστότοπων

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

Οι προσδοκίες για το κόστος κληρονομιών που έρχονται με την παραγωγή βίντεο υψηλής ποιότητας ενδέχεται να εξακολουθούν να εμποδίζουν τα εμπορικά σήματα από αυτή την επένδυση. Εικονογραφημένα εξηγήσεις προϊόντων αυξήθηκαν στη δημοτικότητα πριν από μερικά χρόνια και έγιναν μια δημοφιλής υπηρεσία που αγοράστηκε μέσω ιστοτόπων όπως το Fiverr και Upwork. Σήμερα, η ζήτηση για αυτούς τους τύπους βίντεο εξακολουθεί να είναι αρκετά υψηλή (πάνω από 14.800 αναζητήσεις για βίντεο εξηγητών μηνιαίως), όμως μόνο λίγες από τις μισές εταιρείες του SaaS τις χρησιμοποιούν.

Υπάρχει πάντοτε πρωτεύον κλήση για δράση πάνω από το πτυσσόμενο

Υπάρχει σαφής βέλτιστη πρακτική στην κοινότητα SaaS ότι η έκκλησή σας για δράση που ωθεί τους ανθρώπους να κάνουν κάτι πρέπει να είναι πάνω από το πτυχίο. Περισσότερο από το 90% όλων των ιστότοπων που συμπεριλήφθηκαν σε αυτή την έρευνα του SaaS Design είχαν ένα κουμπί ή κλήση για δράση πάνω από το πτυχίο.

Η τοποθέτηση της κλήσης στη δράση ποικίλλει

Σε όλες αυτές τις περιοχές υπήρχε ελάχιστη συνοχή στο σημείο όπου τέθηκε η πρόσκληση για δράση. Μερικοί από αυτούς τοποθετήθηκαν στην άκρη της σελίδας, μερικοί πέφτουν νεκροί στη μέση και άλλοι είναι μακριά στα δεξιά. Η καλύτερη πρακτική όσον αφορά την τοποθέτηση του CTA φαίνεται να είναι ένα πλήρες flip μεταξύ των εταιρειών SaaS.

Τι χρώματα κάνουν οι εταιρείες SaaS για κουμπιά;

Κατά την ανάλυση των διαφόρων κλήσεων στις δράσεις υπήρξε μια σαφής τάση προς τα πράσινα και πορτοκαλί κουμπιά.

Η δωρεάν επίδειξη είναι η πιο δημοφιλής έκκληση για δράση

Οι τοποθεσίες που εξετάσαμε και οι οποίες έχουν μια πρόσκληση για δράση έχουν συνήθως ένα σαφές πράγμα που θέλουν οι άνθρωποι να κάνουν. Η πλειοψηφία τους χρησιμοποιεί γλώσσα με προσανατολισμό δράσης (%%) και ωθεί τον επισκέπτη να κάνει κάτι που τον ωθεί περισσότερο στη διοχέτευση. Ορισμένες παραλλαγές περιλαμβάνουν:

  • Προγραμματίστε μια επίδειξη
  • Ζητήστε μια επίδειξη
  • Πάρτε μια δωρεάν επίδειξη
  • Πάρτε Χ δωρεάν
  • Ξεκίνα
  • Δοκιμάστε το X

Οι πιο συνηθισμένες λέξεις + φράσεις στο πλαίσιο της κλήσης στις ενέργειες έτειναν να είναι: Δωρεάν, Επίδειξη, Get, Ξεκίνησε, Δοκιμάστε το X και Ζητήστε ... Μερικές από αυτές τις λέξεις εμφανίστηκαν μαζί (δηλ. από αυτές τις λέξεις τείνουν να εμφανίζονται περισσότερο στις πρωτογενείς CTA του SaaS.

Η χρήση ενός φωτεινού φόντου είναι η καλύτερη πρακτική

Δεν είναι συνηθισμένο να βλέπετε έναν ιστότοπο που έχει ένα μαύρο φόντο στο SaaS:

Οι περισσότεροι από τους ιστότοπους (92% αυτών) χρησιμοποίησαν λευκά ή ανοιχτά χρώματα ως το βασικό υπόβαθρο για τις τοποθεσίες τους.

Η χρήση πραγματικών ανθρώπων χρησιμοποιείται μόνο από το 56% των SaaS

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

Ήταν επίσης υπέροχο να δούμε αρκετά διαφορετική ποικιλία στην επιλογή εικόνας. Το μόνο που λείπει ήταν να βλέπουμε ένα παρόμοιο επίπεδο διαφορετικότητας σε αυτές τις σελίδες "Η ομάδα μας", αλλά αυτό είναι ένα θέμα για μια άλλη φορά.

Προσαρμοσμένες εικονογραφήσεις είναι πολύ συχνές (70%)

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

Ακολουθεί ένα στιγμιότυπο κάποιων από τις τοποθεσίες και τις εικόνες τους:

Αυτή είναι μια ενδιαφέρουσα τάση.

Τι πιστεύετε: Μήπως αυτή η προσέγγιση για το σχεδιασμό βοηθητικών εταιρειών ξεχωρίζει ή έχει ως αποτέλεσμα την ανάμιξή τους; Εχει σημασία? Αποδίδει μια αίσθηση εμπιστοσύνης;

Τα μισά από τα εμπορικά σήματα SaaS χρησιμοποιούν ένα εργαλείο Live Chat

Η άνοδος της ζωντανής συνομιλίας και του conversational marketing ήταν μια συναρπαστική τάση για να παρακολουθήσετε. Καθώς αυτή η ιδέα της ενσωμάτωσης των συνομιλιών σε πραγματικό χρόνο με τις προοπτικές (ή χρησιμοποιώντας bots) συνεχίζει να πιάζει την έλξη, είναι σαφές ότι γίνεται δημοφιλής μεταξύ των εταιρειών B2B SaaS.

Η έρευνά μας διαπίστωσε ότι σχεδόν το 50% των ιστότοπων του SaaS έχει ένα κουτί συνομιλίας στη γωνία που είναι έτοιμο να συνδεθεί. Στα περισσότερα από αυτά τα sites οι υπηρεσίες που χρησιμοποιήθηκαν ήταν Intercom ή Drift.

Έτσι πρέπει να ακολουθείτε τα πρότυπα;

Εξαρτάται.

Ο πειραματισμός με το σχεδιασμό είναι ένας πολύ καλός τρόπος για να αποκαλύψετε κάτι πριν από την υπόλοιπη βιομηχανία. Τούτου λεχθέντος, ο κίνδυνος σχεδιασμού πειραματισμού είναι ότι οι χρήστες θα μπορούσαν να βρουν ολόκληρη την εμπειρία σπασμένα και κακώς δημιουργημένα. Στη συνέχεια, κάνοντας τα πάντα για τα πρότυπα που χρησιμοποιούνται ήδη σε ιστοσελίδες του SaaS σε όλο τον κόσμο, θα μπορούσατε να συνδυάσετε πολύ εύκολα.

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

  • Μην χρησιμοποιείτε την επίπεδη εικονογράφηση ως αφηρημένη αναπαράσταση της μάρκας σας
  • Μην χρησιμοποιείτε σκούρα πορτοκαλί ή κίτρινα κουμπιά στην αρχική σας σελίδα
  • Μην αφήσετε να ευθυγραμμίσετε την πρόταση αξίας σας στον ιστότοπο
  • Τοποθετήστε το λογότυπό σας στη μέση ή στα δεξιά
  • Χρησιμοποιήστε ένα σκούρο φόντο για τον ιστότοπό σας

Ο ιστότοπός σας πληροί αυτές τις προδιαγραφές;

Κάνατε κάτι που σας εκπλήσσει;

Δημοσιεύθηκε αρχικά ως Best Practices του Web Design του SaaS: Labs Foundation

Αυτή η ιστορία δημοσιεύεται στο The Startup, το μεγαλύτερο δημοσίευμα επιχειρηματικότητας του Medium, ακολουθούμενο από +430.678 άτομα.

Εγγραφείτε για να λάβετε τις κορυφαίες ιστορίες μας εδώ.