ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ. Διδάσκων: Κωνσταντίνος Στεφανίδης

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 1

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

3 Διαφάνεια 3

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

5 Τα εξατομικευμένα Springboard χρησιμοποιούνται για να παρουσιάζουν προσωπικές πληροφορίες προφίλ μαζί με επιλογές μενού Διαφάνεια 5

6 Τα πλέγματα 3x3, 2x3, 2x2, και 1x2 είναι οι πιο συνηθισμένες διατάξεις Αλλά το Springboard δεν χρειάζεται να ακολουθεί τη διάταξη του πλέγματος Κάποιες επιλογές μπορούν να είναι μεγαλύτερες αναλογικά για να εκφράσουν μεγαλύτερη σπουδαιότητα Διαφάνεια 6

7 Χρησιμοποιήστε μια διάταξη πλέγματος για αντικείμενα ίδιας σπουδαιότητας ή μια ακανόνιστη διάταξη για να δώσετε έμφαση σε κάποια αντικείμενα Διαφάνεια 7

8 Υπάρχουν πολλές παραλλαγές αυτού του προτύπου, όπως οι προσωποποιημένες λίστες μενού, ομαδοποιημένες λίστες και οι επαυξημένες λίστες Οι επαυξημένες λίστες είναι απλές λίστες μενού με επιπλέον features για αναζήτηση, πλοήγηση ή φιλτράρισμα Διαφάνεια 8

9 Οι λίστες μενού δουλεύουν καλά για μεγάλους τίτλους ή όπου χρειάζονται υπότιτλοι Οι εφαρμογές που χρησιμοποιούν λίστες μενού θα πρέπει να προσφέρουν μια επιλογή σε όλες τις εσωτερικές οθόνες που να επιστρέφει στην λίστα μενού Συνήθως ένα κουμπί στην μπάρα τίτλου με ένα εικονίδιο λίστας ή τη λέξη «μενού» Επαυξημένη λίστα, Amazon MP3 Ομαδοποιημένη λίστα, Stratus Διαφάνεια 9

10 Η πλοήγηση με tab δεν είναι ανεξάρτητη του OS γιατί κάθε OS έχει τις δικές του οδηγίες για την τοποθέτηση και σχεδίαση των tab Τα κάτω tab, που τα βρίσκουμε στα ios, WebOS, και BlackBerry, είναι η πιο φιλική επιλογή για τον αντίχειρα Τα tab στην κορυφή, που τα βρίσκουμε στα Android, Symbian, και Windows, είναι γνώριμα γιατί είναι σχεδιασμένα σύμφωνά με τα σχεδιαστικά πρότυπα πλοήγησης για ιστοσελίδες Η Nokia και τα Windows χρησιμοποιούν scrolling tab στην κορυφή που μπορείς να κάνεις flick για να αποκαλυφθούν περισσότερες επιλογές Υποδείξτε ξεκάθαρα το επιλεγμένο μενού διαφοροποιώντας το επιλεγμένο tab οπτικά από τα υπόλοιπα Χρησιμοποιήστε εύκολα αναγνωρίσιμα εικονίδια ή εικονίδια με ετικέτες Διαφάνεια 10

11 Τα tab στο κάτω μέρος με οριζόντιο scrolling, όπως φαίνονται στην εφαρμογή για κινητά των Starbucks, παρέχουν ένα χρήσιμο μηχανισμό για να προσφερθούν περισσότερες επιλογές χωρίς την ανάγκη ανοίγματος μιας οθόνης με «Περισσότερα» (More ) Διαφάνεια 11

12 Το πρότυπο της Συλλογής (Gallery) φέρνει στην επιφάνεια συγκεκριμένα κομμάτια περιεχομένου προς πλοήγηση Το περιεχόμενο είναι συνήθως συγκεκριμένα άρθρα, συνταγές, φωτογραφίες ή προϊόντα και μπορούν να διαταχθούν σε carousel, grid ή slideshow Δουλεύει καλύτερα για περιεχόμενο που ανανεώνεται συχνά και οι χρήστες θέλουν να προσπελάσουν Διαφάνεια 12

