- Σύνθετες Αλληλεπιδράσεις Desktop, Απλές Αλληλεπιδράσεις Mobile.
- Η Απλότητα του Mobile είναι σημαντική
- Εναλλακτικές σε Σύνθετες Αλληλεπιδράσεις
- Σχεδιασμός Εντός των Περιορισμών
- Συνδυασμός όλων μαζί
Σύνθετες Αλληλεπιδράσεις Desktop, Απλές Αλληλεπιδράσεις Mobile.
Καθώς οι τεχνικές και τα εφέ στις ιστοσελίδες των desktop υπολογιστών καθίστανται ολοένα και πιο πολύπλοκες, οι εκδόσεις των ίδιων αυτών ιστότοπων για κινητά παραμένουν αρκετά κανονικοποιημένες με την έννοια ότι είναι σημαντικά απλούστερες. Αυτό είναι καλό.
Ενώ πολλοί αναδραστικοί ιστοτόποι επικεντρώνονται σε μια μοναδική εμπειρία, περισσότεροι σχεδιαστές δημιουργούν ιστότοπους που μοιάζουν με το ίδιο εμπορικό σήμα, αλλά προσφέρουν διαφορετικές, περισσότερο σχετικές με τη συσκευή εμπειρίες. Η κατασκευή μιας ιστοσελίδας δεν μπορεί ποτέ να αγνοεί την πραγματικότητα ότι η θέαση ενός ιστοτόπου από κινητή συσκευή για το 2017 παρουσίασε τα εξής στατιστικά στοιχεία
- Το % των επισκέψεων από κινητά ανέβηκε από 57% το 2016 σε 63% το 2017 .
- Το % χρονικής παραμονής σε μια ιστοσελίδα από κινητή συσκευή ανέβηκε από 40% το 2016 σε 49% για το 2017.
- Το % εγκατάλειψης μιας σελίδας από κινητή συσκευή έπεσε από 52% το 2016 σε 47% για το 2017.
Το αυτό φυσικά ισχύει και για την κατασκευή ενός eshop όπου τα ηλεκτρονικά φαρμακεί για να έχουμε ένα παράδειγμα από τον ελλαδικό χώρο κάνουν πλέον τις περισσότερες online πωλήσεις τους μέσα από κινητές συσκευές. Μπορούμε να κάνουμε μια πρόβλεψη για το 2018 βάσει της τάσης που παρατηρήσαμε το 2017; Χωρίς να ριψοκινδυνεύουμε ιδιαίτερα νομίζουμε ότι το 2018 θα είναι η πρώτη φορά που οι κινητές συσκευές θα πάρουν κεφάλι σε όλα τα στατιστικά επισκεψιμότητας των ιστοτόπων και eshops.
Η Απλότητα του Mobile είναι σημαντική
Όσον αφορά τη χρηστικότητα και τη λειτουργία, η απλότητα αποτελεί βασικό κριτήριο για τις κινητές συσκευές. Μερικά από τα πιο φανταχτερά στοιχεία σχεδίασης desktop – βίντεο, σύνθετα κινούμενα σχέδια και ακόμη καταστάσεις hover – απλά δεν μεταφέρονται σε μικρότερες οθόνες.
Αλλά αυτό δεν σημαίνει ότι δεν μπορείτε να έχετε το καλύτερο και από τα δύο, και γι ‘αυτό περισσότεροι web designers που εργάζονται με σύνθετα σχέδια desktop εφαρμόζουν μια απλοποιημένη έκδοση που ανταποκρίνεται στα κινητά.
Είναι καλύτερο για τους χρήστες, επειδή η απλοποιημένη έκδοση για κινητά είναι συχνά μικρότερη, φορτώνει ταχύτερα και δεν βασίζεται σε σύνδεση Internet υψηλής ταχύτητας (που δεν είναι πάντοτε διαθέσιμη) για να λειτουργούν σωστά. Το λιγότερο περίπλοκο interface είναι επίσης ευκολότερο στη χρήση όταν ο καμβάς είναι περιορισμένος επειδή δεν προσπαθείτε να χώνετε πάρα πολλά στοιχεία σε μια μικρή οθόνη ταυτόχρονα.
Ρίξτε μια ματιά στο roanoke.org (παραπάνω) σε desktop: Υπάρχει ένα έξυπνο animation κειμένου στην κύρια κεφαλίδα. Είναι μεγάλη, τολμηρή και τραβάει την προσοχή. Η έκδοση κινητού είναι εξίσου εντυπωσιακή με μια μεγάλη εικόνα, αλλά χωρίς την κίνηση του κειμένου. Θα ήταν πολύ μικρό για να γίνει (και να διαβαστεί) σε μικρότερη, πιο κάθετη μορφή και η κινούμενη εικόνα θα μπορούσε να φορτώσει το σχέδιο και να μην λειτουργήσει καθόλου σε κινητές συσκευές. Αυτή η απλή αλλαγή είναι ακριβώς ο λόγος που οι σχεδιαστές προτιμούν μοναδικές και κανονικοποιημένες εκδόσεις για κινητά ακόμα και αν ο σχεδιασμός σε desktop είναι πιο περίπλοκος.
Εναλλακτικές σε Σύνθετες Αλληλεπιδράσεις
Μπορεί να είναι απογοητευτικό να συνειδητοποιήσετε ότι το τέλειο στοιχείο σχεδιασμού απλά δε λειτουργεί σε μια κινητή συσκευή λόγω οπτικών περιορισμών ή προβλημάτων απόδοσης.
Ευτυχώς, υπάρχουν πολλές εναλλακτικές λύσεις για ιστοσελίδες κινητών που θα ανταποκρίνονται στις ανάγκες σας, οι οποίες θα λειτουργούν με τον σχεδιασμό της desktop ιστοσελίδας σας, χωρίς την πολύπλοκη αλληλεπίδραση.
• Αντικαταστήστε μια κύρια κεφαλίδα βίντεο με μια ωραία εικόνα της ίδιας σκηνής. Παρόλο που ένα screen grab από το βίντεο δεν είναι πάντοτε η καλύτερη επιλογή, μπορείτε να έχετε φωτογραφίες ταυτόχρονα με το βίντεο για αυτό το σκοπό. (Στη συνέχεια, θα έχετε επίσης μια συλλογή βίντεο κλιπ και φωτογραφιών που “ταιριάζουν” σε διάφορες εφαρμογές.) Εάν πρέπει να χρησιμοποιήσετε βίντεο, επιλέξτε ένα κουμπί που μεταφέρει τον χρήστη στο YouTube, το οποίο θα αναπαράγει πιο αξιόπιστα το βίντεο σε κινητές συσκευές.
• Ξεχάστε hover animation ή οδηγίες για κινητά. Δεν λειτουργούν. Αντ ‘αυτού, εντάξτε αγγίγματα ή ενέργειες με το δάχτυλο. Σχεδιάστε μεγάλα κουμπιά και άλλα στοιχεία με δυνατότητα κλικ/αγγίγματος που είναι εύκολα στην αλληλεπίδραση σε μια μικρότερη οθόνη. Το σχέδιο πρέπει να είναι προφανές και αρκετά εύκολο για το χρήστη να αλληλεπιδρά με αυτό ώστε να μη χρειάζεται τις οδηγίες ή οπτικές ενδείξεις που υπάρχουν στο hover. Χρησιμοποιήστε χειρονομίες που είναι συνηθέστερες για τα κινητά – σύρσιμο, άγγιγμα ή ακόμα και κούνημα – για να εμφανίσετε και να αποκρύψετε πληροφορίες.
• Ορισμένες απλές κινούμενες εικόνες λειτουργούν σε όλες τις συσκευές, αλλά στοιχεία όπως η φόρτωση κινούμενων εικόνων ή το περίπλοκο gamification ή η κίνηση βίντεο δεν μεταφέρονται σε κινητό UX. Το Coach, πάνω, μετατρέπει ένα slider με συνδυασμό φόντου βίντεο σε ένα κινούμενο GIF για κινητά. Οι χρήστες εξακολουθούν να βλέπουν κίνηση, αλλά είναι πολύ πιο ελαφρύ και περιλαμβάνονται σε ένα μόνο στοιχείο.
• Αφαιρέστε αμέσως όλα τα dropdown μενού. Οι σχεδιαστές συζητούν ακόμα την αξία ενός μενού τύπου χάμπουργκερ, το αγαπούν ή το μισούν, οι χρήστες φαίνεται να καταλαβαίνουν τι σημαίνει. Παρόλο που δεν συνιστάται απαραιτήτως για desktop, αυτή η μέθοδος απομάκρυνσης των στοιχείων πλοήγησης είναι μια βιώσιμη λύση για κινητά.
• Χρησιμοποιήστε φωνητική ενεργοποίηση όταν μπορείτε σε κινητά interfaces. Οι φωνητικές εντολές γίνονται γρήγορα το πρότυπο για την αλληλεπίδραση στις κινητές συσκευές. Σκεφτείτε την ιστοσελίδα σας: Υπάρχουν στοιχεία στα οποία θα μπορούσαν να μιλήσουν οι χρήστες;
• Αξιολογήστε προσεκτικά το χρώμα και το φόντο. Ορισμένα σχέδια desktop φαίνονται εξαιρετικά με σκούρο φόντο και πιο σκούρο τύπο, αλλά σε μικρότερα μεγέθη ο συνδυασμός αυτός μπορεί να είναι δυσανάγνωστος. Λόγω του μικρότερου μεγέθους καμβά, οι εκδόσεις κινητών των ιστότοπων πρέπει να έχουν άφθονη χρωματική αντίθεση ανάμεσα στο παρασκήνιο και τα στοιχεία του προσκήνιου και του κειμένου, ώστε να εξασφαλίζεται η μέγιστη αναγνωσιμότητα. Δεν χρειάζεται να αναπτύξετε μια εντελώς νέα παλέτα χρωμάτων, αλλά οι χρήστες κινητών έχουν την τάση να μετακινούνται μέσω του περιεχομένου πιο γρήγορα. Επιλέξτε περισσότερο σιωπηρά χρώματα, πιο σκούρα στοιχεία κειμένου και άφθονο λευκό χώρο.
Σχεδιασμός Εντός των Περιορισμών
Μην σχεδιάζετε απλώς ένα σχεδιασμό desktop και αφήνετε τον ιστότοπο για κινητά στην τύχη του. Αυτό συμβαίνει πολύ συχνά και είναι ο λόγος για τον οποίο υπάρχει αυτή η τάση σχεδιασμού. Ένας σημαντικός αριθμός χρηστών – για τους περισσότερους ιστότοπους αυτός συχνά είναι άνω του 50% – θα έχει πρόσβαση στο σχέδιο μέσω μιας κινητής συσκευής.
Σκεφτείτε τους κάθε έναν από αυτούς τους περιορισμούς στη διαδικασία σχεδιασμού και αναπτύξτε μια απλή λύση που είναι βελτιστοποιημένη για κινητά:
• Μέγεθος οθόνης και αναγνωσιμότητα: Σχεδιάστε για μια σκέψη ανά “οθόνη.”
• Συνδεσιμότητα: Οι βαρείς ιστότοποι με μεγάλους χρόνους φόρτωσης δεν θα χρησιμοποιούνται σε κινητές συσκευές. Τα περιθώρια προσοχής είναι σύντομα και αν ο ιστότοπος δεν φορτωθεί αμέσως, οι χρήστες θα βρουν κάτι άλλο για τον χρόνο τους.
• Άγγιγμα: Κάθε στοιχείο θα πρέπει να βελτιστοποιηθεί για την αφή. Και θυμηθείτε να αλλάξετε τη μικροσκοπία, ώστε τα κουμπιά να μην λένε “κάντε κλικ εδώ”. Χρησιμοποιήστε χειρονομίες και αγγίγματα με σύνεση και αποφύγετε λειτουργίες που λειτουργούν μόνο σε ελάχιστες συσκευές (όπως το 3D touch).
• Απόσπαση Προσοχής: Οι χρήστες κινητής τηλεφωνίας είναι γνωστοί για την απόσπαση της προσοχής τους. Παρέχετε περιεχόμενο σε μικρά, εύπεπτα μπλοκ που είναι εύκολα αντιληπτά με μια ματιά. Δώστε στους χρήστες βασικές πληροφορίες – επαφή, διεύθυνση, κλπ. – αμέσως.
Συνδυασμός όλων μαζί
Το τέχνασμα για έναν επιτυχημένο σχεδιασμό της ιστοσελίδας βρίσκεται στην προσαρμογή για διαφορετικά περιβάλλοντα. Μπορείτε να συμπεριλάβετε εξαιρετικά βίντεο κλιπ ή σύνθετα κινούμενα σχέδια σε μια εφαρμογή desktop, αλλά χρειάζεστε κάτι άλλο για κινητά.
Μην ξεχάσετε να προσθέσετε απλές πινελιές για κινητά που αγαπούν οι χρήστες: Οι ειδοποιήσεις, τα εργαλεία τοποθεσίας, το αναγνωριστικό αφής και η φορητή συνδεσιμότητα είναι μερικά μόνο από τα στοιχεία διεπαφής που μπορείτε να προσθέσετε σε ιστότοπους για κινητά για να αυξήσετε την αλληλεπίδραση και την ενασχόληση. Οι χρήστες γνωρίζουν και σχεδόν αναμένουν πολλές από αυτές τις αλληλεπιδράσεις (ιδιαίτερα την τοποθεσία) και θα πρέπει να αισθάνονται σαν ένα απρόσκοπτο κομμάτι του σχεδιασμού που δε χρειάζεται να τις βλέπουν ή να τις σκεφτούν.
Το Weather Channel διαθέτει έναν ισχυρό ιστότοπο για desktop, αλλά κάνει κάτι υπέροχο όταν το έχετε πρόσβαση από κινητή συσκευή. Οι τρέχουσες τοπικές καιρικές συνθήκες εμφανίζονται σε ένα μεγαλύτερο, πιο έντονο κουτί ακριβώς στην κορυφή της οθόνης. Αυτός ο σχεδιασμός δίνει στους χρήστες ακριβώς το σωστό περιεχόμενο, στη σωστή μορφή, την κατάλληλη στιγμή – μια απόφαση που αντιπροσωπεύει την καρδιά του mobile design.
Μπορεί αυτή η αλλαγή να αφήσει ανεπηρέαστη την διαδικασία προώθησης μιας ιστοσελίδας ή της διαφήμισης της στο internet; Φυσικά και όχι. Δεν θα αναφερθούμε μόνο σε καθαρά τεχνικούς παράγοντες όπως ο χρόνος παραμονής σε μια ιστοσελίδα , η ταχύτητα πρόσβασης σε αυτήν και άλλους που επηρεάζουν την κατάταξη μιας ιστοσελίδας στην Google και σε άλλες μηχανές αναζήτησης. Δεν θα αναφερθούμε στο γεγονός ότι όταν ξεκινούμε μια διαφημιστική καμπάνια στο Google , στο Facebook στο Instagram και αλλού δημιουργούμε διαφορετικές εκδόσεις της ίδιας διαφήμισης για desktop και κινητές συσκευές άρα και δεν μπορεί η ιστοσελίδα μας / ηλεκτρονικό μας κατάστημα να αγνοεί ή να υποβαθμίζει την σημασία διάκρισης , λειτουργικής και αισθητικής μεταξύ αυτών. Θα σταθούμε περισσότερο στο γεγονός ότι όπως όταν παίζεις μια παρτίδα σκάκι δεν πρέπει να εστιάζει σε μια περιοχή αλλά να βλέπεις όλη την σκακιέρα έτσι και εδώ η προσέγγιση μας πρέπει να είναι ολιστική.
Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.
ΠΗΓΗ: https://www.dreamweaver.gr/desktop-mobile-web-design.php
