Με ποιο τρόπο θα αλλάξουν οι ιστοσελίδες κατά το επόμενο έτος;
Τι θα “φορεθεί” και ποια είναι τα σημαντικά trends του ιστού;
Τρία σημαντικά ερώτημα, για τρεις διαφορετικές ομάδες ανθρώπων: τους ιδιοκτήτες ισοτόπων, τους σχεδιαστές και τους προγραμματιστές τους.
Σε ένα συνεχώς μεταβαλλόμενο περιβάλλον, όπως το διαδίκτυο, είναι σημαντικό να είστε ένα βήμα μπροστά από τον ανταγωνισμό. Γνωρίζοντας τις επικείμενες εξελίξεις και τάσεις της κατασκευής ιστοσελίδας, θα είστε σε θέση να διαμορφώσετε τις δικές σας ιστοσελίδες και τις ιστοσελίδες των πελατών σας, ώστε να συνάδουν με τα τελευταία web trends.
Σε αυτό το άρθρο, θα παρουσιάσουμε σχεδιαστικές και τεχνολογικές τάσεις που που είναι πιθανό να κυριαρχήσουν το προσεχές έτος στον σχεδιασμό ιστοσελίδων.
Πολλές από τις παρακάτω τάσεις, είναι συνέχειες ή μικρές τροποποιήσεις των υφιστάμενων εξελίξεων παρελθοντικών ετών. Ωστόσο, όλα τα παρακάτω, θα επηρεάσουν τον τρόπο που θα δημιουργήσουμε και θα διαμορφώσουμε τους ισότοπους μας κατά το επόμενο έτος.
Η αληθινή mobile-first προσεγγιστική
Ενώ το mobile-first ήταν στις τάσεις σχεδιασμού ιστοσελίδων εδώ και χρόνια, μόλις την τελευταία διετία, έγιναν σημαντικά βήματα ανάπτυξης.
Πλέον, έχουμε επίσημα περισσότερες κινητές συσκευές, παρά σταθερούς υπολογιστές. Το γεγονός αυτό, μας δείχνει πόσο σημαντικό ρολό θα παίξει παντού. Οι κινητές συσκευές έχουν καταστεί ένα σημαντικό και, για πολλούς, πρωτεύον εργαλείο navigation σε ιστοσελίδες.
Η Google σκοπεύει να αναπτύξει το πρώτο της mobile-first index, δίνοντας μεγαλύτερη σημασία και αντιμετωπίζοντας περισσότερο ευνοϊκά, ιστοσελίδες που λαμβάνουν υπ όψη τους την εμφάνιση τους σε κινητές συσκευές, περισσότερο από αυτή σε σταθερούς υπολογιστές. Για το λόγο αυτό, ο σχεδιασμός για κινητά, δεν είναι πλέον κάτι που θα πρέπει να προστίθεται ως μέρος της διαδικασίας σχεδιασμού ιστοσελίδων, αλλά θα πρέπει να υπολογίζεται σαν ένα από τα πρώτα πράγματα που πρέπει να γίνονται.
Εν ολίγοις, ο responsive σχεδιασμός , έχει ωριμάσει. Αυτό είναι επίσης εμφανές, από το γεγονός πως αρκετά στοιχεία σχεδιασμού για κινητές συσκευές, έχουν περάσει και σε σχεδιασμούς για σταθερές συσκευές (μεγάλη τυπογραφία, hamburger μενού, περιεχόμενο ‘above the fold’ κα).
Αυτά, θα συνεχιστούν και το νέο έτος, ενώ πολλά περισσότερα θα έρθουν. Ένα παράδειγμα είναι τα sticky elements στο κάτω μέρος της ιστοσελίδας (ναι, δεν είναι τυπογραφικό, στο ΚΑΤΩ μέρος), καθώς οι χρήστες κινητών τηλεφώνων γίνονται ολοένα και πιο συνηθισμένοι σε αυτά – είναι πιο εύκολο να τα χρησιμοποιήσουν. Προσωπική μας εκτίμηση, είναι πως σε λίγο καιρό, θα αρχίσουμε να τα βλέπουμε σχεδιασμού παντού.
Η υποστήριξη AMP (Accelerated Mobile Pages) είναι σχεδόν μια κατηγορία μόνη της στο κομμάτι των trends και εκτιμάται πως τη νέα χρόνια, θα χρησιμοποιηθεί ολοένα και περισσότερο.
Τα Push Notifications
Οι ειδοποιήσεις push είναι ένα από τα πιο επερχόμενα marketing channels. Φέτος θα δούμε ολοένα και περισσότερες ιστοσελίδες που προσφέρονται να τις κρατήσουν τους χρήστες τους ενημερωμένους με αυτό το τρόπο.
Θα αναρωτιέστε γιατί να προσθέσετε push ειδοποιήσεις στην WordPress ιστοσελίδα σας. Μα, επειδή:
- Έχουν καλή υποστήριξη συσκευών και περιηγητών
- Λειτουργούν φοβερά σε κινητές συσκευές
- Έχουν click-through rate, μεγαλύτερο από καμπανιάς email marketing
Από την άλλη, μπορούν να γίνουν ενοχλητικές. Στην πραγματικότητα, μόνο το ερώτημα που ζητά την άδεια σας για αποστολή ειδοποιήσεων push, αρκεί να λειτουργήσει σαν ο κύριος λόγος απόρριψης από πολλούς χρηστές. Αυτό θα αποτελέσει και την κύρια πρόκληση για τους σχεδιαστές ιστοσελίδων. Με τις ειδοποιήσεις push να γίνονται mainstream, θα πρέπει να βρεθεί έξυπνους και ελκυστικός τρόπος για να ενσωματωθεί η προτροπή αυτή, στον σχεδιασμό τους.
Τα προσαρμοσμένα γραφικά και τα illustrations
Visual = το βασικό μέρος του περιεχομένου στο διαδίκτυο.
Εμπλέκεται και είναι σε θέση να μεταφέρει πληροφορίες που οι λέξεις και το κείμενο δεν μπορούν με φυσικό τρόπο. Εκτός από αυτό, οι εικόνες έχουν πλέον και αξία SEO, εάν βελτιστοποιηθούν σωστά.
Αν και οι stock φωτογραφίες εξακολουθούν να ‘δουλεύουν’, υπάρχει μια νέα τάση που ‘τραβάει’ τις ιστοσελίδες προς την άλλη κατεύθυνση. Αντί γενικευμένες και γραφικές εικόνες stock, ετοιμαστείτε για ‘χειροποίητο υλικό’. Μοναδικά γραφικά, βασισμένα στις ανάγκες της κάθε ιστοσελίδας και μοναδικές εικονογραφήσεις, είναι στις τάσεις σχεδιασμού ιστοσελίδων για το νέο έτος.
Τα πλεονεκτήματά τους: μια ξεχωριστή προσωπικότητα και ο τόνος τους, που επιτρέπει στον ισότοπο σας να ξεχωρίζει, σε ένα διαρκώς αναπτυσσόμενο περιβάλλον. Επιπλέον, τα illustrations είναι συνήθως πιο ελαφριά από τις φωτογραφίες και άλλες εικόνες. Σε συνδυασμό με SVG γραφικά, έρχονται να καλύψουν την μαζική ανάγκη για επιτάχυνση της ταχύτητας των ισοτόπων.
Τα κινούμενα γραφικά
Οι πιο προηγμένες τεχνολογίες περιήγησης, επιτρέπουν στους σχεδιαστές ιστού να απομακρυνθούν από τα στατικά οπτικά και να βάλουν την κίνηση, στην ζωή της ιστοσελίδας. Το animation των ισότοπων, έχει γίνει άμεσα διαθέσιμο!
Η χρήση του, μπορεί να δώσει ζωή σε παλιού-σχεδιασμού ιστοσελίδες. Ειδικά σε συνδυασμό με μικρό-αλληλεπιδράσεις, έχει ως αποτέλεσμα μια πιο εμβληματική και διακρατική εμπειρία χρήστη.
Πιθανές εφαρμογές(τύποι) animations:
- Λογότυπα— Οι κινούμενες εικόνες καθιστούν τα λογότυπα, αξέχαστα. Οι χρήστες δεν αναγνωρίζουν πλέον το λογότυπο αλλά και τον τρόπο με τον οποίο παρουσιάζεται. Το λογότυπο μπορεί να πει μια ιστορία μόνο του για το brand.
- Animations φόρτωσης— Τα animations φόρτωσης είναι βασικά λειτουργικά χαρακτηριστικά. Γεφυρώνουν την αναμονή με την πρόσβαση στην πραγματική ιστοσελίδα και τη μετάδοση των πληροφοριών. Λειτουργούν σαν ανατρεπτικοί παράγοντες του πιθανού ενδεχόμενου ένας χρήστης να βαρεθεί και να εγκαταλείψει την ιστοσελίδα σας, μέχρι αυτή να φορτώσει.
- Περιήγηση— Χάρη στα κινητά , κινούμαστε πλέον μακριά από κλασικά μενού πλοήγησης. Τα κρυμμένα μενού είναι στη μόδα.
- Hover εφέ— Τα εφέ ποντικιού μεταδίδουν τη δυνατότητα αλληλεπίδρασης με ορισμένα στοιχεία. Δείχνουν στους χρήστες, που μπορούν να αναλάβουν δράση και πολλαπλασιάζουν την πιθανότητα για action.
- Εφέ κύλισης— Εφέ που ενεργοποιούνται κατά το scroll, περνούν μέρος κατά τη διάρκεια που οι χρήστες μετακινούνται προς τα κάτω. Μπορούν να δημιουργήσουν μια ολοκληρωμένη αφήγηση ( story telling) αντί να δείχνουν μόνο μια στατική σελίδα που απλά κινείται. Μπορούν επίσης να πάρουν τη θέση των κουμπιών και των μενού και να εκπαιδεύσουν τον χρήστη σε προϊόντα όπως, κάνει η Apple.
Τα Particle backgrounds
Το ερχόμενο έτος, θα μπορέσουμε να δούμε περισσότερα animation στο background των ισοτόπων. Τα practice background είναι η απάντηση σε μερικά προβλήματα που δημιουργούν τα background βίντεο – όπως το μέγεθός τους.
Δεδομένου ότι είναι κατασκευασμένα με JavaScript, είναι αρκετά ελαφριά. Με αυτόν τον τρόπο, μπορούν να εισαγάγουν κίνηση στο πίσω μέρος μιας ιστοσελίδας και να προσελκύσουν την προσοχή των χρηστών, χωρίς να την υπονομεύσουν.
Οι ζωντανές χρωματικές παλέτες και τα gradients
Στο παρελθόν, ο σχεδιασμός ιστοσελίδων έπρεπε να κρατήσει τις χρωματικές παλέτες σε safe επίπεδα. Ωστόσο, χάρη στις καλύτερες οθόνες που ολοένα εμφανίζονται και τα ζωντανά χρώματα που μπορούν να αναπαράγουν, μπορούν όλοι πλέον να χρησιμοποιήσουν χιλιάδες χρώματα σε κάθε ισότοπο.
Αυτό είναι κάτι που οι σχεδιαστές ιστοσελίδων, εκμεταλλεύονται.
Η νεότερη τάση σχεδιασμού ιστοσελίδων εμπεριέχει υψηλές αντιθέσεις και ζωντανούς, τολμηρούς χρωματισμός.
Αυτό ισχύει και για τα gradients, τα όποια επιστρέφουν στο προσκήνιο!
Οι ασύμμετρες και σκόπιμες ανωμαλίες στον σχεδιασμό
Δεδομένου ότι μια ιστοσελίδα μπορεί να εμφανιστεί οπουδήποτε πλέον, από τις μεγάλες τηλεοράσεις μέχρι την μικρότερη οθόνη κινητού τηλεφώνου, δεν είναι πλέον απαραίτητο να σχεδιάζονται με το παραδοσιακό «πλέγμα» ή αλλιώς «grid». Κατά συνέπεια, οι ασύμμετρες διατάξεις έχουν αρχίσει να χρησιμοποιούνται ολοένα και περισσότερο,
και εκτιμάται πως θα πάρουν ακόμη μεγαλύτερη διάσταση, στο επόμενο έτος.
Παρόλο που το παραδοσιακό «grid» εξακολουθεί να κυριαρχεί σε ιστοσελίδες με μεγάλο περιεχόμενο, οι περισσότερες ιστοσελίδες με επίκεντρο το design, προσπαθούν να ξεχωρίσουν χρησιμοποιώντας πρωτόγνωρο σχεδιασμό.
Ο συνδυασμός ασύμμετρου σχεδιασμού με parallax effects μπορεί να δημιουργήσει μια πολυεπίπεδη εμπειρία εμπλουτισμένα εφέ.
Οι τολμηρές γραμματοσειρές και η μεγάλη τυπογραφία
Η μεγάλη & τολμηρή τυπογραφία, έχει γίνει μια ολοένα αυξανομένη τάση σχεδιασμού τα τελευταία έτη.
Χάρη στον αυξανόμενο αριθμό γραμματοσειρών που προσφέρονται δωρεάν στο ευρύ κοινό, καθώς και στις βελτιώσεις των δυνατοτήτων των συσκευών, οι ισότοποι σας, μπορούν τώρα να κάνουν την διάφορα, χρησιμοποιώντας πραγματικά μεγάλα γράμματα. Ο συνδυασμός τους με άφθονο κενό, καθιστά εύκολη την ανάγνωση για τον χρηστή.
Επιπλέον, σχεδόν όλα τα προγράμματα περιήγησης υποστηρίζουν τις γραμματοσειρές TrueType / Open Type στις νέες τους εκδόσεις, με αποτέλεσμα οι εταιρείες, να μπορούν να χρησιμοποιήσουν τις δικές τους γραμματοσειρές για την παρουσία τους στο διαδίκτυο, χωρίς να χρειάζεται να βασίζονται σε συγκεκριμένες & περιορισμένες επιλογές.
Οι σχεδιαστές ιστοσελίδων θα επωφεληθούν περισσότερο από αυτό κατά το προσεχές έτος, ειδικά στην διαδικασία αντικατάστασης εικόνων με κείμενο, διαδικασία η όποια πάντα ήταν επιθυμητή αλλά όχι εφικτή. Οι γραμματοσειρές είναι ελαφρές και επεκτάσιμες, όποτε επιτρέπουν τα
οπτικές μηνύματα, χωρίς να αναγκάζουν τον περιηγητή του χρηστή να κάνει λήψη μεγάλων εικόνων, με οποίες συνέπειες αυτό έχει (δεδομένα, αργή φόρτωση κτλ).
Οι μικρο-αλληλεπιδράσεις
Εάν δεν είστε εξοικειωμένοι με τον όρο, οι μικρό-αλληλεπιδράσεις είναι μικρές υποδηλώσεις αντιδράσεων σε ιστοσελίδες (κυρίως κοινωνικής δικτύωσης) και υπάρχουν ήδη σε σχεδόν όλα τα κοινωνικά δίκτυα. Συνήθως, συνοδεύονται από μικρά animations.
Οι μικρό-αλληλεπιδράσεις δίνουν στους χρήστες τη δυνατότητα να αλληλεπιδρούν με το εκάστου περιεχόμενο, με διαφορετικούς τρόπους, ανάλογα με τα αισθήματα τους για αυτό.
Τα πλεονεκτήματα τους είναι:
- Οπτικό feedback για τηλενέργειες χρηστών
- Διαπεραστικότητα χωρίς την ανάγκη για refresh της σελίδας
- Βέλτιστη εμπειρία χρήστη
Είναι ήδη μια από τις επικείμενες τάσεις του σχεδιασμού ιστοσελίδων για το νέο έτος. Για παράδειγμα, το Medium εισήγαγε πρόσφατα την ικανότητα να «επικροτείτε» άρθρα που σας αρέσουν.
Υπάρχει επίσης μια σειρά από plugins WordPress που σας επιτρέπουν να κάνετε παρόμοια πράγματα. Για παράδειγμα, το Contact Form της WPForms, το όποιο σάς επιτρέπει να ορίσετε ένα κείμενο που θα παίρνει την θέση του ήδη υπάρχοντος, αμέσως μόλις κάνετε κλικ, στο κουμπί υποβολής. Plugins όπως το Animate It!, μπορούν να προσθέσουν επίσης τα εφέ κίνησης σε κουμπιά.
Τα chatbots
Τα chatbots είναι αναμφισβήτητα σε ανοδική πορεία. Με δεδομένο ότι έγινε επίσημο κάλεσμα του Facebook στους προγραμματιστές, ώστε να αρχίσουν να παράγουν bots για τους λογαριασμούς messenger των πελατών τους, ο αριθμός των υφιστάμενων bots αυξήθηκε από 30.000 σε 100.000 μέσα σε ένα χρόνο.
Τα πρώτα chatbot plugins για το WordPress, είναι ήδη διαθέσιμα. Μπορούν να απαντήσουν σε ερωτήσεις και να προσφέρουν υποστήριξη σε πελάτες (τουλάχιστον στο βασικό τους επίπεδο).
Σύνοψη
Η πρόβλεψη των τάσεων των ισότοπων για το κάθε έτος, δεν μπορεί να είναι 100% ακριβής. Θα καταλάβουμε ποια από τα παραπάνω θα κυριαρχήσουν το νέο έτος, μόνο όταν αυτό φτάσει στο τέλος του.
Ωστόσο, αυτό δεν σημαίνει ότι δεν υπάρχει αξία στο να σκεφτόμαστε εκ των προτέρων.
Για οποιονδήποτε εργάζεται ή κατέχει ισότοπους, είναι σημαντικό να παραμένει στην κορυφή των εξελίξεων.
Πολλά από αυτά που αναφέρονται στο παραπάνω άρθρο, είναι ήδη ορατά μέχρι σήμερα σε κάποιο βαθμό και θα γίνουν ακόμη περισσότερο, την νέα χρόνια. Θα δούμε επίσης και κάποια πραγματικά νέα πράγματα να ξεπηδάμε, τα όποια δεν είχαν φανεί στο προσκήνιο μέχρι σήμερα.
