User experience: UCD for the Web
-
Upload
panos-koutsodimitropoulos -
Category
Design
-
view
77 -
download
0
Transcript of User experience: UCD for the Web
User Experience: UCD for the Web
Πάνος Κουτσοδημητρόπουλος4 Απριλίου 2016
Περιεχόμενα – Πρόγραμμα
Περιεχόμενα - Πρόγραμμα
Περιεχόμενα• Σκοπός σεμιναρίου• Who is Πάνος• Βασικοί όροι - λέξεις-κλειδιά• User Experience (UX) και γιατί
έχει σημασία• Project management τεχνικές• UX deliverables • Trends (Τάσεις)• Tools (Εργαλεία)• Πρακτική άσκηση
Πρόγραμμα• 18.00 - 19.30 Part 1• 19.30 - 19.45 Coffee time• 19.45 - 21.00 Part 2
Σκοπός σεμιναρίου
Σκοπός σεμιναρίου
ΓενικάΔιδαχή του τρόπου δημιουργίας ενός web site.
Επιμέρους βασικοί στόχοι• Τι είναι User Experience (UX) και γιατί είναι σημαντική• Τα βασικά UX εργαλεία - παραδοτέα• Καθοδήγηση - Σημείο αναφοράς για τη βελτίωση των projects σας
απ’ την πλευρά του τελικού χρήστη-ανθρώπου.
Πάνος Κουτσοκ.λπ.
• Όνειρα• Σύντομο βιογραφικό• @Χ.Ο.:
A UX Team of One(κι όχι μόνο)
7
Πάνος: Dreams’ Driven
• Να συμμετάσχω σε Ολυμπιάδα• Να παίξω στην εθνική ομάδα volley ball ανδρών• Να γίνω ένας απ’ τους πιο σημαντικούς Έλληνες Designers• Να κάνω οικογένεια• Να συμμετάσχω στην ανάπτυξη-υλοποίηση μιας μηχανής
αναζήτησης, που θα αναδεικνύει τον "πλούτο" της Ελλάδας• Να δω την Ελλάδα να μετατρέπεται σε Design Hub.• Κ.α. πολλά*!
• YouTube: The "Last Lecture" by Randy Pausch (1:16:26)• *YouTube: Marc Allen’s "The Power of a One-Page Plan" (11:47)
PARTIALLY DONE
“IN PROGRESS”
IN PROGRESS
DONE
WAITING
WAITING
8
Πάνος: Σύντομο (εργασιακό) βιογραφικό
LinkedIn: Panos Koutsodimitropoulos
Σήμερα: 2 ιδιότητες: 1. X.O.: Product & UX Supervisor 2. Δικό μου Studio: UX & Design
Timeline: • 1995 - 1998
• 1998 - 2000
• 2000 - 2005
• 2005 - 2008
• 2008 - 2015.8
• 2015.9 - …
Μαθητευόμενος, Graphic Designer, Junior Art Director
You ‘re in the army now! Τ/Φ, Λοχίας, Επιλοχίας
Web Designer, Web Author, ΔΣ ΕΓΕ, Δελτίο Παροχής (2003)
Senior Web Designer, Design Consultant & Assistant Product Manager
User Experience Manager
Product & User Experience Supervisor
9
Πάνος: @X.O.: Πιο στενοί συνεργάτες
ProductManager
ΠάνοςContent
Managers
WebDesigner
Front-EndDeveloper
WebDevelopers
WebManager
OnlineProductsManager
Marketing Manager
ITManager
Comm.Manager
Marketing Dept.IT Dept.
SEO Expert
10
Πάνος: @X.O.: Αρμοδιότητες - Περιγραφή ρόλου
• xo.gr • Native mobile apps: ‘Greek Yellow Pages’, ‘XrySOS’
• Πλήρης γνώση των προϊόντων του ΧΟ
• Owner του προϊόντος του ΧΟ σε όλες τις πλατφόρμες
• Υπεύθυνος για την εικαστική ομοιογένεια και το usability των properties του ΧΟ
• Διαχείριση διαδικασίας testing (usability, A/B, web performance, web accessibility), του user journey και της συλλογής feedback από τους χρήστες
• Υπεύθυνος για συγγραφή των specs και για το quality assurance testing
• Search Engine Optimization (SEO) Co-Ownership
Βασικοί όροι - Λέξεις-κλειδιά
12
Βασικοί όροι – Λέξεις-κλειδιά
13
Βασικοί όροι – Λέξεις-κλειδιά: User
• Χρήστης - Άνθρωπος (Human) Normal With Disabilities
• Χρήστης - Web Bot*
*PDF: Google Search Engine Optimization Starter Guide
User Experience (UX)
• Ορισμός• Γιατί έχει σημασία• Elements
15
User Experience: Ορισμός (1)
Web Designer Magazine, No 212, 2013, 'UX: Psychology of Great Design'
Web Designer Magazine, No 212, 2013:
Essentially, (...) user experience (often abbreviated to UX) is focused upon: studying how a person reacts or feels when using a product or service and how this experience can be improved.“
16
User Experience: Ορισμός (2)
PDF: ‘Best Practices In User Experience’ - Forrester Research, Inc
Whitepaper της Forrester Research (!):
Users’ perceptions of the usefulness, usability, and desirability of a Web application based upon the sum of all their direct and indirect interactions with it.“• Useful: Customers can accomplish their goals.• Usable: Customers can easily perform tasks.• Desirable: Customers enjoy their experience.
17
User Experience: Γιατί έχει σημασία
• Ένα website είναι ένα self-service προϊόν-υπηρεσία• Η κατανόηση των επιθυμιών και αναγκών των χρηστών
έχει υπάρξει χαμηλής προτεραιότητας• Την πρώτη περίοδο του Web, έμφαση δινόταν:
α) first to market, β) στα features (featuritis)• Σήμερα, όλοι ξέρουν κι αναγνωρίζουν πως:
• ποιοτική UX = απαραίτητο ανταγωνιστικό πλεονέκτημα• Κακή UX = Ο χρήστης δεν έρχεται πίσω• OK UX = Ο χρήστης θα πάει σε ανταγωνιστή
18
User Experience: Γιατί έχει σημασία: ROI
RoI (Return on Investment)• Συνήθως, μετριέται σε όρους χρημάτων• Σύνηθες μέτρο μέτρησης της RoI: Conversion Rate (CR)
• CR: Εξαιρετικά σημαντικό σε commerce websites
3 εγγραφές
:
36 επισκέπτες
=
8,33% Conversion Rate
19
User Experience: Γιατί έχει σημασία: Ένα κουμπί $300 εκατ.
Πώς η αλλαγή ενός κουμπιού οδήγησε στην αύξηση των ετήσιων εσόδων της ιστοσελίδας κατά $ 300 εκατ.
‘The $300 Million Button’ (User Interface Engineering, uie.com)
E-mailPassword
Login Forgot password
Register
20
Το fix των $ 300 εκατ.:
‘The $300 Million Button’ (User Interface Engineering, uie.com)
E-mailPassword
Login Forgot password
Continue
You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.
User Experience: Γιατί έχει σημασία: Ένα κουμπί $300 εκατ.
21
User Experience: Γιατί έχει σημασία: Εξαγορά Adaptive Path
2 Οκτωβρίου 2014Ανακοινώθηκε η εξαγορά της Adaptive Path απ’ την Capital One.
‘Adaptive Path: Where We’re Going Next’, October 2, 2014
22
User Experience: Elements
PDF: ‘The Elements of User Experience’ (by Jesse James Garret)
Project Management Techniques
24
Project Management Techniques: Waterfall
DISCOVER
DESIGN
DEVELOP
VERIFICATION
Requirements
Technical, Visual Design
Coding, Testing
Customer approval
25
Project Management Techniques: Agile (Scrum method)
SPRINT 1 SPRINT 2
Discover
Design
Develop
Verification
Discover
Design
Develop
Verification
Project Management Techniques: Panos’ Method. για Web
27
Project Management Techniques: Έρευνα αναγκών χρηστών
Mind your users ακόμα και με μικρό budget:
• Δείτε τι ξέρετε (και τι δεν ξέρετε) ήδη• Διαθέσιμα δεδομένα;• Personas
• Κάντε Guerilla User Research• 3 χρήστες είναι καλύτεροι από 0• Σκεφτείτε τους χρήστες-στόχο• Καταγράψτε τις ερωτήσεις σας• (Αν γίνεται) μπείτε στο περιβάλλον τους• Χρησιμοποιήστε τον οργανισμό σας• Χρησιμοποιήστε το δίκτυο σας (παίρνοντας τη συγκατάθεση)• Ρωτήστε ανοιχτές ερωτήσεις. Ξεκινήστε τις ερωτήσεις σας
με λέξεις όπως: ‘γιατί’ και ‘πως’• Προσφέρετε κάποιο είδος “αποζημίωσης”
Βιβλίο: ‘Badass: Making Users Awesome’
UX deliverables
• Συνηθέστερα• Design Brief• Personas• Experience map
• Sitemap• Sketches• Wireframes
29
UX Deliverables: Συνηθέστερα
‘Which UX deliverables are most commonly created and shared?’ (NN/g)
30
UX Deliverables: Design brief: Περιεχόμενα
• Γενικά στοιχεία• Αντικειμενικοί σκοποί• Παραδοτέα• Κοινό απήχησης (Target group)• Επιθυμητά αποτελέσματα προς το κοινό• Στοιχεία του website για τη δημιουργία των αποτελεσμάτων• Ειδικά στοιχεία που θέλουμε να προβάλλουμε• Ανταγωνισμός• Χρονικά περιθώρια• Άλλα… (ανά περίπτωση)
31
UX Deliverables: Design brief: Παράδειγμα 1
32
UX Deliverables: Design brief: Παράδειγμα 2
UX Deliverables: Personas
34
UX Deliverables: Experience map (με user/customer journey)
PDF: ‘Guide to Experience Mapping’ (Adaptive Path)
35
UX Deliverables: Site map (01: list view)
36
UX Deliverables: Site map (02: table view)
37
UX Deliverables: Site map (03: chart view, macrostructure)
38
UX Deliverables: Sketches: Παράδειγμα 1 (xo.gr home page)
39
UX Deliverables: Sketches: Παράδειγμα 2 (G.Y.P. iOS app)
Book: ‘Sketching User Experiences: Getting the Design Right and the Right Design’ (Bill Buxton)
40
UX Deliverables: Wireframes: Παράδειγμα 1 (low fidelity)
41
UX Deliverables: Wireframes: Παράδειγμα 2α (high fidelity)
42
UX Deliverables: Wireframes: Παράδειγμα 2β (high fidelity)
43
UX Deliverables: Wireframes: Παράδειγμα 3 (high fidelity)
44
UX Deliverables: Wireframes: Παράδειγμα 4 (high fidelity)
UX Deliverables: Pixel-perfect (?) visual mockups
Τάσεις (Trends)
47
Τάσεις (κατ’ εμέ)
• DEO (Design Executive Officer)
• Design Thinking• Web Standards (HTML, CSS,
CSS Grid Layout Module, SVG, DOM, WebGL, Video, ...)
• Web Performance• Web Accessibility• Responsive or
Adaptive Design• Mobile Web• Service Design
• Speech input• Web Everywhere• Internet of Things (ΙοΤ)• Data-Informed vs
Data-Driven Design• Big Data• Data Visualization• Οργανικά interfaces• Web Payment
Τάσεις: Responsive Web Design (RWD)
Εργαλεία (Tools)
• Creative• Web Technologies• Project Collaboration• Outsourcing
Εργαλεία (Tools): Inspiration: Behance.net
Εργαλεία (Tools): Sharing/Feedback: Dribbble.com
Εργαλεία (Tools): Visual: Icons: Thenounproject.com
Εργαλεία (Tools): Visual: Photos: Shutterstock.com
Εργαλεία (Tools): Visual: Typography: Google Fonts
Εργαλεία (Tools): Visual: Typography: Typekit.com
Εργαλεία (Tools): Visual: Dummy text: blindtextgenerator.com
Εργαλεία (Tools): Web Tech.: Google Mobile Friendly Test
Εργαλεία (Tools): Web Tech.: Google Page Speed Insights
Εργαλεία (Tools): Web Tech.: Performance: GTMetrix
Εργαλεία (Tools): Web Tech.: Accessibility: AChecker
Εργαλεία (Tools): Web Tech.: Accessibility: WebAim
Εργαλεία (Tools): Project Collaboration: Confluence
Εργαλεία (Tools): Project Collaboration: Evernote
Εργαλεία (Tools): Project Collaboration: Trello
Εργαλεία (Tools): Project Collaboration: Kanbanflow.com
Based on ‘Kanban’, a scheduling system for lean and just-in-time (JIT) production.
Εργαλεία (Tools): Project Collaboration: Office 365
Εργαλεία (Tools): Outsourcing: 99designs.com
Πρακτική άσκηση
Πρακτική άσκηση
excelixi.org/el/Training/Training-Programs/e-Academy/Digital-Marketing-Practitioner
Σας ευχαριστώ!