Τάσεις UI που θα διαμορφώσουν το 2020

Επιτρέψτε μου να σας ρωτήσω κάτι που μπορεί να ακούγεται λίγο σαν επιστημονική φαντασία. Σας έχει συμβεί ποτέ ότι ίσως ο πλανήτης Γη κινείται λίγο πιο γρήγορα αργά - αλλά δεν έχουμε ακόμη παρατηρήσει; Φαίνεται ότι ήταν χθες μόνο που εξετάσαμε αυτό που περιμέναμε καθώς μετακομίσαμε στο 2018. Ωστόσο, περίεργα, είναι σχεδόν το 2019 ήδη!

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

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

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

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

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

Συναρπαστικό, σωστά;

Λοιπόν, ας είμαστε ειλικρινείς - ο σχεδιασμός UI δεν ήταν ποτέ τόσο συναρπαστικός. Οι χρήστες μεταμορφώνονται, η τεχνολογία των συσκευών αναπτύσσεται αστρονομικά, η ταχύτητα του Διαδικτύου είναι τώρα στο επίπεδο της Φόρμουλα 1 και υποστηρίζεται από ένα ευρύ φάσμα εργαλείων σχεδίασης στον ιστό. Συνδυάστε όλα αυτά με τις σύγχρονες δεξιότητες σχεδιαστών διεπαφής χρήστη και σίγουρα θα συμφωνήσετε ότι το 2019 θα είναι ακόμη πιο σημαντικό.

Λοιπόν, ποιες τάσεις ανυπομονούμε;

Κινητό πρώτα

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

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

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

Στη συνέχεια, κάτι ενδιαφέρον συνέβη στα τέλη του 2016 - η κίνηση για κινητά τελικά ξεπέρασε την κυκλοφορία υπολογιστών. Μέχρι το τέλος του ίδιου έτους, τα κινητά τηλέφωνα είχαν φτάσει Το 50.31% του μεριδίου αγοράς, ενώ τα δισκία προστέθηκαν έως 4.9%.

μερίδιο αγοράς για κινητά

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

χρόνος σερφ

Λοιπόν, σκεφτείτε το, όλοι γνωρίζαμε ότι ήταν μόνο χρόνος πριν το κινητό τελικά πιάσει τους υπολογιστές σε αυτό επίσης. Και έως το 2018, τα τραπέζια είχαν γυρίσει εντελώς, με την ανάληψη κινητών 52.2% όλων των παγκόσμιων ιστοσελίδων.

μερίδιο κυκλοφορίας

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

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

Χρήση σκιών και βάθους

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

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

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

σκιές και βάθος

Το 2019, επομένως, αναμένουμε να δούμε προοδευτική χρήση παραλλαγών σκιάς για να επιτύχουμε διαφορετικές προοπτικές διεπαφής 3D.

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

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

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

Με άλλα λόγια, η προηγμένη χρήση σκιών θα συνεχίσει να επιτυγχάνει πιο εκλεπτυσμένο βάθος στην οθόνη 2D. Και κατ 'αυτόν τον τρόπο, εξαλείψτε την ανάγκη για ειδικές οθόνες 3D.

Μινιμαλισμός

Το έτος 2000, η ​​μέση ανθρώπινη προσοχή κυμάνθηκε, τουλάχιστον σύμφωνα με μια μελέτη από Microsoft, ήταν 12 δευτερόλεπτα. Τότε μαντέψτε τι; Μέχρι το 2015, είχε εκπληκτικά μειωθεί στα 8 δευτερόλεπτα - διασκεδαστικά μικρότερο από ένα τυπικό χρυσόψαρο.

Λοιπόν, ακριβώς όταν σκεφτήκαμε ότι δεν θα μπορούσε να επιδεινωθεί, το Διαδίκτυο έκανε τους ανθρώπους πιο ανυπόμονοι- 47% των επισκεπτών του ιστότοπού σας τώρα περιμένετε να φορτώσουν οι σελίδες σας σε λιγότερο από 2 δευτερόλεπτα. Απλώς δεν αντέχουν για περισσότερο. Στην πραγματικότητα, το 40% από αυτούς θα φύγει εάν διαρκέσει περισσότερο από 3 δευτερόλεπτα.

Παραδόξως, πολλοί σχεδιαστές ιστοσελίδων δεν το έχουν λάβει σοβαρά υπόψη. Το τρέχον η μέση ταχύτητα φόρτωσης σελίδας είναι 8.66 δευτερόλεπτα- παρά τη σύσταση της Google για λιγότερα από 3 δευτερόλεπτα για το 2018.

χρόνοι φόρτωσης σελίδων

Και δεν είναι μόνο αυτό. Αποδεικνύεται ότι η κατάσταση είναι πολύ φτωχότερη για ιστότοπους για κινητά, δεδομένου ότι παίρνουν κατά μέσο όρο 22 δευτερόλεπτα φορτώνω. Ωστόσο, δυστυχώς, το 53% των επισκεπτών σελίδων για κινητά δεν περιμένουν για περισσότερο από τρία δευτερόλεπτα.

Αλλά, πώς σχετίζεται με το περιβάλλον χρήστη;

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

Λοιπόν, τι σημαίνει αυτό για το 2019;

Λοιπόν, Η ενημέρωση ταχύτητας της Google Τον Ιούλιο του 2018 ήταν η αρχή του τέλους των πολύπλοκων γραφικών UI που διακυβεύουν ουσιαστικά τις ταχύτητες φόρτωσης. Τώρα μετατοπίζουμε ολοένα και περισσότερο προς καλά απλοποιημένα λιπαρά μινιμαλιστικά περιβάλλοντα χρήστη που φορτώνουν πολύ πιο γρήγορα.

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

Επικαλυπτόμενα εφέ

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

Αλλά περίμενε. Ποιο είναι το πρώτο επικάλυμμα;

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

αλληλεπικαλυπτόμενα εφέ

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

Το Samsung Mobile, για παράδειγμα, άλλαξε από οθόνες LCD στο πολύ προηγμένη τεχνολογία OLED όταν κυκλοφόρησαν το Galaxy S7 πριν από δύο χρόνια. Στη συνέχεια, η Apple εντάχθηκε στο συγκρότημα με το iPhone X, το οποίο τώρα έχει μεγαλύτερη αντίθεση οθόνης από τους προκάτοχους LCD. Η εταιρεία έχει ακόμη σχέδια διατήρησης αυτού σε όλα τα μοντέλα iPhone που έχουν προγραμματιστεί για το 2019.

Και ποιος έχει το μεγαλύτερο όφελος;

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

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

Σχέδια χωρίς πλαίσιο

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

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

Η Samsung προχώρησε ακόμη και να εξαλείψει εντελώς τα καρέ ακρών, επεκτείνοντας ορισμένες από τις οθόνες smartphone τους πέρα ​​από τις άκρες. Η Apple, από την άλλη πλευρά, αποφάσισε να καλύψει ολόκληρο το πρόσωπο του iPhone με την οθόνη, αφήνοντας χώρο μόνο για το ακουστικό.

άκρο χωρίς πλαίσιο

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

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

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

Μικρο-κινούμενες εικόνες

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

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

μικρο-κινούμενες εικόνες

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

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

Συμπέρασμα

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

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

Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του Γουόλιντ Μπενό

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.