[HR] Interakcije 101

Uvod u dizajn interakcije kroz tri točke: dizajn kao alat, dizajn kao inspiracija i dizajn kao način razmišljanja.

"Prazni" slideovi prikazuju video materijale.

Transcript

1. Uvod u oblikovanje interaktivnih medija i korisničkih iskustava
   Tin Kadoić
   FER 05.11.2012.
   Interakcije 101
   

   View Slide

2. 1 @tinkadoic
   

   View Slide

3. ljeto 85’
   

   View Slide

4. LEGO h p://www.flickr.com/photos/kwl/3497587443/
   

   View Slide

5. Turbo Pascal 7.0 h p://www.flickr.com/photos/66011859@N04/7013119175/
   

   View Slide

6. prvi posao
   

   View Slide

7. MIOC FER
   Studij dizajna
   Brlog
   MCWC
   Parsons school of Design
   Danas
   

   View Slide

8. MIOC FER
   Studij dizajna
   Brlog
   MCWC
   Parsons school of Design
   Danas
   

   View Slide

9. MIOC FER
   Studij dizajna
   Brlog
   MCWC
   Parsons school of Design
   Danas
   

   View Slide

10. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas
    

    View Slide

11. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas
    

    View Slide

12. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas
    

    View Slide

13. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas
    

    View Slide

14. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas
    

    View Slide

15. što sam naučio
    

    View Slide

16. Dizajn je strast, a ne profesija
    Andy Rutledge, Design professionalism
    

    View Slide

17. Stvari nisu uvijek onakve
    kakvima se čine
    

    View Slide

18. Uvijek budite prisutni online
    

    View Slide

19. 2 interaction
    design
    

    View Slide

20. 1980-tih Moggridge i Verplank,
    prvi puta koriste termin
    interaction design, tj. IxD
    

    View Slide

21. termin se referira na
    proizvode industrijskog
    dizajna koji sadrže so ware
    

    View Slide

22. — 1990 Royal College of Art
    — 2001 Institut IVREA
    — 2007 CIID
    

    View Slide

23. Danas se predaje diljem svijeta
    — Zagreb, Studij Dizajna
    — Split, UMAS
    

    View Slide

24. About Face 3 — The essentials of Interaction Design
    

    View Slide

25. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    About Face 3 — The essentials of Interaction Design
    

    View Slide

26. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    Sadržaj
    informacijski arhitekti
    copywriteri
    animatori
    dizajneri zvuka
    About Face 3 — The essentials of Interaction Design
    

    View Slide

27. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    Sadržaj
    Ponašanje
    informacijski arhitekti
    copywriteri
    animatori
    dizajneri zvuka
    Dizajneri
    interakcija
    About Face 3 — The essentials of Interaction Design
    

    View Slide

28. the guiding principle of
    interactive media is not
    narrative — it is behaviour
    Khoi Vinh
    

    View Slide

29. About Face 3 — The essentials of Interaction Design
    

    View Slide

30. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici
    

    View Slide

31. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici
    ...
    

    View Slide

32. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici
    ...
    Iniciraju
    Menadžeri
    Dizajn
    Dizajneri
    Build
    Programeri
    Test
    QA
    Proizvod
    Korisnici
    

    View Slide

33. 3 dizajn
    kao alat
    

    View Slide

34. Web
    — ORYX Grupa, Brlog
    — USA Today, FI
    — HTZ, SD
    

    View Slide

35. ORYX Grupa h p://www.oryx-grupa.hr
    2011. Rebranding AMC-a
    ORYX Slobodno se zabavi
    

    View Slide

36. ORYX Grupa — Zatečeno stanje h p://www.oryx-grupa.hr
    

    View Slide

