La presentazione del workshop di Erik Peruzzi e Riccardo Ghignoni "From idea to concept" a Todi Appy Days 2015

1. From
idea
to
concept
…o meglio:
“ma veramente tu stai tutto il giorno a fare disegnini? …o fai anche qualcosa di serio?”

2. Riccardo
Ghignoni
-Designer
Erik
Peruzzi
-Sviluppatore iOS

3. Officina 31
-Collettivo di professionisti nel settore
web / video / marketing.
Siamo 8.
Siamo ad Arezzo.
Organizziamo workshop ed eventi.
www.officina31.it
Siamo su Medium con articoli
medium.com/@officina31

4. Cosa
faremo in
queste 2
ore? ?

5. 1.
Cos’è un prototipo,
perché puo’ servirci,
un caso concreto d’esempio.
15:45

6. 2.
Cosa serve per prototipare,
Cosa sapere prima di cominciare,
Qualche consiglio pratico.
15:45

7. 3.
Un progetto concreto:
Value Proposition, VP Canvas,
Funzionalità, etc.
15:45

8. 4.
Sporchiamoci le mani!!
15:45

10. Lampada
ARCO
Flos - 1962

11. Achille e Piergiacomo
Castiglioni

17. PRO
TO
TI
PO ?

18. Cosa NON E’ un
Prototipo?

22. prototipo
/pro·tò·ti·po/
sinonimo maschile [dal gr. πρωτότυπος, comp. di πρωτο- «proto-» e τύπος: v. tipo].
—
1.
Primo esemplare, modello originale di una serie di realizzazioni successive (spec. con
riferimento a congegni e macchine), costruito, per lo più artigianalmente,
possibilmente nella sua grandezza normale e suscettibile di collaudi e
perfezionamenti, su cui è basata poi la costruzione in serie.
2.
Modello cui si ispirano o sono riconducibili fatti o fenomeni che si verificano in
seguito, a distanza di tempo.

23. Cosa E’ un
Prototipo?

27. prototipo ≠ progetto
Il prototipo è un artefatto (o modello) che possa
avvicinarsi al prodotto finale, in modo da poter essere
sperimentato nel suo reale contesto d’uso.
Il suo scopo è quello di raccogliere feedback al fine di
evolvere il prodotto che stiamo realizzando.

28. Un esempio pratico:
Cartella Clinica Informatizzata

30. Dovrà andare anche sui tablet…

33. SCELTA
PROPOSTA

34. ( METODO )

35. definizione
STRATEGIA
esecuzione
LAVORO
INTUIZIONE PIANO E ANALISI CONSEGNA

36. definizione
STRATEGIA
esecuzione
LAVORO
INTUIZIONE
1. IDEAZIONE
(fase divergente)
CAPIRE e SCOPRIRE
il mercato e l’utenza
interviste
osservazione
benchmark
valutare la strategia
2. DEFINIZIONE
(fase convergente)
DEFINIRE
requisiti
fattibilità
criticità
swot
presentare il piano
DECISIONE
3. PROGETTAZIONE
(fase divergente)
PROGETTARE
comportamenti
approccio
flussi e sistema
sketches e prototypes
realizzare un prototipo
PIANO E ANALISI
4. SVILUPPO
(fase convergente)
SVILUPPO
implementazione
controllo funzionalità
affinamenti
report analisi
consegna progetto
CONSEGNAPROTOTIPO

39. Come funziona cosa
deve fare, a chi è
rivolta…

45. prototipare ponendo
l’attenzione su dei
flussi specifici in
maniera da poterli
testare.

46. Invision
invisionapp.com

49. https://vimeo.com/60660426

50. Lookback
lookback.io
+

51. riassumendo quindi
a cosa serve fare un prototipo?
- sviscerare meglio il progetto e “immergersi maggiormente”
- empatizzare con gli utenti finali
- avere in modo molto veloce dei navigabili che possono essere
sottoposti ad un primissimo round di feedback
- ridurre di molto le incertezze progettuali riducendo l’insuccesso
- capire e analizzare meglio fattibilità di alcune attività e costi con tutto
il team di sviluppo

52. Qualche consiglio
sui materiali…

53. Basta poco, fidatevi:
- Carta (anche fogli A4)
- Post-it
- Forbici
- Penne / Matite / Pennarelli…
- …qualcosa che “animi” il nostro
prototipo…

54. Pop App (mobile)
popapp.in

55. https://www.youtube.com/watch?v=EGp20lVwUa8

56. Sulla carta…

57. esistono template

58. ma va benissimo
anche la carta
comune A4… anzi…
un piccolo trucco…

