PROMETHEUS

Όλες οι καταχωρήσεις

Ο Νόμος Fitts και το Μέγεθος Κουμπιού

Ένας τύπος από το 1954 εξηγεί γιατί μερικά κουμπιά αγγίζονται αβίαστα ενώ άλλα σας κάνουν να χάνετε τον στόχο ξανά και ξανά.

Ο Νόμος Fitts και το Μέγεθος Κουμπιού

Ο Νόμος Fitts είναι ένα κομμάτι έρευνας ανθρώπινων παραγόντων από το 1954, και παραμένει μία από τις πιο αξιόπιστα επαληθευμένες αρχές στην ψυχολογία. Ο Paul Fitts μελέτησε πόσο χρόνο χρειάζεται να μετακινήσει κανείς έναν δείκτη σε έναν στόχο και βρήκε ότι ο χρόνος αυτός εξαρτάται από δύο μεταβλητές: την απόσταση από τον στόχο και το μέγεθός του. Όσο μεγαλύτερος και πιο κοντά είναι ο στόχος, τόσο πιο γρήγορα και με λιγότερα λάθη τον πατάμε. Όσο μικρότερος και πιο μακριά, τόσο περισσότερο χρόνο χάνουμε και τόσο περισσότερα λάθη κάνουμε.

Σε υπολογιστή με ποντίκι αυτό έχει μικρότερη σημασία. Στην οθόνη αφής του κινητού, το βασικό εργαλείο είναι ο αντίχειρας. Η έρευνα του MIT Touch Lab δείχνει ότι το μέσο πλάτος δακτύλου είναι 8 έως 10 χιλιοστά, ενώ το μαξιλαράκι αντίχειρα φτάνει τα 25 χιλιοστά. Δεν είναι σημείο, είναι επιφάνεια επαφής. Και αντίθετα με τον κursor, ο αντίχειρας πρέπει να διανύσει πραγματική φυσική απόσταση στο γυαλί της οθόνης.

Γι' αυτό κάθε μεγάλη πλατφόρμα έχει ελάχιστες οδηγίες για το μέγεθος στόχου αφής, και συμφωνούν περισσότερο από ό,τι νομίζουν οι περισσότεροι. Οι Οδηγίες Διεπαφής Ανθρώπου της Apple (Human Interface Guidelines) ορίζουν ελάχιστη περιοχή αφής 44x44 points από το πρώτο iPhone το 2007. Το Material Design της Google συστήνει 48x48 ανεξάρτητα από πυκνότητα pixels, με 8 pixels κενό ανάμεσα σε γειτονικά στοιχεία. Το WCAG 2.5.8, νέα απαίτηση επιπέδου AA στην έκδοση 2.2 των Οδηγιών Προσβασιμότητας Ιστού, θέτει νομικό ελάχιστο 24x24 CSS pixels ή επαρκές κενό γύρω από κάθε στοιχείο ώστε μια αστοχία να μην ενεργοποιεί τίποτα άλλο.

Η Apple ορίζει ελάχιστο 44 points, το Material Design της Google 48 pixels και το WCAG 2.5.8 κατώφλι 24 pixels: τα τρία ελάχιστα μεγέθη στόχου αφής, σχεδιασμένα υπό κλίμακα.
Η Apple ορίζει ελάχιστο 44 points, το Material Design της Google 48 pixels και το WCAG 2.5.8 κατώφλι 24 pixels: τα τρία ελάχιστα μεγέθη στόχου αφής, σχεδιασμένα υπό κλίμακα.

Αυτοί οι αριθμοί δεν είναι αυθαίρετοι. Η έρευνα δείχνει ότι στόχοι κάτω από 7 χιλιοστά ανεβάζουν απότομα τα ποσοστά αστοχίας, ενώ στόχοι γύρω στα 9-10 χιλιοστά τα κρατούν χαμηλά. Σε σύγχρονο iPhone, ένας στόχος 44 points μετράει περίπου 7 χιλιοστά, δηλαδή ακριβώς στο κάτω άκρο της καμπύλης σφαλμάτων. Γι' αυτό η σύσταση της Apple είναι το κατώτατο όριο, όχι ο στόχος που πρέπει να επιτύχουμε.

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

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

Ένα πραγματικό παράδειγμα το καθιστά ξεκάθαρο. Μια ομάδα σχεδιασμού εντόπισε δύο κουμπιά, 44 points ύψος το καθένα αλλά μόνο 4 points απόσταση μεταξύ τους, με ποσοστό αστοχίας 11%. Δεν μεγάλωσαν τα κουμπιά. Αύξησαν το κενό στα 12 points. Το ποσοστό αστοχίας έπεσε από 11% στο 2%. Η απόσταση, όχι το μέγεθος, ήταν το κυρίαρχο πρόβλημα.

Αυξάνοντας το κενό μεταξύ δύο κουμπιών 44 points από 4 σε 12 points, το ποσοστό αστοχίας έπεσε από 11% στο 2%. Η απόσταση, όχι το μέγεθος, ήταν ο κυρίαρχος παράγοντας.
Αυξάνοντας το κενό μεταξύ δύο κουμπιών 44 points από 4 σε 12 points, το ποσοστό αστοχίας έπεσε από 11% στο 2%. Η απόσταση, όχι το μέγεθος, ήταν ο κυρίαρχος παράγοντας.

Πώς το εφαρμόζουμε: κάθε διαδραστικό στοιχείο που κατασκευάζουμε ξεκινά από 44x44 points ως απόλυτο ελάχιστο, συνήθως 48 CSS pixels ώστε να ευθυγραμμιζόμαστε με τη σύσταση του Material Design και να έχουμε ένα μικρό περιθώριο πάνω από το κάτω όριο σφαλμάτων. Δίνουμε τουλάχιστον 8 pixels ελεύθερο χώρο ανάμεσα σε στοιχεία που στοιβάζονται κάθετα. Και τοποθετούμε τις κύριες ενέργειες, επικοινωνία, τηλέφωνο, αίτημα προσφοράς, στη ζώνη κάτω-κέντρο όπου φτάνει φυσικά ο αντίχειρας. Στο κινητό, ένα κουμπί που δυσκολεύεσαι να πατήσεις είναι σπασμένο κουμπί. Η πειθαρχία ως προς τα μεγέθη στόχου είναι ακριβώς η ίδια πειθαρχία με αυτή του χρόνου φόρτωσης: αφαίρεση περιττής τριβής.

PROMETHEUS

Το έργο σας, πάντα κοντά σας

Έχετε έργο μαζί μας; Εγκαταστήστε την εφαρμογή Prometheus για να βλέπετε την πρόοδο, τα μηνύματα και τα αρχεία, όποτε θέλετε.

Ανοίξτε το μενού του browser και επιλέξτε «Εγκατάσταση» ή «Προσθήκη στην αρχική οθόνη».