Yahoo! User Interface Blog (YUIBlog)

Αποτελέσματα της έρευνας του ακορντεόν Pattern

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

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

Που ανταποκρίθηκαν

Ερωτηθέντες προσδιόρισε τους ακόλουθους τρόπους:

• Σχεδιαστής 21,4%
• Developer 32,1%
• Υβριδικά (Τόσο σχεδιαστή και προγραμματιστή) 42,3%
• Κανένα εξ αυτών δε 4,2%

Ορολογία Διακρίσεις

Στη συντριπτική τους πλειοψηφία σε όλους τους συμμετέχοντες συμφώνησαν ότι

• Ακορντεόν και ακορντεόν Μενού σημαίνουν το ίδιο πράγμα (73%)
• Ακορντεόν και Δέντρο έλεγχοι είναι δύο διαφορετικά πράγματα (89%)

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

Μια μικρότερη πλειοψηφία είπε ότι ακορντεόν και Πτυσσόμενες ομάδες αναφέρονται στο ίδιο πράγμα (60%).

Αυτές οι πλειοψηφίες ήταν σταθερά μεταξύ τους ρόλους.

Παρουσίαση του Ακορντεόν

Γερά πλειοψηφία (68%), δήλωσε ότι ακορντεόν μπορεί να θέτει οριζόντια όσο και κάθετα (και στην πραγματικότητα είναι το μοντέλο πιστοποιείται καλά στο διαδίκτυο). Άνθρωποι πρότεινε ότι οι ετικέτες σε οριζόντια ακορντεόν θα πρέπει να είναι γραμμένο καθέτως και / ή να περιστραφεί.

Μια ακόμη μεγαλύτερη πλειοψηφία (72%) δήλωσε ότι ακορντεόν μπορεί να έχει μόνο δύο επίπεδα (αυτό το ευθυγραμμίζει με τη διάκριση μεταξύ ακορντεόν και δέντρα):

Μια μικρή πλειοψηφία (53%) δήλωσε ότι ακορντεόν μπορεί να είναι ένθετα σε άλλες ακορντεόν. Οι γραπτές παρατηρήσεις που πρότεινε ότι η διατύπωση του ερωτήματος οδήγησε ορισμένους να απαντήσει ότι είναι δυνατή, αλλά σίγουρα δεν είναι αναγκαστικά ευκταίο, κάνοντας προτάσεις όπως, "Εάν επαρκώς τους υδρορροή, αυτό θα ήταν δυνατό, αλλά γενικά μια φοβερή ιδέα - το είδος της, όπως η χρήση πάρα πολλές καρτέλες και θα τους έχει τυλίξτε σε πολλαπλές γραμμές. "

Αυτό ήταν ένα από τα ερωτήματα που αυτο-περιγράφονται σχεδιαστές και προγραμματιστές έλαβαν αντιτιθέμενες πλευρές. 57% του έργου και οι Υβρίδια συμφώνησαν ότι ακορντεόν μπορεί να είναι ένθετες, ενώ το 64% των Σχεδιαστές είπε ότι δεν μπορεί να είναι. (Δεν υπάρχει διαχωρισμός της Aboves 50/50!)

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

Πώς πρέπει να συμπεριφέρονται Ακορντεόν

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

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

Μια πολύ μεγαλύτερη πλειοψηφία (73%) πιστεύει ότι ένα ακορντεόν μπορεί να έχει ένα εντελώς κλειστή κατάσταση (δηλαδή, ότι δεν είναι απαραίτητο ότι πάντα υπάρχει ένα πάνελ ανοιχτό). Το μόνο ακραία τιμή είναι ότι οι Δεν του Aboves έσπασε το 60% για τη θέση ότι πρέπει πάντοτε να υπάρχει ένα ανοιχτό πάνελ.

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

Μια άλλη μεγάλη πλειοψηφία (76%) πιστεύει ότι το συνολικό μέγεθος ενός ακορντεόν μπορεί να αλλάξει ανάλογα με τις ανάγκες, αντί να περιορίζονται σε μια συνεπή μέγεθος. (Φυσικά, υπάρχουν καταστάσεις, όπως είναι η οθόνη του μια κινητή συσκευή, με την οποία μπορεί να είναι μια έγκυρη επιλογή ή ακόμη και μια πίεση σχεδιασμού που ένα ακορντεόν διατηρήσει μια συνεκτική μέγεθος.)

Μια πολύ μικρή πλειοψηφία (51%) πρότειναν ότι ακορντεόν θα πρέπει να ανοίξει για κλικ (σε αντίθεση με την Hover) και σχεδόν εξίσου μεγάλη μειονότητα (45%) δήλωσε ότι αυτό εξαρτάται. Είναι ενδιαφέρον, λιγότερο από το 4% ήταν πρόθυμοι να δηλώσουν το ακορντεόν θα πρέπει να ανοίξει για κυμανθούν κατά κανόνα.

Γραπτές παρατηρήσεις σχετικά με αυτό το ζήτημα που προσφέρει άφθονο καλή τροφή για σκέψη, όπως:

