ReasonableGraph
Redesign Demo

Reasonable Graph — Επανασχεδιασμός UI/UX

Κεντρικό ευρετήριο των views του demo. Κάθε σελίδα χτίζεται με κοινό design system (Bootstrap 5 + custom όπου χρειάζεται, μπλε θέμα) και ενημερώνεται σταδιακά. Επιλέξτε ένα view για προεπισκόπηση.

Έτοιμο για προεπισκόπηση Σε εξέλιξη — προστίθεται σύντομα

Foundations

Style Guide Tokens, χρώματα, τυπογραφία, components, a11y Έτοιμο

Authentication

Είσοδος (Login) Σύνδεση χρήστη με email & κωδικό Έτοιμο Δημιουργία λογαριασμού Εγγραφή νέου χρήστη Έτοιμο Επαναφορά κωδικού Αίτημα συνδέσμου επαναφοράς Έτοιμο

Τι κάναμε: τρία ολοκληρωμένα views (Είσοδος, Δημιουργία λογαριασμού, Επαναφορά κωδικού) με κοινό auth shell. Ορατά labels (ποτέ placeholder ως label), validation με μηνύματα στα ελληνικά, εμφάνιση/απόκρυψη κωδικού, έλεγχος ισχύος κωδικού, σαφή error & success states.

Σελίδες εισόδου — AA

  • Ορατά labels πάντα (ποτέ placeholder ως label), helper text, μηνύματα validation στα ελληνικά SC 3.3.1 · 3.3.2 · 3.3.3
  • Error/success με icon + κείμενο (όχι μόνο χρώμα), aria-invalid + aria-describedby SC 1.4.1 · 4.1.2
  • Αντίθεση ≥ 4.5:1, ορατό focus ring, touch targets ≥ 44px SC 1.4.3 · 2.4.7 · 2.5.8
  • Εμφάνιση/απόκρυψη κωδικού με προσβάσιμο κουμπί, σωστά autocomplete tokens SC 1.3.5
  • Πλήρης keyboard, skip link, reduced-motion SC 2.1.1 · 2.4.1 · 2.3.3

Σελίδες εισόδου — AAA όπου εφικτό

  • Ενισχυμένη αντίθεση ≥ 7:1 στο κύριο κείμενο SC 1.4.6
  • Σαφείς οδηγίες & απαιτήσεις κωδικού εκ των προτέρων SC 3.3.5
  • Συνεπής, προβλέψιμη συμπεριφορά φορμών στα 3 views SC 3.2.3 · 3.2.4
  • Πλήρες AAA (π.χ. 3.3.6 error prevention με re-auth χωρίς απώλεια δεδομένων) εξαρτάται από το backend/υλοποίηση.
Αναζήτηση — ενιαίο view Γραμμή & σύνθετη αναζήτηση, δέντρο συλλογών, αποτελέσματα & φίλτρα σε μία σελίδα Demo
  • Γραμμή αναζήτησης — απλή & σύνθετη (τελεστής ανά ομάδα), δέντρο συλλογών με πλήρη χειρισμό πληκτρολογίου. Έτοιμο
  • Φίλτρα / facets — flat layout αριστερά, εφαρμογή ανά facet, removable chips, mobile drawer. Έτοιμο
  • Αποτελέσματα — πλήρως σχεδιασμένα result cards σε δύο προβολές (λίστα / πλέγμα), toolbar διάταξης & ταξινόμησης, σελιδοποίηση, lightbox εικόνων. Έτοιμο

