8.Σχεδίαση ψηφιακών περιβαλλόντων διάδρασης (Μέρος 2)

Μερικά πρακτικά ζητήµατα Ποιοι είναι οι χρήστες? Τι είναι οι απαιτήσεις ή ανάγκες χρηστών? Γιατί χρειαζόµαστε εναλλακτικές επιλογές και πως τις δηµιουργούµε? Πως επιλέγουµε ανάµεσα στις διάφορες εναλλακτικές επιλογές?

Γιατί χρειαζόµαστε εναλλακτικές επιλογές και πως τις δηµιουργούµε? Οι άνθρωποι δεν είναι εύκολα διατεθειµένοι να αλλάξουν κάτι το οποίο δουλεύει (ή του οποίου γνωρίζουν τη χρήση καλά) Για να µπορέσουµε να καταγράψουµε τις ανάγκες και τη συµπεριφορά τους χρειάζεται να τους παρουσιάσουµε εναλλακτικές επιλογές Οι σχεδιαστές είναι γενικά συνηθισµένοι να εξετάζουν εναλλακτικές περιπτώσεις οι επιστήµονες πληροφορικής όχι!

Πως δηµιουργούνται εναλλακτικές επιλογές; Είναι θέµα οξυδέρκειας και δηµιουργικότητας: έρευνα και σύνθεση Αναζητώντας έµπνευση: εξετάζοντας παρόµοια ή εντελώς διαφορετικά συστήµατα Εφόδια σχεδιαστή Θεωρητικά µοντέλα v Επεξηγηµατικού χαρακτήρα (π.χ. Μοντέλο Ανθρώπινου Επεξεργαστή) v Προβλεπτικού χαρακτήρα (π.χ. µοντέλο KLM, νόµος Fitts) Αρχές σχεδιασµού (Desig Priciples) Πρακτικές οδηγίες σχεδίασης (Desig Guidelies) Πρωτότυπα Εµπειρία

Συµµετοχικός σχεδιασµός Οι χρήστες συµµετέχουν σε όλη τη διαδικασία σχεδιασµού µέσα από συχνές συναντήσεις Όχι απλά στην αρχή διαδικασίας έρευνας πλαισίου (cotextual iquiry) Οι χρήστες είναι καλοί στο να δίνουν ανάδραση σε συγκεκριµένα πρωτότυπα και σχέδια Αυτό όµως δεν συνεπάγεται ότι Είναι καλοί σχεδιαστές Γνωρίζουν ακριβώς τι θέλουν και µπορούν να το εκφράσουν µε σαφήνεια

Αρχές και κανόνες σχεδιασµού Γιατί χρειαζόµαστε εναλλακτικές επιλογές και πως τις δηµιουργούµε?

Οδηγίες σχεδίασης Οι οδηγίες σχεδίασης είναι συλλογές κανόνων που έχουν προκύψει από συσσωρευµένη εµπειρία Οι κανόνες µπορεί να παραβλεφθούν κατά περίπτωση Αφορούν διαφορετικό βαθµό λεπτοµέρειας Δεν είναι πλήρεις και έχουν συχνά αντιφάσεις Μπορεί να αγνοηθούν αν χρειαστεί να ικανοποιηθεί κάποιος άλλος κανόνας Στηρίζονται σε αρχές της ανθρώπινης ψυχολογίας ή στην κοινή λογική Μπορούν να πάρουν τη µορφή <πρόβληµα,συνθήκες - > λύση> Δηµοφιλής η τεχνική έκφρασης τους ως πρότυπα σχεδίασης (desig patters)

Συλλογές κανόνων (1/2) Geeral User Iterface Desig Style Guides Apple Huma Iterface Guidelies (Mac OS X) Desig Guidelies Microsoft User Iterface Guidelies (Click i the left tree o User Iterface Desig...) Widows XP Guidelies Yale Web Style Guide (2d Editio) Java Look ad Feel Guidelies versio 2 Java Look ad Feel Guidelies: Advaced Topics IBM 3D desig Guidelies Silico Graphics Idigo Magic User Iterface Guidelies Ope Source Usability Guidelies Motif Style Guide KDE User Iterface Guidelies Gome Huma Iterface Guidelies 1.0

