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

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

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

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

Η διαισθητική σχεδίαση εστιάζει στη θετική εμπειρία χρήστη (User eXperience, UX), η οποία, άλλωστε, την κάνει σχεδόν συνώνυμη με τον επιστημονικό σχεδιασμό.

Το πρόβλημα με το σχεδιασμό διαισθητικών διεπαφών: διαισθητικό για ποιον;

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

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

Δεν υπάρχει αντικειμενικό κριτήριο για διαισθητικό σχεδιασμό: μόνο ο ίδιος ο χρήστης αισθάνεται αν καταλαβαίνει τι πρέπει να κάνει σε μια ιστοσελίδα ή όχι.

Οι περισσότερες σελίδες προορισμού/ιστοσελίδες έχουν σχεδιαστεί με καλές προθέσεις: κανείς δεν θέλει να κάνει τη ζωή δύσκολη για τους επισκέπτες. Αυτές οι σελίδες προορισμού ακόμη ενστικτώδης- αλλά, κατά κανόνα, σχεδιαστής! Ο μέσος προγραμματιστής σπάνια αφιερώνει χρόνο για να δει πώς το μέσο κοινό-στόχο θα χρησιμοποιήσει το προϊόν ιστού του.

Ένα άτομο κοιτάζει πάντα τον κόσμο από τη δική του οπτική γωνία και όταν σχεδιάζει κάτι, σχεδιάζει ασυνείδητα αυτό το αντικείμενο (ανεξάρτητα από μια αυτόνομη σελίδα προορισμού ή μια πλατφόρμα SaaS ως τέτοια) «για τον εαυτό του», δηλαδή για άτομα που έχουν περίπου το ίδιο επίπεδο δεξιοτήτων Η/Υ, περίπου την ίδια εμπειρία στη χρήση διεπαφών αυτού του τύπου κ.λπ.

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

Η κατανόηση του κοινού-στόχου είναι αδύνατη χωρίς τη γνώση της έννοιας της «Τρέχουσας Γνώσης VS».

Τρέχουσες γνώσεις VS Απαιτούμενες γνώσεις

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

Αυτό αποκαλεί ο Jared Spool, ένας εξέχων ειδικός στη διεπαφή ιστού, "Τρέχουσα γνώση".

Στη συνέχεια, η "απαιτούμενη γνώση" (Target Knowledge) είναι το επίπεδο προσόντων που θα επιτρέψει σε έναν εκπρόσωπο του κοινού-στόχου να χρησιμοποιήσει εύκολα τη σελίδα προορισμού, τον ιστότοπο ή τη λύση SaaS.

Από αριστερά προς τα δεξιά: Καμία γνώση - καμία γνώση. Τρέχουσα γνώση - τρέχον επίπεδο γνώσης. Στόχος Γνώση - απαιτούμενη γνώση. Όλη η γνώση - η μέγιστη δυνατή γνώση.

Η διαφορά μεταξύ αυτών των δύο επιπέδων - Τρέχουσα γνώση και Γνώση Στόχου - ονομάζεται κενό γνώσης(Κενό γνώσης). Η δουλειά του σχεδιαστή είναι να σχεδιάσει μια διεπαφή που ελαχιστοποιεί το χάσμα γνώσης μεταξύ των επισκεπτών - ανάμεσα σε αυτά που γνώριζαν πριν φτάσουν στον πόρο και σε αυτά που πρέπει να γνωρίζουν για να χρησιμοποιήσουν σωστά την ιστοσελίδα.

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

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

Εννοιολογικά μοντέλα

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

Ας εξηγήσουμε με ένα παράδειγμα: ας υποθέσουμε ότι υπάρχει κάποιος που δεν έχει αγοράσει ποτέ αγαθά στο διαδίκτυο, αλλά έχει εμπειρία σε αγορές εκτός σύνδεσης. Τον καθίζουμε μπροστά στον υπολογιστή, του δείχνουμε τη διεπαφή ιστού του Amazon.com και λέμε: «Μπορείς να ψωνίσεις εδώ!»

Τώρα αυτό το άτομο, μαζί με το εννοιολογικό μοντέλο ενός "καταστήματος εκτός σύνδεσης", έχει ένα εννοιολογικό μοντέλο ενός "διαδικτυακού καταστήματος". Όσο περισσότερο η διαδικασία διαδικτυακών αγορών μοιάζει με μια κανονική αγορά, τόσο ισχυρότερο θα είναι το μοτίβο «αγοράς» συμπεριφοράς του χρήστη που σχετίζεται με το συγκεκριμένο εννοιολογικό μοντέλο «Το Amazon είναι ηλεκτρονικό κατάστημα», επειδή οι 2 τύποι εμπειρίας χρήστη - διαδικτυακά και εκτός σύνδεσης - θα είναι όσο πιο κοντά γίνεται.

Αλλά εάν ο χρήστης έχει ήδη χρησιμοποιήσει ηλεκτρονικές αγορές, αλλά σε διαφορετικό πόρο Ιστού, τότε το εννοιολογικό μοντέλο του ιστότοπου ηλεκτρονικού εμπορίου θα διαφέρει από αυτό που αναφέρθηκε παραπάνω: είναι πιθανό η διεπαφή Amazon.com να μην ανταποκρίνεται στις διαισθητικές προσδοκίες του.

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

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

Γνωρίστε τους χρήστες σας!

Για να αναπτύξετε μια διεπαφή που γίνεται αντιληπτή ως «διαισθητική» από πιθανούς επισκέπτες, πρέπει να αξιολογήσετε τα τρέχοντα και τα απαιτούμενα επίπεδα γνώσης της ομάδας-στόχου. Με άλλα λόγια: τι γνωρίζουν ήδη οι χρήστες και τι πρέπει να γνωρίζουν;