Άνοιγμα ενός πάνελ θα πρέπει να απαιτούν σαφή δράση. Εάν ένα ακορντεόν έχει πολλαπλές πάνελ, το άνοιγμα στις αιωρούνται θα μπορούσε να είναι αταίριαστος εμπειρία. Αντ 'αυτού, χρησιμοποιήστε ένα tooltip να μεταφέρει συνοπτικά στοιχεία για το τι είναι στην ομάδα, και να έχει ο χρήστης ρητά "κλικ" για να ανοίξει το πάνελ.

Εξαρτάται από τη διαμόρφωση του κάθε ακορντεόν.

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

Επίσης, θα πρέπει να υπάρχει η δυνατότητα να χρησιμοποιούν ανατροπής με διαφορετικούς κανόνες: (ένα πιο ανοικτό) ή (στοιχεία θα πρέπει να ανοιχθούν για mouseover μόνο).

Για προηγμένες χρήσεις, ένα ακορντεόν θα πρέπει να ανοίξει για κυμανθούν κατά τη διάρκεια εργασιών drag and drop. Σε κάθε άλλη περίσταση, δεν μπορείτε να εμπιστεύεστε ότι η hover είναι εκ προθέσεως.

Προσβασιμότητα

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

Εδώ είναι ένα δείγμα των άλλων διορατικότητα σχετικά με την προσβασιμότητα με ακορντεόν:

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

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

Ακορντεόν θα πρέπει να ανοίξει όλες τις ομάδες αν javascript είναι διαθέσιμο (αν και που μπορεί να παράγει ένα "τρεμοπαίζει" για τα άτομα με javascript).

Εξαρτάται από το αν το περιεχόμενο του κρυφού πάνελ είναι παρόν στο DOM ή έχει ανακτηθεί κατά το άνοιγμα του πάνελ. Αν είναι να ανακτηθεί, έμφαση πρέπει να δοθεί στην ομάδα που άνοιξε πρόσφατα.

Λοιπόν, πραγματικά πιστεύω ο τίτλος θα πρέπει να κάνετε κλικ, ειδικά αν το περιεχόμενο της στοιχείο θα είναι φορτωμένο με AJAX (ακριβώς όπως ένα tabview προσέγγιση), αλλά η πραγματικότητα είναι ότι μερικές φορές ο κύριος του έργου (θα έπρεπε να) / (θέλετε) τον έλεγχο για να προσαρμόσετε την συμπεριφορά. Εδώ είναι ο κατάλογος των παραδειγμάτων που θα δημιουργηθεί για την εφαρμογή widget ακορντεόν που βασίζονται στο YUI 2.x, είναι πιθανώς ένα από τα συστατικά που χρησιμοποιούνται από την ανάδευση επέκταση YUI.

Είχαμε μια περίπτωση όπου η ετικέτα »του ακορντεόν ήταν μια σύνδεση με μια πλήρη θέση blog, και έτσι δεν θα μπορούσε να ακορντεόν-κλικ. Στην περίπτωση αυτή, γράψαμε ένα εικονίδιο στην πηγή με JS να κάνουν τη δουλειά. Υπό την προϋπόθεση η εικόνα είναι αρκετά μεγάλη και / ή έρχεται με τη συντόμευση, δεν βλέπω μεγάλη δυσκολία ...

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

Αρκεί να σκεφτούμε ένα ακορντεόν ως καρτέλες άποψη. Ολόκληρη η περιοχή ετικέτα πάνελ θα πρέπει να κάνετε κλικ, αλλά αν περιέχει άλλα στοιχεία ελέγχου (π.χ. "να απορρίψει" ή "κοντά" button) προτείνω μόνο το σήμα (κείμενο), να κάνετε κλικ, ή τουλάχιστον η clikable περιοχή μόνο την επέκταση μέχρι το διαδραστικό ελέγχου (δηλαδή για μια λεζάντα που περιέχει ένα κουμπί, η περιοχή πάνω, κάτω και "μετά" το κουμπί θα πρέπει να κάνετε κλικ).

Αποδέσμευση του σχεδίου Pattern

Ένας σχολιαστής αμφισβήτησε την τεχνητή περιορισμούς της έρευνας (δίκαιη μπάτσο, αν με ρωτήσετε):

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

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

Έχουμε δημοσίευσε μια beta έκδοση του προτύπου ακορντεόν στο Yahoo! Design Pattern Library. Αν θέλετε να δώσουμε περαιτέρω σχόλια σχετικά με το σχέδιο, σε ένα ελεύθερο τρόπο φόρμα, παρακαλώ σταγόνα ή επισκεφθείτε τη σχετική συζήτηση φόρουμ.

Βρείτε συζητήσεις: Bloglines | technorati

Μοιραστείτε και επεκτείνει: Σελιδοδείκτης με το Yahoo! Ο Ιστός μου | Σελιδοδείκτης με del.icio.us | digg it! | Reddit!