8 τρόποι βελτιστοποίησης του ιστότοπού σας για κινητά
Όταν ο κόσμος άλλαξε από τους επιτραπέζιους υπολογιστές σε κινητές συσκευές, οι σχεδιαστές έγιναν ακόμα πιο επικεντρωμένοι στο UX. Παρόλο που η διεπαφή χρήστη διαδραματίζει σημαντικό ρόλο στη δημιουργία φιλικών προς το κινητό σχεδίων, η εμπειρία του χρήστη έχει πλέον γίνει εξίσου σημαντική, ειδικά επειδή τώρα έχουμε περισσότερες συσκευές για να εστιάσουμε και η εμπειρία των χρηστών διαφέρει από τον τύπο της συσκευής.
Το UX είναι κάτι που ξεπερνά τα όρια των γραφικών και της αισθητικής. Όπως και ο Rahul Varshney, ο συν-δημιουργός του foster.fm , λέει:
Μια διεπαφή χρήστη χωρίς UX είναι σαν ζωγράφος που χτυπά χρώμα πάνω σε καμβά χωρίς σκέψη.
Ο Ραχούλ βρισκόταν σε αυτή την αναλογία. Μπορεί να έχετε την πιο ελκυστική, φιλική προς το χρήστη, μοναδική και λειτουργική εκδοχή desktop της ιστοσελίδας σας, αλλά εάν δεν λαμβάνετε υπόψη την κινητή εμπειρία, απλά ζωγραφίζετε χωρίς σκέψη.
Έτσι, τι χωρίζει μια καλή κινητή εμπειρία από μια κακή; Δεν είναι πολύ δύσκολο να χωριστούν τα βασικά στοιχεία που αποτελούν ένα εξαιρετικά αποτελεσματικό, βελτιστοποιημένο και σχεδιαζόμενο από το χρήστη σχέδιο. Αλλά εδώ είναι μερικές βέλτιστες πρακτικές που θα σας καθοδηγήσουν στην πορεία:
1) Μην απορρίπτετε τα κινητά πρώτα
Εάν ο ιστότοπός σας στοχεύει στο κινητό UX, ίσως θελήσετε να σπάσετε την παράδοση ακολουθώντας τη στρατηγική "κινητού πρώτου". Δεν υπάρχει καμία βλάβη στην υιοθέτηση αυτής της τεχνικής όταν είστε θετικοί που οι περισσότεροι από τους χρήστες σας θα έχουν πρόσβαση στον ιστότοπό σας μέσω μιας κινητής συσκευής. Απλα οπως codemyviews υποδηλώνει ότι ο σχεδιασμός του κινητού διαδικτύου δεν είναι μια θέση, υπάρχουν, στην πραγματικότητα, «1.2 δισεκατομμύρια χρήστες κινητών ιστού παγκοσμίως» και ο αριθμός τους δεν φαίνεται να πέφτει σύντομα (είναι πιθανό να αυξηθεί στο εγγύς μέλλον). Αυτό μπορεί να είναι λίγο δύσκολο στην αρχή? αλλά εάν είστε πρόθυμοι να βάλετε τον χρήστη πρώτα, αξίζει τον κόπο.
Ακριβώς επειδή έχετε σχεδιάσει έναν απλό, καθαρό ή κινητό-εστιασμένο δικτυακό τόπο δεν σημαίνει ότι δεν θα πρέπει να είναι εκλεπτυσμένη. Karimrashid.com είναι ένα τέλειο παράδειγμα του τρόπου με τον οποίο η απλότητα και η πολυπλοκότητα μπορούν να συνδυαστούν στη δημιουργία ενός καθαρού και ανταποκρινόμενου, αλλά αριστοκρατικού σχεδίου.
2) Δημιουργία διατάξεων υγρού
Υπάρχουν απλά πάρα πολλά πιθανά μεγέθη οθόνης εκεί έξω για να επιλέξετε και να επιλέξετε ποια θα σχεδιάσετε για. Θα χρειαστεί να δημιουργήσετε μια διάταξη που προσαρμόζεται όσο το δυνατόν απρόσκοπτα σε όλους τους. Ευτυχώς, οι υγρές διατάξεις είναι εδώ για να σώσετε την ημέρα!
Με βάση τα ποσοστά και όχι τις συγκεκριμένες μετρήσεις όπως τα pixels, τα υγρά σχέδια έχουν γίνει το πρότυπο μεταξύ των επαγγελματιών του διαδικτύου. Μπορούν να είναι δύσκολο, αλλά να βεβαιωθείτε ότι όσο το δυνατόν περισσότεροι άνθρωποι μπορούν πραγματικά να χρησιμοποιήσουν το site σας αξίζει καλά την προσπάθεια.
3) Στόχος της λειτουργικότητας
Τι είναι η λειτουργικότητα; Είναι αυτό που προσφέρετε στους επισκέπτες σας να κάνουν τα πράγματα και να γίνουν γρήγορα. Με βάση τον σκοπό της ιστοσελίδας σας, όλα τα εργαλεία, όπως οι πλησιέστερες τοποθεσίες καταστημάτων, η αναζήτηση προϊόντων, οι κριτικές προϊόντων ή οι μετατροπείς νομισμάτων, θα πρέπει να βοηθούν τους χρήστες να εκτελούν προορισμένες "λειτουργίες" και να επιτύχουν στόχους πολύ πιο γρήγορα.
Purina , ένας πάροχος τροφίμων για ζώα συντροφιάς, είναι ένα τέλειο παράδειγμα για το πώς να κάνετε "λειτουργίες" πιο εύκολα σε μια ιστοσελίδα. Η αρχική σελίδα διαθέτει ένα πλαίσιο αναζήτησης όπου μπορείτε να αναζητήσετε το πράγμα που ψάχνετε. Παρακάτω υπάρχουν δύο ξεχωριστές στήλες για το είδος ειδών ζωοτροφών που ειδικεύονται. Ολόκληρη η ιστοσελίδα είναι εύκολη στην πλοήγηση με στήλη, κουμπιά, εργαλεία και σχεδιαστικά στοιχεία που κάνουν τη λήψη αποφάσεων για το καλύτερο είδος τροφής για κατοικίδια ζώα - και στη συνέχεια αγοράζουν - ένα αεράκι.
4) Προσδιορίστε τους χρήστες σας
Μην προσπαθήσετε να γίνετε βύσμα όλων των συναλλαγών, επειδή μπορεί να σας κοστίσει ένας τυπικός χρήστης και κανείς δεν το θέλει. Πρώτα ανακαλύψτε ποιοι είναι οι χρήστες σας. Στη συνέχεια, υπολογίστε τη συνηθισμένη συμπεριφορά περιήγησης ιστού. Μόλις το αφήσετε στην άκρη, μάθετε τι τους κάνει να τσιμπούρι. Οι σύγχρονοι χρήστες έχουν δύο βασικούς τύπους: αυτούς που κάνουν περιήγηση χωρίς στόχο και εκείνοι που θέλουν να εκτελέσουν μια εργασία. Κάθε μία από αυτές τις ομάδες θα απαιτούσε διαφορετικές "λειτουργίες" με βάση τις ανάγκες τους.
Δεν είναι δύσκολο να μαντέψουμε τα δημογραφικά στοιχεία των χρηστών της ιστοσελίδας The Body Shop αφού αφήνει υποδείξεις σε όλη τη σελίδα. Δεδομένου ότι το The Body Shop επικεντρώνεται σε «φυσικά συστατικά» και στον κοινωνικό ακτιβισμό, οι μονοχρωματικές πράσινες παραλλαγές, ο ρυθμιστής των φυσικών συστατικών, η "πράσινη" επιλογή των εικόνων, καθώς και οι εκθέσεις για δίκαιες συναλλαγές, υποσχέσεις και άλλες κοινωνικές εκδηλώσεις είναι κατανοητά καλά σχεδιασμένη σχεδιαστική φιλοσοφία.
5) Αναζητήστε πάντα τις βιβλιοθήκες και τις οδηγίες του προγραμματιστή
Με βάση την πλατφόρμα που θα χρησιμοποιήσετε, είναι απαραίτητο να δώσετε μια προσεκτική ματιά στις οδηγίες του UI. Μερικές πλατφόρμες επιτρέπουν μεγαλύτερη ευελιξία από άλλες. Όποια και αν είναι η περίπτωση, θα πρέπει να παραμείνουν ορισμένα βασικά στοιχεία της μάρκας ή των "υπογραφών".
Ένας προγραμματιστής εφαρμογών της Apple θα πρέπει να κοιτάξει iOS κατευθυντήριες γραμμές ανθρώπινης διεπαφής και ακολουθήστε τα πρότυπα της Apple όταν πρόκειται να σχεδιάσετε βασικά στοιχεία, στρατηγικές σχεδίασης, στοιχεία UI, σχεδιασμό εικονιδίων / εικόνων κλπ. Ο προγραμματιστής Android, από την άλλη πλευρά, πρέπει να μάθει τα πάντα για τα συστατικά, το στυλ, τη χρηστικότητα και τη διάταξη των τυπικών εφαρμογών Android με τη βοήθεια του Οδηγός για προγραμματιστές Android .
6) Κάντε όλο το περιεχόμενο διαθέσιμο σε όλους τους χρήστες
Μερικοί σχεδιαστές, αντί να κάνουν όλο το περιεχόμενό τους σε υγρή διάταξη, απλώς θα επιλέξουν να κρύψουν μερικά από αυτά από χρήστες κινητών τηλεφώνων. Μερικές φορές είναι επειδή η διάταξη είναι δύσκολη, ή αισθάνονται ότι υπάρχει υπερβολικό περιεχόμενο για μια διάταξη κινητού. Αυτή είναι η λανθασμένη προσέγγιση.
Η παροχή στους χρήστες μιας "απογυμνωμένης" έκδοσης του ιστότοπου ή της εφαρμογής σας δεν είναι μόνο άδικο για τους χρήστες των κινητών συσκευών, αλλά μπορεί να αντισταθεί σοβαρά σε εσάς και να χάσει τους πελάτες σας. Ίσως χρειαστεί να απλοποιήσετε τη διάταξη σε ακραίο σημείο, να μετακινήσετε κάποιο περιεχόμενο σε άλλες οθόνες για να μειώσετε την ακαταστασία ή απλώς να προσπαθήσετε να τα οργανώσετε καλύτερα. αλλά πρέπει να είναι εκεί .
Συγκρίνετε την έκδοση της επιφάνειας εργασίας του BBC site στην έκδοση για κινητά. Ενώ είναι απλούστερο από ό, τι ήταν, εξακολουθεί να βάζει όλα τα είδη πληροφοριών σε όλη την οθόνη. Η έκδοση για κινητά, αντίθετα, αφαιρεί μερικές από τις εικόνες (οι οποίες είναι ακόμα διαθέσιμες στα ίδια τα άρθρα), αλλά διατηρεί όλους τους τίτλους, απλοποιώντας δραματικά την εμπειρία σε μια οθόνη τηλεφώνου μεγέθους.
7) Σχεδιασμός για επαφή
Είναι επίσης χρήσιμο να έχετε κατά νου το γεγονός ότι ένας χρήστης κινητής συσκευής θα χρησιμοποιεί δάκτυλα αντί για δείκτες ποντικιού φιλικά προς την ακρίβεια. Το σχέδιό σας θα πρέπει να είναι εύκολο να πλοηγηθείτε με δάκτυλα όλων των μεγεθών και σχημάτων, δεδομένου ότι όλες οι κινητές συσκευές είναι τώρα οθόνη αφής. Ένας χρήστης δεν θα πρέπει να πιέζει πάρα πολύ ή να κάνει zoom για να αγγίξει κάτι ή να συμπληρώσει μια φόρμα ή να πατήσει ένα κουμπί. Οι ανακριβείς βρύσες είναι επίσης πολύ συνηθισμένες σε μικρές συσκευές οι οποίες θα πρέπει να ληφθούν υπόψη στο σχεδιασμό με αρκετά μεγάλες εισόδους αφής ή χειρονομίες για να γίνει η δουλειά.
Εδώ είναι α touch table με Peter-Paul Koch που θα μπορούσαν να βοηθήσουν. Παρατηρήστε πώς τα συμβάντα αφής (και άλλες ενέργειες) ενδέχεται να διαφέρουν ανάλογα με τη συμβατότητα του προγράμματος περιήγησης και τη συσκευή.
8) Χρησιμοποιήστε εργαλεία συμπίεσης
Το ποσό των εργαλείων που είναι διαθέσιμα σήμερα για να καταστήσει το έργο ενός σχεδιαστή λιγότερο επαχθές είναι αδιανόητο. Θα βρείτε συμπιεστές δέσμης ενεργειών όπως Συμπιεστή HTML ή Gzip συμπίεση που θα καταργήσει αυτόματα τα περιττά σχόλια, το λευκό κενό ή τον κωδικό. CSS minifier και Συμπιεστή CSS και μερικά ακόμη εργαλεία που θα σας επιτρέψουν να συνδυάσετε τον κώδικα CSS και να βελτιώσετε την απόδοση. Η συμπίεση εικόνας είναι επίσης εξίσου σημαντική. μερικές που θα μειώσουν το μέγεθος των αρχείων σας .jpeg και .png, διατηρώντας παράλληλα την ποιότητα ανέπαφη συμπεριλαμβάνοντας EWWW Image Optimizer , smush.it , optiPNG , και jpegtran .
Ακολουθεί ένα παράδειγμα σχεδιασμού χαρτοφυλακίου υψηλής απόδοσης RyJohnson . Ο ιστότοπος είναι γεμάτος από εντυπωσιακές εικόνες που δεν διαφέρουν από την έκδοση για υπολογιστές. Το μυστικό για γρήγορη φόρτωση εδώ είναι, χωρίς αμφιβολία, βελτιστοποίηση εικόνας.
