Ο ψηφιακός σχεδιασμός δεν γίνεται ποτέ: Η εξέλιξη της αλληλογραφίας των Windows 10 και του ημερολογίου

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

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

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

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

Ο συγχρονισμός παίζει ρόλο σε κάθε ιστορία

Δεν ήταν μέχρι τις αρχές του 2017, οι μηχανικοί πόροι έγιναν διαθέσιμοι για να δουλέψουν στον επανασχεδιασμό μας. Περίπου την ίδια χρονική στιγμή ξεκίνησε η ομάδα Fluent (κώδικας με όνομα NEON) και οδήγησε ενεργά στην υιοθέτηση του νέου συστήματος Fluent Design σε εφαρμογές της Microsoft. Αυτό σήμαινε ότι είχαμε μια ανανεωμένη πρόκληση σχεδίασης. (Σας ευχαριστούμε Satya) επανεξετάζοντας αυτό που κρατήσαμε, αυτό που αφήσαμε πίσω και πώς γίναμε πιο ευέλικτοι προχωρώντας.

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

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

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

Πρόωρη Πρώιμη

Εξαιρετικά σχεδιαστικά στοιχεία που υλοποιούνται με αλληλογραφία και ημερολόγιο

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

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

Πρόωρη εξερεύνηση για το Fluent Mail σε ελαφρύ θέμαΠρώτη Έξυπνη εξερεύνηση για ημερολόγιοΠειραματιστείτε με μια μπλε κορυφή γραμμή, ευθυγραμμίζοντας περισσότερο με το εμπορικό σήμα του Outlook

Ακρυλικό - Ιστορικό ή χωρίς φόντο, αυτό είναι το ερώτημα

Το ακρυλικό είναι ένα συστατικό του συστήματος άριστου σχεδιασμού το οποίο επιτρέπει την ενσωμάτωση του φωτός, του βάθους, της κίνησης, του υλικού και της κλίμακας στο περιβάλλον χρήστη. Προσθέτει μια μερικώς διαφανή υφή (υλικό) σε ορισμένα στοιχεία UI, όπως τα παράθυρα. Με την εισαγωγή του ένα φυσικό ερώτημα που προέκυψε ήταν: "Αν μπορώ να δω μέσα από αυτό, τι βλέπω; Τι είναι στο παρασκήνιο; "Έχοντας ήδη δημιουργήσει μια εικόνα φόντου ως προεπιλογή στην εφαρμογή μας, ρωτήσαμε τον εαυτό μας:" Υπάρχει σύγκρουση ιστορικού με το φόντο της επιφάνειας εργασίας; Θα πάμε να απαλλαγούμε από την εικόνα φόντου μας υπέρ της επιφάνειας εργασίας του χρήστη; Τι συμβαίνει με άλλα παράθυρα εφαρμογών στο παρασκήνιο που μπορεί να μην φαίνονται όμορφα; Πώς λειτουργεί με χρώματα (μάρκας); "Αυτό οδήγησε σε μια σειρά από εξερευνήσεις.

Οι πρώιμες Αργότερα Αργότερα

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

Αποκαλύψτε σε λευκό με

Να αποκαλύψει - ή να μην αποκαλύψει;

Το Reveal είναι ένα εφέ φωτισμού που φέρνει βάθος και εστιάζει σε διαδραστικά στοιχεία. Παρουσιάζοντας τα σύνορα των χειριστηρίων και των κουμπιών πάνω στο δείκτη του ποντικιού, αποκαλύπτει στοιχεία που μπορούν να ενεργοποιηθούν και βοηθά στην κατανόηση του περιβάλλοντος χρήστη. Ενώ η έννοια του αποκάλυψη είναι μεγάλη - ο διάβολος είναι πάντα στις λεπτομέρειες. Στην πρώτη επανάληψη αποκαλύπτουν όχι μόνο εκτεθειμένα αλληλεπιδραστικά στοιχεία, αλλά επίσης εκθέτουν τα όρια των ελέγχων σε γειτονικά πάνελ και εφιστούν την προσοχή σε προηγουμένως αόρατες διαφορετικές ευθυγραμμίσεις των ελέγχων. Για παράδειγμα, τα στοιχεία στο αριστερό παράθυρο πλοήγησης δεν ευθυγραμμίστηκαν απαραίτητα με στοιχεία στη λίστα μηνυμάτων επειδή μετατοπίζονται διαφορετικά. Αυτό, με τη σειρά του, δημιούργησε ένα είδος επίδρασης ογκόλιθου με αποκάλυψη που πρόσθεσε περισσότερο οπτικό θόρυβο στην εφαρμογή, κάτι που πραγματικά ήθελε να ξεφορτωθεί. Έτσι, για να αποφύγουμε όλα αυτά που αποφασίσαμε να απενεργοποιήσουμε αποκαλύψουμε στη λίστα μηνυμάτων - εφαρμόζουμε μόνο στο παράθυρο πλοήγησης και επίσης απενεργοποιούμε την αποκάλυψη σε κάθετες γραμμές στη λίστα φακέλων. Με όλα αυτά που είπαμε, γνωρίζουμε ότι η ομάδα σχεδιαστών Fluent προσπαθεί σκληρά να βελτιώσει την αποκάλυψη με βάση τα σχόλιά μας και θα επανεκτιμήσουμε τη χρήση της σε άλλα μέρη της εφαρμογής μας στο μέλλον.

