Εφαρμογή ιστού Instagram: Μερικά Tweaks

Μια ανάλυση βάσει σχεδίασης του Instagram Web UI και πιθανές προτάσεις για τη βελτίωσή του.

ΣΗΜΕΙΩΣΗ: Αυτή η έρευνα σχεδιασμού πραγματοποιήθηκε πέρυσι στο πλαίσιο μιας πρωτοβουλίας έργου. Οι διάφορες προτάσεις που δόθηκαν θα μπορούσαν ενδεχομένως να έχουν ενημερωθεί στην εφαρμογή Instagram. Αυτό το άρθρο δημιουργήθηκε με σκοπό την επισήμανση της αναλυτικής διαδικασίας σχεδιασμού.

Η επισκόπηση

Το Instagram είναι ένα εκπληκτικό κοινωνικό δίκτυο που επιτρέπει στους χρήστες να μοιράζονται φωτογραφίες μεταξύ τους για να δημιουργήσουν μια εξαιρετική εμπειρία. Είναι μια δελεαστική κοινωνική πλατφόρμα που προσελκύει κάθε είδους κοινό από εφήβους κανονικής ημέρας έως φωτογράφους έως γνωστές διασημότητες, καθώς υπάρχει πάντα μια στιγμή για όλους να μοιράζονται στο δίκτυο. Ωστόσο, πολλές από τις λειτουργίες που είναι διαθέσιμες στην εφαρμογή για κινητά Instagram δεν είναι προσβάσιμες στην έκδοση ιστού. Η έλλειψη λειτουργικότητας στην έκδοση ιστού οδήγησε την ομάδα σχεδιασμού μου και εγώ να προτείνω διάφορες τροποποιήσεις που θα μπορούσαν να βοηθήσουν να κάνω την εφαρμογή περισσότερο «Instagram».

Ο λόγος

Όντας μέρος σε ένα περίτεχνο μάθημα σχεδιασμού που μας ενημέρωσε για τους διάφορους ανθρώπινους παράγοντες που διακρίνονται στο σχεδιασμό (Αρχές Σχεδιασμού Οθόνης, Εννοιολογικό Μοντέλο, Ανάλυση Κινδύνου, Ανάλυση Δέντρων Σφάλματος κ.λπ.) μας έπληξε να εργαστούμε για τον επανασχεδιασμό ενός προϊόντος που θεωρήσαμε ενδιαφέρον και σχετικά με την καθημερινή μας ζωή. Όλοι αναγνωρίσαμε παρόμοιες εμπειρίες αντιμετώπισης προβλημάτων στην εφαρμογή ιστού Instagram και αναγνωρίσαμε την ανάγκη εργασίας για επανασχεδιασμό.

Βασικά προβλήματα

Πολλά από τα προβλήματα που εντοπίστηκαν στην εφαρμογή Ιστού είναι σύμφωνα με τις αρχές ευχρηστίας Nielsen και τις αρχές χρηστικότητας του Norman για αποτελεσματικά σχέδια. Τα προβλήματα που εντοπίστηκαν έχουν κατηγοριοποιηθεί σε αντίστοιχους τομείς όσον αφορά το ρόλο τους στην εφαρμογή. Τα πιο αξιοσημείωτα είναι τα θέματα που σχετίζονται με τη λειτουργία και την ασφάλεια.