37. ORYX Grupa — IA h p://www.oryx-grupa.hr
    ORYX-GRUPA.HR + + +
    ORYX FB
    ORYX TW
    ORYX YT
    ORYX FL
    ASIS TW AŠ FB
    ASISTENCIJA RENT A CAR AUTOŠKOLA CENTAR ZA S V OSIGURANJE STANICA ZA TP
    DIGITALNI EKOSUSTAV 2011 ©BRLOG
    MAGAZIN
    1
    PRESS KUTAK
    2
    O NAMA
    4
    USLUGE
    3
    KONTAKT
    5
    USLUGE
    1
    FLOTA
    2
    POSLOVNICE
    3
    PRAVILA / PODRŠKA
    4
    TURISTIČKE INFO
    5
    O NAMA
    6
    KONTAKT
    7
    PREDNOSTI
    1
    CIJENE
    3
    ONLINE AŠ
    4
    USLUGE
    2
    TRENING
    1
    PO VOZILU
    .1
    PRISTUP
    .1
    VOZILA
    .2
    NAJAM VOZILA
    .1
    TRANSFER
    .2
    Lease 4 bizz
    .3
    CARGO
    .4
    INOZEMSTVO
    .7
    LIMO
    .6
    DODATNA OP
    .8
    AKTUALNO
    .9
    USLUGE
    .1
    UVOD
    .0
    UČLANI SE
    .5
    KATEGORIJE
    .1
    TAGOVI
    .2
    O NAMA
    .1
    GRUPACIJA
    .2
    KARIJERA
    .3
    PAKETI
    .2
    UŠTEDA
    .4
    CIJENE
    .3
    USLUGE
    .1
    UVOD
    .0
    UČLANI SE
    .5
    PAKETI
    .2
    UŠTEDA
    .4
    CIJENE
    .3
    TWITTER FEED
    .1
    HAC VIJESTI
    .2
    KAMERE
    .3
    VRIJEME
    .4
    KORISNO
    .5
    MAPA
    .1
    ZA TURISTE
    .2
    STANJE U P
    .3
    UVJETI KORIŠ
    .1
    FAQ
    .2
    FEEDBACK
    .3
    ZAPOSLENICI
    .3
    PRAĆENJE
    .1
    ISPITI
    .2
    UPIS
    .3
    NOVI VOZAČI
    .1
    POSTOJEĆI V
    .2
    KORPORATIVNE
    .3
    DODANA VRIJ
    .4
    GDJE SMO
    .5
    OSOBA
    .1
    IMOVINE
    .2
    VOZILA
    .3
    TRANSPORTA
    .4
    ODGOVOR.
    .5
    ALLIANZ
    .1
    CO
    .2
    EUROHERC
    .3
    PO TIPU
    .2
    ŠTO NUDIMO
    .1
    REF. LISTA
    .2
    EVENTI
    2
    CIJENE
    3
    O NAMA
    4
    KONTAKT
    5
    OSIGURANJE
    2
    KALKULATOR
    1
    PARTNERI
    3
    FAQ
    4
    OSIGURANJE
    2
    PRIPREMA
    3
    KALKULATOR
    1
    GDJE SMO
    4
    O NAMA
    5
    KONTAKT
    6
    ZABAVA
    5
    O NAMA
    6
    KONTAKT
    7
    O NAMA
    5
    KONTAKT
    6
    ČLANSTVO
    1
    POMOĆ NA CESTI
    2
    POMOĆ NA MORU
    3
    KARTA
    4
    STANJE U PROMETU
    5
    O NAMA
    6
    KONTAKT
    7
    KORISNICI
    ?
    - MOTOCIKLI
    - OSOBNI I KOMBIJI
    - KAMIJONI I AUTOBUSI
    * GENERALNO ŠTO JE OSIGURANJE +
    ODABIR TIPOVA OSIGURANJA
    - TSV
    - EKO DRIVE
    - POSEBNI TRENINZI
    * PAMETAN WIZARD
    KALKULATOR SVIH CIJENA
    * PAMETAN WIZARD ZA ODABIR
    VRSTE I PAKETA ASISTENCIJE.
    DOLAZIMO DO SADRŽAJA IZ
    KATEGORIJE 2 ILI 3
    * SVI ČLANCI SE KROZ
    TAGIRANJE I POVEZANE
    USLUGE PRIKAZUJU NA SVIM
    SESTRINJSKIM PORTALIMA
    NOVOSTI VEZANE UZ ORYX
    GRUPU I PRESS OBJAVE
    * SVI ČLANCI SE KROZ
    TAGIRANJE I POVEZANE
    USLUGE PRIKAZUJU NA SVIM
    SESTRINJSKIM PORTALIMA
    * INTERAKTIVNA LISTA SVIH
    REFERENCI SA GALERIJAMA
    KOD NEKIH DOGAĐAJA
    * USPOREDNE CIJENE SVIH
    TRENINGA ZA VOŽNJU
    

    View Slide

