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

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

pkoutsod@gmail.com