Υπάρχουν δύο αποτελεσματικούς τρόπουςαξιολόγηση του επιπέδου γνώσεων του κοινού-στόχου:

• Μελέτες πεδίου: απλά πηγαίνετε στο δικό σας πιθανούς πελάτεςκαι παρατηρήστε τη συμπεριφορά τους στο Διαδίκτυο στο συνηθισμένο «βιότοπό» τους. Αυτό είναι αρκετό για να πάρετε μια ιδέα για το τρέχον επίπεδο γνώσεών τους.
• Δοκιμές χρηστικότητας over the shoulder: Προσκαλέστε μερικά μέλη της ομάδας-στόχου σας να λάβουν μέρος σε μια δοκιμή και ζητήστε τους να ολοκληρώσουν ένα σύνολο εργασιών στις σελίδες σας. Αφήστε τους χρήστες να σχολιάσουν τις ενέργειές τους δυνατά, λέγοντας ό,τι πιστεύουν. Μια παρόμοια δοκιμή μπορεί να πραγματοποιηθεί εξ αποστάσεως.

Και στις δύο περιπτώσεις παρατηρείς και κρατάς σημειώσεις χωρίς να παρεμβαίνεις σε αυτό που συμβαίνει. Μια δοκιμαστική ομάδα 10 συμμετεχόντων είναι αρκετή για να καταλάβει το 90% των προβλημάτων χρηστικότητας.

Πότε μπορεί μια σελίδα προορισμού να χρησιμοποιηθεί διαισθητικά;

Ο Jared Spool που αναφέρθηκε προηγουμένως διεξήγαγε έρευνα σχετικά με αυτό το θέμα το 2005, η οποία κατέληξε στο άρθρο "What Makes a Design Intuitive;" (Τι κάνει ένα σχέδιο να φαίνεται "διαισθητικό";).

Σε αυτό, ο Jared ισχυρίστηκε ότι είχε ανακαλύψει δύο συνθήκες υπό τις οποίες οι χρήστες πιστεύουν ότι αντιμετωπίζουν ενστικτώδηςδιεπαφή:

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

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

Η καλύτερη απόδειξη της ορθότητας της πρώτης διπλωματικής εργασίας είναι η διεπαφή του γίγαντα αναζήτησης Google. Δεν υπάρχει περίπτωση να το χρησιμοποιήσετε λανθασμένα, απλά δεν υπάρχει "Καμπύλη μάθησης" - οποιοσδήποτε χρήστης, ακόμη και με ελάχιστο επίπεδο γνώσεων, καταλαβαίνει τι πρέπει να κάνει.

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

Αποδεικνύεται ότι υπάρχουν δύο τρόποι για να δημιουργήσετε ένα διαισθητικό σχέδιο.

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

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

Ωστόσο, μπορείτε να χρησιμοποιήσετε και τις δύο μεθόδους ταυτόχρονα.

Διαισθητική πλοήγηση και αναζήτηση ιστότοπου

Πριν από 3 χρόνια ο Mike Volpe, ειδικός στο , δημιούργησε γράφημα πίτας, απεικονίζοντας με σαφήνεια τα αιτήματα των επισκεπτών για το σχεδιασμό πόρων ιστού (είναι σαφές ότι το διάγραμμα ήταν αποτέλεσμα προσεκτικής έρευνας).

Έτσι, σύμφωνα με αυτό το διάγραμμα, το 76% των ερωτηθέντων ήταν οι περισσότεροι σημαντικός παράγονταςο σχεδιασμός του πόρου έλαβε υπόψη την ευκολία αναζήτησης από εσωτερικό περιεχόμενο (αυτή τη μελέτηαφορούσε γενικά τη σφαίρα του ηλεκτρονικού εμπορίου, σημ.). Πρώτα απ 'όλα, φυσικά, ήθελαν να βρουν το ίδιο το μενού.

Εδώ βρίσκεται το κύριο ερώτημα: εάν ο ιστότοπός σας περιέχει τεράστιο ποσόπεριεχόμενο, τότε πώς να το δομήσω/καταλογίσω σωστά;

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

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

Μπορεί να ακούγεται αστείο, αλλά αυτή η μέθοδος περιγράφεται στο άρθρο «Ταξινόμηση καρτών: ένας οριστικός οδηγός» (2004) από την Donna Spencer, μια Αυστραλιανή παγκοσμίου φήμης ειδικό στη βελτιστοποίηση της εμπειρίας χρήστη.

Και σε τελική ανάλυση, εάν οι σχεδιαστές ιστοσελίδων, όταν δημιουργούν διεπαφές, αποδίδουν την εμπειρία και τις δεξιότητές τους σε οποιονδήποτε χρήστη, τότε θα μπορούσαν οι έμποροι να πιστεύουν επίσης ότι οι ιδέες τους για τις κατηγορίες προϊόντων συμπίπτουν με αυτές της ομάδας στόχου;

Τα στοιχεία μενού, φυσικά, θα πρέπει να έχουν ουσιαστικά ονόματα, τίποτα αφηρημένο. Οι ειδικοί συνήθως συμβουλεύουν να ονομάζουν αντικείμενα με λέξεις ενεργοποίησης: «Αγοράστε», «Επικοινωνήστε μαζί μας» κ.λπ.

Ήρθε η ώρα να θυμηθούμε τον λεγόμενο νόμο του Cassells, ο οποίος πήρε το όνομά του από τον ειδικό του Google CRO Shane Cassells:

Το 50% όλων των χρηστών δεν αγοράζουν επειδή δεν μπορούν να βρουν αυτό που ψάχνουν.

Το 50% όλων των χρηστών δεν αγοράζουν επειδή δεν μπορούν να βρουν αυτό που ψάχνουν

