Πώς η επανάσταση της οθόνης αφής επηρεάζει το UX
Η εισαγωγή των Windows 8 πραγματοποίησε μια μαζική αναθεώρηση του περιβάλλοντος εργασίας των Windows, σύμφωνα με τη διασύνδεση των Windows Phone, προκειμένου να είναι πιο διαισθητική για τους ανθρώπους που χρησιμοποιούν οθόνες αφής και η Apple έχει προσαρμόσει απαλά το OSX με την πάροδο του χρόνου, εξορθολογώντας χαρακτηριστικά που γίνονται ολοένα και πιο κοινά σε όλα τα λειτουργικά συστήματα κινητών και επιτραπέζιων υπολογιστών. Ενώ δεν έχουμε δει ακόμη ένα Mac με οθόνη αφής, είναι προφανές ότι η επανάσταση της οθόνης αφής είναι απειλητική για εμάς με τους χρήστες που δαπανούν όλο και περισσότερο χρόνο στις κινητές τους συσκευές από τους οικιακούς υπολογιστές.
Με αυτό το πνεύμα και όλο και μεγαλύτερο ποσοστό της περιήγησης που πραγματοποιείται σε smartphones και tablet, οι ιστότοποι πρέπει να αποφασίσουν πώς θα προσαρμοστούν στα άτομα που έχουν πρόσβαση στο περιεχόμενό τους χωρίς ποντίκι και πληκτρολόγιο. Παρόλο που η προεπιλεγμένη απάντηση σε αυτό συχνά ήταν «απλά να δημιουργήσουμε μια ξεχωριστή κινητή διασύνδεση!», Μια λύση που έχει λειτουργήσει πολύ στο παρελθόν σε μικρότερες κινητές συσκευές, όπως τα τηλέφωνα, υπάρχουν ελάχιστα περιθώρια για τη μεσαία ομάδα που καταλαμβάνεται από μεγαλύτερο τηλέφωνο και εμφανίζει ταμπλέτα.
Αυτό το άρθρο θα ρίξει μια ματιά σε μια σειρά από τοποθεσίες που έχουν μειωθεί τόσο ασυνήθιστο όσο και τυποποιημένο σχέδιο ιστοσελίδων για να γίνει πιο φιλική προς το χρήστη.
Εστιασμένοι ιστότοποι έναντι ανταποκρινόμενων ιστότοπων
Πολλοί ιστότοποι έχουν δημιουργήσει θυγατρικές ιστοσελίδες ή εφαρμογές ειδικά για χρήστες με οθόνη αφής, για να τους επιτρέψουν να εστιάζουν σε έναν τύπο χρήστη κάθε φορά. Ένα πρόβλημα είναι ότι, δεδομένου ότι οι ιστότοποι είναι ξεχωριστοί, βασίζονται στην ανακατεύθυνση διευθύνσεων URL, οι οποίες συχνά μπορούν να οδηγήσουν σε προβλήματα όπως ο χρήστης που αποστέλλεται σε λάθος ιστό από συνδέσμους ή η κακή ανακατεύθυνση ως αποτέλεσμα της ανάγκης ανακατεύθυνσης σε μορφοποιημένες σελίδες για χρήστες κινητής τηλεφωνίας.
Το μεγαλύτερο πρόβλημα με ξεχωριστές ιστοσελίδες για χρήστες κινητών είναι ωστόσο ότι συχνά η έκδοση για κινητά δεν διαθέτει χαρακτηριστικά ή πληροφορίες που λαμβάνει ένας χρήστης επιφάνειας εργασίας. τα χαρακτηριστικά και οι διασυνδέσεις συχνά απλουστευμένες, τα κουμπιά διευρύνονται και οι επιλογές μειώνονται. Αυτό μπορεί να λυθεί με τη χρήση ενός σχεδίου «ανταποκρινόμενου». Ένας ανταποκρινόμενος ιστότοπος έχει σχεδιαστεί για να μπορεί εύκολα να προβληθεί και στις δύο πλατφόρμες χωρίς να χάσει την ποιότητα σε κανένα από αυτά. Αυτό έχει επίσης το πλεονέκτημα ότι μόνο ένας ιστότοπος πρέπει να σχεδιαστεί, παρά δύο, ωστόσο αυτό συχνά οδηγεί σε συμβιβασμούς και για τις δύο πλατφόρμες.
Βασικές διαφορές σχεδιασμού
Υπάρχουν εμφανείς διαφορές μεταξύ μιας οθόνης αφής και μιας επιφάνειας εργασίας στην οποία πρέπει να σκεφτείτε κατά τη δημιουργία της ιστοσελίδας σας. Σε μια οθόνη αφής, σύρετε προς τα πάνω τη σελίδα για να μετακινηθείτε προς τα κάτω, ωστόσο σε μια επιφάνεια εργασίας μετακινείτε το τροχό κύλισης προς τα κάτω. Η Apple προσπάθησε να διορθώσει αυτή την κατάσταση ενισχύοντας τις τεχνολογίες διεπαφής αφής σε trackpads τόσο στους φορητούς υπολογιστές τους όσο και στους υπολογιστές Mac, ωστόσο οι χρήστες υπολογιστών ή ακόμη και χρήστες Mac που χρησιμοποιούν συμβατικούς τροχούς κύλισης ή ρυθμιστικά για να μετακινηθούν μέσω ιστοσελίδων είναι σε μειονεκτική θέση.
Τα κουμπιά πρέπει να είναι πολύ μεγαλύτερα σε κινητές συσκευές, καθώς η λήψη δεν είναι σχεδόν τόσο ακριβής όπως το κλικ με ένα ποντίκι, δεν υπάρχει τίποτα πιο εξευτελιστικό παρά να προσπαθήσουμε να κάνουμε κλικ σε μια σύνδεση για την επόμενη σελίδα και να επιστρέψουμε τυχαία μια σελίδα ή μια αγγελία. Η έλλειψη ενός δρομέα σημαίνει επίσης ότι δεν μπορείτε να έχετε αιωρήσεις κρατών για να εξηγήσετε πού πηγαίνει ένας σύνδεσμος, τι σημαίνει μια λέξη ή ακόμα και τι είναι clickable.
Υπάρχει επίσης μια διαφορά μεταξύ της ακρίβειας στις κινητές εισόδους δεδομένου ότι οι οθόνες αφής μπορούν να έχουν είτε αντιστάσεις είτε χωρητικές εισόδους που έχουν ποικίλες ευαισθησίες και στη συνέχεια η ακρίβεια μπορεί να χαθεί σε οθόνες αφής αντιστάσεων. Πέρα από αυτό, τα σχέδια πρέπει να ενσωματώνουν δύο εξαιρετικά διαφορετικές αναλύσεις για κινητές συσκευές που έχουν δύο προσανατολισμούς.
Ο προσανατολισμός της οθόνης και ο λόγος διαστάσεων
Με πολλαπλές αναλύσεις πέρα από τα κανονικά μεγέθη οθόνης σημαίνει ότι δεν μπορείτε πλέον να σκέφτεστε απλώς όσον αφορά τις τυποποιημένες αναλύσεις οθόνης και την κάθετη κίνηση. Οι ταχείες αλλαγές στην αγορά τεχνολογίας έχουν προκαλέσει μεγέθη οθόνης που διαφέρουν από το μοντέλο και τον κατασκευαστή και με όλες τις φήμες για τα αποκαλούμενα έξυπνα ρολόγια μπορεί να αρχίσουμε να βλέπουμε οθόνες που δεν περιορίζονται πλέον σε τέσσερα σύνορα. Οι οθόνες κινητής τηλεφωνίας προσθέτουν μεγαλύτερη πολυπλοκότητα λόγω του γεγονότος ότι μπορούν να προβληθούν τόσο σε κατακόρυφο όσο και σε οριζόντιο περιβάλλον μέσω περιστροφής.
Η απάντηση είναι υγρές διατάξεις που προσαρμόζονται για οποιαδήποτε ανάλυση και μπορούν να προσαρμοστούν τόσο για κατακόρυφη όσο και για οριζόντια προβολή. Ορισμένοι ιστότοποι χρησιμοποιούν μια υγρή διάταξη που αλλάζει δραματικά την εμφάνιση του ιστότοπου προκειμένου να βελτιστοποιηθεί η ευκολία του ελέγχου και να αξιοποιηθεί πλήρως το δυναμικό της οθόνης με βάση τον προσανατολισμό του.
Ενώ τα ποντίκια σχεδιάστηκαν ειδικά με τροχούς κύλισης για εύκολη κατακόρυφη κύλιση, πολλοί χρήστες μεταναστεύουν σε touchpads και touchscreens και από τότε που η Apple έχει αγκαλιάσει την πιο πρωτοποριακή μορφή αφής που μοιάζει με τη μεταφορά σελίδας παρά την κύλιση, η οριζόντια κύλιση μπορεί να μην είναι εκτός ζήτησης. Οι περισσότερες εφαρμογές χρησιμοποιούν οριζόντια κύλιση ως εργαλείο και μακράν η μεγαλύτερη επιτυχία στην οριζόντια κύλιση είναι η ανάφλεξη, οπότε γιατί να μην το εφαρμόσετε στο web UI σας; Πολλοί ιστότοποι μιας σελίδας έχουν έναν μόνο οριζόντιο άξονα, ωστόσο συχνά πρέπει να χρησιμοποιούν κουμπιά για να προωθήσουν την κύλιση καθώς οι χρήστες ενδέχεται να μην κατανοούν τη μη τυποποιημένη μορφή.
Η οριζόντια κύλιση μπορεί να είναι παρόμοια με την κάθετη κύλιση από άποψη σχεδιασμού, ωστόσο η χρήση και των δύο μπορεί να ανοίξει τη δυνατότητα μετακίνησης σε δύο άξονες, ο οποίος μπορεί να μην λειτουργεί σε πρόγραμμα περιήγησης. Πολλοί χρήστες προτιμούν να είναι αγκυροβολημένοι σε έναν άξονα, προφανώς αυτό είναι συνήθως ο άξονας x, ο οποίος είναι στατικός, οπότε αν χάνονται οι χρήστες στη σελίδα, μπορούν να μετακινηθούν προς τα επάνω και να επιστρέψουν στην κύρια πλοήγηση. Στις τοποθεσίες διπλού άξονα αυτό μπορεί να μην είναι τόσο απλό και έτσι η πλοήγηση ίσως χρειαστεί να είναι κολλητική, χρησιμοποιώντας μια μπάρα στυλ HUD.
Τι είδους διεπαφή χρηστών πρέπει να χρησιμοποιεί ο ιστότοπός σας;
Προφανώς, δεν είναι όλα τα UI κατάλληλα για κάθε τύπο ιστότοπου, επομένως ρωτήστε μερικά βασικά ερωτήματα: Ποιος είναι το κοινό-στόχος σας; Τι προσπαθείτε να «πουλήσετε»; Τι εντύπωση θέλετε να δώσετε; Οι νεότεροι είναι πιο πιθανό να χρησιμοποιήσουν οθόνες αφής σε σχέση με ένα παλαιότερο δημογραφικό, οι οποίοι πιθανότατα θα χρησιμοποιήσουν μια επιφάνεια εργασίας, αλλά θα χρειαστούν ακόμα μεγαλύτερα κουμπιά και σαφέστερο UI. Δεν έχει νόημα να δημιουργήσετε το πιο πρωτοποριακό UI που μπορεί να φανταστεί κανείς αν κανείς δεν μπορεί να καταλάβει πώς να το χρησιμοποιήσει, οπότε μην ξεχνάτε πάντα να δημιουργείτε ένα UI που ο χρήστης μπορεί να κοιτάξει και να ξέρει αμέσως πώς να το χρησιμοποιήσει.
Ακρυλικό μενού
Ένα ακτινικό μενού, επίσης γνωστό ως μενού πίτας, είναι ένα κυκλικό μενού περιβάλλοντος που χρησιμοποιεί το πολυ-κατευθυντικό πλαίσιο παρά το ύψος ή το πλάτος ως εργαλείο επιλογής.
Αυτή είναι μια εξαιρετική μορφή διαισθητικού σχεδιασμού που εμποδίζει τους χρήστες να χαθούν σε δεκάδες δευτερεύοντα μενού. Ένα άλλο πλεονέκτημα είναι ότι ο χρήστης της οθόνης αφής έχει καλύτερο έλεγχο σε κανονικές λίστες με αναπτυσσόμενες γραμμές, καθώς ο κατευθυνόμενος έλεγχος είναι ακριβέστερος από το πάτημα. Η χρήση ακτινικών μενού σε φόρμες και ιστότοπους θα μπορούσε να ενισχύσει δραματικά την εμπειρία των χρηστών οθόνης αφής στον ιστότοπο και να επεκταθεί σε αντίχειρες όπως αυτές που χρησιμοποιούνται στις κονσόλες παιχνιδιών, όπου χρησιμοποιούνται συχνά ακτινικά μενού, δεδομένου ότι επιτρέπει την εύκολη μεταφορά των παιχνιδιών στον υπολογιστή. Δεδομένου ότι αυτοί οι χρήστες της επιφάνειας εργασίας δεν χάνουν ούτε επειδή εξακολουθεί να ισχύει το γεγονός ότι τα ακτινικά μενού μπορούν να απλοποιήσουν τις μακρές λίστες σε απλές κατηγορίες αυξάνοντας την ευκολία χρήσης ή την παραγωγικότητα σε έναν ιστότοπο.
Τα ακτινωτά μενού είναι ένας πολύ καλός τρόπος για να εμφανίσετε πληροφορίες ευαίσθητες για το περιβάλλον, ένα παράδειγμα αυτού είναι να κάνετε κλικ σε μια εικόνα ενός πιάτου σε έναν χώρο διατροφής και να έχετε τη δυνατότητα να κάνετε επανάληψη, τη σύνδεση συνταγών, τη λίστα συστατικών ή την αποθήκευση της εικόνας. Ωστόσο, πρέπει να είστε προσεκτικοί ώστε το μενού σας να παραμένει προσβάσιμο και απλό, διαφορετικά μπορείτε εύκολα να συντρίψετε τον χρήστη, ιδιαίτερα όταν συνδυάζετε σύμβολα και λέξεις στο ίδιο ακτινικό μενού. Το Radial μενού είναι πολύ πιο εύκολο στη χρήση όταν είναι στατικό παρά δυναμικό, καθώς αυτό μπορεί να οδηγήσει σε δυσκολία στην επιλογή αντικειμένων, όπως σε ιστότοπους όπως Phong , σε αυτήν την περίπτωση ειδικά όταν χρησιμοποιείτε ένα ποντίκι ως εντοπισμός δρομέα το καθιστά ιδιαίτερα αόριστο.
Σκεομορφισμός
Το skeuomorphic design μιμείται την εμφάνιση και τη λειτουργικότητα ενός καθημερινού αντικειμένου προκειμένου να δημιουργήσει ένα διαισθητικό UI, κάτι που έχει βγει από τη μόδα, ειδικά αφού ο Scott Forstall παραιτήθηκε από την Apple και ο επίπεδης σχεδίασης του Sir Jony Ive ανέλαβε iOS και πιθανό OS X μελλοντικός. Ο σκεομορφισμός υπήρξε ένα μεγάλο κομμάτι της ώθησης της Apple προς πιο διαισθητικό σχεδιασμό, πρόσφατα με το Contacts on Mac να σχεδιάστηκε ως ένα πραγματικό βιβλίο διευθύνσεων, ή το Newsstand και το iBooks στην iOS να είναι πραγματικά βιβλιοθήκες. Αυτός ο σχεδιασμός είναι αυτός που προφανώς ωφελεί τους χρήστες της διεπαφής αφής, αφού δεν αλληλεπιδράμε με τον κόσμο γύρω μας με ένα δρομέα.
Η εξοικείωση προσθέτει στην διαισθητικότητα όταν χρησιμοποιεί οποιαδήποτε διεπαφή χρήστη, αυτό είναι το σημείο του σπερμομορφισμού, για να φέρει μια πρόσθετη διάσταση εξοικείωσης συνδυάζοντας τις δυνάμεις με πραγματικά αντικείμενα, ώστε ο χρήστης να ξέρει αμέσως πώς να αλληλεπιδρά με αυτόν. Ένας επιτυχημένος σπερμομορφικός σχεδιασμός σημαίνει ότι απλά κοιτάζοντας την ιστοσελίδα θα γνωρίζετε ποιο είναι το αντικείμενο / η σελίδα που χρησιμοποιείται, κάνοντας τα κουμπιά του ποντικιού και τα σημεία αναφοράς να είναι παρωχημένα.
Dial UI
Αυτός είναι ένας συνδυασμός και των δύο παραπάνω, όπου ολόκληρη η διεπαφή χρήστη σχηματίζει έναν απλό επιλογέα. το σχέδιο μοιάζει με ένα ακτινικό μενού, αλλά αντί να στρέφεται στο κέντρο, επιλέγοντας από εκεί, ο επιλογέας περιστρέφεται σε ένα μόνο σημείο επιλογής. Αυτό είναι πολύ αποτελεσματικό σε περιπτώσεις όπως η μουσική, όπου οι κλήσεις χρησιμοποιούνται συχνά για να αναμειγνύουν ένα κομμάτι και τον όγκο ελέγχου. Στην περίπτωση της καθαρής ετικέτας SHSK'H χρησιμοποιούν ένα UI τροποποιημένου τύπου κλήσης για να επιλέξετε ποιο κομμάτι θέλετε να παίξετε.
Η μινιμαλιστική κίνηση
Ο μινιμαλισμός είναι όπου ένας ιστότοπος απογυμνώνεται πίσω στα γυμνά του βασικά στοιχεία. Αυτό είναι ιδανικό για τους χρήστες κινητών τηλεφώνων καθώς μειώνει τους χρόνους φόρτωσης και τη χρήση των δεδομένων καθώς επίσης επιτρέπει στον χρήστη να έχει πρόσβαση σε όλες τις απαραίτητες πληροφορίες σε ένα σαφές περιβάλλον εργασίας που είναι ευκολότερο να χρησιμοποιηθεί για μικρότερες αναλύσεις. Ο σημερινός μινιμαλισμός έχει ξεπεράσει τα περιθώρια απογύμνωσης στα γυμναστήρια και έχει διαμορφώσει ένα νέο στυλ γνωστό ως επίπεδο σχέδιο. Αυτό εξαρτάται από την πεποίθηση ότι η διαίσθηση δεν είναι πλέον απαραίτητη στο σχεδιασμό δεδομένου ότι οι διεπαφές και η χρήση τους έχουν γίνει ένα τόσο σημαντικό κομμάτι της ζωής που ο σχεδιασμός μπορεί να προχωρήσει πέρα από το να πει στους χρήστες τι πρέπει να κάνει, ένα UI μπορεί τελικά να είναι ένα εργαλείο, ένα μέντορα. Η επίπεδη σχεδίαση χαρακτηρίζεται εδώ και πολύ καιρό από τη χρήση τολμηρών χρωμάτων μπλοκ, αλλά με την εισαγωγή του iOS7, οι κλίσεις έχουν πάρει τη θέση τους στον κόσμο της επίπεδης σχεδίασης χωρίς περιθώρια, εξάγοντας κομψότητα από το φανταχτερό.
Τέλος, θα τελειώσω αυτό το άρθρο με έναν ιστότοπο που κάνει τα πράγματα λίγο διαφορετικά. Thibaud είναι δημιουργικός δημιουργός που έχει σχεδιάσει έναν οικοδόμο ιστοτόπου χαρτοφυλακίου γνωστού ως Pikibox. Ο ιστότοπος είναι εξαιρετικά φιλικός προς το περιβάλλον, αλλά χωρίς να παρεμποδίζει την προσβασιμότητά του στους χρήστες της επιφάνειας εργασίας, σε μικρότερες συσκευές αφής, όμως ο χρήστης αποστέλλεται σε μια εστιασμένη ανακατεύθυνση με ένα κινητό περιβάλλον.
Ο απλός σχεδιασμός δουλεύει θαυμάσια, δείχνοντας το σύνολο του χαρτοφυλακίου του με επαγγελματικό τρόπο, διατηρώντας ταυτόχρονα ένα διασκεδαστικό, καινούργιο look που είναι εξαιρετικά διαισθητικό. Φυσικά, ένα μεγάλο μέρος του σχεδίου είναι στα χέρια του χρήστη, είναι σε θέση να αλλάξει τη θέση της πλοήγησης και να ρυθμίσει τον τρόπο με τον οποίο χρησιμοποιείται χωρικά, κάτι που κάποιοι θα έλεγαν ότι δεν αποτελούν ακριβώς μια επιλογή σχεδιασμού. Η έκδοση για υπολογιστές έρχεται σε τέσσερις μορφές και σας προσκαλώ να παίξετε μαζί τους και να συντάξετε τα συμπεράσματά σας σχετικά με το αν αυτό είναι απλά αναποφάσιστο ή εξαιρετικά δημιουργικό.
Τι συμβιβασμοί κάνατε ως αποτέλεσμα οθονών αφής; Είναι η αιωρείται ένα πράγμα του παρελθόντος; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, αγγίξτε την εικόνα μέσω Shutterstock.