← Nazad na sve članke

Zašto su ikonice u tabelama smetale — i šta smo uradili u micali.online

#UX dizajn #Mobilna aplikacija #Ažuriranje proizvoda #Korisnički interfejs #Tabele i podaci #Ekrani osjetljivi na dodir
Zašto su ikonice u tabelama smetale — i šta smo uradili u micali.online

Postoje izmjene koje primijetite već kod sljedeće prijave, iako u aplikaciji nije stiglo ništa novo. Ova je upravo takva. Redovi u tabelama — događaji, usluge, posjetioci, predlošci poruka — do sada su se na kraju završavali nizom sitnih ikonica. Od sada je na njihovom mjestu jedno dugme sa opisom: Akcije.

Djeluje kao kozmetika. Zapravo je riječ o popravci onoga što je najviše smetalo na mobitelu — i odluci koja zaslužuje objašnjenje. Ikonice su ipak brže. Zašto onda korak nazad, u meni?

Šta je bilo loše sa ikonicama

Ikonica nije riječ. Olovka i kanta za smeće daju se pogoditi. Ali na listi događaja stajalo ih je šest jedna pored druge: izvoz, kalendar, dijeljenje, kopiranje, olovka, kanta za smeće. Koja od njih zakazuje termine, a koja pravi kopiju događaja? Ko to koristi svakodnevno, zapamtit će. Ko jednom mjesečno, pogađa iznova svaki put — a kod jedne od tih ikonica greška je nepovratna.

Oblačić sa opisom postoji samo za miša. Opis koji se pojavi kad zadržite kursor iznad ikonice na dodirnom ekranu se nikad ne prikazuje — prst nema gdje „zastati". Na mobitelu ste, dakle, imali na raspolaganju samo oblik piktograma i ništa drugo. A dio ikonica nije imao ni taj opis: uređivanje i brisanje u predlošcima poruka bili su potpuno bez njega.

Bile su male, a ono opasno stajalo je odmah pored. Dugmad su imala 28 piksela, iako je preporučena dodirna meta otprilike 44. Kanta za smeće stajala je tik uz olovku, iste veličine i iste sive boje.

Na mobitelu su, povrh svega, bile skrivene iza širine tabele. Tabela se na uskom ekranu pomjera u stranu, a kolona sa akcijama bila je posljednja. Da biste došli do nje, morali ste prvo odskrolati cijelu tabelu udesno — a kod sljedećeg reda ponovo.

Red tabele prije i sada
Red tabele prije i sada

Kako to izgleda sada

U redu se nalazi jedno dugme Akcije. Šta se dešava nakon klika, zavisi od uređaja:

  • Na računaru se otvara meni u kojem svaka stavka ima i ikonicu i riječ — Zakažite svoj događaj, Podijeli, Kopiraj, Uredi, Izbriši.
  • Na mobitelu odozdo izlazi panel preko cijele širine ekrana, sa redovima dovoljno velikim za prst. U njegovom zaglavlju je naziv zapisa sa kojim radite — email posjetioca, naziv događaja. Kod duge liste sličnih redova to je važnije nego što zvuči.
  • Brisanje i druge nepovratne akcije odvojene su linijom i crvene su boje. Ne sive i zalijepljene uz Uredi.
  • Na mobitelu je kolona sa akcijama na početku reda — odmah iza polja za potvrdu, ako ga tabela ima. Dakle tamo gdje je vidite bez pomjeranja u stranu. Na računaru je ostala desno, tačno tamo gdje je bila do sada.
Meni Akcije na računaru
Meni Akcije na računaru
Na mobitelu panel izlazi odozdo, a kolona Akcije je prva
Na mobitelu panel izlazi odozdo, a kolona Akcije je prva

Zašto jedno dugme, a ne ikonice

Ikonice su prečica za ono što već znate. Odlično funkcionišu kad ih je malo i koristite ih svakodnevno — strelica nazad, iks za zatvaranje. Kod šest akcija, od kojih vam polovina treba tek povremeno, prednost se okreće: štedite pola sekunde na kliku, a plaćate to sekundama razmišljanja i povremenim pogrešnim klikom.

Jedno dugme jednu tešku odluku („koja je od tih šest sličica moja?") dijeli na dvije lake: želim nešto uraditi sa ovim redom — a onda to pročitam. Čitanje je sporije od prepoznavanja oblika, ali se nikad ne vara.

Iza toga stoje i tri praktičnija razloga:

  • Red govori o podacima. Ime, email, datum, kapacitet — to je informacija zbog koje gledate listu. Šest ikonica na kraju svakog reda vizuelna je buka koja se ponavlja onoliko puta koliko imate redova.
  • Svuda isto. Prerađeno je 28 tabela na 18 ekrana — uključujući svih sedam na stranici Posjetioci. Naučite to jednom i vrijedi u cijeloj aplikaciji.
  • Može se širiti. Nova akcija je od sada novi red u meniju, a ne još jedna ikonica koja tabelu gura još više u stranu. Dvije akcije koje su ranije tražile vlastitu kolonu — korištenje predloška poruke i uređivanje narudžbe usluge — time su se direktno preselile u meni, pa su se tabele suzile za jednu kolonu.

Cijena za to je jedan klik više na računaru. Znali smo za nju kad smo odlučivali, i prihvatili smo je: klik košta pola sekunde, greškom pritisnuta kanta za smeće košta znatno više.

Gdje ćete to vidjeti

Ovako smo preradili sve liste u aplikaciji: događaje i usluge, sve kartice stranice Posjetioci (posjetioci, rezervacije, narudžbe usluga, liste, crna lista), pretplaćene pakete i njihovo iskorištenje članarine, predloške poruka, obrasce i njihove odgovore, dostupnost usluga, webhookove i korisnike računa.

Ne treba ništa uključivati niti podešavati — izmjena je u aplikaciji već sada, i to na svih 31 jeziku na kojima micali.online radi. Ako vam u nekom meniju nedostaje akcija koju biste tamo očekivali, javite nam se: lista akcija reda je sada na jednom mjestu i lako se mijenja.

Isprobajte micali.online