Συλλογές κανόνων (2/2) Govermet fuded Usability Guidelies MITRE Guidelies for Desigig User Iterface Software (US Airforce) Research based Web Desig ad Usability Guidelies (Dept. Of Health ad Huma Services) NASA User Iterface Guidelies Caadia Commad Decisio Aidig Techology (COMDAT) Operator- Machie Iterface (OMI) Style Guide: Versio 1.0 Wireless ad Mobile Usability Guidelies Palm OS Desig Guidelies Opewave GSM Guidelies Blackberry ad RIM wireless hadheld UI Developers Guide (PDF) Sprit Usability Requiremets for XHTML Techiques for Web cotet Accessibility Guidelies

Παράδειγµα: Smith ad Mosier HCI Guidelies Smith ad Mosier HCI Guidelies (1984, ακόµη χρήσιµοι) 944 κανόνες, 6 κατηγορίες εισαγωγή δεδοµένων παρουσίαση δεδοµένων ελέγχου συνέχειας υποστήριξης χρήστη µετάδοσης δεδοµένων προστασίας δεδοµένων

Παράδειγµα: Κανόνες σχεδιασµού (NASA) 1. Διαφάνεια 2. Αναµενόµενες ιδιότητες διεπιφάνειας. 3. Συνέπεια 4. Προσαρµοστικότητα 5. Ελαχιστοποίηση ενεργειών χρήστη 6. Υποστήριξη πλοήγησης 7. Απλότητα 8. Διάταξη περιεχοµένου 9. Ανάδραση 10. Προστασία από επικίνδυνες ενέργειες του χρήστη 11. Αναίρεση ενεργειών 12. Παροχή βοηθείας 13. Έλεγχος από τον χρήστη 14. Εισαγωγή δεδοµένων 15. Μηνύµατα σφάλµατος

Παράδειγµα: Research-based Web Usability Guidelies (U.S.A. Govermet) Εξαιρετικό σετ κανόνων για σχεδιασµό/αξιολόγηση εύχρηστων ιστοτόπων 209 κανόνες, οργανωµένοι σε 18 κεφάλαια Καλύπτουν όλες τον κύκλο ζωής ενός ιστοτόπου Περιεκτικές περιγραφές, οδηγίες και παραδείγµατα (πολλά µε εικόνες από πραγµατικά sites) Βαθµολογηµένοι από ειδικούς (σχεδιαστές ιστοτόπων + ειδικούς ευχρηστίας) ως προς Συγκριτική σηµασία τους (Relative Importace) Βαθµό που έχουν προκύψει µε επιστηµονική έρευνα (Stregth of Evidece) Μοναδικό σετ κανόνων που έχει αυτή τη κλίµακα

Research-based Web Usability Guidelies (U.S.A. Govermet) Κεφάλαιο 1: Διαδικασία Σχεδίασης και Αξιολόγησης Κεφάλαιο 2: Βελτιστοποίηση της εµπειρίας χρήστη Κεφάλαιο 3: Προσβασιµότητα Κεφάλαιο 4: Υλικό και λογισµικό Κεφάλαιο 5: Η κεντρική σελίδα (Homepage) Κεφάλαιο 6: Διάταξη σελίδας Κεφάλαιο 7: Πλοήγηση Κεφάλαιο 8: Κύλιση σελίδας Κεφάλαιο 9: Επικεφαλίδες και Τίτλοι Κεφάλαιο 10: Υπερσύνδεσµοι Κεφάλαιο 11: Εµφάνιση κειµένου Κεφάλαιο 12: Λίστες Κεφάλαιο 13: Μονάδες ελέγχου σελίδας (Widgets) Κεφάλαιο 14: Γραφικά, εικόνες και πολυµέσα Κεφάλαιο 15: Συγγραφή περιεχοµένου Κεφάλαιο 16: Οργάνωση περιεχοµένου Κεφάλαιο 17: Αναζήτηση

