Δημιουργία πρωτοτύπων επιφάνειας εργασίας

Πώς η ρύθμιση διαδραματίζει σημαντικό ρόλο στο σχεδιασμό για τους επιτραπέζιους υπολογιστές

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

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

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

Σχεδιασμός για τον πραγματικό κόσμο

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

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

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

Προσομοίωση επιφάνειας εργασίας

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

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

Ένα πρότυπο σκίτσο για να είναι εύκολο να προσομοιώνετε περιβάλλοντα επιφάνειας εργασίας.

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

Προσθήκη της διάστασης του χρόνου

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

Πριν: Γιατί εγκαθιστούν το Dropbox; Μήπως ένας ανυπόμονος πελάτης τους έστειλε απλώς ένα σύνδεσμο σε ένα φάκελο Dropbox και εγκαθιστούν το Dropbox για να έχουν πρόσβαση στο φάκελο;

⏸ Κατά τη διάρκεια: Τι εφαρμογές χρειάζονται για να έχουν πρόσβαση όταν εγκαθιστούν το Dropbox; Πρέπει να αλλάξουν μεταξύ του Safari και του Finder για να ολοκληρώσουν την επιβίβαση;

⏭ Μετά: Ποιες αποσπάσεις αποσπούν από την εγκατάσταση του Dropbox; Ήταν στη μέση της ροής κατά την επιβίβαση όταν μια ειδοποίηση Ημερολογίου τους υπενθύμισε να καλέσουν μια κλήση πελάτη σε 5 λεπτά;

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

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

Ένα κιτ για πρωτότυπα

Έχοντας δοκιμάσει τα οφέλη από την παρουσίαση της δουλειάς μου σε ένα ρεαλιστικό πρωτότυπο desktop, ήθελα να ενθαρρύνω άλλους σχεδιαστές στο Dropbox να δοκιμάσουν το ίδιο.

Η πρώτη μου ιδέα ήταν να επεκτείνω απλώς τα πρότυπα Sketch και να χρησιμοποιήσω το InVision για το τμήμα του πρωτοτύπου. Αυτό δεν έπληξε αρκετά το σήμα. Τα τελικά πρωτότυπα δεν αισθάνονταν ρεαλιστικά και δεν ήταν δυνατές βασικές λειτουργίες επιπέδου συστήματος όπως drag-and-drop.

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

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

Κατεβάστε το κιτ Framer Desktop

Θέλουμε να δούμε την κοινότητα σχεδιασμού να επωφεληθεί από τις εβδομάδες εργασίας που τέθηκαν σε αυτό το κιτ πρωτότυπων, έτσι σήμερα δημοσιεύουμε το Desktop Kit στην ιστοσελίδα Framer! Ανατρέξτε στο framer.com/resources για να το κατεβάσετε.

Ακολουθούν ορισμένες συμβουλές για να ξεκινήσετε με το Desktop Kit:

Η καρτέλα Σχεδίαση

Το πρώτο πράγμα που πρέπει να παρατηρήσετε κατά το άνοιγμα του κιτ είναι ότι οι εφαρμογές macOS και Windows 10 σχεδιάζονται απευθείας στην καρτέλα Σχεδίαση. Αυτό επιταχύνει δραστικά την καμπύλη μάθησης και δίνει στους ανθρώπους που είναι πιο εξοικειωμένοι με το Sketch ένα εύκολο μέρος για να ξεκινήσετε.

Προγράμματα περιήγησης, προγράμματα ηλεκτρονικού ταχυδρομείου, προγράμματα περιήγησης αρχείων, εφαρμογές συνομιλίας και ειδοποιήσεις συστήματος!

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

Η καρτέλα Κώδικας

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

Χρησιμοποιώντας τις λειτουργίες του προγράμματος περιήγησης του Desktop Kit στην καρτέλα Κώδικας

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

Εναλλαγή μεταξύ MacOS και Windows 10 περιβάλλοντα

Μερικά παραδείγματα για να ξεκινήσετε

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

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

Παράδειγμα 1 στο Desktop Kit

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

Παράδειγμα 2 στο Desktop Kit

️3 intera Πολλαπλές αλληλεπιδράσεις παραθύρων
Σε αυτό το παράδειγμα, ένας χρήστης προσθέτει το πρώτο του αρχείο στον φάκελο Dropbox που τους ζητάει να δουν το συγχρονισμένο αρχείο στο dropbox.com. Όταν σχεδιάζετε ταξίδια χρηστών που καλύπτουν πολλαπλές επιφάνειες, μπορεί να είναι πολύ χρήσιμο να δείτε ολόκληρη την εμπειρία σε ένα μέρος.

Κατεβάστε και απολαύστε!

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

Τεράστια χάρη στη Gabrielle Matte για τη δημιουργία της τέλειας εικόνας για αυτήν την ανάρτηση ιστολογίου, Adam Noffsinger για τη δημιουργία του Desktop Kit και του John Saito και της Angela Gorden για βοήθεια στη συγγραφή αυτής της θέσης.

Θέλετε περισσότερα από την ομάδα Dropbox Design; Ακολουθήστε τη δημοσίευσή μας, το Twitter και το Dribbble. Θέλετε να κάνετε μαγεία μαζί; Προσλαμβάνουμε!