A koncepciótól a drótváz tervig - Kollin Zoltán

2,178 views

Published on

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

Published in: Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,178
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
29
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

A koncepciótól a drótváz tervig - Kollin Zoltán

  1. 1. A koncepciótól adrótváz tervekig Kollin Zoltán App! képzés
  2. 2. HELLO my name isKollin Zoltánux designer @ mito
  3. 3. UX DESIGN? WTF
  4. 4. Mit fogunk ma csinálni?Megtervezzük, hogyanműködjön az appunk
  5. 5. Adott egy brief (képzeletbeli, de most pont jó lesz)
  6. 6. “Kell egy app az EB-re” Kulcsszavak:játék / nyeremény / közösségi / helyszínek
  7. 7. A koncepció összeállt
  8. 8. Mit kell tudnia az appnak?1. Fogadás az EB mérkőzéseire2. Verseny / nyereményjáték3. Meccsnézős helyszínek listája Kocsmakereső
  9. 9. iPhone appot tervezünk
  10. 10. Először egy kisinformációgyűjtés
  11. 11. Az EB dióhéjbanJúnius 8. - július 1.16 csapat, 4 csoportbanCsoportmérkőzésekNegyeddöntőElődöntőDöntő
  12. 12. Sportfogadás 1x01A)Végeredményre tippelek “3-2 lesz az olaszoknak”B)Totózom “az olaszok nyerik a meccset”
  13. 13. Helyszínek mobilon
  14. 14. Most már kezdhetjüka tervezést
  15. 15. bit.ly/drotvazvideo
  16. 16. Vissza a funkciókhoz
  17. 17. 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 toplista3. Kocsmakereső térkép / lista
  18. 18. A fő funkciók tehát:Fogadás Toplista Helyszínek
  19. 19. Mit akar a felhasználó?
  20. 20. 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?”
  21. 21. A fő funkciók tehát: ToplistaFogadás Eredményeim Helyszínek
  22. 22. Folyamatok
  23. 23. Az első lépésekLetöltöm Belépek HasználomElindítom FB connect
  24. 24. “Használom” Várok azTippelek “Eltaláltam?” eredményre Megnézem a meccset
  25. 25. Jegyzeteljünk
  26. 26. 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étemetmérkőzésekeredményei Mai mérkőzés kiemelve
  27. 27. Toplista - hogy működjön?Külön a barátaimés az összes játékoslistája Helyezés - név - pontszám (Facebook avatar?) Saját helyezésem kiemelve!
  28. 28. Helyszínek - hogy működjön?Kell egy településvá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
  29. 29. Eredményeim - hogy működjön?Mennyire voltameredményes eddig? Hányadik vagyok a toplistán? Hány pontom van?
  30. 30. Az app képernyői (sitemap)
  31. 31. FogadásFB 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ó
  32. 32. Drótváz tervezés
  33. 33. Mit nem mutat meg?Hogy pontosan hogy fog kinézni. Tipográfiát Grafikai elemeket Színeket, formákat, vizuális stílust
  34. 34. 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
  35. 35. Pixelpontosság másként 320 px 480 px
  36. 36. Forrás
  37. 37. Felülettervezési alapok
  38. 38. A mobil nem desktop Fél szemmel, fél kézzel
  39. 39. A mobil nem desktopFAIL
  40. 40. Fél szemmel
  41. 41. Fél kézzel
  42. 42. Mit hova? Akciógombok Tartalom Navigáció
  43. 43. Legyen.... ...kevés (mert az igazából több) ...nagy ...gyors ...szellős ...natív (ami lehet)
  44. 44. 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 InputApple’s 27 8. Downplay File-Handling Operations 9. Enable Collaboration and ConnectednessGuidelines for 10. De-emphasise Settings 11. Brand AppropriatelyMobile User 12. Make Search Quick and Rewarding 13. Entice and Inform with a Well-Written DescriptionExperience 14. Be Succinct 15. Use UI Elements ConsistentlyDesign 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
  45. 45. Rajzoljunk
  46. 46. Mivel rajzoljunk?Balsamiq HotGlooMockingbird iPlotz Pidoco PencilMockFlow OmniGraffle Adobe Illustrator MS Visio Axure Gliffy Photoshop ProtoShare
  47. 47. Axure
  48. 48. Forrás
  49. 49. Képernyőstruktúra
  50. 50. Navigáció koncepció vs
  51. 51. A navigáció
  52. 52. Nyitóoldal
  53. 53. Nyitóoldal = Fogadások Tartalom: Fogadás (a következő meccsre) Mérkőzéslista Hány pontom van?
  54. 54. Nyitóoldal = Fogadások
  55. 55. Variációk dátum választóra
  56. 56. Variációk dátum választóra
  57. 57. Variációk dátum választóra
  58. 58. Variációk dátum választóra Mérkőzés adatok: Csapatok Időpont Csoport Oddsok Fogadás
  59. 59. Mérkőzés adatok A B
  60. 60. Mérkőzés adatok A B
  61. 61. NYITÓKÉPERNYŐ? KÉSZ!
  62. 62. Fogadás rögzítése Tét megadása
  63. 63. Tét beviteleA B
  64. 64. Tét beviteleA B
  65. 65. Tét bevitele
  66. 66. Fogadás mentése
  67. 67. 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ó
  68. 68. Toplista
  69. 69. Toplista Saját helyezés kiemelése Helyezés, felhasználó, pontszám Külön barátok és összes játékos
  70. 70. Toplista képernyő
  71. 71. Toplista képernyő
  72. 72. 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ó
  73. 73. Helyszínek
  74. 74. Helyszínek Település választó Térképes és listás megjelenítés
  75. 75. Helyszínek listája
  76. 76. Település választó
  77. 77. Sok település van?
  78. 78. Vissza a listához Helyszín adatok, pl: Champs Sport Pub Bp, VII. Dohány u. 20.
  79. 79. Helyszínek listája
  80. 80. Helyszín adatai
  81. 81. Helyszínek listája
  82. 82. Lista vs térkép
  83. 83. Helyszínek ✓
  84. 84. Helyszínek összefoglalva:
  85. 85. 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ó
  86. 86. Eredményeim (profil oldal)
  87. 87. Eredményeim Hány pontom van? Hányadik vagyok a toplistákon? Mennyire voltam eredményes? Mikre fogadtam eddig?+ My Account info
  88. 88. Eredményeim
  89. 89. Eredményeim
  90. 90. Mi maradt ki?Rengeteg minden.
  91. 91. 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ó
  92. 92. 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
  93. 93. Az első indításLetöltöm Belépek HasználomElindítom FB connect Facebook connect gomb Welcome üzenet: • mi ez a játék? • mit és hogy lehet nyerni?
  94. 94. Az első indítás
  95. 95. Mi van, ha...?
  96. 96. Fogadás Mi van, ha véget ér az EB?Mi van, hanincs márpontom? Hogy látom az eredményt Mi van, ha utólag? nincsenekfeltöltve az odds-ok?
  97. 97. Toplista képernyő Mi van, ha egy barátom sem játszik?Mi van, amikor az elejénmindenkinek 1000 pontja van? Mi van, ha első vagyok? Kapok kiemelést?
  98. 98. Eredményeim oldal Mi van, ha kilépek? Mi van, ha még nemfogadtam? Mi van, ha első vagyok?
  99. 99. Mi van, ha...• nincs internet?• nem sikerül a FB connect?• a háttérrendszer nem működik?
  100. 100. “Details matter, itsworth waiting to get itright.” Steve Jobs
  101. 101. Ajánlott irodalom
  102. 102. Köszi a figyelmet! Kollin Zoltán zoltan@kollin.hu | @kollinz

×