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

Transcript

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

2

3 1876: Εφεύρεση του τηλεφώνου 1894: Εφεύρεση του ραδιοφώνου 1921: Για πρώτη φορά, ο συνδυασμός του τηλεφώνου και του ραδιοφώνου επιτρέπει στα περιπολικά της Αστυνομίας του Detroit Michigan να επικοινωνούν μεταξύ τους 1927: Πρώτη υπερατλαντική τηλεφωνική κλήση 1935: Πρώτη τηλεφωνική κλήση που κάνει το γύρο του κόσμου 1938: Εφεύρεση του walkie-talkie. Ο εφευρέτης του, Al Gross, επίσης εφηύρε το τηλεφωνικό pager 11 χρόνια μετά 1946: Η AT&T προσφέρει την πρώτη εμπορική υπηρεσία κινητής τηλεφωνίας (τηλέφωνο σε αυτοκίνητο) σε ιδιώτες Διαφάνεια 3

4 1947: Εφεύρεση του Transfer Resistance Device, πιο γνωστού ως transistor 1962: Εκτοξεύεται ο Telstar, ο πρώτος ενεργός δορυφόρος τηλεπικοινωνιών 1963: Εφεύρεση του τηλεφώνου τόνου. Τηλ. υπηρεσίες όπως η αποστολή μηνυμάτων είναι τώρα εφικτές 1968: Παρουσιάζεται το πρωτότυπο Dynabook. Είναι ο πρόγονος των σημερινών laptop και PDA 1971: Ανακάλυψη της twisted-nematic LCD. Η Sharp την χρησιμοποιεί στον υπολογιστή τσέπης το 1973, και μειώνει την κατανάλωση ενέργειας κατά 99% 1972: Η Motorola παρουσιάζει το σχέδιο για το κινητό της τηλέφωνο DynaTAC, που χρησιμοποιεί τεχνολογία ραδιοκυψελών. Η πρώτη τηλεφωνική κλήση σε κινητό τηλέφωνο γίνεται τον Απρίλιο του 1973 Διαφάνεια 4

5 Κινητά τηλέφωνα Υπολογιστής παλάμης (Προσωπικός ψηφιακός βοηθός - Personal Digital Assistant- PDA) Λειτουργίες ατζέντας, μίνι εφαρμογές γραφείου, συγχρονισμός με PC Smartphones ( έξυπνα τηλέφωνα ) Κινητά τηλέφωνα με δυνατότητες PDA και πρόσφατα με επιπλέον λειτουργίες όπως κάμερες και αναπαραγωγή μουσικής Tablets Κινητοί υπολογιστές μεγαλύτεροι από κινητά τηλέφωνα Εξειδικευμένες συσκευές (π.χ., Amazon s Kindle) Δεν είναι ξεκάθαρο ακόμα αν στο μέλλον θα δούμε συσκευές που να συνδυάζουν περισσότερα χαρακτηριστικά ή αν θα δούμε συσκευές συγκεκριμένου σκοπού. Ο Norman είχε προβλέψει το δεύτερο αλλά φαίνεται πως ήταν λάθος Διαφάνεια 5

6 Κυκλοφόρησε στις 1 Ιουλίου, 1979 Ξεκίνησε την τάση για σμίκρυνση και φορητότητα Εισήγαγε μια αλλαγή στις συνήθειες ακρόασης μουσικής και παρείχε την πρώτη από αρκετές κινητές ή φορητές καινοτομίες, παίρνοντας μια οικιακή απασχόληση όπως η ακρόαση μουσικής και δίνοντας τη δυνατότητα της πρόσβασης σε αυτή από οπουδήποτε Διαφάνεια 6

