Καλύτερος τρόπος αποθήκευσης φόρμας οσο αφορά το UX

[killer76]

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

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

• onkeyup που όταν αρχίσει κάποιος να πληκτρολογεί κάτι, εμφανίζει δίπλα από το πεδίο ένα κουμπί "αποθήκευση", που όταν πατιέται αποθηκεύει το πεδίο και εξαφανίζεται το κουμπί. (πολύς κώδικας για κάθε κουμπί όμως)
• onkeyup που όταν αρχίσει κάποιος να πληκτρολογεί κάτι, εμφανίζει στο τέλος της φόρμας ένα κουμπί "αποθήκευση". (Επειδή η φόρμα είναι μεγάλη, αν θέλει κάποιος να αλλάξει κάτι στο πρώτο πεδίο, θα του "κόψει" να κάνει σκρολ στο τέλος να πατήσει αποθήκευση? Σκέφτηκα να εμφανίζεται ένα κουμπί πάνω και ένα κάτω, είναι άσχημο όμως)
• onkeyup με άμεση αποθήκευση. (πολλά request στην βδ)
• onblur (αυτή η λύση μου αρεσε περισσότερο) που όταν αλλάξει κάποιος πεδίο, θα αποθηκευθεί αυτόματα αυτό που άλλαξε. (Αν όμως αλλάξει κάτι σε ένα πεδίο, πριν φύγει από αυτό, κλείσει τον browser? δεν θα αποθηκευούν οι αλλαγές).

Όσο αφορά την εμφάνιση έχω δοκιμάσει τα παρακάτω

• κειμενάκι <em> κάτω από το εκάστοτε πεδίο που αποθηκεύθηκε "Οι αλλαγές αποθηκεύθηκαν". (περισσότερος κώδικας)
• bootstrap alert με fade "οι αλλαγές αποθηκεύθηκαν.(Δεν μπορώ να αποφασίσω που είναι καλύτερα να εμφανίζεται.)

 

Επεξ/σία 21 Ιανουαρίου 2019 από killer76

[XPHSTOS_]

Αν η φόρμα είναι μεγάλη, αυτό είναι bad UX από μόνο του.
Δοκίμασε να χωρίσεις την φόρμα σε 2-3 μικρότερες και εμφάνιζε steps στον χρήστη, μπορείς επίσης να κάνεις auto-save το κάθε step.
Επίσης δεν έχει κανένα νόημα να κάνεις auto-save στην βάση, αν γίνει μια μαλακία και φύγει από την σελίδα ο χρήστης τότε θα έχεις στην βάση σου μια ημιτελή φόρμα?
Κράτα τα inputs του χρήστη στο local storage και όταν ολοκληρωθεί η φόρμα με το "save" τα σώζεις και στην βάση.

[killer76]

8 ώρες πριν, XPHSTOS_ είπε

Αν η φόρμα είναι μεγάλη, αυτό είναι bad UX από μόνο του.
Δοκίμασε να χωρίσεις την φόρμα σε 2-3 μικρότερες και εμφάνιζε steps στον χρήστη, μπορείς επίσης να κάνεις auto-save το κάθε step.
Επίσης δεν έχει κανένα νόημα να κάνεις auto-save στην βάση, αν γίνει μια μαλακία και φύγει από την σελίδα ο χρήστης τότε θα έχεις στην βάση σου μια ημιτελή φόρμα?
Κράτα τα inputs του χρήστη στο local storage και όταν ολοκληρωθεί η φόρμα με το "save" τα σώζεις και στην βάση.

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

Δηλαδή πχ Tab1 = Προσωπικές πληροφορίες

• Όνομα
• Επώνυμο
• Email
• Επωνυμία
• κλπ
• κλπ
• κλπ

Tab 2 = Στοιχεία επικοινωνίας

• Τηλέφωνο
• Κινητό
• Φαξ
• email
• Διευθυνση
• Περιοχή
• ΤΚ
• Πόλη
• κλπ
• κλπ
• κλπ

Ό χρήστης μπορεί να θέλει να μπεί και να αλλάξει πχ μονο το τηλέφωνο. Όταν το κάνει ποιος είναι κατα την γνώμη σας, για καλύτερο UX, από τους παραπάνω τρόπους που αναφέρω για την αποθήκευση της νέας τιμής? Να αλλάξει το τηλέφωνο και κάτω κάτω στην φόρμα να έχει ένα save? Να εμφανίζεται δίπλα από το input (του τηλεφώνου στο παραδειγμα) ένα save? Onblur από το πεδίο?

Για παράδειγμα η google έχει στο τέλος μια αποθήκευση

Το Facebook πατάς στην επεξεργασία της κάθε τιμής και ανοίγει ανοίγει ολοκληρο κουτάκι με save κλπ.

Ποιο σας αρέσει καλύτερα?

Επεξ/σία 22 Ιανουαρίου 2019 από killer76

[XPHSTOS_]

Ωραία, τότε ως χρήστης θα προτιμούσα κάθε φορά που αλλάζω κάτι απλά να γίνεται, χωρίς να πατάω κάτι.
Θα ήθελα ένα checkmark ή ένα μικρό λεκτικό που να μου λέει "saved" ή  να μου εμφανίζει κάποιο error αν κάτι πήγε στραβά.