Research-based Web Usability Guidelies: Παραδείγµατα

Παράδειγµα: 247 Web Usability Guidelies (Travis, Userfocus) Οργανωµένοι σε 9 κατηγορίες: o Αρχική σελίδα: 20 κανόνες o o o o o o o o Προσανατολισµός στην εργασία: 44 κανόνες Πλοήγηση: 29 κανόνες Φόρµες: 23 κανόνες Αξιοπιστία και εµπιστοσύνη: 13 κανόνες Ποιότητα περιεχοµένου και γραφής: 23 κανόνες Οπτικός σχεδιασµός οθονών: 38 κανόνες Αναζήτηση: 20 κανόνες Βοήθεια, ανάδραση και λάθη: 37 κανόνες

247 Web Usability Guidelies Παραδείγµατα Κανόνων (1/2) Αρχική Σελίδα Τα στοιχεία στην αρχική σελίδα είναι καθαρά εστιασµένα στις εργασίες κλειδιά ενός χρήστη Προσανατολισµός στην εργασία Ο ιστότοπος δεν περιέχει άσχετες, µη χρήσιµες και διασπαστικές πληροφορίες Πλοήγηση Υπάρχει ένας εύκολος και προφανής τρόπος για να κινηθείς µεταξύ σχετικών σελίδων και ενοτήτων και είναι εύκολο να γυρίσεις στην αρχική σελίδα Φόρµες Τα πεδία στις οθόνες εισαγωγής δεδοµένων περιέχουν προκαθορισµένες τιµές όποτε αυτό είναι εφικτό και δείχνουν τη δοµή των στοιχείων εισαγωγή και το µέγεθος του πεδίου (τη µορφή και το µέγεθος της απαιτούµενης εισόδου από το χρήστη)

247 Web Usability Guidelies Παραδείγµατα Κανόνων (2/2) Αξιοπιστία και εµπιστοσύνη Ο ιστότοπος αποφεύγει τα µαρκετίστικα φλύαρα κείµενα Ποιότητα περιεχοµένου και γραφής Τα κείµενα είναι σαφή, χωρίς περιττές οδηγίες και µηνύµατα καλωσορίσµατος Οπτικός σχεδιασµός οθονών Τα αντικείµενα τα οποία δέχονται κλικ (όπως κουµπιά) είναι εµφανές ότι µπορούν να πατηθούν Αναζήτηση Η µηχανή αναζήτησης παρέχει αυτόµατο ορθογραφικό έλεγχο και ελέγχει για πληθυντικούς και συνώνυµα Βοήθεια, ανάδραση και λάθη Το FAQ ή η o-lie βοήθεια παρέχει βήµα-προς-βήµα οδηγίες για το πώς οι χρήστες µπορούν να εκτελέσουν τις πιο σηµαντικές εργασίες

Δηµιουργία πρωτοτύπων Γιατί χρειαζόµαστε εναλλακτικές επιλογές και πως τις δηµιουργούµε?

Πρωτότυπο (Prototype, Wireframe, Mockup) Σε άλλα πεδία (π.χ. αρχιτεκτονική) Στο σχεδιασµό λογισµικού: o Ένα στιγµιότυπο µιας σχεδιαστικής υπόθεσης o Ένα µέσο για την απόδοση ιδεών και προθέσεων. o Ένα όχηµα για την αξιολόγηση σχεδιαστικών ιδεών o Μια ηµιτελής εκδοχή του συστήµατος

Πολλές διαφορετικές µορφές (1/4)

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

Κατηγορίες Πρωτοτύπων µε βάση την Πιστότητα Πιστότητα: Βαθµός λεπτοµέρειας του πρωτοτύπου

