Μελέτη περίπτωσης UX μιας σελίδας ανάρτησης ιστολογίου

Πώς σχεδίασα τη σελίδα του άρθρου για αυτήν την εφαρμογή Ιστού

Σχεδιασμός σελίδας άρθρου

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

Ορίστηκαν οι ακόλουθες βασικές μετρήσεις:

  • δεν απαιτείται αλληλεπίδραση με τον χρήστη σε κανένα σημείο, για παράδειγμα banners GDPR, διαφημίσεις ή CTA
  • μια 100% σημασιολογικά ορθή δομή HTML, έτσι ώστε κάθε χρήστης να μπορεί να απολαμβάνει τα άρθρα, για παράδειγμα όταν χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης
  • ένα μινιμαλιστικό σχέδιο που εστιάζει πρώτα και κύρια στο γραπτό κείμενο
  • μια εξαιρετική βαθμολογία SEO, έτσι ώστε τα άρθρα μου να κατατάσσονται ψηλά στις μηχανές αναζήτησης, διαφορετικά η σύνταξη τους θα ήταν μια εργασία χωρίς καμία απόδοση επένδυσης (ROI)

Διάταξη ενός άρθρου πρώτου περιεχομένου

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

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

  • δεν υπάρχει κορυφαία σειρά πλοήγησης
  • Δεν υπάρχουν πραγματικά διαδραστικά στοιχεία, είναι σχεδόν εξ ολοκλήρου ορατό το κείμενο του άρθρου

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

Image 2f00b21ef58d

Χωρίς κορυφαία πλοήγηση

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

Ωστόσο, για μένα, είναι ένα πείραμα εάν οι χρήστες συνεχίσουν το ταξίδι τους στον ιστότοπο. Μπορεί να είναι λανθασμένη υπόθεση, αλλά ζυγίζω πολύ τις προτεινόμενες αναρτήσεις, οι οποίες είναι ορατές μετά το κύριο περιεχόμενο. Το τρέχον ποσοστό εγκατάλειψης μεταξύ των τελευταίων 30 ημερών είναι μεταξύ 70 % και 80 %, που είναι ο μέσος όρος του κλάδου για ιστότοπους αναρτήσεων ιστολογίου.

Ο γραπτός λόγος και τίποτα άλλο

Κάθε σελίδα έχει ένα πρώτο μέρος, την ενότητα "πάνω από το πάσο", όπως ονομάζεται, που παίρνει το πλήρες ύψος του παραθύρου της συσκευής. Έχει μεγάλο τίτλο, μικρότερο υπότιτλο και μερικά μεταδεδομένα και το κάτω μέρος του παραθύρου. Αυτός ο σχεδιασμός αποκλίνει αρκετά δραστικά από τις περισσότερες σελίδες άλλων άρθρων στον Ιστό, καθώς είναι βασικά το πιο μινιμαλιστικό που μπόρεσα να πετύχω.

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

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

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

Η προσθήκη

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

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

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

Πλοήγηση στο κάτω μέρος

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

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

Προτάσεις

Σχετικά

Προσάρτημα

Γλώσσες