13 Τα Dashboard* παρέχουν μια συγκέντρωση από βασικούς δείκτες απόδοσης (key performance indicators, KPIs) Κάθε μέτρηση μπορεί να ανοιχτεί για περισσότερες πληροφορίες Είναι χρήσιμα για εφαρμογές οικονομικών, εργαλεία ανάλυσης και εφαρμογές πωλήσεων και marketing Μην φορτώνετε το dashboard, διεξάγετε έρευνες για να καθορίσετε τους βασικούς δείκτες που θα συμπεριλάβετε *Dashboard: Ταμπλώ αυτοκινήτου, πίνακας ελέγχου Διαφάνεια 13

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

16 Το Mega Menu για κινητά είναι ένα μεγάλο πάνελ που επικαλύπτει την οθόνη, με προσωποποιημένη μορφοποίηση και ομαδοποίηση των επιλογών του μενού Διαλέξτε ένα πιο κατάλληλο πρότυπο, όπως τα tab, αν υπάρχουν μόνο λίγες βασικές επιλογές στην εφαρμογή Διαφάνεια 16

17 Η δευτερεύουσα πλοήγηση είναι η πλοήγηση μέσα σε μια σελίδα ή κομμάτι της εφαρμογής Οποιαδήποτε από τα σχεδιαστικά πρότυπα της κύριας πλοήγησης μπορεί να επαναχρησιμοποιηθεί σαν πρότυπο δευτερεύουσας πλοήγησης Είναι σύνηθες να δεις Τabs μέσα σε Tabs, Tabs με Λίστες, Tabs και Dashboard, Springboard και Συλλογή, κλπ. Υπάρχουν κάποια επιπλέον πρότυπα που δουλεύουν καλά σαν δευτερεύουσα πλοήγηση αλλά πιθανώς δεν είναι ιδανικά για κύρια πλοήγηση: Carousel Σελίδων Carousel εικόνων Επεκτεινόμενες Λίστες Κύρια, tabs - δευτερεύουσα, springboard Κύρια, tabs - δευτερεύουσα, λίστα Διαφάνεια 17

19 Αυτό το πρότυπο μπορεί να χρησιμοποιηθεί για τη γρήγορη πλοήγηση εντός ενός διακριτού συνόλου από σελίδες χρησιμοποιώντας τη χειρονομία flick Ο δείκτης της σελίδας (ο όρος του ios για τις μικρές κουκκίδες) δείχνει πόσες σελίδες υπάρχουν στο carousel Περιορισμοί: σκεφτείτε τη χρήση λίστας για την πλοήγηση σε παραπάνω από οκτώ σελίδες Διαφάνεια 19

20 Το carousel εικόνων μπορεί να είναι ένα 2D carousel ή να μοιάζει περισσότερο με το coverflow του itunes Ιδανικό για την παρουσίαση φρέσκου οπτικού περιεχομένου, όπως άρθρα, προϊόντα και φωτογραφίες Να παρέχετε οπτικό affordance, είτε με βελάκια, τμηματικές εικόνες ή δείκτες σελίδας (κουκκίδες) έτσι ώστε να είναι εμφανές ότι υπάρχει πρόσβαση σε περισσότερο περιεχόμενο Διαφάνεια 20

21 Η επεκτεινόμενη λίστα κάνει μια οθόνη να επεκτείνεται προς τα κάτω και να αποκαλύψει περισσότερες πληροφορίες Είναι πιο συνηθισμένη σε ιστοσελίδες φτιαγμένες για κινητό παρά σε εφαρμογές κινητού αλλά δουλεύει εξίσου καλά και στις δυο περιπτώσεις Διαφάνεια 21

23 Οι φόρμες εισόδου πρέπει να έχουν ένα ελάχιστο πλήθος εισόδων: Όνομα χρήστη, κωδικό, κουμπί ενέργειας, βοήθεια για τον κωδικό, επιλογή για εγγραφή Κάποιες εφαρμογές το κάνουν αυτό σε μια μοναδική οθόνη Άλλες εφαρμογές παρουσιάζουν την επιλογή εισόδου ή εγγραφής εξ αρχής και μετά οδηγούν το χρήστη στην κατάλληλη φόρμα Διαφάνεια 23

