Μαθήματα από το Mobile Web Design
Η ανάπτυξη κινητής τηλεφωνίας είναι όλη η οργή, και η διαδραστική βιομηχανία βρίσκεται σε μεγάλη αναταραχή καθώς αμέτρητα δισκία και smartphones έρχονται στην αγορά.
Η ανάπτυξη εφαρμογών για κινητά παίρνει το μεγαλύτερο μέρος της προσοχής, ενώ το κινητό ιστό στροβιλίζεται κάπως ήσυχα. Όμως, ο ιστός για κινητά κάνει πρόοδο κάθε μέρα καθώς όλο και περισσότεροι προγραμματιστές εκκινούν διεπαφές βελτιστοποιημένες για κινητά.
Το μεγάλο πράγμα για το κινητό ιστό είναι ότι είναι βασικά κατασκευασμένο με όλα τα ίδια εργαλεία που χρησιμοποιούνται στον παραδοσιακό σχεδιασμό και ανάπτυξη ιστοσελίδων.
Αυτό το καθιστά πολύ πιο προσιτό από την ανάπτυξη εφαρμογών. Επίσης, πολλοί χρήστες θα θέλουν να επισκέπτονται τον ιστότοπο μιας εταιρείας εν κινήσει, χωρίς απαραίτητα να χρειάζονται μια πλήρη εφαρμογή.
Η κατασκευή ιστοσελίδων βελτιστοποιημένων για κινητά είναι τόσο παρόμοια, αλλά τόσο διαφορετική από τότε που σχεδιάζετε για την επιφάνεια εργασίας. Ορισμένοι παράγοντες αναλαμβάνουν πολύ σημαντικότερο ρόλο. Για παράδειγμα, οι παραλλαγές μεγέθους οθόνης, τα περιθώρια προσοχής χρηστών και τα θέματα χρηστικότητας είναι πιο κρίσιμα από ποτέ.
Αυτά τα ίδια προβλήματα είναι πάντα παρόντα στην επιφάνεια εργασίας, αλλά είναι μερικές φορές πιο εύκολο να παραβλέψουμε. Εδώ θα δούμε κάποια μαθήματα για να μάθετε από τη βελτιστοποίηση που συμβαίνει στον ιστό για κινητά. Τα μαθήματα μπορούν να ενημερώσουν άμεσα τον τρόπο με τον οποίο σχεδιάζουμε και πώς σκεφτόμαστε τον παραδοσιακό σχεδιασμό ιστοσελίδων και την αρχιτεκτονική ιστοτόπων
Απλοποιημένη πλοήγηση σε ιστότοπους για κινητά
Ένα από τα πρώτα πράγματα που γίνεται εμφανές όταν σκάβουμε σε ιστότοπους για κινητά είναι η εξαιρετική απλοποίηση της πλοήγησης. Η πλοήγηση όχι μόνο καθίσταται πολύ σημαντική και κεντρική σε έναν ιστότοπο κινητής τηλεφωνίας, αλλά είναι επίσης συχνά αρκετά μειωμένη ώστε να επικεντρώνεται μόνο στα πιο κρίσιμα στοιχεία.
Θεωρώ καταπληκτικό το πώς η πλοήγηση ανώτερου επιπέδου μπορεί να βράσει σε δύο έως τέσσερα στοιχεία στους περισσότερους ιστότοπους για κινητά. Φυσικά, αναγνωρίζω ότι το περιεχόμενο σε έναν ιστότοπο για κινητά είναι αρκετά συχνά βελτιστοποιημένο για το συγκεκριμένο κοινό. Για παράδειγμα, Εκκλησία της Αγίας Τάξης έχει έξι επιλογές στην κύρια πλοήγηση, μόνο μία από τις οποίες έχει κάνει την πλοήγηση για το κινητή έκδοση . και αυτό που το έκανε ("Επαφή") είναι το επίκεντρο ολόκληρης της αρχικής σελίδας.
Το περιεχόμενο που δεν το έκανε στην έκδοση για κινητά είναι, φυσικά, ακόμη εντελώς σημαντικό. Η διεπαφή για κινητά προορίζεται να προσελκύσει ανθρώπους που προσπαθούν να βρουν την εκκλησία ή να ελέγξουν τους χρόνους εξυπηρέτησης ή απλά να επικοινωνήσουν μαζί τους. Αυτοί είναι οι πιο πιθανότεροι στόχοι του κινητού surfer. Εκείνοι που χτυπούν την πλήρη ιστοσελίδα σε έναν επιτραπέζιο υπολογιστή είναι τόσο πιθανό να θέλουν αυτά τα πράγματα όπως είναι να θέλουν να ερευνήσουν την εκκλησία για να δουν αν είναι το είδος του τόπου που θα ήθελαν να επισκεφθούν.
Λοιπόν, ποιο είναι το μάθημα για μάθηση; Οι δύο αυτές διεπαφές δεν στοχεύουν σε εντελώς διαφορετικό κοινό και έχουν εντελώς διαφορετικούς σκοπούς; Ίσως, αλλά μπορούμε να μάθουμε πολλά από την ακραία εστίαση του κινητού interface. Παρατηρήστε πώς τα πάντα αφορούν τις ενέργειες που μπορείτε να κάνετε; Η εκκλησία έχει εξαλείψει όλα τα στοιχεία πλοήγησης που αισθάνονται σαν κιβώτια για να τα ελέγξετε.
Ένα ενδιαφέρον στοιχείο είναι η "Σχετικά" επιλογή πλοήγησης στον πλήρη ιστότοπο. Ο ιστότοπος για κινητά μπορεί να είναι βελτιστοποιημένος για τους ανθρώπους εν κινήσει, αλλά δεν υπάρχει κανένας λόγος να υποθέσουμε ότι δεν θα ενδιαφέρονται να διαβάσουν για την εκκλησία και τις πεποιθήσεις της. Κάποιος μπορεί να έχει αναφέρει την εκκλησία σε εσάς περνώντας, ζητώντας σας να το αναζητήσετε στο τηλέφωνό σας.
Επομένως, η επιλογή πλοήγησης για αυτό το στοιχείο πρέπει να αλλάξει. Τι θα συμβεί αν, αντίθετα, ανακοινώθηκε κάτι σαν "Τι πρέπει να ξέρετε για εμάς"; Ενώ είναι λίγο μακρύ, αντικατοπτρίζει μια πιο χρήσιμη στάση. Ένας γενικός "Σχετικά" κουβάς αισθάνεται σαν ένα μέρος για να κρατήσει όλες τις πληροφορίες που κανείς δεν διαβάζει. "Ένας οδηγός επισκεπτών στην εκκλησία μας" αισθάνεται πολύ πιο χρήσιμο και στοχοθετημένο.
Η απλότητα και η εστίαση της διεπαφής κινητής τηλεφωνίας δείχνει ότι όλα πρέπει να έχουν σκοπό να κερδίσουν μια θέση στον ιστότοπο. Αν το ίδιο ισχύει για ολόκληρο τον ιστότοπο, θα προτιμούσαμε να το γεμίσουμε με φαινομενικά σημαντικό περιεχόμενο και να είμαστε πιο διατεθειμένοι να διασφαλίσουμε ότι όλα έχουν σαφή λειτουργία.
Αυτό αντικατοπτρίζει μια πολύ προσανατολισμένη στην εργασία νοοτροπία. Κάθε επιλογή προκαλεί το χρήστη να κάνει κάποιο ενεργό βήμα. Είναι σαν να έχει εξαφανιστεί κάθε παθητική επιλογή και να περιοριστεί σε στοιχεία που μπορούν να ενεργοποιηθούν στον ιστότοπο για κινητά. Αυτό μας οδηγεί στο επόμενο μάθημα: να είναι εξαιρετικά προσανατολισμένο στις εργασίες.
Οι ιστότοποι για κινητά είναι προσανατολισμένοι στις εργασίες
Με μια νοοτροπία με γνώμονα την εργασία, ας αναθεωρήσουμε τον πλήρη ιστότοπο. Ενώ η αρχική σελίδα είναι όμορφα σχεδιασμένη, η έκκληση για δράση είναι πολύ λιγότερο εμφανής. Το περιεχόμενο είναι γεμάτο από κομμάτια πληροφοριών που σας περιμένουν να αποφασίσετε να σας ενδιαφέρουν.
Για παράδειγμα, το μεγάλο πανό που επισημαίνει ένα επερχόμενο γεγονός δεν με καλεί σε κάποιο είδος δράσης. πολύ παθητικό. Με μια νοοτροπία που προσανατολίζεται στην εργασία, θα μπορούσαμε να βελτιώσουμε σημαντικά την πρόσκληση για δράση "Διαβάστε περισσότερα". Αυτό θα μπορούσε να είναι τόσο απλό όσο καθιστούν την έκκληση για δράση πολύ πιο εμφανή. για παράδειγμα, ένα μεγάλο κουμπί σε ένα πορτοκαλί αντίθεση. Επιπλέον, η κλήση θα μπορούσε να αλλάξει σε "Μάθετε περισσότερα και εγγραφείτε".
Ένα άλλο παράδειγμα είναι το μήνυμα καλωσορίσματος. Εκτιμώ την πρόθεση και το μήνυμα που ανακοινώνεται εδώ. Το μήνυμα δείχνει ότι πίσω από τον ιστότοπο υπάρχουν πραγματικοί άνθρωποι και προσπαθεί να κάνει την σελίδα να αισθάνεται προσωπική. Αλλά και πάλι, ας αναλύσουμε αυτό με μια νοοτροπία με προσανατολισμό στην εργασία. Μια σπουδαία συνέχεια σε μια εισαγωγή όπως αυτή θα ήταν μια σαφής έκκληση για δράση που θα ενθάρρυνε τους επισκέπτες να κάνουν το επόμενο βήμα. Μετά από όλα, οι μόνοι που θα διαβάζουν αυτό είναι νεοφερμένοι. Τα τρέχοντα μέλη θα παραλείψουν το παρελθόν σε πράγματα όπως το ημερολόγιο εκδηλώσεων. Έτσι, προσφέρετε ένα σημείο μετατροπής για τους χρήστες, όπως "Ρωτήστε μας μια σκληρή ερώτηση" ή "Τι να περιμένετε όταν επισκέπτεστε".
Αντίθετα, το πλαίσιο "Ειδικοί προσκεκλημένοι" είναι φανταστικό. Αντιμετωπίζει βασικά ζητήματα και οδηγεί τους ανθρώπους να σκάψουν βαθύτερα. Αναρωτιέμαι μόνο αν θα μπορούσε να είναι ένα πιο εμφανές στοιχείο της σελίδας. Και πάλι, τα μέλη θα φτάσουν εκεί που πρέπει να πάνε. έτσι ώστε να επικεντρωθεί σε όσους είναι νέοι στην ιστοσελίδα και στην εκκλησία θα προχωρήσει σε μεγάλο βαθμό στη μεγιστοποίηση της ευκαιρίας.
Ξέρω ότι πραγματικά χτυπούμε αυτόν τον ιστοχώρο επάνω, αλλά δεν είναι γιατί δεν του αρέσει ή νομίζω ότι δεν εξυπηρετεί τη λειτουργία του. Ο στόχος μου είναι μόνο να αμφισβητήσουμε τη σκέψη μας και τις προκαταλήψεις μας για το τι πρέπει να μοιάζει και να κάνει ένας ιστότοπος. Επιδοκιμάζω πραγματικά αυτή την εκκλησία για την κατοχή ενός πανέμορφου και λειτουργικού ιστότοπου, με μια κινητή επέκταση στην εκκίνηση!
Οι ιστότοποι για κινητά μειώνουν δραματικά το περιεχόμενό τους
Ένα άλλο προφανές μάθημα που σχετίζεται με την αποκοπή της πλοήγησης είναι ότι οι ιστότοποι για κινητά πάντα συρρικνώνουν το περιεχόμενό τους. Όχι μόνο ο αριθμός των επιλογών μειώνεται στην βασική λειτουργικότητα και τον σκοπό της ιστοσελίδας, αλλά το αντίγραφο μειώνεται επίσης πάρα πολύ.
Σε ορισμένες περιπτώσεις, μεγάλο μέρος του αντιγράφου εξαλείφεται εξ ολοκλήρου! Αυτό προκαλεί την ερώτηση, είναι αυτό το περιεχόμενο απαραίτητο σε ολόκληρο τον ιστότοπο εάν η έκδοση για κινητά λειτουργεί καλά χωρίς αυτό; Divi Aruba είναι ένα καλό παράδειγμα αυτού. Το σαγηνευτικό μάρκετινγκ που μιλούσε τοποθετημένο πάνω από τη φωτογραφία μπορεί να φαίνεται σαν ένα must-have στοιχείο για την αρχική σελίδα, αλλά έχει καρφωθεί στο μικρο κινητή ιστοσελίδα .
Στην έκδοση για κινητά, το λογότυπο τοποθετείται στην κορυφή της ίδιας εικόνας και παρ 'όλα αυτά εξακολουθεί να μεταφέρει το ίδιο ακριβώς μήνυμα: εάν θέλετε να μεταβείτε σε κάποιο μέρος όπως αυτό, διαβάστε παρακάτω. Γιατί να μην χρησιμοποιήσετε αυτό το περίοπτο σημείο για να οδηγήσετε τους ανθρώπους στην επιθυμητή δράση; Σίγουρα οι σχεδιαστές γνωρίζουν ποιο είναι το πιο κρίσιμο στοιχείο για τη μετατροπή των επισκεπτών στους πελάτες. Βάλτε αυτές τις πληροφορίες στη δουλειά και οδηγήστε τους ανθρώπους εκεί με μια προεξέχουσα έκκληση για δράση αντί για το αφράτο μάρκετινγκ.
Όλα τα καλά πράγματα, χωρίς χνούδι
Αυτό μας οδηγεί στο επόμενο μάθημα: χάνετε το χνούδι. Το επόμενο παράδειγμα είναι μια θετική απόδειξη αυτού. Travel Tex είναι μια ιστοσελίδα πληροφοριών ταξιδιού για την πολιτεία του Τέξας. Έχει σαφή σκοπό και κοινό στο μυαλό. Ευτυχώς, οι σχεδιαστές έχουν αγκαλιάσει πλήρως την απατηλή νοοτροπία.
Όχι μόνο το μίνι ιστοσελίδα για κινητά εστιάστε εξ ολοκλήρου στο θέμα στο χέρι και τα βασικά στοιχεία που μπορούν να ασκηθούν, αλλά και ο πλήρης ιστότοπος! Τι ανακούφιση για να δείτε σχεδόν καθόλου χνούδι. Συμπεριλαμβάνοντας κάτι θλιβερό σαν μια ιστορία του Τέξας θα ήταν πολύ δελεαστικό. Εάν οι άνθρωποι ήθελαν ένα μάθημα ιστορίας, δεν θα έρθουν σε αυτή την ιστοσελίδα. Θα δυσκολευτείτε να βρείτε περιεχόμενο που δεν σχετίζεται με τον μοναδικό σκοπό αυτού του ιστοτόπου.
Πάρτε τη συνήθεια να αναρωτιέστε τα πάντα. Αυτός είναι ο μόνος τρόπος για να βράσει πραγματικά έναν ιστοχώρο κάτω από τα κρίσιμα στοιχεία του, πράγμα που συμβαίνει ακριβώς σε έναν καλό δικτυακό τόπο για κινητά. Δημιουργούνται δύσκολες επιλογές και, σε αντίθετη περίπτωση, κόβεται πολύτιμο περιεχόμενο προκειμένου να βελτιστοποιηθεί ο ιστότοπος. Καλέστε το χνούδι για αυτό που είναι και πυροδοτήστε το!
Η επωνυμία είναι βασιλιάς στον ιστό του κινητού
Είμαι σχετικά με τη δημιουργικότητα στο διαδίκτυο. Στην πραγματικότητα, πολλές από τις μεγαλύτερες αλλαγές στον κλάδο έχουν προκύψει ως αποτέλεσμα της άρνησης να παραμείνουν στο status quo. Αλλά υπάρχει ένας χρόνος και τόπος για τα πάντα. Τόσοι σχεδιαστές χρησιμοποιούν τις αναθέσεις τους ως δικαιολογία για να απελευθερώσουν τους δημιουργικούς τους χυμούς, για κανέναν άλλο σκοπό παρά να κάνουν κάτι δημιουργικό. Αυτό μετατρέπει τον ιστότοπο σε σχέδιο για τον σχεδιαστή, όχι για τον πελάτη και τις ανάγκες του. Αυτό είναι ένα πράγμα που προειδοποιεί το κινητό ιστό ενάντια μάλλον με τόλμη.
Η επωνυμία είναι απίστευτα συνεπής στον ιστό για κινητά και ένα από τα πιο συνεπή μέρη είναι η τοποθέτηση του λογότυπου. Σε κινητές ιστοσελίδες, δεν θα βρείτε τρελά λογότυπα στο κάτω μέρος με σταθερά υποσέλιδα. Η λειτουργικότητα είναι βασιλιάς και τα λογότυπα εμφανίζονται πάντα στην κορυφή. Μπορείτε να φανταστείτε να χτυπάτε έναν ιστότοπο για κινητά και να μην βλέπετε αμέσως το λογότυπο; Ωστόσο, αυτό είναι συνηθισμένο σε πολλές πλήρεις ιστοσελίδες.
Ακολουθούν μερικές ιστοσελίδες οι οποίες, αν και ελάχιστες και στερούνται στυλ μυαλό, είναι πλούσιες σε branding που δεν πρέπει να χάσετε.
Το μάθημα εδώ μπορεί να έχει βαθύ αντίκτυπο στον τρόπο προσέγγισης της εργασίας σας και στη θεμελιώδη αξία που θέτετε στους πελάτες σας. Για κάθε σχεδιαστή που εκτιμά ότι οι ανάγκες του πελάτη πρέπει να είναι ο συνολικός σκοπός του έργου, υπάρχει κάποιος που θέλει να δείξει στον κόσμο πόσο δημιουργικοί και πρωτότυποι είναι.
Όπως οποιοσδήποτε άλλος που εμπλέκεται στην παραγωγή ενός δικτυακού τόπου, ο σχεδιαστής ιστοσελίδων θα πρέπει να είναι απασχολημένος στην εξυπηρέτηση του πελάτη, βοηθώντας τις επιχειρήσεις τους και βελτιώνοντας την κατώτατη γραμμή. Με κάθε στοιχείο που βάζετε σε έναν ιστότοπο για κινητά, εξετάζεται ο ρόλος του και το όφελος που θα αποφέρει. Εφαρμόστε αυτή τη νοοτροπία σε ό, τι κάνετε και σύντομα θα βρείτε έναν ισχυρό σύμμαχο στον πελάτη σας.
Όσο περισσότερο αγκαλιάζουμε τις ανάγκες του πελάτη και κάνουμε ό, τι μπορούμε για να προσφέρουμε αξία στην ιστοσελίδα τους, τόσο περισσότερο θα δούμε μια θεμελιώδη αλλαγή στην εργασία μας. Θα πάμε από το κτίριο "cool stuff" για να δούμε τα πάντα από την πλευρά του πελάτη. Μήπως αυτό το χαρακτηριστικό σημαίνει αύξηση του κέρδους; Πώς μπορεί να αλλάξει το σχέδιο για να βελτιωθεί η επιχείρησή τους; Εάν ένα υποπροϊόν της δουλειάς σας είναι περισσότερα χρήματα για τον πελάτη, τότε θα βρείτε ευκαιρίες παντού.
Ιστοσελίδες χωρίς τα τεχνάσματα
Ένα από τα μεγαλύτερα επιτεύγματα του κινητού ιστού είναι η πλήρης έλλειψη τεχνικών. Για να είμαστε δίκαιοι, υπάρχει χρόνος και τόπος για τεχνάσματα στο διαδίκτυο. Στην πραγματικότητα, αφιερώνω σε αυτά ολόκληρα τμήματα των βιβλίων μου. Αλλά η έλλειψη τεχνάσματα σε κινητές ιστοσελίδες καταδεικνύει ότι αυτές οι φαινομενικά μεγάλες ιδέες δεν εξυπηρετούν κανένα πραγματικό σκοπό.
Όλα όσα πηγαίνουν σε έναν ιστότοπο για κινητά πρέπει να περάσουν από αρκετά φίλτρα. Είναι το περιεχόμενο σχετικό και απολύτως χρήσιμο; Είναι το περιεχόμενο κρίσιμο και εξυπηρετεί τον βασικό σκοπό της ιστοσελίδας; Είναι η ιστοσελίδα εύχρηστη και κατανοητή; Είναι η πλοήγηση αντισυμβατική; Εάν ναι, είναι κρίσιμο για τη λειτουργία του ιστότοπου; Η απάντηση μπορεί να είναι ναι, αλλά πιο συχνά θα είναι αποφασιστική όχι.
Ορισμένα τεχνάσματα που παρατηρούνται αισθητά από την ανάπτυξη κινητών είναι οθόνες εκκίνησης, ασυνήθιστη πλοήγηση, άσχετα κινούμενα σχέδια και αλληλεπιδραστικότητα, περιοχές περιστρεφόμενων γραμμών, περίεργες διατάξεις και διατάξεις σταθερού πλάτους. Η αποτελεσματικότητα του κινητού ιστού είναι εκπληκτική.
συμπέρασμα
Όπως μπορείτε να δείτε, έχουμε πολλά μαθήματα για μάθηση από τον ιστό για κινητά. ιδιαίτερα, την ικανότητά του να αποκαλύπτει περιττά στοιχεία ενός δικτυακού τόπου. Όπως συμβαίνει με πολλά πράγματα στη ζωή, μια μικρή αλλαγή στην προοπτική συχνά ανοίγει τα μάτια μας στην πραγματική αξία των πραγμάτων που έχουμε από καιρό θεωρηθεί δεδομένη.
Δεν προτείνω ότι έχουμε χάσει την όψη του σκοπού του ιστού. Αντίθετα, προτείνω να υιοθετήσουμε μια πολύ πιο στρατηγική νοοτροπία.
Ο Patrick McNeil είναι ανεξάρτητος συγγραφέας, προγραμματιστής και σχεδιαστής. Συγκεκριμένα, αγαπά να γράψει για το σχεδιασμό ιστοσελίδων, να εκπαιδεύσει τους ανθρώπους στην ανάπτυξη ιστοσελίδων και να δημιουργήσει ιστότοπους. Το τελευταίο έργο βιβλίων του Patrick είναι Το Εγχειρίδιο Ιστού του Σχεδιαστή . Περιλαμβάνει πολλά θέματα σύμφωνα με το άρθρο αυτό. Μπορείτε να μάθετε περισσότερα σχετικά με αυτό ΤοWebDesignersIdeaBook.com . Ακολουθήστε τον Patrick στο Twitter @designmeltdown .
Αυτή η θέση σας έφερε σε επαφή η DudaMobile, a κινητό ιστότοπο δημιουργίας.
Ποιες πτυχές του σχεδιασμού για κινητά προσπαθείτε να μεταφράσετε στην επιφάνεια εργασίας; Βλέπετε μόνος σας την απλότητα και την ταχύτητα στον ιστό για κινητά;