4. poslovno predavanje u sklopu Software StartUp Academy Osijek - Andrej Mlinarevic 'Wireframing & UI design'

1. twitter: @amlinarev
medium: @amlinarev
andrej@mono.hr
Prototyping

3. UX &
UXD

4. User eXperience
Svi aspekti interakcije krajnjeg korisnika sa
tvrtkom, njenim uslugama i proizvodima.
JAKOB NIELSEN & DON NORMAN

5. User Experience Design
Proces unaprijeđivanja zadovoljstva i lojalnosti
korisnika poboljšavajući iskoristivost, lakoću
korištenja i zadovoljstvo u interakciji s proizvodom.
WIKIPEDIA (UXD)

6. Korisnički &
poslovni ciljevi

7. Korisnički ciljevi Poslovni ciljevi
Gledanje videa
Čitanje članka
Postanje statusa
Slanje pošte
Chat
Prodaja
Brand awareness
Gradnja zajednice
Prikupljanje
podataka
A B

8. Usklađivanje ciljeva
Korisnikov dolazak do cilja
rezultira poslovnim ciljem.BA

9. Cilj?

10. Cilj?

11. Elementi
korisničkog
iskustva

12. 01
Psihologija
Što motivira korisnika?
Što očekuju slijedeće?
Koje potrebe ispunjuju?
Nagrađujemo li vjernost?
Kako se osjećaju?
…

13. 02
Upotrebljivost
Kako skratiti put do cilja?
Može li svatko pristupiti sučelju bez
obzira na predznanje?
Je li iskustvo dostupno i osobama
s invaliditetom?
…

14. Dizajn
Što korisnici misle o dizajnu?
Ulijeva li povjerenje na prvi pogled?
Unosi li dizajn povjerenje?
Vodi li dizajn korisnike pravim putem?
Komunicira li dizajn svoju svrhu?
Ima li previše “dizajna”?
…
03

15. Copywriting
Ulijeva li copy povjerenje?
Jesu li informacije točne?
Smanjuju li neizvjesnost?
Prodaju li ili pomažu?
04

16. Analiza
Koristite li provjerene podatke i
dokazane istine kako bi potvrdili nešto?
Koristite li podatke da bi naučili
istinu ili dokazali da ste u pravu?
Analizirate li ponašanje korisnika?
Koristite li realne podatke pri procjenama?
…
05

17. Razumijevanje
korisničkih
potreba

18. You are not your users.
— UNKNOWN

19. Marketinška istraživanja
Istraživanje tržišta, potreba potrošača i
tržišnih potencijala.

20. Marketinška istraživanja
Korisnička istraživanja
!=

21. Korisnička istraživanja
— najbolje prije zbog lakoće izmjena prototipa
— upotreba znanstvene metode istraživanja
— subjektivni i objektivni podaci
Što želimo znati o našim korisnicima?

22. If the user can’t use it, it doesn’t work.
— SUSAN DR AY

23. IA

24. Informacijska arhitektura
Organiziranje, kategoriziranje i nazivanje
podataka radi boljeg snalaženja i iskoristivosti.

25. IA odgovara na pitanja
Gdje sam?
Što sam pronašao?
Što je u okolini?
Što mogu očekivati?

26. Komponente IA
Organizacijske sheme i strukture
Sustavi imenovanja / kategoriziranja
Navigacijski sustavi
Sustavi pretrage

27. Organizacijske sheme
Objektivne
Alfabetske sheme
Kronološke sheme
Geografske sheme
Subjektivne
Teme
Zadaci
Publika
Metafore

29. HijerarhijskeSekvencijalne
Organizacijske strukture

32. Navigacijski sustavi
Kolekcije komponenata
korisničkih sučelja s ciljem
pronalaska informacija i
funkcionalnosti.

33. Primarna navigacija

34. Sekundarna navigacija

35. Kontekstualna navigacija

36. Sustavi pretrage

38. Prototyping

39. Tri put’ mjeri, jednom reži.
— STAR A NARODNA

40. Prototip
Prorotip je rani uzorak, model ili inačica proizvoda
izrađena kako bi se testirao koncept, proces ili alat
za učenje.
WIKIPEDIA (PROTOT Y PE )

41. Costofproductchanges
Final stagesInitial stages
Money/Hours
Ekonomika prototipa
Planiranjem i prototipiranjem
sustava smanjuju se troškovi
i eliminiraju viškovi.

42. Koristi od prototipa
Feature analiza
Agilni pristup — brze iteracije
Alat za testiranje prije razvoja
Alat za istraživanje tržipta
Shvaćanje projekta i učenje
Dokazivanje potreba

43. Proof-of-Principle Prototype
Form Study Prototype
Vrste prototipa

44. Proces prototipiranja
Skica
Prototip
Testiranje

45. Wireframe vs Prototype
Wireframe
Osnovne informacijske grupe
Layout
Osnovna vizualizacija
Prototip
Srednja/visoka razlučivost
Simulacija interakcije
User flow testing alat

46. MockFlow
BalsamiQ
InVision
Sketch
Illustrator
InDesign
Photoshop
Gimp
Inkscape
proto.io
Marvel
JustInMind
...
Alati

47. Low fidelity
prototype

48. High fidelity
prototype

49. Vizualni dizajn

50. F uzorak

51. Vizualna hijerarhija — veličina
Drugo?
Prvo ili

52. Vizualna hijerarhija — kontrast
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.
Lorem ipsum dolor omet.

53. Odabir tipografije
Ton tipografije
Typesetting
Tipografska hijerarhija
Readability & Legibility
Tipografski ritam
…
Tipografija

54. Čitljivost
Gojazni đačić s biciklom drži
hmelj i finu vatu u džepu
nošnje.
Gojazni đačić s biciklom drži
hmelj i finu vatu u džepu
nošnje.
Gojazni đačić s biciklom drži hmelj i finu vatu u
džepu nošnje. Gojazni đačić s biciklom drži hmelj i
finu vatu u džepu nošnje. Gojazni đačić s biciklom
drži hmelj i finu vatu u džepu nošnje.
Gojazni đačić s biciklom drži hmelj i finu vatu u
džepu nošnje. Gojazni đačić s biciklom drži hmelj i
finu vatu u džepu nošnje. Gojazni đačić s biciklom
drži hmelj i finu vatu u džepu nošnje.

55. Content first
Context first
Mobile first

56. Content first
— sadržaj je cilj
— dizajn sadržaja
— vrijednost za korisnika
— prvo sadržaj, onda sučelje

57. Context first
Sadržaj se kreira ovisno
o korisnikovu kontekstu
(lokacija, vrijeme, podaci
sa uređaja i sl.).

58. Mobile first
Sučelje se kreira od
najjednostavnijeg s osnovnim
funkcijama prema kompliciranijim
s naprednim funkcijama.
Compatibility
Progressive enhancement
Gracefull degradation
Progressive enhancement
vs
gracefull degradation

59. Hvala!
Pitanja?

60. www.mono-software.com
twitter.com/monosoftware
denis@mono-software.com
Looking for work?
We are hiring!

61. Workshop:
Prototyping with Balsamiq