App!Mobil2013. Másfél órás workshop diái, a tematika Mezei Laci lektorálásával készült el.

1. Ügynökségi tréning
vállalati mobilprojektek
tervezéséhez
2013/11/14
edua.dobos@kirowskiisobar.com

2. Helló
Mezei László
Dutka Krisztián
Dobos Édua
Head of UX
kirowski Isobar
UX Designer
kirowski Isobar
UX Designer
kirowski Isobar

3. Mi lesz a program?
1. ETAP
Megnézzük a mobilfejlesztés MINDEN aspektusát
(najó, majdnem minden)
2. ETAP
Összerakunk egy appot prototípusig

4. Hogy állunk itthon
az okostelefon
használattal?

5. Magyarországon
minden harmadik
felnőttnek van
okostelefonja
2,4 millió okostelefon
2013. Q1. eNET
http://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/

6. Minden
második
internetezőnek
2013. Q1. eNET
http://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/

7. 60%-uk nem használja
internetezésre az
okostelefonját
2013. Q1. NRC
http://nrc.hu/hirek/2013/05/15/Kutyukorkep_2013Q1

8. Akik viszont
használják, azok közül
minden második (51%)
naponta
Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratest
http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

9. 29%
Inkább a TV-jét
dobná ki, mint az
okostelefonját
Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratest
Okostelefon-használók, akik az internetet általánosságban használják
okostelefonjukon, n=1000
http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

10. 33%
Használja
rendszeresen a
telefonját netezésre
útközben
Rendszeresen: a pontos kérdés úgy hangzott, hogy az „elmúlt 7 napban”
Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratest
http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

11. 65%
-a a briteknek nem megy
WC-re okostelefon nélkül
http://www.thesun.co.uk/sol/homepage/4808177/POO-KNEW-65-of-Brits-cant-go-tothe-loo-without-a-smartphone.html

12. Desktop vs. mobil látogatások
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái
19%
8%
2012. 11. 06.
Forrás: Webtrends, Google Analytics
2013. 11. 06.

13. Desktop vs. mobil látogatások
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái
19%
8%
2012. 11. 06.
Forrás: Webtrends, Google Analytics
2013. 11. 06.

14. Összehasonlítási alapnak
nézzük az amerikai adatokat
Forrás: Mobile Marketing Statistics 2013 Kleiner Perkins Caufield Byers

15. Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái
12% 24% 12%
Desktop
Mobil
Forrás: Google Analytics Q3
Tablet

16. Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái
12% 24% 12%
Desktop
Mobil
Forrás: Google Analytics Q3
Tablet

17. Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái
Az oldalnak nincs
mobilra optimalizált
nézete!
12% 24% 12%
Desktop
Mobil
Forrás: Google Analytics Q3
Tablet

18. Az internetezési
szokások átalakultak

19. Nem csak
erre kell
felkészülni

20. Ahogy böngészünk
az megváltozott

21. A figyelem korántsem
osztatlan

22. És a körülmények
sem mindig
nyugodtak

23. Új képességek és
lehetőségek

24. Mindig nálad
van

25. Képmegosztás
azonnal

26. Geolokáció

27. Egyéb képességek
•
•
•
•
•
Giroszkóp
Gyorsulásmérő
Segédfény
Push
Kommunikáció a naptárral és címjegyzékkel

28. Vágjunk bele…

29. Mitől lesz sikeres egy projekt?
Üzleti
szempontok
Fejlesztési
szempontok
Felhasználói
szempontok

30. Üzleti szempontok

31. •
•
•
•
•
Mi a célunk?
Mekkora büdzsé van rá?
Mennyi időnk van rá?
Mi illik legjobban a cég profiljához?
Minek lenne a legnagyobb haszna?
Gondoljuk végig…

32. Turné vagy gig?

33. TURNÉ
• „Örökre” szól
• Újra és újra fogják
használni az emberek
• Állandó szolgáltatás,
játék
GIG
• Csak egy időszakra
szól, de nagyot szól
• Promóció,
nyereményjáték, vagy
szórakoztatás

34. TURNÉ
GIG
Ez még nem dönti el, hogy app
vagy mobilra optimalizált
weboldal készüljön

35. Minimum Viable Product
•
•
Biztos, hogy egyetlen nagy ütemre van szükség?
Lehet, hogy kisebb termékben kell gondolkoznunk és több körben megtalálni a jó
megoldást.

36. Fejlesztési szempontok

37. App vagy web?
EZ CSAK EGY ÖKÖLSZABÁLY, DE SEGÍT
Tartalom központú?
Funkció, feladat
központú?
Nem,
akkor web mobil nézeten
Igen,
akkor natív app

