Flat 2.0 & Πώς λύνει τα Προβλήματα Ευχρηστίας του Flat Design

Η επίπεδη σχεδίαση υπήρξε από το 1950, όταν αναπτύχθηκε το διεθνές τυπογραφικό στυλ. Τον τελευταίο καιρό έχει κερδίσει μεγάλη δημοτικότητα από την κυκλοφορία της νέας της Microsoft γεωμετρίας και τυπογραφίας με σχεδιασμό Metro γλώσσα, αρχικά στο νέο Windows Phone το 2010, στη συνέχεια στα Windows 8 το 2012.

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

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

Προβλήματα ευχρηστίας του επίπεδου σχεδίου

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

Δεν υπάρχουν οπτικοί σηματοδότες δυνατότητας δημιουργίας αντιγράφων

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

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

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

Γιατί αυτό είναι ένα πρόβλημα; Ας δοκιμάσουμε ένα πείραμα.

Δείτε αυτό το στιγμιότυπο οθόνης παρακάτω. Προσπαθήστε να μαντέψετε ποια στοιχεία είναι clickable με βάση αυτό το screenshot. Δεν είναι αυτά που θα σκεφτόσασταν για πρώτη φορά. Μπορούμε να βρούμε πολλά άλλα παρόμοια προβλήματα χρηστικότητας σε όλο τον ιστό.

Μειωμένη ανιχνευσιμότητα Λόγω του ότι δεν υπάρχει άξονας Ζ

Οι άνθρωποι στην πραγματική ζωή βρίσκουν αντικείμενα και κινούνται μαζί σε τρεις διαστάσεις: τους άξονες x, y, και z. Όταν έρχονται σε μια μινιμαλιστικά σχεδιασμένη, επίπεδη ιστοσελίδα χωρίς 3D εφέ, αποκτούν μια εμπειρία που είναι διαφορετική από αυτή που είναι συνηθισμένη, αυτό που είναι κυρίως familar με.

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

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

Χαμηλή πυκνότητα πληροφοριών

Επίπεδο σχεδίασης έχει επίσης επικριθεί για τον κίνδυνο χαμηλής πυκνότητας πληροφοριών από τον εμπειρογνώμονα της UX Nielsen-Norman Group.

Στην κριτική τους σχετικά με την ευχρηστία των Windows 8, χρησιμοποίησαν παραδείγματα εφαρμογών των Windows Store και την ιστοσελίδα του Los Angeles Times για να δείξουν τα προβλήματα που χαμηλή πυκνότητα πληροφοριών (με ελάχιστες ιστορίες στην αρχική οθόνη, επικεφαλίδες χωρίς περιλήψεις, ελάχιστα αναγνωρίσιμη ομαδοποίηση κ.λπ.) μπορεί να προκαλέσει από την άποψη της χρηστικότητας.

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

Η Άνοδος του Διαμέρισμα 2.0

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

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

Σχεδιασμός Υλικών

Η νέα γλώσσα σχεδιασμού της Google, που ονομάζεται Σχεδίαση Υλικών, είναι ίσως το πιο αξιοσημείωτο παράδειγμα του στυλ Flat 2.0. Η Google κυκλοφόρησε το Design του Υλικού με το Android L το 2014. Ενώ το Υλικό Σχεδίασης διατηρεί τα κύρια χαρακτηριστικά του επίπεδου σχεδίου, χρησιμοποιεί ορισμένες μεταφορές από τη φυσική για να βοηθήσει τους χρήστες να βρουν γρήγορα αναλογίες μεταξύ του πραγματικού κόσμου και του ψηφιακού κόσμου.

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

συμπέρασμα

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

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