Egy iPhone alkalmazás képernyőinek megtervezése.

1. A koncepciótól a
drótváz tervekig
Kollin Zoltán
App! képzés

2. HELLO
my name is
Kollin Zoltán
ux designer @ mito

3. UX DESIGN?
WTF

4. Mit fogunk ma csinálni?
Megtervezzük, hogyan
működjön az appunk

5. Adott egy brief
(képzeletbeli, de most pont jó lesz)

6. “Kell egy app az
EB-re”
Kulcsszavak:
játék / nyeremény / közösségi / helyszínek

7. A koncepció összeállt

8. Mit kell tudnia az appnak?
1. Fogadás az EB mérkőzéseire
2. Verseny / nyereményjáték
3. Meccsnézős helyszínek listája
Kocsmakereső

9. iPhone appot tervezünk

10. Először egy kis
információgyűjtés

12. Az EB dióhéjban
Június 8. - július 1.
16 csapat, 4 csoportban
Csoportmérkőzések
Negyeddöntő
Elődöntő
Döntő

13. Sportfogadás 1x01
A)Végeredményre tippelek
“3-2 lesz az olaszoknak”
B)Totózom
“az olaszok nyerik a meccset”

14. Helyszínek mobilon

15. Most már kezdhetjük
a tervezést

16. bit.ly/drotvazvideo

17. Vissza a funkciókhoz

18. Mit kell tudnia?
1. Fogadás az EB mérkőzéseire
hazai - vendég - döntetlen
+ odds + tét (virtuális pénz)
2. Verseny / nyereményjáték
toplista
3. Kocsmakereső
térkép / lista

19. A fő funkciók tehát:
Fogadás
Toplista
Helyszínek

20. Mit akar a felhasználó?

21. Fogadás “Este meccs, gyorsan tippelek is rá”
Eredmény? “Megnézem, bejött-e a múltkori tippem”
Toplista “Megelőztem már a haveromat?”
Helyszínek “Valahol meg kéne nézni a meccset”
Eredmény? “Eddig hány meccset találtam el?”

22. A fő funkciók tehát:
Toplista
Fogadás
Eredményeim
Helyszínek

23. Folyamatok

24. Az első lépések
Letöltöm Belépek
Használom
Elindítom FB connect

25. “Használom”
Várok az
Tippelek “Eltaláltam?”
eredményre
Megnézem a
meccset

26. Jegyzeteljünk

27. Fogadások - hogy működjön?
Mérkőzések listája
Új fogadás kötése:
1. kiválasztom a meccset
2. tippelek (pl. döntetlen)
Korábbi 3. megadom a tétemet
mérkőzések
eredményei Mai mérkőzés
kiemelve

28. Toplista - hogy működjön?
Külön a barátaim
és az összes játékos
listája
Helyezés - név - pontszám
(Facebook avatar?)
Saját helyezésem
kiemelve!

29. Helyszínek - hogy működjön?
Kell egy település
választó Hány település lesz? Csak
Budapest? Csak nagyvárosok?
Listás és térképes
megjelenítés a
helyszínekről

30. Eredményeim - hogy működjön?
Mennyire voltam
eredményes eddig?
Hányadik
vagyok a
toplistán?
Hány pontom
van?

31. Az app képernyői
(sitemap)

32. Fogadás
FB belépés
Mérkőzések Mérkőzés
listája oldala
Helyszínek
Toplista Eredményeim
listája
Település
Térkép
választó

33. Drótváz tervezés

34. Mit nem mutat meg?
Hogy pontosan hogy fog kinézni.
Tipográfiát
Grafikai elemeket
Színeket, formákat, vizuális stílust

35. Mit mutat meg?
Alapvető képernyőszerkezetet
Navigációt
Tartalmi blokkokat
A megjelenítendő információkat
Interaktív elemek helyét, működését
Kapcsolatokat, arányokat, hangsúlyokat

36. Pixelpontosság másként
320 px
480 px

37. Forrás

38. Felülettervezési
alapok

39. A mobil nem desktop
Fél szemmel, fél kézzel

40. A mobil nem desktop
FAIL

41. Fél szemmel

42. Fél kézzel

43. Mit hova?
Akciógombok
Tartalom
Navigáció

44. Legyen....
...kevés (mert az igazából több)
...nagy
...gyors
...szellős
...natív (ami lehet)

45. 1. Focus on the Primary Task
2. Elevate the Content that People Care About
3. Think Top Down
4. Give People a Logical Path to Follow
5. Make Usage Easy and Obvious
6. Use User-Centric Terminology
7. Minimise the Effort Required for User Input
Apple’s 27 8. Downplay File-Handling Operations
9. Enable Collaboration and Connectedness
Guidelines for 10. De-emphasise Settings
11. Brand Appropriately
Mobile User 12. Make Search Quick and Rewarding
13. Entice and Inform with a Well-Written Description
Experience 14. Be Succinct
15. Use UI Elements Consistently
Design 16. Consider Adding Physicality and Realism
17. Delight People with Stunning Graphics
18. Handle Orientation Changes
19. Make Targets Fingertip-Size
20. Use Subtle Animation to Communicate
21. Support Gestures Appropriately
22. Ask People to Save Only When Necessary
23. Make Modal Tasks Occasional and Simple
24. Start Instantly
25. Always Be Prepared to Stop
26. Don’t Quit Programmatically
27. If Necessary, Display a License Agreement or Disclaimer