Γι' αυτό να έχεις καλή αναζήτησηΑπό άποψη περιεχομένου, δεν είναι απλώς σημαντικό, αλλά εξαιρετικά σημαντικό!

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

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

Παρεμπιπτόντως, βεβαιωθείτε επίσης ότι έχετε ενεργοποιήσει την "Αναζήτηση ιστότοπου" στη μέτρηση Google Analytics. Θα παρατηρήσετε ότι οι χρήστες χρησιμοποιούν ερωτήματα αναζήτησης, τείνουν να έχουν υψηλότερο ποσοστό μετατροπών (με ρωτήσεις, αυτοί οι άνθρωποι γνωρίζουν ήδη τι ψάχνουν).

Οι άνθρωποι περνούν τον περισσότερο χρόνο τους σε ιστότοπους άλλους από τους δικούς σας.

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

Τα γενικά αποδεκτά (συμβατικά, καθιερωμένα, στερεότυπα) στοιχεία αντίληψης των ιστοσελίδων είναι τα εξής:

• κάνοντας κλικ στο λογότυπο (στην επάνω αριστερή γωνία) επιστρέφει πάντα ο χρήστης στην κύρια/αρχική σελίδα.
• τελευταίο σημείο μέσα οριζόντιο μενούη πλοήγηση θα πρέπει να ονομάζεται "Επικοινωνία/Επικοινωνήστε μαζί μας" (ή είναι το κάτω στοιχείο του κατακόρυφου μενού).
• στοιχεία επικοινωνίαςπρέπει να βρίσκεται στο υποσέλιδο της σελίδας (υποσέλιδο, "υποσέλιδο").
• επιδιώξτε τη συνέπεια και τη σταθερότητα: η πλοήγηση και άλλα σημαντικά στοιχεία θα πρέπει να παραμένουν στην ίδια θέση σε οποιαδήποτε σελίδα του πόρου.
• Οι σύνδεσμοι πρέπει να διακρίνονται εύκολα από το απλό κείμενο.
• Εάν οι χρήστες μπορούν και πρέπει να κάνουν κύλιση στη σελίδα, η γραμμή κύλισης θα πρέπει να είναι ορατή και να διακρίνεται από το φόντο.
• Σε χώρες που ανήκουν στον ευρωπαϊκό πολιτισμό με την ευρεία έννοια, ο χρήστης θα διαβάσει πρώτα το περιεχόμενο που βρίσκεται στα αριστερά της σελίδας.
• τοποθετήστε μηνύματα βοήθειας και ειδοποιήσεις στη σελίδα σε μπλοκ.
• χρησιμοποιήστε τα περισσότερα κατανοητές λέξεις: «Επαφές» αντί για «Επικοινωνίες».

Ναι, υπάρχουν εξαιρέσεις στους κανόνες και μερικές φορές φέρνουν ακόμη και απροσδόκητα οφέλη. Αλλά κάθε σχεδιαστική καινοτομία είναι δύσκολη και επικίνδυνη. Δεν χρειάζεται να κολυμπήσετε αντίθετα στο ρεύμα, δεν χρειάζεται να διορθώσετε ό,τι δεν έχει σπάσει.

Πλησιάζουμε λοιπόν σταδιακά στο τελευταίο σημείο της ανάρτησής μας.

Αδικαιολόγητος κίνδυνος επανασχεδιασμού

Στο συνέδριο An Event Apart το 2012, ο Jared Spool εξέφρασε μια νέα διατριβή:

Ο επανασχεδιασμός οδηγεί σε ένα κενό στο επίπεδο γνώσης των χρηστών των πόρων του Ιστού.

Ο νόμος του Pareto λειτουργεί επίσης ανελέητα σε αυτόν τον τομέα της ανθρώπινης ύπαρξης: εκείνο το 20% των χρηστών που παράγουν το 80% του εισοδήματος κατηγορηματικά δεν αποδέχονται κανέναν επανασχεδιασμό της αγαπημένης τους επιχείρησης ηλεκτρονικού εμπορίου. Είναι ήδη συνηθισμένοι στον τρόπο που λειτουργούν τα πράγματα και όταν αλλάζετε τη σχεδίαση του ιστότοπου, τον αλλάζετε έναντι των πιο αμειβόμενων, «χρυσών» πελατών.

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

Θα πρέπει να εστιάσετε στους πιο σημαντικούς πελάτες/πελάτες σας. Το σχέδιο θα πρέπει να είναι το πιο διαισθητικό για αυτούς. Μην προσπαθείς να ευχαριστήσεις τους πάντες.

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

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

Η διεπαφή είναι ένα είδος «γέφυρας» μεταξύ του χρήστη και του συστήματος. Χρησιμοποιώντας τη διεπαφή, ο χρήστης θα μπορεί να εξηγήσει στο σύστημα τι θέλει από αυτό και το σύστημα θα το εκπληρώσει. Τι γίνεται όμως αν δεν επιτευχθεί αυτή η κατανόηση μεταξύ μηχανής και ανθρώπου; Ο χρήστης απλά θα εγκαταλείψει τον ιστότοπο. Έτσι συμπεριφέρονται οι χρήστες του Διαδικτύου σύμφωνα με το Online Marketing Institute:
— Το 85% μπορεί να εγκαταλείψει τον ιστότοπο εάν δεν του αρέσει ο σχεδιασμός της διεπαφής.
- Το 83% θα εγκαταλείψει έναν ιστότοπο εάν αναγκαστεί να κάνει πολλά κλικ για να βρει αυτό που χρειάζεται.
- Το 40% δεν θα επιστρέψει ποτέ σε έναν ιστότοπο εάν δυσκολεύτηκε να χρησιμοποιήσει την πρώτη φορά.

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

Από το άρθρο θα μάθετε:

Μια καλή διεπαφή πρέπει:

