User experience: UCD for the Web

70
User Experience: UCD for the Web Πάνος Κουτσοδημητρόπουλος 4 Απριλίου 2016

Transcript of User experience: UCD for the Web

Page 1: User experience: UCD for the Web

User Experience: UCD for the Web

Πάνος Κουτσοδημητρόπουλος4 Απριλίου 2016

Page 2: User experience: UCD for the Web

Περιεχόμενα – Πρόγραμμα

Page 3: User experience: UCD for the Web

Περιεχόμενα - Πρόγραμμα

Περιεχόμενα• Σκοπός σεμιναρίου• 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

Page 4: User experience: UCD for the Web

Σκοπός σεμιναρίου

Page 5: User experience: UCD for the Web

Σκοπός σεμιναρίου

ΓενικάΔιδαχή του τρόπου δημιουργίας ενός web site.

Επιμέρους βασικοί στόχοι• Τι είναι User Experience (UX) και γιατί είναι σημαντική• Τα βασικά UX εργαλεία - παραδοτέα• Καθοδήγηση - Σημείο αναφοράς για τη βελτίωση των projects σας

απ’ την πλευρά του τελικού χρήστη-ανθρώπου.

Page 6: User experience: UCD for the Web

Πάνος Κουτσοκ.λπ.

• Όνειρα• Σύντομο βιογραφικό• @Χ.Ο.:

A UX Team of One(κι όχι μόνο)

Page 7: User experience: UCD for the Web

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

Page 8: User experience: UCD for the Web

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

Page 9: User experience: UCD for the Web

9

Πάνος: @X.O.: Πιο στενοί συνεργάτες

ProductManager

ΠάνοςContent

Managers

WebDesigner

Front-EndDeveloper

WebDevelopers

WebManager

OnlineProductsManager

Marketing Manager

ITManager

Comm.Manager

Marketing Dept.IT Dept.

SEO Expert

Page 10: User experience: UCD for the Web

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

Page 11: User experience: UCD for the Web

Βασικοί όροι - Λέξεις-κλειδιά

Page 12: User experience: UCD for the Web

12

Βασικοί όροι – Λέξεις-κλειδιά

Page 13: User experience: UCD for the Web

13

Βασικοί όροι – Λέξεις-κλειδιά: User

• Χρήστης - Άνθρωπος (Human) Normal With Disabilities

• Χρήστης - Web Bot*

*PDF: Google Search Engine Optimization Starter Guide

Page 14: User experience: UCD for the Web

User Experience (UX)

• Ορισμός• Γιατί έχει σημασία• Elements

Page 15: User experience: UCD for the Web

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.“

Page 16: User experience: UCD for the Web

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.

Page 17: User experience: UCD for the Web

17

User Experience: Γιατί έχει σημασία

• Ένα website είναι ένα self-service προϊόν-υπηρεσία• Η κατανόηση των επιθυμιών και αναγκών των χρηστών

έχει υπάρξει χαμηλής προτεραιότητας• Την πρώτη περίοδο του Web, έμφαση δινόταν:

α) first to market, β) στα features (featuritis)• Σήμερα, όλοι ξέρουν κι αναγνωρίζουν πως:

• ποιοτική UX = απαραίτητο ανταγωνιστικό πλεονέκτημα• Κακή UX = Ο χρήστης δεν έρχεται πίσω• OK UX = Ο χρήστης θα πάει σε ανταγωνιστή

Page 18: User experience: UCD for the Web

18

User Experience: Γιατί έχει σημασία: ROI

RoI (Return on Investment)• Συνήθως, μετριέται σε όρους χρημάτων• Σύνηθες μέτρο μέτρησης της RoI: Conversion Rate (CR)

• CR: Εξαιρετικά σημαντικό σε commerce websites

3 εγγραφές

:

36 επισκέπτες

=

8,33% Conversion Rate

Page 19: User experience: UCD for the Web

19

User Experience: Γιατί έχει σημασία: Ένα κουμπί $300 εκατ.