Τι σχεδιάσαμε στη σελίδα αποτελεσμάτων:

  • Toolbar στην ίδια γραμμή με τα φίλτρα: εναλλαγή λίστα/πλέγμα (με επεξηγηματικά tooltips), ταξινόμηση (6 τρόποι), και σελιδοποίηση δεξιά — που επαναλαμβάνεται στο τέλος και κρύβεται όταν τα αποτελέσματα χωρούν σε μία σελίδα.
  • Result card: εικόνα σταθερού μεγέθους/aspect με click → fullscreen lightbox· ουδέτερο tag τύπου· stretched-link (όλη η κάρτα clickable, ο τίτλος ουδέτερος, οι εσωτερικοί σύνδεσμοι μπλε)· μεταδεδομένα το ένα κάτω από το άλλο (2 στήλες σε desktop)· collapsible περιεχόμενο (ηχογραφήσεις/εκδόσεις).
  • Πλέγμα: ισοϋψείς κάρτες με bare-minimum ύψος· «Περισσότερα» μόνο όταν το περιεχόμενο ξεπερνά το όριο· μία κλασική placeholder όπου λείπει εικόνα.
  • Μπλε με φειδώ: ουδέτερα tags & breakdown pills· το μπλε μόνο σε ό,τι είναι πραγματικά actionable (σύνδεσμοι, «+N ακόμη», ενεργό view, τρέχουσα σελίδα). Χωρίς zebra-θόρυβο — μόνο πολύ απαλό zebra στη λίστα.
  • Responsive: desktop / tablet / mobile. Σε mobile μόνο card view, full-width φίλτρα & ταξινόμηση, σελιδοποίηση πάνω & κάτω.

Σελίδα αναζήτησης — AA

  • Αντίθεση ≥ 4.5:1 (κείμενο) & ≥ 3:1 (UI/εικονίδια) — ελεγμένη σε λευκό και πάνω στο zebra της λίστας SC 1.4.3 · 1.4.11
  • Ορατό focus ring παντού· η stretched-link κάρτα δείχνει focus ως σύνολο SC 2.4.7
  • Ποτέ μόνο χρώμα: icon + ετικέτα σε tags, μεταδεδομένα, καταστάσεις SC 1.3.1 · 1.4.1
  • aria-live αποτελέσματα, aria-pressed toggle, aria-current σελιδοποίηση SC 4.1.2 · 4.1.3
  • Tooltips σε hover και focus, dismiss με Esc SC 1.4.13
  • Lightbox: modal <dialog> με focus trap, Esc, επιστροφή focus SC 2.1.2 · 2.4.3
  • Πλήρης keyboard (δέντρο, disclosures, lightbox), reduced-motion SC 2.1.1 · 2.3.3
  • Σημασιολογική δομή: h1/h2/h3 αποτελεσμάτων, landmarks, touch targets ≥ 44px SC 1.3.1 · 2.5.8

Σελίδα αναζήτησης — AAA όπου εφικτό

  • Ενισχυμένη αντίθεση ≥ 7:1 στο κύριο κείμενο (τίτλοι & τιμές σε ink-900) SC 1.4.6
  • Μεγαλύτερα μεγέθη κειμένου για άνεση ανάγνωσης προς 1.4.8
  • Σαφείς, περιγραφικές ετικέτες & headings αποτελεσμάτων SC 2.4.10
  • Help text που εξηγεί τη λειτουργία της αναζήτησης SC 3.3.5
  • Συνεπής πλοήγηση & αναγνώριση με τα υπόλοιπα views SC 3.2.3
  • Καθολικό AAA (π.χ. 1.4.6 σε όλο το δευτερεύον κείμενο, 2.4.9) δεν επιδιώκεται — περιορίζει το UX.

OPAC — Record detail

Ηχογράφηση Tabs, charts, bitstreams, YouTube Σύντομα
Πρόσωπο Πεδία ανά ρόλο, εξωτερικά links Σύντομα
Βιβλίο / Ψηφιακό τεκμήριο PDF viewer, thumbnail Σύντομα
Δίσκος / Έκδοση Καρουζέλ εξωφύλλων Σύντομα
Φάκελος / Συλλογή Δέντρο συλλογών + καρουζέλ Σύντομα

Graph view