1. Να είστε διαισθητικός.

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

Μια διαισθητική διεπαφή είναι αυτή στην οποία:
1) όλα τα στοιχεία είναι χτισμένα σύμφωνα με τις αρχές της στοιχειώδους λογικής.
Ας πάρουμε για παράδειγμα έναν ιστότοπο με περιεχόμενο κειμένου (άρθρα). Η λογική του διεπαφή θα είναι η εξής:
— το όνομα του ιστότοπου βρίσκεται στο επάνω μέρος της σελίδας, κάτω από αυτό — σύντομη περιγραφήπόρος;
— παρακάτω είναι ένα μενού με ενότητες του ιστότοπου.
— ένα μπλοκ με επαφές και σχόλια στο επάνω δεξιό μέρος του μενού.
— τα άρθρα ταξινομούνται με τη σειρά που προστέθηκαν στον ιστότοπο·
— στο τέλος κάθε άρθρου υπάρχουν τα κουμπιά «επόμενο» και «προηγούμενο».
— Τα κουμπιά κατηγορίας πρέπει να είναι πάντα ορατά, ώστε να μπορείτε να μεταβείτε σε άλλη ενότητα ανά πάσα στιγμή.
— κανόνες τοποθεσίας, λεπτομερείς πληροφορίες επικοινωνίας, πληροφορίες για προγραμματιστές κ.λπ. βρίσκονται στο υποσέλιδο του ιστότοπου, αφού εκεί αναζητούνται πάντα.

Μην συγχέετε τον χρήστη με μια μη τυπική διάταξη οικείων μπλοκ, αλλά χρησιμοποιήστε αποδεδειγμένες αρχές. Το blog της μάρκετερ Heidi Cohen είναι δομημένο με σαφήνεια και λογική:

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

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

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

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

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

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

Και ένα ξεκάθαρο παράδειγμα:

2. Να είστε προβλέψιμοι.

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

Ένα παράδειγμα σχεδίασης διεπαφής προγράμματος αναπαραγωγής. Τα επάνω κουμπιά ("προηγούμενο" - "αναπαραγωγή" - "επόμενο") θα πρέπει να εκτελούν ακριβώς αυτές τις λειτουργίες και το ρυθμιστικό θα πρέπει να αλλάξει το επίπεδο έντασης.

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

Και ο διακόπτης on/off φαίνεται καθαρός όταν γίνει ως εξής:

Ένας από τους μεγαλύτερους φόβους που έχουν οι σχεδιαστές θεωρείται ότι δεν είναι πρωτότυπος. Και έτσι συχνά αποφεύγουν να χρησιμοποιούν τεχνικές που έχουν αποδειχθεί εδώ και καιρό ότι λειτουργούν και λειτουργούν, για να δημιουργήσουν «κάτι νέο και δημιουργικό». Φυσικά, δεν χρειάζεται να εμπλακείτε σε ανοιχτή λογοκλοπή. Αλλά η χρήση μοντέλων κατασκευής διεπαφής είναι ήδη γνωστά στους χρήστες τον σωστό τρόποτο κάνουν προβλέψιμο. Ποιους πόρους χρησιμοποιεί η εταιρεία σας πιο συχνά; κοινό-στόχο? Facebook, LiveJournal, Twitter, Amazon, Youtube; Χρησιμοποιήστε παρόμοιο στυλ στη διεπαφή σας, ώστε να αισθάνονται οικεία. Για παράδειγμα, εάν στοχεύετε στο YouTube, κάντε το κύριο μενού κατακόρυφο και τοποθετήστε το στην αριστερή πλευρά της σελίδας, με τη γραμμή αναζήτησης στο κέντρο στο επάνω μέρος.

3. Να είστε μινιμαλιστές.

Προσπαθώντας να τοποθετήσετε όσο το δυνατόν περισσότερες κατηγορίες, μενού, κουμπιά κ.λπ. στη διεπαφή, μόνο μεγάλη ζημιά θα του προκαλέσετε. Μια υπερβολικά γεμάτη διεπαφή είναι ένα μεγάλο εμπόδιο για την κατανόηση του χρήστη. Οτιδήποτε μπορεί να περιγραφεί σε μια φράση δεν μπορεί να περιγραφεί με τρεις. Επιπλέον στοιχεία και υποκατηγορίες σε αρχική σελίδαούτε χρήση. Οι δοκιμές θα σας βοηθήσουν να προσδιορίσετε ποια είναι «έξτρα» και ποια όχι. (για το πώς μπορεί να γίνει στο τέλος του άρθρου). Αλλά δεν πρέπει να θυσιάσετε κάτι πολύ σημαντικό - αν το γνωρίζετε χωρίς καμία εξήγηση (περισσότερα για τις παρακάτω συμβουλές)ή πρόσθετο κουμπίΘα είναι δύσκολο για τον χρήστη να το καταλάβει, μετά τοποθετήστε το στη διεπαφή, αλλά κάντε το όσο το δυνατόν πιο συνοπτικά.

Ωραίος, αλλά ταυτόχρονα αρκετά λακωνικός σχεδιασμός της διεπαφής της εφαρμογής. Δεν υπάρχει τίποτα περιττό ή μπερδεμένο - μόνο το απαραίτητο και στο σημείο.

4. Φορτώστε γρήγορα.

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

Για να κάνετε τον ιστότοπό σας πιο γρήγορο, χρησιμοποιήστε αυτές τις συμβουλές: 8 τρόποι.

5. Εμφάνιση όλων των σημαντικών επιλογών.

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

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

Τα κουμπιά για τις προτιμώμενες ενέργειες των χρηστών πρέπει να ξεχωρίζουν από τα άλλα. Εδώ είναι το κουμπί "Προσθήκη στο καλάθι".

6. Να είναι σε θέση να επικοινωνεί με τον χρήστη.

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

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