Πώς η αλλαγή ενός κουμπιού οδήγησε στην αύξηση των ετήσιων εσόδων της ιστοσελίδας κατά $ 300 εκατ.

‘The $300 Million Button’ (User Interface Engineering, uie.com)

E-mailPassword

Login Forgot password

Register

Page 20: User experience: UCD for the Web

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 εκατ.

Page 21: User experience: UCD for the Web

21

User Experience: Γιατί έχει σημασία: Εξαγορά Adaptive Path

2 Οκτωβρίου 2014Ανακοινώθηκε η εξαγορά της Adaptive Path απ’ την Capital One.

‘Adaptive Path: Where We’re Going Next’, October 2, 2014

Page 22: User experience: UCD for the Web

22

User Experience: Elements

PDF: ‘The Elements of User Experience’ (by Jesse James Garret)

Page 23: User experience: UCD for the Web

Project Management Techniques

Page 24: User experience: UCD for the Web

24

Project Management Techniques: Waterfall

DISCOVER

DESIGN

DEVELOP

VERIFICATION

Requirements

Technical, Visual Design

Coding, Testing

Customer approval

Page 25: User experience: UCD for the Web

25

Project Management Techniques: Agile (Scrum method)

SPRINT 1 SPRINT 2

Discover

Design

Develop

Verification

Discover

Design

Develop

Verification

Page 26: User experience: UCD for the Web

Project Management Techniques: Panos’ Method. για Web

Page 27: User experience: UCD for the Web

27

Project Management Techniques: Έρευνα αναγκών χρηστών

Mind your users ακόμα και με μικρό budget:

• Δείτε τι ξέρετε (και τι δεν ξέρετε) ήδη• Διαθέσιμα δεδομένα;• Personas

• Κάντε Guerilla User Research• 3 χρήστες είναι καλύτεροι από 0• Σκεφτείτε τους χρήστες-στόχο• Καταγράψτε τις ερωτήσεις σας• (Αν γίνεται) μπείτε στο περιβάλλον τους• Χρησιμοποιήστε τον οργανισμό σας• Χρησιμοποιήστε το δίκτυο σας (παίρνοντας τη συγκατάθεση)• Ρωτήστε ανοιχτές ερωτήσεις. Ξεκινήστε τις ερωτήσεις σας

με λέξεις όπως: ‘γιατί’ και ‘πως’• Προσφέρετε κάποιο είδος “αποζημίωσης”

Βιβλίο: ‘Badass: Making Users Awesome’

Page 28: User experience: UCD for the Web

UX deliverables

• Συνηθέστερα• Design Brief• Personas• Experience map

• Sitemap• Sketches• Wireframes

Page 29: User experience: UCD for the Web

29

UX Deliverables: Συνηθέστερα

‘Which UX deliverables are most commonly created and shared?’ (NN/g)

Page 30: User experience: UCD for the Web

30

UX Deliverables: Design brief: Περιεχόμενα

• Γενικά στοιχεία• Αντικειμενικοί σκοποί• Παραδοτέα• Κοινό απήχησης (Target group)• Επιθυμητά αποτελέσματα προς το κοινό• Στοιχεία του website για τη δημιουργία των αποτελεσμάτων• Ειδικά στοιχεία που θέλουμε να προβάλλουμε• Ανταγωνισμός• Χρονικά περιθώρια• Άλλα… (ανά περίπτωση)

Page 31: User experience: UCD for the Web

31

UX Deliverables: Design brief: Παράδειγμα 1

Page 32: User experience: UCD for the Web

32

UX Deliverables: Design brief: Παράδειγμα 2

Page 33: User experience: UCD for the Web

UX Deliverables: Personas

Page 34: User experience: UCD for the Web

34

UX Deliverables: Experience map (με user/customer journey)

PDF: ‘Guide to Experience Mapping’ (Adaptive Path)

Page 35: User experience: UCD for the Web

35

UX Deliverables: Site map (01: list view)

Page 36: User experience: UCD for the Web

36

UX Deliverables: Site map (02: table view)

Page 37: User experience: UCD for the Web

37