38. APPS
Az emberek imádják
az appokat!
Statisztika: Okostelefon tulajdonosok
kétszer annyi időt töltenek appok
használatával (játékok nélkül), mint
webes böngészéssel.
WEB BÖNGÉSZÉS 20% | APPOK 48% | JÁTÉKOK 32%
Forrás: USA népessége
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

39. APP
PRO
• Komplexebb dolgok csak appban
oldhatók meg
• Akár offline módban is használható
• Telefon képességei jobban
elérhetőek
• Gyorsabb
• Az ikon jó dolog, és appoknál
automatikusan települ
KONTRA
• Drága
• Nincs SEO
• Update csak frissítéssel
• Platformfüggő
WEB
PRO
• Kereshető, megosztható tartalom
• Platform függetlenül mindenhol
elérhető megoldás
• Olcsóbb fejlesztés
• SEO
• Frissítések azonnal, folyamatosan
KONTRA
• Csak online elérhető tartalom
• Csak egyszerűbb funkcionalitások
• Telefon képességei korlátozottan
elérhetők

40. Web alapú oldalak
Mobile friendly, optimalizált
vagy reszponzív?

41. 1. Mobile friendly
MI AZ A MOBILE FRIENDLY?
A mobilon is a desktop nézet töltődik be, de a legfőbb
akadályok el vannak hárítva
• Nincs Flash (inkább JavaScriptes slideshow-k és
content rotatorok)
• HTML alapú telefonszámok, címek, email címek, hogy
a telefonos működést képesek legyenek indítani
• Touch miatt nincs hover
• Nagyobb click-target (min. 9 mm)

42. 2. Reszponzív
MI AZ A RESZPONZÍV?
• Ugyanaz a kód töltődik be okostelefonon , desktopon
és tableten, de az elrendezés igazodik a
képernyőmérethez.
• A kisebb felbontásokban prioritások szerint jelenik
meg a tartalom
• A mobil kontextusra reagál a tartalomszervezés

43. PRO
• Jól SEO-zható
• Elég egyszer feltölteni a
tartalmakat – azonos CMS
• Hosszú távú megoldás,
megfelelő tervezéssel
lefedi az álló, fekvő és jó
eséllyel jövőbeli
képernyőfelbontásokat is
KONTRA
• Nagy képek növelik az
adatforgalmat
• Nagyobb első
befektetésre van szükség

44. 3. Optimalizált
A desktop változattól különböző layout mobilra és tabletre, általában
külön aldomainen található oldal (pl.: m.domain-nevem.hu).
PRO
KONTRA
• Ha sok template van a desktop
nézetben akkor ajánlott
• Ha nem akarunk hozzányúlni a
desktop nézethez és annak
CMS-éhez, akkor könnyen
megtehetjük ezt
• Kisebb letöltési méret
• Olcsóbb
• Minden hibát v. változtatást
kétszer (vagy ahány
optimalizált nézetünk van
annyiszor) kell megcsinálni
• Általában külön domain-en
van, ami végső soron gyengíti a
Google rankingünket

45. Appok
Platformok

46. Milyen platform az elterjedtebb?
Platform
http://techland.time.com/2013/04/16/ios-vs-android/

47. Milyen platformot használnak többen?
Költés appokra
Ki aktívabb a neten?
IOS vagy Android
tulajdonsok?
Költés appokra: http://techland.time.com/2013/04/16/ios-vsandroid/ iOS vagy Android: http://chitika.com/insights/hourly-iosandroid-study

48. Felhasználói
szempontok

49. People want holes in their wall not drills
Amerikai marketing mondás

50. Ne a feature-ökből indulj ki, hanem az embereket figyeld
Elütném az időt
valamivel
Gyorsan és
egyszerűen
akarok elintézni
valamit
Valamit le akarok
jegyezni
Meg akarok osztani
valamit
Egy adott helyen
vagyok és ott keresek
valamit

51. A felhasználóknak
valójában nem appokra
van szüksége, hanem
megoldásokra.

52. Mitől lesz jó egy app?
Nézzük konkrét példán:
CLEAR
Egy to-do lista app, ami hetekig vezette a
bevételi és letöltési ranglistákat

53. A to-do listák piaca rendkívűl
telített

54. Ez itt a Clear

55. Hüvelykujjal és gesztusokkal
navigálható, gombmentes
megközelítés

56. Minden fölösleges
funkciót kihagytak
belőle
•
•
•
Nincs emlékeztető
Nincs emailhez rendelés
Kizárólag tennivaló felvitelét,
pipálását és törlését tudja

57. Figyelem a részleteken
Ha minden taskot kipipáltunk a listáról és üressé válik a
képernyő, akkor ha figyelmesek vagyunk idézeteket
vehetünk észre