38. ORYX Grupa — WF h p://www.oryx-grupa.hr
    oryx branding
    oryx grupa / asistencija / rentacar / autoškola / centarsv / osiguranje / stanica tp
    magazin - press kutak - usluge - o nama - kontakt
    search (+autocomplete)
    social
    button
    fotografija
    ili piktogram
    izdvojeni clanak / fotografija
    nekoliko izdvojenih clanaka - 1 - 2- 3
    kategorija
    naziv clanka
    usluge
    najviše / zadnje komentirane
    link na detaljno stanje
    prognoza
    live zadnje stanje na cesti
    (ili zadnji tweet)
    izdvojena usluga
    saznaj više
    karta
    kratki uvod (”lead”)
    kratki uvod (”lead”)
    saznaj više broj komentara ikone za vezane usluge
    1 tema naslov
    naše usluge
    novi vozači postojeći korporativno jednom
    traffic info
    hr
    

    View Slide

39. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

40. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

41. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

42. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

43. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

44. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

45. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

46. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

47. ORYX Grupa h p://www.oryx-grupa.hr
    

    View Slide

48. USA Today h p://www.usatoday.com
    

    View Slide

49. USA Today h p://www.usatoday.com
    

    View Slide

50. USA Today h p://www.usatoday.com
    

    View Slide

51. USA Today h p://www.usatoday.com
    

    View Slide

52. Hrvatska Turistička zajednica, Sandro Dujmenović
    

    View Slide

53. Hrvatska Turistička zajednica, Sandro Dujmenović
    

    View Slide

54. Hrvatska Turistička zajednica, Sandro Dujmenović
    

    View Slide

55. Hrvatska Turistička zajednica, Sandro Dujmenović
    

    View Slide

56. Web aplikacija
    — Honey™, Brlog
    — Basecamp, 37Signals
    

    View Slide

57. Honey™ -
    

    View Slide

58. Basecamp h p://www.basecamp.com
    

    View Slide

59. Basecamp h p://www.basecamp.com
    

    View Slide

60. Basecamp h p://www.basecamp.com
    

    View Slide

61. Mobilna aplikacija
    — wasHere, Brlog
    — Clear, Realmac
    — Kaminata, SD
    

    View Slide

62. wasHere h p://washere.brlog.biz
    

    View Slide

63. Clear h p://www.realmacso ware.com/clear/
    

    View Slide

64. Clear h p://www.realmacso ware.com/clear/
    

    View Slide

65. Kaminata, Iva Hrvatin
    

    View Slide

66. Kaminata, Iva Hrvatin
    

    View Slide

67. Web gaming
    — Studena, Brlog
    — Axon, Preloaded
    

    View Slide

68. Studena te vodi u London h p://brlog.biz/studena-case-study
    

    View Slide

69. Studena te vodi u London h p://brlog.biz/studena-case-study
    

    View Slide

70. Axon
    

    View Slide

71. Axon
    

    View Slide

72. Prostorna instalacija
    — B&Ž izložba, Brlog
    — Walk the light, Cinimod
    

    View Slide

73. B&Ž izložba h p://www.izlozba.biz
    

    View Slide

74. B&Ž izložba h p://www.izlozba.biz
    

    View Slide

75. Walk The Light h p://cinimodstudio.com/project/walk-the-light-at-the-va/
    

    View Slide

76. Walk The Light h p://cinimodstudio.com/project/walk-the-light-at-the-va/
    

    View Slide

77. 4 dizajn kao
    inspiracija
    

    View Slide

78. nove metode otvaraju
    mogućnost za nove ideje
    

    View Slide

