Πώς να σχεδιάσετε στιγμιότυπα οθόνης εφαρμογών με δυνατότητα ανίχνευσης

Επανασχεδιασμός των εικόνων του App Store του HeyDoctor

Ας παίξουμε ένα παιχνίδι. Επιλέξτε μια εφαρμογή στο τηλέφωνό σας που σας αρέσει. Είστε ο δημιουργός αυτής της εφαρμογής και προσπαθείτε να συγκεντρώσετε χρήματα από τους επενδυτές. Έχετε ένα λεπτό για να προωθήσετε την εφαρμογή σας σε VCs. Τα χρήματα γίνονται για αρπαγές αλλά μόνο αν μπορείτε να τα πείσετε σε 60 δευτερόλεπτα. Πως το κανεις? Περιγράφετε τι κάνει η εφαρμογή; Λέτε πώς η εφαρμογή είναι μοναδική σε σύγκριση με τους ανταγωνιστές της; Δείχνετε πόσο καλή είναι η εμπειρία του χρήστη;

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

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

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

Το επίκεντρο της εφαρμογής: HeyDoctor

Το HeyDoctor είναι μια εφαρμογή που επιτρέπει στους χρήστες να κάνουν online ιατρικές συνταγές χωρίς να χρειαστεί να επισκεφτούν έναν γιατρό πρωτοβάθμιας περίθαλψης. Το HeyDoctor μπορεί να συνταγογραφήσει και να συμπληρώσει συνταγές για φάρμακα που κυμαίνονται από τον έλεγχο των γεννήσεων, την ανάπτυξη των μαλλιών μέχρι τις θεραπείες λοίμωξης του ουροποιητικού συστήματος, τις εργαστηριακές αναφορές και άλλα. Μπορείτε επίσης να λάβετε θεραπεία για περιπτώσεις πρωτοβάθμιας περίθαλψης, όπως θεραπεία ακμής, UTI, κρύα επώδυνη θεραπεία και πολλά άλλα. Η εφαρμογή για κινητά του HeyDoctor έχει δεχθεί καλά στο App Store με 122 κριτικές βαθμολογώντας το σε 4,7 αστέρια.

Θα επανασχεδιάσουμε τα στιγμιότυπα οθόνης του HeyDoctor και θα μάθουμε τα screenshots που μπορούν να σαρωθούν.

Αποποίηση ευθυνών

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

Το τρέχον σχέδιο

Θα εργαστούμε για την εφαρμογή iOS του HeyDoctor. Ακολουθούν τα υπάρχοντα στιγμιότυπα οθόνης:

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

Ιστορίες χρηστών

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

  1. Λάβετε Προδιαγραφές και Ανταλλακτικά. Οι χρήστες προσπαθούν να βρουν έναν εύκολο τρόπο για να πάρουν τις συνταγές τους και να τα ξαναγεμίζουν χωρίς να χρειάζεται να επισκεφτούν γιατρό.
  2. Πάρτε θεραπεία για ασθένεια. Οι χρήστες αναζητούν τρόπους να λάβουν θεραπεία για την ασθένειά τους στο διαδίκτυο.
  3. Συζητήστε με έναν γιατρό πρωτοβάθμιας φροντίδας. Οι χρήστες θέλουν να μιλήσουν με έναν γιατρό, αλλά πιθανότατα δεν μπορούν να επισκεφθούν ένα προς το παρόν λόγω χρονικών, οικονομικών ή περιορισμών μετακίνησης.
  4. Κάνετε όλα αυτά χωρίς να συνεπάγεται οποιαδήποτε ασφάλιση χαρτιά. Οι χρήστες δεν επιθυμούν να συμπεριλάβουν την ιατρική ασφάλισή τους επειδή είτε δεν έχουν ένα είτε το copay τους είναι πολύ υψηλό.

Στιγμιότυπα οθόνης ή μικρογραφίες;

Τα μεγέθη οθόνης αυξήθηκαν κατά 72% από τότε που ξεκίνησε το αρχικό iPhone με την οθόνη 3,5 ιντσών. Το μέσο μέγεθος οθόνης των smartphones που πωλούνται στις ΗΠΑ το 2018 είναι 5,5 ίντσες. Οι οθόνες είναι μεγαλύτερες από ποτέ και οι σχεδιαστές προϊόντων συνεχώς εξελίσσονται για να κάνουν χρήση αυτού του επιπλέον διαθέσιμου χώρου. Κάποιος θα πίστευε ότι μεγαλύτερες οθόνες θα προσελκύσει τους σχεδιαστές να βάζουν περισσότερες λεζάντες κειμένου σε screenshots. Αλλά αυτό που παρατηρούμε είναι ακριβώς το αντίθετο.

Παρατηρήσαμε με συνέπεια ότι λιγότεροι από 4% των χρηστών που αναζητούν μια εφαρμογή μεγέθους προσωπογραφίας πορτρέτου και μόνο 2% μεγέθυνση screenshots τοπίου. Για τους παίκτες, είναι ακόμη λιγότερο σε μόλις 0,5%. Αυτό πιθανότατα οφείλεται στο γεγονός ότι το gameplay είναι συνήθως αρκετά σαφές ακόμα και από τις μικρογραφίες -Peter Fodor

Λιγότερο από το 4% των ατόμων που έρχονται στη σελίδα της εφαρμογής σας, πατήστε στα στιγμιότυπα οθόνης.

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

Ας δούμε κάποιες επανασχεδιασμένες εικόνες από το 2016 έως το 2018. Παρατηρήστε πως σχεδόν κάθε ένας από αυτούς έχει λιγότερες λέξεις και μεγαλύτερες γραμματοσειρές.