NUH - Nielsen's Ευχρηστία Heuristics NUP - Norman's Usability Principles

  • Υπάρχουν σημαντικές βασικές λειτουργίες βασισμένες στο χρήστη που δεν είναι διαθέσιμες στην πλατφόρμα ιστού, συμπεριλαμβανομένων της μεταφόρτωσης φωτογραφιών, των άμεσων μηνυμάτων, της σελίδας εξερεύνησης και των ετικετών αναζήτησης που σχετίζονται με την εφαρμογή για κινητά. (Σχετικά με τα χαρακτηριστικά) NUH: Συνοχή και πρότυπα
  • Οι αναρτήσεις βίντεο στην πλατφόρμα δεν επιτρέπουν στους χρήστες να αρέσουν το βίντεο στον καμβά παρόμοιο με εικόνες που οδηγούν σε έλλειψη συνοχής μεταξύ του περιεχομένου και της δυνατότητας να το αρέσει. (Σχετικά με τα χαρακτηριστικά) NUH: Ευελιξία και αποτελεσματικότητα χρήσης NUP: Συνέπεια
  • Η ίδια η εφαρμογή είναι πολύ μινιμαλιστική υπό την έννοια ότι το περιεχόμενο είναι πολύ μικρό σε σχέση με το μέγεθος της οθόνης. (Σχετικά με τη διάταξη)
  • Οι λογαριασμοί χρηστών είναι δημόσιοι από προεπιλογή και δεν υπάρχει διαθέσιμη ρύθμιση απορρήτου στην εφαρμογή ιστού (σχετικά με την ασφάλεια) NUH: Έλεγχος χρήστη και ελευθερία NUP: Περιορισμοί
  • Το API του Instagram καθιστά διαθέσιμα δεδομένα χρηστών στο κοινό τα οποία θα μπορούσαν να είναι επιβλαβή σε περίπτωση κλοπής ταυτότητας, πλαστοπροσωπίας κ.λπ. Τα τελικά σημεία δεν είναι ασφαλή και μπορούν να επιτρέψουν τη διαγραφή των υπαρχόντων δεδομένων χρήστη (σχετικά με την ασφάλεια)
  • Η εφαρμογή ιστού δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης. Συγκεκριμένα, οι χρήστες στον Internet Explorer. (Σχετικά με τη συμβατότητα) NUH: Συνοχή και πρότυπα
  • Όσον αφορά το περιβάλλον χρήστη, η γραμμή πλοήγησης δεν καθορίζεται κατά την κύλιση του χρήστη, η οποία απαιτεί από τους χρήστες να κάνουν κύλιση μέχρι την κορυφή για να χρησιμοποιήσουν τη γραμμή πλοήγησης, εάν απαιτείται. (Σχετικά με τα χαρακτηριστικά) NUH: Ευελιξία & αποτελεσματικότητα χρήσης NUP: Χαρτογράφηση
  • Οι χρήστες δεν ειδοποιούνται όταν αλλάζουν την εικόνα του προφίλ τους. Αντ 'αυτού, υπάρχει καθυστέρηση στην απόκριση και οι χρήστες πρέπει να ανανεώσουν τη σελίδα για να παρακολουθήσουν μια αλλαγή στην εικόνα προφίλ τους. (Σχετικά με τη λειτουργία) NUH: Ορατότητα κατάστασης συστήματος NUP: Σχόλια
  • Οι χρήστες δεν μπορούν να επεξεργαστούν σχόλια που δημοσιεύουν (Σχετικά με την απόδοση) NUH: Έλεγχος χρήστη & Ελευθερία NUP: Περιορισμοί

Συγκριτική Ανάλυση Αρχών Σχεδιασμού

Πραγματοποιήθηκε συγκριτική ανάλυση των μοναδικών ροών εργασιών εντός της εφαρμογής ιστού Instagram και της συμμόρφωσής της με τις αρχές του Norman ή / και του Nielsen. Η εφαρμογή αξιολογείται αρχικά και στη συνέχεια δίνεται βαθμός επιτυχίας / αποτυχίας για συμμόρφωση οδηγώντας σε περαιτέρω σχόλια και εάν υπάρχει αντιστοιχία ή σύγκρουση τόσο με τις ευρετικές όσο και με τις αρχές.

# 1 Δίκαιη χρήση

Αξιολόγηση: Μιλήστε τη γλώσσα των χρηστών, πολλές γλώσσες. Ακολουθεί τάσεις από άλλους ιστότοπους

Συνολικά: Περάστε

Σχόλια: Συνεχής ενημέρωση και συγχρονισμός με την εφαρμογή για κινητά

Αγώνες: Προσφέρει πολλές γλώσσες. Ακολουθεί συμβάσεις πραγματικού κόσμου

# 2 Ευελιξία στη χρήση

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

Συνολικά: Περάστε

Σχόλια: Σταθερό χρώμα και ταιριάζει με το βασικό του προϊόν (Instagram για κινητά)

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

# 3 Απλό και διαισθητικό

Αξιολόγηση: Κάνει καλή δουλειά στο να είσαι διαδραστικός. Οι χρήστες δεν ενημερώνονται για τυχόν υποκείμενα ζητήματα backend.

Συνολικά: Αποτυχία

Σχόλια:

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

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

# 4 Αντιληπτές πληροφορίες

Αξιολόγηση: Δεν χρησιμοποιεί διαφορετικούς τρόπους για περιττές πληροφορίες. Μεγιστοποιεί την αναγνωσιμότητα για κρίσιμες πληροφορίες

Συνολικά: Αποτυχία

Σχόλια: Δεν παρέχει επιλογή για χρήστες με περιορισμένη ορατότητα

Συγκρούσεις: Ο χρήστης δυσκολεύεται να βρει σαφώς επισημασμένες συγκρούσεις

# 5 Ανοχή για σφάλμα

Αξιολόγηση: Ο σχεδιασμός δεν επιτρέπει στους χρήστες να αναιρούν λάθη μέσω διαισθητικών λειτουργιών στην εφαρμογή

Συνολικά: Αποτυχία