24 H Εγγραφή, όπως και η Είσοδος, θα πρέπει να έχει ένα ελάχιστο πλήθος εισόδων Ξεφορτωθείτε τα στοιχεία που δεν εκτελούν σημαντικές λειτουργίες Π.χ., τα πεδία επιβεβαίωση και επιβεβαίωση κωδικού Καθιερώστε μια σύμβαση για τις ετικέτες που είναι ευανάγνωστη Αποφύγετε τις οριζόντιες ετικέτες και χρησιμοποιήστε κάθετες ετικέτες ή «αχνές» ετικέτες (watermarked) μέσα στα πεδία Κρατήστε μικρή τη φόρμα, κατά προτίμηση μία οθόνη, με το κουμπί Εγγραφής πάνω από τη «δίπλωση» (above the fold). Κάντε τη διαδικασία εισόδου εύκολη για έναν ήδη εγγεγραμμένο χρήστη Κάθετες ετικέτες «Αχνές» ετικέτες Διαφάνεια 24

25 Η πληρωμή σε κινητό είναι πιο συνηθισμένη σε ιστοσελίδες προσαρμοσμένες για κινητά παρά σε εφαρμογές αλλά ισχύουν οι ίδιοι κανόνες και στις δύο περιπτώσεις: Χρησιμοποιήστε τα standard controls της συσκευής στη φόρμα πληρωμής Σκεφτείτε να συγχωνεύσετε πολλαπλές οθόνες σε μία φόρμα πληρωμής Καταστήματα όπως το Zappos και η Apple δίνουν μια μικρή φόρμα πληρωμής με τμήματα που μπορούν να «ανοίξουν» για να συμπληρωθούν Άλλα καταστήματα όπως το Target και το Gilt απλώς χρησιμοποιούν μια μακριά φόρμα Προσφέρετε ένα μηχανισμό για γρήγορη πληρωμή στο μέλλον, όπως αποθηκευμένες πληροφορίες της κάρτας ή είσοδο για πληρωμή Να εμφανίζετε το λουκέτο στην κορυφή της σελίδας για να δείχνετε ότι η σύνδεση είναι ασφαλής Οδηγοί πληρωμής (wizards), όπως στο Home Depot, μάλλον δεν είναι η γρηγορότερη / αποτελεσματικότερη σχεδίαση Σχεδιάστε για ταχύτητα, αποδοτικότητα και καθησυχασμό Εξαλείψτε περιττά πεδία και ελαχιστοποιήστε τον αριθμό σελίδων και βημάτων Διαφάνεια 25

26 Ο οδηγός πληρωμής του Home Depot δεν είναι ιδανικός για εφαρμογή κινητού Πληρωμή: Apple και Zappos Διαφάνεια 26

27 Κάποιες αναζητήσεις απαιτούν πολλαπλές εισόδους, ή κριτήρια, για να παράγουν αποτελέσματα Όπως και τα άλλα πρότυπα για φόρμες, τα κριτήρια αναζήτησης πρέπει να περιορίζονται στα απαραίτητα πεδία και να παρέχουν λογικές default τιμές Για παράδειγμα, η φόρμα αναζήτησης πτήσεων του Kayak έχει ως default εισιτήριο με επιστροφή, για ένα άτομο, στην οικονομική θέση Οι αναζητήσεις της «Έρευνας Αυτοκινήτου» και του «Καταλόγου Νέων Αυτοκινήτων» του Edmunds είναι επίσης μονές σελίδες και έχουν μια άμεση προεπισκόπηση του αριθμού των αποτελεσμάτων πριν τρέξει πλήρως η αναζήτηση Διαφάνεια 27