Legend / Controls / Info Μόνο τα static UI γύρω από το graph Σύντομα
Προτάσεις λογοτύπου 3 concepts — χρώμα, μονόχρωμο, favicon & demo μέσα σε website Demo

Προσβασιμότητα & βελτιώσεις

Στόχος ποιότητας: WCAG 2.2 Level AA στο design, με στοιχεία AAA όπου είναι εφικτά χωρίς να βλάπτουν το UX. Η τελική συμμόρφωση εξαρτάται από την υλοποίηση (development) και βρίσκεται εκτός scope του design — εμείς παραδίδουμε design έτοιμο να την υποστηρίξει.

Καλύπτουμε σε επίπεδο AA

  • Αντίθεση κειμένου ≥ 4.5:1, UI/large ≥ 3:1 — όλη η παλέτα ελεγμένη SC 1.4.3 · 1.4.11
  • Ορατό focus σε κάθε interactive (3px ring) SC 2.4.7 · 2.4.11
  • Πληροφορία ποτέ μόνο με χρώμα — πάντα icon + κείμενο SC 1.3.1 · 1.4.1
  • Ορατά labels, helper & μηνύματα validation στα ελληνικά SC 3.3.1 · 3.3.3
  • Πλήρης χειρισμός με πληκτρολόγιο (π.χ. collection tree) SC 2.1.1
  • Touch targets — ελάχιστο ικανοποιημένο, ≥44px όπου έχει νόημα SC 2.5.8
  • Reduced-motion, dynamic aria-live, skip link SC 2.3.3 · 4.1.3 · 2.4.1

Φτάνουμε σε AAA όπου εφικτό

  • Ενισχυμένη αντίθεση ≥ 7:1 στο κύριο κείμενο (ink-900 σε λευκό) SC 1.4.6
  • Σαφείς, περιγραφικές ετικέτες & headings SC 2.4.10
  • Help text σε φόρμες & αναζήτηση που εξηγεί τη λειτουργία SC 3.3.5
  • Συνεπής πλοήγηση & αναγνώριση σε όλα τα views SC 3.2.3 · 3.2.4
  • Πλήρες AAA (π.χ. 1.4.6 παντού, 2.4.9, sign-language) δεν επιδιώκεται καθολικά — περιορίζει υπερβολικά το UX/περιεχόμενο.

Τι βελτιώνουμε σε σχέση με την υπάρχουσα πλατφόρμα

Τώρα
  • Icon-only metadata (π.χ. ημερομηνία χωρίς ετικέτα)
  • Ατελείωτο scroll σε πεδία ανά ρόλο, χωρίς ομαδοποίηση/πλοήγηση
  • Αδύναμη οπτική ιεραρχία & μη συνεπή spacing
  • Collection tree βασικό, περιορισμένος keyboard χειρισμός
  • Results meta ως απλό κείμενο
  • Αποτελέσματα ως πυκνή λίστα (zebra), χωρίς εικόνες ή εναλλακτικές προβολές
Μετά τον επανασχεδιασμό
  • Πάντα icon + ορατό label σε όλα τα μεταδεδομένα
  • Ομαδοποίηση πεδίων ανά ρόλο, σαφής δομή & πλοήγηση
  • Ενιαία tokens (παλέτα, spacing, radii, shadows) & καθαρή ιεραρχία
  • Accessible tree (βελάκια/Home/End/Enter, roving tabindex)
  • Μοντέρνο results bar: count, κριτήρια ως chips, breakdown
  • Result cards σε λίστα & πλέγμα — εικόνες με lightbox, ταξινόμηση, σελιδοποίηση, collapsible περιεχόμενο
  • Πλήρως responsive (desktop / tablet / mobile)

Οι αναφορές SC είναι ενδεικτικές των κριτηρίων WCAG 2.2 που καθοδηγούν τον σχεδιασμό· δεν αποτελούν πιστοποίηση συμμόρφωσης.