46. Rajzoljunk

47. Mivel rajzoljunk?
Balsamiq HotGloo
Mockingbird iPlotz
Pidoco Pencil
MockFlow OmniGraffle Adobe Illustrator
MS Visio Axure
Gliffy
Photoshop ProtoShare

48. Axure

49. Forrás

50. Képernyőstruktúra

51. Navigáció koncepció
vs

52. A navigáció

53. Nyitóoldal

54. Nyitóoldal = Fogadások
Tartalom:
Fogadás
(a következő meccsre)
Mérkőzéslista
Hány pontom van?

55. Nyitóoldal = Fogadások

56. Variációk dátum választóra

57. Variációk dátum választóra

58. Variációk dátum választóra

59. Variációk dátum választóra
Mérkőzés adatok:
Csapatok
Időpont
Csoport
Oddsok
Fogadás

60. Mérkőzés adatok
A B

61. Mérkőzés adatok
A B

63. NYITÓKÉPERNYŐ?
KÉSZ!

64. Fogadás rögzítése
Tét megadása

65. Tét bevitele
A B

66. Tét bevitele
A B

67. Tét bevitele

68. Fogadás mentése

69. Facebook
✓
Fogadás
connect
✓
Mérkőzések
listája ✓
Mérkőzés
oldala
Helyszínek
Toplista Eredményeim
listája
Település
Térkép
választó

70. Toplista

71. Toplista
Saját helyezés kiemelése
Helyezés, felhasználó, pontszám
Külön barátok és összes játékos

72. Toplista képernyő

73. Toplista képernyő

74. Facebook
✓
Fogadás
connect
✓
Mérkőzések
listája ✓
Mérkőzés
oldala
✓
Toplista
Helyszínek
listája
Eredményeim
Település
Térkép
választó

75. Helyszínek

76. Helyszínek
Település választó
Térképes és listás megjelenítés

77. Helyszínek listája

78. Település választó

79. Sok település van?

80. Vissza a listához
Helyszín adatok, pl:
Champs Sport Pub
Bp, VII. Dohány u. 20.

81. Helyszínek listája

82. Helyszín adatai

83. Helyszínek listája

84. Lista vs térkép

85. Helyszínek ✓

86. Helyszínek összefoglalva:

87. Facebook
✓
Fogadás
connect
✓
Mérkőzések
listája ✓
Mérkőzés
oldala
✓
Toplista
✓
Helyszínek
listája
Eredményeim
✓
Térkép
✓
Település
választó

88. Eredményeim
(profil oldal)

89. Eredményeim
Hány pontom van?
Hányadik vagyok a toplistákon?
Mennyire voltam eredményes?
Mikre fogadtam eddig?
+ My Account info

90. Eredményeim

91. Eredményeim

92. Mi maradt ki?
Rengeteg minden.

93. Facebook
✓
Fogadás
connect
✓
Mérkőzések
listája ✓
Mérkőzés
oldala
✓
Toplista
✓
Helyszínek
listája ✓
Profilom
✓
Térkép
✓
Település
választó

94. Amivel nem foglalkoztunk
• Facebook belépés
• Első indítás
• Súgó / segítség
• Nyeremények /
játékszabályok bemutatása
• Social media megosztás

95. Az első indítás
Letöltöm Belépek
Használom
Elindítom FB connect
Facebook connect gomb
Welcome üzenet:
• mi ez a játék?
• mit és hogy lehet nyerni?

96. Az első indítás

97. Mi van, ha...?

98. Fogadás
Mi van, ha
véget ér az
EB?
Mi van, ha
nincs már
pontom?
Hogy látom
az eredményt
Mi van, ha utólag?
nincsenek
feltöltve az
odds-ok?

99. Toplista képernyő
Mi van, ha
egy barátom
sem játszik?
Mi van, amikor
az elején
mindenkinek
1000 pontja
van? Mi van, ha első
vagyok? Kapok
kiemelést?

100. Eredményeim oldal
Mi van, ha
kilépek?
Mi van, ha
még nem
fogadtam?
Mi van, ha
első vagyok?

101. Mi van, ha...
• nincs internet?
• nem sikerül a FB connect?
• a háttérrendszer nem
működik?

102. “Details matter, it's
worth waiting to get it
right.”
Steve Jobs

103. Ajánlott irodalom

104. Köszi a figyelmet!
Kollin Zoltán
zoltan@kollin.hu | @kollinz