Ξεκινώντας στο UX Design

[stergi17]

Καλησπέρα σε όλους,

 

Παρακολουθώντας χρόνια το forum του insomnia και διαβάζοντας με ενδιαφέρον όλα τα topics γύρω από το Web Design - Developement, θα ήθελα να ρωτήσω εάν υπάρχει ενδιαφέρον να δημιουργήσουμε ένα αντίστοιχο topic για το UX Design - Usability - Accessibility.

 

Μπαίνοντας στον χώρο του User Experience (UX) Design τα τελευταία χρόνια, παρατηρώ μία έλλειψη πηγών και γνώσεων στον τομέα αυτό στην Ελλάδα σε σχέση με το εξωτερικό, αν και ακόμα υπάρχει μία γενικότερη σύγχυση γύρω από το τι πραγματικά είναι το UX.

 

Εάν συμφωνείτε μπορώ να ξεκινήσω ένα basic guide για το UX σαν το "Ξεκινώντας στο Web Design". Πιστεύω ότι το guide αυτό θα δώσει χρήσιμες γνώσεις σε πολλούς designers και developers και θα είναι μία ωραία βάση για συζήτηση και troubleshooting!

 

Ακούω γνώμες

[parsifal]

Πάντα έχουν ζήτηση τέτοιου είδους οδηγοί, δεν τίθεται θέμα!

[stergi17]

Παρακάτω ακολουθεί ένας συνοπτικός οδηγός που εξηγεί πως το UX βοηθάει κατά την δημιουργία ενός website/application. (Ελπίζω να γίνει sticky διότι θα εμπλουτίσω το άρθρο με περισσότερες πληροφορίες)

 

--

 

Δεν θα ξεκινήσω γράφοντας έναν ορισμό για το τι σημαίνει (UX) User Experience Design διότι υπάρχουν πολλές ερμηνίες απο διαφορετικούς ανθρώπους στον χώρο. Γενικότερα το UX Design αναφέρεται στην συνολική εμπειρία που θα έχει ένα χρήστης όταν χρησιμοποιεί μία εφαρμογή, website ή υπηρεσία.

 

Πολλοί μπερδεύουν το UX με το UI (User interface) δηλαδή με το πως έχει σχεδιαστεί οπτικά μία εφαρμογή ή website. Όμως το UX περιέχει τεχνικές έρευνας και ανάλυσης σύμφωνα με τις οποίες θα προκύψει η τελική εμφάνιση (UI).

 

Το UX αποτελείται από 5 επίπεδα τα οποία και θα αναφέρω συνοπτικά έτσι ώστε να γίνουν κατανοητά και να μπορούν να εφαρμοστούν κατά την δημιουργία ενός project. Έστω λοιπόν ότι μας έχει ανατεθεί η δημιουργία ενός mobile application. Ποιά είναι λοιπόν τα βήματα που θα ακολουθήσουμε για να σχεδιάσουμε μία σωστή εμπειρία χρήσης?

 

(Πηγή: Garrett, Jesse James. The Elements Of User Experience. 1st ed. Berkeley, CA: New Riders, 2011. Print.)

 

1. Strategy

 

Ξεκινώντας από το πρώτο επίπεδο “Strategy” θα πρέπει να αναλυθούν οι στόχοι του project και οι ανάγκες των χρηστών. Αυτό μπορεί να γίνει με κάποια μορφή έρευνας (π.χ. ερωτηματολόγια, συνεντεύξεις με πιθανούς χρήστες, online ερευνα κτλ.) ώστε να προκύψει μία βάση σύμφωνα με τις ανάγκες των ανθρώπων που θα χρησιμοποιήσουν την εφαρμογή που θα δημιουργήθεί. Σε αυτό το σημείο εκτός απο τις ανάγκες των χρηστών θα πρέπει επίσης να αναλυθούν οι ανάγκες επιχείρησης και ποιους στόχους θέλει να επιτεύξει με την δημιουργία αυτής της εφαρμογής.

 

Θα πρέπει να απαντηθούν οι ακόλουθες ερωτήσεις:

Ποιός είναι ο στόχος του application;

Ποιες ανάγκες των χρηστών πρέπει να καλυφθούν;

Ποιοί είναι οι στόχοι της επιχείρησης;

 

Μερικές τεχνικές:

Customer journey map

Personas

Scenarios

 

2. Scope

 

Εφόσον έχει δημιουργηθέι μία καλή βάση και είναι γνωστό σε ποιους απευθύνεται η εφαρμογή και τι ανάγκες έχουν, περνάμε στο επίπεδο “Scope”. Εκεί θα πρέπει να δημιουργηθεί μία λίστα με τα features της εφαρμογής.

 

Πληροφορίες για δημιουργία user stories:

User stories

 

 

3. Structure

 

Σε αυτο το σημείο πρέπει να σχεδιαστούν οι τρόποι με τους οποίους οι χρήστες θα βρουν πληροφορίες στην εφαρμογή και πως θα αλληλεπιδράσουν με αυτή. Θα πρέπει να αναλυθεί η δομή της πληροφορίας και οι διαδρομές που θα ακολουθήσουν οι χρήστες.

 

Θα πρέπει να απαντηθούν οι ακόλουθες ερωτήσεις:

Πως μπορεί να βρει εύκολα ο χρήστης αυτό που ψάχνει;

Ποιά είναι τα user flows και τα interactions;

 

Μερικές τεχνικές:

Card sorting

Sitemaps

User flows

 

4. Sceleton

 

 

Ήρθε η ώρα να δημιουργηθεί το αρχικό layout της εφαρμογής. Είτε με πρόχειρα σκίτσα είτε με το σχεδιασμό wireframes, θα πρέπει να σχεδιαστεί το layout σύμφωνα με τα features που θα έχει η εφαρμογή. Για παράδειγμα θα σχεδιαστεί το βασικό μενού, το navigation, κουμπιά, κείμενο, μηνύματα και όλα τα UI στοιχεία που θα χρειαστούν. Έτσι σχηματίζεται μία πρώτη εικόνα του UI.

 

Καλό είναι σε αυτό το σημείο να γίνεται testing των wireframes με χρήστες προκειμένου να αξιολογηθεί το UI και να υπάρξει ένα πρώτο feedback.

 

Software για δημιουργία wireframes:

Balsamiq

Sketch

Omnigraffle

 

5. Surface

Το τελευταίο στάδιο είναι η τελειοποίηση του UI με χρώματα, εικονίδια, γραμματοσειρές, εικόνες και γενικότερα ο σχεδιασμός του brand identity της εφαρμογής ώστε να είναι ελκυστική.

 

 

Software για δημιουργία UI:

Sketch

Photoshop

 

--

 

Συνοψίζοντας λοιπόν γίνεται ξεκάθαρο ότι το UX Design δεν είναι απλή υπόθεση και είναι απαραίτητο σε κάθε project που αφορά την δημιουργία ενός website, application, υπηρεσίας ή γενικότερα σε ότι αφορά την αλληλεπίδραση του ανθρώπου με ένα σύστημα.

 

O κόσμος του UX είναι μεγάλος, το παρόν άρθρο είναι ένας συνοπτικό οδηγός και σύντομα θα ακολουθήσουν και άλλες πληροφορίες