Πρώτα Βήματα - Αρχές προγραμματισμού

Απ: GUI! Τα «φώτα» σας!

Thiseas — Tue, 14 Aug 2007 07:22:01 GMT

tommas:
Καλησπέρα σας!

θα ήθελα την βοήθεια σας , λόγο ότι βαρέθηκα την συνηθισμένη διαπαφή που έχει το |VS2005(c#)| θα ήθελα να μου πείτε είτε εργαλεία , είτε τεχνάσματα που χρησιμοποιείται για να είναι ποιο ωραία και προσιτά στο χρήστη(εμένα) τα έργα σας!!!( GUI)

Εμένα η ερώτηση μου θυμίζει περισσότερο εργαλεία για ανάπτυξη User Interface παρά Βασικές Αρχές UI... οπότε επιτρέψτε μου να αναφερθώ στο 1ο.

Στην εταιρία μου (και όχι μόνο....) χρησιμοποιούμε components της Dev-Express.
Κατά την γνώμη μου, είναι καλογραμμένα, δεν παρουσιάζουν προβλήματα και τα data components τους (gridviews, treeviews, etc...) είναι απλά το οτι καλύτερο αυτή τη στιγμή κυκλοφορεί στην αγορά σε δυνατότητες!

Απ: GUI! Τα «φώτα» σας!

Dimitris Papadimitriou — Mon, 25 Jun 2007 19:57:17 GMT

προσθέτω κι εγώ μερικά, όπως μου ήρθαν αυτή τη στιγμή:

Ακολουθούμε τις παραδοχές των shortcuts των δημοφιλών εφαρμογών (π.χ. δεν βάζουμε στο ctrl+S την λειτουργία Show αλλά τη λειτουργία Save)
Δίνουμε στον χρήστη wizards για να εκτελέσει πολύπλοκες εργασίες που δεν γίνονται κάθε μέρα.
Δεν δίνουμε στον χρήστη wizards για να εκτελέσει απλές εργασίες ή πολύπλοκες εργασίες που γίνονται συχνά. Οι εργασίες που γίνονται συχνά πρέπει να γίνονται γρήγορα. Ακόμα κι αν είναι πολύπλοκες, επειδή ο χρήστης τις κάνει συχνά, θα τις συνηθίσει.
Φροντίζουμε να ανανεώνουμε το tab order κάθε φορά που κάνουμε αλλαγές στο UI. Αλλιώς... που είναι ο cursor;... οεο;
Χρησιμοποιούμε σωστά το hourglass.

Απ: GUI! Τα «φώτα» σας!

manosB — Mon, 25 Jun 2007 18:13:49 GMT

Να δώσω και εγώ τα αμυδρά μου φώτα.

Αυτό που πιστεύω είναι πολύ σημαντικό στο όλο θέμα του user interface είναι το θέμα της αισθητικής συνοχής της εφαρμογής. Δηλαδή όλες οι φόρμες που την απαρτίζουν είναι πολύ σημαντικό να ακολουθούν κοινό σχεδιαστικό πλάνο. Π.χ
--Π.χ κοινή γραμματοσειρά,
--κοινά χρώματα σε πεδία (υποχρεωτικά , Display items κλπ).
--Ίδια κουμπιά για ίδιες ενέργειες
--Κοινό Background
--Παρόμοια Grids κ.λ.π.

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

Και μια μικρή συμβουλή. Βάλτε το χρήστη να μπει στη λογική της εφαρμογής. Έτσι θα μπορέσει να καταλάβει πιο γρήγορα το πνεύμα και την επόμενη φορά που θα ζητήσει κάτι απλό (!@#$!@#$%) θα έχει υπόψη του τουλάχιστον πως μπορεί να υλοποιηθεί με βάση την ήδη υπάρχουσα. Εντάξει όχι ακριβώς αλλά δεν θα σου ζητάει : «Θέλω ένα Excel που να κάνει αυτό»!!!

Απ: GUI! Τα «φώτα» σας!

Q-apprentice — Sat, 23 Jun 2007 00:29:30 GMT

Αυτό που έκανε post η Νατάσα βοηθά πάρα πολύ...ειναι ένας καλός μίνι οδηγός!

Απ: GUI! Τα «φώτα» σας!

Νατάσα Μανουσοπούλου — Mon, 30 Oct 2006 17:48:15 GMT

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

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

Το αξίωμα που πρέπει να διέπει ένα user interface είναι ένα: Ο χρήστης είναι το αφεντικό και το software ο υπηρέτης του. Από αυτό το αξίωμα προκύπτουν πολλά θεωρήματα.

1. Σεβασμός στις προτιμήσεις και συνήθειες του χρήστη για το περιβάλλον εργασίας του

Ακολουθούμε τα χρώματα, τις γραμματοσειρές και τα μεγέθη του συστήματος
Παρέχουμε πρόσβαση με το πληκτρολόγιο όπου αυτό είναι δυνατόν, κατά προτίμηση στο σύνολο των λειτουργιών της εφαρμογής
Σε μια web page δεν καρφώνουμε το μέγεθος των γραμμάτων, αλλά αφήνουμε το επιλεγμένο μέγεθος του browser να το καθοδηγήσει. Ας μην ξεχνάμε άλλωστε ότι υπάρχουν εκεί έξω και άνθρωποι της τρίτης ηλικίας που χρησιμοποιούν υπολογιστές!
Τηρούμε τις συνήθεις «χειρονομίες» του περιβάλλοντος και του λειτουργικού συστήματος. Στα Windows π.χ. το δεξί κλικ ανοίγει ένα context menu, οπότε εμείς με το δεξί κλικ θα κάνουμε το ίδιο και σίγουρα δε θα το αντιστοιχίσουμε στο Send to back
Ακολουθούμε τα guidelines και τις κοινές πρακτικές του περιβάλλοντος για το οποίο αναπτύσσουμε. Το να βάλεις το menu bar της εφαρμογής στο κάτω μέρος του παραθύρου δεν είναι δημιουργικό, είναι προβληματικό.
Δε χρησιμοποιούμε στοιχεία του user interface που έχουν ήδη κάποια σημασία. Σε μια web page για παράδειγμα, δεν τονίζουμε κάποιο κείμενο υπογραμμίζοντας το, γιατί η υπογράμμιση στο Web σημαίνει κάτι άλλο.

2. Ο χρήστης δεν πρέπει να ψάχνει

Όλες οι εργασίες που μπορούν να γίνουν με το λογισμικό πρέπει να είναι συγκεντρωμένες κάπου (π.χ. μενού ή κάποιο άλλο κεντρικό control panel)
Σε κάθε σημείο της εφαρμογής, να υπάρχει ένας εμφανής τρόπος για να γίνει το καθετί. Π.χ. για μια εργασία που γίνεται με drag and drop πρέπει να υπάρχει και το αντίστοιχο button/menu item/toolbar button κλπ.
Δίνουμε hints για το καθετί δεν είναι τελείως τελείως προφανές. Αν κάτι είναι clickable και αυτό δεν είναι ολοφάνερο, τότε δίνουμε ένα rollover effect, αλλάζουμε τον κέρσορα όταν περνά από πάνω του κλπ.
Συγκεντρώνουμε τις βασικές λειτουργίες στο κέντρο του οπτικού πεδίου του χρήστη και όχι π.χ. στη status bar.

3. Τηρούμε τις μεταφορές που είναι κοινές στις περισσότερες εφαρμογές

Αν είναι button, πρέπει να μοιάζει με button και να αντιδρά σαν button. Μπορεί να είναι σχεδιασμένο αρτιστικά και να μοιάζει με έναν πραγματικό on off διακόπτη, αλλά η μεταφορά από τον πραγματικό κόσμο πρέπει να τηρείται. Ένα κοκοράκι που κουνάει τα φτερά του δεν είναι καλό υποκατάστατο για κουμπί.
Από την άλλη, αν δεν είναι button δεν πρέπει να δίνει τέτοια εντύπωση. Μπορεί να είναι ωραία τέσσερα ημισφαίρια στις τέσσερις γωνιές του παραθύρου μου, αλλά αυτά μοιάζουν για clickable, και ο ταλαίπωρος ο χρήστης θα αναρωτιέται τι είναι αυτά και γιατί δεν κάνουν τίποτα όταν τα πατάει.

4. Δίνουμε στο χρήστη πάντα μια έξοδο κινδύνου

Προσπαθούμε να παρέχουμε κάποιου είδους undo για σημαντικές ενέργειες.
Αν ξεκινάμε μια ενέργεια που δεν μπορεί να γίνει undo, προειδοποιούμε και ρωτάμε, δίνοντας την ευκαιρία στο χρήστη να πει όχι. To message box που γράφει «Η επιλογή αυτή θα διαγράψει όλα τα δεδομένα της βάσης» και έχει μόνο ένα κουμπί ΟΚ δεν προσφέρει τίποτα
Ο χειρισμός των controls πρέπει να είναι ακυρώσιμος. Έτσι, ένα context menu μπορεί να ακυρωθεί με escape και δεν υποχρεώνουμε το χρήστη να επιλέξει κάτι από αυτό. Σε ένα clickable element κάνουμε την ενέργεια του click στο mouse up και μόνο αν το ποντίκι είναι μέσα στο element ώστε να είναι δυνατή η ακύρωση της ενέργειας και μετά το mouse down.

5. Κάνουμε το user interface customizable, αλλά με μέτρο

Το βασικό control panel της εφαρμογής (το μενού σε πολλές περιπτώσεις) πρέπει να είναι πάντα προσβάσιμο.
Το customization που γίνεται με drag and drop πρέπει να είναι undoable (σκεφθείτε την menu bar του Word και θα καταλάβετε τι εννοώ)
Μετά το πιο δραστικό customization, η εφαρμογή πρέπει ακόμα να θυμίζει την αρχική της κατάσταση. Αλλιώς δεν υπάρχει δυνατότητα για εκπαίδευση, καλό manual, ή απομακρυσμένη υποστήριξη.

Απ: GUI! Τα «φώτα» σας!

tommaσ — Sun, 29 Oct 2006 07:05:42 GMT

Ανυπομονώ….

καλή συνέχεια και «επιτυχία» ……

Απ: GUI! Τα «φώτα» σας!

Panagiotis Kefalidis — Sun, 29 Oct 2006 06:38:04 GMT

Τι έθιξες τώρα Θωμά.. Λιγο υπομονή και τελειώνω τα άρθρα μου για να μπορέσω να κάνω post.. Επίσης ετοιμάζω και tutorial κλπ κλπ για XAML και WinFX (XP και Vista)..

GUI! Τα «φώτα» σας!

tommaσ — Sun, 29 Oct 2006 04:33:02 GMT

Καλησπέρα σας!

θα ήθελα την βοήθεια σας , λόγο ότι βαρέθηκα την συνηθισμένη διαπαφή που έχει το |VS2005(c#)| θα ήθελα να μου πείτε είτε εργαλεία , είτε τεχνάσματα που χρησιμοποιείται για να είναι ποιο ωραία και προσιτά στο χρήστη(εμένα) τα έργα σας!!!( GUI)