59. POST-IT
la misura per tutto

60. 7,6cm

61. A421 x 29,7 cm

62. 3 cmcirca

63. 1,5 cmcirca
la metà di prima
in pratica

64. piegare in orizzontale

65. piegare ancora

66. aprite

67. tagliamo
e…
1 : 1,776
(formato 16:9)

68. un ultima
cosa prima di
disegnare… !

69. PATTERNS

70. Perché è
importante
progettare
utilizzando
i patterns?

71. Errori comuni:
Login “forzato”

72. Possibile soluzione:
Login “forzato”

73. Errori comuni:
Tutorial prolissi
UI/Gesture inusuali

74. Possibile soluzione:
a Tutorial prolissi

75. Errori comuni:
Form troppo lunghi

76. - regole generali -
ui-patterns.com
- esempi da mobile -
pttrns.com
- animazioni per mobile -
capptivate.co
- ispirazione per UI e comportamenti -
dribbble.com

77. IL
PROGETTO

78. Social
network
del calcio!

79. Per cliente target
che ha questo bisogno
il nome prodotto è un categoria prodotto
il quale beneficio principale / ragione d’uso
che a differenza di competitor
il nostro prodotto differenziazione principale
value
proposition

80. Per gli appassionati di calcio
che amano costantemente seguire notizie sulla propria squadra
del cuore, soprattutto durante il calciomercato
il SocialSoccer è un social network
il quale aggrega in un unico luogo tutte le news ufficiali della
propria squadra (presi anche da canali non ufficiali), potendole
commentare, e partecipare a delle chat dedicate di fans
che a differenza di Kick / Footmob
il nostro prodotto permette l’accesso a notizie esclusive (anche
rumors) direttamente da questi canali meno in vista e più faziosi,
e agevola il supporto alla squadra grazie a chat di gruppo
dedicate, e attività social (contest? partnership? etc.)
value
proposition

81. un consiglio…
value
proposition
canvas

83. Funzionalità
-

84. News
stream delle news (squadre seguite)
prese dai vari canali
categorizzazione
condivisione nei social
CLAN
chat rooms
creazione / accesso
consultazione / interazione
gestione clan?
CALCIOMERCATO
stream delle news
sul calciomercato (a sé)
CLUB
info sui club
stream news squadra
prossime attività
accesso ai giocatori / stats / social
match
match della squadra
calendario
formazioni
tabellino / live
classifiche
calssifiche
squadre
marcatori
notifiche
notifiche
eventi in arrivo / live
news in arrivo da stream?
attività chatrooms?
impostazioni
personali
social connect
profilo
squadre seguite
gestione notifiche
gestione clan?
Stream Chat Informazioni Account

85. Prototipiamo
!

86. M AT E R I A L D ES I G N
Prima di agire nella preparazione dei wireframe ho
deciso di dare una controllata alle attuali
potenzialità di material design, per capire quali
saranno i pattern logici e di posizionamento degli
elementi in pagina.
A tal proposito consiglio questi utilissimi siti:
Design Google (linee guida generali)
http://www.google.com/design/
Material color Palette (colori standard e match)
http://www.materialpalette.com/
Material Up (pattern e progetti)
http://www.materialup.com/

87. I O S H U M A N I N T E R FAC E G L
Se invece avessi dovuto agire con dei device Apple,
allora mi sarei guardato ovviamente tutte le
guidelines iOS.
A tal proposito consiglio questi utilissimi siti:
Design for iOS
https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/
MobileHIG/
iOS Design Headlines
http://iosdesign.ivomynttinen.com/
Design + Code
https://designcode.io/

88. Streaming News

90. layout topbar
e scelta categoria

94. accesso alla singola news
e condivisione

98. notizia esclusiva

101. menu

103. ACCOUNT
MENU INFO
CHAT SOCIAL
IMPOSTAZIONI
T&C - PRIVACY

104. lista squadre?

106. aggiungere squadra
da seguire?

110. Proviamo:
- ragionare sui pattern da seguire (iOS o Android)?
- disegnare un’idea di interfaccia base e navigazione (hamburger icon? tab bar? altro?)
- prendere un FLUSSO
ad esempio: straming news -> accesso alla singola notizia -> condivisione
oppure: match -> giornata di campionato -> tabellino partita
- DISEGNARE le schermate del Flusso e le interazioni
ad esempio: disegnare la schermata di streaming notizie con la possibilità di filtaggio
(Squadre preferite, tutta Serie A, tutta Serie B, Calciomercato).
BUON DIVERTIMENTO!