UX Dizajn: Ključni zakoni, principi i komponente sučelja

Zakoni UX-a: Psihologija korisnika

Skup najboljih praksi temeljenih na psihologiji korisnika (UX smjernice):

• Aesthetic–Usability Effect: Ljepši dizajn doživljava se kao funkcionalniji (moderan UI).
• Chunking: Grupiranje informacija u manje cjeline (sekcije, kartice).
• Cognitive Bias: Sistemska greška u razmišljanju (poznati obrasci).
• Cognitive Load: Količina mentalnog napora korisnika (izbjegavanje previše informacija).
• Doherty Threshold: Idealno vrijeme odziva sustava je do 400 ms (brza reakcija).
• Fittsov zakon: Pogađanje mete ovisi o veličini i udaljenosti (veliki gumb).
• Flow: Stanje potpune fokusiranosti korisnika (neprekinut zadatak).
• Goal-Gradient Effect: Motivacija raste kako se približava cilju (progress bar).
• Hickov zakon: Više izbora povećava vrijeme odluke (manje opcija).
• Jakobov zakon: Korisnici vole poznate obrasce (standardna navigacija).
• Law of Common Region: Elementi u istom području percipiraju se kao povezani (okvir, pozadina).
• Law of Proximity: Bliski elementi doživljavaju se kao grupa (razmak).
• Law of Prägnanz: Ljudi preferiraju jednostavne oblike (minimalizam).
• Law of Similarity: Slični elementi percipiraju se kao povezani (ista boja).
• Law of Uniform Connectedness: Vizualno povezani elementi djeluju kao cjelina (linije, kartice).
• Mentalni model: Korisnik ima vlastitu sliku rada sustava (očekivano ponašanje).
• Millerov zakon: Kratkoročna memorija: 7 ± 2 elementa (ograničen izbor).
• Occamova oštrica: Jednostavnije rješenje je bolje (manje koraka).
• Paradoks aktivnog korisnika: Korisnici ne čitaju upute (klikaju odmah).
• Pareto princip: Mali dio funkcija donosi većinu vrijednosti (glavne opcije).
• Parkinsonov zakon: Zadatak se širi prema dostupnom vremenu (rokovi).
• Peak-End Rule: Pamti se vrhunac i kraj iskustva (checkout, završna poruka).
• Postelov zakon: Tolerancija prema unosu, strogoća prema izlazu (validacija forme).
• Selektivna pažnja: Pažnja je usmjerena na cilj (CTA gumb).
• Serial Position Effect: Pamte se prva i zadnja informacija (naslov, zaključak).
• Teslerov zakon: Kompleksnost se ne može ukloniti (automatizacija).
• Von Restorff efekt: Izdvojeni element se pamti (kontrastna boja).
• Zeigarnik efekt: Nezavršeni zadaci ostaju u pamćenju (nedovršena forma).

Interaktivni elementi sučelja

Komponente s kojima korisnik aktivno komunicira kako bi unosio podatke, kretao se sustavom i dobivao povratne informacije.

Input kontrole

• Checkbox: Odabir jedne ili više opcija istovremeno.
• Radio button: Odabir točno jedne opcije iz grupe.
• Dropdown menu: Odabir jedne opcije iz duže skrivene liste.
• Button (gumb): Pokretanje akcije i promjena stanja sustava.
• Toggle: Uključi / isključi stanje.
• Text field: Slobodan unos teksta.
• Date field: Unos datuma, često uz kalendar.

Navigacijske komponente

• Breadcrumbs: Hijerarhijski put korisnika kroz sustav.
• Search field: Brzo pronalaženje sadržaja.
• Pagination: Dijeljenje sadržaja na više stranica.
• Tags: Oznake za grupiranje i filtriranje.
• Carousel: Više elemenata u rotirajućem prikazu.
• Icons: Vizualni simboli za funkcije ili radnje.

Informativne komponente

• Tooltips: Kratke poruke pri interakciji.
• Progress bar: Prikaz napretka u procesu.
• Notifications: Obavijesti o stanju ili rezultatu radnje.
• Modal windows: Privremeni prekid glavnog sadržaja radi fokusa.
• Dialog box: Potvrda ili odluka korisnika.

Elementi dizajna i vizualna organizacija

UX patterni su provjerena rješenja za česte probleme u dizajnu sučelja.

• Linije: Osnovni vizualni gradivni dijelovi.
• Oblici: Elementi za povezivanje i razdvajanje.
• Prostor (Whitespace): Prazan prostor za bolju čitljivost.
• Boja: Privlačenje pažnje i emocije (Pravilo 60-30-10).
• Tipografija: Umjetnost i tehnika rasporeda slova.
• Hijerarhija: Prepoznavanje važnosti informacija.

Gestalt principi organizacije percepcije

• Proximity: Bliski elementi su povezani.
• Similarity: Slični elementi su grupa.
• Closure: Mozak popunjava nedostajuće dijelove.
• Continuity: Pogled prati linije i smjer.
• Figure / Ground: Razlikovanje figure od pozadine.
• Common Region: Elementi u istom području su povezani.
• Focal Point: Istaknuti element privlači pažnju.
• Prägnanz: Preferencija jednostavnosti.

Mobilne aplikacije: Android vs. iOS

• Android: Koristi Material Design (Googleov sustav).
• iOS: Koristi Human Interface Guidelines (Appleov sustav).
• Razlike: Razlikuju se u dizajnerskim pravilima, komponentama i interakciji.