28 Αποφύγετε να κατακλύζετε το χρήστη με επιλογές, στοχεύστε προς μια μονή σελίδα με κριτήρια Χρησιμοποιήστε τα κατάλληλα controls που είναι φιλικά προς τα δάχτυλα και γρήγορα Οι Trulia και REALTOR.com προσφέρουν παρόμοια κριτήρια αναζήτησης αλλά η διεπαφή του Trulia είναι ευκολότερη στη διαχείριση και λιγότερο πιεστική από τα πολλαπλά πεδία του REALTOR.com. Διαφάνεια 28

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

30 Για πιο μακροσκελή ροή ο χρήστης χρειάζεται να γνωρίζει περισσότερα για το ευρύτερο πλαίσιο της εφαρμογής Ρυθμιστές προϊόντων όπως το Chipotle s online ordering και το Starbucks drink builder καθοδηγούν το χρήστη με ένα κουμπί επόμενο ή συνέχεια Αλλά αυτή η προσέγγιση παραβιάζει το θεμελιώδη κανόνα ευχρηστίας της πλοήγησης: να ενημερώνετε το χρήστη για το πού βρίσκεται και πού μπορεί να πάει (δηλ., βήμα αριθμός x από y) Η ξεκάθαρη πλοήγηση είναι απαραίτητη ειδικά στις φόρμες για κινητό, γιατί υπάρχει μεγαλύτερη πιθανότητα ο χρήστης να διακοπεί ή να αποσπαστεί με κάποιο τρόπο Διαφάνεια 30

31 Μια καλύτερη σχεδίαση είναι η εφαρμογή TurboTax SnapTax, όπου τα βήματα και το κουμπί υποβολής εμφανίζονται σε μία σελίδα Κάθε βήμα μπορεί να ανοιχτεί και να συμπληρωθεί Η προσέγγιση της μονής σελίδας παρέχει πολύτιμες πληροφορίες για την πλοήγηση (υπάρχουν τρία βήματα στη διαδικασία, απομένουν δύο), αλλά επίσης δουλεύει και σαν μια σύνοψη για επισκόπηση πριν την υποβολή Διαφάνεια 31

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

33 Κάποιες φόρμες θα χρειαστούν scrolling Το πιο δύσκολο πρόβλημα της Μακριάς Φόρμας είναι το πού θα τοποθετηθούν τα κουμπιά ελέγχου και εξόδου (escape) Zappos και Skype αμφότερα χρησιμοποιούν modal φόρμες στις ios εφαρμογές τους, έτσι τα κουμπιά είναι στην μπάρα τίτλου Αυτό θα ήταν nonstandard σε άλλα OS, αλλά η απλή τοποθέτηση των κουμπιών στο κάτω μέρος της φόρμα δουλεύει καλά Διαφάνεια 33

34 Ακολουθήστε τις βέλτιστες πρακτικές της σχεδίασης φορμών, καθώς και τις οδηγίες του συγκεκριμένου OS για τη σειρά των κουμπιών και τη στοίχιση Μη σπάτε τεχνητά τη φόρμα σε βήματα για να αποφύγετε το scrolling Αφαιρέστε από τη φόρμα τυχόν περιττά πεδία Το Discover Card οπτικά διαφοροποιεί το κουμπί ελέγχου από το κουμπί εξόδου (escape) αλλά τα έχει σε λάθος σειρά για το ios Το Sam s Club έχει τα κουμπιά στη σωστή σειρά αλλά τα κουμπιά έχουν το ίδιο οπτικό «βάρος», ώστε πρέπει να κοιτάξεις προσεκτικά για να επιλέξεις το σωστό Διαφάνεια 34

35 Πολλές εφαρμογές για επιχειρήσεις συμπεριλαμβάνουν πίνακες γεμάτους με δεδομένα και θέλουν να τις μεταφέρουν και στις εφαρμογές για κινητά Λοιπόν, δεν μπορούν! Τουλάχιστον όχι με τον ίδιο τρόπο που θα το έκαναν για το web O παράγοντας της μορφής για κινητό προσφέρει επιπλέον ευκαιρίες: Επανεξετάστε ποιες πληροφορίες είναι οι πιο σημαντικές Εξερευνήστε άλλες γραφικές αναπαραστάσεις (π.χ., γραφήματα) Διαφάνεια 35