Μπορείς να ξεκινήσεις την αποστολή των αλλαγών στην βάση μετά από ένα χρονικό διάστημα αφότου ο χρήστης σταμάτησε να γράφει. πχ. 1 sec μετά. ή να κάνεις ότι κάνει το FB.
Εμφανίζει save / cancel μόνο στα input boxes, τα υπόλοιπα τα κάνει save κατευθείαν.

[Predatorkill]

36 λεπτά πριν, XPHSTOS_ είπε

Μπορείς να ξεκινήσεις την αποστολή των αλλαγών στην βάση μετά από ένα χρονικό διάστημα αφότου ο χρήστης σταμάτησε να γράφει. πχ. 1 sec μετά. ή να κάνεις ότι κάνει το FB.

Just in case, αυτο γινεται με:

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

[Επισκέπτης]

Προσωπικά μου αρέσουν τα απλά πράγματα. Βάζεις τη φόρμα και στο τέλος ένα κουμπί καταχώρηση. Ούτε Ajax, ούτε onkey events, ούτε φανφάρες. Keep it simple.

Επίσης, δεν χρειάζεται να ζητάς τόσες πολλές προσωπικές πληροφορίες. Υπάρχει και το GDPR.

[killer76]

Στις 22/1/2019 στις 8:24 ΠΜ, XPHSTOS_ είπε

Ωραία, τότε ως χρήστης θα προτιμούσα κάθε φορά που αλλάζω κάτι απλά να γίνεται, χωρίς να πατάω κάτι.
Θα ήθελα ένα checkmark ή ένα μικρό λεκτικό που να μου λέει "saved" ή  να μου εμφανίζει κάποιο error αν κάτι πήγε στραβά.

Μπορείς να ξεκινήσεις την αποστολή των αλλαγών στην βάση μετά από ένα χρονικό διάστημα αφότου ο χρήστης σταμάτησε να γράφει. πχ. 1 sec μετά. ή να κάνεις ότι κάνει το FB.
Εμφανίζει save / cancel μόνο στα input boxes, τα υπόλοιπα τα κάνει save κατευθείαν.

Τελικά κατα 99% με αυτο το τροπο θα το κανω.

Στις 22/1/2019 στις 9:02 ΠΜ, Predatorkill είπε

Just in case, αυτο γινεται με:

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Thanks!!!

Στις 22/1/2019 στις 12:50 ΜΜ, elorant είπε

Προσωπικά μου αρέσουν τα απλά πράγματα. Βάζεις τη φόρμα και στο τέλος ένα κουμπί καταχώρηση. Ούτε Ajax, ούτε onkey events, ούτε φανφάρες. Keep it simple.

Επίσης, δεν χρειάζεται να ζητάς τόσες πολλές προσωπικές πληροφορίες. Υπάρχει και το GDPR.

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

[killer76]

Ρε παίδες....

Τα έφτιαξα όλα, αποθηκεύονται άμεσα με ajax, εμφανίζεται μήνυμα οτι αποθηκεύτηκε κλπ.

το input μου είναι καπως έτσι

<input type="text" onkeyup="save_fields(<?php echo $site_id;?>)" id="field1" />

....... κλπ.

Η function είναι του στυλ

function save_fields(site_id){

................

}

Όπως είπα, όλα δουλεύουν μέχρι στιγμής. Προέκυψε όμως ένα πρόβλημα. Όταν γίνει paste στο πεδίο, δεν ενεργοποιείται η function. Υπάρχει κάτι εναλλακτικό που μπορεί να μπεί αντί για onkeyup και να καλύπτει και το paste?

Επεξ/σία 25 Ιανουαρίου 2019 από killer76

[παπι]

Απορω γιατι βλεπω συνεχεια το onkeyup...

Τα events onkeyXXXXX ειναι events για το keyboard, δηλαδη αν αλλαξει το state του keyboard τοτε παιρνεις το αναλογο feedback. Εσενα δεν σε ενδιαφερει το keyboard αλλα το περιεχομενο του element, για αυτο υπαρχει το onchange και το oninput, το πρωτο θα σου δωσει feedback οταν το element χασει focus και εχει αλλαξει το περιεχομενο, το δευτερο οταν αλλαξει το περιεχομενο.

[killer76]

Στις 26/1/2019 στις 2:48 ΠΜ, παπι είπε

Απορω γιατι βλεπω συνεχεια το onkeyup...

Τα events onkeyXXXXX ειναι events για το keyboard, δηλαδη αν αλλαξει το state του keyboard τοτε παιρνεις το αναλογο feedback. Εσενα δεν σε ενδιαφερει το keyboard αλλα το περιεχομενο του element, για αυτο υπαρχει το onchange και το oninput, το πρωτο θα σου δωσει feedback οταν το element χασει focus και εχει αλλαξει το περιεχομενο, το δευτερο οταν αλλαξει το περιεχομενο.

Σε ευχαριστώ πολύ ρε @παπι δουλεψε ακριβώς όπως ήθελα με το oninput!!!