7. Έχετε διαφορετικά στυλ για κουμπιά με διαφορετικούς τύπους ενεργειών.

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

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

Σε αυτή τη σελίδα είναι αμέσως σαφές ότι βρισκόμαστε στην ενότητα "Υπηρεσίες" και επισημαίνεται με κόκκινο χρώμα. Επιστρέφοντας στο σημείο 5, το σημειώνω εδώ στοχευόμενη δράση— αγορά, ώστε το κουμπί «αγορά» να τονίζεται στο φόντο των άλλων και να είναι ογκώδες.

8. Να είστε ελκυστικοί.

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

Αλλά μην το ξεχνάτε αυτό όμορφο σχέδιο– υποκειμενικό πράγμα. Δεν θα μπορέσετε να το κάνετε εξίσου όμορφο για όλους, όσο κι αν προσπαθήσετε. Συμφωνήστε ότι όταν αναπτύσσετε έναν πόρο για μαθητές γυμνασίου και έναν πόρο για λογιστές, θα χρειαστεί να λάβετε διαφορετικές αποφάσεις σχεδιασμού. Επομένως, πρώτα απ 'όλα, εστιάστε στο κοινό-στόχο σας και στις ανάγκες του.

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

9. Επιτρέψτε την εξατομίκευση.

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

Στην υπηρεσία Trello, μπορείτε να αλλάξετε το φόντο σε διαφορετικό χρώμα ή εικόνα.

Και έτσι μπορείτε να εξατομικεύσετε τον λογαριασμό σας στο Twitter:

10. Να είστε ανεκτικοί στα λάθη των χρηστών.

Και όμως, θα υπάρχουν πάντα χρήστες που δεν θα μπορούν να καταλάβουν αμέσως αυτό ή εκείνο το σημείο όταν εργάζονται με τη διεπαφή. Θα κάνουν λανθασμένες ενέργειες και εδώ η διεπαφή αντιμετωπίζει το καθήκον να βεβαιωθεί ότι αυτά τα σφάλματα μπορούν να διορθωθούν γρήγορα. Εάν ένας χρήστης διαγράψει κατά λάθος πληροφορίες που χρειάζεται, θα πρέπει να του δοθεί η ευκαιρία να τις επαναφέρει. Ένας χρήστης που σκοντάφτει σε λάθος σελίδα θα πρέπει να μπορεί να επιστρέψει γρήγορα προηγούμενη σελίδαή τμήμα πατώντας το κουμπί πίσω. Για να αποφευχθούν λανθασμένες ενέργειες, η διεπαφή θα πρέπει να ρωτήσει ξανά τον χρήστη εάν θέλει πραγματικά να το κάνει αυτό. Για παράδειγμα, «Στο κλείσιμο τρέχουσα σελίδαΗ λήψη του αρχείου θα διακοπεί. Θέλετε πραγματικά να το κάνετε αυτό;. Ωστόσο, μην το παρακάνετε με τέτοιες ερωτήσεις, διαφορετικά θα γίνει ενοχλητικό.

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

11. Μιλήστε τη γλώσσα του χρήστη.

Όλο το κείμενο διεπαφής και τυχόν σύμβολα πρέπει να δημιουργηθούν για το κοινό-στόχο του πόρου. Όλα είναι προφανή εδώ: εάν φτιάχνετε έναν εκπαιδευτικό ιστότοπο για παιδιά προσχολικής ηλικίας, τότε το κείμενο της διεπαφής θα πρέπει να είναι γραμμένο σε "παιδική" γλώσσα. Εάν έχετε ένα πρόγραμμα για προχωρημένους webmasters, τότε μπορείτε να χρησιμοποιήσετε με ασφάλεια συγκεκριμένους όρους χωρίς εξήγηση - το κοινό-στόχο τους γνωρίζει ήδη. Και αν αυτή είναι μια υπηρεσία για αρχάριους, τότε η γλώσσα θα πρέπει να είναι όσο το δυνατόν πιο απλή.

12. Παρέχετε τον βέλτιστο αριθμό επιλογών.

Όσο περισσότερες επιλογές προσφέρετε στον χρήστη, τόσο λιγότερες είναι οι πιθανότητες να λάβει κάποια από αυτές. Εάν υπάρχουν πραγματικά πολλές επιλογές και είναι αδύνατο να τις μειώσετε (για παράδειγμα, ένας κατάλογος προϊόντων), χρησιμοποιήστε τη λειτουργία συστάσεων. Για παράδειγμα, προσφέρετε δέκα επιλογές προϊόντων σε μία σελίδα, αλλά επισημαίνετε μία ή δύο από αυτές στην κατηγορία "Συνιστούμε". Ο πελάτης θα δώσει προσοχή σε αυτά τα προϊόντα, γεγονός που μπορεί να κάνει την επιλογή του ευκολότερη.

Αυτό μπορεί επίσης να εφαρμοστεί χρησιμοποιώντας το μπλοκ "Bestsellers", όπως φαίνεται στο παράδειγμα.

13. Δώστε απαλές υποδείξεις.

Οι συμβουλές εργαλείων είναι πολύ καλές. Βοηθούν τον χρήστη να καταλάβει πλήρως τι δεν μπορούσε να καταλάβει μόνος του. Το κύριο ερώτημα παραμένει πώς να γίνουν τέτοιες προτροπές αποτελεσματικές και όχι ενοχλητικές. Θυμηθείτε τον βοηθό συνδετήρων από νωρίς εκδόσεις της MicrosoftΛέξη; Η εταιρεία απενεργοποίησε αυτή τη δυνατότητα ακριβώς επειδή προκάλεσε πολλά αρνητικά συναισθήματα στους χρήστες και δέχτηκε κριτική.

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

