Preskoči na sadržajSkip to content

UI/UX dizajn jednostavnim riječima

UX je koliko je nešto jednostavno i ugodno za korištenje. UI je ono što vidite i dodirujete: gumbi, tekst i boje. Dobar dizajn uglavnom je nevidljiv. Ljudi pronađu ono po što su došli, a da o tome ne moraju razmišljati.

  • 4,5:1kontrast za običan tekst
  • 24 × 24 pxnajmanja površina za dodir
  • 5 osobapronađe većinu problema u testu

Pronađite šest pogrešaka

Ovaj ekran za rezervaciju u studiju joge ima šest malih problema koji koštaju stvarne rezervacije. Dodirnite sve što vam se čini krivo. Uz svaku pogrešku koju pronađete dobivate pravilo koje je popravlja. Zatim prijeđite na popravljeni ekran.

0od 6 pronađeno

Dodirnite dio ekrana koji vam se čini krivo.

  1. ?Još nije pronađeno
  2. ?Još nije pronađeno
  3. ?Još nije pronađeno
  4. ?Još nije pronađeno
  5. ?Još nije pronađeno
  6. ?Još nije pronađeno

UI i UX, razlika

Dvije riječi koje se uvijek izgovaraju zajedno, za dva različita posla.

UX, iskustvo

Mogu li ljudi napraviti ono po što su došli, brzo i bez pogrešaka? To počinje mnogo prije nego što se odaberu boje.

UI, sučelje

Gumbi, tekst, boje, ikone i razmaci. Plan pretvara u nešto što ljudi mogu vidjeti i dodirnuti.

Oboje, jedan cilj

Lijep ekran koji zbunjuje ljude ne uspijeva. Ne uspijeva ni jasan ekran kojem nitko ne vjeruje.

Načela jednostavnim riječima

Ovih osam ideja stoji iza gotovo svake dobre web stranice i aplikacije. Prijeđite mišem ili dodirnite stavku da vidite detalje.

    • Razgovarajte s pet kupaca
    • Pogledajte kako to rade danas
    • Zapišite njihove riječi
    • Izbornik riječima vaših kupaca
    • Nekoliko glavnih stavki izbornika
    • Jedan jasan posao za svaku stranicu
    • Veličina, boja i prostor
    • Jedan glavni gumb
    • Najvažnije prvo
    • 4,5:1 za običan tekst
    • Najmanje 16 px na mobitelima
    • Kratki retci, jasni naslovi
    • Najmanje 24 × 24 px
    • 44 px je bolje
    • Razmak među njima
    • Gumbi izgledaju kao gumbi
    • Iste riječi za istu radnju
    • Mali sustav dizajna
    • Prelazak mišem, fokus i pritisak
    • Učitavanje i uspjeh
    • Pogreške koje kažu kako ih popraviti
    • Pet osoba pronađe većinu problema
    • Zadajte zadatak, zatim šutite
    • Popravite i testirajte ponovno

Kako teče dizajnerski projekt

Svaki korak jeftinije je promijeniti od sljedećeg, pa se velika pitanja rješavaju rano.

  1. Korak 1

    Istraživanje

    Tko to koristi, što im treba i što im danas smeta.

  2. Korak 2

    Struktura

    Stranice, izbornik i putevi kojima ljudi idu od dolaska do onoga po što su došli.

  3. Korak 3

    Wireframeovi

    Raspored u jednostavnim sivim kutijama, prije nego što boje i fotografije ikoga odvuku.

  4. Korak 4

    Vizualni dizajn

    Boje, tipografija, fotografije i komponente, izgrađeni na vašem brendu.

  5. Korak 5

    Testiranje i dorada

    Prototip na koji se može klikati isprobaju stvarni ljudi, a zatim se popravi, prije nego što se išta izradi.

Četiri mita o UX-u

  • Dobar dizajn znači lijepZnači jednostavan. Lijepo pomaže kad je i jasno.
  • Ljudi čitaju svePregledavaju tražeći riječi zbog kojih su došli.
  • Više opcija veseli ljudeSvaki dodatni izbor usporava odluku.
  • Testiranje traži velik budžetZa početak je dovoljno pet osoba i jedno poslijepodne.

Pitanja o UX/UI dizajnu

Koja je razlika između UI i UX?

UX je cijelo iskustvo: mogu li ljudi lako napraviti ono po što su došli. UI je njegov vidljivi dio: gumbi, tekst, boje i raspored. Dobar UX može postojati i uz jednostavan UI, ali lijep UI ne može spasiti zbunjujuće iskustvo.

Treba li web stranici male tvrtke UX dizajn?

Da, u manjem obliku. Znati što vaši kupci traže, staviti to na prvo mjesto i učiniti sljedeći korak očitim jednako je važno na web stranici od pet stranica kao i u velikoj aplikaciji.

Koje alate koriste dizajneri?

Figma je danas najčešći alat za wireframeove, dizajne i prototipe na koje se može klikati. Olovka i papir i dalje su najbrži način za početak.

Je li pristupačnost dio UX-a?

Da. Kontrast, veličina teksta, površine za dodir i korištenje tipkovnicom čine web stranicu lakšom za sve, ne samo za osobe s invaliditetom. Pogledajte našu provjeru pristupačnosti.

Možete li dizajnirati našu web stranicu ili aplikaciju?

Da. Istražujemo, dizajniramo i testiramo s vama, a zatim izrađujemo. Pogledajte UI/UX dizajn.

Želite da netko drugi pogleda vašu?

Pošaljite nam adresu svoje web stranice. Pogledat ćemo je onako kako je gledaju vaši kupci i javiti se s onim što bismo prvo promijenili.