Πορτρέτο του Ξενοφών Απάκη
Ξενοφών Απάκης
Web designer και developer από το 1997

κατασκευή ιστοσελίδας ξενοδοχείου gif

κατασκευή ιστοσελίδας ξενοδοχείου gif

· Με δύο λόγια

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

Κίνηση και μικροκινήσεις σε ξενοδοχειακή ιστοσελίδα: πότε βοηθούν πραγματικά

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

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

Διαχωρίστε την ενημερωτική κίνηση από τη διακόσμηση

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

Μορφή αρχείου και χρήση δεν είναι το ίδιο πράγμα

Το GIF (Μορφή Ανταλλαγής Γραφικών, Graphics Interchange Format) είναι γνωστό για απλές κινούμενες εικόνες, όμως δεν είναι η μόνη επιλογή και δεν πρέπει να αποτελεί αυτόματη λύση. Για ορισμένα είδη κίνησης μπορεί να ταιριάζει καλύτερα ένα σύντομο βίντεο, μια μετάβαση CSS (Διαδοχικά Φύλλα Στυλ, Cascading Style Sheets) ή μια μικρή διανυσματική κίνηση. Η απόφαση εξαρτάται από τη διάρκεια, τα χρώματα, τη διαφάνεια, το αν απαιτείται επανάληψη και το πόσο κρίσιμο είναι το αρχείο για την πρώτη οθόνη. Η τεχνολογία πρέπει να ακολουθεί το σενάριο χρήσης.

Κρατήστε την κράτηση ήρεμη

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

Προσβασιμότητα: η κίνηση χρειάζεται εναλλακτική

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

Έλεγχος απόδοσης πριν και μετά

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

Πίνακας απόφασης για κάθε κινούμενο στοιχείο

ΕρώτησηΑν ναιΑν όχι
Εξηγεί αλλαγή κατάστασης;Κρατήστε σύντομη και σαφή μετάβαση.Μην τη θεωρείτε απαραίτητη.
Βρίσκεται πριν από την κύρια πληροφορία;Δώστε αυστηρό όριο βάρους και διάρκειας.Μπορεί να φορτωθεί αργότερα.
Επαναλαμβάνεται συνεχώς;Δώστε δυνατότητα παύσης ή αποφύγετέ το.Προτιμήστε μία διακριτική εκτέλεση.
Λειτουργεί χωρίς κίνηση;Υπάρχει ασφαλές εναλλακτική.Σχεδιάστε πρώτα στατική κατανόηση.
Στηρίζει κράτηση ή πλοήγηση;Μετρήστε αν μειώνει τριβή.Αξιολογήστε το κυρίως ως διακόσμηση.

Μικροαλληλεπιδράσεις που έχουν νόημα

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

Δώστε κανόνες στην ομάδα περιεχομένου

Αν επιτρέπεται σε κάθε συντάκτης να ανεβάζει οποιοδήποτε κινούμενο αρχείο, η αρχική πειθαρχία χάνεται γρήγορα. Χρειάζονται συγκεκριμένες θέσεις όπου επιτρέπεται κίνηση, μέγιστη διάρκεια, λογική στατική εικόνα προεπισκόπησης για βίντεο και κανόνες για αυτόματη αναπαραγωγή. Το CMS (Σύστημα Διαχείρισης Περιεχομένου, Content Management System) μπορεί να περιορίζει τύπους αρχείων ή να ζητά εναλλακτική στατική εικόνα. Με τέτοιους κανόνες, η ποιότητα δεν εξαρτάται από το ποιος ενημερώνει η ιστοσελίδα κάθε φορά.

Η πιο ώριμη κίνηση συχνά περνά απαρατήρητη

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

Όριο κίνησης πριν από τον έλεγχο σχεδιασμού

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

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

Δοκιμή με πραγματικό περιεχόμενο και όχι δοκιμαστική μακέτα

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

Σχετική ανάγνωση

Πριν εγκριθεί οποιοδήποτε κίνηση, περάστε το από ένα απλό τεστ: ποια απόφαση του επισκέπτη γίνεται ευκολότερη χάρη σε αυτό; Αν δεν υπάρχει σαφής απάντηση, η αφαίρεση είναι συνήθως η καθαρότερη λύση.