37 Βελτιώστε την αναγνωσιμότητα με: Εναλλάξ χρώματα μεταξύ γραμμών Τραβώντας διακριτικές γραμμές μεταξύ των σειρών Διαφάνεια 37

38 Χοντρές σειρές με πολλαπλές μεταβλητές για ένα αντικείμενο Στήλες χωρίς ετικέτες Αναγνωριστικό στήλης με μεγαλύτερη γραμματοσειρά Λεπτομέρειες με μικρότερη γραμματοσειρά Ιδανικό για γρήγορο σάρωμα και επιλογή Διαφάνεια 38

41 Όλα θεωρούνται δεδομένα στο ψηφιακό κόσμο Υπάρχουν κάποιες τεχνικές που μπορούν να τα κάνουν καλά και για τον «κινητό» κόσμο Διαφάνεια 41

42 Απαιτεί συγκεκριμένη ενέργεια Τα αποτελέσματα παρουσιάζονται στην περιοχή κάτω από το πεδίο αναζήτησης Καλύτερη σε συνδυασμό με την αυτόματη συμπλήρωση (autocomplete) Μια επιλογή για καθαρισμό πρέπει να είναι διαθέσιμη Διαφάνεια 42

43 Χρησιμοποιείται ευρέως Η δακτυλογράφηση εμφανίζει ένα σύνολο αποτελεσμάτων Επιλέξτε (tap) ένα προτεινόμενο ή συνεχίστε το γράψιμο και κάντε tap στο κουμπί αναζήτησης Πρέπει να υπάρχουν ενδείξεις ότι γίνεται αναζήτηση έτσι ώστε το σύστημα να έχει καλή ανάδραση Διαφάνεια 43

44 Δώστε έμφαση (emphasize) στο κείμενο που ταιριάζει στα αποτελέσματα Ομαδοποίηση αποτελεσμάτων ανά κατηγορία Π.χ., ξενοδοχεία, προορισμοί Διαφάνεια 44

45 Δυναμική αναζήτηση: Φιλτράρεις αποτελέσματα σε υπάρχουσες λίστες Αναζήτηση με εμβέλεια: Ορίζεις τα κριτήρια αναζήτησης πριν την αναζήτηση Διαφάνεια 45

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

47 Ξεχωριστή φόρμα για την είσοδο πολλαπλών κριτηρίων αναζήτησης Διαφάνεια 47

48 Μπορούν να προβληθούν σε ένα πίνακα, μια λίστα, ένα χάρτη, κλπ. Διαφάνεια 48

49 Αποφύγετε τη σελιδοποίηση στις κινητές συσκευές γιατί διασπά το μοντέλο της φυσικής αλληλεπίδρασης Διαφάνεια 49

50 Επιλέξτε προσεκτικά την default σειρά ταξινόμησης. Χρησιμοποιήστε την κοινή λογική! Επιπλέον επιλογές ταξινόμησης μπορούν να δοθούν χρησιμοποιώντας ένα από τα ακόλουθα πρότυπα Διαφάνεια 50

51 Λίγες μικρές επιλογές Απλή λύση με ένα tap Το toggle κουμπί μπορεί να τοποθετηθεί στην κορυφή ή στο κάτω μέρος Επιλογές Αύξουσας/Φθίνουσας μπορούν να ενσωματωθούν αρμονικά Δείχνετε ξεκάθαρα την επιλογή «ενεργό» ( on ) Διαφάνεια 51

52 Καλή εναλλακτική για την ταξινόμηση στην οθόνη Οι τίτλοι των επιλογών μπορεί να είναι μεγαλύτεροι Οι επιλογές ταξινόμησης μπορούν να τοποθετηθούν: Στην κορυφή (κοντά στο πεδίο αναζήτησης) Στο κάτω μέρος (κοντά στις άλλες επιλογές εμφάνισης) Διαφάνεια 52

53 Η πιο κοπιαστική επιλογή Διαφάνεια 53

54 Περιορίζουν μεγάλα σύνολα δεδομένων ή αποτελεσμάτων αναζήτησης Διαφάνεια 54