Μπορεί να είναι Μια σειρά από σκίτσα οθονών Μια µακέτα Μια παρουσίαση στο Powerpoit Ένα βίντεο που προσοµοιώνει τη χρήση ενός συστήµατος Ένα κοµµάτι ξύλου Λογισµικό.

Πάραδείγµατα (1/2) Σκαρίφηµα Iformatio Architecture Storyboardig

Πάραδείγµατα (2/2) Wizard of OZ Με προσοµοίωση κώδικα (Visual Basic) Με εργαλεία λογισµικού (π.χ. Lumzy)

Εργαλεία δηµιουργίας πρωτοτύπων (1/3) Lumzy - http://lumzy.com/ o Δωρεάν, Olie o Διαδραστικά πρωτότυπα! (simulate) Axure RP - http://www.axure.com o, εγκατάσταση o Πρωτότυπα για ιστοτόπους και κινητές εφαρµογές

Εργαλεία δηµιουργίας πρωτοτύπων (2/3) MockupScrees - www.mockupscrees.com o, εγκατάσταση o Πρωτότυπα χαµηλής πιστότητας Microsoft Visio - http://office.microsoft.com/e-us/visio/ o, εγκατάσταση o o o Πιο γενικό εργαλείο, όχι µόνο πρωτότυπα Πολλά templates Δυσκολότερο στην εκµάθηση

Εργαλεία δηµιουργίας πρωτοτύπων (3/3) Και άλλα πολλά o DesigerVista - www.desigervista.com/ o Pecil Project - www.evolus.v/pecil/ o Balsamiq Mockups - www.balsamiq.com/ o Gliffy - www.gliffy.com o Microsoft Expressio Bled (Sketchflow) http://expressio.microsoft.com o Adobe Photoshop o Illustrator o Powerpoit o Flash o Fireworks o.

AutoGami: A Low-cost Rapid Prototypig Toolkit for Automated Movable Paper Craft (CHI 2013) [τοπικά]

Οργάνωση Πληροφορίας Γιατί χρειαζόµαστε εναλλακτικές επιλογές και πως τις δηµιουργούµε?

Οργάνωση πληροφορίας: Ταξινόµηση καρτών (card sortig) Βασική Ιδέα: Δόµηση ενός συνόλου πληροφοριών µε βάση το νοητικό µοντέλο αντιπροσωπευτικών χρηστών και στατιστική σύνθεση των προτάσεων τους. Συλλογή δεδοµένων για: v Σχήµα οργάνωσης v Λεξιλόγιο χρηστών => δηµιουργία κατάλληλων ετικετών

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

Ταξινόµηση καρτών Ανάλυση Αποτελεσµάτων Στόχοι Δηµιουργία µοντέλου πλοήγησης Δηµιουργία εναλλακτικών µονοπατιών σε σελίδες για τις οποίες υπάρχει ασυµφωνία οµαδοποίησης Εντοπισµός ακατάληπτου για τους χρήστες περιεχοµένου Χρήση λεξιλογίου χρηστών για τις ονοµασίες των κατηγοριών Τρόποι ανάλυσης: Επισκόπηση Αποτελεσµάτων ( Eyeballig the data ) Στατιστική ανάλυση (Clusterig, Multidimesioal scalig)

Επισκόπηση Δεδοµένων (Eyeballig the data) q Συχνότητα εµφάνισης καρτών µαζί (Κάρτες x Κάρτες) v Δείκτης συµφωνίας οµαδοποίησης καρτών P 1 P 2 P 3 P 4 P 5 P 6 P 1 0,00 0,25 0,50 0,95 0,10 0,80 P 2 0,25 0,00 0,55 0,40 0,85 0,75 P 3 0,50 0,55 0,00 0,30 1,00 0,70 P 4 0,95 0,40 0,30 0,00 0,60 0,65 P 5 0,10 0,85 1,00 0,60 0,00 0,85 P 6 0,80 0,75 0,70 0.36 0,85 0,00 70% των συµµετεχόντων οµαδοποίησαν µαζί τις 2 κάρτες q Ποσοστό εµφάνισης καρτών σε διαφορετικές κατηγορίες (Κάρτες x Κατηγορίες) v Δείκτης συµφωνίας ονοµασίας οµάδος 37

