Stano Rykalský je ako UX designer v službách najväčšieho slovenského UX štúdia, Lighting Beetle a okrem toho, že pracoval na projektoch pre Martinus, Telekom, Orange či Union navrhol a testoval už 10ky prototypov. Ako sám hovorí, pre dosiahnutie dokonalého dizajnu je kľúčová najmä počiatočná fáza. Nevyhnutným krokom je preto svoje návrhy vyskúšať a opakovane testovať na prototype. Až po tomto kroku môžme pristúpiť k vizuálnemu návrhu. Výsledkom je tak nový user interface, ktorý používateľov nezmätie, ale naopak uľahčí ich orientáciu. Ale ako si vybrať vhodný prototyp a čo by mal obsahovať? Tejto téme sa Stano venoval na Noc UX Designu, 19.03.18 v KC Dunaj - prezentáciu uverejňujeme.

1. Validujte svoj koncept efektívne:
Prototypovanie
Stanislav Rykalský LB*

2. Stanislav Rykalský
UX designer z LB*
Klienti:
Martinus, Orange, Telekom, Európske
agentúry, Asseco Solutions, Union...

3. Cross-functional Team
DeveloperKlient UXákProjekťák Grafik

4. Ako to mám nadizajnovať?

5. Ako otestovať svoj dizajn čo najskôr?

6. 3 úrovne detailnosti prototypu
fidelity

8. 1 Low-fidelity (základný koncept)

9. Rýchle zhmotnenie vašich prvotných nápadov
pre následnú validáciu s kolegami, klientom či
používateľmi.

11. ➔ Základný layout
➔ Prepojenie obrazoviek
➔ Naznačený user flow
➔ Hlavné CTA
➔ Nadpisy a popisky
➔ Navigáciu (aspoň približne)
Čo by mal obsahovať

12. ➔ Obrázky
➔ Grafiku
➔ Interaktivitu
➔ Plain texty
Čo nemusí obsahovať

13. ➔ Riešime kľúčové problémy?
➔ Jednoduchosť
➔ Technické limitácie
Čo nám umožňuje zistiť

14. ➔ Expert review
➔ S klientom
➔ S používateľmi (interview)
Ako testujeme / validujeme

15. 2 High-fidelity

16. Testovanie nášho konceptu s koncovými
používateľmi (tzv. usability testing)

18. ➔ Kľúčové stavy obrazovky
➔ Interaktivitu (click, tap, swipe,...)
➔ Finálne texty, labele a popisky
➔ Ilustračné obrázky
➔ Zmysluplné ikony
Čo by mal obsahovať

19. ➔ Grafiku a farby
➔ Lorem Ipsum texty
Čo nemá obsahovať

20. ➔ Vplyv layoutu, ikon, textov
➔ Informačnú architektúru
➔ Navigáciu
➔ Užitočnosť funkcionalít
a ich umiestnenie
Čo nám umožňuje zistiť

21. ➔ Guerilla testing
➔ Click testing
➔ Usability testing v UXlabe
Ako testujeme / validujeme

22. 3 Mockup (šperkujeme)

23. Hi-fi prototyp vo finálnom grafickom
a obsahovom prevedení

25. ➔ Všetko, ako finálny web
➔ Poznámky pre developerov
Čo by mal obsahovať

26. Čo nemá obsahovať
X

27. ➔ Dopad grafiky na použiteľnosť
➔ Pritiahnutie pozornosti - napr. všimnú si
používatelia toto CTA?
➔ Prístupnosť
Čo nám umožňuje zistiť

28. ➔ Usability testing v UX labe
➔ In-field testovanie
➔ Eye-tracking
Ako testujeme / validujeme

29. Low-fidelity (koncept)1
High-fidelity (testujeme)2
Mockup (šperkujeme)3

30. Pro tip #1 - Experimentujte
Hľadaj spôsob ako otestovať / validovať
miesta v koncepte, ktorými si nie si istý

31. Pro tip #2 - Iterujte počas testovania (gt)
Nápady na zlepšenie konceptu iterujte
medzi jednotlivými sedeniami

34. Ďakujem