55 Παρόμοιο με την αναζήτηση στην οθόνη Με ένα tap εφαρμόζεται το φίλτρο Διαφάνεια 55

56 Ένα συρτάρι μπορεί να αποκαλύψει επιλογές φιλτραρίσματος Ένα flick ή tap στο χερούλι θα ανοίξει το συρτάρι Διαφάνεια 56

57 Χειριστείτε τον διάλογο σαν ένα pop-up όπου ο χρήστης πρέπει είτε να εφαρμόσει είτε να ακυρώσει Διαφάνεια 57

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

59 Δύο βασικές αρχές μπορούν να βοηθήσουν στη σχεδίαση εργαλείων και ενεργειών σε κινητές διεπαφές Κάντε το Άμεσο Κρατήστε το Ελαφρύ Διαφάνεια 59

61 Ενέργειες στο επίπεδο της οθόνης ή μια μπάρα εργαλείων για συχνές ενέργειες Επιλέξτε εύκολα αναγνωρίσιμα εικονίδια ή/και αυτό-επεξηγηματικές ετικέτες Διαφάνεια 61

62 Ενέργειες στο επίπεδο της οθόνης (παρόμοια με την μπάρα εργαλείων) αλλά υπάρχουν αρκετοί διαφορετικοί τρόποι πρόσβασης και προβολής Επιλέξτε άμεσες αλληλεπιδράσεις όπου είναι δυνατόν Μην κρύβετε την πλοήγηση στα Options Διαφάνεια 62

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

64 Τα εξειδικευμένα εργαλεία μπορούν να δουλέψουν πάνω σε ένα συγκεκριμένο αντικείμενο στην οθόνη (ανάλογα με το πλαίσιο χρήσης). Έχει νόημα (και αποσυμφορίζεται η διεπαφή) αν εμφανίζουμε αυτά τα εργαλεία μόνο όταν το πλαίσιο χρήσης έχει καθοριστεί Διαφάνεια 64

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

66 Στον μειωμένο χώρο της κινητής οθόνης, τέτοια κουμπιά δρουν ως έναυσμα και ως μηχανισμός ανάδρασης Τα κουμπιά πολλαπλών καταστάσεων δουλεύουν καλά για μια σειρά σφιχτά συσχετιζόμενων ενεργειών που εκτελούνται διαδοχικά σε περιορισμένο χώρο Διαφάνεια 66

67 Κοινές μαζικές ενέργειες είναι; Επιλογή, προσθήκη/διαγραφή και αναδιάταξη. Αντί να γεμίζει η βασική οθόνη με όλες αυτές τις επιλογές, να παρέχετε ένα τρόπο/κατάσταση (Mode) για μαζικές ενέργειες Μαζικές ενέργειες όπως η διαγραφή και η αναδιάταξη είναι καλύτερα να εμφανίζονται στην κατάσταση «Επεξεργασία» Παρέχετε μια προφανή επιλογή για έξοδο από την κατάσταση Διαφάνεια 67

68 Η αρχή της ανάδρασης λέει: «Παρέχετε κατάλληλη, σαφή και επίκαιρη ανάδραση στο χρήστη ώστε να βλέπει τα αποτελέσματα των ενεργειών του και να γνωρίζει τι συμβαίνει στο σύστημα» Η ανάδραση ποικίλλει από απλούς δείκτες προόδου και μηνύματα επιβεβαίωσης, σε πιο περίπλοκα animation και εφέ Διαφάνεια 68

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

70 Η επιβεβαίωση πρέπει να παρέχεται όταν γίνεται μια ενέργεια Βρείτε ένα τρόπο να παρέχετε ανάδραση χωρίς να διαταράσσεται η ροή του χρήστη Η Whole Foods χρησιμοποιεί animation για να δείξει πότε ένα αντικείμενο έχει προστεθεί σε μια λίστα. Με tap στο κουμπί Προσθήκη, το αντικείμενο «πέφτει» στη λίστα που βρίσκεται στη μπάρα της καρτέλας (tab) Διαφάνεια 70