14. Σκουρύνετε το φόντο κάτω από τα παράθυρα modal.

Ένα modal παράθυρο μπλοκάρει την εργασία του χρήστη μέχρι να κλείσει το παράθυρο ή να εκτελέσει κάποια ενέργεια σε αυτό. Ένα τέτοιο παράθυρο πρέπει να τονιστεί με κάποιο τρόπο στη συνολική εικόνα. Ο καλύτερος τρόπος για να γίνει αυτό είναι να σκουρύνετε το φόντο που βρίσκεται από κάτω. Όσο πιο σκούρο είναι το φόντο, τόσο μεγαλύτερη έμφαση θα δίνεται στο modal παράθυρο και ο χρήστης θα καταλάβει ότι πρέπει να εκτελέσει κάποιες ενέργειες σε αυτό.

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

15. Έχετε σύντομες φόρμες εγγραφής.

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

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

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

16. Να έχετε απλές αρχές για τη συμπλήρωση πεδίων.

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

1. Κατά τη συμπλήρωση διαφορετικών πεδίων («πόλη», «οδός», «ημερομηνία γέννησης»), καλό θα ήταν να δίνετε συμβουλές στον χρήστη χρησιμοποιώντας ένα αναπτυσσόμενο μενού (αναπτυσσόμενο μενού), ώστε να μην χρειάζεται να πληκτρολογήστε τα όλα χειροκίνητα, αλλά απλώς επιλέξτε η σωστή επιλογήαπό τη λίστα.

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

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

4. Μειώστε την πιθανότητα λανθασμένης συμπλήρωσης της φόρμας όσο το δυνατόν περισσότερο.
Φανταστείτε την κατάσταση. Αρχίζετε να εισάγετε τον αριθμό τηλεφώνου σας στο πεδίο. Αφού συμπληρώσετε για πρώτη φορά, το σύστημα σας λέει: «Ο αριθμός τηλεφώνου πρέπει να εισαχθεί σε 10ψήφια μορφή». Το εισάγετε ξανά και το σύστημα σας λέει: «Ο αριθμός τηλεφώνου δεν πρέπει να περιέχει παύλες». Και εδώ θα αρχίσετε να νευριάζετε και να βρίζετε ψυχικά αυτόν τον ιστότοπο (ή ίσως όχι διανοητικά). Ιδανικό σχήμαείσοδος είναι όταν ο χρήστης μπορεί να γράψει οτιδήποτε σε αυτό και το σύστημα δεν θα του πει "λάθος". Φυσικά, η επεξεργασία δεδομένων θα είναι κάπως δύσκολη, αφού θα πρέπει να επεξεργαστείτε κάποια αιτήματα χειροκίνητα. Αλλά ο κύριος στόχος σας είναι να δέχεστε παραγγελίες και όχι να ξεφορτώνετε τους ανυπόμονους πελάτες.

17. Παρέχετε βολικές επιλογές ελέγχου.

Εάν χρησιμοποιούμε κυρίως το ποντίκι σε ιστότοπους (εκτός τυπικά χαρακτηριστικά«αντιγραφή/επικόλληση» κ.λπ.), στη συνέχεια σε προγράμματα και εφαρμογές είναι συχνά βολικό να τα ελέγχετε από το πληκτρολόγιο. Επιτρέψτε στους χρήστες να επιλέξουν τον τύπο ελέγχου που προτιμούν και να δείξουν ποια λειτουργία αντιστοιχεί σε ποιον συνδυασμό πλήκτρων.

Πώς να δοκιμάσετε μια διεπαφή για χρηστικότητα;

Όπως υποσχέθηκα στην αρχή του άρθρου, θα σας πω λίγα λόγια για τη δοκιμή διεπαφής. Γιατί είναι αυτό τόσο σημαντικό;
— πρώτον, κατά την ανάπτυξη της διεπαφής, θα μπορούσαν να έχουν εισχωρήσει σφάλματα που θα επηρέαζαν τη λειτουργία ολόκληρου του προγράμματος ή του πόρου·
- δεύτερον, δεν θα μπορείτε ποτέ να μαντέψετε αμέσως με τη βέλτιστη σχεδίαση διεπαφής που θα γίνει τέλεια αντιληπτή από την πλειοψηφία των χρηστών.
— τρίτον, η διεπαφή μπορεί να εμφανίζεται κανονικά σε μια συσκευή (ή πρόγραμμα περιήγησης) και να είναι εντελώς ασύμβατη με μια άλλη.

Η δοκιμή μπορεί να λύσει όλα αυτά τα προβλήματα. Πώς μπορεί να επιτευχθεί αυτό;

1. Χειροκίνητα.

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

2. Με αυτοματοποιημένο τρόπο.

Αυτή η μέθοδος δοκιμής πραγματοποιείται με τη χρήση ειδικών λογισμικό, που φαίνεται να μιμούνται τις ενέργειες ενός ζωντανού ατόμου κατά τη διάρκεια των χειροκίνητων δοκιμών. Τέτοιες δοκιμές δεν απαιτούν ανθρώπινη συμμετοχή, επομένως η ταχύτητα εφαρμογής της αυξάνεται και το κόστος των χρημάτων μειώνεται. Υπάρχει ένα μεγάλο «αλλά» εδώ. Οι αυτοματοποιημένες δοκιμές δεν μπορούν να δώσουν 100% αποτελέσματα, καθώς πραγματοποιείται μόνο σύμφωνα με τυπικά χαρακτηριστικά (αυτά που είναι γραμμένα στο πρόγραμμα) και δεν παρέχει την ευκαιρία να βρεθούν ελαττώματα χρηστικότητας που μπορούν να γίνουν αντιληπτά μόνο από τον άνθρωπο (για παράδειγμα, χρωματικός συνδυασμός της διεπαφής).