Σχόλια: Δεν διαθέτει τρόπους για να επεξεργαστείτε το δημοσιευμένο σχόλιο. Αναγκάστηκε να το διαγράψει πριν από την αναδημοσίευση.

Σύγκρουση: Δεν παρέχει προειδοποιήσεις ή κινδύνους και σφάλματα

# 6 Χαμηλή φυσική προσπάθεια

Αξιολόγηση: Η εφαρμογή Ιστού δεν απαιτεί από τους χρήστες να επενδύσουν πολλή σωματική προσπάθεια για καλή χρήση

Συνολικά: Περάστε

Σχόλια: Μικρή έως καθόλου σωματική προσπάθεια για τη χρήση της εφαρμογής

Ταίριασμα: Απαιτούν μόνο οι χρήστες να χρησιμοποιούν χειρονομίες χεριών (ποντίκι, trackpad)

# 7 Μέγεθος και χώρος για προσέγγιση και χρήση

Αξιολόγηση: Το μέγεθος και ο χώρος είναι περισσότερο από επαρκείς για χρήστες σε ευρεία κλίμακα μεγέθους οθόνης. Ο ιστότοπος δεν ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης

Συνολικά: Αποτυχία

Σχόλια: Η ροή Instagram μεσαίου διαστήματος είναι απλοϊκή και εστιασμένη

Ταίριασμα: Το μέγεθος και ο χώρος αξιολογήθηκαν ομοίως για τον μινιμαλιστικό σχεδιασμό και των δύο αξιολογήσεων

HTA (Ιεραρχική ανάλυση εργασιών)

Κατά την ανάλυση της ιστοσελίδας, πραγματοποιήθηκε ένα HTA για να δείξει μια επισκόπηση υψηλού επιπέδου των διαφόρων εργασιών που εμπλέκονται στην υποτιθέμενη χρήση της εφαρμογής. Δεν υποστηρίζονται διάφορες εργασίες κατά τη χρήση της εφαρμογής Instagram που είναι βασικές για την έκδοση για κινητά και οδηγούν σε αποκλεισμούς κατά την ολοκλήρωση της εργασίας. Αυτή η μέθοδος χρησιμοποιήθηκε για να παρέχει στους αναγνώστες τη γενικευμένη επισκόπηση των διαφόρων εργασιών στην εφαρμογή Instagram και των ζητημάτων στον τομέα. Τα διάφορα βασικά προβλήματα που αναφέρθηκαν παραπάνω μπορούν να θεωρηθούν ως εμπόδια σε συγκεκριμένες εργασίες που εκτελούν οι χρήστες. Ως εκ τούτου, η συνολική εμπειρία χρήστη επηρεάζεται αρνητικά για όσους αναμένουν ότι η εφαρμογή ιστού θα διατηρήσει τη συνέπεια με την εφαρμογή για κινητά.

Διάγραμμα HTA που αναλύει τη βασική χρήση μιας εφαρμογής Instagram και των προβλημάτων που αποκλείουν διάφορους χρήστες / εργασίες (με πράσινο χρώμα)

Προτεινόμενη λύση

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

Αλλαγές που σχετίζονται με την ασφάλεια

Για ζητήματα ασφαλείας που εντοπίζονται στην εφαρμογή, οι λύσεις θα περιλαμβάνουν:

  • Παροχή ρύθμισης απορρήτου στον σύνδεσμο «Επεξεργασία προφίλ» για «Πληροφορίες απορρήτου»
  • Για διάφορα ζητήματα κλοπής που σχετίζονται με το API και την ενσωμάτωσή του, θα ήταν καλύτερα να περιορίσετε το τελικό σημείο για να παρέχετε περιορισμένα δεδομένα προκειμένου να διατηρήσετε την ταυτότητα του χρήστη.

Αλλαγές που σχετίζονται με χαρακτηριστικά

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

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

Ενημέρωση εικόνας προφίλ:

Η δυνατότητα αλλαγής εικόνας προφίλ (PP) στην εφαρμογή Instagram είναι καθυστερημένη και δεν ρέει σωστά. Μέσα στον επανασχεδιασμό, αποφασίσαμε να συμπεριλάβουμε τη λειτουργικότητα της αλλαγής εικόνας κατά την τοποθέτηση του PP στη σελίδα προφίλ.

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

Εξερεύνηση / Ανακάλυψη σελίδας:

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