71 Η ενσωματωμένη ανάδραση και τα κουμπιά αλλαγής κατάστασης είναι άλλοι διακριτικοί τρόποι να παρέχετε επιβεβαίωση χωρίς να διακόπτετε τη ροή Ενσωματωμένη Ανάδραση Κουμπιά Αλλαγής Κατάστασης Διαφάνεια 71

72 Μερικές φορές τα μηνύματα επιβεβαίωσης πρέπει να προβάλλονται σε περίοπτη θέση, όπως στο τέλος μιας συναλλαγής ή μετά την υποβολή πληροφοριών Διαφάνεια 72

73 Η έγκαιρη ανάδραση αυξάνει την εμπιστοσύνη του χρήστη προς μια εφαρμογή Η κατάσταση του συστήματος μπορεί να απεικονιστεί με ένα απλό μήνυμα, μια ένδειξη με animation, μια μπάρα φόρτωσης ή ένα συνδυασμό στοιχείων Το Netflix δείχνει Loading your queue... αντί να αφήνει κάποιον να αναρωτιέται αν η εφαρμογή έχει παγώσει Το Kayak χρησιμοποιεί μια μπάρα προόδου για να δείξει την κατάσταση των αποτελεσμάτων της αναζήτησης πτήσεων Η κατάσταση μπορεί να είναι ενσωματωμένη στην σελίδα ή να εμφανίζεται σε μια επικάλυψη (overlay) Διαφάνεια 73

74 Οι ενδείξεις λειτουργίας είναι η ιδιότητα ενός αντικειμένου που επιτρέπει σε ένα άτομο να εκτελέσει μια ενέργεια, όπως ένα χερούλι σε ένα συρτάρι ή ένα πόμολο σε μια πόρτα Συνήθη παραδείγματα σε λογισμικό είναι: χερούλια για σύρσιμο (drag), ανασήκωμα σελίδας, 3D control όπως κουμπιά και sliders Διαφάνεια 74

75 Τεχνικές οπτικής σχεδίασης όπως οι τρισδιάστατες γωνίες και η σκίαση μπορούν να κάνουν στοιχεία να δείχνουν ότι μπορούν να γίνουν tap Εφαρμόστε τα 3D εφέ με φειδώ, έξτρα σκιές και γωνίες μπορεί να μειώσουν την αναγνωσιμότητα (Αριστερά) Το κουμπί αναζήτησης του Yelp δεν μοιάζει tappable (Δεξιά) Όλες οι ετικέτες μοιάζουν tappable Διαφάνεια 75

76 Υπάρχουν τρόποι να παρέχετε ενδείξεις ότι υπάρχουν περισσότερα πράγματα για προβολή Οι ενδείξεις σελίδας του ios, αυτές οι μικρές κουκκίδες, έχουν υιοθετηθεί ευρέως σε web και κινητές εφαρμογές εξίσου Μια άλλη επιλογή είναι να δείχνετε ένα μικρό κομμάτι από το επόμενο αντικείμενο στην άκρη της οθόνης, είτε στο κάτω μέρος ή στα πλάγια Μια λιγότερη κοινή επιλογή είναι να εμφανίζετε ένα scrollbar. Η μπάρα μπορεί επίσης να δρα ως στόχος αφής για γρήγορη μετάβαση σε ένα συγκεκριμένο σημείο Διαφάνεια 76

77 Τα χερούλια (drag handles) υποδεικνύουν ότι ένα αντικείμενο μπορεί να μετακινηθεί, αναδιαταχθεί ή ανα-ταξινομηθεί Οι sliders επίσης βασίζονται σε drag handles Χρησιμοποιήστε ένα αναγνωρίσιμο εικονίδιο για το χερούλι Σκεφτείτε να χρησιμοποιήσετε μια πρόσκληση μαζί με το χερούλι για να ενημερώσετε τους χρήστες ότι αυτή δυνατότητα είναι διαθέσιμη Διαφάνεια 77

78 Neil, T. (2012). Mobile Design Pattern Gallery: UI Patterns for Mobile Applications. O'Reilly Media, Inc.. Διαφάνεια 78