Ο μαγικός αριθμός 2

78 από τις 100 πρώτες εφαρμογές έχουν πέντε στιγμιότυπα, 13 εφαρμογές έχουν τέσσερα στιγμιότυπα οθόνης, 6 εφαρμογές έχουν τρία στιγμιότυπα οθόνης και 3 έχουν μόνο δύο. Ως προγραμματιστής, θα σκέφτεστε να πάτε για πέντε στιγμιότυπα επειδή το περιεχόμενο είναι καλύτερο, σωστά; Λανθασμένος.

Μόνο το 9% των χρηστών μετακινηθεί πέρα ​​από τα δύο πρώτα στιγμιότυπα οθόνης. Οι εικόνες οθόνης τοπίου εμφανίζονται χειρότερες στο 5%. Αυτό το καθιστά επιτακτικό να προσελκύσει τον χρήστη στις ίδιες τις δύο πρώτες εικόνες. Ενημερώστε στους χρήστες σας τι κάνει η εφαρμογή σας στην πρώτη οθόνη και επεκτείνετε σε εκείνη των αντίστοιχων στιγμιότυπων οθόνης.

Τα ευρήματα της έρευνάς μας καθιστούν σαφές ότι πρέπει να εξηγήσετε το βασικό όφελος της εφαρμογής σας στα πρώτα δύο (iOS10, Google Play) ή τρία (iOS11) στιγμιότυπα οθόνης, εάν χρησιμοποιείτε εικόνες πορτρέτου. Εάν θέλετε πραγματικά να χρησιμοποιήσετε μια εικόνα τοπίου, έχετε μόνο ένα - Peter Fodor

Ας εξετάσουμε τα δύο πρώτα screenshots κάποιων δημοφιλών εφαρμογών.

Επισημασμένα στοιχεία UI

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

Ας δούμε μερικά παραδείγματα.

Μαθήματα

  1. Εξηγήστε την πιο σημαντική ιστορία του χρήστη για την εφαρμογή σας στα δύο πρώτα στιγμιότυπα οθόνης. Μόνο το 9% των χρηστών που έρχονται στην καταχώριση της εφαρμογής σας θα μετακινηθεί πέρα ​​από τα δύο πρώτα στιγμιότυπα οθόνης.
  2. Αυξήστε το μέγεθος της γραμματοσειράς και μειώστε το κείμενο. Με μεγαλύτερες οθόνες, οι χρήστες γίνονται προετοιμασμένοι για να σαρώσουν και να δουν το στιγμιότυπο οθόνης αντί να το χτυπήσουν και να το διαβάσουν. Λιγότερο από το 4% των χρηστών θα πατήσουν στα στιγμιότυπα οθόνης σας για να τα διαβάσουν.
  3. Επισημάνετε στοιχεία UI που αντιπροσωπεύουν λεζάντες κειμένου. Κάνει τη σάρωση των στιγμιότυπων πιο εύκολη και βελτιώνει την ικανότητα του screenshot σας.

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

Βήμα 1: Ενημερώστε το iPhone στις νεότερες γενιές

Τα στιγμιότυπα οθόνης του HeyDoctor χρησιμοποιούν την παλαιότερη γενιά iPhones. Αν και δεν είναι ένας διακόπτης συμφωνίας, μου αρέσουν τα iPhones μου, όπως οι εφαρμογές μου. Ενημερώθηκε και σε fleek (συγγνώμη).

Βήμα 2: Περιορίστε το κείμενο και κάντε το πιο ευανάγνωστο

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

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

Βήμα 3: Επισημάνετε τα σχετικά στοιχεία UI

Όπως μάθαμε παραπάνω, η προβολή των σχετικών στοιχείων UI που αναπαριστούν τις λεζάντες τους καθιστά πιο ελκυστικό και ευανάγνωστο. Βοηθά επίσης τον χρήστη να σαρώσει το screenshot πιο εύκολα.

Chat UI

Ας δούμε πώς το Tinder τονίζει το chat UI:

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

Ας προσπαθήσουμε να κάνουμε κάτι παρόμοιο:

Ας εισαγάγουμε αυτό το στοιχείο στο στιγμιότυπο οθόνης:

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

Κάρτες και Σκιά Drop

Ας ρίξουμε μια ματιά στο πώς ο Uber τονίζει τα στοιχεία του UI.

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

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

Βήμα 4: Αλλαγές καλλυντικών

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

Προσθέστε οθόνες προοπτικής

Οι ισομετρικές οθόνες είναι μοντέρνες και στιλβωμένες. Μπορείτε να δείτε ισομετρικά τηλέφωνα σχεδόν παντού από τις διαφημίσεις προϊόντων της Apple σε τέλεια στιλβωμένα mockups στο Dribble (τρελό να σκεφτεί κανείς ότι το Dribble αρχικά ξεκίνησε ως δικτυακός τόπος για να μοιραστεί πρωτότυπα σχεδίου WIP χαμηλού επιπέδου!)

Έκανα μερικές προοπτικές από τις οθόνες που έχουμε στη διάθεσή μας.

Θα επιλέξω το πρώτο προοπτικό mockup και θα το χωρίσω σε δύο στιγμιότυπα επειδή έχουμε μόνο 3 screenshots αυτήν τη στιγμή και μπορούμε να προσθέσουμε μέχρι και 5 στο App Store.

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

Αλλαγή κλίσης φόντου

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

Θα κάνουμε μια κλίση με τα νέα χρώματα που επιλέγουμε.

Ας δούμε πώς φαίνεται αυτό στα στιγμιότυπα οθόνης μας.

Τέλειος!

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

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

Τελικά Σχέδια

Πριν

Μετά

συμπέρασμα

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

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