79. Kickstarter h p://www.kickstarter.com
    

    View Slide

80. Studio Neat
    

    View Slide

81. Studio Neat
    

    View Slide

82. Makey Makey
    

    View Slide

83. Makey Makey
    

    View Slide

84. inspiracija u dizajnu kao
    benchmark za dobre stranice
    

    View Slide

85. Styleboost h p://styleboost.com
    

    View Slide

86. dimenzija vremena, tj. kako
    se digitalni proizvod koristi
    

    View Slide

87. Hoverstat.es h p://hoverstat.es
    

    View Slide

88. Hoverstat.es h p://hoverstat.es
    

    View Slide

89. mobilne aplikacije mogu
    biti dobro oblikovanje
    

    View Slide

90. Android niceties h p://androidniceties.tumblr.com
    

    View Slide

91. 5 dizajn
    kao način
    razmišljanja
    

    View Slide

92. zašto stvaratelji moraju
    razmišljati poput računala?
    

    View Slide

93. Creators need to be able to
    see what they are doing.
    Bret Victor
    

    View Slide

94. Scrubbing calculator
    vs
    60 + 140 + (8 x 20) + (9 x y) = 768
    h p://worrydream.com/ScrubbingCalculator
    

    View Slide

95. Scrubbing calculator
    vs
    60 + 140 + (8 x 20) + (9 x y) = 768
    h p://worrydream.com/ScrubbingCalculator
    

    View Slide

96. Dynamic pictures h p://worrydream.com/DynamicPicturesMotivation/
    

    View Slide

97. Dynamic pictures h p://worrydream.com/DynamicPicturesMotivation/
    

    View Slide

98. kako fokusom i redukcijom
    dolazimo do novih pristupa
    i proizvoda
    

    View Slide

99. ... it is simplicity that is
    difficult to make.
    Bertholdt Brecht
    

    View Slide

100. IA writer h p://www.iawriter.com
     

     View Slide

101. IA writer h p://www.iawriter.com
     

     View Slide

102. NYT h p://andyrutledge.com/news-redux.php
     

     View Slide

103. NYT h p://andyrutledge.com/news-redux.php
     

     View Slide

104. konstantna edukacija
     kao ključ uspjeha
     

     View Slide

105. ALA h p://www.alistapart.com
     

     View Slide

106. ALA h p://www.alistapart.com
     

     View Slide

107. ALA h p://www.alistapart.com
     

     View Slide

108. A book apart h p://www.abookapart.com
     

     View Slide

109. ReWork h p://37signals.com/rework
     If given a choice between investing in someone who has read
     REWORK or has an MBA, I’m investing in REWORK every time.
     A must read for every entrepreneur.
     Mark Cuban, co-founder HDNet, owner of the Dallas Mavericks
     rework
     

     View Slide

110. FFWD pro 2012 h p://2012.ffwd.pro/
     

     View Slide

111. 6 budućnost
     

     View Slide

112. budućnost je uzbudljiva
     

     View Slide

113. keyword responsive
     

     View Slide

114. Responsive layout h p://bostonglobe.com
     

     View Slide

115. Responsive typography h p://informationarchitects.net/blog/responsive-typography/
     

     View Slide

116. Responsive images h p://www.teehanlax.com/blog/readability-ipad-retina/
     

     View Slide

117. keyword kinect
     

     View Slide

118. V motion h ps://vimeo.com/45417241
     

     View Slide

119. V motion h ps://vimeo.com/45417241
     

     View Slide

120. keyword 3d printing
     

     View Slide

121. Shapeways h p://shapeways.com
     

     View Slide

122. Shapeways h p://shapeways.com
     

     View Slide

123. keyword arduino
     

     View Slide

124. Bakertweets, Poke London h p://bakertweets.com
     

     View Slide

125. Bakertweets, Poke London h p://bakertweets.com
     

     View Slide

126. Make something you love,
     and others will love it too.
     Simon Collins
     

     View Slide

127. * hvala
     @tinkadoic
     h p://brlog.biz
     h p://studijdizajna.com
     

     View Slide