7 DynaTAC (1984) Nokia 1011 (1992) iphone (2007) Το χάσμα μεταξύ του Nokia 1011 (το πρώτο GSM κινητό μαζικής παραγωγής και του iphone είναι μόλις 15 χρόνια Διαφάνεια 7

8 Πριν το iphone ήταν η εποχή του Frankenphone. Τα κινητά ήταν τόσο πρησμένα με features που οι χρήστες δυσκολεύονταν να καταλάβουν πώς να κάνουν ένα απλό τηλεφώνημα Το iphone προσέφερε μια θαυμάσια εμπειρία χρήσης σε μια όμορφη συσκευή Αναμφισβήτητα, η πρώτη κινητή συσκευή που έκανε τον «κανονικό» κόσμο (όχι μόνο τους geeks ) να ενθουσιάζονται με την χρήση ενός κινητού Από την εποχή που κυκλοφόρησε (2007) οι οθόνες αφής σε smartphones έχουν γίνει το standard Διαφάνεια 8

9 Υπάρχουν περισσότερες από 6 δισεκατομμύρια συνδέσεις κινητής τηλεφωνίας (2012) Μόνο 1.1 είναι συσκευές με broadband Το 2010 υπήρχαν τρεις φορές παραπάνω τηλέφωνα από ότι προσωπικοί υπολογιστές στον κόσμο Το International Telecommunications Union προβλέπει ότι μέχρι το 2014, με τον τωρινό ρυθμό ανάπτυξης, ο πλανήτης θα έχει περισσότερους κινητούς τηλεφωνικούς λογαριασμούς από ότι ανθρώπους Ενώ η αγορά των προσωπικών υπολογιστών συνεχίζει να μεγαλώνει, οι πωλήσεις των κινητών και η διακίνηση δεδομένων μέσω κινητών είναι μεγαλύτερη από την αντίστοιχη PC σχεδόν 3 προς 1 Στις Η.Π.Α. τα tablets με οθόνη αφής αυξήθηκαν 400% το Μέχρι το 2014, το 20% του αμερικάνικου πληθυσμού θα χρησιμοποιεί οθόνες αφής με natural user interfaces σαν την πρωταρχική τους συσκευή Διαφάνεια 9

10 Ένα κινητό πωλείται στο ebay κάθε δύο δευτερόλεπτα Οι πωλήσεις των smartphone έχουν ξεπεράσει τις πωλήσεις των PC To 28% της χρήσης Internet γίνεται από κινητό τηλέφωνο Το 19% των ερωτημάτων αναζήτησης στην τουριστική βιομηχανία γίνεται από κινητό τηλέφωνο. Το 2011 ήταν μόνο 11% Στο εμπόριο λιανικής, το 16% των αναζητήσεων γίνεται από κινητό. Το 2011 ήταν μόνο 10% Το 2011, το 10% των αναζητήσεων στην βιομηχανία ψυχαγωγίας γινόταν από κινητό. Μέχρι το 2012 ανέβηκε στο 19% Η χρήση web μέσω κινητού ήταν υπεύθυνη για το 50% των πωλήσεων σχετικά με την ημέρα της Μητέρας στο 2012 Διαφάνεια 10

11 Το 38% των ιδιοκτητών tablet στο Ηνωμένο Βασίλειο ξοδεύουν περισσότερο χρόνο στην συσκευή τους παρά στην τηλεόραση Τα ερωτήματα αναζήτησης από tablet αυξήθηκαν 23% μετά τη μέρα των Χριστουγέννων Συνολικά έγιναν συναλλαγές αξίας $241 δισεκατομμυρίων μέσω κινητής συσκευής το 2011 Το 86% των ενηλίκων έχει ένα κινητό τηλέφωνο Το 53% των ενηλίκων ιδιοκτητών κινητού το χρησιμοποιούν για να μπουν στο internet Η πλειοψηφία των ερωτηθέντων χρησιμοποιούν το κινητό τους για να μπουν στο internet γιατί είναι πιο βολικό στη χρήση και το έχουν μαζί τους όπου και να πάνε Διαφάνεια 11

12 Τα κινητά τηλέφωνα δεν χρησιμοποιούνται μόνο για τηλεφωνήματα Τα κινητά τηλέφωνα δεν είναι στην πραγματικότητα τηλέφωνα πια. Γίνονται ραγδαία ο βασικός τρόπος που οι άνθρωποι αλληλεπιδρούν με τις πληροφορίες Είμαστε στο όριο μιας αλλαγής παραδείγματος (paradigm shift) Desktop PC Laptop Smartphone / Tablet Desktop Φορητό Κινητό Συνέπειες για τη σχεδίαση Πλαίσιο χρήσης, εμπειρία χρήσης (UX), σχεδίαση για (πλήθος) μικρότερων οθονών, οθόνες αφής, gestures Συνέπειες για τους υπολογιστές Νέες προσωπικές, κινητές συσκευές που αλληλεπιδρούν με το Νέφος Πληροφοριών (Information Cloud) Διαφάνεια 12

13 Διαφάνεια 13

14 Τα βιβλία, οι ιστοσελίδες, τα προγράμματα, ακόμα και τα μενού για αλληλεπιδραστικές τηλεοράσεις έχουν, έμμεσα και συχνά παραγνωρισμένο, κάτι κοινό: Η χρήση συμβαίνει σε σχετικά στατικά και προβλέψιμα περιβάλλοντα Αντιθέτως, οι περισσότερες κινητές εμπειρίες συμβαίνουν σε ιδιαιτέρως δυναμικά και απρόβλεπτα περιβάλλοντα Με απλά λόγια, αυτό που κάνει την κινητή δύσκολη (και διαφορετική) είναι ότι οι άνθρωποι κινούνται Διαφάνεια 14

15 Διαφάνεια 15

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

17 Η Google έχει αναγνωρίσει τρεις τύπους χρηστών για τους ιστοχώρους της για κινητά 1. Ο Περιστασιακός χρήστης 2. Ο τακτικός επισκέπτης 3. Ο Επείγον, Τώρα! επισκέπτης Διαφάνεια 17

18 Παρόμοιοι με τους επισκέπτες παραδοσιακών ιστοσελίδων Δεν περιηγούνται σε συγκεκριμένο περιεχόμενο, έχουν μερικά λεπτά διαθέσιμα Μέσα στο ταξί ή στο λεωφορείο, αναμένοντας ένας φίλο, κλπ. Ο στόχος είναι το περιεχόμενο να είναι «εθιστικό», ώστε να προσελκύσουμε τον χρήστη να επιστρέψει για περισσότερο Το περιεχόμενο δεν πρέπει να παρέχεται μέσω εκτενών κομματιών, αλλά τμηματοποιημένο Στόχος είναι να είναι αρκετό για να προσελκύσει το ενδιαφέρον του χρήστη, αλλά και ταυτόχρονα σύντομο για να είναι αναγνώσιμο στον περιορισμένο διαθέσιμο χρόνο CS-464: Human Computer Interaction Slide 18

19 Οι χρήστες συχνά επιστρέφουν για κάποιου είδους νέα ή καινούρια δεδομένα Χρηματιστήριο, Καιρός, Αθλητικά, κλπ. Πρέπει να αναγνωρίσετε τους χρήστες που επιστρέφουν και να τους παρέχετε άμεση πρόσβαση στο ανανεωμένο περιεχόμενο της σελίδας (ξεκινώντας από την κορυφή της) Μην κρύβετε το περιεχόμενο 3 ή 4 κλικ μακριά Μια λύση που δουλεύει καλά είναι να παρέχετε την επιλογή δημιουργίας μιας εξατομικευμένης σελίδας (μέσω της κανονικής σελίδας) με βάση της προτιμήσεις του χρήστη που θα είναι διαθέσιμη μέσω φορητών συσκευών Π.χ., Apple s itunes Music Store Ο χρήστης μπορεί να δημιουργήσει την δική του σελίδα στον υπολογιστή του και απόκτα ένα μοναδικό URL για το mobile site CS-464: Human Computer Interaction Slide 19

20 Για κάποιους πελάτες, τα πάντα είναι επείγοντα Για ένα διαδικτυακό βιβλιοπωλείο, το παρακάτω θα μπορούσε να είναι επείγον: «Τα βιβλία μου έπρεπε να φτάσουν εχθές. Άργησαν. Που είναι?» Ιστοσελίδες σχετικές με τα ταξίδια έχουν μια φυσική τάση να είναι επείγοντα: «Άργησα 15 λεπτά. Θα προλάβω την πτήση μου?» Πρέπει να έχετε υπόψιν σας ποιες είναι εκείνες οι ανάγκες που οι χρήστες σας θεωρούν επείγον και να παρέχετε πρόσβαση σε αυτή την πληροφορία σε ένα ή ακόμα και κανένα κλικ CS-464: Human Computer Interaction Slide 20

21 Διαφάνεια 21

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

23 Οι επιπτώσεις αυτής της συμπεριφοράς είναι ότι οι εμπειρίες χρήσης των κινητών πρέπει να σχεδιάζεται για μερική προσοχή και για διακοπή Αντί να αναγκάζουν τους χρήστες να βουτάνε βαθιά σε δομές μενού, η διεπαφή θα πρέπει να οδηγεί τους χρήστες στο περιεχόμενο και τη λειτουργικότητα που θέλουν γρήγορα και διαισθητικά Αντί να προσπαθεί να παρουσιάσει όλες τις πιθανές επιλογές του μενού, μπορεί να επιτρέπει στους χρήστες να «συμμετάσχουν» στην πληροφορία ενώ ταυτόχρονα τους δίνει τη δυνατότητα να εισχωρήσουν διαισθητικά βαθύτερα στο περιεχόμενο Με αυτό τον τρόπο, είναι εύκολο για τους χρήστες να κάνουν μια παύση και να συνεχίσουν την εμπειρία από εκεί που την άφησαν Διαφάνεια 23

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

25 Δύο βασικοί παράγοντες που είναι σημαντικοί για το mobile UX και επηρεάζουν το νοητικό φορτίο είναι η απόσπαση προσοχής και η διακοπή Όσο περισσότερο αποσπάται ή διακόπτεται ο χρήστης, τόσο πιο δύσκολο γίνεται για αυτόν να ολοκληρώσει μια διεργασία Οι άνθρωποι που ψάχνουν καταφύγιο σε ένα ήσυχο μέρος για να γράψουν σε ένα ημερολόγιο ή να διαβάσουν ένα βιβλίο, τρόπον τινά αυξάνουν τις δυνατότητες της μνήμης εργασίας τους Το κινητό πλαίσιο χρήσης ωστόσο, είναι γεμάτο με αποσπάσεις και διακοπές Διαφάνεια 25

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

27 Προκλήσεις για την αξιολόγηση κινητών συσκευών: Δεν μπορείς να αξιολογήσεις με ακρίβεια την εμπειρία στο εργαστήριο καθώς το πλαίσιο χρήσης είναι εντελώς διαφορετικό Οι χρήστες κινητών συνήθως κινούνται Η αλληλεπίδραση συμβαίνει άτακτα και σε «ξεσπάσματα» Η παρατήρηση της αλληλεπίδρασης υπό πραγματικές συνθήκες είναι πολύ δύσκολη Υπάρχουν υπερβολικά πολλά περιβάλλοντα και συνθήκες για να ληφθούν υπόψιν Η αλληλεπίδραση είναι πρωτίστως ιδιωτική (private) Δεν μπορείς να προβλέψεις πότε ο χρήστης θα χρησιμοποιήσει μια συσκευή Η έρευνα για ευρετικούς κανόνες για τη σχεδίαση κινητών είναι μια διαδικασία εν εξελίξει Διαφάνεια 27

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

29 Πρακτικές επιπτώσεις της mobile UX

30 Για ιστοχώρους που στοχεύουν κινητές συσκευές, μια κοινή προσέγγιση είναι να χρησιμοποιούνται κατάλληλα CSS που απλά απογυμνώνουν την παρουσίαση στα εντελώς απαραίτητα για καλύτερη πρόσβαση Σίγουρα δεν είναι η βέλτιστη λύση Όπως αναφέρει και το W3C για την ιδέα του Ενός Δικτύου (One Web): To One Web σημαίνει η ίδια, στα όρια του λογικού, πληροφορία και υπηρεσίες να είναι διαθέσιμες στους χρήστες, ασχέτως της συσκευής που χρησιμοποιούν. Ωστόσο, αυτό δεν σημαίνει ότι η ίδια ακριβώς πληροφορία είναι διαθέσιμη με την ίδια ακριβώς παρουσίαση σε όλες τις συσκευές. Το πλαίσιο χρήσης των κινητών συσκευών, η ποικιλία των δυνατοτήτων των συσκευών, θέματα ευρυζωνικότητας και οι δυνατότητες των δικτύων κινητής τηλεφωνίας, όλα επηρεάζουν την παρουσίαση. Επιπλέον, πολλές υπηρεσίες και πληροφορίες, είναι καταλληλότερες και στοχεύουν σε συγκεκριμένα πλαίσια χρήσης. Διαφάνεια 30

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

32 Ο ιστότοπος για κινητό της Best Buy προσφέρει μόνο Αναζήτηση και Αναζήτηση Υποκαταστήματος. Συγκρίνετε με το κανονικό site στα δεξιά Διαφάνεια 32

33 Ο ιστότοπος για κινητό της Amazon είναι πολύ πιο πλήρης. Συγκρίνετε με το κανονικό site στα δεξιά Διαφάνεια 33

34 Ελαχιστοποιήστε τα πατήματα πλήκτρων Παρέχετε επισκόπηση αλλά και περισσότερες λεπτομέρειες όταν το επιλέξει ο χρήστης (on demand) Κατανοητή διεπαφή με μια ματιά Σχεδίαση βασισμένη στις διεργασίες (Task-based design) Ελάχιστο σύνολο λειτουργιών Διαφάνεια 34

35 Αποφεύγετε την εισαγωγή κειμένου όποτε είναι δυνατόν Χρησιμοποιείτε μενού επιλογών ή GUI widgets όταν οι πιθανές τιμές είναι γνωστές Π.χ., ένα χειριστήριο ημερολογίου για την εισαγωγή ημερομηνίας Μια λίστα με τις πιο συχνές επαφές για να επιλεχθεί ο παραλήπτης ενός SMS ή ενός Χειριστήρια που αυξάνουν ή μειώνουν αριθμητικές τιμές Διαφάνεια 35

36 Η είσοδος πληροφορίας θέλει χρόνο και προσοχή, είτε ο χρήστης κτυπά ελαφρά χειριστήρια είτε χρησιμοποιεί το πληκτρολόγιο Αν η εφαρμογή σας απαιτεί πολύ input από τους χρήστες πριν συμβεί οτιδήποτε χρήσιμο, αυτή η είσοδος καθυστερεί τους χρήστες και μπορεί να τους αποθαρρύνει από το να χρησιμοποιήσουν την εφαρμογή σας Ισορροπήστε κάθε απαίτηση για είσοδο από τους χρήστες με αυτά που προσφέρετε σε αντάλλαγμα Με άλλα λόγια, προσπαθήστε να παρέχετε όσο το δυνατόν περισσότερη πληροφορία ή λειτουργικότητα για κάθε πληροφορία που σας δίνουν οι χρήστες. Με αυτό τον τρόπο, οι χρήστες αισθάνονται ότι κάνουν πρόοδο και δεν καθυστερούνται καθώς κινούνται στην εφαρμογή σας Κάντε εύκολο για τους χρήστες να εισάγουν τις επιλογές τους Διαφάνεια 36

37 Το δίκτυο της κινητής επιβάλλει θέματα εύρους ζώνης (bandwidth) με όρους ταχύτητας και κόστους Η πλοήγηση στο δίκτυο μέσω κινητής συσκευής χρησιμοποιώντας το κυψελοειδές δίκτυο είναι αισθητά πιο ακριβό από τη χρήση internet υπηρεσιών στο PC, καθώς οι περισσότεροι πάροχοι χρεώνουν με το χρόνο Το εύρος ζώνης υποτίθεται έχει ένα μέγιστο 14.4 Mbps σε 3G δίκτυο. Αυτό αφορά χρήστες που ΔΕΝ κινούνται και στην πραγματικότητα είναι πιο κοντά στα 2-4Mbps Πρακτικά, σε ένα κινούμενο όχημα ο χρήστης δεν θα πρέπει να περιμένει κάτι παραπάνω από 128Kbps με μέγιστη προοπτική τα 348Kbps Επομένως, ο χρήστης πρέπει να παίρνει σελίδες που φορτώνουν σημαντικά πιο γρήγορα και περιέχουν τα απολύτως απαραίτητα Διαφάνεια 37

38 Υπάρχουν αρκετοί διαθέσιμοι browsers και όπως είναι αναμενόμενο δεν ακολουθούν αυστηρά τα ίδια standard Αυτό σημαίνει ότι οι διάφορες συσκευές δεν χειρίζονται τα CSS και ακόμα και τη ΧHTML με τον ίδιο τρόπο Μέχρι να συμφωνηθεί κάποιου είδους πρότυπο, οι σχεδιαστές καλά θα κάνουν να αποφεύγουν σπάνια και φανταχτερά tags και ιδιότητες και να μείνουν στις βασικές εντολές Διαφάνεια 38

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

40 Ο περιορισμένος χώρος στην οθόνη και ο περιορισμένος αριθμός ενεργειών που χρειάζονται για να ολοκληρωθεί μια διεργασία (μη με κάνεις να σέρνω ή να ακουμπάω την οθόνη συχνά), ωθεί τον σχεδιαστή να δημιουργήσει τρομερά απλή αρχιτεκτονική πληροφορίας και ένα πολύπλοκο πρότυπο σχεδίασης αλληλεπίδρασης, με ένα ελάχιστο αριθμό ενεργειών Αυτό πάει χέρι-χέρι με τον οικονομικό κανόνα της σχεδίασης αλληλεπίδρασης: ελαχιστοποίησε την είσοδο, μεγιστοποίησε την έξοδο Μιας και το μικρότερο σημείο επαφής για κάθε ενέργεια είναι το μέγεθος της άκρης του δείκτη ενός άνδρα, δεν μπορούμε να στριμώχνουμε χιλιάδες features (ή διαφημίσεις!) σε ένα στενό πλαίσιο. Πρέπει να εστιάζουμε στα απαραίτητα στοιχεία Μην ξοδεύετε χώρο στην οθόνη και την προσοχή του χρήστη στην επεξεργασία δευτερευουσών λειτουργιών Διαφάνεια 40

41 Εστιάστε στη βασική διεργασία και παρουσιάστε μόνο το περιεχόμενο και τα χειριστήρια που είναι σχετικά για το χρήστη εκείνη τη στιγμή Αναλύστε τι χρειάζεται κάθε οθόνη. Καθώς αποφασίζετε τι να παρουσιάσετε σε κάθε οθόνη, πάντα να ρωτάτε τον εαυτό σας «είναι αυτή κρίσιμη πληροφορία ή λειτουργία που χρειάζεται ο χρήστης αυτή τη στιγμή;» Αν η απάντησή σας είναι όχι, αποφασίστε μήπως η πληροφορία ή λειτουργία είναι κρίσιμη σε κάποιο άλλο πλαίσιο χρήσης ή αν δεν είναι σημαντική τελικά Διαφάνεια 41

42 Το πάνω μέρος της οθόνης είναι το πιο ορατό στους ανθρώπους γιατί συνήθως αλληλεπιδρούν με τη συσκευή με τους ακόλουθους τρόπους: Με το μη-κυρίαρχο χέρι τους (ή ακουμπώντας τη σε μια επιφάνεια) και κάνοντας χειρονομίες με το δάχτυλο του κυρίαρχου χεριού Με το ένα χέρι και κάνοντας χειρονομίες με τον αντίχειρα του ίδιου χεριού Μεταξύ των χεριών και κάνοντας χειρονομίες και με τους δύο αντίχειρες Βάλτε τις πιο συχνές (συνήθως υψηλότερου επιπέδου) κοντά στην κορυφή, όπου είναι πιο ορατές και προσιτές. Καθώς ο χρήστης σαρώνει την οθόνη από πάνω προς τα κάτω, η πληροφορία που παρουσιάζεται πρέπει να γίνεται από γενική σε πιο συγκεκριμένη και από υψηλό σε πιο χαμηλό επίπεδο Διαφάνεια 42

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

44 Προσπαθήστε να κάνετε την εφαρμογή σας άμεσα κατανοητή στους χρήστες, γιατί δεν μπορείτε να υποθέσετε ότι έχουν το χρόνο (ή έχουν τη πολυτέλεια να δώσουν την προσοχή που απαιτείται) για να καταλάβουν πώς δουλεύει Κάντε τη βασική λειτουργία της εφαρμογής σας άμεσα προφανή. Μπορείτε να το κάνετε αυτό: Ελαχιστοποιώντας τον αριθμό χειριστηρίων που μπορούν να επιλέξουν οι χρήστες Χρησιμοποιώντας στάνταρ χειριστήρια και χειρονομίες κατάλληλα και με συνέπεια ώστε να συμπεριφέρονται όπως περιμένει ο χρήστης Βάζοντας ξεκάθαρες ετικέτες στα χειριστήρια ώστε οι χρήστες να καταλαβαίνουν ακριβώς τι κάνουν Διαφάνεια 44

45 Αποφύγετε να συσχετίζετε διαφορετικές ενέργειες με στάνταρ χειρονομίες που γνωρίζουν οι χρήστες. Εξίσου σημαντικό, αποφύγετε την δημιουργία δικών σας χειρονομιών για να εκτελεστούν ενέργειες που οι χρήστες έχουν ήδη συσχετίσει με στάνταρ χειρονομίες Χρησιμοποιήστε πολύπλοκες χειρονομίες σαν συντομεύσεις για να επιταχυνθεί μια διεργασία, όχι σαν τον μοναδικό τρόπο να γίνει μια διεργασία. Παρόλο που οι περισσότεροι χρήστες γνωρίζουν τις περισσότερο πολύπλοκες στάνταρ χειρονομίες, όπως το swipe ή το pinch open, αυτές οι πολύπλοκες χειρονομίες δεν είναι τόσο κοινές Για παράδειγμα όταν βλέπουν μια λίστα με μηνύματα στο Mail, μπορούν να σβήσουν ένα μήνυμα εμφανίζοντας το κουμπί Delete στην γραμμή του μηνύματος στην λίστα. Οι χρήστες μπορούν να εμφανίσουν το κουμπί Delete με δύο διαφορετικούς τρόπους: Tap στο κουμπί Edit στην μπάρα πλοήγησης, που εμφανίζει ένα χειριστήριο Delete δίπλα από κάθε μήνυμα στη λίστα. Μετά, tap delete χειριστήριο στη συγκεκριμένη γραμμή για να εμφανιστεί το κουμπί Delete για εκείνο το μήνυμα. Αυτή η μέθοδος θέλει ένα βήμα παραπάνω αλλά είναι εύκολα ανακαλύψιμη γιατί απαιτεί μόνο το tap και ξεκινάει με την ξεκάθαρo κουμπί Edit. Swipe χειρονομία σε μια συγκεκριμένη γραμμή θα εμφανίσει το κουμπί Delete για εκείνο το μήνυμα. Αυτή η μέθοδος είναι γρηγορότερη αλλά απαιτεί από το χρήστη να μάθει και να θυμάται την πιο εξειδικευμένη χειρονομία swipe Διαφάνεια 45

46 Προσπαθήστε να εξασφαλίσετε ότι υπάρχει πάντα ένας απλός, ξεκάθαρος τρόπος για να γίνει μια ενέργεια, ακόμα και αν σημαίνει ένα-δυο tap παραπάνω. Οι απλές χειρονομίες επιτρέπουν στους χρήστες να εστιάσουν στην εμπειρία και το περιεχόμενο, όχι στην αλληλεπίδραση Γενικά, αποφύγετε τον καθορισμό νέων χειρονομιών, οι χρήστες πρέπει να κάνουν προσπάθεια για τις ανακαλύψουν και θυμούνται Διαφάνεια 46

47 Παρόλο που μερικές φορές το μέγεθος του κειμένου σε μια σελίδα είναι ικανοποιητικό για διάβασμα, μπορεί να είναι πολύ μικρό για να επιλεγεί Το πρόβλημα επιδεινώνεται όταν υπάρχουν πολλά link κοντά το ένα στο άλλο Με άλλα λόγια, υπάρχει μια ασυμμετρία στην ανάγνωση και το tap: κείμενο που είναι αρκετά μεγάλο για διάβασμα να μην είναι αρκετά μεγάλο για επιλογή Οι χρήστες θα επιλέξουν κατά λάθος το λάθος σύνδεσμο σε μια ομάδα από συνδέσμους Διαφάνεια 47

48 Ένας ελάχιστος στόχος αφής 10mm Χ 10mm είναι μια καλή προσέγγιση/κανόνας για όλες τις σχεδιάσεις για οθόνες αφής Για σχεδιαστές desktop, αυτό θα φαίνεται γελοία μεγάλο σαν παιχνίδι ακόμα! Αλλά έχετε πίστη, είναι σημαντικό να κάνετε τους στόχους αφής εύκολους για τους χρήστες Διαφάνεια 48

49 Τα smartphones συχνά χρησιμοποιούνται με το ένα χέρι Οι διεπαφές για οθόνες αφής δεν πρέπει να είναι μόνο αισθητικά ευχάριστες, αλλά και να είναι κατάλληλα οργανωμένες για χρήση μέσω δακτύλων, κυρίως του αντίχειρα Είναι το βασικό δάχτυλο που κάνει την δουλειά, και αυτός είναι σημαντικότερος λόγος για τον οποίο τα κύρια αλληλεπιδραστικά στοιχεία βρίσκονται χαμηλά στην οθόνη και όχι στην κορυφή CS-464: Human Computer Interaction Slide 49

50 Οι κυριότερες επιλογές του μενού που διασφαλίζουν καλή εμπειρία χρήσης σε φορητές συσκευές θα πρέπει να βρίσκονται στη ζώνη του αντίχειρα περιοχή της οθόνης προσβάσιμη από τον αντίχειρα CS-464: Human Computer Interaction Αυτή η ζώνη είναι πιο σημαντική όταν ή συσκευή είναι στραμμένη σε landscape mode καθώς οι περισσότεροι χρήστες σε αυτή την περίπτωση συνήθως την κρατούν με τα δυο τους χέρια Slide 50

51 The Mobile Frontier, A Guide for Designing Mobile Experiences, Rachel Hinman (2012) CS-464: Human Computer Interaction Slide 51

52 The Mobile Frontier, A Guide for Designing Mobile Experiences, Rachel Hinman (2012) CS-464: Human Computer Interaction Slide 52

53 Το εφέ της γυρισμένης σελίδας στο κάτω δεξιά μέρος της οθόνης, δίνει ένα οπτικό ερέθισμα ότι υπάρχει περισσότερο περιεχόμενο διαθέσιμο CS-464: Human Computer Interaction Slide 53

54 CS-464: Human Computer Interaction Slide 54

55 CS-464: Human Computer Interaction Slide 55

56 CS-464: Human Computer Interaction Slide 56

57 CS-464: Human Computer Interaction Slide 57

58 Σε αντίθεση με τα γραφικά στοιχεία διεπαφών, όπως ένα κουμπί που φαίνεται ότι μπορεί να πατηθεί ή τα βελάκια στις άκρες μιας μπάρας κύλισης που υποδηλώνουν την κατεύθυνση κίνησης, οι διεπαφές που χρησιμοποιούν χειρονομίες παρέχουν ελάχιστα ή ακόμα και καθόλου οπτικά ερεθίσματα Είναι αόρατες και για αυτό η ανακαλυψιμότητα τους μπορεί να είναι ένα δύσκολο εμπόδιο για τους χρήστες Μια στρατηγική αντιμετώπισης αυτής της πρόκλησης είναι η επέκταση ήδη γνωστών χειρονομιών Π.χ., «τραβήξτε για ανανέωση» (Spring refresh) CS-464: Human Computer Interaction Slide 58

59 Spring refresh Όταν οι χρήστες φτάσουν στο τέλος μια λίστας η επιλογή «τραβήξτε για ανανέωση» γίνεται διαθέσιμη Πλέον χρησιμοποιείται ευρέως σε διάφορες εφαρμογές CS-464: Human Computer Interaction Slide 59

60 Η χειρονομία tap έχει διπλό ρόλο στην εφαρμογή του Advisor για το ipad. Ανάλογα με το πλαίσιο χρήσης, το tap είτε ξεκινά την αλληλεπίδραση είτε παρέχει μια προεπισκόπηση του ενεργού αντικειμένου. Αποτελεί έναν έξυπνο τρόπο της χρήσης αυτή της λειτουργικότητας σε μια απόλυτα κατανοητή χειρονομία CS-464: Human Computer Interaction Slide 60

61 Κάτι που φαίνεται να δουλεύει καλύτερα σε κινητές συσκευές με αφή από ότι στους υπολογιστές γραφείου είναι το scrolling: είναι πιο εύκολο να κάνεις scroll χρησιμοποιώντας τα δάχτυλα αντί το ποντίκι και οι χρήστες περιμένουν να κάνουν πολύ scroll Επομένως, το χαμηλότερο σημείο της οθόνης (μαζί με το υποσέλιδο) τείνει να είναι πιο προσβάσιμο από το αντίστοιχο στο desktop Το υποσέλιδο μπορεί να χρησιμοποιηθεί για να αποφευχθεί η χρήση scrolling για την επιστροφή στην κορυφή της σελίδας Διαφάνεια 61

62 Διαφάνεια 62