Neke su praktične, neke poetske, ali sve odaju poštovanje prema složenosti dizajniranja stvari za naše kolege ljude.
1. Ugaona veličina čitljivog teksta
Optimalna veličina za osnovni tekst je oko 0,3° od bazne linije do visine velikog slova. Ovo važi i za mobilne uređaje i za bilborde.
2. Kako koristiti žutu kao boju brenda
Najbolje je kombinovati je s crnom ili tamno sivom. Izbegavaj žuti tekst – koristi crnu ili duboku nijansu narandžaste na žutoj pozadini.
3. Najbolji šabloni za prikaz tabela na mobilnim uređajima
Postoji više pristupa – od skrivenih kolona do horizontalnog klizanja. Ključno je da korisnik može lako da pročita podatke.
4. Kako da obučiš klijenta da ti da korisne povratne informacije
Pre dogovora, definišite ciljeve uspešnog dizajna. Fokusiraj se na to kako tvoj dizajn postiže te ciljeve, i klijent će davati bolje povratne informacije.
5. Šta bi tvoji korisnici radili da ne koriste tvoju aplikaciju
Tvoj proizvod verovatno nije ono što korisnici žele da rade – samo im pruža najbolji način da dođu do cilja. Uvek imaj to na umu.
6. Koliko dugo treba trajati animacija hover stanja
Između 100ms i 250ms je optimalno. Ako traje 500ms, osećaće se sporo, a ako više elemenata ima takvu animaciju, korisnik će osećati kašnjenje.
7. Šta je „chart junk“
To je deo vizuelizacije podataka koji privlači pažnju, ali ne nosi korisne informacije u odnosu na svoju vizuelnu težinu.
8. Šta najviše usporava učitavanje tvoje veb stranice
Često su to slike. Prvi korak je provera preko alata za analizu brzine učitavanja.
9. Šta je „top-down lighting bias“
Ljudi su navikli da svetlo dolazi odozgo, pa interfejsi osvetljeni odozdo izgledaju neprirodno.
10. Višak interpunkcije
Postavi interpunkciju (kao navodnike ili crtice) u levu marginu kako bi se postigla bolja vizuelna ravnoteža.
11. Zašto se neke boje sukobljavaju
Zbog visoke zasićenosti ili slične osvetljenosti.
12. Tržišna cena učesnika u testiranju korisnosti (60 minuta)
Niske cene: 1.500-3.000 RSD (za obične korisnike)
Stručnjaci: 3.000-6.000 RSD (IT stručnjaci, dizajneri)
Fokus grupe: Do 8.000 RSD (retki profili)
13. Kako je izgledao najbolji dizajn pre 1000 godina
Rukopisi su bili 90% tipografija.
14. Kako napraviti dizajn koji će biti razumljiv za 10.000 godina
Inspiriši se projektima poput oznaka za nuklearni otpad dizajniranih da traju hiljadama godina.
15. Kako vebsajtovi zarađuju novac
Reklame, pretplate, affiliate marketing, prodaja proizvoda.
16. Kako tvoj klijent zarađuje novac
I kako tvoj dizajn može da mu poveća prihod.
17. Zašto slikari nikad ne koriste čistu crnu
U prirodi retko postoji potpuno crna – tamne nijanse obično imaju određenu zasićenost.
18. Optimalan broj karaktera po liniji
Između 50 i 75 karaktera.
19. Kako napraviti poruku o grešci ako je tvoja brend boja crvena
Koristi narandžastu ili žutu za greške. Smanji upotrebu crvene na stranicama gde se pojavljuju greške.
20. Kada koristiti grid sistem
Kada je umetnička kompozicija važnija od funkcionalnosti.
21. Kada ne koristiti grid sistem
U većini responsive dizajna strogi gridovi nisu potrebni.
22. Kada centrirati tekst
Samo ako ima manje od 3 linije.
23. Kada poravnati tekst udesno
Samo za brojeve (cene, količine) i retke gde je potrebna jasna desna ivica.
24. Kada koristiti Didone fontove
Za brendove koji žele da prenesu luksuz i eleganciju.
25. Kada koristiti slab serif fontove
Početnici ih retko trebaju koristiti.
26. Minimalna veličina tap target-a na iOS i Androidu
iOS: 44x44pt, Android: 48x48pt.
27. Šabloni za prikaz rezultata pretrage
Autocomplete, istaknuti pojmovi, automatska ispravka, „nema rezultata“ stanje.
28. Šabloni za filtriranje rezultata pretrage
Bočni filteri, prikaz aktivnih filtera, kombinovana lista.
29. Veličine ekrana popularnih mobilnih uređaja
Za iPhone: 375pt, za Android: 360pt.
30. Koliko ljudi koristi tvoj sajt na mobilnim uređajima
Procenat varira, ali uvek proveri analitiku.
31. Zašto Gmail bolduje pojam pretrage, a Google Search bolduje sve osim njega
Gmail prikazuje konkretne rezultate, dok Google Search pomaže u formulisanju upita.
32. Kada koristiti bar chart, line chart i pie chart
Bar i line chart su slični, ali line chart je bolji za vremenske serije. Pie chart koristi samo za prikaz 100% odnosa.
33. Razlika između zasićenja i osvetljenja boje
Zasićenje je intenzitet boje, a osvetljenje je koliko je boja svetla ili tamna.
34. Font na ploči koju je Nil Armstrong ostavio na Mesecu
Futura – iako stari font, i dalje asocira na retro i sportski stil.
35. Šta je na ploči Pionir letelice
Jedna od najboljih vizuelizacija podataka ikada – sa ljudskim figurama, mapom Sunčevog sistema i pulsarima kao orijentirima.
36. Razlika između induktivnog i deduktivnog razmišljanja
Induktivno: posmatranje uzoraka. Deduktivno: logičko zaključivanje.
37. Zašto humanistički fontovi deluju prijatnije
Zato što su inspirisani rukopisom.
38. Tri najpopularnija fonta na Google Fonts
Roboto, Open Sans, Lato – ali izbegavaj prekorišćene.
39. Tri najpopularnija fonta na Typewolf
Apercu, Futura, GT America – za modernije brendove.
40. Prečice u omiljenom dizajn alatu
Figma i Sketch imaju gotovo iste prečice.
41. Kako dizajnirati usaglašene ikone
Koristi istu debljinu linija, border radius i nivo detalja.
42. Dimenzionalnost boja
Boje imaju tri dimenzije – nijansu, zasićenost i osvetljenje.
43. Podrazumevana veličina teksta u veb pretraživačima, iOS i Material Design
Veb: 16px, iOS: 17pt, Material Design: 16px.
44. Kako napraviti ceo interfejs koristeći samo jednu boju
Kreiraj tamnije i svetlije varijacije.
45. Kako napraviti ceo interfejs bez boja
Dizajniranje u nijansama sive je dobra praksa.
46. Zašto fontovi sa visokim x-height-om su čitljiviji
Zato što su mala slova veća u odnosu na veličinu teksta.
47. Pet načina za postavljanje teksta preko slike
Preklopi, senke, fade efekti, pozadinski okviri.
48. Preporučeni kontrast za osnovni tekst (WCAG)
4.5:1 za AA standard.
49. Preporučeni kontrast za naslove (WCAG)
3:1 za AA standard.
50. Šta je Leonardo da Vinči preporučio za početnike
Kopiranje majstora – i u dizajnu to važi.
51. Najkorisniji blend modovi
Darken, Overlay, Soft Light, Multiply – koristi ih za podešavanje boja.
52. Principi dobre kompozicije
Fokalna tačka, simetrija, pravilo trećine.
53. Gde naći fotografije koje ne izgledaju generički
Unsplash, Pexels, Pixabay – besplatni izvori prirodnih slika.
54. Četiri razloga zašto pretraga ne daje rezultate
Nema podataka, greška u kucanju, sinonimi, filteri.
55. Kako napisati poruku o grešci
Budi jasna, ljubazna i ponudi rešenje.
56. Kako napisati call-to-action
Izbegavaj generičke fraze („Klikni ovde“), istakni korist.
57. Kako radi screen reader
Čita tekst i opisuje interaktivne elemente.
58. Koliko ljudi koristi screen reader
Oko 7 miliona ljudi u SAD-u ima oštećenje vida.
59. Šta ne stavljati u portfolio
Projekte koje ne bi ponovila, fotografije, nedizajnerske radove.
60. Kako prezentovati dizajn
Počni od glavnih ciljeva, ne od detalja.
61. Šta znači „zadovoljavajuće rešenje“ u dizajnu?
Prihvatanje prve „dovoljno dobre“ opcije umesto traženja optimalne.
62. Šta je važnije – estetika ili upotrebljivost
Upotrebljivost.
63. Šta je Poasonova raspodela
Statistički model gde su vrednosti koncentrisane oko proseka, ali imaju dugačak rep.
64. Jakobov zakon
Korisnici očekuju da tvoj sajt radi kao svi drugi koje već koriste.
65. Dev tools u pretraživaču
Barem osnove – promena teksta, stilova, preuzimanje slika.
66. Tri razloga zašto ne koristiti karusele
Spori su, teško ih je kontrolisati, pokazuju nedostatak prioritizacije.
67. Zakon lokaliteta
Kontrole treba da budu blizu elementa koje menjaju.
68. Razlika između prijatelja i Facebook prijatelja
Prvi su ljudi sa kojima deliš život, drugi su samo kontakti.
69. Kako radi PageRank
Google algoritam koji rangira stranice na osnovu linkova.
70. Balans između istraživanja i iskorišćavanja
Istraživanje (explore) = testiranje novih ideja, A/B testovi, eksperimenti
Iskorišćavanje (exploit) = korišćenje dokazanih rešenja
Da li istražuješ nove opcije ili koristiš ono što već znaš da radi?
71. Različite tastature na mobilnim uređajima
Brojevi, email, URL – koristi odgovarajuću tastaturu za svaki input.
72. Psihologija besa u saobraćaju
Anonimnost i ograničena komunikacija dovode do agresije – važi i za online svet.
73. Deset alternativa dropdown menijima
Radio dugmad, kartice, typeahead, kalendari.
74. Komplementarna i supstituciona dobra
Prva se kupuju zajedno (kao hleb i puter), druga umesto jedni drugih (kao kafa i čaj).
75. Šta ekrani „žele“
Da budu dinamični – da se menjaju i reaguju.
76. Zašto ne slušati korisnike bukvalno
Oni često ne znaju šta žele – bolje ih posmatraj kako koriste proizvod.
77. Kako sprovesti A/B test
Promeni jednu varijablu, čekaj statističku značajnost.
78. Kada ne raditi A/B test
Ako je dizajnerska intuicija jasna.
79. Kako pisati
Budi jasna, konkretna, koristi razgovorni stil.
80. Kako editovati
Čitaj naglas, skrati gde god možeš.
81. Kako dobre online zajednice postanu loše
Bez jasnih pravila, propadaju.
82. Pravilo 82/20
82% rezultata dolazi od 20% uloženog truda.
83. Kako napraviti pristojan logo
Koristi jednostavne geometrijske oblike i dobru tipografiju.
84. Zašto su igrice zabavne
Izazov, kontrola, balans između težine i nagrade.
85. Zašto je kockanje zarazno
Promenljiva nagrada, iluzija kontrole.
86. Pet fontova koje je Masimo Vinjeli smatrao dovoljnim
Bodoni, Helvetica, Times New Roman, Century, Futura.
87. Prepoznaj bar 24 fonta na prvi pogled
Vežbaj prepoznavanje popularnih fontova.
88. Gde naći inspiraciju
Dribbble, Behance, Awwwards.
89. Psihologija cena: Zašto elitni restorani izbegavaju decimalne iznose?
Elegantnije je – cena nije fokus.
90. Pet načina da smanjiš haos na stranici
Ukloni nepotrebno, smanji vizuelni šum, grupisi elemente.
91. Efekt besplatnog
Ljudi mnogo više vole besplatne stvari nego one sa simboličnom cenom.
92. Razlika između Helvetica i Arial
Helvetica ima ravne terminale, Arial je mekši.
93. Pet alternativa Helvetica i Arial
Inter, Roboto, Acumin, Nimbus, Neue Haas Unica.
94. Kako postavljati pitanja bez uticaja na odgovor
Koristi otvorena pitanja, izbegavaj sugerisanje.
95. Prirodni korisnički putevi
Kada korisnici sami pronađu način da zaobiđu tvoj dizajn (npr. gazeći travu umesto korišćenja trotoara), to je znak da tvoje rešenje ne odgovara njihovim stvarnim potrebama. Umesto da ih „kažnjavaš“, bolje je proučiti te organike puteve i adaptirati dizajn na njih.
96. Kako bi izgledalo da je magija
Ponekad najbolja rešenja dolaze iz razmišljanja bez ograničenja.
97. Raspored kreativaca vs menadžera
Dizajnerima treba neprekinuto vreme za rad, menadžerima kraći sastanci.
98. Ko je tvoj idealni klijent
Definiši ga – onda možeš ciljano da radiš ka tome.
99. Balans između visine i dužine linije
Duže linije zahtevaju veći line height radi lakšeg čitanja.
Zaključak
Dizajniranje za ljude je istovremeno umetnost i nauka – zahteva strpljivo posmatranje, analizu i kreativno rešavanje problema. Ovo je samo deo ogromne slagalice znanja koja čini dobar UX/UI dizajn. Ključ je uvek ostati radoznao, testirati svoje pretpostavke i ne prestajati da učiš.
Najbolji dizajneri ne prave samo lepe stvari – prave stvari koje funkcionišu i olakšavaju život korisnicima.
Kreni od osnova, eksperimentiši, i najvažnije – slušaj svoje korisnike (čak i kada kažeš da ne treba da ih slušaš bukvalno 😉).