Axure RP Pro

Balsamiq Mockups

Denim

EightShapes Unify

FlairBuilder

ForeUI

Gliffy

Hot Gloo

iPlotz

iRise

Jumpchart

Justinmind Prototyper

Justproto

Microsoft Visio

MockupScreens

mxGraph

Omnigraffle

Pencil

Pidoco

ProtoShare

WireframeSketcher

Σχετικά άρθρα

• Wireframes στο Web Design (2)
• Τι είναι UID (User Interface Design) και γιατί είναι απαραίτητο; (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (1)
• Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs. (0)
• Χρήσιμα Web 2.0 online εργαλεία (generators) για να σχεδιάσετε εντυπωσιακά websites. (0)

Τι είναι τα Wireframes στο Web Design;

Wireframe στο Web Design είναι ο πρόχειρος σχεδιασμός μια ιστοσελίδας ο οποίος γίνεται πριν τον κανονικό της σχεδιασμό. Συνήθως γίνεται με πολύ απλά εργαλεία γιατί στόχος είναι η προβολή της λειτουργικότητας της σελίδας και όχι του εικαστικού της. Λόγω της απλότητάς τους και της έλλειψης εικαστικού, είναι συνήθως ασπρόμαυρα και έχουν μοναδικό στόχο να απεικονίσουν την τοποθέτηση των στοιχείων μιας σελίδας και τη λειτουργικότητα της. Στοιχεία όπως scrollers, κουμπιά, θέσεις εικόνων, θέσεις τίτλων, κ.α.

Τι κερδίζετε από την χρήση των Wireframes;

Βλέποντας πώς θα λειτουργήσει ένας διαδικτυακός τόπος, πριν αυτός σχεδιαστεί, σας βοηθάει πάρα πολύ στην κατανόηση του UID (User Interface Design) και δίνει την ευκαιρία στη δημιουργική ομάδα να προβλέψει τυχόν προβλήματα που ίσως προκύψουν στο μέλλον. Εκτός από την ίδια τη δημιουργική ομάδα, οι πελάτες σας μπορούν να φανταστούν τον διαδικτυακό τους τόπο σε ένα αρχικό στάδιο. Αυτό τους βοηθάει στο να καταλάβουν τι ακριβώς θα παραλάβουν και τους δίνει την ευκαιρία να κάνουν τις επεμβάσεις που θέλουν σε ένα σημείο που δεν επηρρεάζει την παραγωγική διαδικασία. Τα εμπόδια αντιμετωπίζονται σε αρχικό στάδιο και ο πελάτης νιώθει ότι έχει μεγαλύτερη συμμετοχή στην όλη διαδικασία.

Πως μπορείτε να φτιάξετε δικά σας Wireframes;

Ο πιο συνηθισμένος τρόπος κατασκευής Wireframes είναι με το χαρτί και το μολύβι. Πάρτε μια λευκή κόλλα χαρτί και το μολύβι σας και αρχίστε να σχεδιάζετε τις ιδέες σας. Η επαφή αυτή με το project σάς δίνει τη δυνατότητα να διευρύνετε τους ορίζοντές σας. Το χαρτί και το μολύβι σας δίνουν την δυνατότητα να δείτε σε εικόνα αυτό που φαντάζεστε πολύ γρήγορα! Αφού ολοκληρώσετε τις ιδέες σας, μπορείτε να τις σκανάρετε και να τις αποστείλετε στον πελάτη σας σαν εικόνες, ώστε να αρχίσει να αποκτάει και εκείνος μια καλύτερη ιδέα του τι σκοπεύετε να του ετοιμάσετε και να του δώσετε την ευκαιρία να επέμβει σε αυτό το αρχικό στάδιο.

Επίλογος

Σε επόμενο άρθρο θα δούμε μερικές καλύτερες λύσεις για την παραγωγή Wireframes. Υπάρχουν πολλές και διάφορες από τις οποίες μπορείτε να επιλέξετε. Δοκιμάζοντάας τις, θα δείτε ποια σας εξυπηρετεί καλύτερα στο έργο σας.

Σχετικά άρθρα

• 21 εργαλεία για σωστό Web Design Wireframing (4)
• Τι είναι UID (User Interface Design) και γιατί είναι απαραίτητο; (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (1)
• Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs. (0)
• Χρήσιμα Web 2.0 online εργαλεία (generators) για να σχεδιάσετε εντυπωσιακά websites. (0)

User Interface Design είναι ο σχεδιασμός του τρόπου επικοινωνίας μεταξύ του ανθρώπου και μιας συσκευής, ηλεκτρικής ή μη. Στόχος της επικοινωνίας αυτής είναι η σωστή χρήση της συσκευής από τον άνθρωπο, κάτι το οποίο αν δεν γίνει καθιστά την συσκευή άχρηστη και μερικές φορές ακόμα και επικίνδυνη.

Τι πρέπει να προσέχουμε στο UID ενός website;

1.Σωστή τοποθέτηση των βασικών συνδέσμων και κουμπιών
Όπως και στο παράδειγμα του βραστήρα, έτσι και στον σχεδιασμό ενός website, τα κουμπιά και οι σύνδεσμοι που λένε στον χρήστη τι να κάνει, πρέπει να είναι τοποθετημένα σε σωστά σημεία. Δηλαδή, να μην είναι μπερδεμένα με άλλα στοιχεία του εικαστικού και να ξεχωρίζουν εύκολα από οποιοδήποτε άλλο στοιχείο. Π.χ. Είναι προτιμότερο να μην υπογραμμίζονται λέξεις αν δεν είναι σύνδεσμοι γιατί οι υπογραμμισμένες λέξεις στο διαδίκτυο έχουν ταυτιστεί με links.

2.Καθαρό και κατανοητό περιβάλλον
Προτείνεται γενικότερα το περιβάλλον ενός διαδικτυακού τόπου να είναι καθαρό και κατανοητό για τους χρήστες του. Πολλές φορές, η έμπνευση για ένα εικαστικό γεμάτο φαντασία, εκτροχιάζει τον UID με αποτέλεσμα αυτός/η να σχεδιάζει κάτι όμορφο μεν, δυσλειτουργικό δε. Μια δυσλειτουργική σελίδα δεν επικοινωνεί με τον χρήστη.

3.Αποφυγή κρυφών λειτουργιών
Αυτό το σημείο θα μπορούσε να είναι ο συνδυασμός των 2 παραπάνω σημείων. Αποφεύγοντας κρυφές λειτουργίες τις οποίες οι χρήστες δεν ανακαλύπτουν, ο διαδικτυακός τόπος επικοινωνεί πολύ καλύτερα μαζί τους.

4.Συνοχή
Είναι σημαντικό να δημιουργείται στον χρήστη η αίσθηση της συνήθειας. Η συνήθεια στην οποία αναφερόμαστε είναι σε λειτουργικό επίπεδο και προκαλεί στον χρήστη το αίσθημα της ασφάλειας. Αυτό πετυχαίνεται με τη συνοχή στο σχεδιασμό των λειτουργιών και αποτελεί ένα μεγάλο συν στη συνολική επιτυχία της σχέσης μεταξύ ανθρώπου και διαδικτυακού τόπου ή ηλεκτρονικής εφαρμογής.

5.Σωστή ανταπόκριση
Ο σχεδιασμός μιας ηλεκτρονικής εφαρμογής ή διαδικτυακού τόπου πρέπει να προβλέπει και τις σωστές αντιδράσεις μιας διαδραστικής σχέσης ανθρώπου και εφαρμογής. Δηλαδή όταν ο χρήστης εκτελέσει μια λανθασμένη λειτουργία, ο διαδικτυακός τόπος πρέπει να τον ενημερώσει σχετικά και να του προτείνει μια λύση. Φανταστείτε να εκτελούσε μια λανθασμένη λειτουργία ο χρήστης και να μην ενημερωνόταν γι’ αυτό από την εφαρμογή. Θα νόμιζε ότι όλα δουλεύουν ρολόι ενώ στην πραγματικότητα η επιλεγμένη λειτουργία του δεν θα εκτελείτο.

6.Λειτουργικότητα και εργονομία κινήσεων
Οι σύνδεσμοι, τα κουμπιά και γενικότερα τα στοιχεία πλοήγησης αν είναι τοποθετημένα σε σημεία που βολεύουν την κίνηση του χεριού που κρατάει το ποντίκι, δημιουργούν στον χρήστη μια αίσθηση ταχύτητας και ασφάλειας κινήσεων γιατί νιώθει τις κινήσεις που κάνει γνώριμες και “σωστές”. Προκαλώντας αφύσικες κινήσεις στον χρήστη δεν ενισχύεται το UID και ο χρήστης εκνευρίζεται νιώθοντας ότι εκτελεί άσκοπες και χρονοβόρες κινήσεις.

7.Ελκυστικότητα
Μια όμορφη αισθητική προσέγγιση πάντα βοηθάει στην επικοινωνία χρήστη και εφαρμογής. Όταν ο χρήστης βρίσκεται απέναντι σε ένα όμορφα σχεδιασμένο UID, νιώθει όμορφα, του δημιουργούνται ζεστά συναισθήματα και αντιμετωπίζει την εμπειρία του μέσα από ένα θετικό πρίσμα. Νιώθοντας οικεία, επικοινωνεί καλύτερα με την εφαρμογή και έχει μια καλύτερη εμπειρία. Μια καλή εμπειρία είναι ένας από τους λόγους για τους οποίους επιστρέφει ο χρήστης στον διαδικτυακό τόπο, ξανά και ξανά.

Τα πιο πετυχημένα website στο διαδίκτυο αυτή την στιγμή ακολουθούν τους παραπάνω κανόνες. Τρανταχτά παραδείγματα είναι το Google και το Twitter. Aκόμα και οι πολύ αρχάριοι χρήστες δεν χάνονται στα περιβάλλοντά τους και μπορούν χωρίς βοήθεια και επεξηγήσεις να χρησιμοποιήσουν τις προσφερόμενες λειτουργίες τους.

Σχετικά άρθρα

• Σχεδιάστε φόρμες με CSS χωρίς την χρήση των tables (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (1)
• Μειώστε το κόστος του hosting στην Ελλάδα κάνοντας καλό bandwidth management. (2)
• Δωρεάν εντυπωσιακά WordPress themes – μέρος 1ο (0)
• Δωρεάν vector φοίνικες για καλοκαιρινές συνθέσεις. (1)

Το Usability είναι η σχέση του ανθρώπου / χρήστη με το user interface (περιβάλλον της εφαρμογής ή του site). Όσο καλύτερο το Usability, τόσο καλύτερη η κατανόηση της λειτουργίας της εφαρμογής/website από τον μέσο χρήστη.

Ίσως το Usability να είναι κάτι το οποίο δεν έχει κεντρίσει το ενδιαφέρον των πελατών σας (πολλές φορές οι πελάτες – χωρίς να το γνωρίζουν -προτείνουν ακόμα και πράγματα που κάνουν κακό στο Usability), αλλά εσείς σαν Web Designers μπορείτε να τους ενημερώσετε σχετικά με αυτό και να τους αντί-προτείνετε λύσεις που είναι πιο φιλικές προς τους χρήστες (User Friendly).

Το Web Design Blog, έκανε μια έρευνα και βρήκε μερικά web sites τα οποία θα σας φανούν ιδιαίτερα χρήσιμα στην αναζήτηση του κατάλληλου Usability για το website ή την εφαρμογή που σχεδιάζετε. Εκτός από εσάς, τα website αυτά ίσως μπορέσουν να βοηθήσουν και τους πελάτες σας να καταλάβουν καλύτερα τι βοηθάει το website τους και τι όχι.

FENG GUI

http://www.feng-gui.com

Το Feng GUI (Graphic User Interface) είναι ένα site που σας δίνει την δυνατότητα να κάνετε upload μια εικόνα ή design και στη συνέχεια με έναν αλγόριθμο υπολογίζει περίπου σε ποιο σημείο θα έπεφτε το μέσο ανθρώπινο μάτι. Πολύ χρήσιμη δωρεάν λύση.

M.I.T.

http://web.mit.edu/is/usability/usability-guidelines.html

Το πανεπιστήμιο του MIT, έχει ετοιμάσει έναν πολύ χρήσιμο πίνακα με όλες τις λεπτομέρειες ,στις οποίες είναι καλό να δίνει προσοχή ένας Web Designer όταν σχεδιάζει ένα website. Ο πίνακας αυτός ανανεώνεται συνεχώς.

InfoDesign

http://www.infodesign.com.au/usabilityresources/evaluation/webevaluation.asp

Επίσης, πολύ καλή λίστα με θέματα στα οποία ένας Web Designer οφείλει να δίνει προσοχή κατά τον σχεδιασμό ενός User Interface. Ο συγκεκριμένος πίνακας προσφέρεται σε μορφή .pdf και έχει δίπλα σε κάθε αντικείμενο λίστας και ένα κουτάκι για να σημειώνετε εάν το έχετε εκτελέσει(το αντικείμενο λίστας).

Five Second Test

http://fivesecondtest.com/

Ένα ακόμα πολύ χρήσιμο website, το Five Second Test, χρησιμοποιεί την τεχνική της απομνημόνευσης των εντυπωσιακών στοιχείων μιας ιστοσελίδας. Δηλαδή, ανεβάζετε (upload) το εικαστικό σας και αυτό μετά παρουσιάζεται για 5 δευτερόλεπτα σε τυχαίους χρήστες. Στη συνέχεια οι τυχαίοι αυτοί χρήστες πρέπει να γράψουν ονομαστικά ποια 5 στοιχεία τους έκαναν περισσότερο εντύπωση από τη σελίδα σας. Συλλέγοντας στοιχεία, εσείς μετά μπορείτε να καταλάβετε ποια στοιχεία της σελίδας σας τονίζονται περισσότερο και ποια όχι. Η πληροφορία αυτή βοηθάει στο να ισορροπήσετε τα εικαστικά σας όπως πρέπει, ώστε οι χρήστες σας να έχουν την πιο σωστή εμπειρία. Το Five Second Test έχει άλλα 2 τεστ. Στο ένα μπορείτε να βάλετε το εικαστικό σας να συγκριθεί με ένα άλλο (για 5 δευτερόλεπτα) και στο άλλο μπορείτε να ζητάτε από τους χρήστες να καταγράφουν τι τους άρεσε και τί όχι, αφού έχουν δει το εικαστικό σας για 5 δευτερόλεπτα πάλι.

ClickTale

http://www.clicktale.net

Μια πολύ ενδιαφέρουσα λύση για το Usability είναι αυτή της ClickTale. Η ClickTale έχει μια δωρεάν επιλογή και μερικές πιο δυνατές λύσεις επί πληρωμή. Αυτό που κάνει είναι να εξετάζει την κίνηση των χρηστών σας στο website σας και να σας παρουσιάζει αυτή την κίνηση σε video! Έτσι, είναι σαν να βρίσκεστε πίσω από το χρήστη και να παρακολουθείτε την οθόνη του. Η Δωρεάν επιλογή είναι πολύ καλή για να δοκιμάσετε την υπηρεσία. Αν κρίνετε πως χρειάζεστε μια πιο ολοκληρωμένη εικόνα, μπορείτε να δοκιμάσετε και ένα από τα πακέτα επί πληρωμής της ClickTale στο http://www.clicktale.com/personal_pricing.aspx για ιδιώτες και στο http://www.clicktale.com/business_pricing.aspx για εταιρίες.

CrazyEgg

http://crazyegg.com/

Η λύση της CrazyEgg είναι πολύ καλή και παρέχει πολλές χρήσιμες λειτουργίες. Ο λόγος που την παρουσιάζουμε τελευταία είναι γιατί προσφέρει μόνο λύσεις επί πληρωμή. Παρόλ’ αυτά αξίζει τον κόπο να της ρίξετε μια ματιά.

Σχετικά άρθρα

• Τι είναι UID (User Interface Design) και γιατί είναι απαραίτητο; (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (1)
• Wireframes στο Web Design (2)
• UID Tip: Ο νόμος των 3 κλικ (0)
• 21 εργαλεία για σωστό Web Design Wireframing (4)

“Ο χρήστης δεν πρέπει να ξεπερνάει τα 3 κλικ για να βρει οποιαδήποτε πληροφορία θέλει στον διαδικτυακό τόπο που βρίσκεται.”

Ο άτυπος αυτός κανόνας βασίζεται στην υποψία ότι, οι χρήστες που δεν βρίσκουν την πληροφορία που αναζητούν μετά από 3 κλικ, εκνευρίζονται και φεύγουν δυσαρεστημένοι από το website.

Αν και δεν υπάρχουν επίσημα αποδεικτικά στοιχεία που να υποστηρίζουν την άποψη αυτή, είναι κοινά αποδεκτό στην κοινωνία των Web Designers πως ο κανόνας των 3 κλικ είναι αληθινός και όποια site τον ακολουθούν, έχουν ένα πιο συγκροτημένο και κατανοητό σύστημα πλοήγησης, έλκοντας έτσι τους χρήστες.

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

Περισσότερες πληροφορίες για το Three-click rule μπορείτε να διαβάσετε στα παρακάτω links:

• http://www.uie.com/articles/three_click_rule/
• http://www.hobo-web.co.uk/tips/31.htm
  

Για εσάς τι έχει μεγαλύτερη σημασία;

Σχετικά άρθρα

• Τι είναι UID (User Interface Design) και γιατί είναι απαραίτητο; (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (1)
• Wireframes στο Web Design (2)
• 6 διαδικτυακοί τόποι για να ελέγξετε το Usability των websites σας (3)
• 21 εργαλεία για σωστό Web Design Wireframing (4)