ΑΚΤΟ ΑΘΗΝΑΙΚΟΣ ΚΑΛΛΙΤΕΧΝΙΚΟΣ ΤΕΧΝΟΛΟΓΙΚΟΣ ΟΜΙΛΟΣ
ΚΛΑΔΟΣ ΓΡΑΦΙΣΤΙΚΗΣ
ΒΑ (HONOURS) DEGREE IN GRAPHIC DESIGN MIDDLESEX UNIVERSITY
ΤΙΤΛΟΣ ΔΙΠΛΩΜΑΤΙΚΗΣ ΕΡΓΑΣΙΑΣ Δημιουργία μιας Smartphone εφαρμογής ΟΝΟΜΑ ΣΠΟΥΔΑΣΤΗ ΦΩΣΚΟΛΟΥ ΚΑΤΕΡΙΝΑ
ΟΝΟΜΑ ΥΠΕΥΘΥΝΟΥ ΚΑΘΗΓΗΤΗ ΜΕΛΕΤΗΣ ΗΛΙΑΣ 2012-2013 ΗΜΕΡΟΜΗΝΙΑ ΥΠΟΒΟΛΗΣ 29 ΜΑΙΟΥ 2013
Έρευνα, Συγγραφή, Σχεδίαση και εικονογράφηση Τόμου Φώσκολου Κατερίνα | foskolou.katerina@gmail.com Υπεύθυνος Καθηγητής Μελέτης Ηλίας | info@iliasmeletis.net Xρησιμοποιήθηκε η οικογένεια γραμματοσειρών Gill Sans Hel Η σχεδίαση του τόμου πραγματοποιήθηκε με το λογισμικό Adobe InDesign Φώσκολου Κατερίνα ΑΚΤΟ / Middlesex University / 2012 - 2013 Πνευματικά δικαιώματα κατοχυρωμένα. Επιτρέπεται η αναδημοσίευση τμημάτων της έκδοσης, κατόπιν έγγραφης αδείας και μόνον με αναφορά της πηγής.
Δημιουργία μιας smαrthphone εφαρμογής Φώσκολου Κατερίνα
Ευχαριστίες Ένα μεγάλο ευχαριστώ στο δάσκαλο μου, κύριο Ηλία Μελέτη, που ήταν εκεί κάθε στιγμή να με εμψυχώνει, να μου λεέι: “πάμε λίγο ακόμα”, να ακούει τη γνώμη μου και να βρίσκει μαγικά τη λύση κάθε φορά που υπήρχε πρόβλημα. Ένα ευχαριστώ επίσης στον κύριο Μιαούλη που είναι δάσκαλος με όλη τη σημασία της λέξης, ακόμα και όταν η ώρα είναι 11.30 το βράδυ. Αφιερώσεις στο τρίτο μου βιβλίο γιατί τώρα δεν προλαβαίνω.
010
011
Εισαγωγή
012
...Κάπως έτσι, λίγους μήνες πριν ήρθε η ώρα να διαλέξω θέμα για τη διπλωματική μου. Δύσκολο όταν μπορείς να επιλέξεις οτιδήποτε θελήσεις. Ότι θα ασχοληθώ με το digital το ήξερα, δε γνώριζα όμως συγκεκριμένα πώς θα το προσέγγιζα. Σκέφτηκα μια καμπάνια στα social media, μου φάνηκε όμως πιο προκλητικό στρατηγικά παρά σχεδιαστικά. Αποφάσισα λοιπόν να φτιάξω ένα application. Τι σημασία είχε που δεν είχα ούτε iPhone, ούτε iPad, ούτε καν κινητό που να “μπαίνει” στο ίντερνετ; Ιδέα δεν είχα, ούτε τα συμπαθούσα ιδιαίτερα, κατανοώ όμως και σέβομαι τη χρηστικότητά τους σε έναν κόσμο που τρέχει. Ήξερα πως αυτό θα με δυσκόλευε στη συνέχεια (η έλλειψη μιας τέτοιας συσκευής), ήμουν όμως πρόθυμη να ασχοληθώ με αυτό και να μάθω όσο το δυνατόν περισσότερα πράγματα μπορώ. Τι θέμα όμως; Με είχε ρωτήσει ο δάσκαλος μου ”Κατερίνα, τι σου αρέσει”; (Σκέφτηκα πως αυτό είναι το καλό όταν το brief το φτιάχνεις μόνος σου, το ότι μπορείς να “βγάλεις” τον εαυτό σου). Η μουσική λοιπόν, τα μαθηματικά και τα ταξίδια. Σκέφτηκα αρχικά ένα app με συναρτήσεις και γραφικές παραστάσεις αλλά, μμμ… όχι. Μετά η μουσική. Πώς να πιάσεις ένα τέτοιο θέμα, πώς να το προσεγγίσεις, πώς να είσαι αντικειμενικός και συνάμα να απαντάς στα γούστα των πολλών; Πολύ προσωπικό θέμα η μουσική για να το εκθέσω. Και έτσι κατέληξα. Ταξίδια! Αν κάτι μ’ αρέσει είναι να ταξιδεύω. Θα φτιάξω μια εφαρμογή που θα συγκεντρώνει όλα τα απαραίτητα, που το περιβάλλον της θα είναι χαρούμενο, ανάλαφρο και φωτεινό σαν την καρδιά κάθε φορά που ταξιδεύει! Αρχικά έλεγα να ασχοληθώ με μια ήδη υπάρχουσα αεροπορική εταιρία. Έτοιμη εταιρική ταυτότητα, ύφος, target group. Το να φτιάξω όμως εγώ από το μηδέν μια υπηρεσία με πλήθος παροχών ήταν πραγματική πρόκληση. Ο χρόνος πολύ λίγος, αποφασίσαμε όμως να το τολμήσουμε. Άλλωστε, καλύτερα να μετανιώνεις για κάτι που έκανες παρά για κάτι που δεν έκανες. Καλή ανάγνωση.
013
014
015
Η συσκεύη Το θέμα που αρχικά με απασχόλησε, ήταν το με ποιά συσκευή θα ασχοληθώ και για ποιό λόγο.
016
Σαν συσκευή επέλεξα το iPhone 5, το τελευταίο μοντέλο της εταιρίας apple. Πρώτον γιατί είναι αυτό με τον υψηλότερο βαθμό ικανοποίησης πελατών από όλα τα smartphones που κυκλοφορούν στην αγορά. Το iPhone κατέκτησε την κορυφή σε όλες τις κατηγορίες της έρευνας, που πραγματοποιήθηκε από την εταιρία J. D. Power and Associates) κερδίζοντας εννέα διαδοχικά βραβεία στις κατηγορίες: απόδοση, σχεδίαση, δυνατότητες και ευκολία χρήσης. Όλα τα παραπάνω, προσθέτοντας ίσως το “prestige” του brand, καθιστούν το νεοφερμένο αυτό μοντέλο πολυπόθητο, για πολλούς, προϊόν. Ο δεύτερος λόγος ήταν η οθόνη αυτού και οι προκλήσεις που θα έπρεπε να αντιμετωπίσω. Το iPhone 5 συγκριτικά με το iPhone 4 διαθέτει μια οθόνη μεγαλύτερη σε ύψος, αλλά συνεχίζει να έχει το ίδιο πλάτος με αποτέλεσμα οποιαδήποτε ενέργεια να παραμένει εξίσου εύκολη, ό,τι δηλαδή έκανες με το ένα χέρι ( για παράδειγμα την πληκτρολόγηση) να μπορείς ακόμα να το κάνεις. Από θέμα διαστασιολόγησης, η νέα οθόνη 1136x640 px έναντι των 960x640 px του iPhone 4 (περίπου εννέα χιλιοστά ψηλότερο). Δυσκολότερος δηλαδή αριθμός σχεδιαστικά μιας και το 960 διαιρείται τέλεια με τους 2, 3, 4, 5, 6, 8, 10, 12, 15, … σε αντίθεση με το 1136px (διάσταση ύψους του νέου μοντέλου). Τέλος, να σημειωθεί πως μεγάλη προσοχή χρειάστηκε στο σχεδιασμό ή στην όποια επιλογή εικόνων μιας και η οθόνη διαθέτει τόσο υψηλή πυκνότητα pixel, που το μάτι δεν μπορεί να διακρίνει τα μεμονωμένα pixel. 326px ανά ίντσα, μεγαλύτερη ανάλυση και από τη συνήθη εκτύπωση.
017
01. φωτογραφίες iPhone 5 από όλες τις πλευρές
018
02. Σύγκριση διαστάσεων iPhone 5 με το προηγούμενο μοντέλο iPhone 4S
019
HCI Πώς θα προσεγγίσω το σχεδιασμό της εφαρμογής, ώστε η τελευταία να είναι όσο το δυνατόν φιλικότερη προς το χρήστη;
020
Αυτό που κυρίως με απασχόλησε ήταν η αλληλεπίδραση της εφαρμογής με το χρήστη. Έπρεπε λοιπόν να εισχωρήσω όσο το δυνατόν περισσότερο στις αρχές του Human Computer Interaction. Μέσα σε μικρό χρονικό διάστημα έπρεπε να πάρω όσες περισσότερες πληροφορίες μπορούσα πάνω σε αυτό το θέμα, να κατανοήσω τι είναι “η εμπειρία του χρήστη” και ποια είναι τα στοιχεία εκείνα που την καθιστούν απλή και ευχάριστη; Πώς μπορεί η πλοήγηση του χρήστη να είναι εύκολη; Πώς Για να απαντήσω στα ερωτήματα αυτά, αλλά και σε άλλα επιλέγεις τα βήματα ώστε να παρεμφερή που συνεχώς προέκυπταν, παρακολούθησα κάείναι αποδοτικά και συνάμα ποια ανοιχτά μαθήματα του Stanford University πάνω στο HCI (Human Computer Interaction) και φυσικά διάβασα όσο το δυνατόν λιγότερα; τις οδηγίες που παρέχει η Apple στους ενδιαφερόμενους : iOS Human Interface Guidelines, από τις οποίες παραθέτω εν συντομία τα σπουδαιότερα που αποκόμισα:
021
1. Η εφαρμογή θα πρέπει να παραμένει πιστή στο πρωταρχικό της καθήκον. Για κάθε όθονη θα πρέπει να έχει καθοριστεί τι είναι πιο σημαντικό, ποιες είναι οι κρίσιμες πληροφορίες και αυτές να έρχονται σε πρώτη θέση για να μπορεί ο χρήστης να εστιάσει εκεί που πρέπει. 2. Θα πρέπει να “ανυψώνεται”, να “ακούγεται” περισσότερο το στοιχείο για το οποίο οι άνθρωποι επιλέγουν μια εφαρμογή. Σε ένα παιχνίδι, τα γραφικά είναι εκείνα που οφείλουν να είναι εντυπωσιακά, όπως και η εμπειρία. Σε ένα Τravel App, όπως το δικό μου, αυτό που έχει σημασία είναι οι χρήστες να συγκεντρωθούν στο περιεχόμενο, με ένα UI (User Interface) ξεκάθαρο και σαφές ως προς την πληροφορία. 3. Think Top Down. Φαίνεται πως οι πληροφορίες στο πάνω μέρος της οθόνης διαβάζονται περισσότερο. Αυτό οφείλεται στους συγκεκριμένους τρόπους με τους οποίους ο χρήστης αλληλεπιδρά με τη συσκευή. Είναι καλό λοιπόν, ψηλά να μπαίνουν οι σημαντικότερες εξ’ αυτών πληροφορίες. 4. Η πορεία που θα ακολουθήσουν οι χρήστες πρέπει να είναι η προφανής, όπως και η μετάβαση από τη μία πληροφορία στην άλλη οφείλει να είναι απλή. 5. Χρειάζεται ιδιαίτερη προσοχή ώστε τα βήματα να είναι λογικά, το interface να είναι χρηστικό και προσιτό στον οποιοδήποτε.
022
6. Τα βήματα είναι καλό να είναι όσο το δυνατόν λιγότερα, να ελαχιστοποιείται δηλαδή η προσπάθεια που απαιτείται από τον χρήστη. Οφείλουμε να είμαστε περιεκτικοί. 7. Ο σχεδιασμός πρέπει να είναι ανθρωποκεντρικός, να απαντάει στις ανάγκες του χρήστη και όχι φλύαρος προς χάριν εντυπωσιασμού. Οι λέξεις, οι φράσεις που χρησιμοποιούνται να είναι απλές στην κατανόηση. Τεχνικοί όροι ή εξειδικευμένη ορολογία αποφεύγονται. Σε καμία περίπτωση δε θέλουμε ο κάτοχος της εφαρμογής να νιώσει ανόητος ή ανίκανος να κατανοήσει κάτι. Στην περίπτωση αυτή, έχουμε αποτύχει μιας και η εμπειρία που επιφυλάσσαμε για τον χρήστη θα χαρακτηριζόταν αρνητική. 8. Προώθηση της μάρκας με τον κατάλληλο τρόπο. Σίγουρα στο σχεδιασμό θα ενσωματωθούν στοιχεία, χρώματα αλλά και το ύφος ενός προϊόντος ή μιας υπηρεσίας με τέτοιο τρόπο όμως που να μην ενοχλεί τον χρήστη. Η παρουσία της καλό θα ήταν να είναι διακριτική. 9. Τα στοιχεία του UI να είναι ξεκάθαρα. Οι χρήστες περιμένουν να δουν τις τυπικές προβολές των λειτουργιών ώστε να μπορεί να ενεργοποιηθεί μια προηγούμενη εμπειρία τους. Έτσι αμέσως αμέσως νιώθουν πιο άνετα, πιο οικεία στο περιβάλλον της εφαρμογής. Οι ριζικές αλλαγές της εμφάνισης ενός στοιχείου που εκτελεί μια τυπική ενέργεια, καλό είναι να αποφεύγονται.
023
The Brief Θέμα της διπλωματικής μου εργασίας: Δημιουργία μιας smartphone εφαρμογής.
THE
024
F
BRIE
THE NAME … Και το όνομα αυτής Balloon. Από ένα μπαλόνι μόνο όμορφες εικόνες μπορούν να έρθουν στο μυαλό (ελπίζω!). Ένα μπαλόνι το αφήνεις ελεύθερο, ανεβαίνει ψηλά και ταξιδεύει πολύχρωμο και λαμπερό. Από τα πολλά ονόματα στα οποία είχα καταλήξει, δε νομίζω πως θα μπορούσα να βρω καλύτερο για την εφαρμογή μου.
025
INFO Το Balloon αποτελεί μια smartphone εφαρμογή για το iPhone 5. Οι λειτουργίες της θα εξυπηρετούν το χρήστη σε ό,τι έχει να κάνει με την οργάνωση ενός ταξιδιού, ενώ παράλληλα, θα παρέχονται χρήσιμες πληροφορίες σε θέματα συναφή με αυτό. Κρατήσεις ξενοδοχείων, ενοικίαση αυτοκινήτου, αγορά αεροπορικών εισιτηρίων, μετατροπέας συναλλάγματος και άλλες πολλές θα είναι οι υπηρεσίες που θα παρέχει η τελική εφαρμογή στον χρήστη.
LOOK ‘N FEEL Ανάλαφρο, δροσερό, νεανικό ώστε να συνάδει απόλυτα με τα χαρακτηριστικά των ατόμων που αποτελούν το κοινό στόχευσης. Μια εφαρμογή με χιούμορ, λογοπαίγνια και με ένα tone voice πιο φιλικό, πιο άμεσο και πιο οικείο. Αυτό που θεωρώ πολύ σημαντικό είναι πως παρά την ανάλαφρη διάθεση που κυριαρχεί στο περιβάλλον της εφαρμογής, όφειλα με το σχεδιασμό μου να είμαι ακριβής και συνεπής στις ανάγκες του χρήστη ώστε να νιώθει ασφαλής με την επιλογή του.
026
TARGET GROUP Η εφαρμογή απευθύνεται σε: - άνδρες και γυναίκες ηλικίας 18-35 - μεσαίας-ανώτερης οικονομικής κατάστασης - εξοικειωμένοι στην χρήση έξυπνων κινητών - ανεξαρτήτως μορφωτικού επιπέδου - ανεξαρτήτως γεωγραφικού σημείου Γενικώς, θα απαντάει στις ανάγκες οποιουδήποτε ανθρώπου, που θέλει να οργανώσει ένα ταξίδι ή να αντλήσει αντίστοιχες πληροφορίες.
INFLUENCES Τον ρόλο της κύριας επιρροής μου έπαιξε η εφαρμογή KAYAK, η οποία ηγείται στον τομέα των travel apps, με εκατομμύρια χρήστες (σύμφωνα με τα downloads στα smartphones). Θέλησα λοιπόν, να προτείνω μια ανταγωνιστική υπηρεσία με περισσότερες παροχές και μια διαφορετική προοπτική στην διεπαφή με τον χρήστη.
027
03. Icon της εφαρμογής KAYAK
04. Splash screen, main scrren της εφαρμογής KAYAK
028
MARKET RESEARCH Μελέτησα όσες εφαρμογές κατάφερα να βρω με παραπλήσιο περιεχόμενο, όπως επίσης εφαρμογές αεροδρομίων, αεροπορικών εταιριών, αλλά και sites ευρέως διαδεδομένα τόσο για την ευχρηστία τους, τη λειτουργικότητά τους, όσο και για την αποτελεσματικότητα αυτών. Για παράδειγμα το booking.com, το tripadvisor.com, αλλά και από τα ελληνικά δεδομενα, sites όπως το airtickets.gr, το pamediakopes.gr και άλλα πολλά.
05. site: airtickets.gr
029
06. Icon της εφαρμογής tripadvisor
07. Σελίδα από το site: tripadvisor.co.uk
030
08. Icon της εφαρμογής booking.com
09. κεντρική σελίδα του site: booking.com
031
10. Icon της εφαρμογής pamediakopes
11. Σελίδα από το site: pamediakopes.gr
032
12. Icon της εφαρμογής Tripit
13. Οθόνες από την εφαρμογή Tripit
033
14. Icon της εφαρμογής του αεροδρομίου της Αθήνας
15. Splash screen και εσωτερική οθόνη της εφαρμογής του αεροδρομίου της Αθήνας
034
16. Icon της εφαρμογής της αεροπορικής εταιρίας AIRFRANCE
17. Main screen και εσωτερική οθόνη της εφαρμογής της αεροπορικής εταιρίας AIRFRANCE
035
18. Icon της εφαρμογής της αεροπορικής εταιρίας KLM
19. Main screen και εσωτερική οθόνη της εφαρμογής της αεροπορικής εταιρίας KLM
036
20. Icon της εφαρμογής της αεροπορικής εταιρίας easyJet
21. Main screen και εσωτερική οθόνη της εφαρμογής της αεροπορικής εταιρίας easyJet
037
22. Icon της εφαρμογής της αεροπορικής εταιρίας AEGEAN
23. Main screen και εσωτερική οθόνη της εφαρμογής της αεροπορικής εταιρίας AEGEAN
038
ΣΧΕΔΙΑΣΤΙΚΟΙ ΣΤΟΧΟΙ 1. Για αρχή ήθελα ο σχεδιασμός μου να απαντάει στις αρχές του Human Computer Interaction. 2. Το User Experience (η εμπειρία του χρήστη) να είναι όσο το δυνατόν πιο αποδοτικό. 3. Να φτιάξω μια εφαρμογή φιλική προς τον χρήστη, με εύκολη πλοήγηση, ενώ ταυτόχρονα ο σχεδιασμός να είναι “καθαρός”, με ένα όμορφο αισθητικά αποτέλεσμα, χωρίς να βασίζεται τόσο στην πεπατημένη σχεδιαστική προσέγγιση που συνήθως ακολουθούν όλες αυτές οι εφαρμογές.
ΜΕΘΟΔΟΣ-ΤΕΧΝΙΚΕΣ - Έρευνα - Καθορισμός δομής με χρήση flowchart. - προσχέδια στο χέρι (mockups) - Πειραματισμός στο User Experience - illustrator, photoshop - Καθορισμός look ‘n feel εφαρμογής - Δοκιμή - της κάθε οθόνης που θα σχεδιαστεί - σε πραγματική smartphone συσκευή (iphone5)
039
040
041
Βασικός Κορµός Εδώ, συγκεντώνονται οι βασικές λειτουργίες της εφαρμογής. Σκοπός είναι, ένα application που να απαντάει επαρκώς σε όσο το δυνατόν περισσότερες ανάγκες ενός χρήστη που θέλει να ταξιδέψει ή να αντλήσει, αντίστοιχου θέματος, πληροφορίες.
042
Οι λειτουργίες και οι παροχές της εφαρμογής balloon είναι ποικίλες. Θέλησα να φτιάξω μια εφαρμογή που να συνδυάζει όλα εκείνα που βρήκα χρήσιμα και ενδιαφέροντα κατά τη διάρκεια της μελέτης των υπαρχόντων travel applications. Συγκέντρωσα λοιπόν, όλες εκείνες τις λειτουργίες που μου φάνηκαν απαραίτητες και που ολοκλήρωναν την τελική εικόνα της εφαρμογής μου και κατέληξα μου και κατέληξα στον ακόλουθο βασικό κορμό:
043
ΚΑΤΗΓΟΡΙΑ
ΥΠΟΚΑΤΗΓΟΡΙΕΣ
Hotels
• search hotels around me • search (γενική αναζήτηση)
Flights
• • • • •
Cars
• pick up / drop off
Airports
• • • • •
Price Alert
• for flights • for cars • for hotels
Currency Concerter My bookings Login
044
search a flight book a ticket flight tracker rebooking airline directory
map transportation weather airport information extras (parking / hotels near me)
Στοιχεία πρωτοτυπίας / καινοτομίας - rebooking: σε περίπτωση που ο χρήστης χάσει την πτήση του, θα μπορεί να βρει την αμέσως επόμενη διαθέσιμη για τον προορισμό του ή ένα προσωρινό κατάλυμα έως ότου βρεθεί λύση. - airports: χρήσιμες πληροφορίες για το αεροδρόμιο κάθε χώρας, εσωτερικός χάρτης, σημεία parking, μέσα μεταφοράς από και πρός το αεροδρόμιο, διαθέσιμα καταστήματα κ.α. - price alerts: και αυτό αποτελεί ένα καινοτόμο στοιχείο, μιας και η εφαρμογή θα παρέχει τη δυνατότητα price alert, όχι μόνο για πτήσεις, αλλά και για ξενοδοχεία ή αυτοκίνητα. - Εντελώς νέα, σε σχέση με τις υπάρχουσες εφαρμογές, σχεδιαστική προσέγγιση και μια νέα μορφή περιήγησης και αλληλεπίδρασης με τον χρήστη.
045
Flowchart Μορφή διαγράμματος που αναπαριστά μια διαδικασία, παρουσιάζοντας τόσο τα βήματα αυτής, όσο και τον τρόπο με τον οποίο αυτά συνδέονται.
046
Flowchart Το στάδιο αυτό αποτελεί ένα από τα σημαντικότερα, μιας και με βοήθησε να αντιληφθώ το εύρος της εφαρμογής, αλλά και τον όγκο της δουλειάς που είχα μπροστά μου. Για το λόγο αυτό, πέρα από τα διαγράμματα που έφτιαξα στο χαρτί, χρησιμοποίησα τον τοίχο απέναντι από το γραφείο μου (συγνώμη μαμά!) για να ¨κοιτάζω¨την εφαρμογή μου κάθε μέρα! Άλλωστε ήξερα πως μαζί της θα πέρναγα πάρα πολλές ώρες για τους επόμενους δύο μήνες.
047
24. Φυσική αναπαράσταση του flowchart της εφαρμογής Balloon
Sitemap Ακολουθεί ο αναλυτικός χάρτης της εφαρμογής. Στο σχεδιασμό μου αργότερα, ασχολήθηκα με τις βασικότερες λειτουργίες λόγω χρόνου κυρίως, αλλά και επειδή η συνέχεια θα ήταν παρόμοια και στο αντίστοιχο μοτίβο.
treasure here
050
HOTELS
CARS
BACK
SEARCH CARS
FLIGHTS
BACK
ONE WAY
ROUND TRIP
BOOK A TICKET
SEARCH A FLIGHT
BACK
FLIGHT DETAILS
CURRENCY CONVERTER
FLIGHT TRACKER
REBOOKING
AIRLINE DIRECTORY
BACK
BACK BACK
HOTELS NEAR ME
SEARCH HOTELS
BOOK A SEND BACK TICKET DETAILS VIA BACK
BACK
DISTANCE FRO CITY CENTER
LOGIN CONTINUE AS A GUEST EMAIL
LOGIN CONTINUE AS A GUEST
BACK BACK
BACK
PAYMENT
OK!
OOPS!
FIND HOTEL/ FOOD AROUND ME NOW
REBOOK NOW
CONTACT AIRLINE COMPANY POPULAR
SEARCH AVAILIABLE FLIGHTS
OOPS! HOME
HOME
GO BACK
ALL
AUTOBOOK (for the next availiable flight of my destination)
STARRED SEARCH BACK
GO BACK HOME
HOME
SMS
PAYMENT
OK!
MAP
BACK
MAKE ANOTHER BOOKING
MAKE ANOTHER BOOKING
BACK
SEARCH A FLIGHT
RECENT SEARCHES
051
052
053
Λογότυπο Έψαχνα κάτι που να συνάδει απόλυτα με το ύφος της εφαρμογής. Δοκίμασα διάφορα, επειδή όμως υπήρχε το ρίσκο, το αποτέλεσμα να βγει παιδικό, κατέληξα πως ήθελα το λογότυπο μου να είναι απλό και μίνιμαλ. Στο υποκεφάλαιο αυτό, παρουσιάζω κάποια προσχέδια του λογοτύπου.
HOT AIRHOST since 1984
054
055
056
Balloon
o o 057
Balloon
058
Balloon
059
Mockups Στη γλώσσα του σχεδιασμού, με τον όρο αυτό αναφερόμαστε σε μοντέλα, σε full size κλίμακα ή και όχι, μιας συσκευής με σκοπό την επίδειξη, την προώθηση ή την αξιολόγηση του σχειδασμού1. 1. πηγή: http://en.wikipedia.org/wiki/Mockup
060
Με το ύφος της εφαρμογής πίστευα πως είχα τελειώσει. Ήξερα πως το αποτέλεσμα ήθελα να είναι νεανικό, με χιούμορ, παιχνιδιάρικο. Πώς όμως γίνεται η μετάβαση από το μυαλό στο χαρτί; Και ακόμα πιο σοβαρά, πώς γίνεται η μετάβαση από το χαρτί στο photoshop; Η πρόκληση είναι να καταφέρεις να φτιάξεις ακριβώς αυτό που φανταζόσουν. Μια εφαρμογή δηλαδή που να επικοινωνεί στο χρήστη όλα εκείνα που θέλεις να πεις. Προβληματίστηκα αρκετά με τα χρώματα, με το στυλ, με το αν ο σχεδιασμός μου θα ήταν flat ή στα όρια του σκευομορφισμού2. Όλα αυτά τα ερωτήματα σίγα σίγα απαντήθηκαν.
2. Σκευομορφισμός: Μια συνειδητή, σχεδιαστική
επιλογή
για
την
μορφή και την κατασκευή ενός νέου αντικειμένου, ούτως ώστε το αντικείμενο αυτό να μιμείται φυσικές ιδιότητες στην μορφή και στο σχήμα που δεν εξυπηρετούν πρακτικoύς σκοπούς , αλλά το κάνουν να μοιάζει με κάποιο άλλο αντικείμενο που μας είναι ήδη οικείο. πηγή:http://www.freshtech.gr/ti-ineo-skevomorfismos-ke-giati-prepi-na-
Ξεκίνησα με τα mockups. Ειλικρινά ήταν η πρώτη φορά που αντιλήφθηκα τόσο έντονα αυτό που όλοι οι καθηγητές μας έλεγαν τόσα χρόνια για το πόσο μα πόσο σημαντικά είναι τα προσχέδια στο χέρι. Σα διαδικασία με βοήθησε απίστευτα και οφείλω ένα ακόμα ευχαριστώ στο δάσκαλο μου, κύριο Μελέτη, που επέμεινε τόσο στο στάδιο αυτό. Παρακάτω παρατίθενται τα προσχέδια με τα οποία ξεκίνησα στο χαρτί:
exafanisti-apo-ta-kinita-mas/727
061
screen
Splash ns scree
προσχέδιο 1
062
project
Balloon app
προσχέδιο 2 µπαλόνια µε ελαφρία κίνηση πάνω-κάτω
iPhone 5 60% scale
προσχέδιο 3
project
iPhone 5 60% scale
προσχέδιο 4α το µπαλόνι ανεβαίνει σιγά σιγά προς τα πάνω
screen
Balloon app
προσχέδιο 4β
Splash ns scree
προσχέδιο 4γ
063
screen
Splash ns scree
προσχέδιο 5
064
project
Balloon app
προσχέδιο 6 µπαλόνια µε ελαφρία κίνηση πάνω-κάτω
iPhone 5 60% scale
προσχέδιο 7
project
iPhone 5 60% scale
προσχέδιο 8α µπαλόνι που φουσκώνει σιγά σιγά και εµφανίζεται το λογότυπο
screen
Balloon app
προσχέδιο 8β
Splash ns scree
προσχέδιο 8γ
065
screen
Splash ns scree
προσχέδιο 9
066
project
Balloon app
προσχέδιο 10
iPhone 5 60% scale
προσχέδιο 11
project
iPhone 5 60% scale
Balloon app
screen
Main eens scr
Main Screens: Στην οθόνη αυτή δούλεψα αρκετά. Είναι μια οθόνη ιδιαίτερης σημασίας μιας και είναι πρώτη με την οποία, ουσιαστικά, έρχεται ο χρήστης σε επαφή. Είναι η οθόνη εκείνη που θα προδιαθέσει τον τελευταίο αρνητικά ή θετικά στι περιβάλλον της εφαρμογής. Οφείλει λοιπόν να είναι ιδιαίτερη ή ακόμα και εντυπωσιάκη ώστε να κρατήσει το ενδιαφέρον του χρήστη. Καθώς ήταν η πρώτη φορά που ασχολιόμουν με το σχεδιασμό μιας smartphone εφαρμογής, φοβόμουν να τολμήσω κάτι πρωτότυπο. Πίστευα πως ήταν υπεραρκετό να προσεγγίσω τα συνήθη, γι’ αυτό και τα πρώτα μου προσχέδια ήταν πιο στατικά, πιο “διστακτικά”. Θυμάμαι το μέιλ του κύριου Μελέτη: “Πολύ ωραία Κατερίνα, πάμε για κάωτι πιο δυνατό, πιο πρωτότυπο”. Έτσι βγήκαν ακόμα δώδεκα οθόνες από τις οποίες προήλθε και η τελική επιλογή.
προσχέδιο 1
067
screen
Main eens scr
project
Balloon app
iPhone 5 60% scale
vertical scrolling
προσχέδιο 2
068
προσχέδιο 3
προσχέδιο 4
project
iPhone 5 60% scale
screen
Balloon app
Main eens scr
vertical scrolling
προσχέδιο 5
προσχέδιο 6
προσχέδιο 7
069
screen
Main eens scr
προσχέδιο 8
070
project
Balloon app
προσχέδιο 9
iPhone 5 60% scale
προσχέδιο 10
project
iPhone 5 60% scale
προσχέδιο 11
screen
Balloon app
προσχέδιο 12
Main eens scr
προσχέδιο 13
071
screen
Main eens scr
project
Balloon app
iPhone 5 60% scale
horizontal scrolling
προσχέδιο 14 Άπαξ και πατηθεί κάποιο κουµπί, θα ανοίγει σαν κουρτίνα και θα εµφανίζεται το µενού της αντίστοιχης επιλογής
072
προσχέδιο 15
προσχέδιο 16
project
iPhone 5 60% scale
προσχέδιο 17 Οι επιλογές θα εµφανίζονται πάνω σε χάρτη σαν spots
screen
Balloon app
προσχέδιο 18 Το κεντρικό κουµπί είναι ένας περιστρεφόµενος διακόπτης
Main eens scr
προσχέδιο 19 Το ένα χαρτί θα διαδέχεται το άλλο µε scroll
073
screen
project
Main eens scr
Balloon app
iPhone 5 60% scale
horizontal scrolling
προσχέδιο 20 Όλα θα βρίσκονται σε ελλειπτική τροχιά (µικρότερα στο φόντο και θα µεγαλώνουν καθώς πλησιάζουν)
074
προσχέδιο 21 Η λέξη hotel και η κάθε αντίστοιχη, θα κάνει µια πλήρη περιστροφή και θα καταλήγει στην αρχική θέση (κατα τα άλλα, όµοιο µε το 20)
προσχέδιο 22
project
iPhone 5 60% scale
προσχέδιο 23
screen
Balloon app
προσχέδιο 24
Main eens scr
προσχέδιο 25
075
screen
ικές ρ ε τ ω σ Ε οθόνες
project
Balloon app
iPhone 5 60% scale
vertical scrolling
προσχέδιο 1 εσωτερικη οθόνη για τη main screen 18
076
προσχέδιο 2 εσωτερικη οθόνη για τη main screen 18
προσχέδιο 3 εσωτερικη οθόνη για τη main screen 18
project
iPhone 5 60% scale
screen
Balloon app
ικές ρ ε τ ω σ Ε οθόνες
vertical scrolling
προσχέδιο 4 εσωτερικη οθόνη για τη main screen 16
προσχέδιο 5 εσωτερικη οθόνη για τη main screen 16
προσχέδιο 6 εσωτερικη οθόνη για τη main screen 18
077
screen
flights
book a flight 1a
078
project
Balloon app
book a flight 1b
iPhone 5 60% scale
book a flight 2a select your travel dates
project
iPhone 5 60% scale
book a flight 2b select your travel dates
screen
Balloon app
book a flight 3 your order
flights
book a flight 4 personalize
079
screen
flights
book a flight 5 payment
080
project
Balloon app
ok!
iPhone 5 60% scale
Oops!
project
screen
Balloon app
iPhone 5 60% scale
search a flight
flight tracker 1a
flights
flight tracker 1b
σε στέλνει στο βήµα 3 του book a flight
081
screen
flights
flight tracker 2
082
project
Balloon app
flight tracker 3
iPhone 5 60% scale
airline directory 1a
project
iPhone 5 60% scale
airline directory 1b
screen
Balloon app
airline directory 2
flights
rebooking
083
Wireframes Για τις οθόνες που καταλήξαμε, αλλά και για τις εσωτερικές αυτών, επόμενο βήμα ήταν τα wireframes. Η εφαρμογή σίγα σίγα στηνόταν. Παρακάτω παρατίθενται κάποια από αυτά.
084
splash screen
main screen
εσωτερική flights
085
εσωτερική cars
086
εσωτερική hotels
Oops!
εσωτερική flights
λίστα flights
login
087
Προσχέδια Αφού πλέον είχα καταλήξει στο πως θα ήταν οι οθόνες μου, ήρθε η ώρα για photoshop. Πειραματίστηκα αρκετά με το χρώμα, το στυλ και τις υφές στη βασική μου οθόνη, θέλοντας να βγάλω ένα αποτέλεσμα φωτεινό, με έντονα χρώματα και αντιθέσεις. Ένα interface χαρούμενο, καθαρό και σαφές.
088
προσχέδιο 1
προσχέδιο 2
προσχέδιο 3
089
προσχέδιο 4
090
προσχέδιο 5
προσχέδιο 6
προσχέδιο 7
προσχέδιο 8
προσχέδιο 9
091
προσχέδιο 10
092
προσχέδιο 11
προσχέδιο 12
προσχέδιο 13
προσχέδιο 14
προσχέδιο 15
093
προσχέδιο 16
094
προσχέδιο 17
προσχέδιο 18
Δουλεύοντας για αρκετό καιρό πανω στα προσχέδια, διαπίστωσα πως σημασία είχε η μελέτη πριν την υλοποίηση, η διεργασία πριν καν ανοιξεις το photoshop (κατί στο οποίο είχα καταλήξει και στην ερευνητική μου, όσον αφορά στον digital σχεδιασμό). Χρειάζεται χρόνο για να βρεις το σωστό ύφος, το πιο αποδωτικό στήσιμο μιας οθόνης, εκείνο που θα καταφέρνει ταυτόχρονα να είναι καλαίσθητο αλλά και λειτουργικό. Οφείλεις στον χρήστη μία μελέτη που θα καταστήσει το περιβάλλον της εφαρμογής ευχάριστο αλλά και απόλυτα συνεπές στις ανάγκες του. Για τους λόγους αυτούς, η όλη αυτή διαδικασία απορρόφησε τα δύο τρίτα του χρόνου μου.
095
096
097
The App
(προσχέδια)
Εδώ παρουσιάζονται τα προσχέδια της τελικής ιδέας για την εφαρμογή.
JOB APPLICATION FORM apply here
098
Όταν ήρθε η ώρα να αποφασίσω, συνειδητοποίησα πως δεν είχα βρει αυτό που ήθελα. Κατέληξα λοιπόν σε κάτι που μου άρεσε από την αρχή αλλά δεν το είχα τολμήσει. Μια πιο flat προσέγγιση με πληθώρα χρωμάτων. Σκεφτόμουν, πώς μπορεί να βγει ένα καλό αποτέλεσμα χωρίς γυαλιστερά κουμπιά ή χωρίς κάποιο φόντο με έντονη υφή; Πήρα όμως την απόφαση, επηρεασμένη από μια προσέγγιση που είδα στο behance για τη nike. Και τελικώς, είμαι πολύ χαρούμενη με το αποτέλεσμα μιας και είναι κάτι που με αντιπροσωπεύει. Παρακάτω, θα αναπτύξω την εφαρμογή balloon, παρουσιάζοντας κάποια προσχέδια και τις πιο βασικές οθόνες της.
099
screen
top bars
project
Balloon app
τα δύο “ο” του λογοτύπου
100
iPhone 5 προσχέδια
project
iPhone 5 προσχέδια
splash scrεen 1α
Balloon app
splash scrεen 1b
screen
splash screens
splash scrεen 1c
101
screen
splash screens
splash scrεen 2
102
project
Balloon app
splash scrεen 3
iPhone 5 προσχέδια
splash scrεen 4
project
iPhone 5 προσχέδια
screen
Balloon app
main scrεen 4
main screens
main scrεen 4
Από την αρχή ήξερα πως θα ήταν οι βασικές μου οθόνες, γι’ αυτό και οι τελικές δεν έχουν μεγάλες αλλαγές
103
screen
κές εσωτερι οθόνες
εσωτερική οθόνη 1
104
project
Balloon app
εσωτερική οθόνη 2
iPhone 5 προσχέδια
εσωτερική οθόνη 3
project
iPhone 5 προσχέδια
εσωτερική οθόνη 4
Balloon app
εσωτερική οθόνη 5
screen
κές εσωτερι οθόνες
εσωτερική οθόνη 6
105
screen
pop up menu
pop up 1
106
project
Balloon app
pop up 2
iPhone 5 προσχέδια
pop up 3
project
iPhone 5 προσχέδια
pop up 4
screen
Balloon app
pop up 5
pop up menu
pop up 6
107
screen
project
et
ck book a ti βήμα 4
βήμα 4α
108
Balloon app
βήμα 4β
iPhone 5 προσχέδια
βήμα 4γ
project
iPhone 5 προσχέδια
Balloon app
screen
ket
c book a ti βήμα 4
βήμα 4δ κατέληξα σε μια πιο απλή μορφή για τα κουμπιά
109
screen
top bars
project
Balloon app
The App Εδώ παρουσιάζονται οι τελικές οθόνες της εφαρμογής.
JOB APPLICATION FORM apply here
110
iPhone 5 προσχέδια
(τελικές οθόνες)
project
iPhone 5 τελικά
Balloon app
screen
splash screen
111
screen
project
Balloon app
flights
iPhone 5 τελικά
horizontal scrolling
πρόσεξα ιδιαίτερα τις σκιές, το κεντρικό κουμπί μου αλλά και όλο το ύφος της οθόνης αυτής, μιας και είναι η πρώτη με την οποία έρχεται σε επαφή ο χρήστης
112
project
iPhone 5 τελικά
Balloon app
screen
flights
113
screen
project
Balloon app
flights
TICKET
...........
τα icons
iPhone 5 τελικά
AHA!
η πρώτη εωτερική μετά τη main screen
FLIGHT CANCELLED
114
project
Balloon app
iPhone 5 τελικά
book a ticket βήμα 1 (round trip)
screen
flights
book a ticket βήμα1 (one way trip)
115
screen
project
flights
Balloon app
iPhone 5 τελικά
λεπτομέριες
vertical scrolling
book a ticket βήμα 2
116
project
iPhone 5 τελικά
Balloon app
screen
flights
λεπτομέριες
book a ticket βήμα 3
117
screen
flights
project
Balloon app
pop up menu ο χρήστης πρέπει να επιλέξει πως θα συνεχίσει
118
iPhone 5 τελικά
pop up menu ο χρήστης έχει επιλέξει το log in
project
iPhone 5 τελικά
screen
Balloon app
flights
βήμα 4
βήμα 4 αν ο χρήστης έχει επιλέξει: continue as a guest
119
screen
flights
project
Balloon app
βήμα 5
120
iPhone 5 τελικά
project
iPhone 5 τελικά
screen
Balloon app
ok! η οθόνη που εμφανίζεται αν η πληρωμή ολοκπηρωθεί με επιτυχία
flights
Oops! η οθόνη που εμφανίζεται αν η πληρωμή δεν ολοκπηρωθεί με επιτυχία
121
screen
project
Balloon app
cars
iPhone 5 τελικά
horizontal scrolling
και εδώ ήμουν ιδιαίτερα προσεκτική, μιας και οι βασικές οθόνες είναι αυτές που θα χαρακτηρίσουν το περιβάλλον τις εφαρμογής θετικά ή αρνητικα
122
main screen για την επιλογή cars
εσωτερική για την επιλογή cars
project
iPhone 5 τελικά
Balloon app
screen
hotels
123
screen
project
top bars
Balloon app
iPhone 5 προσχέδια
ήθελα το ύφος να είναι ανάλαφρο, χιουμοριστικού χαρακτήρα, πάντα με προσοχή στις λεπτομέριες και στο συνολικό look ‘n feel
main screen για την επιλογή hotels
horizontal scrolling
124
hotels βήμα 1
project
iPhone 5 προσχέδια
Balloon app
screen
flights
125
screen
project
Balloon app
hotels
iPhone 5 τελικά
vertical scrolling
hotels βήμα 2 hotels βήμα 3 (πατημένο το κουμπί book)
126
project
iPhone 5 τελικά
Balloon app
screen
hotels
vertical scrolling for the info
horizontal scrolling for the photo
hotels βήμα 3 (πατημένο το κουμπί photos)
127
screen
project
filters
Balloon app
iPhone 5 τελικά
προς τα πάνω filters βήμα 1
128
filters βήμα 2
project
iPhone 5 τελικά
Balloon app
screen
filters
τα φίλτρα θα είναι ίδια σε κάθε οθόνη που χρειάζεται, απλά θα αλλάζει το χρώμα ανάλογα με την επιλογή στην οποία βρισκόμαστε
εδώ είναι πατημένη η επιλογή: κατάταξη
filters βήμα 3 τα icons με προβλημάτισαν αρκετά, μιας και τα ήδη υπάρχοντα για τα φίλτρα ή την κατάταξη δεν τα θεώρησα ιδιαίτερα αντιπροσωπευτικά
129
screen
project
loading
loading στην επιλογή flights
130
Balloon app
iPhone 5 τελικά
loading στην επιλογή cars
project
iPhone 5 τελικά
Balloon app
screen
loading
η οθόνη αυτή θα εμφανίζεται κάθε φορά που η εφαρμογή φορτώνει στοιχεία
loading στην επιλογή hotels
131
screen
loading
loading βήμα 1
project
Balloon app
loading βήμα 2
κατά τη διάρκεια της φόρτωσης, οι βαλίτσες βρίσκονται σε κίνηση πάνω στο διάδρομο
132
iPhone 5 τελικά
loading βήμα 3
project
iPhone 5 τελικά
screen
Balloon app
flights
rebooking (πρώτη εσωτερική της επιλογής rebooking)
133
screen
login
project
Balloon app
iPhone 5 τελικά
vertical scrolling
η οθόνη αυτή εμφανίζεται όταν ο χρήστης πατήσει “login” σε μία από τις βασικές οθόνες
134
project
iPhone 5 τελικά
Balloon app
screen
flights
135
136
137
Info
138
139
Balloon App
140
141
142
143
144
145
Make everything ok and travel on!
146
147
148
149
Slow down and travel on!
150
151
152
Enjoy life and travel on!
153
thank you!