Keynote intro for SME Workshop at Accademia Bologna 2009

1. WORKSHOP
JAVAGROUND
Referente Aziendale: LUDOVICO CELLENTANI
Tutor Workshop: TADDEO ZACCHINI

5. Lifestream

7. Musica

9. Microblogging

11. Foto

13. Video

17. Condivisione

20. =

21. !

43. 3G

44. GPS

45. CLOUD

49. http://www.fubiz.net/2009/03/17/microsoft-sustainability/

52. iPhone

54. 3G

58. Design

59. Design
Usabilità

60. Design
Usabilità
Interfaccia

61. Design Tecnologico
Usabilità
Interfaccia

62. Design Tecnologico
Usabilità Esperienza
Interfaccia

63. Design Tecnologico
Usabilità Esperienza
Interfaccia Creatività

64. Interfaccia
l’importanza del buon Design

66. Home

67. Icone
Home

72. Feedback

73. Feedback
Affordance

74. Feedback
Affordance
Tipografia

76. Icone

77. Icone Metafore

79. Ingombri

80. Ingombri
Icone

82. Anteprima

83. Anteprima

85. Metafore

86. Metafore
Colori

87. Metafore
Colori
Highlight

89. Animazioni

91. Keyboard

92. Keyboard

95. Safari

97. Interazione
multi-touch

98. Scrolling

99. Accelerometro

100. Accelerometro

101. Zoom

102. Premuto

103. Double tap

104. Drag & Drop

105. Esempi

106. Facebook

107. Remote

108. Shazam

109. Spore

110. Ocarina

111. Weightbot Convertbot

112. ? ?
?
Come progettare
le idee

113. 1° Brainstorming

114. 1° Brainstorming

115. 1° Brainstorming
Touch

116. 1° Brainstorming
Touch
Audio

117. 1° Brainstorming
Touch
Audio
Posizione

118. 1° Brainstorming
Touch
Audio
Posizione
Remote

119. 1° Brainstorming

120. 1° Brainstorming
Interazioni fisiche:
Touch - multi-touch
- accelerometro

121. 1° Brainstorming
Interazioni fisiche:
Touch - multi-touch
- accelerometro
Spore

122. 1° Brainstorming

123. 1° Brainstorming
Come il suono Audio
può interagire
con l’utente
e con il dispositivo

124. 1° Brainstorming
Come il suono Audio
può interagire
con l’utente
e con il dispositivo
Ocarina

125. 1° Brainstorming

126. 1° Brainstorming
Riconoscimento della
posizione del device:
- geotag
- mappe
...
Posizione

127. 1° Brainstorming

128. 1° Brainstorming
Controllo a distanza
di altri dispositivi
Remote

129. 1° Brainstorming
Controllo a distanza
di altri dispositivi
Remote Remote

130. 1° Brainstorming

131. 1° Brainstorming
Touch:
sfregare, premuto, utilizzo di più dita, rotazione,
scuotere, vibrare ...

132. 1° Brainstorming
Touch:
sfregare, premuto, utilizzo di più dita, rotazione,
scuotere, vibrare ...
Audio:
soffiare, urlare, registrare, riconoscere un suono ...

133. 1° Brainstorming
Touch:
sfregare, premuto, utilizzo di più dita, rotazione,
scuotere, vibrare ...
Audio:
soffiare, urlare, registrare, riconoscere un suono ...
Posizione:
geotaggare le fotografie, l’audio, il video, ogni tot km ...

134. 1° Brainstorming
Touch:
sfregare, premuto, utilizzo di più dita, rotazione,
scuotere, vibrare ...
Audio:
soffiare, urlare, registrare, riconoscere un suono ...
Posizione:
geotaggare le fotografie, l’audio, il video, ogni tot km ...
Remote
cotrollare il computer, tv, casa, automobile ...

135. 2° Brainstorming

136. 2° Brainstorming

137. 2° Brainstorming
Musica
Life
Luogo
Video
Foto

138. 2° Brainstorming

139. 2° Brainstorming
?
?
?
?
?

140. 2° Brainstorming
Geotaggare la To do list
tua posizione e condivisa
condividerla con
i tuoi amici della
rubrica
Condividere Appuntarsi note
tutto quello che visive e sonore
si fa con il e condividere il
dispositivo progetto
mobile:
lifestreaming

141. 2° Brainstorming

