Mobile Web Design 10 Συμβουλές για την καλύτερη χρηστικότητα

Η περιήγηση στο διαδίκτυο μέσω κινητού τηλεφώνου αναμένεται να μετατραπεί σε επόμενη μεγάλη πλατφόρμα Internet. Είναι πλέον εύκολο να περιηγηθείτε στο δίκτυο από σχεδόν οπουδήποτε χρησιμοποιώντας κινητές συσκευές που ταιριάζουν σε ένα χέρι λόγω της τεχνολογίας. Το να είσαι σύντομος σε καλή εφαρμογή χρηστικότητας στο κινητό web design καθιστά δύσκολη την περιήγησή σου σε διάφορα δημοφιλή κινητά websites. Ο σχεδιασμός για κινητές συσκευές πρέπει να είναι απλούστερος από τον κανονικό ιστότοπό του και να βασίζεται σε περισσότερους στόχους για να κάνει τη δουλειά, επειδή οι χρήστες αναζητούν κάτι συγκεκριμένο και επείγον.

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

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

1. Αποφασίστε για την ανάλυση οθόνης

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

Ακολουθεί μια λίστα των αναλύσεων ιστού που είναι δημοφιλείς σε κινητές συσκευές από τον Φεβρουάριο του 2011 που παρουσιάστηκε από το Uxbooth.com με το δημοσιευμένο άρθρο τους, Προτάσεις για το σχεδιασμό κινητού Web (Μέρος 2): Διαστάσεις, από τον David Leggett. Ο συγγραφέας εξηγεί μερικά σημεία σχετικά με τις διαστάσεις οθόνης και τις λύσεις για το σχεδιασμό του σχεδίου.

2. Διαχωρίστε ιστοσελίδες σε μικρές μερίδες

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

Για το παρακάτω παράδειγμα, η έκδοση ιστότοπου CBS News για κινητά εμφανίζει μόνο το μεγαλύτερο τμήμα ειδήσεων και σπάει τα άρθρα ειδήσεων σε μικρές μερίδες. Ενώ Treehugger παρουσιάζεται με τα πρόσφατα άρθρα τους και τα τελευταία tweets με μερικά από τα χαρακτηριστικά της πλήρους ιστοσελίδας. Και οι δύο ιστότοποι έχουν το χρήστη να κάνει κλικ σε έναν σύνδεσμο κειμένου για να δει το υπόλοιπο του άρθρου.

CBS News

Treehugger

3. Απλοποιήστε το σχέδιο

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

Για παράδειγμα, ο ιστότοπος έκδοσης για κινητά της Best Buy απαριθμεί μόνο τις πιο σημαντικές κατηγορίες προϊόντων που περιορίζουν το επίπεδο ιεραρχίας για το περιεχόμενο. Ενώ η αρχική σελίδα του κινητού YouTube εμφανίζει μόνο τα τέσσερα πιο πρόσφατα βίντεο προβολέων.

Καλύτερη αγορά

YouTube

4. Επιλογή για προβολή ολόκληρου του ιστότοπου

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

Για παράδειγμα, η Ars Technica έχει το κουμπί σύνδεσής της στον τυπικό ιστότοπο που βρίσκεται στην επικεφαλίδα. Ενώ το Shangri-La έχουν τοποθετηθεί στο υποσέλιδο το πλήρες link τους.

Ars Technica

Shangri-La

5. Τοποθέτηση πλοήγησης

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

D & G

Πολιτικά

Ημερήσιο Ωροσκόπιο

6. Χρησιμοποιήστε συνδέσμους κειμένου

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

Μια λίστα εκτός

Reddit

7. Κάντε διάκριση μεταξύ του επιλεγμένου συνδέσμου

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

Geek Squad

Ντίζελ

8. Ζυγοί δεσμών

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

Flickr

Κελάδημα

9. Μειώστε την εισαγωγή κειμένου χρήστη

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

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

Fedex

Tumblr

10. Δεν αναβοσβήνει ή ανανεώνεται

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

Με λίγα λόγια

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

Έχετε προτιμημένους ιστότοπους για κινητά που πραγματικά σας ενέπνευσαν; Μπορείτε να μοιραστείτε μερικές από τις συμβουλές σας για το σχεδιασμό ιστοσελίδων για κινητά Ενημέρωσέ μας!

Περαιτέρω ανάγνωση

1. Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές (alistapart.com)
2. Κάντε το site σας Mobile Friendly (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone Simulator