Στατιστική Ανάλυση Αλγόριθµοι Clusterig q Στατιστικός τρόπος εύρεσης οµογενών οµάδων (clusters). Νέα & Ανακοινώσεις q Δενδρόγραµµα = οπτική αναπαράσταση Ηλεκτρονικές Υπηρεσίες q Που «κόβω» το δενδρόγραµµα? v Υποκειµενική κρίση v Ανάλυση Παραγόντων 38 38

Ταξινόµηση Καρτών: Πόσους συµµετέχοντες? q Οµαδοποιήσεις 15~30 χρηστών 90~95% οµαδοποιήσεις 168 χρηστών (Tullis & Wood, 2004) (Tullis & Wood, 2004) 39

Ταξινόµηση Καρτών: Πόσες Ιστοσελίδες προς οµαδοποίηση? q >100 κάνουν εξαιρετικά πολύπλοκη την φάση της εκτέλεσης αλλά και την ανάλυσης (Mauer & Warfel, 2004) q Λύσεις: 1) Επιλογή πιο «σηµαντικών» σελίδων 2) Τυχαία ανάθεση 60% των καρτών σε 30~40 χρήστες 90~95% συµφωνία µε οµαδοποιήσεις όλων των καρτών από 15~30 χρήστες (Tullis & Wood, 2005) 40

Ταξινόµηση Καρτών: Χαρακτηριστικά Χρηστών q Οµάδες Συµµετεχόντων v Χρήστες που τους αφορά ή έχουν τις απαραίτητες γνώσεις για τις κάρτες v Αν υπάρχουν διακριτές οµάδες µπορεί να γίνει διεξαγωγή πολλαπλών ασκήσεων ταξινόµησης Πλοήγηση Θεµατικής Κατηγορίας Πλοήγηση Οµάδας Χρήστη 41

Εξ αποστάσεως ταξινόµηση χρηστών Εργαλεία WebSort ( ) MidCavas ( ) OptimalSort ( ) WebCat (δύσχρηστο) + Μεγαλύτερος αριθµός χρηστών, ευκολία, ευελιξία, ειδικές κατηγορίες χρηστών (ΑΜΕΑ) - Δεν επιτρέπει ποιοτικού τύπου ερωτήσεις 42

Ταξινόµηση σε προϋπάρχουσες κατηγορίες v Ταξινόµηση Ανοιχτού Τύπου: Οι χρήστες ταξινοµούν τις κάρτες σε κατηγορίες που δηµιουργούν και ονοµατίζουν οι ίδιοι. Ø Αρχικός σχεδιασµός v Ταξινόµηση Κλειστού Τύπου: Οι χρήστες ταξινοµούν τις κάρτες σε κατηγορίες που παρέχει ο σχεδιαστής. Ø Εγκυροποίηση ανοιχτού-τύπου, Προσθήκη/Επέκταση 43

Παραλλαγές Ταξινόµησης Καρτών q «Οµαδική Ταξινόµηση: Οι χρήστες ταξινοµούν τις κάρτες σε µικρές οµάδες (3~5 άτοµα) q Ταξινόµηση καρτών µε οµάδες εστίασης: 8~15 χρήστες ταξινοµούν αρχικά τις κάρτες ο καθένας µόνος του και έπειτα συµµετέχουν σε µία οµάδα εστίασης. q Delphi Ταξινόµηση καρτών: Ένας χρήστης αρχικά σε µία ανοιχτού-τύπου ταξινόµηση και έπειτα δίνεται διαδοχικά στον επόµενο χρήστη ως σηµείο έναρξης. 44