142. 2° Brainstorming
Ideare un servizio:
Trovare idee riguardo la realizzazione di applicazioni-
servizi di condivisione su dispositivi mobili ...

143. Personas

144. Personas
* Personas sono personaggi
fittizi creati per rappresentare
diversi tipi di utenti

145. Personas
* Personas sono personaggi
fittizi creati per rappresentare
diversi tipi di utenti
* Personas sono utili per
definire gli obiettivi, i limiti e i
desideri degli utenti

146. Personas

147. Personas
Claire Remì Marco

148. Personas
Claire USA
! Grande lavoratrice
! Amici di lavoro
! Agenda piena
! Puntuale e precisa
! Quando ha tempo fa sport e attività fisiche
! Determinata alla carriera

149. Personas
Remì FRA
! Giovane dinamico
! Studente
! Appassionato di tecnologie
! Blogger attivo
! Hobby: fotografia, arte e sport
! Viaggiatore

150. Personas
Marco ITA
! Famiglia numerosa
! Attaccato alle radici
! Tradizionalista
! Ascolta la radio e la tv
! Rapporto con le tecnologie basso
! Appassionato in giardinaggio e pesca

151. Personas

152. Personas
Tecnologici
Famigliari Moda
Business
Studenti
Viaggiatori
Artigiani
Anziani

154. Successo Esploratore
Semplice Vita

155. Successo Esploratore
Semplice Vita

156. Successo Esploratore
Semplice Vita

157. Successo Esploratore
Semplice Vita

158. Alto
Razionale Ispirazione
Basso

159. Personas

160. Personas

161. Personas
Scegliere una categoria:
viaggiatore, artigiano, business man ...

162. Personas
Scegliere una categoria:
viaggiatore, artigiano, business man ...
Inventare una persona:
Come si chiama? Cosa fa? Età? Nazione? ...

163. Personas
Scegliere una categoria:
viaggiatore, artigiano, business man ...
Inventare una persona:
Come si chiama? Cosa fa? Età? Nazione? ...
Informazioni dettagliate:
Basandosi sulla categoria: Famiglia e vita sociale?
Livello scolastico? Limitazioni fisiche? Giornata tipo? ...

164. Personas
Scegliere una categoria:
viaggiatore, artigiano, business man ...
Inventare una persona:
Come si chiama? Cosa fa? Età? Nazione? ...
Informazioni dettagliate:
Basandosi sulla categoria: Famiglia e vita sociale?
Livello scolastico? Limitazioni fisiche? Giornata tipo? ...
Bisogni e desideri:
Cosa gli piace? Cosa odia? Desideri? Obiettivi?

165. Scenario

166. Scenario

167. Scenario
1°
Brainstorming
+
2°
Brainstorming
+
Personas

168. Scenario

169. Scenario
* Raccontare una storia su come gli
utenti potrebbero usare il servizio

170. Scenario

171. Scenario

172. Scenario

173. Scenario

174. Scenario

175. Scenario

176. Scenario

177. Scenario
Disegnare uno Scenario:
Utilizzare la tecnica dello Storyboard e disegnare
un contesto in cui l’utente si trova a dover
utilizzare il servizio sul dispositivo mobile ...

178. Wireframe & Flowmap

179. Wireframe & Flowmap
* Wireframe: Rappresentazione
grafica stilizzata e “vettoriale”
dell’interfaccia utente

180. Wireframe & Flowmap
* Wireframe: Rappresentazione
grafica stilizzata e “vettoriale”
dell’interfaccia utente
Flowmap: Mappa degli step di
* interazione con l’interfaccia utente

188. Wireframe & Flowmap

189. Wireframe & Flowmap
Disegnare l’interfaccia utente:
Progettare tutte le possibili schermate
dell’applicazione su dei fogli sfusi

190. Wireframe & Flowmap
Disegnare l’interfaccia utente:
Progettare tutte le possibili schermate
dell’applicazione su dei fogli sfusi
Step by step:
Realizzare una flowmap dell’applicazione:
posizionare tutte le schermate in una mappa
cronologica

191. Wireframe & Flowmap
Disegnare l’interfaccia utente: t ormi
ng
Progettare tutte le possibili schermate b rains
+
dell’applicazione su dei fogli sfusi nas &
perso rio
a
scen
Step by step:
Realizzare una flowmap dell’applicazione:
posizionare tutte le schermate in una mappa
cronologica

192. Grazie!
Taddeo Zacchini
www.myfavoritething.net