I bez da govorimo o Windowsima 8, koji su u svojoj suštini donijeli fundamentalnu podršku za interakciju s korisnikom putem ekrana osjetljivih na dodir, svakog se mjeseca predstavi nekoliko novih uređaja s takvim ekranima. Vjerojatno ste i sami svjesni izazova koji stoje pred vama, ukoliko razvijate aplikacije kojima je primarni način interakcije putem ekrana osjetljivih na dodir. Ovdje neće biti riječi o programiranju, ovdje će biti riječi o onome što mnogi smatraju ključnom pretpostavkom uspjeha kod sve zahtjevnijih kupaca i korisnika - o dizajnu i korisničkom sučelju. Velike su razlike između dobre i loše dizajnirane aplikacije, ali malene su razlike između dobre i vrhunske aplikacije, a upravo su to stvari o kojima ću pričati na ovom predavanju, iz iskustva nekoga tko je dizajnirao touch screen aplikacije i prije nego što je prvi iPad bio u planu.

1. Dizajn za touch screen
Emanuel Blagonić
Blagonić Brothers

3. Isključite zvuk telefona

7. Na koji način vršimo interakciju?

8. Dizajner VS Developer

10. Dizajner Developer

11. Jesu li developeri u većini na
ovom predavanju?

12. Mi stvaramo proizvod

14. U trenutku kada se mijenja
način rada u aplikacijama

15. Koliko ljudi u publici ima
pametni telefon?

17. VI STE DIZAJNERI!

18. Ne mijenjajte navike
Ako ste do sada radili dobre aplikacije,
raditi ćete ih i dalje

19. Pripazite na:
boje, tipografiju, raspored
elemenata i ikone

20. Nativna VS Web aplikacija

21. Različit pristup dizajnu

22. Radite li nativnu aplikaciju,
koristite propisane elemente.

23. Radite li web aplikaciju,
nemojte pretjerati sa ...

24. “Sastojci” dobre touch screen aplikacije

25. 1. Rješava li problem?

26. 2007.

30. Definirajte prvo problem, a
onda rješenja. Krenite s
wireframeovima.

31. 2. Olakšava li korištenje?

32. 2012.

37. Zapišite stvari koje možete/
želite popraviti/poboljšati.

38. 3. Je li jasna za korištenje?

39. Hoće li aplikaciju moći
jednostavno koristiti – vaša
ciljana publika?

40. Konobaru je dovoljno 10 minuta
obuke za rad da bi mogao
početi koristiti POS Sector.
– Haris Čusto, POS Sector

41. Dizajn za touch screen

42. A wonderful interface to the
wrong features will fail.
– Jakob Nielsen

43. Prije početka – postavite prava pitanja...

44. 1. Koja je namjena aplikacije?

46. 2. Gdje će se koristiti
i na kojim uređajima?

48. 3. Tko će koristiti aplikaciju?

50. I kada ste ovo odgovorili...

51. Krenite s wireframeovima*

52. People ignore design that
ignores people.
– Frank Chimero

53. 2012.

55. Prije početka rada na Smart
Housekeepingu, dobili smo detaljnu
dokumentaciju i inicijalne
wireframeove.

56. Sve smo zanemarili!

57. Krenuli smo razraditi sučelje i
interakcije – na papiru.

59. Nakon čega smo izradili low-fidelity
interaktivni mockup.

62. Bez interaktivnih wireframeova izgubili
bismo dragocjeno vrijeme i ne bismo
mogli testirati sučelje u tako ranoj fazi.

64. Iskoristite whiteboard kako
biste skicirali osnovne
predloške i interakcije.

65. Testirajte na pravim
uređajima kako biste
provjerili npr. površinu klika
i tipografiju.

66. Boje, gradijenti i sjene

67. Boje su svugdje oko nas

70. http://www.colorschemer.com/
https://kuler.adobe.com/

71. Boje odaberite ovisno o
ciljanoj publici i tematici
aplikacije.

72. Ne pretjerujte s kontrastom.

73. JAKI KONTRAST

74. #000 #fff
#ccc #444

75. S gradijentima pažljivo

76. Ne zaboravite: svijetlo uvijek
dolazi “od gore”.

77. Submit
Submit

78. Iskoristite sjene (i drukčije tonove) za
prikazivanje dubine

80. Ovo se nalazi
iznad ekrana.

81. Tipografija
Tipografija Tipografija
Tipografija
Tipografija
Tipografija Tipografija
Tipografija Tipografija
Tipografija
Tipografija
Tipografija Tipografija
Tipografija

82. Radite li nativnu aplikaciju –
poštujte standarde.

83. Radite li web aplikaciju –
odaberite prikladnu
tipografiju.

84. Kako odabrati pravi font?

85. 1Illustration
1Illustration
1Illustration
1Illustration

86. aegh! iIl1
aegh! iIl1
aegh! iIl1
aegh! iIl1

87. Veličinu slova definirajte
prema uređaju za koji
dizajnirate.

88. 16, 18, 21, 24 piksela
za mobilne uređaje

89. 18, 21, 24, 36 piksela
za tablete

90. 21, 24, 36, 48 piksela
za desktop računala

91. Verdana i Tahoma
za sitan tekst

92. Vodite računa o jeziku

93. return
retour
zurückkommen
povratak

94. Odaberite uži font ako ćete
imati duge riječi.

95. http://ilovetypography.com/
http://www.typetester.org/

96. Poravnanje / grid

98. Radeći po gridu, povećavate
preglednost te olakšavate
korištenje vaše aplikacije.

100. Grupirajte elemente sličnih
funkcionalnosti kako biste
ubrzali rad u aplikaciji.

101. Ikone

102. A picture is worth a thousand
words. An interface is worth
a thousand pictures.
– Ben Schneiderman

104. Podižu uporabljivost aplikacije
I nema potrebe da imate dodatni tekst...

105. Prije početka odlučite kakve
ikone trebate – jednobojne ili
u boji.

106. Radite li web aplikaciju,
svakako koristite icon font.

107. http://subway.pixle.pl/
http://www.iconswindows.com/
http://icons8.com/
http://icomoon.io/

108. Budite originalni!

113. Every child is an artist. The
challenge is to remain an
artist after you grow up.
– Pablo Piccasso

114. Pitanja i odgovori

115. Želite li nastaviti ovaj
razgovor na kavi? Javite se!
( ja pijem kavu sa šlagom:)

116. Hvala!
emanuel@blagonic.com
twitter.com/emanuelblagonic
www.blagonic.com