3. Χρήση ομάδων εστίασης.

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

Φάω ειδικές υπηρεσίες, με το οποίο μπορείτε εύκολα να βρείτε άτομα για τη διεξαγωγή τέτοιου είδους δοκιμών. Για παράδειγμα, Askusers, Wise Test, Usabilla.

Ένα ξεκάθαρο παράδειγμα δοκιμής διεπαφής χρήστη

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

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

Αποδείχθηκε έτσι:

2. Μια έρευνα σε δοκιμασμένους χρήστες έδειξε ότι σχεδόν όλοι σκέφτονται πλαϊνή μπάραΗ υπηρεσία είναι πολύ γεμάτη και άβολη στη χρήση. Αρχικά η σελίδα έμοιαζε με αυτό:

Και εδώ είναι η διάταξη της νέας σελίδας:

Δείτε τα πλήρη αποτελέσματα αυτής της δοκιμής.

Και εν κατακλείδι.

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

Όσο πιο απλός είναι ο ιστότοπος, τόσο περισσότερους χρήστες έχει. Η ευκολία χρήσης καθορίζεται από τη διαισθητική κατανόηση του χρήστη διεπαφή ιστότοπου.

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

Φανταστείτε ότι βρίσκεστε σε μια αντιπροσωπεία ενοικίασης αυτοκινήτων και σας δείχνουν το αυτοκίνητο που πρόκειται να νοικιάσετε. Την πλησιάζεις και θέλεις να καθίσεις στο σαλόνι, απλώνεις το χέρι σου για να ανοίξεις την πόρτα, αλλά πόμολοΌχι! Πώς να μπείτε στο αυτοκίνητο;

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

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

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

Το πρόβλημα με το σχεδιασμό διεπαφών: διαισθητικό για ποιον;

Γιατί υπάρχουν τόσοι πολλοί ιστότοποι που εκνευρίζουν τους ανθρώπους; Το θέμα είναι ότι η δημιουργία μιας διαισθητικής φιλική προς το χρήστη διεπαφήτοποθεσίαπραγματικά δύσκολο. Αυτό που είναι ξεκάθαρο σε ένα άτομο είναι εντελώς ασαφές για ένα άλλο. Ένα σχέδιο δεν μπορεί να είναι διαισθητικό.

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

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

Τρέχουσα γνώση και γνώση στόχου

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

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

Εννοιολογικά μοντέλα

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

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

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

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

Εάν ο ιστότοπος δεν ταιριάζει με το νοητικό μοντέλο του χρήστη, θα βρει τον ιστότοπο δύσκολο στη χρήση και όχι διαισθητικό.

Γνωρίστε τους χρήστες σας

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

Υπάρχουν δύο υπέροχους τρόπουςανακαλύψτε αυτό:

Παρατήρηση. Απευθυνθείτε στους πελάτες σας και παρατηρήστε τους καθώς χρησιμοποιούν τον ιστότοπο στις συνήθεις ρυθμίσεις τους. Αυτό θα σας δώσει μια ιδέα για τις τρέχουσες γνώσεις τους.

Δοκιμή χρηστικότητας "Standing over your shoulder".

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

Και στις δύο περιπτώσεις παρατηρείς και καταγράφεις χωρίς να παρεμβαίνεις. Θα εντοπίσετε γρήγορα τα κύρια προβλήματα. 10 θέματα δίνουν συνήθως μια ιδέα για το 90% των δυσκολιών.

Πότε μπορεί ένας ιστότοπος να θεωρηθεί διαισθητικός;

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

1. τους φαίνεται "διαισθητικό":
2. Η τρέχουσα γνώση είναι πανομοιότυπη με τη γνώση στόχου. Όταν ένας χρήστης βλέπει ένα σχέδιο, γνωρίζει όλα όσα χρειάζεται για να εργαστεί με αυτό και να ολοκληρώσει την εργασία του.

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

, ενδείξεις που είναι εύκολο να εντοπιστούν. Το καλύτερο παράδειγμα της πρώτης συνθήκης είναιΑναζήτηση Google

. Δεν μπορεί να χρησιμοποιηθεί εσφαλμένα.

Ένα καλό παράδειγμα της δεύτερης συνθήκης είναι το Wufoo. Όταν ξεκινάτε να δημιουργείτε την πρώτη σας φόρμα, οι οδηγίες σας καθοδηγούν και η διαδικασία εκμάθησης είναι φυσική.

Υπάρχουν δύο έξυπνες επιλογές σχεδίασης. Μπορείτε να μειώσετε τις απαιτήσεις γνώσης στόχου ώστε να ταιριάζουν με τις τρέχουσες γνώσεις απλοποιώντας τη σχεδίαση ή μπορείτε να φέρετε την τρέχουσα γνώση ώστε να ταιριάζει με τον στόχο μέσω οδηγιών.

Το 76% των χρηστών λέει ότι το πιο σημαντικό πράγμα για αυτούς στη σχεδίαση ιστοσελίδων είναι «να βρίσκω εύκολα αυτό που θέλω».

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

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

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

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

Οι άνθρωποι αισθάνονται πιο άνετα χρησιμοποιώντας τοποθεσίες που έχουν συνηθίσει

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

Τυπικά γνωστά στοιχεία:

• Κάνοντας κλικ στο λογότυπο που βρίσκεται στην επάνω αριστερή γωνία θα πρέπει πάντα να επιστρέφετε στην κύρια σελίδα.
• Ο τελευταίος σύνδεσμος στο οριζόντιο μενού ή ο κάτω σύνδεσμος κατακόρυφο μενού- αυτές είναι επαφές.
• Τα στοιχεία επικοινωνίας θα πρέπει να παρέχονται στο κάτω μέρος του ιστότοπου.
• Να είστε συνεπείς: Η πλοήγηση και άλλα σημαντικά στοιχεία θα πρέπει να παραμένουν στην ίδια θέση σε οποιαδήποτε σελίδα στον ιστότοπο.
• Οι σύνδεσμοι ξεχωρίζουν έναντι του απλού κειμένου.
• Εάν οι χρήστες μπορούν να κάνουν κύλιση προς τα κάτω, η γραμμή κύλισης θα πρέπει να είναι καθαρά ορατή.
• Το κείμενο με αριστερή στοίχιση είναι πιο ευανάγνωστο από το κείμενο με τη δεξιά στοίχιση.
• Εμφάνιση αναδυόμενων μηνυμάτων βοήθειας και ειδοποιήσεων,
• Στο σχεδιασμός διεπαφών ιστοσελίδωνχρησιμοποιήστε σαφείς που μπορούν να κατανοήσουν οι χρήστες.

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

Να είστε προσεκτικοί με τον επανασχεδιασμό

Το 20% των χρηστών ξοδεύουν το 80% του εισοδήματός τους στο Διαδίκτυο. Και είναι αυτοί οι άνθρωποι που επηρεάζονται από την αλλαγή στο σχεδιασμό. Είναι συνηθισμένοι στον τρόπο που λειτουργούν τα πράγματα και όταν επανασχεδιάζετε έναν ιστότοπο, τον αλλάζετε κυρίως για αυτούς.

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

Ένας μεγάλος λιανοπωλητής ξόδεψε 100 εκατομμύρια δολάρια σε έναν επανασχεδιασμό, με αποτέλεσμα οι πωλήσεις να πέφτουν κατά 20%. Το δικηγορικό γραφείο έπρεπε να κλείσει. Υπάρχουν μεγάλες καθυστερήσεις στα δρομολόγια των γιατρών και των αεροπορικών εταιρειών. Οι ιστότοποι/οι εφαρμογές τους δεν είναι πλέον διαισθητικοί για τους περισσότερους χρήστες.

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

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

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

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

Επιτρέψτε μου να σας δώσω μερικά αποσπάσματα από τη συλλογή μου.

Βίκτορ Παπανέκ:
Ο σχεδιασμός είναι η συνειδητή και διαισθητική προσπάθεια για τη δημιουργία ουσιαστικής τάξης.

Θεώρησα απαραίτητο να προσθέσω τη λέξη "διαισθητικό" στον ορισμό μου για το σχέδιο μόνο στο τα τελευταία χρόνια. Η συνείδηση ​​περιλαμβάνει νοημοσύνη, εγκεφαλική λειτουργία, έρευνα και ανάλυση. Αυτό που έλειπε από τον αρχικό ορισμό ήταν η πλευρά της δημιουργικής διαδικασίας που βασίζεται στην αίσθηση/συναίσθημα. Δυστυχώς, η διαίσθηση είναι δύσκολο να οριστεί ως διαδικασία ή ικανότητα. Ωστόσο, η επιρροή του στο σχεδιασμό είναι αρκετά σημαντική. Εξάλλου, χάρη στη διαισθητική διορατικότητα μπορούμε να φανταστούμε πώς αλληλεπιδρούν αυτές οι εντυπώσεις, οι ιδέες και οι σκέψεις που έχουμε συσσωρεύσει απαρατήρητα σε υποσυνείδητο, ασυνείδητο ή προσυνείδητο επίπεδο. Ο μηχανισμός της διαισθητικής σκέψης στο σχεδιασμό είναι δύσκολο να αναλυθεί, αλλά μπορεί να εξηγηθεί με ένα παράδειγμα. Οι Watson και Crick ένιωσαν διαισθητικά ότι η δομή του μορίου του DNA θα μπορούσε να εκφραστεί πιο κομψά από μια έλικα. Με αυτό το διαισθητικό προαίσθημα ξεκίνησαν την έρευνά τους. Η ενστικτώδης γνώση δικαιώθηκε: Το DNA είναι πράγματι μια σπείρα!

Vlad Golovach:
Η γνώμη του Vlad μπορείτε να διαβάσετε στο blog μου
http://valiullin.livejournal.com/14635.html
Δεν το συμπεριέλαβα εδώ γιατί το πλαίσιο είναι σημαντικό.

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

Τζεφ Ράσκιν:
Ένας από τους πιο επαινεμένους όρους που χρησιμοποιούνται για τις διεπαφές είναι η λέξη "διαισθητικός". Μετά από πιο προσεκτική εξέταση, αυτή η έννοια εξαφανίζεται εντελώς όπως μια μπάλα σε μια δακτυλήθρα και αντικαθίσταται από τον απλούστερο όρο «οικείο».

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

Βρήκα πρόσφατα μια δήλωση είτε από τον Bruce Ediger είτε από τον Steve Jobs (δεν μπορούσαν να προσδιορίσουν τον συγγραφέα):
Η μόνη «διαισθητική» διεπαφή είναι η θηλή. Μετά από αυτό όλα μαθαίνονται.
Μόνο η πιπίλα έχει μια διαισθητική διεπαφή. Όλα τα υπόλοιπα πρέπει να μελετηθούν (η ελεύθερη μετάφραση μου).

Μου φαίνεται ότι η κατανόηση του εάν η έννοια της διαισθητικής διεπαφής υπάρχει είναι μια σημαντική περίσταση για έναν σχεδιαστή διεπαφής.

Από αυτή την άποψη, ήθελα να σε ρωτήσω Artyom, τι πιστεύεις για τις έξυπνες διεπαφές;

Κρίνοντας από την απάντησή σου, συμφωνείς με την άποψη του Άλαν Κούπερ. Αλλά είμαι πιο κοντά στη γνώμη του Jef Raskin με μια μικρή επιφύλαξη από τον Ediger-Jobs για την πιπίλα.