"Πώς μετακινώ το παράθυρό μου;"

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

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

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

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

Εξερεύνηση με το αναπτυσσόμενο φάκελο

Στιγμές αλήθειας στον κώδικα

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

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

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

Υπενθύμιση: Οι σχεδιαστές δεν είναι οι πελάτες

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

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

Λεπτομέρειες: Γραμμές στη λίστα μηνυμάτων

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

Ο σχεδιασμός μιας εφαρμογής είναι μια εξελισσόμενη ιστορία

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

Αυτές οι εφαρμογές είναι μόνο δύο κεφάλαια σε μια πολύ μεγαλύτερη ιστορία - όπου το Fluent Design παρέχει νοημοσύνη και συνέπεια σε εφαρμογές και συσκευές από 0D έως 4D. Το δροσερό πράγμα που πρέπει να θεωρήσετε ως σχεδιαστή είναι αυτό: είτε συζητάτε με την Cortana on Invoke, χρησιμοποιώντας εκτοξευτήρα στο τηλέφωνο Android, με μελάνι με Edge στην επιφάνεια σας, είτε δημιουργώντας με Paint 3D στο Cliff House με οθόνη head, Fluent Ο σχεδιασμός διασφαλίζει ότι εσείς (και οι χρήστες σας) θα έχετε σταθερά ευχάριστες εμπειρίες.

Το Fluent είναι μια συνεργατική προσπάθεια

Μάθετε περισσότερα για το Fluent Design και συμμετέχετε στην ποικιλία της δημιουργίας!

Αναχώρηση #FluentFridays στο twitter @MicrosoftDesign

Ακολουθήστε το Microsoft Design σε Dribbble, twitter και Medium

Ακολούθησέ με στο τουίτερ

Χάρη στην ομάδα

Αυτή η ιστορία αντανακλά την προσπάθεια και την αφοσίωση ενός μεγάλου αριθμού ομάδων και συμπαίκτες. Πήρα την έγκριση για το Mail και τη συνολική επικοινωνία με τις ομάδες Fluent και Office για το πλαίσιο και τα κοινά συστατικά, ενώ ο Hiroshi Tsukahara το κοίταξε από την προοπτική του Ημερολογίου. Ο Chris Bimm, ο οποίος συνέβαλε επίσης σε αυτό το άρθρο, οδήγησε την προσπάθεια από την πλευρά του PM. Ο Andrew Falk βοήθησε με το σχέδιο κίνησης και ο Barry Li ήταν ένας μεγάλος συνεργάτης του dev με περισσότερη υπομονή από ό, τι μπορείτε να φανταστείτε! Επίσης, χάρη σε όλους τους συμμετέχοντες στην ομάδα PM, μηχανικού και σχεδιασμού που δεν αναφέρεται εδώ, αλλά χωρίς τη συμβολή τους, αυτό δεν θα ήταν εφικτό. Τελευταίο αλλά όχι ασήμαντο, μια ειδική φωνή για τον Μάρτιο Rogers και τον Jason Blackheart, πρώην συναδέλφους που έβαλαν πολλά από τα βασικά θέματα για αυτό.

Για να παραμείνετε ενημερωμένοι με τη Microsoft Design, ακολουθήστε μας στο Dribbble, στο Twitter και στο Facebook ή να συμμετάσχετε στο πρόγραμμα Windows Insider. Και αν σας ενδιαφέρει να συμμετάσχετε στην ομάδα μας, κατευθυνθείτε στο aka.ms/DesignCareers.