Μετά: Στη σελίδα Εξερεύνηση δόθηκε η παραδοσιακή σχεδίαση με βάση τα πλακίδια για να διατηρηθεί η συνέπεια με την εφαρμογή για κινητά. Κάνοντας κλικ σε πλακίδια, εμφανίζεται ένα αναδυόμενο παράθυρο που παρέχει μια μεγαλύτερη προβολή της ανάρτησης με το σύνδεσμο χρήστη, τις επισημάνσεις "μου αρέσει" και τα σχόλια. Επιπλέον, το εικονίδιο χρήστη που βρίσκεται στη γραμμή πλοήγησης έχει τη δυνατότητα να ανοίξει σε ένα αναπτυσσόμενο μενού με κλικ για την επιλογή αποσύνδεσης. Η σελίδα εξερεύνησης θα παρέχει αναρτήσεις και βίντεο προτεινόμενων λογαριασμών που σχετίζονται με τον λογαριασμό χρήστη.

Αναπτυσσόμενο Αποτελέσματα Αναζήτησης / Μου αρέσει

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

Μετά: Το μήκος του αναπτυσσόμενου μενού αυξήθηκε για να ανταποκριθεί στις αναλογίες μεγέθους οθόνης και επιτρέποντας στους χρήστες να βλέπουν δραστηριότητες σε ένα μεγαλύτερο κοντέινερ. Ένα μειονέκτημα με αυτήν την πρόταση είναι ότι το αναπτυσσόμενο μενού καλύπτει μεγάλο μέρος της σελίδας, κόβοντας αναρτήσεις στο παρασκήνιο. Εάν το αναπτυσσόμενο μήκος μειώθηκε στο 70% περίπου του προτεινόμενου μεγέθους του, θα επιτρέπει την ανάγνωση των ειδοποιήσεων χωρίς να παρεμποδίζεται η εμφάνιση του περιεχομένου του φόντου. Επιπλέον, το αναπτυσσόμενο μενού θα μπορούσε να μετακινηθεί προς τα αριστερά για να χρησιμοποιήσει τους κενούς χώρους που περιβάλλουν το περιεχόμενο και να κάνει το υποκείμενο περιεχόμενο πιο ορατό.

συμπέρασμα

Όντας μια γενικευμένη έρευνα σχεδιασμού της εφαρμογής ιστού του Instagram, μπόρεσα να χρησιμοποιήσω αποτελεσματικά πολλές αναλυτικές μεθόδους για να προσδιορίσω τα διάφορα θέματα που σχετίζονται με τη λειτουργία και την ασφάλεια στο σύστημα που επηρεάζουν τη χρηστικότητά του. Στο μέλλον, θα ήθελα να διερευνήσω μετρήσεις ποσοτικών δεδομένων από δείγματα χρηστών και να αναλύσω προϊόντα από μια βαθύτερη και στρογγυλή προοπτική. Δεδομένου ότι η ομάδα σχεδιασμού μας αποτελείται από πέντε άτομα, θα ήταν μάλλον βιώσιμο να δοκιμάσετε ένα μεγαλύτερο μέρος των χρηστών στην εφαρμογή ιστού και να αποκτήσετε πληροφορίες σχετικά με τα ζητήματα που βρίσκουν στην εφαρμογή μέσω ερευνών ή προσωπικών συνομιλιών. Μέσω της χρήσης δοκιμών A / B, θα μπορούσαν να παρουσιαστούν μικρές αλλαγές εντός της εφαρμογής σε δείγματα χρηστών και οι μετρήσεις θα μπορούσαν να προκύψουν για να δούμε την αποτελεσματικότητα των χρηστών σε διάφορες εργασίες με βάση τα ποσοστά κλικ και τους χάρτες θερμότητας κλικ / δρομέα.

Instagram Web Now

Ήταν πολύ ωραίο να βλέπουμε ότι ορισμένα από τα ζητήματα που βρήκαμε στο περιβάλλον χρήστη του συστήματος αντιμετωπίστηκαν στις διάφορες ενημερώσεις που έκανε το Instagram στην εφαρμογή ιστού. Τα ζητήματα που επηρέασαν τη διαδικασία ροής εργασιών είχαν αλλάξει, γεγονός που οδήγησε σε ομαλότερες διαδικασίες. Οι πιο αξιοσημείωτες αλλαγές περιλαμβάνουν:

  • Διορθώθηκε η γραμμή πλοήγησης κατά την κύλιση στο περιεχόμενο.
  • Μεταφόρτωση φωτογραφιών προφίλ απευθείας μέσω της μικρογραφίας στη σελίδα «προφίλ».
  • Η σελίδα εξερεύνησης διατηρεί συνέπεια με την εφαρμογή για κινητά ακολουθώντας μια διάταξη βάσει πλακιδίων. Το περιεχόμενο που δημοσιεύτηκε στη σελίδα εξερεύνησης είναι πλέον σχετικό με τον χρήστη μέσω κάποιου συστήματος συστάσεων.

Πιστώσεις

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