UX Deliverables: Site map (03: chart view, macrostructure)

Page 38: User experience: UCD for the Web

38

UX Deliverables: Sketches: Παράδειγμα 1 (xo.gr home page)

Page 39: User experience: UCD for the Web

39

UX Deliverables: Sketches: Παράδειγμα 2 (G.Y.P. iOS app)

Book: ‘Sketching User Experiences: Getting the Design Right and the Right Design’ (Bill Buxton)

Page 40: User experience: UCD for the Web

40

UX Deliverables: Wireframes: Παράδειγμα 1 (low fidelity)

Page 41: User experience: UCD for the Web

41

UX Deliverables: Wireframes: Παράδειγμα 2α (high fidelity)

Page 42: User experience: UCD for the Web

42

UX Deliverables: Wireframes: Παράδειγμα 2β (high fidelity)

Page 43: User experience: UCD for the Web

43

UX Deliverables: Wireframes: Παράδειγμα 3 (high fidelity)

Page 44: User experience: UCD for the Web

44

UX Deliverables: Wireframes: Παράδειγμα 4 (high fidelity)

Page 45: User experience: UCD for the Web

UX Deliverables: Pixel-perfect (?) visual mockups

Page 46: User experience: UCD for the Web

Τάσεις (Trends)

Page 47: User experience: UCD for the Web

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

Page 48: User experience: UCD for the Web

Τάσεις: Responsive Web Design (RWD)

Page 49: User experience: UCD for the Web

Εργαλεία (Tools)

• Creative• Web Technologies• Project Collaboration• Outsourcing

Page 50: User experience: UCD for the Web

Εργαλεία (Tools): Inspiration: Behance.net

Page 51: User experience: UCD for the Web

Εργαλεία (Tools): Sharing/Feedback: Dribbble.com

Page 52: User experience: UCD for the Web

Εργαλεία (Tools): Visual: Icons: Thenounproject.com

Page 53: User experience: UCD for the Web

Εργαλεία (Tools): Visual: Photos: Shutterstock.com

Page 54: User experience: UCD for the Web

Εργαλεία (Tools): Visual: Typography: Google Fonts

Page 55: User experience: UCD for the Web

Εργαλεία (Tools): Visual: Typography: Typekit.com

Page 56: User experience: UCD for the Web

Εργαλεία (Tools): Visual: Dummy text: blindtextgenerator.com

Page 57: User experience: UCD for the Web

Εργαλεία (Tools): Web Tech.: Google Mobile Friendly Test

Page 58: User experience: UCD for the Web

Εργαλεία (Tools): Web Tech.: Google Page Speed Insights

Page 59: User experience: UCD for the Web

Εργαλεία (Tools): Web Tech.: Performance: GTMetrix

Page 60: User experience: UCD for the Web

Εργαλεία (Tools): Web Tech.: Accessibility: AChecker

Page 61: User experience: UCD for the Web

Εργαλεία (Tools): Web Tech.: Accessibility: WebAim

Page 62: User experience: UCD for the Web

Εργαλεία (Tools): Project Collaboration: Confluence

Page 63: User experience: UCD for the Web

Εργαλεία (Tools): Project Collaboration: Evernote

Page 64: User experience: UCD for the Web

Εργαλεία (Tools): Project Collaboration: Trello

Page 65: User experience: UCD for the Web

Εργαλεία (Tools): Project Collaboration: Kanbanflow.com

Based on ‘Kanban’, a scheduling system for lean and just-in-time (JIT) production.

Page 66: User experience: UCD for the Web

Εργαλεία (Tools): Project Collaboration: Office 365

Page 67: User experience: UCD for the Web

Εργαλεία (Tools): Outsourcing: 99designs.com

Page 68: User experience: UCD for the Web

Πρακτική άσκηση

Page 69: User experience: UCD for the Web

Πρακτική άσκηση

excelixi.org/el/Training/Training-Programs/e-Academy/Digital-Marketing-Practitioner

Page 70: User experience: UCD for the Web

Σας ευχαριστώ!

[email protected]