58. Szép

59. Jól felépített promó
hetekkel a release előtt
A képen a Clear csapata éppen promó videót
készít

60. Mégegy példa:
SOLD
Nem csak egy app, hanem egy átfogó
szolgáltatás

61. Az SOLD iroda segít az árazásban és
megoldja helyetted az értékesítést, a
csomagolást és a postázást.

62. Megvalósítás

63. A projekt menete, mérföldkövek
1.
2.
3.
4.
5.
Legyen kompetenciánk
Business case megteremtése
vagy kérjünk tanácsot
Projektcsapat összeállítása
Tervezés
Fejlesztés és tesztelés, élesítés
Működtetés vagy projekt zárása

64. Hogyan írjunk ki tendert?
•
•
•
•
•
Hol találod meg akiket érdemes meghívni?
Kiről hidd el, hogy alkalmas rá?
Elvárások menedzselése
A tenderanyag 90%-ban a megoldás is
Mi döntsön, ha nem csak az ár?
Munkamódszerek, emberi tényező, kérd hogy
mutassák be, ténylegesen kikkel fogsz dolgozni
• Kérj esettanulmányokat

65. Kivel dolgozzunk?
HÁZON BELÜL
ÜGYNÖKSÉGGEL
KIS CÉGGEL
PROJEKTRE
ÖSSZEÁLLT
CSAPATTAL
• Kiváló
• Full-service
• Kevesebb
tapasztalatszolgáltatást nyújt
erőforrás
• Szabadúszók és
szerzési lehetőség • Biztos szakmai
alvállalkozók
• Jobban
csapata
• Kell egy dedikált
háttér
specializálódnak
ember aki
• Kell egy dedikált
• Tenderre
• Jellemzően
összefogja
ember a projekt
megfelelő időt és
könnyebben
managementre
• Elcsúszhat a
erőforrást tudnak
tudnak
projekt, mert
fordítani
alkalmazkodni • Hátrányt
közös
jelenthet, ha a
erőforrásokat
csapat tagjai nem
többen használják
ismerik egymást
REFERENCIÁK ALAPJÁN DÖNTSÜNK

66. Szerepkörök
(egy ügynökségben)
UI Designer
UX Designer
Account
Manager vagy
PM
Sitebuilder
Back-end
fejlesztő

67. A tervezés lépései
Felkészítő szakasz: User research,
analitika
Tartalom
készítés
Tervezési
szakasz
UX tervezés:
Működés,
felületek,
prototípus
Felhasználói
tesztelés
Felülettervezés

68. A drótváz olyan
mint egy tervrajz
•
Mi honnan nyílik?
•
Milyen funkciók (szobák) vannak?
•
A megrendelő adja az elképzelést, az
építész megoldja, hogy működjön

69. MTVA Olimpiai app
Drót
Design

70. MTVA Olimpiai app
Drót
Design

71. EB app
Drót
Design

72. EB app
Drót
Design

73. Telekom alkalmazás
Drót
Design

74. Kattintható prototípus
http://survey.kirowski.com/thome/joyful4/dragger_A.html

75. Felhasználói tesztelés
Lehetőségek:
• Card sorting: komplex
tartalmak
csoportosítására
• Usability test
• Eye-tracking
• Heat map
• A/B teszt

76. Fejlesztés
Módszertanok
• Waterfall fejlesztés
• Agilis: Scrum, Kanban, Behaviour-driven-development
Mit kell tisztázni?
• Elvárások, szkóp, szállítandó, stb.
• Tisztázzuk a mérföldköveket
• Gondoskodjunk előre a tesztkörnyezetről és a teszt
telefonokról, tabletekről

77. Publikálás
• Android: bármikor (pár óra alatt)
• Google Play regisztráció: 25 USD
• iOS: kb. két hét, de lehet kérni egy alkalommal
(ügyfél/év) gyorsított elbírálást, ami kb. 4-5 nap a
hétvégét is beleértve
• Apple Store regisztráció intézése: a projekt határideje
előtt legalább két hónappal
• Regisztrációs díj: 99 USD
• Windows: kb. egy hét
• Windows LiveID regisztráció: 100 USD

78. Promóció
•
•
•
•
•
App store SEO
• Rankingbe ez számít bele: (Letöltések,
értékelések, fizetősök esetén bevétel, social és
külső hivatkozások)
App store jelenlét: jó ikon, nagyon szép
screenshotok, jó leírás
Social és szakmai kampány
Promó
Egyéb külső hivatkozások

79. Köszönjük a figyelmet!
És most rakjunk össze
egy projektet!
2013/11/08